• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Klick-Koordinaten auf einem Bild an Server weitergeben

3

3homi112

Neues Mitglied
Moin,
ich versuche, die Werte eines Reglers und die "Klick-Koordinaten" an eine oder mehrere Dateien auf meinem Linux-Server weitergeben. Für den Regler funktioniert das auch mit diesem Code:

meine HTML:

HTML: 
<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>RGB-LED1</title>
                <link rel="stylesheet" href="../formate.css" type"text/css">
        </head>
        <body>
               <div id="menu">
                <ul>
                        <li id="start"> <a href="../index.html" >Geräteübersicht</a></li>
                        <li id="aktuell"> <a href="led1.html">RGB-LED1</a></li>
                        <!--<li> <a href="led2.html">RGB-LED2</li>-->
                </ul>
               </div>
               <div id="farbkreis_rgb">
                <figure>
                        <img src="../img/farbkreis_rgb.png" width="450" height="450" alt="Farbkreis">
                </figure>
               </div>
               <div id="onoff">
                <label class="switch">
                        <input type="checkbox" name="onoff">
                        <div class="slider round"></div>
                </label>
               </div>
               <div id="helligkeit">
                <input id="slider" type="range" min="1" max="255">
                Helligkeit:<span id="slidernum"></span>%
                </form>
               </div>
                <script>
                        var url = "get_data.php";

                        (function(e, url)
                        {
                                var tm = null;
                                var sendXHR = function()
                                {
                                        var http = new XMLHttpRequest();
                                        var params = "level="+e.value;
                                        http.open("POST", url, true);

                                        //Send the proper header information along with the request
                                        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                                        //Call a function when the state changes.
                                        http.onreadystatechange = function()
                                        {
                                                if(http.readyState == 4 && http.status == 200)
                                                {
                                                        document.getElementById('slidernum').innerHTML = http.responseText;
                        //                              alert(http.responseText);
                                                }
                                        }
                                        http.send(params);
                                };

                                e.addEventListener('input',
                                function()
                                {
                                        if(tm)
                                        {
                                                window.clearTimeout(tm);
                                        }
                                        tm = window.setTimeout(sendXHR, 20);
                                });
                        })(document.getElementById('slider'), url);

                </script>
</body>

</html>

und hier dazu die php (get_data.php):

PHP: 
<?php   ### get_data.php ### utf-8 ### ÄÖÜäöü
    header('Content-Type: text/plain; Charset=utf-8');
    if (isset($_POST['level'])) echo $_POST['level'];
            $f = fopen("/var/www/html/textfile.txt", 'w');
            flock ($f, LOCK_EX);
            fwrite($f, $_POST['level']);
            ftruncate($f, strlen($_POST['level']));
            fclose($f);
?>

Kann mir jemand erklären, wie ich die Koordinaten eines Klicks auf einem Bild in eine Datei senden kann? Ich komme da überhaupt nicht weiter.
Grüße 3homi112
 
Werbung:
Code: 
 <script>
                        var url = "get_data.php";
                     $('Farbkreis').on('mousedown', function (e) {
    var x = e.pageX - $(e.target).offset().left;
    var y = e.pageY - $(e.target).offset().top;
});

                        (function(e, url)
                        {
                                var tm = null;
                                var sendXHR = function()
                                {
                                        var http = new XMLHttpRequest();
                                        var params = "level="+e.value;

                                        http.open("POST", url, true);

                                        //Send the proper header information along with the request
                                        http.setRequestHeader("Content-type", "application/x-www-form-u$

                                        //Call a function when the state changes.
                                        http.onreadystatechange = function()
                                        {
                                                if(http.readyState == 4 && http.status == 200)
                                                {
                                                        document.getElementById('slidernum').innerHTML $
                        //                              alert(http.responseText);
                                                }
                                        }
                                        http.send(params);
    };

                </script>

So habe ich das jetzt eingebaut, aber das tut nicht was es soll. Wahrscheinlich ziemlich einfach, aber ich bin blutiger Anfänger und habe noch nicht wirklich viel Ahnung, was ich da tue.

Letztlich soll das auch mit Touch funktionieren, ja. Ich bin mir aber noch nicht ganz klar wie genau ich das machen möchte.

Grüße 3homi112
 
HTML: 
<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>RGB-LED1</title>
                <link rel="stylesheet" href="../formate.css" type"text/css">
                <script src="/home/pi/jquery-3.2.1.min.js">
                type="text/javascript"></script>
        </head>
        <body>
               <div id="menu">
                <ul>
                        <li id="start"> <a href="../index.html" >Geräteübersicht</a></li>
                        <li> <a href="led1.html">RGB-LED1</a></li>
                        <!-- <li id="aktuell"> <a href="led2.php">RGB-LED2</li>-->
                </ul>
               </div>
                        <img id="farbkreis" src="../img/farbkreis_rgb.png" width="450" height="450" alt="Farbkreis">

                <script>
        function sendCoords(x, y, url) {
            $.ajax({
                url: url,
                method: "POST",
                data: { x: x, y: y },
                success: function () {
                    console.log("x, y were transmitted successfully");
                }
            });
        }
        $('#farbkreis').on('mousedown', function (e) {
            var x = e.pageX - $(e.target).offset().left;
            var y = e.pageY - $(e.target).offset().top;
            console.log(x, y);
            sendCoords(x, y, "savecoords.php");
        });
        $('#farbkreis').on('touchstart', function () {
            var t = e.originalEvent.touches[0];
            var x = t.pageX + $(window).scrollLeft() - $(e.target).offset().left;
            var y = t.pageY + $(window).scrollTop() - $(e.target).offset().top;
            sendCoords(x, y, "savecoords.php");
        });
    </script>


</body>

</html>

savecoord.php (im gleichen Verzeichnis):
PHP: 
<?php   ### savecoords.php ### utf-8 ### ÄÖÜäöü
    header('Content-Type: text/plain; Charset=utf-8');
    if (isset($_POST['x'])) echo $_POST['x'];
            $f = fopen("/var/www/html/textfile.txt", 'w');
            flock ($f, LOCK_EX);
            fwrite($f, $_POST['x']);
            ftruncate($f, strlen($_POST['x']));
            fclose($f);
?>

Was läuft da jetzt falsch? Ich gebe zwar jetzt nur "x" in die Datei aus aber auch das will nicht funktionieren. Die Datei jquery-3.2.1.min.js hab ich mir von der offziellen Downloadseite geholt und in das Verzeichnis kopiert.
Grüße 3homi112
 
Werbung:
Der Tipp mit der Konsole war gut, jetzt weiß ich auch was die soll :D. Der Pfad für jquery wurde nicht richtig gelesen, das habe ich jetzt aber gelöst. Vielen Danke für dein Skript, bei weiteren Fragen melde ich mich.
Grüße 3homi112
 
Noch eine Sache, wo wir schon dabei sind: Kann ich mir den Punkt, an dem ich geklickt habe, anzeigen lassen? Nicht die Koordinaten, eher visuelles Feedback in Form eines kleinen Kreises auf dem Bild. Dann hätte ich alle Funktionen, die ich brauche.
 
Naja mit den Koordinaten ist das ja nur noch Mathe und das liegt mir deutlich besser als HTML oder der ganze zugehörige Kram :D. Das lässt sich über ein bash Skript sicher regeln
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben