Event nicht gekommen

KahnSoft · 05.12.2023

Hallo,

ich habe ein html mit Skript, und alles funktioniert wunderbar, es hat insbesondere Slider die beim loslassen der Maus ein Event geben, darüber informiere ich den Server.

Doch rein sporadisch manches mal wird der Slider bewegt, aber scheinbar kommt das Event sliderMouseUp nicht, und auch die Buttons gehen oft erst beim zweiten male woran kann das liegen ?

HTML:

<head>
    <script src="jquery-latest.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body style="background-color: #000f;" text="#ffffff" >

    <form id="SliderForm">
        <table>

            <tr>
                <td>
                    <input type="range" name="Position" min="0" max="20000" value="0" step="5" oninput="sliderInput(this)" onmouseup="sliderMouseUp(this)" /><br />
                    Position &nbsp<span class="sliderStatus">5</span>
                    <hr style="height:1px; visibility:hidden;" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="range" name="Speed" min="1" max="1000" value="90" step="1" oninput="sliderInput(this)" onmouseup="sliderMouseUp(this)" /><br />
                    Speed &nbsp<span class="sliderStatus">5</span>
                    <hr style="height:1px; visibility:hidden;" />
                </td>
            </tr>


            <tr>
                <td>
                    <input type="button" value="Stop" name="Stop" onclick="ButtonInput(this)" class="styledButtonRed" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="Home" name="Home" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="Reset" name="Reset" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="F1" name="F1" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="F2" name="F2" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="F3" name="F3" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="F4" name="F4" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="F5" name="F5" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="F6" name="F6" onclick="ButtonInput(this)" class="styledButton" />
                </td>
            </tr>
        </table>

        <h1 id="GetPos"></h1>
        <h1 id="Weather"></h1>

    </form>

    <script type="text/javascript">

        var index = 0;
        var sliders = 0;
        var ajax1 = 0;
        var lstPosStr = "";
        var lstWeatherStr = "";
        var htmlPos = 0;
        var htmlWeather = 0;

        function GetServerVar(varStr)
        {
            ajax1.open("GET", document.location, false);//false wait not async=true
            ajax1.setRequestHeader("GETVALUE", varStr);//in pre parse we can find this request value on server, and get the equal variable from LUA-Script
            ajax1.send();
            return ajax1.responseText;
        }

        function OnTimer1()
        {
            var posStr = GetServerVar("gAxisZAct");//in pre parse we can find this request value on server, and get the equal variable from LUA-Script
            if (lstPosStr != posStr)//change anthing only if possible change detected
            {
                lstPosStr = posStr;
                htmlPos.innerText = posStr;//This retreive the LUA -Script variable from Server in this case gAxisZAct
                index[0].value = posStr//slider pos
                sliders[0].innerHTML = " " + posStr;//slider txt
            }
        }

        function OnTimer2() {
   
            var weatherStr = GetServerVar("gWeather");
            if (lstWeatherStr != weatherStr)//change anthing only if possible change detected
            {
                lstWeatherStr = weatherStr;
                htmlWeather.innerText = weatherStr;//This retreive the LUA -Script variable from Server in this gWeather
            }
        }

        function Init()
        {
            ajax1 = new XMLHttpRequest();
            index = document.getElementsByTagName('input');
            sliders = document.getElementsByClassName('sliderStatus');
            htmlPos = document.getElementById('GetPos');
            htmlWeather = document.getElementById('Weather');

            sliders[0].innerHTML = " " + index[0].value;
            sliders[1].innerHTML = " " + index[1].value;

            ajax1.open("PUT", document.location + "?" + index[0].name + "=" + index[0].value + "&" + index[1].name + "=" + index[1].value + "& ");
            ajax1.send();

            setInterval("OnTimer1()", 150);
            setInterval("OnTimer2()", 1000);
        }

        $(document).ready(function () { Init() });

        function ButtonInput(e) {
            ajax1.open("PUT", document.location + "?" + e.name + "=" + e.value, true);//PUT WILL CHANGE AND NOT SAVE
            ajax1.send();
        }

        function sliderInput(e) {
            for (i = 0; i < 2; i++)
                if (e == index[i]) sliders[i].innerHTML = e.value;

            //if (e.name != "Position")//dont overpoll bitrate
            //ajax.open("PUT", document.location + "?" + e.name + "=" + e.value);//PUP WILL CHANGE
            //ajax.send(null);
        }

        function sliderMouseUp(e)//mousup send http request form
        {
            for (i = 0; i < 2; i++)
                if (e == index[i]) sliders[i].innerHTML = e.value;

            ajax1.open("POST", document.location + "?" + e.name + "=" + e.value,true);//PUSH WILL CAHNGE AND SAVE
            ajax1.send();
        }

    </script>

