Komplette GUI als "Button"

HansJ54

Ich hoffe ich kann meine Idee verständlich beschreiben:

Ich möchte ein Fenster mit Daten ohne Buttons anzeigen und wenn man irgendwo ins Fenster klickt, sollen die Buttons erscheinen - also vorher versteckt. Und auf Klick auf einen Button sollen diese wieder ausgeblendet werden. Geht das?

**SOLVE-SMART** · Poweruser seit 21.01.2023

Guten Abend HansJ54 👋 ,

das geht, ja. Es ist am Ende egal ob du auf Labels (Texte) in der GUI klickst oder auf ein Bild oder auf einen Button.
Sobald der Klick auf das jeweilige Element der GUI (oder auf die GUI selbst) registriert wird, kannst du darauf reagieren und deine Buttons einblenden.

Wie weit bist du denn bis jetzt? Hast du bereits Code den du uns zeigen kannst?

Viele Grüße
Sven

**Alina**

Meinst Du soetwas?

Zur Zeit sind die Buttons beim Start versteckt. Klicks Du einmal in die GUI erscheinen die Buttons, beim zweiten klicken in die GUI sind diese wieder weg.

edit: funktioniert jetzt:
~~Jetzt muss man es nur noch hinbekommen, das es nicht nur einmal funktioniert das die Buttons erscheinen und wieder weg sind. Vielleicht kann da jemand anderes helfen. Wenn es denn das gesuchte ist.~~

edit: funktioniert jetzt auch:
~~Das schließen der GUI funktioniert noch nicht über das Kreuz. Muss noch angepasst werden. Aber jetzt nicht mehr um diese Zeit.~~

Spoiler anzeigen

AutoIt

#include <GUIConstants.au3>

Global $btn1, $btn2, $btn3
Global $buttonsVisible = False
Global $GUIActive = True

Main()

Func Main()
	GUICreate("Buttons SHOW HIDE", 300, 200)
	GUISetState(@SW_SHOW)
	GUIRegisterMsg($WM_LBUTTONDOWN, "OnMouseDown")
	While $GUIActive
		$Msg = GUIGetMsg()
		Switch $Msg
			Case $GUI_EVENT_CLOSE
				OnClose()
		EndSwitch
		Sleep(100)
	WEnd
EndFunc   ;==>Main

Func OnMouseDown($hWnd, $Msg, $wParam, $lParam)
	If Not $buttonsVisible Then
		ShowButtons()
	Else
		HideButtons()
	EndIf
EndFunc   ;==>OnMouseDown

Func ShowButtons()
	If Not $buttonsVisible Then
		$btn1 = GUICtrlCreateButton("Button 1", 50, 50, 100, 30)
		$btn2 = GUICtrlCreateButton("Button 2", 50, 100, 100, 30)
		$btn3 = GUICtrlCreateButton("Button 3", 50, 150, 100, 30)
		GUICtrlSetState($btn1, $GUI_SHOW)
		GUICtrlSetState($btn2, $GUI_SHOW)
		GUICtrlSetState($btn3, $GUI_SHOW)
		$buttonsVisible = True
	EndIf
EndFunc   ;==>ShowButtons

Func HideButtons()
	If $buttonsVisible Then
		GUICtrlSetState($btn1, $GUI_HIDE)
		GUICtrlSetState($btn2, $GUI_HIDE)
		GUICtrlSetState($btn3, $GUI_HIDE)
		$buttonsVisible = False
	EndIf
EndFunc   ;==>HideButtons

Func OnClose()
	$GUIActive = False
	Exit
EndFunc   ;==>OnClose

Alles anzeigen

**Schnuffel**

ich würde in Größe der Gui ein transparentes Label erstellen das ontop steht. Mit einem klick wird das label befeuert und du kannst es deaktivieren und die buttons anzeigen. wenn du auf einen button klickst aktivierst du das label wieder und setzt die button auf hide

**Schnuffel**

hier noch ein Beispiel in einfacher Form als Alternative.

AutoIt

