gelöst Bildschrmkoordinaten eines Mausklicks/Tastendrucks

WillyIobrok

Hallo zusammen,

ich habe folgendes Problem: Ich möchte die x/y - Koordinaten eines Mausklicks/Tastendrucks innerhalb eines bestimmten, scharf abgegrenzten Bildschirmteils (z.B. eines Rechtecks) erkennen und auswerten.

Wie mache ich sowas am besten? Gibt's hierfür ein Widget?

Gruß,

Wilfried

arteck

@willyiobrok verigss es.. das senden ser x/y koordinate obliegt dem System wo es geklickt wurde.. also Adnroid oder windoows oder linux..

das geht mit einem Wodget nicht

WillyIobrok

@arteck
OK, danke für die Info ... das habe ich mir fast schon gedacht, aber die Hoffnung stirbt halt zuletzt.

Aber irgendwie muß doch vis die Koordinaten vom Betriebssystem bekommen, damit's z.B. in einem Tasten-Widget weiterverarbeitet werden kann. Könnte man da die Info vielleicht anzapfen?

Ich habe schon so grauenhafte Ideen gehabt, daß ich mehrere Tasten-Widgets auf der entsprechenden Fläche verteile, die ich irgendwie unsichtbar(durchscheinend) mache ... man sieht nur den Hintergrund, drückt aber eine unsichtbare Taste im Vordergrund ...

WillyIobrok

... und jetzt habe ich das tatsächlich so gemacht!
Problem (für mich) gelöst. :blush:

Allerdings glaube ich trotzdem, daß eine elegantere Lösung in vis möglich sein müßte. Über eine HTLM Web-Page (google Maps) in einem i-Frame Widget vielleicht?. Ich bin allerdings vom Know How her leider nicht in der Lage, sowas zu realisieren (kann kein HTML).

Trotzdem Danke für die verschiedenen Infos

Grüße

WillyIoBrok

WillyIobrok

@willyiobrok

Und es geht doch!

Ich habe jetzt geschafft, mit dem iFrame- Widget und ein bischen html/javascript code die position eines touches/clicks in einem bestimmten Feld auszuwerten und zur weiteren Verarbeitung in ioBroker zu schicken!

WillyIobrok

MCU

@willyiobrok Bitte das Ergebnis für andere reinstellen. Danke

David G.

Dass es auf einer Website geht, hab ich mir gedacht.

Gab doch früher immer diese Billigen Seiten wo der Cursor einen Schweif oder so hinter sich hergezogen hat oder man Wasser bewegen konnte nur indem man die Maus bewegt hat.

Edit:
Hab grad auch was getestet. So hab ich es hinbekommen (Auch wenn mir noch die Fantasie fehlt, wofür ich es brauchen könnte ^^).

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XY-Koordinaten senden</title>
</head>
<body>
    <p>Klicke irgendwo auf die Seite, um die Mauskoordinaten zu senden.</p>

    <script>
        document.addEventListener("click", function(event) {
            let x = event.clientX;
            let y = event.clientY;
            let url = `http://192.168.99.33:8087/set/0_userdata.0.teststring?value=X:${x},Y:${y}`;

            fetch(url, { method: "GET" })
                .then(response => console.log("Koordinaten gesendet:", x, y))
                .catch(error => console.error("Fehler:", error));
        });
    </script>
</body>
</html>

WillyIobrok

OK, super, dass das doch noch jemanden interessiert :grinning:

bei mir sieht das Ganze im iobroker so aus:

Screenshot 2025-02-23 224745.png

Durch Tippen auf die Weltkarte ("Beamkarte") dreht sich die Antenne in die von mir gewünschte Richtung.

und so sieht der Code aus:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mausklick-Positionserkennung</title>
    <style>
        #clickableArea {
            width: 500px;
            height: 500px;
            position: relative;
        }
        #coordinates {
            margin-top: 20px;
        }

        .centerMarker {
            width: 5px;  			/* Durchmesser des Kreises */
            height: 5px; 			/* Durchmesser des Kreises */
            background-color: red; 	/* Farbe des Kreises */

            border: 1px solid #000;
			border-color: red;

            border-radius: 50%; 	/* Macht die Ecken rund */
            position: absolute;    	/* Absolute Positionierung innerhalb des Vierecks */
            top: 50%;              	/* Vertikal zentriert */
            left: 50%;             	/* Horizontal zentriert */
            transform: translate(-50%, -50%); /* Korrektur der Positionierung */
        }
		.VerticalLine {
            width: 1px;  			/* Dicke der Linie */
            height: 90%; 			/* Länge der Linie */
            background-color: black;/* Farbe der Lnie  */
            position: absolute;    	/* Absolute Positionierung innerhalb des Vierecks */
            top: 5%;              	/* Vertikal zentriert */
            left: 50%;             	/* Horizontal zentriert */
			display: flex;
			align-items: center
		}
		.HorizontalLine {
            width: 90%;  			/* Dicke der Linie */
            height: 1px; 			/* Länge der Linie */
            background-color: black;/* Farbe der Lnie  */
            position: absolute;    	/* Absolute Positionierung innerhalb des Vierecks */
            top: 50%;              	/* Vertikal zentriert */
            left: 5%;             	/* Horizontal zentriert */
		}
    </style>