</body>
</html>

Danke für Hinweise

Viele Grüße
Karsten aus Berlin

Sempervivum · 06.12.2023

Nicht sicher ob das die Ursache des Problems ist aber es erscheint mir risikoreich, für alle Anforderungen die selbe Variable ajax1 zu verwenden bzw. das selbe Objekt. Besser für jede Anforderung ein eigenes Objekt oder, noch besser, mit fetch arbeiten, wie früher empfohlen. Dann brauchst Du keine Objekte für das Ajax.

KahnSoft · 06.12.2023

Sehr guter Hinweis,

danke erstmal .. wie schon die Enumerierung andeutete ajax1 - xx habe ich schon Versuche unternommen in einem anderen Kontext.
Das werde ich nochmal neu anwenden, das mit dem Fetch klappte noch nicht auf Anhieb.
Vielen Dank erstmal für deinen Hinweis, ich integriere das die Tage.

Viele Grüße aus Preußen
Karsten

Sempervivum · 06.12.2023

Du brauchst da gar nicht mal x verschiedene Namen zu verwenden sondern kannst die Variable jeweils unter dem selben Namen innerhalb der Funktion definieren:

Code:

function ButtonInput(e) {
            const ajax = new XMLHttpRequest();
            ajax.open("PUT", document.location + "?" + e.name + "=" + e.value, true);//PUT WILL CHANGE AND NOT SAVE
            ajax.send();
}

Dann ist diese Variable nur innerhalb der Funktion gültig und kann sich nicht mit anderen überschneiden.

das mit dem Fetch klappte noch nicht auf Anhieb.

In dem Fall würde es sich lohnen, der Sache nachzugehen, warum es nicht funktioniert hat.

KahnSoft · 26.12.2023

Hallo Sempervivum,

danke für deine Hilfe, inzwischen habe ich gute Ergebnisse, und übe mich im html/java (seit 30 Jahren) wenn möglich nicht zu lange

Aber ein Problem bekomme ich nicht in den Griff, ich erfasse in einem Iframe
15 mal in der Sekunde ein *.jpg (Kamerabild) und im Nachbar Iframe auf der selben Seite zeige ich Achsenparameter , beide sollten mindestens 10Hz erreichen, und das klappt locker in zwei unterschiedlichen
Chrome Sessions. Sowie ich die beiden Stressseiten camget.htm und axis.htm zusammen lege in einen chrome browser mit iframes komme ich nicht mehr auf die Gesamtframerate, das unterbrechen des Bild Empfanges begrenzt die gesamte Request Anzahl Richtung Server.
In einem Video habe ich das Projekt zur Anzeige gebracht mit einem anderen Problem das bereits gelöst ist :

Wie kann man es erlangen, das in zwei iframes eines bodys die selbe Frame rate zustande kommt bezüglich ajax.send (Scheinbar auf 16Hz begrenzt ?)

Danke für Hinweise, und frohe Grüße aus dem Weinachatswald
Karsten aus Berlin.

Sempervivum · 26.12.2023

Hallo Karsten,
scheint ein interessantes Projekt zu sein aber bei dem Video bin ich nicht durch gestiegen, konnte auch den Code nicht lesen.
Mein erster Gedanke war, dass diese diversen Ajax-Anforderungen synchron ablaufen aber wenn ich mir deinen Code ansehe, bestätigt sich das nicht. Auch die Sache, dass alle Anforderungen das selbe Ajax-Objekt benutzten, hast Du behoben.
Hast Du schon Mal in das Netzwerk-Tab gesehen, wie diese Anforderungen zeitlich ablaufen? Vielleicht liefert das Hinweise.
Ob die Tatsache, dass das alles in iFrames abläuft, die Sache ausbremst, kann ich nicht beurteilen. Wenn Du keine Lösung findest, wäre es einen Versuch wert, alles in einer HTML-Seite zusammen zu fassen.
Beste Grüße vom Rande des Elm, Ulrich

KahnSoft · 26.12.2023

Hallo Sempervium,
das gezeigte im Video ist c/c++(Auf Linux) Bezüglich des hergestellten Servers, der neben einer Kamera auch noch 2 Arduino's hostet um über sein Lua-Interface Benutzereingaben zu verteilen, all die Funktionen kommen dann auf dem html -Klienten zur Anzeige.

Es scheint so das die WebBrowser alle requests sammeln und nicht mehr als 15Hz zulassen, um keine Überlastung erzeugen zu können.

Erstmal danke für die Hilfen !
Das hat schon viel gebracht.

Viele Grüße
Karsten

KahnSoft · 18.01.2024

Das Projekt wurde durchgezogen läuft jetzt als Mikroskop Motorhandrad mit eigenem Webserver in c/c++ mit html5 Videostraming auf dem RPI5