Global $hGUI = GUICreate('',500,400,-1,-1)
Global $Button1 = GUICtrlCreateButton('TestButton 1', 10,10,300,20)
GUICtrlSetState(-1, 32)
Global $Button2 = GUICtrlCreateButton('TestButton 2', 10,100,300,20)
GUICtrlSetState(-1, 32)
Global $Button3 = GUICtrlCreateButton('TestButton 3', 10,200,300,20)
GUICtrlSetState(-1, 32)
Global $Label = GUICtrlCreateLabel('', 0,0, 500,400,Default, 0x00000008)
GUICtrlSetBkColor(-1, -2)
Global $msg

GUISetState()

While 1
	$msg = GUIGetMsg()
	Switch $msg
		Case -3
			Exit
		Case $Label
			GUICtrlSetState($Button1, 16)
			GUICtrlSetState($Button2, 16)
			GUICtrlSetState($Button3, 16)
			GUICtrlSetState($Label, 32)
		Case $Button1
			GUICtrlSetState($Label, 16)
			GUICtrlSetState($Button1, 32)
			GUICtrlSetState($Button2, 32)
			GUICtrlSetState($Button3, 32)
		Case $Button2
			GUICtrlSetState($Label, 16)
			GUICtrlSetState($Button1, 32)
			GUICtrlSetState($Button2, 32)
			GUICtrlSetState($Button3, 32)
		Case $Button3
			GUICtrlSetState($Label, 16)
			GUICtrlSetState($Button1, 32)
			GUICtrlSetState($Button2, 32)
			GUICtrlSetState($Button3, 32)
	EndSwitch
WEnd

Alles anzeigen

Bei Alina werden die Controls der Button aber jedesmal neu erstellt. Das ist nicht unbedingt ideal.

Das kann man sicher auch in eine Funktion packen, wie Alina das schon gezeigt hat, wenn es mehrere Buttons sind.

Da bietet sich dann auch an, die Buttons alle hintereinander zu erstellen.
Dann kann man die auch in einer For $i = $Button1 To $Buttonx ...
durchlaufen lassen

hier noch eine Alternative für viele Buttons:

AutoIt

Global $hGUI = GUICreate('',500,400,-1,-1)
Global $aButton[4] ; Anzahl der Button
$aButton[1] = GUICtrlCreateButton('TestButton 1', 10,10,300,20)
GUICtrlSetState(-1, 32)
$aButton[2] = GUICtrlCreateButton('TestButton 2', 10,100,300,20)
GUICtrlSetState(-1, 32)
$aButton[3] = GUICtrlCreateButton('TestButton 3', 10,200,300,20)
GUICtrlSetState(-1, 32)
Global $Label = GUICtrlCreateLabel('', 0,0, 500,400,Default, 0x00000008)
GUICtrlSetBkColor(-1, -2)
Global $msg

GUISetState()

While 1
	$msg = GUIGetMsg()
	Switch $msg
		Case -3
			Exit
		Case $Label
			_Button_Show()
		Case $aButton[1]
			_Button_Hide()
		Case $aButton[2]
			_Button_Hide()
		Case $aButton[3]
			_Button_Hide()
	EndSwitch
WEnd

Func _Button_Show()
	For $i = 1 To UBound($aButton)-1
		GUICtrlSetState($aButton[$i], 16)
	Next
	GUICtrlSetState($Label, 32)
EndFunc

Func _Button_Hide()
	For $i = 1 To UBound($aButton)-1
		GUICtrlSetState($aButton[$i], 32)
	Next
	GUICtrlSetState($Label, 16)
EndFunc

Alles anzeigen

**Alina**

Schnuffel

Meine Nachtlösung war als Ansatz gedacht.

Je nachdem wie "fit" er im scripten ist wird er sich für die erste oder zweite Lsg. von Dir entscheiden.
Ich weiß ja auch nicht, was er genau vor hat und wie viele Buttons er später in dem GUI haben wird.

Velted

Zitat von HansJ54

Ich möchte ein Fenster mit Daten ohne Buttons anzeigen und wenn man irgendwo ins Fenster klickt, sollen die Buttons erscheinen - also vorher versteckt. Und auf Klick auf einen Button sollen diese wieder ausgeblendet werden. Geht das?

Moin,

das ließe sich eventuell auch mit einem Contextmenü -> GUICtrlCreateContextMenu mit wenig Aufwand lösen.

HansJ54

