NEWS

WillyIobrok

@glasfaser
super, hat alles auf Anhieb geklappt. Jetzt habe ich das, was ich wollte.

Vielen Dank !!!

Willyiobrok

WillyIobrok

Falls es jemanden interessiert - so sieht's jetzt im Moment (immer noch "Baustelle") aus:

Rechts daneben kommt noch eine Europa und/oder Deutschlandkarte und ein Fenster mit der Richtung in Grad hin, dann wird die Seite auf dem iPad hoffentlich noch etwas besser aussehen.

WillyIobrok

@homoran

Moin moin!

Veraltete Version ?
Wenn wir hier über den Adapter vis-jsqui-mfd / „jQuery-UI-Stile Widgets“ reden sollten - ich habe die aktuelle Version 1.0.12 …

Das issue von mrfenyx (wie auch das andere) wurde nach meinem Verständnis aufgrund von Inaktivität automatisch nach einiger Zeit geschlossen.

Anyway, heute Abend werde ich nochmal testen.

Gruß,

WillyIoBrok

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 ...

WillyIobrok

OK, super, dass das doch noch jemanden interessiert

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

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

WillyIobrok

@oliverio

ja, das war auch nicht so iobroker sprezifisch, gebe ich zu.

Ich steuer halt meine ganze Afu-Station über ioBroker( + etliche uProzessoren über mqtt) und wollte durch Tippen/Klicken auf eine bestimmte Position im Bildschirm meine Antenne in die richtige Richtung drehen.
Da ioBroker m.W. das mit Bordmitteln nicht unterstützt war das Widget iFrame mit entsprechender SW-Unterstützung die einzige Möglichkeit.

Vielen Dank nochmal speziell an dich (weiss immer noch nicht, wo der Danke Knopf sitzt ) - werde mich in den angegebenen Quellen entsprechend mal umschauen.

VG, WIllyioBrok

WillyIobrok

@willyiobrok

Hallo zusammen,

aufgrund der Hilfe aus dem Forum, eines Freundes und ChatGPT konnte ich trotz meiner Unkenntnis bzgl. HTML und Javascript nach 4 Jahren mein Ziel erreichen und eine Landkarte mit Antennenrotorsteuerung für den Amateurfunk (weltweit!) erstellen !

Herzlichen Dank dafür!

Damit ist dieser Topic endgültig von meiner Seite aus gelöst !

Ebenso sind folgende Topics gelöst:

2023
bildschrmkoordinaten-eines-mausklicks-tastendrucks
2023
richtungseingabe-durch-tippen-auf-touchscreen
2021
antennenrichtungsanzeige-erweiterte-möglichkeiten
2021
richtungsanzeige-in-landkarte-wie-mache-ich-das

Falls jemand sich für den HTML/javascript code interessieren sollte, stelle ich die gerne zur Verfügung ...

Viele Grüße

WillyIoBrok

WillyIobrok

@oliverio

cool, hat funktioniert !

vielen Dank für die Hilfe (auch der letzte Hinweis war leider notwendig )

WillyIobrok

@oliverio
auweia ... sorry

WillyIobrok

@oliverio

ok, danke für die info. Da brauche ich jetzt mal einige Zeit um das alles zu verarbeiten

jetzt werde ich erstmal "0_userdata.0" usw. anlegen und die Daten irgendwie reinkopieren

was mich wundert ist, daß 0_userdata.0 noch nicht in der directory-struktur unter

/opt/iobroker/iobroker-data/files

sichtbar ist ?!? obwohl ich in iobroker unter objecte schon ein paar lokale variable sehe ?

Screenshot 2025-02-18 210145.png

habe jetzt mal in ioBroker die directories angelegt ... sehe sie aber immer noch nicht im Linux filesystem?!?

WillyIobrok

@oliverio

cool - found

WillyIobrok

@oliverio
OK, super, Danke !

im Moment kämpfe ich mit den Basics ... Wie finde ich im Linux Filesystem des Raspberry Pi, auf dem der ioBroker läuft, die directory "/files/0_userdata.0" ? ... krame gerade mit "Midnight Commander" sämtliche Linux directories durch ...sorry dass ich mich jetzt so blöd anstelle ...

Ich will übigens nicht einen Parameter an die HTML-Seite übergeben, sondern im Falle eines Mausklicks in die Karte einen Parameter (die Himmels-Richtung) bekommen. Geht das auch indem ich der HTML Seite beim Start einen Parameter so wie oben beschrieben, übergebe ?

VG WillyIorrok

NEWS

WillyIobrok

@WillyIobrok

Best posts made by WillyIobrok

Latest posts made by WillyIobrok