Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

verkel

@s-bormann sagte in Test Adapter iQontrol 1.2.x:

@verkel sagte in Test Adapter iQontrol 1.2.x:

@kassmann sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Ich habe mir ebenfalls die Wetterdaten mit eingebunden. Ich hätte gern :grin: in der Kachel mehr Anzeigen (z.B.: Höchsttemperatur, Tiefsttemperatur, Regen, Sonnenschein, Schneegrenze, usw.). Ich habe leider keine Kachel gefunden, bei der ich mir mehr als zwei (z.B.: Temp. Sensor) anzeigen lassen kann. Gibt es einen Weg oder eine Änderung in diese Richtung? Wäre vielleicht auch für andere von Nützen.

Würde es auch gehen die Daten unter "ADDITIONAL_INFO" gleich beim druck auf die Kachel anzuzeigen, ohne diese erst im folgenden Fenster durch drücken des + Zeichens zu öffnen?

Ansonsten kann ich immer nur wieder meine Begeisterung über diesen Adapter zum Ausdruck bringen. :blush: :+1:

Wenn es so eine Kachel irgendwann mal geben würde, würde ich mich da auch drüber freuen.

Hi,

das mit den zusätzlichen Infos steht schon auf meiner Wunschliste. Mal schauen, wie und wann ich Zeit finde :) Habe am Wochenende Bereitschaft - kommt also darauf an, wie oft ich "gestört" werde ;) Nein, im Ernst, ich glaube, dafür brauche ich noch ein bisschen, weil es vermutlich nicht ganz so leicht zu implementieren sein wird.

Das mit dem ADDITIONAL_INFO ist seit kurzem konfigurierbar, schau mal in den Optionen des Gerätes nach.

VG

Oh ja Bereitschaft kenn ich:-(. Man kann es jetzt ja über Skripte lösen, wenn man mehr Infos haben möchte. Aber schön das es vielleicht irgendwann Mal möglich ist.

Mal was anderes: wollte mir ein Tablet an die Wand hängen. Habt ihr da Tips für mich, was man da so nehmen kann.

Und nochmals besten Dank an @s-bormann für die super schnelle Bearbeitung von Problemen und Wünschen. Eine ruhige Bereitschaft wünsche ich:-)

blackeagle998

@verkel
Bezüglich Tablet:
Ich habe ein Galaxy Tab A 10.1 genommen und es mit zwei Magneten an der Wand befestigt, siehe hier:
https://www.amazon.de/dp/B07411ZXHM/ref=cm_sw_r_cp_apa_fab_bY7yFb1XVJ3GK

Wenn man die Magnete diagonal versetzt anklebt hält das bombenfest und hat zugleich den Vorteil, das man es schnell abnehmen kann.

blackeagle998

@s-bormann
Wenn ich einen HTML Button auf einer Kachel platziere, kann ich darüber irgendwie einen iobroker Datenpunkt steuern?
Wenn ja, wie?

DragonDope

Ich habe die auf die Version 1.2.4. upgedatet. Echt super die neuen Funktionen, erstmal vielen Dank!

Mir ist jedoch aufgefallen, dass wenn ich einer Kachel "Verknüpfung zu anderer Ansicht" bei BACKGROUND_URL einen Datenpunkt eintrage, ich leider nicht mehr zur der verknüpften Seite weitergeleitet werde. Das Bild zeigt er mir in der Kachel korret an.

Muss ich dabei noch etwas beachten, oder ist das ein BUG?

CrazyFloyd

Moin Moin. Ich habe seit neuestem auch ein Problem was bis vor kurzem noch klappte. Ob es mit dem update auf 1.24 zusammen höngt kann ich nicht sagen. Auf jedenfall wird meine Icon Verknüfung mit einer Zustandsanzeige nicht mehr angezeigt. |data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 40 40"><path fill="none" stroke="black" stroke-width="4" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path><path fill="none" stroke="lightblue" stroke-width="4" stroke-linecap="round" stroke-dasharray="{xxxx.0.xxxxxx.Rooms.1.heatingPower}, 100" transform="rotate(-90 18 18)" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg-

