HTML Gui mit Slidern und Buttons

[chris_ (Gast)]

Mittlerweile eignen sich Browser ganz als GUI-Frontend für z.B. Java 
oder Python Server.

Ich würden gerne eine Oberfläche mit Slider und Buttons machen, sie 
sollen aber frei positionierbar sein.

Hier ist ein Beispiel für die Erstellung von Slidern:
https://www.w3schools.com/howto/howto_js_rangeslider.asp

Leider werden dort die Elemente aber automatisch plaziert.

Gibt es eine Möglichkeit, beliebig viele Elemente frei zu positionieren?

[Εrnst B. (ernst)]

CSS, extern als Datei oder inline:

<input type="range" style="position: absolute; top: 333px; left: 99px; width: 444px">

Ist aber sch***. Damit bist du auf eine Bildschirmauflösung 
festgenagelt, und das Layout kann sich nicht an PC vs. Tablet vs. 
Telefon vs. Hoch/Querformat anpassen.

[chris_ (Gast)]

Danke für das Beispiel.

>Ist aber sch***. Damit bist du auf eine Bildschirmauflösung
>festgenagelt, und das Layout kann sich nicht an PC vs. Tablet vs.
>Telefon vs. Hoch/Querformat anpassen.

Ich finde das nicht so problematisch, weil man ja in das Bild 
hineinzoomen kann.

[chris_ (Gast)]

Hat jemand ein Beispiel für Python, wie man die Sliderposition aus der 
Webseite übertragen kann?

[Εrnst B. (ernst)]

chris_ schrieb:
> Hat jemand ein Beispiel für Python,

Puh. Würde das mit Websockets machen.
Python ist nicht meine Day-To-Day-Sprache, insofern: Besser selber 
Beispiele suchen.

Aber im Prinzip, Server-Seitig im Python:

import websockets
import asyncio

### define request_handler here...

ws_server = websockets.serve(request_handler, "localhost", 1234)

asyncio.get_event_loop().run_until_complete(ws_server)
asyncio.get_event_loop().run_forever()

(Wäre pur Websocket. Vermutlich macht eine Integration mit flask o.Ä. 
mehr Sinn.)

"request_handler" wird dann für jede Nachricht vom Websocket-Client 
ausgeführt.

Client-Seitig im Javascript:

const socket = new WebSocket("ws://localhost:1234");
socket.onmessage = msg=>{console.log("Antwort von Python:",msg);};
socket.send("Hallo Python!");
socket.send({"slider1":123,"slider2":456}); 
...

Edit: Die "websockets"-Doku ist recht ausführlich:
https://websockets.readthedocs.io/en/stable/intro.html#browser-based-example

[Nur_ein_Typ (Gast)]

Εrnst B. schrieb:
> chris_ schrieb:
>> Hat jemand ein Beispiel für Python,
>
> Puh. Würde das mit Websockets machen.
> Python ist nicht meine Day-To-Day-Sprache, insofern: Besser selber
> Beispiele suchen.
>
> (Wäre pur Websocket. Vermutlich macht eine Integration mit flask o.Ä.
> mehr Sinn.)

Für Flask gibt es da das Modul flask-socketio von Miguel Grinberg: [1]. 
Funktioniert wunderbar und sehr einfach. Die andere Frage ist 
allerdings, ob es wirklich nötig oder sinnig ist, Websockets zu 
benutzen, das hängt wohl vom Bedienmodell ab: wenn lediglich eine 
einzelne Slidereinstellung möglichst in Echtzeit übertragen werden soll, 
sind Websockets sicherlich eine feine Sache. Aber wenn mehrere in 
irgendeiner Weise zusammenhängende Einstellungen geändert und dann 
zusammen übertragen werden sollen, ist eine Übertragung mit AJAX 
vermutlich die bessere Alternative.

[1] https://flask-socketio.readthedocs.io/en/latest/

[chris_ (Gast)]

Ich habe mal ein Pythonbeipiel genommen und etwas modifiert. Wenn der 
Slider bewegt wird, gibt Python eine Meldung aus. Ich schaffe es aber 
nicht, den Sliderwert zu übertragen.
Das Problem scheint auf der HTML-Seite zu liegen:

function slider3() {
                var value = parseInt(document.getElementById('slider3').value).toString(10);
                websocket.send(JSON.stringify({action: 'slider'}));
}

Hier der Pythonserver:

#!/usr/bin/env python
# https://websockets.readthedocs.io/en/stable/intro.html#browser-based-example
#!/usr/bin/env python

# WS server example that synchronizes state across clients

import asyncio
import json
import logging
import websockets

logging.basicConfig()

STATE = {"value": 0}

USERS = set()


def state_event():
    return json.dumps({"type": "state", **STATE})


def users_event():
    return json.dumps({"type": "users", "count": len(USERS)})


async def notify_state():
    if USERS:  # asyncio.wait doesn't accept an empty list
        message = state_event()
        await asyncio.wait([user.send(message) for user in USERS])


async def notify_users():
    if USERS:  # asyncio.wait doesn't accept an empty list
        message = users_event()
        await asyncio.wait([user.send(message) for user in USERS])


async def register(websocket):
    USERS.add(websocket)
    await notify_users()


async def unregister(websocket):
    USERS.remove(websocket)
    await notify_users()


async def counter(websocket, path):
    # register(websocket) sends user_event() to websocket
    await register(websocket)
    try:
        await websocket.send(state_event())
        async for message in websocket:
            data = json.loads(message)
            if data["action"] == "minus":
                STATE["value"] -= 1
                await notify_state()
            elif data["action"] == "plus":
                STATE["value"] += 1
                await notify_state()
            elif data["action"] == "slider":
                print('slider received')
                await notify_state()
            else:
                logging.error("unsupported event: %s", data)
    finally:
        await unregister(websocket)


start_server = websockets.serve(counter, "localhost", 6789)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

[Nur_ein_Typ (Gast)]

chris_ schrieb:
> Ich habe mal ein Pythonbeipiel genommen und etwas modifiert. Wenn der
> Slider bewegt wird, gibt Python eine Meldung aus.

Welche?

> Ich schaffe es aber nicht, den Sliderwert zu übertragen.
> Das Problem scheint auf der HTML-Seite zu liegen:
>

> function slider3() {
>                 var value = 
> parseInt(document.getElementById('slider3').value).toString(10);
>                 websocket.send(JSON.stringify({action: 'slider'}));
> }
>

Du holst Dir den eingestellten Wert des Sliders in die Variable "value", 
machst dann aber nichts damit. Probier doch anstelle von

{action: 'slider'}

einmal

{action: 'slider', 'value': value}

zu benutzen. Ansonsten ist mir nicht ganz klar, warum Du den Wert Deines 
Slider erst in eine Integer parst und dann wieder in einen String 
wandelst, gibt es dafür einen Grund? Zudem ist der Parameter der Basis 
für die toString()-Methode ohnehin per Default 10, eine explizite Angabe 
ist also nicht notwendig.

Ansonsten würde ich Dir trotz allem empfehlen, Dir die Arbeit zu 
erleichtern und entsprechende Frameworks zu benutzen, etwa Flask für 
Python und jQuery für JS -- natürlich bedingt das einen kleinen Aufwand 
für die Einarbeitung, spart Dir aber enorm viel Entwicklungszeit, wenn 
Du mehr willst als ein Minibeispiel.

[chris_ (Gast)]

>{action: 'slider', 'value': value}

Danke dafür. Ich hatte das schon probiert, hatte aber 'value' nicht in 
Anführungsstrichen.

Das ursprüngliche Beispiel, welches ich genommen habe, war zu überladen. 
Im Anhang habe ich es mal auf das wesentliche reduziert.
Man kann den Slider jetzt bewegen, Python empfängt den Wert, sendet ihn 
zurück und er wird auf der Webseite in Echtzeit dargestellt.

>Ansonsten würde ich Dir trotz allem empfehlen, Dir die Arbeit zu
>erleichtern und entsprechende Frameworks zu benutzen,

Das ist so ein Aufwand, den ich immer gerne scheue. Ich bin mir noch 
nicht sicher, wie weit ich diesen Versuch hier treiben will und ich 
wollte mich nicht mehrere Tage mit einem Framework beschäftigen.

