4. HTML JQuery NoTimer ?

HTML JQuery NoTimer ?

  • A

    Hallo zusammen,

    ich habe leider ein html problem, da nutze ich essenziell jquery-latest.js
    als lokale developer Version (Klartext)

    Nun lädt meine Seite und in OnReady() wird ein Timer ausgelöst.

    Leider nicht immer, manchmal wird der OnTimer gar nicht initialisiert.

    Inzwischen konnte ich feststellen, das wenn ich im Head das Cashen der Seite
    unterdrücke überhaupt kein Timer mehr ausgelöst wird.
    (Die Seite wird im iframe geladen)

    Der Timer erneuert ständig ein Kamerabild im mjpg tag

    <html>

<head>
    <!--
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="\home\pi\projects\RpiCamSvr\subtil\jquery-latest.js"></script>
    See  https://jquery.com/download/
    -->
    <link rel="stylesheet" href="styles.css">

    <script src="jquery-latest.js"></script>

</head>

<body style="background-color:#000f;" text="#ffffff">
    <div id="cloud_main_page" class="disable-select">
        <div class="cloud_mouse_selection"></div>

        <span id="rcMovTxt"></span>
        <span id="rcDwnTxt"></span>

        <table>
            <tr>
                <td></td>
                <td><img id="JpgCam" src = "startcap.jpg" width="640" height="480" /></td>
            </tr>
        </table>

        <table>
            <tr>
                <form id="rcForm">
                <td><input type="hidden" id="A0" name="rcLeft" value="268" size="1" /> </td>
                <td><input type="hidden" id="A1" name="rcTop" value="248" size="1" /> </td>
                <td><input type="hidden" id="A2" name="rcWidth" value="140" size="1" /> </td>
                <td><input type="hidden" id="A3" name="rcHeight" value="95" size="1" /> </td>
                <!--<td> <input type="button" value="Save" /></td> -->
                </form>
            </tr>
        </table>
    </div>
</body>