blackeagle998

@dslraser
Als kleine Analog Uhr kann ich dir das hier anbieten:

Kopiere den kompletten Code in einen String-Datenpunkt und hinterlege diesen in der Kachel als Background-HTML Datenpunkt:

</html>
	<head>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #E5C38B;
			}
			
			article {
				display: flex;
			}
			
			section {
				flex:1;
			}

			.clock {
				width: 70vh;
				height: 70vh;
				border-radius: 50%;
				background-color: #6DB7C1;
				border: 10vh #0E475A solid;
				position: relative;
			}

			.clock .hand {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -100%);
				transform-origin: center bottom;
				border-radius: 10vh;
			}

			.clock .s-hand {
				height: 38%;
				width: 1vh;
				background-color: #D85534;
				z-index: 5;
			}

			.clock .m-hand {
				height: 42%;
				width: 3vh;
				background-color: #027C91;
				z-index: 4;
			}

			.clock .h-hand {
				height: 45%;
				width: 5vh;
				background-color: #0E475A;
				z-index: 3;
			}

			.clock .center {
				background-color: #D85534;
				width: 5vh;
				height: 5vh;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 6;
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="s-hand hand"></div>
			<div class="m-hand hand"></div>
			<div class="h-hand hand"></div>
			<div class="center"></div>
		</div>
		<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
		<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  
		<script id="rendered-js" >
			$(document).ready(function () {

			  setInterval(function () {
				getTime();
			  }, 50);

			  function getTime() {
				var d = new Date();

				var s = d.getSeconds() + d.getMilliseconds() / 1000;
				var m = d.getMinutes();
				var h = hour12();

				$(".s-hand").css("transform", "translate(-50%, -100%) rotate(" + s * 6 + "deg)");
				$(".m-hand").css("transform", "translate(-50%, -100%) rotate(" + m * 6 + "deg)");
				$(".h-hand").css("transform", "translate(-50%, -100%) rotate(" + (h * 30 + m * 0.5) + "deg)");

				function hour12() {
				  var hour = d.getHours();

				  if (hour >= 12) {
					hour = hour - 12;
				  }

				  if (hour == 0) {
					h = 12;
				  }
				  return hour;
				}
			  }
			});
		</script>
		<script src="https://static.codepen.io/assets/editor/iframe/iframeRefreshCSS-e03f509ba0a671350b4b363ff105b2eb009850f34a2b4deaadaa63ed5d970b37.js"></script>
	</body>
</html>

dslraser

@blackeagle998 👍

2_5413396115821168699.mp4

albi_63

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

Kopiere den kompletten Code in einen String-Datenpunkt und hinterlege diesen in der Kachel als Background-HTML Datenpunkt:

Hy
Wie oder wo hinterlege ich in der Kachel das Background-HTML?
Danlke dir

blackeagle998

@albi_63

dslraser

@blackeagle998
ich habe mal etwas Dein Script umgebaut. (eigentlich nur, ob der anzulegende eigene Datenpunkt existiert, wenn nicht wird er angelegt. Das verhindert den Fehler beim ersten Start, wenn der Datenpunkt noch nicht existiert. Aber meine JS Kenntnisse halten sich sonst in Grenzen, ich mache sonst fast ausschließlich Blockly)

const eigenerDatenpunkt = '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V4'

if(!existsState(eigenerDatenpunkt)) createState(eigenerDatenpunkt, 
{type: 'string', name: 'iQontrol Uhr', role: 'value', read: true , write: true});


schedule("*/10 * * * * *", function () {
 setState(eigenerDatenpunkt, fctUhrzeitDatum_V4());
})

function fctUhrzeitDatum_V4() {
   let Uhrzeit                 = String(formatDate(new Date(), "hh:mm"));
   let Datum                   = String(formatDate(new Date(), "DD.MM.YYYY"));
   let Wochentag               = String(formatDate(new Date(), "WW", "de"));
   
   let str_color_body      = '#005c78';
   let str_color_cell      = '#47575c';
   let str_color_font      = 'White';
   let str_position_font   = 'center'
   let str_HTML            = '';
   let str_HTML_style      = '';

   str_HTML_style = str_HTML_style + '<style>';
   str_HTML_style = str_HTML_style + 'body {background-color:' + str_color_body + ';}';
   str_HTML_style = str_HTML_style + 'article {display: flex;}';

   str_HTML_style = str_HTML_style + 'section {';
   //Rahmenfarbe und abgerundete Rahmenecken
   str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border-color:Black;';
   //Hier kann der Rahmen der Section bestimmt werden. 0px = aus / 1px = dünner Rahmen usw.
   str_HTML_style = str_HTML_style + 'border:0px solid gainsboro;';
   //Außenabstand der Section nach oben, links und rechts
   str_HTML_style = str_HTML_style + 'margin-top:1vw;margin-left:14vw;margin-right:3vw;';
   //Innenabstände in der Section
   str_HTML_style = str_HTML_style + 'padding:0vw;';
   str_HTML_style = str_HTML_style + 'flex:1;';
   str_HTML_style = str_HTML_style + '}';

   str_HTML_style = str_HTML_style + 'p {';
   //Rahmenfarbe und abgerundete Rahmenecken
   str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border-color:White;';
   //Hier kann der Rahmen der Boxen bestimmt werden. 0px = aus / 1px = dünner Rahmen usw.
   str_HTML_style = str_HTML_style + 'border:0px solid gainsboro;';
   //Außenabstand der Box nach oben
   str_HTML_style = str_HTML_style + 'margin:-1vw;';
   //Innenabstände in der Box
   str_HTML_style = str_HTML_style + 'padding:1vw;';
   //Zeilenhöhe
   str_HTML_style = str_HTML_style + 'line-height:1;';
   //Textausrichtung
   str_HTML_style = str_HTML_style + 'text-align:' + str_position_font + ';';
   //Wer keine Hintergrundfarbe für die Boxen will, kommentiert die nachfolgende Zeile aus oder löscht sie.
   str_HTML_style = str_HTML_style + 'background-color:' + str_color_cell + ';';
   //Schriftfarbe
   str_HTML_style = str_HTML_style + 'color:' + str_color_font + ';';
   str_HTML_style = str_HTML_style + '}';
   
   //Hier habt ihr die Möglichkeit, CSS Eigenschaften für jede Box einzeln einzutragen.
   //Bspw. könnt ihr hier eine separate Hintergrundfarbe einstellen, siehe box_datum, Hintergrundfarbe = rot
   //Außerdem steuert ihr hier die Schriftgrößen der einzelnen Boxen
   str_HTML_style = str_HTML_style + '.box_uhr {font-size:16vw;}';
   str_HTML_style = str_HTML_style + '.box_datum {font-size:6vw;background-color:red;}';
   str_HTML_style = str_HTML_style + '</style>';

   str_HTML = str_HTML_style;
   str_HTML = str_HTML + '<html><body><article><section>';
   str_HTML = str_HTML + '<p class="box_uhr"><b>' + Uhrzeit + ' Uhr</b></p>';
   str_HTML = str_HTML + '<p class="box_datum"><i>' + Wochentag + ', ' + Datum + '</i></p>';
   str_HTML = str_HTML + '</section></article></body></html>';

   return str_HTML;
}

Mitico

@s-bormann

Danke für das einfügen der Funktionen Gerätename ausblenden aktiv/inaktiv leider bewirkt es keine Änderung wenn man es auswählt !

Es geht doch. Mein Fehler habe denn Browserverlauf noch gelöscht jetzt geht’s. Danke Obolus ist unterwegs

blackeagle998

Digitaluhr Version 05:
Changelog:

die Darstellung basiert jetzt komplett auf sogenannten Flexboxen, die sich dynamisch anpassen sollen
im Skript wird geprüft, ob der Datenpunkt existiert, falls nicht wird er angelegt (Danke @dslraser)
der Datenpunktname steht jetzt als Konstante im Skript
die erste Befüllung des Datenpunkts nach Skriptstart wird mit einer Sekunde Verzögerung ausgeführt. Somit sollte es zu keinem Fehler mehr kommen.

Hier nun das komplette Skript für die Digitaluhr:

const DP_Uhr_digital = '0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V5';

fctInit();

function fctInit(){
   if(!existsState(DP_Uhr_digital)) {
       createState(DP_Uhr_digital,
           {type: 'string', name: 'iQontrol Uhr', role: 'value', read: true , write: true}
       );
   }
   setStateDelayed(DP_Uhr_digital, fctUhrzeitDatum_V5(), 1000);
   schedule("*/10 * * * * *", function () {
       setState(DP_Uhr_digital, fctUhrzeitDatum_V5());
   })
}

function fctUhrzeitDatum_V5() {
   let Uhrzeit                 = String(formatDate(new Date(), "hh:mm"));
   let Datum                   = String(formatDate(new Date(), "DD.MM.YYYY"));
   let Wochentag               = String(formatDate(new Date(), "WW", "de"));
   
   let str_color_body      = '#005c78';
   let str_color_cell      = '#47575c';
   let str_color_font      = 'Silver';
   let str_position_font   = 'center'
   let str_HTML            = '';
   let str_HTML_style      = '';

   str_HTML_style = str_HTML_style + '<style>';
   str_HTML_style = str_HTML_style + 'body {background-color:' + str_color_body + '}';
   
   str_HTML_style = str_HTML_style + '.container {';
   //Höhe des Containers festlegen (Basis = Body Element)
   //str_HTML_style = str_HTML_style + 'height: 90%;';
   str_HTML_style = str_HTML_style + 'display: flex;';
   //Elemente werden untereinander dargestellt
   str_HTML_style = str_HTML_style + 'flex-direction: column;';
   //Elemente werden horizontal zentriert
   str_HTML_style = str_HTML_style + 'justify-content: center;';
   //Elemente werden vertikal zentriert
   str_HTML_style = str_HTML_style + 'align-content: center;';
   str_HTML_style = str_HTML_style + '}';

   str_HTML_style = str_HTML_style + '.element {';
   str_HTML_style = str_HTML_style + 'flex:0 1 auto;';
   //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
   //str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border:0px solid gainsboro;border-color:White;';
   //Elemente werden horizontal zentriert
   str_HTML_style = str_HTML_style + 'justify-content: center;';
   //Elemente werden vertikal zentriert
   str_HTML_style = str_HTML_style + 'align-content: center;';
   //Textausrichtung
   str_HTML_style = str_HTML_style + 'text-align:' + str_position_font + ';';
   //Wer keine Hintergrundfarbe für die Boxen will, kommentiert die nachfolgende Zeile aus oder löscht sie.
   //str_HTML_style = str_HTML_style + 'background-color:' + str_color_cell + ';';
   //Schriftfarbe
   str_HTML_style = str_HTML_style + 'color:' + str_color_font + ';';
   str_HTML_style = str_HTML_style + '}';
  
   //Hier habt ihr die Möglichkeit, CSS Eigenschaften für jede Box einzeln einzutragen.
   //Bspw. könnt ihr hier eine separate Hintergrundfarbe einstellen.
   //Außerdem steuert ihr hier die Schriftgrößen der einzelnen Boxen
   str_HTML_style = str_HTML_style + '.box_uhr {font-size:18vmax;}';
   str_HTML_style = str_HTML_style + '.box_datum {font-size:8vmax;}';
   str_HTML_style = str_HTML_style + '</style>';

   str_HTML = str_HTML + '<html><head>' + str_HTML_style + '</head><body class="container">';
   str_HTML = str_HTML + '<div class="element"><span class="box_uhr"><b>' + Uhrzeit + ' Uhr</b></span></div>';
   str_HTML = str_HTML + '<div class="element"><span class="box_datum"><i>' + Wochentag + ', ' + Datum + '</i></span></div>';
   str_HTML = str_HTML + '</body></html>';

   return str_HTML;
}

dslraser

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

Digitaluhr Version 05:

Ich habe jetzt doch die digitale Variante drinn😂

blackeagle998

@s-bormann
Ich verzweifle irgendwann noch.
Jetzt dachte ich, mit V.05 der Digitaluhr eine Variante gefunden zu haben, wo sich die Flexboxen vernünftig skalieren, aber Pustekuchen.
Ich schaffe es einfach nicht, dass die Skalierung auf PC und mobilem Endgerät gleich aussieht.

Der "body" Bereich einer 2x1 Kachel passt super, solange das Browserfenster maximiert ist. Sobald ich das Fenster verkleinere, passt sich zwar die Kachelgröße an, aber nicht der "body" Bereich und somit reicht dieser über die Kachel hinaus.

Ist das ein Bug oder geht das nicht anders?

dslraser

@blackeagle998
Ich habe Dein Script in einer 3x1 Kachel, das funktioniert wie gewünscht. Wie sieht denn der Fehler aus (Screenshot), kann ich mir gerade nicht so vorstellen was Du meinst.

blackeagle998

@dslraser @s-bormann
PC Browser im Fullscreen 3x1 Kachel für die Digitaluhr:
Der gelbe Rahmen stellt den Flex Container auf Basis des HTML "body" Bereichs dar, hier I.O.:

Jetzt das gleiche Fenster in Windows 10 an den linken Bildschirmrand geschoben, sodass das Browserfenster nur noch halb so breit ist, wie der Bildschirm. die Kacheln werden ordentlich skaliert, der Container Bereich (gelber Rahmen) geht dann leider nach unten über die Kachel hinaus. Die Breite scheint korrekt skaliert zu werden:

Somit rutscht die Darstellung der Elemente innerhalb des Containers natürlich zu weit nach unten.

albi_63

@blackeagle998
Hy
Danke dir für dein Feedback, allerdings habe ich diese zwei Positionen nicht......

Wie bekomme ich dieses Auswahl?
Ich habe dir Version iQontrol 1.1.5

Mitico

@albi_63

Iqontrol und Web Adapter neu starten. Browserverlauf löschen.
![alt text]( image url)

Schau hier: https://github.com/sbormann/ioBroker.iqontrol

s.bormann

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Wenn ich einen HTML Button auf einer Kachel platziere, kann ich darüber irgendwie einen iobroker Datenpunkt steuern?
Wenn ja, wie?

Hi,
bis eben noch nicht... aber mit der aktuellen Github-Version schon :)