Kurz mein Ziel (und ich versuche immer gleichzeitig beim Programmieren zu lernen):
Ich habe an unser Balkonkraftwerk eine Shelly PM Mini angeschlossen und frage die Werte getaktet ab (vermeide damit die Deye-Cloud). Habe dafür eine GUI programmiert, die auf unserem Server läuft. Um von zuhause reinschauen zu können ohne Verbindung zum Server lade ich jede Minute einen Screenshot auf eine Webseite hoch. Aus optischen Gründen gefallen mir dabei die 4 Buttons unten rechts nicht. Könnte sie vor dem Screenshot kurz ausschalten, aber auch so wäre die Optik besser ohne. Daher die Idee, sie auszublenden und auf Mausklick irgendwo auf der GUI einblenden. Ist nicht "lebensnotwendig", aber nice to know wie das geht.

Erste Änderung: vor dem Screenshot Buttons ausblenden und nachher zurück (Schnuffel Nr. 2):

Das mit dem Label drüberlegen klappt noch nicht, suche das Problem.

**SOLVE-SMART** · Poweruser seit 21.01.2023

Hi HansJ54 👋 ,

also wenn es dir wirklich nur um die vier Buttons geht, die am Anfang ausgeblendet sein sollen und per Klick auf die GUI eingeblendet werden sollen, dann sollte dir das folgende Beispiel helfen:

AutoIt

#AutoIt3Wrapper_AU3Check_Parameters=-d -w 1 -w 2 -w 4 -w 5 -w 6 -w 7
#AutoIt3Wrapper_AU3Check_Stop_OnWarning=y

Global $bButtonsDisplayed

_Main()

Func _Main()
    Local $mButtons[]

    Local $hGui = GUICreate('gui-demo', 400, 300)

    GUICtrlCreateLabel('test label 1', 15, 15)
    GUICtrlCreateLabel('test label 2', 15, 40)

    $mButtons.Button1 = GUICtrlCreateButton('button 1', 210, 230, 85, 25)
    $mButtons.Button2 = GUICtrlCreateButton('button 2', 300, 230, 85, 25)
    $mButtons.Button3 = GUICtrlCreateButton('button 3', 210, 260, 85, 25)
    $mButtons.Button4 = GUICtrlCreateButton('button 4', 300, 260, 85, 25)

    $bButtonsDisplayed = True
    _HideButtons($mButtons)

    GUISetState(@SW_SHOW, $hGui)

    Local Const $iCloseEventFlag = -3
    Local Const $iMouseDownFlag  = -7

    While True
        Switch GUIGetMsg()
            Case $iCloseEventFlag
                ExitLoop
            Case $iMouseDownFlag
                _ToggleButtons($hGui, $mButtons)
            Case $mButtons.Button1
                MsgBox('', '', 'button 1')
            Case $mButtons.Button2
                MsgBox('', '', 'button 2')
        EndSwitch
    WEnd
EndFunc

Func _ToggleButtons($hGui, ByRef $mButtons)
    Switch GUIGetCursorInfo($hGui)[4]
        Case $mButtons.Button1, _
             $mButtons.Button2, _
             $mButtons.Button3, _
             $mButtons.Button4
            Return
    EndSwitch

    $bButtonsDisplayed = Not $bButtonsDisplayed

    If Not $bButtonsDisplayed Then
        _ShowButtons($mButtons)
        Return
    EndIf

    _HideButtons($mButtons)
EndFunc

Func _HideButtons(ByRef $mButtons)
    Local Const $iHideControlFlag = 32

    GUICtrlSetState($mButtons.Button1, $iHideControlFlag)
    GUICtrlSetState($mButtons.Button2, $iHideControlFlag)
    GUICtrlSetState($mButtons.Button3, $iHideControlFlag)
    GUICtrlSetState($mButtons.Button4, $iHideControlFlag)
EndFunc

Func _ShowButtons(ByRef $mButtons)
    Local Const $iShowControlFlag = 16

    GUICtrlSetState($mButtons.Button1, $iShowControlFlag)
    GUICtrlSetState($mButtons.Button2, $iShowControlFlag)
    GUICtrlSetState($mButtons.Button3, $iShowControlFlag)
    GUICtrlSetState($mButtons.Button4, $iShowControlFlag)
