Custom GUI, Image Buttons, Overlapping

  • ### UPDATE SEKTION ###

    Link: http://terminal.rkgm.at/index.html


    #CLOSED


    Ältere Versionen
    Datenfunk.zip Version 0.1 [Dropbox]
    Datenfunk.zip Version 0.2 [Dropbox]
    Datenfunk.zip Version 0.3 [Dropbox]
    Datenfunk.zip Version 0.4 [Dropbox]

    Neueste Version
    Datenfunk.zip Version 0.5 [Dropbox]


    Zur Veranschaulichung hier ein Bild des Originals:
    [Blockierte Grafik: https://i.imgsafe.org/8e8214e837.jpg]

    GUI von Version 0.4
    [Blockierte Grafik: https://i.imgsafe.org/8eb4dc42ca.png]


    Source passend zu Version 0.4


    ######################################
    ############ Original Post ##############
    ######################################
    Hallo liebe Leute,

    ich bins mal wieder :whistling:

    Derzeit bin ich an einem neuen Projekt, da das letzte leider im Sand verlaufen ist.

    Also, es geht um ein Programm, welches die Einschulung auf ein Datenfunk-Terminal erleichtern soll.
    Dabei wird ein Terminal simuliert und es können verschiedene Aufträge / Szenarien simuliert werden.

    Nun ist es allerdings schon so, dass ich in der Anfangsphase schon vor einem Problem stehe und einfach nicht genug Hintergrundwissen habe, wenn es um GDI+, Interlaced Images und Image Buttons geht.

    Hier sieht man nun das fertige Terminal-Image.
    [Blockierte Grafik: https://i.imgsafe.org/7ba6ae0fe2.png]
    Bedienelemte:

    Button_Center (Aktiv und Inaktiv)
    [Blockierte Grafik: https://i.imgsafe.org/7bada4e417.png][Blockierte Grafik: https://i.imgsafe.org/7badae750f.png]

    Button_Links/Rechts/Oben/Unten (Aktiv und Inaktiv)
    [Blockierte Grafik: https://i.imgsafe.org/7badb6daac.png][Blockierte Grafik: https://i.imgsafe.org/7badc10a99.png][Blockierte Grafik: https://i.imgsafe.org/7bbd865004.png][Blockierte Grafik: https://i.imgsafe.org/7bbd8c15d6.png][Blockierte Grafik: https://i.imgsafe.org/7bbd91f5f2.png][Blockierte Grafik: https://i.imgsafe.org/7bbda6f003.png][Blockierte Grafik: https://i.imgsafe.org/7bbda1a809.png][Blockierte Grafik: https://i.imgsafe.org/7bbd9b6890.png]


    Nun hab ich allerdings das Problem, dass sich durch die Viertelkreis-Form der Buttons die Bilder überschneiden/überlappen.


    Hier nochmal das Background - Image, welches später quasi als GUI dienen soll:
    [Blockierte Grafik: https://i.imgsafe.org/7be5b40c79.png]

    Ich habs mal mit der Skin UDF von Yashied probiert und leider auch nicht wirklich auf einen grünen Zweig gekommen...
    (Ja ich hab auch die Alpha_Images erstellt)

    Eigentlich würde ich ja auch lieber die GUI ohne Fensterrahmen machen. Aber dem Problem stelle ich mich erst, wenn ich die Buttons im Griff habe.


    Ja ich weiß, es gibt zu dem Thema viel Stoff der schon bearbeitet wurde, allerdings hab ich nicht gefunden, was auch wirklich meinen Vorstellungen entspricht.
    Ich hab die Dateien alle als [.ai | .psb | .bmp | .png].


    Würd mich freuen, wenn jemand einen guten Vorschlag zur Umsetzung hätte! :thumbup:

    Lg Stoani

    mfg, Stoani

    17 Mal editiert, zuletzt von Stoani (24. Januar 2017 um 01:25) aus folgendem Grund: Updates _v0.5

  • Kannst du die Buttons nicht rechteckig lassen?
    An den Ecken wo sich die Buttons treffen kannst du ja einen kleinen Button draus machen und beim Klick darauf prüfen wo auf dem Button geklickt wurde. (Statt 4 machst du 4+4)
    Du rechnest aus ob er oberhalb oder unterhalb des Striches geklickt hat und demnach führst du die Funktion des Buttons aus.

  • Wenn du die Buttons über die anderen legen willst ja, ich dachte eher an sowas (ist im Prinzip eigentlich das gleiche).
    Deine Variante geht halt nicht allzukrass über die Ecken hinaus, aber wie gesagt: ist im Prinzip das gleiche.
    [Blockierte Grafik: http://i.imgur.com/MrUCzt0.png]

    //EDIT: Du solltest aber beachten das bei deiner Variante die Buttons eventuell in den Hintergrund rutschen, weil der davorgelegte Button fokussiert wird!

  • Ahhh jetzt check ichs erst.... Nöööö nicht rechteckig lassen... Ich will doch das Terminal simulieren, dann soll es auch gleich aussehen ;)

    So als aller aller aller letzte Option vielleicht...

    mfg, Stoani

  • Ich weiß jetzt nicht ob dir das was sagt (und ich finds auf die schnelle nicht) aber man kann GUIs erstellen wo ein Bild das Fenster bildet.
    Das Fenster kann man verschieben wenn man auf das Bild klickt und es wird auch nur verschoben wenn man auf eine farbige Stelle klickt, bei transparenten Stellen klickt man stattdessen durch die GUI durch.

    Warum nicht 4 Fenster davon erstellen und mit WinApi SetParent versuchen die in die GUI einzubinden?

  • Gefunden! Zwar nicht ganz das was ich meinte (hier mit Polygonen statt Bildern aber ist sicherlich analog).
    Du kannst die Blätter hin- und herschieben und durch sie durchklicken wenn sie an der Stelle nicht rot sind.

    Ich hab gerade eine dreiviertel Stunde versucht das ganze schon für PNGs zu finden (ich weiß das es das gibt, gabs hier auch schon mal im Forum!!) aber ich finde leider nichts.

  • Ich glaubs nicht, endlich hab ich es gefunden obwohl ich die Hoffnung schon fast aufgegeben hatte. Nimm mal die transparente PNG und trag sie bei $sBilddatei ein und probiers mal aus, das setzt die Region direkt um das Bild herum und mit dem SetParent-Beispiel von vorhin kannst du so deine Buttons erstellen! :)

  • Ich hab da 2014 auch mal was geschrieben. Damals war ich noch nicht so wissend wie heute (Deshalb wurden keine/kaum Arrays genutzt,...) aber es ist hauptsächlich aus Bildern, es gibt eine Hover-Funktion, Bilder ändern sich beim draufklicken,...
    Kannst du dir gerne mal anschauen, vielleicht hilfte es dir weiter oder gibt dir noch ein paar Ideen :)

    MfG Kanashius

  • Hey Kanashius,
    schaut richtig geil aus und geht genau in diese Stilrichtung!

    Eine Frage bleibt aber noch:
    Brauch ich die "GUICtrlOnHover.au3" als Include?
    Die ist nämlich nicht im Skript glaub ich... kann auch sein dass ich mich täusche, erster Kaffee und soooo... ;)


    Hui so schnell.. genau in dem moment gepostet @Oscar
    Danke für das Example.au3, ich werds mir auf der Zunge zergehen lasssen! :)

    mfg, Stoani

    6 Mal editiert, zuletzt von Stoani (13. Januar 2017 um 13:47)

  • Brauch ich die "GUICtrlOnHover.au3" als Include?

    Alles was keine Miete zahlt oder einen Zweck erfüllt: raus!

    Freut mich das wir dir helfen konnten, wenn du - zumindest zu dem Thema - keine Fragen mehr hast kannst du ja den grünen Haken für [gelöst] setzen (1. Beitrag bearbeiten).
    Nichtsdestotrotz würde es uns freuen wenn du uns über dein Projekt am Laufen hältst und hier weiter postest.