Schau mal hier:
https://github.com/sbormann/ioBroker.iqontrol#postmessage-communication-for-experts-only

Da ist auch eine Beispiels-Webseite. Aus Sicherheitsgründen muss man die Kommunikation aber pro Gerät einzeln erlauben. Das sollte dann so aussehen:

LG

s.bormann

@DragonDope sagte in Test Adapter iQontrol 1.2.x:

Ich habe die auf die Version 1.2.4. upgedatet. Echt super die neuen Funktionen, erstmal vielen Dank!

Mir ist jedoch aufgefallen, dass wenn ich einer Kachel "Verknüpfung zu anderer Ansicht" bei BACKGROUND_URL einen Datenpunkt eintrage, ich leider nicht mehr zur der verknüpften Seite weitergeleitet werde. Das Bild zeigt er mir in der Kachel korret an.

Muss ich dabei noch etwas beachten, oder ist das ein BUG?

Hi, in der aktuellen Github-Version gibt es dafür eine Option, Mouse-Events nicht mehr an die BACKGROUND-Webseite, sondern wieder an die Gerätekachel selbst zu senden (man kann nur entweder den Hintergrund, oder die Kachel selbst steuern - beides geht nicht).

Danke für den Hinweis!

LG

Community Forum

NEWS

Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

Support us

265

32.4k

81.4k

1.3m