EndFunc

Alles anzeigen

💡 Wichtig: Die _ToggleButtons() Funktion wird per Maus-Klick ausgelöst, tut aber nichts wenn die Buttons geklickt werden. Also dies ist als Ausnahme definiert und kann erweitert werden. Denn du möchtest ja die Buttons nichts ausblenden wenn du darauf klickst (nehme ich an).

Wenn du Fragen haben solltest, frag' gern 🤝 .

Viele Grüße
Sven

Visuelle Darstellung als GIF

**Kanashius**

Wenn du es eh als Webseite haben moechtest, wuerde ich eher die Infos als JSON-Datei hochladen und eine Webseite erstellen, mit der du die json datei auslesen und das ganze dann auch (huebscher) darstellen kannst.

Webseite:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body, html{
                width: 100%;
                margin: 0;
                background-color: #333;
            }
            .center{
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                position: absolute;
            }
            .grid{
                --bg-color-hue: 120;
                display: grid;
                padding: 1rem;
                grid-template-columns: 2fr 1fr 1fr 1fr;
                grid-template-rows: repeat(10, 1fr);
                background-color: hsl(var(--bg-color-hue), 70%, 50%);
                box-shadow: hsl(var(--bg-color-hue), 70%, 30%) 0px 0px 10px 5px inset;
            }
            .grid-col-flex{
                display: inline-flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
        </style>
    </head>
    <body onload="startup()">
        <script>
            function startup(){
                resetFields();
                updateData();
                setInterval(updateData, 10000); // update every 10 seconds
            }
            function getData() {
                return fetch("./data.json").then((res) => {
                        if (!res.ok) {
                            throw new Error(`HTTP error! Status: ${res.status}`);
                        }
                        return res.json();
                    }).catch((error) => JSON.parse('{"error": "'+error+'"}'));
            }
            function updateData(){
                getData().then(data=>{
                    if(data.hasOwnProperty("error")){
                        document.getElementById("solarpower").style.display = "none";
                        document.getElementById("error").textContent = data.error;
                        resetFields();
                        document.getElementById("error").style.display = "block";
                    }else{
                        document.getElementById("solarpower").style.display = null;
                        document.getElementById("error").style.display = "none";
                        resetFields();
                        for (const val in data) {
                            var elem = document.getElementById(val);
                            if(elem!=null)
                                elem.textContent = data[val];
                        }
                        if(data.hasOwnProperty("onlinestate") && data.onlinestate){
                            document.getElementById("solarpower").style.setProperty("--bg-color-hue", "120");
                        }else{
                            document.getElementById("solarpower").style.setProperty("--bg-color-hue", "0");
                        }
                    }
                });
            }
            function resetFields(){
                let divs = document.getElementById("solarpower").getElementsByTagName("div");
                for(let i = 0;i<divs.length;i++){
                    if(divs[i].hasAttribute("data-default")) {
                        divs[i].textContent = divs[i].getAttribute("data-default");
                    }
                }
            }
        </script>
        <div class="center">
            <div id="error"></div>
            <div class="grid" id="solarpower">
                <div style="grid-row: 1/1; grid-column: 1/5; margin:auto; font-weight: 700;">Balkonkraftwerk</div>

                <div style="grid-row: 2; grid-column: 1/3; margin:auto;" id="datetime" data-default="--.--.-- --:--:--"></div>
                <div style="grid-row: 2; grid-column: 3/4;">Online:</div>
                <div style="grid-row: 2; grid-column: 4/5; width: 100%;" id="onlinestate"></div>

                <div style="grid-row: 3; grid-column: 1;">Sonnenaufgang:</div>
                <div style="grid-row: 3; grid-column: 2;" id="sunrise" data-default="--:--:--"></div>
                <div style="grid-row: 4; grid-column: 1;">Sonnenuntergang:</div>
                <div style="grid-row: 4; grid-column: 2;" id="sunset" data-default="--:--:--"></div>
                <div style="grid-row: 5; grid-column: 1;">Start:</div>
                <div style="grid-row: 5; grid-column: 2;" id="start" data-default="--:--:--"></div>
                <div style="grid-row: 6; grid-column: 1;">Ende:</div>
                <div style="grid-row: 6; grid-column: 2;" id="end" data-default="--:--:--"></div>

                <div class="grid-col-flex" style="grid-row: 3; grid-column: 3;"><div id="volt" data-default="-"></div><div></div></div>
                <div class="grid-col-flex" style="grid-row: 3; grid-column: 4;"><div>Max: </div><div id="voltmax" data-default="-"></div><div>V</div></div>
                <div class="grid-col-flex" style="grid-row: 4; grid-column: 3;"><div id="hertz" data-default="-"></div><div>Hz</div></div>
                <div class="grid-col-flex" style="grid-row: 4; grid-column: 4;"><div>Max: </div><div id="hertzmax" data-default="-"></div><div>Hz</div></div>
                <div class="grid-col-flex" style="grid-row: 5; grid-column: 3;"><div id="watt" data-default="-"></div><div>W</div></div>
                <div class="grid-col-flex" style="grid-row: 5; grid-column: 4;"><div>Max: </div><div id="wattmax" data-default="-"></div><div>W</div></div>
                <div class="grid-col-flex" style="grid-row: 6; grid-column: 3;"><div id="ampere" data-default="-"></div><div>A</div></div>
                <div class="grid-col-flex" style="grid-row: 6; grid-column: 4;"><div>Max: </div><div id="amperemax" data-default="-"></div><div>A</div></div>
                <div class="grid-col-flex" style="grid-row: 7; grid-column: 3;"><div id="kwh" data-default="-"></div><div>kWh</div></div>
                <div class="grid-col-flex" style="grid-row: 7; grid-column: 4;"><div id="kwhd" data-default="-"></div><div>kWh/Tag</div></div>

                <div class="grid-col-flex" style="grid-row: 9; grid-column: 1;"><div>Taktung: </div><div id="timing" data-default="-"></div><div>sec.</div></div>
                <div class="grid-col-flex" style="grid-row: 9; grid-column: 2;"><div>Log: </div><div id="log" data-default="-"></div></div>
            </div>
        </div>
    </body>
</html>

Alles anzeigen

Json data.json:

Code

{
  "datetime": "05.02.2024 20:30:53",
  "onlinestate": true,
  "sunrise": "07:59:00",
  "sunset": "17:30:00",
  "start": "08:09:41",
  "end": "17:19:11",
  "volt": 233.9,
  "voltmax": 235.5,
  "hertz": 50.2,
  "hertzmax": 50.2,
  "watt": 0.0,
  "wattmax": 585.4,
  "ampere": 0.000,
  "amperemax": 1.934,
  "kwh": 23.048,
  "kwhd": 2.374,
  "timing": 600,
  "log": true
}

Alles anzeigen

Das ganze spart Datenvolumen beim Hochladen und aktualisiert sich automatisch alle 10 Sekunden. Du musst also nurnoch statt dem Screenshot die JSON Textdatei hochladen

HansJ54

Danke an Solve-Smart, funktioniert einwandfrei.

Und Kanashius bietet die Rettung, da sich ein kleines für mich unlösbares Problem ergeben hat: Screenshots funktionieren anscheinend nicht, wenn der Sperrbildschirm aktiv ist. Habe mich jetzt 2 Nächte lang gewundert, dass, wie ich nachher feststellte, immer der gleiche Screenshot hochgeladen wurde. Ich vermute, dass ein Screenshot im Sperrbildschirm grundsätzlich nicht möglich ist!?
Also werde ich das umstellen auf Hochladen der Daten - ist nur wieder Neuland für mich.
Nicht wundern, über die fehlenden neuen Screenshots bei Nacht (sind ja eigentlich nicht so interessant außer Spannung und Hz), die Screenshots funktionieren natürlich auch tagsüber nur, wenn das Script auf dem offenen Bildschirm läuft.

Und der Link im Footer ist defekt: Meine Website: Kanashius Website (einige meiner Programme sind auch hier zu finden)

HansJ54

Noch eine Bitte: wie erzeuge ich den JSON-String am geschicktesten? Aktuell setze ich ihn einfach als Textstring mit den Namen und Werten zusammen, aber da bietet AutoIt doch sicher eine bessere Lösung. Ich habe mich schon mit der JSON.au3 beschäftigt, aber finde nichts Passendes. Mir schwebt eine Idee vor von einem Array, in dem die Namen der Variablen als Index und zugeordnet die jeweiligen Werte stehen.

Ist kein wichtiges Problem, dient auch nur meiner "Weiterbildung"

**Kanashius**

Ich wuerde eine Map nutzen. Damit bildet man Json sehr gut ab, und du hast nur eine Variable, die du speichern musst und im ganzen Script ueberall verwenden kannst.

AutoIt

Local $mData = _generateMap() ; generate map with default values
$mData.other.something = False ; how to use, here with a map in map usage.
; Be careful, when creating new map entries, always use the $mMap["KEY"] writing, otherwise you will get error messages, reading/changing can be done with $mMap.KEY then
ConsoleWrite(_toJson($mData)&@crlf)

Func _generateMap()
	Local $mData[]
	$mData["datetime"] = "05.02.2024 20:30:53"
	$mData["onlinestate"] = True
	$mData["volt"] = 233.9
	Local $arTest = [12, "numbers", True]
	$mData["test"] = $arTest
	Local $mOtherData[]
	$mOtherData["something"] = True
	$mOtherData.something = False
	$mOtherData["123"] = 123
	$mData["other"] = $mOtherData
	return $mData
EndFunc

Func _toJson(ByRef $data, $iSpace = Default, $bRec = False)
	If Not $bRec And Not IsMap($data) Then return SetError(1, 0, "First object needs to be a map!")
	If $iSpace = Default Then $iSpace = "  "
	Local $sJson = ""
	If IsNumber($data) Then
		$sJson = String($data)
	ElseIf IsBool($data) Then
		$sJson = StringLower($data)
	ElseIf IsMap($data) Then
		$sJson &= "{"&($bRec?"":@crlf)
		Local $arKeys = MapKeys($data)
		For $i=0 to UBound($arKeys)-1 Step 1
			If $i>0 Then $sJson&=", "&($bRec?"":@crlf)
			$sJson&=($bRec?"":$iSpace)&'"'&$arKeys[$i]&'": '&_toJson($data[$arKeys[$i]], $iSpace, True)
		Next
		$sJson &= ($bRec?"":@crlf)&"}"
	ElseIf IsArray($data) Then
		$sJson &= "["
		For $i=0 to UBound($data)-1 Step 1
			If $i>0 Then $sJson&=", "
			$sJson&=_toJson($data[$i], $iSpace, True)
		Next
		$sJson &= "]"
	Else ; assume string;   maybe add more types here, like binary/object/...
		$sJson = '"'&String($data)&'"'
	EndIf
	return $sJson
EndFunc

Alles anzeigen

Edit: Changed Bool to lowercase (thanks for the hint AspirinJunkie)

Komplette GUI als "Button"

Ähnliche Themen

Anzeige langer Bindestrich in Edit

🌍	Au3Forums
🎲	AutoIt (de) Cheat Sheet / en
💎	Code Katas: Eins, Zwei, Drei
🔮	GitHub
🥳	Poweruser seit 21.01.2023
🎭	Sammlung von GitHub Benutzern mit AutoIt Projekten
🔭	Umgang mit Powershell-Output
🔭	Umgang mit SQLite
✂	VSCode-AutoItSnippets
🎬	WebDriver Crashkurs
📑	WebDriver FAQs
👨‍💻	WebDriver Beispiel (Login, Klicks, Daten eingeben, robustes Warteverhalten)
👨‍💻	WebDriver Beispiel (Texte von Website lesen, in CSV überführen)

🌍	Au3Forums
🎲	AutoIt (de) Cheat Sheet / en
💎	Code Katas: Eins, Zwei, Drei
🔮	GitHub
🥳	Poweruser seit 21.01.2023
🎭	Sammlung von GitHub Benutzern mit AutoIt Projekten
🔭	Umgang mit Powershell-Output
🔭	Umgang mit SQLite
✂	VSCode-AutoItSnippets
🎬	WebDriver Crashkurs
📑	WebDriver FAQs
👨‍💻	WebDriver Beispiel (Login, Klicks, Daten eingeben, robustes Warteverhalten)
👨‍💻	WebDriver Beispiel (Texte von Website lesen, in CSV überführen)