IMG mit Variable Verschieben

  • Hallo,

    ich möchte ein Bild über eine Variable die über phyton via Flask kommt verschieben (nur geradlinig).

    Ein Verschieben per Mausklick habe ich schon hinbekommen, leider nur noch nicht mit der Variable.

    Wie gehe ich hir vor?




    Liebe Grüße

    Knausbaer_2021

  • Zeig doch erstmal den Code , was du schon geschrieben hast .

    Verschieben über Maus?

    Du meinst sicherlich Drag-and-drop oder ?


    Verschieben über Variable verstehe ich Z. B. so

  • Guten Morgen,

    hab erst am Montag wieder Zugriff auf den Code.


    Nein, nicht via Drag an Drop.

    Ich bekomme einen Wert X & Y was ich auf eine Variable schreibe. Und mit diesen Koordinaten möchte ich dann das Bild verschieben.


    Bsp.:

    Ein Kreis liegt am linken Bildschirmrand, im Hintergrund zählt unregelmäßig ein Zähler bis 100, wenn der Wert 100 erreicht ist soll der Ball den rechten Bildschirm rand erreicht haben.


    Den genauen Endwert des Zählers weis ich, somit kann ich das ganze auch Skalieren.


    Liebe Grüße

  • Guten Morgen Knausbaer, Flask/Python ist ja serverseitig. Ich verstehe dich jetzt so, dass diese Variable sich im Betrieb ändert und Du die Position auf Grund der Variablen laufend neu festlegen willst. In dem Fall müsstest Du die Variable mit Ajax immer neu vom Server holen.


    Edit: Oder gibt die Variable den Endwert an, wohin der Kreis verschoben werden soll?

  • Guten Morgen,


    genau! So meine ich das. :)


    Zum besseren verständnis:

    Ich messe den Abenstand von einen Portalkran mittels Laser zur Hallenwand (per SPS). Die Werte werden auch sauber via OPCUA übergeben und in meiner Webseite Angezeigt. Jetzt will ich jedoch noch eine "Live Visualisierung" machen, d.h. ich möchte mir eine Skizze malen und darauf den Kran dynamisch hin und her fahren lassen, je nachdem wie weit er von der Hallenwand (Wert der Variable) entfernt ist.


    Liebe Grüße

  • OK, dann brauchst Du eine Webseite, die nur den Wert dieser Variablen ausgibt und sonst nichts. Da Du schreibst X und Y würde sich die Kodierung in JSON anbieten, d. h. Du müsstest dies ausgeben:

    {"x": 124, "y": 248}

    Holen dann über Ajax, z. B. mit fetch:

    Code
            fetch('position.json',).then(res => {
                return res.json();
            }).then(res => {
                console.log(res);
                // Jetzt stehen x und y in dekodierter Form
                // im Parameter res zur Verfuegung:
                console.log(res.x);
                console.log(res.y);            
            });
  • Guten Morgen,


    Wir haben den vorschlag von Sempervivum eingefügt, wir fragen/übergeben aber mehrere Variablen, wie im folgende Code zu sehen ist, ab und übergeben dies an die Webseite.


    folgender Codeteil befindet sich im HTML Head Teil

    Hier ein Teil vom Body Quellcode


    Egal was wir als Werte für x bzw. y einsetzen bleibt das Bild bei uns auf der gleichen Position.


    Liebe Grüße

  • Das zweite Javascript macht nicht so wirklich Sinn. Dies:

    {"x": 124, "y": 248}

    muss vom Server zurück gegeben werden.

    Wenn ich mir das erste Skript ansehe, sieht das aber schon recht viel versprechend aus. Es gibt offenbar eine Info data.posKran die die Position des Krans angibt. Allerdings scheint das nur ein Wert zu sein, während Du früher von x und y geschrieben hast. Wie verhält es sich damit?


    Als ersten Ansatz für eine Animation versuche dieses:

    Dann müsste sich das Bild eigentlich schon bewegen. Wenn nicht, wirf einen Blick in die Console, ob Fehlermeldungen zu sehen sind.

  • Die Y-Variable betrifft eine andere Animation die später hinzugefügt werden soll.

    Y betrifft später die $('#posKatze').text(data.posKatze);


    Leider klappt die Animation mit dem obrigen Code nicht. Die Position bleibt unverändert


    PS: dein 2. Beitrag wurde gerae erst gelesen und getstet.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!