<script>

    //https://www.javascript-kurs.de/jquery-tutorial.htm
    //https://code.jquery.com/jquery-latest.js
    //https://www.w3schools.com/jquery/jquery_selectors.asp
    //https://stackoverflow.com/questions/50572939/create-a-mouse-selection-box

    var ajax     = new XMLHttpRequest();
    var timer    = new Date().getTime();
    var TimerId  = 0
    var FrameRdy = true;
    var Lbutton  = false;
    var MouseX   = 0;
    var MouseY   = 0;
    var rcTop    = 0;
    var rcLeft   = 0;
    var rcWidth  = 0;
    var rcHeight = 0;
    var rcInside = false;
    var rcOffset = 0;
    var lsttime  = timer;
    var frmcnt   = 0;
    var PtInRc   = 0;
    var A0InObj  = document.getElementById('A0');
    var A1InObj  = document.getElementById('A1');
    var A2InObj  = document.getElementById('A2');
    var A3InObj  = document.getElementById('A3');
    var ImgObj   = document.getElementById('JpgCam');
    var DoTxObj  = document.getElementById("rcDwnTxt");//store this
    var MvTxObj  = document.getElementById("rcMovTxt");//store this
    var MvTxAjx  = $("#rcMovTxt");
    var DoTxAjx  = $("#rcDwnTxt");
    var SelAjx   = $("#cloud_main_page .cloud_mouse_selection");
    var fname    = window.location.pathname.split("/").pop();
    var imgurl   = document.location;//this server url

    function IsPtInRc(x, y, decr) { return (x >= (rcLeft + decr) && x <= (rcLeft - decr) + rcWidth && y >= (rcTop + decr) && y <= (rcTop - decr) + rcHeight) }

    function InitTimer()
    {
        ImgObj.ondragstart = function () { return false; }

        MvTxObj.style.color   = "#abdbe3";
        MvTxObj.style.opacity = "0.75";

        DoTxObj.style.color   = "#abdbe3";
        DoTxObj.style.opacity = "0.75";

        DoTxAjx.offset({ left: 20, top: 470 });

        rcLeft   = Number(A0InObj.value);
        rcTop    = Number(A1InObj.value);
        rcWidth  = Number(A2InObj.value);
        rcHeight = Number(A3InObj.value);

        MvTxAjx.offset({ left: (rcLeft + 15), top: (rcTop + 11) });
        SelAjx.css({ "top": rcTop, "left": rcLeft, "width": rcWidth, "height": rcHeight });

        window.setInterval("OnTimer()", 66);
    }

    function OnTimer()
    {
        var ti   = new Date().getTime();
        var diff = (ti - lsttime);

        if (diff >= 1000)
        {
            DoTxObj.innerHTML = "Fps(" + Math.round(1000 / Math.round(diff / (1+frmcnt))) + ")";

            lsttime = ti;
            frmcnt  = 0;
        }

        frmcnt++;
        ImgObj.src = imgurl + "/MJPEG-A" + ti.toString();
    }

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

    $(document).on("mousedown mouseup", "#cloud_main_page", function (e)
    {
        if (e.type == "mousedown")
        {
            MouseX  = e.clientX;
            MouseY  = e.clientY;
            Lbutton = true;
            //SelAjx.removeAttr("style");
        }else if (e.type == "mouseup")
        {
            A0InObj.value = rcLeft;
            A1InObj.value = rcTop;
            A2InObj.value = rcWidth;
            A3InObj.value = rcHeight;

            if (rcInside)   
            {
                var formstr = imgurl + "?";
                $.each($('form').serializeArray(), function () { formstr += this.name + "=" + this.value + "&"; });
                ajax.open("POST", formstr + " ");
                ajax.send(null);
            }

            Lbutton  = false;
            rcInside = false;
        }
    })

    $(document).on("mousemove", "#cloud_main_page", function (e)
    {
        var irc  = IsPtInRc(e.clientX, e.clientY, 8);
        rcOffset = SelAjx.offset();

        if (Lbutton && (MouseX != 0 && MouseY != 0))
        {
            if (rcInside == false)
                rcInside = irc;

            if (rcInside)
            {
                rcTop  = e.clientY - (rcHeight >> 1);
                rcLeft = e.clientX - (rcWidth >> 1);
            }
            else
            {
                rcTop    = e.clientY - MouseY;
                rcLeft   = e.clientX - MouseX;
                rcWidth  = Math.abs(rcLeft);
                rcHeight = Math.abs(rcTop);

                if (rcTop < 0) rcTop = e.clientY;
                else rcTop  = MouseY;

                if (rcLeft < 0) rcLeft = e.clientX;
                else rcLeft = MouseX;
            }

            MvTxAjx.offset({ left: (rcLeft + 15), top: (rcTop + 11) });
            SelAjx.css({ "top": rcTop, "left": rcLeft, "width": rcWidth, "height": rcHeight });
        }

        MvTxObj.innerHTML = rcLeft + ":" + rcTop;
    })

    $(document).on("mouseover", "#cloud_main_page .cloud_mouse_selection", function (e){PtInRc = 1;})
    $(document).on("mouseleave", "#cloud_main_page .cloud_mouse_selection", function (e){PtInRc = 0;})

</script>
</html>

    Die Frage also warum sporadisch OnTimer nicht ausgelöst wird, bzw überhaupt nicht ausgelöst wird wenn die no cashing tags aktiviert werden .

    Das geht teilweise so weit, das jedes dritte Browser -reload keinen Timer auszulösen scheint..

    Der Webserver läuft auf einem Raspberry unter Linux mit VisualStudio -Code remote debugger , der Server ist selber geschrieben, und der Fehler liegt eigentlich nicht in dem Server selber, es muss ein dummer Fehler in dem Web doc sein.

    Vielen Dank für Hinweise
    Karsten aus Berlin

    0
Anmelden zum Antworten