Ist meine Implementierung im Anhang so einigermaßen OK?

[Nur_ein_Typ (Gast)]

chris_ schrieb:
>> Ansonsten würde ich Dir trotz allem empfehlen, Dir die Arbeit zu
>> erleichtern und entsprechende Frameworks zu benutzen,
>
> Das ist so ein Aufwand, den ich immer gerne scheue. Ich bin mir noch
> nicht sicher, wie weit ich diesen Versuch hier treiben will und ich
> wollte mich nicht mehrere Tage mit einem Framework beschäftigen.
>
> Ist meine Implementierung im Anhang so einigermaßen OK?

Mir ist natürlich bewußt, daß das einen gewissen Einarbeitungsaufwand 
erfordert -- aber den hast Du ohnehin, um Dich in Python, JavaScript und 
Websockets zu fuchsen. Ein leichtgewichtiges Microframework wie Flask 
mit Flask-SocketIO und ein kleines JavaScript-Framework wie jQuery 
erhöhen Deinen Aufwand nur minimal, sorgen aber für deutlich 
aufgeräumteren Code und bieten Dir etliches an Funktionalität, welche Du 
ansonsten mühsam von Hand implementieren, testen und pflegen mußt. 
Unterm Strich verringern sie Deinen Aufwand signifikant. Zum Beispiel 
wirst Du Deine "page.html" irgendwie ausliefern müssen, das heißt: Du 
brauchst einen Webserver. Sowas ist für Entwicklungszwecke bereits in 
Flask enthalten, obendrein eine leistungsfähige Template-Engine und ein 
URL-Mapper... und ein Logging, ein sauberes Exception-Handling, ein 
Debugging und obendrein ein paar Sicherheitsfunktionen, die keiner 
selbst entwickeln, testen und pflegen wollen würde...

Dem entsprechend finde ich auch ein paar Kritikpunkte an Deinem Code, so 
werden Deine Websocket-Requests nicht ordentlich geloggt und Dein 
Exception-Handling ist kaputt. Einfach mal alles in einen try-Block zu 
packen ist auch nicht besonders sinnvoll, nur so als Hinweis: warum wird 
Dein finally-Konstrukt eigentlich nie ausgeführt, obwohl es immer 
ausgeführt werden müßte -- und zwar auch dann, wenn keine Exception 
auftritt? Bitte lies' nochmal in der Dokumentation, was finally macht 
und wozu es da ist... ;-)

[chris_ (Gast)]

>Dem entsprechend finde ich auch ein paar Kritikpunkte an Deinem Code,
Das ist in Ordnung so, ich experimentiere ja gerade ein wenig mit JS un 
den Websockets.

>werden Deine Websocket-Requests nicht ordentlich geloggt

Im Beispiel-Code der original Python-Websockets von hier
https://websockets.readthedocs.io/en/stable/intro.html#browser-based-example
war ein Logging eingebaut.

import logging
...
logging.basicConfig()
...
                logging.error("unsupported event: %s", data)

Da mir das Beispiel für meine Zwecke überladen schien und ich nicht 
weiß, wofür ich es gebrauchen könnte, habe ich es rausgeworfen.

> und Dein
>Exception-Handling ist kaputt. Einfach mal alles in einen try-Block zu
>packen ist auch nicht besonders sinnvoll, nur so als Hinweis: warum wird
>Dein finally-Konstrukt eigentlich nie ausgeführt, obwohl es immer
>ausgeführt werden müßte -- und zwar auch dann, wenn keine Exception
>auftritt?

Falls ich keine Einrückung verschoben habe, war das so im Original von 
oben drinn.

> Bitte lies' nochmal in der Dokumentation, was finally macht
> und wozu es da ist... ;-)

Hmm ...
https://www.w3schools.com/python/ref_keyword_finally.asp
Du hast Recht, finally sollte immer ausgeführt werden.
Mir ist aber nicht ganz klar, was es im Originacode machen soll.

[chris_ (Gast)]

Das Original findet sich unter
"Synchronization example"
hier
https://websockets.readthedocs.io/en/stable/intro.html#browser-based-example