</head>
<body>


<div id="clickableArea">
	<div class="centerMarker"> </div>
	<div class="VerticalLine"></div>
	<div class="HorizontalLine"></div>
</div>

<!-- Anzeige der Koordinaten-Testausgabe:
<div id="coordinates">Koordinaten: (X: , Y: , deg: )</div>
-->

<script>
//	Anzeige der Koordinaten-Testausgabe:
//    const coordinatesDisplay = document.getElementById('coordinates');

	var direction;

    clickableArea.addEventListener('click', function(event) {
        // Berechne die Position relativ zum Element
        const rect = clickableArea.getBoundingClientRect();
        const x =   event.clientX - rect.left - 250; // X-Koordinate relativ zum Mittelpunkt
        const y = -(event.clientY - rect.top - 250); // Y-Koordinate relativ zum Mittelpunkt

		var rad = Math.atan2(x, y);

		var deg =  180 * rad / Math.PI;	// Bogenmaß (deg) in Grad umrechnen
		if (deg<0) deg = 360 + deg;		// bei negativen Grad-Zahlen: in den Bereich
		direction = deg.toFixed(0);		// 180grad .. 360grad bringen und auf ganze grad normieren
		
//	Anzeige der Koordinaten-Testausgabe:
//        coordinatesDisplay.textContent = `Koordinaten: (X: ${x}, Y: ${y}, deg: ${direction})`;

		// sende die Himmelsrichtung an den ioBroker/mqtt-Server, um den Rotor enstprechend anzusteuern
		fetch(`http://192.168.27.147:8087/set/mqtt.0.rot_tarDsL?value = ${encodeURIComponent(direction)}`, {
			method: "GET"
		})
		.then(response => response.json()) // Antwort als JSON parsen
		.then(data => console.log(data)) // Daten verarbeiten
		.catch(error => console.error('Fehler:', error));

    });
	
</script>

</body>

</html>

Es geht sicherlich auch besser und schöner, aber ich als HTML-dummy und chatGPT habens nicht besser hingebracht und es erfüllt seinen Zweck.

Das einzige, was mich im Moment stört: wenn ich mit der Maus in die cklickable area reinfahre, dann kommen rechts und unten Verschiebebalken (wie heissen die Dinger denn wirklich ?) mit denen ich den zentralen Mittelpunkt und das Fadenkreuz verschieben könnte. Die verschwinden zwar nach einigen Sekunden wieder, aber das will ich nicht ... naja, damit kann ich leben

VG WillyIobrok

OliverIO

@willyiobrok

Wahrscheinlich nennen sich die scrollbalken.
Man könnte die schon abstellen.
Allerdings, wenn ich das richtig lese, machst du das über ein iFrame?
Aus Sicherheitsgründen kapselt der Browser den Inhalt eines IFrame ab.
Das ist auch gut so, da ansonsten viele damit üble Sachen machen würden. Fast alle Werbung kommt in iframes daher und die wollen dich ausschnüffeln.

Daher ist es nicht so einfach css Anweisungen in den Code des iframes hineinzusenden. Wenn die scrollbalken aber ein Effekt des Iframe Elements selbst ist, dann kannst du es mal mit der folgenden Anweisung probieren.
Allerdings sehe ich in deinem beispiellose das iFrame nicht. Auch Nix anderes, wo die Grafik geladen wird.

overflow:hidden;

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

WillyIobrok

@oliverio
vielen Dank für den Hinweis, das hatte mir heute auch schon der ChatGPT gesagt.
Ich habe ca. 3 Stunden gebraucht um die scrollbalken abzuschalten, hab's aber geschafft.

overflow:hidden hat nicht geholfen
aber entweder
die Reduzierung der Fenstergröße im html-code auf 480px * 480px.
oder
die Neupositionierung der ganzen übereinanderliegenden Widgets im View
- zuunterst kommt ein image-widget mit der Karte
- dann kommt ein canvas-gauge Widget mit den Richtungszeigern
- und ganz oben das neu erstellte iFrame Widget zur Richtungseingabe

Diese 3 übereinanderliegenden Layer sind in der Mitte zentriert. Beim händischen Zentrieren im vis-editor habe ich das iFrame Widget so verschoben, dass der Startpunkt auf -1,-1 lag .. deshalb wohl die scrollbalken (?)
das habe ich repariert, jetzt sind sie weg :-)

So ganz genau habe ich's zwar nicht verstanden, aber jetzt ist auf jeden Fall Ruhe ...

Community Forum

NEWS

gelöst Bildschrmkoordinaten eines Mausklicks/Tastendrucks

Support us

902

32.6k

82.0k

1.3m