Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • s.bormann
      s.bormann Most Active @Guest last edited by

      @Boogie2005 sagte in Test Adapter iQontrol 1.4.x:

      @s-bormann habe deinen Adapter erst jetzt gefunden. Super Arbeit. Habe gleich mal angefangen paar Dinge einzustellen. Sieht auf dem Iphone schon mal gut aus!

      Ein paar Dinge sind mir aber noch unklar, und ich gestehe: 194 Seiten zu lesen war ich zu faul 😉

      1. Ich nutze Fritz Detec Heizthermos => habe es irgendwie nicht hinbekommen den jeweiligen Status mir anzeigen zu lassen. Also aktuelle Temp.

      2. Netatmo die Temperatur im Zimmer, und auf der Terrasse => Habe ich ich nicht hinbekommen. Welchen Datenpunkt muss man da auswählen, damit diese Dinge angezeigt werden? Bekomme immer die Meldung auf dem Bild(Netatmo)

      netatmo.jpg

      Die Oberfläche sieht schon mal so aus, also etwas habe ich schon hin bekommen 🙂

      iob-controll.jpg

      Hi,
      schick doch mal einen Screenshot der zur Verfügung stehenden Datenpunkte von Deinen Thermostaten und den Netatmos. Leider können nicht alle Geräte von der automatischen Zuordnung korrekt erkannt werden, in dem Fall muss man das Gerät von Hand erstellen.
      VG!

      ? 1 Reply Last reply Reply Quote 0
      • s.bormann
        s.bormann Most Active @vikk88 last edited by

        @vikk88 sagte in Test Adapter iQontrol 1.4.x:

        @s-bormann ich habe bei meinem Osram LED stripe das Problem, dass er mir nicht alle Schieber anzeigt.

        350767f7-5665-44d1-8f37-9480271c21a4-image.png

        Ich muss immer erst zu einer Ansicht wechseln und nochmal zurück dann geht es.

        b4ea4bfb-3baa-4a34-a75a-bdf9fa3c524a-image.png

        Auf Github hatte jemand auch das Problem. Bei ihm hat es gereicht die aktuelle Version von git zu installieren, bei mir leider nicht. Habe auch mehrere Browser auf verschiedenen Smartphones ausprobiert, ist aber bei allen gleich. Hast du eine Idee?

        Oh no, dachte das leidige Thema mit der Farbmischung würde jetzt endlich bei allen funktionieren. Das wird echt zur neverending story...

        Bitte schick mal Logs aus der Entwicklerkonsole, einmal beim ersten Aufruf (wo es nicht funktioniert) und dann noch mal vom zweiten Aufruf, wenn es funktioniert.

        https://github.com/sbormann/ioBroker.iqontrol#troubleshooting

        VG

        V 1 Reply Last reply Reply Quote 0
        • s.bormann
          s.bormann Most Active @Hc-Yami last edited by

          @Hc-Yami sagte in Test Adapter iQontrol 1.4.x:

          Hallo, weiß jemand von euch wie ich mit einem Gerät zwei "echte" Geräte steuern kann?
          Muss ich Behilfsobjekte anlegen?

          Hi,
          iQontrol kann das von Haus aus nicht, aber man kann mit dem Scenes-Adapter schnell eine virtuelle Gruppe erstellen und diese dann steuern.
          LG

          1 Reply Last reply Reply Quote 0
          • s.bormann
            s.bormann Most Active @blackeagle998 last edited by

            @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

            @s-bormann
            Hallo Sebastian,

            kannst du mir mal bitte zeigen, wie du den HTML Inhalt eines Datenpunktes im iframe darstellst (code)?
            Ich habe es folgendermaßen versucht:

            let dp_html = getState('0_userdata.0.ioBroker.log_html').val;
            let str_html = '<iframe srcdoc="' + dp_html + '"</iframe>';
            

            Leider bleibt dieser iframe beim Anzeigen leer und ich weiß nicht warum 🙂

            Hi,
            ich hab das so gelöst:

            var strHTML = "<h1>Test</h1>";
            var iframe = document.getElementById("MyiFrameId");
            var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
            iframedoc.open();
            iframedoc.write(strHTML.replace(/\\n/g, String.fromCharCode(13)));
            $(iframedoc).find('body').css('font-family', 'sans-serif');
            iframedoc.close();
            

            VG

            B 1 Reply Last reply Reply Quote 1
            • dslraser
              dslraser Forum Testing Most Active last edited by dslraser

              @s-bormann @blackeagle998
              ich fummele jetzt schon eine ganze Woche an einer html Datei rum.... Ich habe in einer html Datei ein Bild eingebunden und möchte bei klick auf das Bild einen Datenpunkt in ioBroker schalten.
              Ich habe das Script von @blackeagle998 für die "digitale Uhr mit Wettervorschau" eingebunden.

              @blackeagle998 verwendet in seinem Script diesen Teil zum schalten

              <script 
              type="text/javascript">function setState(stateId, value){sendPostMessage("setState", stateId, value);}function sendPostMessage(command, stateId, value){message = { command: command, stateId: stateId, value: value};window.parent.postMessage(message, "*");}
              </script>
              

              Wenn ich diesen Teil in meinem Script bzw. Blockly auch einbaue, dann kann ich keine Lampe oder Steckdose oder auch andere Geräte über iQontrol mehr schalten. Es wird dann nichts mehr ausgeführt. Jetzt habe ich über eine Woche lang verschiedenste html Varianten gebaut, aber immer mit dem gleichen Ergebnis.
              Eben kam ich auf die Idee den Scriptteil aus meinem Blockly raus zu nehmen. Was soll ich sagen, dann funktioniert es...?
              Ist dieser Befehl aus dem Uhren/Wetter Script irgendwie "global" oder so ? Ich verwende einen eigenen Trigger und habe überhaupt keinen Scriptteil mehr in meiner html Datei drinn, aber es schaltet trotzdem. (bzw klickt einen Button)
              Ich bitte da echt mal um Aufklärung und Eure Hilfe.

              EDIT: hier mal die html Ausgabe von einem Blockly. Diese Ausgabe wird in einen Datenpunkt geschrieben. (mit Scriptteil)

              <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
              <style>
              body					{background-color:#424242;}
              span					{color:#FFFFFF;}
              td						{border-width:1px;border-style:solid;border-color:silver;}
              .container_column		{display:flex;flex-direction:column;justify-content: flex-start;}
              .container_row			{display: flex;flex-direction:row;justify-content:space-between;}
              input					{height:6vw;width:6vw;}
              .img_links				{height:10vw;width:10vw;}
              .img_rechts				{height:10vw;width:10vw;}
              .box_ueberschrift		{font-size:10vmax;color:red;}
              .table_Geraete	{margin-top:4vw;border-collapse:collapse;font-size:3vmax;color:#FFFFFF;}
              </style>
              <script 
              type="text/javascript">function setState(stateId, value){sendPostMessage("setState", stateId, value);}function sendPostMessage(command, stateId, value){message = { command: command, stateId: stateId, value: value};window.parent.postMessage(message, "*");}
              </script>
              </head>
              <body>
              <div class="container_row"><input type="image" class="img_links" onclick="setState('javascript.0.Test.Testbuttton', true)" src="data:image/png;base64,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">
              <span class="box_ueberschrift"><b>Temperaturen</b></span>
              <input type="image" class="img_rechts" onclick="setState('javascript.0.Test.Testbuttton', true)" src="data:image/png;base64,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">
              </div>
              <div class="container_column"><table class="table_Geraete">
              		<tbody>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Badezimmer</span>
              				<td><span style="color:white;font-size:1.1em">18.2 °C</span>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Flur</span>
              				<td><span style="color:white;font-size:1.1em">18.1 °C</span>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Garten</span>
              				<td><span style="color:white;font-size:1.1em">4.6 °C</span>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Gästezimmer</span>
              				<td><span style="color:white;font-size:1.1em">18 °C</span>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Keller</span>
              				<td><span style="color:white;font-size:1.1em">16.9 °C</span>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Schlafzimmer</span>
              				<td><span style="color:white;font-size:1.1em">14.9 °C</span>
              			<tr>
              				<td><span style="color:white;font-size:1.1em">Wohnzimmer</span>
              				<td><span style="color:white;font-size:1.1em">23.3 °C</span>
              		</tbody>
              </table>
              </div>
              </body>
              </html>
              

              Hier auch nochmal das dazugehörige Uhren/Wetterscript

              
              const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7';
              const DP_Wetter_Vorschau 			= '0_userdata.0.Uhr.Wetter_Vorschau';
              const DP_Wetter_Vorschau_Trigger	= '0_userdata.0.Uhr.Wetter_Vorschau_Trigger';
              
              fctInit();
              
              on({id:DP_Wetter_Vorschau_Trigger, val:true} , function (dp) {
                if (getState(DP_Wetter_Vorschau).val){
                    setState(DP_Wetter_Vorschau, false);
                }else{
                    setState(DP_Wetter_Vorschau, true);
                }
              });
              
              function fctInit(){
              if(!existsState(DP_Uhr_digital)) {
                  createState(DP_Uhr_digital,
                      {type: 'string', name: 'iQontrol Uhr', role: 'html', read: true , write: true}
                  );
              }
              if(!existsState(DP_Wetter_Vorschau_Trigger)) {
                  createState(DP_Wetter_Vorschau_Trigger,
                      {type: 'boolean', name: 'Wetter Vorschau Trigger', role: 'button', read: false , write: true}
                  );
              }
              if(!existsState(DP_Wetter_Vorschau)) {
                  createState(DP_Wetter_Vorschau,
                      {type: 'boolean', name: 'Wetter Vorschau', role: 'switch', read: true , write: true, def: false}
                  );
              }
              setStateDelayed(DP_Uhr_digital, fctUhrzeitDatumWetter_V7(), 1000);
              schedule("*/10 * * * * *", function () {
                  setState(DP_Uhr_digital, fctUhrzeitDatumWetter_V7());
              })
              }
              
              function fctUhrzeitDatumWetter_V7() {
              let str_Uhrzeit         = String(formatDate(new Date(), "hh:mm"));
              let str_Datum           = String(formatDate(new Date(), "DD.MM.YYYY"));
              let str_Wochentag       = String(formatDate(new Date(), "WW", "de"));
              
              let str_color_body      = 'rgba(66, 66, 66, 1)';
              let str_color_cell      = 'rgba(71, 87, 92, 0)';
              let str_color_font      = 'rgba(255, 255, 255, 1)';
              
              
              let str_position_font   = 'left'
              let str_Tageszeit       = 'Tag';
              let str_html            = '';
              let str_html_head       = '';
              let image_Wetter_Pfad   = './../iqontrol.meta/userimages/usericons/wetter/';
              
              // ##########################################################################
              // CSS Style (Formatierung der HTML Elemente)
              // ##########################################################################
              str_html_head = str_html_head + '<head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">';
              str_html_head = str_html_head + '<style>';
              str_html_head = str_html_head + 'body {';
              //str_html_head = str_html_head + 'overflow:hidden;'; //Scrollbalken ausgeblendet
              str_html_head = str_html_head + 'background-color:' + str_color_body + ';';
              str_html_head = str_html_head + '}'; 
              
              
              
              str_html_head = str_html_head + 'span {';
              //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
              //str_html_head = str_html_head + 'border-radius:5px;border-collapse:separate;border:1px solid gainsboro;border-color:White;';
              //Textausrichtung
              str_html_head = str_html_head + 'text-align:' + str_position_font + ';';
              //Schriftfarbe
              str_html_head = str_html_head + 'color:' + str_color_font + ';';
              //Wer keine Hintergrundfarbe für die Boxen will, kommentiert die nachfolgende Zeile aus oder löscht sie.
              //str_html_head = str_html_head + 'background-color:' + str_color_cell + ';';
              str_html_head = str_html_head + '}';
              
              str_html_head = str_html_head + 'td {';
              str_html_head = str_html_head + 'border-width:0px;';
              str_html_head = str_html_head + 'border-style:solid;';
              str_html_head = str_html_head + 'border-color:silver;';
              str_html_head = str_html_head + '}';
              
              str_html_head = str_html_head + '.container_column {';
              str_html_head = str_html_head + 'display:flex;';
              //Elemente werden untereinander dargestellt
              str_html_head = str_html_head + 'flex-direction: column;';
              str_html_head = str_html_head + 'justify-content: flex-start;';
              //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
              //str_html_head = str_html_head + 'border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow;';
              str_html_head = str_html_head + '}';
              
              str_html_head = str_html_head + '.container_row {';
              str_html_head = str_html_head + 'display: flex;';
              //Elemente werden untereinander dargestellt
              str_html_head = str_html_head + 'flex-direction: row;';
              str_html_head = str_html_head + 'justify-content: space-between;';
              //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
              //str_html_head = str_html_head + 'border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow;';
              str_html_head = str_html_head + '}';
              
              str_html_head = str_html_head + 'input {';
              str_html_head = str_html_head + 'height:10vw;';
              str_html_head = str_html_head + 'width:10vw;';
              str_html_head = str_html_head + '}';
              
              str_html_head = str_html_head + '.img_wetter {';
              str_html_head = str_html_head + 'height:15vw;';
              str_html_head = str_html_head + 'width:15vw;';
              str_html_head = str_html_head + '}';
              
              //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_head = str_html_head + '.box_uhr {font-size:14vmax;}';
              str_html_head = str_html_head + '.box_datum {font-size:4vmax;text-align:center;}';
              str_html_head = str_html_head + '.box_wetter {font-size:4vmax;margin-right:1.5vw;text-align:center;}';
              
              str_html_head = str_html_head + '.table_Wettervorschau {';
              str_html_head = str_html_head + 'margin-top:4vw;';
              str_html_head = str_html_head + 'border-collapse: collapse;';
              str_html_head = str_html_head + 'font-size:3vmax;';
              str_html_head = str_html_head + 'color:' + str_color_font + ';';
              str_html_head = str_html_head + '}';
              str_html_head = str_html_head + '</style>';
              str_html_head = str_html_head + '<script type="text/javascript">';
              str_html_head = str_html_head + 'function setState(stateId, value){';
              str_html_head = str_html_head + 'sendPostMessage("setState", stateId, value);';
              str_html_head = str_html_head + '}';
              str_html_head = str_html_head + 'function sendPostMessage(command, stateId, value){';
              str_html_head = str_html_head + 'message = { command: command, stateId: stateId, value: value};';
              str_html_head = str_html_head + 'window.parent.postMessage(message, "*");';
              str_html_head = str_html_head + '}';
              str_html_head = str_html_head + '</script>';
              str_html_head = str_html_head + '</head>';
              
              // ##########################################################################
              // Prüfen ob Tag oder Nacht um Sonne oder Mond Icons anzuzeigen
              // ##########################################################################
              //Wenn ihr den nachfolgenden Datenpunkt '0_userdata.0.Astro.Tageszeit.current' auch habt, könnt ihr das einkommentieren --> /* und */ löschen
              //--> dafür gibt es ein ASTRO Skript hier im Forum
              
              switch (getState('0_userdata.0.Astro.Tageszeit.current').val){
                  case "Sonnenuntergang":
                  case "Abenddämmerung":
                  case "Nacht":
                  case "Morgendämmerung":
                      str_Tageszeit = 'Nacht';
                      break;
                  default:
                      break;
              }
              
              
              // ##########################################################################
              // Ab hier werden die verschiedenen HTML Flex Container zusammengebaut
              // ##########################################################################
              //Box 1 = Uhrzeit und Wettersymbol
              str_html = str_html + str_html_head + '<div class="container_row">';
              str_html = str_html + '<span class="box_uhr"><b>' + str_Uhrzeit + ' Uhr</b></span>';
              if (str_Tageszeit == 'Tag'){
                    str_html = str_html + '<input type="image" class="img_wetter" onclick="setState(\'' + DP_Wetter_Vorschau_Trigger + '\', true)" src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_1.current.symbol_value').val + '.png' + '" />';
              }else{
                    str_html = str_html + '<input type="image" class="img_wetter" onclick="setState(\'' + DP_Wetter_Vorschau_Trigger + '\', true)" src="' + image_Wetter_Pfad + 'mond/' + getState('daswetter.0.NextHours.Location_1.Day_1.moon_symbol').val + '.png' + '" />';
              }
              str_html = str_html + '</div>';
              
              //Box 2 = Wochentag/Datum, Abfallentsorgung und aktuelle Wetterdaten
              str_html = str_html + '<div class="container_row">';
              str_html = str_html + '<div class="container_column">';
              str_html = str_html + '<span class="box_datum"><b><i>' + str_Wochentag + ', ' + str_Datum + '</i></b></span>';
              str_html = str_html + '</div>';
              str_html = str_html + '<div class="container_column">';
              str_html = str_html + '<span class="box_wetter"><b><i>' + Math.round(getState('hm-rpc.0.0010D8A98AD4AC.1.ACTUAL_TEMPERATURE'/*Temperatursensor aussen ACTUAL TEMPERATURE*/).val) + '°C</i></b></span>';
              if (str_Tageszeit == 'Tag'){
                  str_html = str_html + '<span class="box_wetter"><i>' + getState('daswetter.0.NextHours.Location_1.Day_1.current.symbol_desc').val + '</i></span>';
              }else{
                  str_html = str_html + '<span class="box_wetter"><i>' + str_Tageszeit + '</i></span>';
              }
              
              str_html = str_html + '</div>';
              str_html = str_html + '</div>';
              
              //Box 3 = Wettervorschau
              str_html = str_html + '<div class="container_column">';
              str_html = str_html + '<table class="table_Wettervorschau">';
              
              str_html = str_html + '<tr>';
              str_html = str_html + '<td>heute</td>';
              str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_1.symbol_value').val + '.png' + '"/></td>';
              str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_1.tempmin_value').val + '°C bis ';
              str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_1.tempmax_value').val + '°C</td>';
              //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_1.humidity_value').val + '%</td>';
              str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_1.symbol_desc').val + '</td>';
              str_html = str_html + '</tr>';
              
              str_html = str_html + '<tr>';
              str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_2.day_name').val + '</td>';
              str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_2.symbol_value').val + '.png' + '"/></td>';
              str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_2.tempmin_value').val + '°C bis ';
              str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_2.tempmax_value').val + '°C</td>';
              //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_2.humidity_value').val + '%</td>';
              str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_2.symbol_desc').val + '</td>';
              str_html = str_html + '</tr>';
              
              str_html = str_html + '<tr>';
              str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_3.day_name').val + '</td>';
              str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_3.symbol_value').val + '.png' + '"/></td>';
              str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_3.tempmin_value').val + '°C bis ';
              str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_3.tempmax_value').val + '°C</td>';
              //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_3.humidity_value').val + '%</td>';
              str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_3.symbol_desc').val + '</td>';
              str_html = str_html + '</tr>';
              
              str_html = str_html + '<tr>';
              str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_4.day_name').val + '</td>';
              str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_4.symbol_value').val + '.png' + '"/></td>';
              str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_4.tempmin_value').val + '°C bis ';
              str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_4.tempmax_value').val + '°C</td>';
              //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_4.humidity_value').val + '%</td>';
              str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_4.symbol_desc').val + '</td>';
              str_html = str_html + '</tr>';
              
              str_html = str_html + '<tr>';
              str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_5.day_name').val + '</td>';
              str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_5.symbol_value').val + '.png' + '"/></td>';
              str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_5.tempmin_value').val + '°C bis ';
              str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_5.tempmax_value').val + '°C</td>';
              //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_5.humidity_value').val + '%</td>';
              str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_5.symbol_desc').val + '</td>';
              str_html = str_html + '</tr>';
              
              str_html = str_html + '</table>';
              str_html = str_html + '</div>';
              
              return str_html;
              }
              
              
              

              Und noch das eingebundene Astro Script

              const sec = false; // Sekunden darstellen oder nicht
              const fC = true; // forceCreation ein/aus
              const pfad = "Astro"; // Pfad zum Objekt - Objektbaum-Hauptverzeichnis
              // *****************************************************************************
              // TAGESZEITEN - T E I L 
              // Tageszeiten nach eigenem Gusto (Shifts siehe schedules weiter unten)
              const tageszeiten = ["Nacht",
                                "Morgendämmerung",
                                "Sonnenaufgang",
                                "Morgen",
                                "Vormittag",
                                "Mittag",
                                "Nachmittag",
                                "Abend",
                                "Sonnenuntergang",
                                "Abenddämmerung"
                               ];
              const idTageszeit = "0_userdata." + 0  + "." + pfad + ".Tageszeit.current" /*Tageszeit*/,
                 idTageszeitNext = "0_userdata." + 0  + "." + pfad + ".Tageszeit.next";
              
              createState(idTageszeit, "nächsten Wechsel abwarten", fC, {
               name: "Tageszeit",
               desc: "Name der Tageszeit",
               type: "string"
              });   
              createState(idTageszeitNext, "nächsten Wechsel abwarten", fC, {
               name: "nächste Tageszeit",
               desc: "Name der nächsten Tageszeit",
               type: "string"
              });
              function neue_tageszeit(abschnitt) {
               var akt = tageszeiten[parseInt(abschnitt, 10)],
               // wenn aktuelles Element ist letztes, dann nächstes ist erstes :-D
               nxt = (abschnitt + 1 === tageszeiten.length) ? tageszeiten[0] : tageszeiten[parseInt(abschnitt + 1, 10)];
               setState(idTageszeit, akt);
               setState(idTageszeitNext, nxt);
               log("neue Tagezeit: " + akt);
               log("nächte kommende Tagezeit: " + nxt);
              }
              // Nacht
              schedule({
               astro: "nauticalDusk", 
               shift: 45
              }, function () { 
               neue_tageszeit(0);
              });
              // Morgengdämmerung
              schedule({
               astro: "nauticalDawn",
               shift: -45
              }, function () {
               neue_tageszeit(1);
              });
              // Sonnenaufgang
              schedule({
               astro: "sunrise"
              }, function() {
               neue_tageszeit(2);
              });
              // Morgen
              schedule({
               astro: "sunriseEnd"
              }, function () {
               neue_tageszeit(3);
              });
              // Vormittag 
              schedule({
               astro: "goldenHourEnd",
               shift: 60
              }, function () {
               neue_tageszeit(4);
              });
              // Mittag
              schedule({
               astro: "solarNoon",
               shift: -30
              }, function () {
               neue_tageszeit(5);
              });
              // Nachmittag
              schedule({
               astro: "solarNoon",
               shift: 30
              }, function () {
               neue_tageszeit(6);
              });
              // Abend
              schedule({
               astro: "goldenHour",
               shift: -60
              }, function () {
               neue_tageszeit(7);
              });
              // Sonnenuntergang
              schedule({
               astro: "sunsetStart",
              }, function () {
               neue_tageszeit(8);
              });
              // Abenddämmerung (nach Sonnenuntergang)
              schedule({
               astro: "sunset"
              }, function () {
               neue_tageszeit(9);
              });
              // *****************************************************************************
              // A S T O - T E I L 
              /* Objekt Astrotag 
              Astrotag liegt zwischen Sonnauf- und untergang, 
              Astronacht liegt zwischen Sonnenunter- und aufgang */
              const idAstrotag =  "0_userdata." + 0 + "." + pfad + ".Astrotag";
              // Objekt für Uhrzeiten der Astrozeiten
              const astrotime = {
               "elements" : [
                   // Astrotag beginnt
                   {
                       "fname" : "sunrise", // function name
                       "de" : {
                           "name" : "Sonnenaufgang",
                           "nxt" : "nächster",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Sunrise",
                           "desc" : "top edge of the sun appears on the horizon"
                       },
                       "astroday" : true //during astroday
                   },
                   {
                       "fname" : "sunriseEnd", // function name
                       "de" : {
                           "name" : "Ende Sonnenaufgang",
                           "nxt" : "nächstes",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "End of sunrise",
                           "desc" : "bottom edge of the sun touches the horizon"
                       },
                       "astroday" : true //during astroday
                   },
                   {
                       "fname" : "goldenHourEnd", // function name
                       "de" : {
                           "name" : "Ende der goldenen Stunde am Morgen",
                           "nxt" : "nächstes",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "End of golden hour",
                           "desc" : "morning golden hour (soft light, best time for photography) ends"
                       },
                       "astroday" : true //during astroday
                   },
                   {
                       "fname" : "solarNoon", // function name
                       "de" : {
                           "name" : "Sonnenhöchststand",
                           "nxt" : "nächster",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Solar noon",
                           "desc" : "sun is in the highest position"
                       },
                       "astroday" : true //during astroday
                   },
                   {
                       "fname" : "goldenHour", // function name
                       "de" : {
                           "name" : "Goldene Stunde (am Abend)",
                           "nxt" : "nächste",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Golden hour",
                           "desc" : "evening golden hour starts"
                       },
                       "astroday" : true //during astroday
                   },
                   {
                       "fname" : "sunsetStart", // function name
                       "de" : {
                           "name" : "Beginn Sonnenuntergang",
                           "nxt" : "nächster",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Sunset starts",
                           "desc" : "bottom edge of the sun touches the horizon"
                       },
                       "astroday" : true //during astroday
                   },
                   // Astronacht beginnt
                   {
                       "fname" : "sunset", // function name
                       "de" : {
                           "name" : "Sonnenuntergang",
                           "nxt" : "nächster",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Sunset",
                           "desc" : "sun disappears below the horizon, evening civil twilight starts"
                       },
                       "astroday" : false //during astronight
                   },
                   {
                       "fname" : "dusk",
                       "de" : {
                           "name" : "Abenddämmerung",
                           "nxt" : "nächste",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Dusk",
                           "desc" : "evening nautical twilight starts"
                       },
                       "astroday" : false //during astronight
                   },
                   {
                       "fname" : "nauticalDusk",
                       "de" : {
                           "name" : "nautische Abenddämmerung",
                           "nxt" : "nächste",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Nautical dusk",
                           "desc" : "evening astronomical twilight starts"
                       },
                       "astroday" : false //during astronight
                   },
                   {
                       "fname" : "nadir",
                       "de" : {
                           "name" : "Nadir",
                           "nxt" : "nächster",
                           "desc" : "Fußpunkt gegenüber dem Zenit"
                       },
                       "en" : {
                           "name" : "Nadir",
                           "desc" : "darkest moment of the night, sun is in the lowest position"
                       },
                       "astroday" : false //during astronight
                   },
                   {
                       "fname" : "nauticalDawn",
                       "de" : {
                           "name" : "nautische Morgendämmerung",
                           "nxt" : "nächste",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "Nautical dawn",
                           "desc" : "morning nautical twilight starts"
                       },
                       "astroday" : false //during astronight
                   },
                   {
                       "fname" : "dawn",
                       "de" : {
                           "name" : "Morgendämmerung",
                           "nxt" : "nächste",
                           "desc" : ""
                       },
                       "en" : {
                           "name" : "dawn",
                           "desc" : "morning nautical twilight ends, morning civil twilight starts"
                       },
                       "astroday" : false //during astronight
                   }
              
               ]
              };
              
              function writeAstroTimes(i) {
               // führende Nummer zur Sortierung in Admin/Objekte
               var nr = (i+1 < 10) ? "0" + (i+1) : (i+1);
               // Erstelle Objekt, falls nicht bereits vorhanden
               var idAstroObject = "0_userdata." + 0 + "." + pfad + ".Zeiten." + nr + " - " + astrotime.elements[i].fname;
               createState(idAstroObject, " ", fC, {
                   name: astrotime.elements[i].de.nxt + " " + astrotime.elements[i].de.name + " Uhrzeit",
                   desc: astrotime.elements[i].en.desc,
                   type: "string"
               });
              
               setTimeout(function() { // kurz warten, damit Objekte ggf. erst angelgt werden können
                   var astrotag = getState(idAstrotag).val,
                       temp;
                   var today = new Date();
                   var tomorrow = new Date(today.setDate(today.getDate()+1));
                   var next_event;
                   if (astrotag) { 
                       // Wenn Tag (Aufgang vorbei (erst wieder morgen, Untergang kommt noch heute)
                       next_event = (astrotime.elements[i].astroday) ? tomorrow : today; // prüfen
                   } else { 
                       // nach Nacht (Untergang vorbei (erst wieder morgen, Aufgang kommt heute oder morgen)
                       next_event = (astrotime.elements[i].astroday) ? today : tomorrow; // prüfen
                   }
                   var fname = astrotime.elements[i].fname;
                   temp = getAstroDate(fname, next_event);
                   setState(idAstroObject, checkSec(temp.toLocaleTimeString('de-DE', { hour12: false })) );
               }, 3 * 1000);
              }
              
              // Zeit mit oder ohne Sekunden anzeigen
              function checkSec (zeit) {
               if (!sec) {
                   var newString_arr = zeit.split(":");
                   var newString = newString_arr[0] + ":" + newString_arr[1];
                   return (newString);
               } else return (zeit);
              }
              
              function getAstroday() {
               // Astrotag bestimmen (boolean)
               createState(idAstrotag, false, fC, {
                   type: "boolean",
                   name: "Astrologischer Tag",
                   desc: "Liegt die aktuelle Zeit zwischen Sonnenauf- und untergang"
               }); 
               setState(idAstrotag, isAstroDay());
              }
              
              function iterateAstrotimes() {
               // Zeiten für jede Astrozeit schreiben
               for (var i = 0; i < astrotime.elements.length; i++) {
                   writeAstroTimes(i);
               }
              }
              
              // Astrotag checken
              schedule("*/1 * * * *", function () { // jede Minute
               getAstroday();
               iterateAstrotimes();
              });
              
              iterateAstrotimes();
              getAstroday();
              
              
              

              s.bormann 1 Reply Last reply Reply Quote 0
              • s.bormann
                s.bormann Most Active @dslraser last edited by

                @dslraser sagte in Test Adapter iQontrol 1.4.x:

                @s-bormann @blackeagle998
                ich fummele jetzt schon eine ganze Woche an einer html Datei rum.... Ich habe in einer html Datei ein Bild eingebunden und möchte bei klick auf das Bild einen Datenpunkt in ioBroker schalten.
                Ich habe das Script von @blackeagle998 für die "digitale Uhr mit Wettervorschau" eingebunden.

                @blackeagle998 verwendet in seinem Script diesen Teil zum schalten

                <script 
                type="text/javascript">function setState(stateId, value){sendPostMessage("setState", stateId, value);}function sendPostMessage(command, stateId, value){message = { command: command, stateId: stateId, value: value};window.parent.postMessage(message, "*");}
                </script>
                

                Wenn ich diesen Teil in meinem Script bzw. Blockly auch einbaue, dann kann ich keine Lampe oder Steckdose oder auch andere Geräte über iQontrol mehr schalten. Es wird dann nichts mehr ausgeführt. Jetzt habe ich über eine Woche lang verschiedenste html Varianten gebaut, aber immer mit dem gleichen Ergebnis.
                Eben kam ich auf die Idee den Scriptteil aus meinem Blockly raus zu nehmen. Was soll ich sagen, dann funktioniert es...?
                Ist dieser Befehl aus dem Uhren/Wetter Script irgendwie "global" oder so ? Ich verwende einen eigenen Trigger und habe überhaupt keinen Scriptteil mehr in meiner html Datei drinn, aber es schaltet trotzdem. (bzw klickt einen Button)
                Ich bitte da echt mal um Aufklärung und Eure Hilfe.

                EDIT: hier mal die html Ausgabe von einem Blockly. Diese Ausgabe wird in einen Datenpunkt geschrieben. (mit Scriptteil)

                <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
                <style>
                body					{background-color:#424242;}
                span					{color:#FFFFFF;}
                td						{border-width:1px;border-style:solid;border-color:silver;}
                .container_column		{display:flex;flex-direction:column;justify-content: flex-start;}
                .container_row			{display: flex;flex-direction:row;justify-content:space-between;}
                input					{height:6vw;width:6vw;}
                .img_links				{height:10vw;width:10vw;}
                .img_rechts				{height:10vw;width:10vw;}
                .box_ueberschrift		{font-size:10vmax;color:red;}
                .table_Geraete	{margin-top:4vw;border-collapse:collapse;font-size:3vmax;color:#FFFFFF;}
                </style>
                <script 
                type="text/javascript">function setState(stateId, value){sendPostMessage("setState", stateId, value);}function sendPostMessage(command, stateId, value){message = { command: command, stateId: stateId, value: value};window.parent.postMessage(message, "*");}
                </script>
                </head>
                <body>
                <div class="container_row"><input type="image" class="img_links" onclick="setState('javascript.0.Test.Testbuttton', true)" src="data:image/png;base64,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">
                <span class="box_ueberschrift"><b>Temperaturen</b></span>
                <input type="image" class="img_rechts" onclick="setState('javascript.0.Test.Testbuttton', true)" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAGRElEQVR4Xu2dj5FPMRDHdytABagAFaACVMBV4FSAClCBUwEqQAVcBagAFaz5mrwRkTwveclufn6bmRszJ8kl+8lusvmzj+nAkohcIaI7RHQ9+ol78YmIlp9XzPz9kLrIh9LYAOIZEd2tbPMbInrEzF8qy5lkPwggIvKAiF7ulNAJM5/trGN48emBiAhAAEiPdMbMJz0qGlXH1EBEBObpdabz50SE0f5rrljmCRG5GM0rgHgtU/YeM8OMTZlmB/KNiCDkJf0gotOtpieYuudEdCGq4wszX52SBhFNCySjHYBxi5mhFZuTiGA19j6BMq2WzAwEZgXL2yU9ZeYnm0lEGUUE5R5Hv3rLzLWrtZY/XV1mZiAY1TejHt2o1Y6lbNCSj1FdH5j5VrW0FArMDETi/jPzrraKSNf6RrHZ1clRjUK9vQXYu75RfXcgoyTbWK8DaRTcqGIOZJRkG+t1II2CG1XMgYySbGO9DqRRcKOKOZBRkm2s92CANPavpRgOsrBNY3J24kDyyMx2hB1IHshXZsbZvXpyIH+L/CsRPXGTlQim995T7/pGqc7BaIjv9o4aAhvr7T2ie9e3sRvV2VxDqkU2tsDRAlkRq/shOeH0NjFpff8Y5+6HpAIyBuJ+yERA3A+xMFl7l9GjpvajndQdSOWQGj2HOBAHskkCR2uy3A/ZND5+Z+ppssLrq88VTXA/ZOSyN7wbwdOGrcn9kJFAUHeFp+5+iPshvyVwtJO6L3u3Wu+Qr+eknjNZDsSBbJLA0Zos90M2jQ/3Q45CQ9wPqdQGi2XvShPdD7EA4qusSq3xZW+lwEZndyCjJVxZvwOpFNjo7KOBuB9SSbAnED8PqRT+6FWW+yGTAfHzkAMA4n5IBSQRQeikd3GRvQLMnBjeZmaEgJoqTbWXFWw9Ao2dplIaAAR/AuH/8OJ2mti+0wAJQcYQ8DL32PIFM/8FqWZoiwiE/zBTBs8PEPKvKnRgzd+uyTsFkGCiACMOeIl+IM4iHmBCmLtTCPUHsHFQTNQLDYEJM4diDiQ3XwTJv0W83t7mJPgkABzHc1xgN4cR3D1aQgWmQIKZwuSdagZCg3fRipKgRASagtDlcTLXFDMgYQLHbcIUhlpI8EIIc0C52lszt2qQJRDMGWmoVjUYi4AKUN4w872tQuyZzwRIwVwMN1OV5kt9cKB96kAKpso8sLGIpIGbTUyXBZA0yjSWtlesbHZkujCXwSeJl8TN0bRbzZgqkIJ2qHd6xXSlg0VdS7SBpB9mMbv2n4MSBgycw8vR/6vOJdpAugXYbzUJ/ypnHbhfDUjh1A7r/am+DVVo5yWtOU4TSPq1nHNmxrc9pksiArMVf51H7XsjmkDSCXP3Du4okpmdYbWFhyaQ9HsgaqOuFlzm6z5q3xuxBDLliR3gZXag/0sg6Qe+1CbKBg2Bkxi/2v3OzJdq62nJr6khB/GFm8hzN2mvAykM454X9Wo0xYEcMRA4gPGWhPlx6cqeFvyj+Ktuals8mhriy94NtksTSOoYqjlbG+TwR5bMfpZaWzWBpFsnamv7BiAwV/G2jpoTqwkkXdtDTr65mIwWNSDBA0437czO0SvO11U3QbWBpAdUZoHCVoDgalJ8nfW/PqDKnVurdnhtPslcCVI/71fVkGC2zM+tV45v04t7aqurpU0WQGAOMJfEtzvOmPmkdjXUM7+IpBf31LUD/VEHUtAS/NrMdBVuL5osOEyAFFZc+LX6GUnmMArtUF1ZxZpuCSRnunAPCk6YylOzAONlcuEbpuq61eULMyBBS1LvfRksw81XwUzh76t55bk50BRIgJL6Jks78aVN2PGu7//CZThoRXrz3nQeM1tlFZacJSiAccrMr3qsqETkfnjomb5JmQKG2SqrAAUjFlqRvv9Ddpyl4EUVbslXXawLF9/wfA0vpnIPSjFn4OkcblWaJ3OTFUsgCA+CiS+ppUKCD4M8+BcHR3881AzP5HAQht1aQF67jHeOPLWQR1KbCsjS0fCgBx59Tlt6yKPr694eDZpqDimYMJgXzC25Z8ytMgAImL7nvRcLrQ1Ky02pIYkZwwQM0wMwa6ZsTSYwTQCBt4NdV229QEyvIQWtARzEQcG8gH+hRfHFCRRDVFFM/HAuMb+8nx1C3Nefmd2UkiKspEUAAAAASUVORK5CYII=">
                </div>
                <div class="container_column"><table class="table_Geraete">
                		<tbody>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Badezimmer</span>
                				<td><span style="color:white;font-size:1.1em">18.2 °C</span>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Flur</span>
                				<td><span style="color:white;font-size:1.1em">18.1 °C</span>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Garten</span>
                				<td><span style="color:white;font-size:1.1em">4.6 °C</span>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Gästezimmer</span>
                				<td><span style="color:white;font-size:1.1em">18 °C</span>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Keller</span>
                				<td><span style="color:white;font-size:1.1em">16.9 °C</span>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Schlafzimmer</span>
                				<td><span style="color:white;font-size:1.1em">14.9 °C</span>
                			<tr>
                				<td><span style="color:white;font-size:1.1em">Wohnzimmer</span>
                				<td><span style="color:white;font-size:1.1em">23.3 °C</span>
                		</tbody>
                </table>
                </div>
                </body>
                </html>
                

                Hier auch nochmal das dazugehörige Uhren/Wetterscript

                
                const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7';
                const DP_Wetter_Vorschau 			= '0_userdata.0.Uhr.Wetter_Vorschau';
                const DP_Wetter_Vorschau_Trigger	= '0_userdata.0.Uhr.Wetter_Vorschau_Trigger';
                
                fctInit();
                
                on({id:DP_Wetter_Vorschau_Trigger, val:true} , function (dp) {
                  if (getState(DP_Wetter_Vorschau).val){
                      setState(DP_Wetter_Vorschau, false);
                  }else{
                      setState(DP_Wetter_Vorschau, true);
                  }
                });
                
                function fctInit(){
                if(!existsState(DP_Uhr_digital)) {
                    createState(DP_Uhr_digital,
                        {type: 'string', name: 'iQontrol Uhr', role: 'html', read: true , write: true}
                    );
                }
                if(!existsState(DP_Wetter_Vorschau_Trigger)) {
                    createState(DP_Wetter_Vorschau_Trigger,
                        {type: 'boolean', name: 'Wetter Vorschau Trigger', role: 'button', read: false , write: true}
                    );
                }
                if(!existsState(DP_Wetter_Vorschau)) {
                    createState(DP_Wetter_Vorschau,
                        {type: 'boolean', name: 'Wetter Vorschau', role: 'switch', read: true , write: true, def: false}
                    );
                }
                setStateDelayed(DP_Uhr_digital, fctUhrzeitDatumWetter_V7(), 1000);
                schedule("*/10 * * * * *", function () {
                    setState(DP_Uhr_digital, fctUhrzeitDatumWetter_V7());
                })
                }
                
                function fctUhrzeitDatumWetter_V7() {
                let str_Uhrzeit         = String(formatDate(new Date(), "hh:mm"));
                let str_Datum           = String(formatDate(new Date(), "DD.MM.YYYY"));
                let str_Wochentag       = String(formatDate(new Date(), "WW", "de"));
                
                let str_color_body      = 'rgba(66, 66, 66, 1)';
                let str_color_cell      = 'rgba(71, 87, 92, 0)';
                let str_color_font      = 'rgba(255, 255, 255, 1)';
                
                
                let str_position_font   = 'left'
                let str_Tageszeit       = 'Tag';
                let str_html            = '';
                let str_html_head       = '';
                let image_Wetter_Pfad   = './../iqontrol.meta/userimages/usericons/wetter/';
                
                // ##########################################################################
                // CSS Style (Formatierung der HTML Elemente)
                // ##########################################################################
                str_html_head = str_html_head + '<head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">';
                str_html_head = str_html_head + '<style>';
                str_html_head = str_html_head + 'body {';
                //str_html_head = str_html_head + 'overflow:hidden;'; //Scrollbalken ausgeblendet
                str_html_head = str_html_head + 'background-color:' + str_color_body + ';';
                str_html_head = str_html_head + '}'; 
                
                
                
                str_html_head = str_html_head + 'span {';
                //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
                //str_html_head = str_html_head + 'border-radius:5px;border-collapse:separate;border:1px solid gainsboro;border-color:White;';
                //Textausrichtung
                str_html_head = str_html_head + 'text-align:' + str_position_font + ';';
                //Schriftfarbe
                str_html_head = str_html_head + 'color:' + str_color_font + ';';
                //Wer keine Hintergrundfarbe für die Boxen will, kommentiert die nachfolgende Zeile aus oder löscht sie.
                //str_html_head = str_html_head + 'background-color:' + str_color_cell + ';';
                str_html_head = str_html_head + '}';
                
                str_html_head = str_html_head + 'td {';
                str_html_head = str_html_head + 'border-width:0px;';
                str_html_head = str_html_head + 'border-style:solid;';
                str_html_head = str_html_head + 'border-color:silver;';
                str_html_head = str_html_head + '}';
                
                str_html_head = str_html_head + '.container_column {';
                str_html_head = str_html_head + 'display:flex;';
                //Elemente werden untereinander dargestellt
                str_html_head = str_html_head + 'flex-direction: column;';
                str_html_head = str_html_head + 'justify-content: flex-start;';
                //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
                //str_html_head = str_html_head + 'border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow;';
                str_html_head = str_html_head + '}';
                
                str_html_head = str_html_head + '.container_row {';
                str_html_head = str_html_head + 'display: flex;';
                //Elemente werden untereinander dargestellt
                str_html_head = str_html_head + 'flex-direction: row;';
                str_html_head = str_html_head + 'justify-content: space-between;';
                //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
                //str_html_head = str_html_head + 'border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow;';
                str_html_head = str_html_head + '}';
                
                str_html_head = str_html_head + 'input {';
                str_html_head = str_html_head + 'height:10vw;';
                str_html_head = str_html_head + 'width:10vw;';
                str_html_head = str_html_head + '}';
                
                str_html_head = str_html_head + '.img_wetter {';
                str_html_head = str_html_head + 'height:15vw;';
                str_html_head = str_html_head + 'width:15vw;';
                str_html_head = str_html_head + '}';
                
                //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_head = str_html_head + '.box_uhr {font-size:14vmax;}';
                str_html_head = str_html_head + '.box_datum {font-size:4vmax;text-align:center;}';
                str_html_head = str_html_head + '.box_wetter {font-size:4vmax;margin-right:1.5vw;text-align:center;}';
                
                str_html_head = str_html_head + '.table_Wettervorschau {';
                str_html_head = str_html_head + 'margin-top:4vw;';
                str_html_head = str_html_head + 'border-collapse: collapse;';
                str_html_head = str_html_head + 'font-size:3vmax;';
                str_html_head = str_html_head + 'color:' + str_color_font + ';';
                str_html_head = str_html_head + '}';
                str_html_head = str_html_head + '</style>';
                str_html_head = str_html_head + '<script type="text/javascript">';
                str_html_head = str_html_head + 'function setState(stateId, value){';
                str_html_head = str_html_head + 'sendPostMessage("setState", stateId, value);';
                str_html_head = str_html_head + '}';
                str_html_head = str_html_head + 'function sendPostMessage(command, stateId, value){';
                str_html_head = str_html_head + 'message = { command: command, stateId: stateId, value: value};';
                str_html_head = str_html_head + 'window.parent.postMessage(message, "*");';
                str_html_head = str_html_head + '}';
                str_html_head = str_html_head + '</script>';
                str_html_head = str_html_head + '</head>';
                
                // ##########################################################################
                // Prüfen ob Tag oder Nacht um Sonne oder Mond Icons anzuzeigen
                // ##########################################################################
                //Wenn ihr den nachfolgenden Datenpunkt '0_userdata.0.Astro.Tageszeit.current' auch habt, könnt ihr das einkommentieren --> /* und */ löschen
                //--> dafür gibt es ein ASTRO Skript hier im Forum
                
                switch (getState('0_userdata.0.Astro.Tageszeit.current').val){
                    case "Sonnenuntergang":
                    case "Abenddämmerung":
                    case "Nacht":
                    case "Morgendämmerung":
                        str_Tageszeit = 'Nacht';
                        break;
                    default:
                        break;
                }
                
                
                // ##########################################################################
                // Ab hier werden die verschiedenen HTML Flex Container zusammengebaut
                // ##########################################################################
                //Box 1 = Uhrzeit und Wettersymbol
                str_html = str_html + str_html_head + '<div class="container_row">';
                str_html = str_html + '<span class="box_uhr"><b>' + str_Uhrzeit + ' Uhr</b></span>';
                if (str_Tageszeit == 'Tag'){
                      str_html = str_html + '<input type="image" class="img_wetter" onclick="setState(\'' + DP_Wetter_Vorschau_Trigger + '\', true)" src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_1.current.symbol_value').val + '.png' + '" />';
                }else{
                      str_html = str_html + '<input type="image" class="img_wetter" onclick="setState(\'' + DP_Wetter_Vorschau_Trigger + '\', true)" src="' + image_Wetter_Pfad + 'mond/' + getState('daswetter.0.NextHours.Location_1.Day_1.moon_symbol').val + '.png' + '" />';
                }
                str_html = str_html + '</div>';
                
                //Box 2 = Wochentag/Datum, Abfallentsorgung und aktuelle Wetterdaten
                str_html = str_html + '<div class="container_row">';
                str_html = str_html + '<div class="container_column">';
                str_html = str_html + '<span class="box_datum"><b><i>' + str_Wochentag + ', ' + str_Datum + '</i></b></span>';
                str_html = str_html + '</div>';
                str_html = str_html + '<div class="container_column">';
                str_html = str_html + '<span class="box_wetter"><b><i>' + Math.round(getState('hm-rpc.0.0010D8A98AD4AC.1.ACTUAL_TEMPERATURE'/*Temperatursensor aussen ACTUAL TEMPERATURE*/).val) + '°C</i></b></span>';
                if (str_Tageszeit == 'Tag'){
                    str_html = str_html + '<span class="box_wetter"><i>' + getState('daswetter.0.NextHours.Location_1.Day_1.current.symbol_desc').val + '</i></span>';
                }else{
                    str_html = str_html + '<span class="box_wetter"><i>' + str_Tageszeit + '</i></span>';
                }
                
                str_html = str_html + '</div>';
                str_html = str_html + '</div>';
                
                //Box 3 = Wettervorschau
                str_html = str_html + '<div class="container_column">';
                str_html = str_html + '<table class="table_Wettervorschau">';
                
                str_html = str_html + '<tr>';
                str_html = str_html + '<td>heute</td>';
                str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_1.symbol_value').val + '.png' + '"/></td>';
                str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_1.tempmin_value').val + '°C bis ';
                str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_1.tempmax_value').val + '°C</td>';
                //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_1.humidity_value').val + '%</td>';
                str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_1.symbol_desc').val + '</td>';
                str_html = str_html + '</tr>';
                
                str_html = str_html + '<tr>';
                str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_2.day_name').val + '</td>';
                str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_2.symbol_value').val + '.png' + '"/></td>';
                str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_2.tempmin_value').val + '°C bis ';
                str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_2.tempmax_value').val + '°C</td>';
                //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_2.humidity_value').val + '%</td>';
                str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_2.symbol_desc').val + '</td>';
                str_html = str_html + '</tr>';
                
                str_html = str_html + '<tr>';
                str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_3.day_name').val + '</td>';
                str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_3.symbol_value').val + '.png' + '"/></td>';
                str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_3.tempmin_value').val + '°C bis ';
                str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_3.tempmax_value').val + '°C</td>';
                //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_3.humidity_value').val + '%</td>';
                str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_3.symbol_desc').val + '</td>';
                str_html = str_html + '</tr>';
                
                str_html = str_html + '<tr>';
                str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_4.day_name').val + '</td>';
                str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_4.symbol_value').val + '.png' + '"/></td>';
                str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_4.tempmin_value').val + '°C bis ';
                str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_4.tempmax_value').val + '°C</td>';
                //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_4.humidity_value').val + '%</td>';
                str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_4.symbol_desc').val + '</td>';
                str_html = str_html + '</tr>';
                
                str_html = str_html + '<tr>';
                str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_5.day_name').val + '</td>';
                str_html = str_html + '<td><img src="' + image_Wetter_Pfad + getState('daswetter.0.NextHours.Location_1.Day_5.symbol_value').val + '.png' + '"/></td>';
                str_html = str_html + '<td nowrap>' + getState('daswetter.0.NextHours.Location_1.Day_5.tempmin_value').val + '°C bis ';
                str_html = str_html + getState('daswetter.0.NextHours.Location_1.Day_5.tempmax_value').val + '°C</td>';
                //str_html = str_html + '<td>' + getState('daswetter.0.NextHours.Location_1.Day_5.humidity_value').val + '%</td>';
                str_html = str_html + '<td align=left>' + getState('daswetter.0.NextHours.Location_1.Day_5.symbol_desc').val + '</td>';
                str_html = str_html + '</tr>';
                
                str_html = str_html + '</table>';
                str_html = str_html + '</div>';
                
                return str_html;
                }
                
                
                

                Und noch das eingebundene Astro Script

                const sec = false; // Sekunden darstellen oder nicht
                const fC = true; // forceCreation ein/aus
                const pfad = "Astro"; // Pfad zum Objekt - Objektbaum-Hauptverzeichnis
                // *****************************************************************************
                // TAGESZEITEN - T E I L 
                // Tageszeiten nach eigenem Gusto (Shifts siehe schedules weiter unten)
                const tageszeiten = ["Nacht",
                                  "Morgendämmerung",
                                  "Sonnenaufgang",
                                  "Morgen",
                                  "Vormittag",
                                  "Mittag",
                                  "Nachmittag",
                                  "Abend",
                                  "Sonnenuntergang",
                                  "Abenddämmerung"
                                 ];
                const idTageszeit = "0_userdata." + 0  + "." + pfad + ".Tageszeit.current" /*Tageszeit*/,
                   idTageszeitNext = "0_userdata." + 0  + "." + pfad + ".Tageszeit.next";
                
                createState(idTageszeit, "nächsten Wechsel abwarten", fC, {
                 name: "Tageszeit",
                 desc: "Name der Tageszeit",
                 type: "string"
                });   
                createState(idTageszeitNext, "nächsten Wechsel abwarten", fC, {
                 name: "nächste Tageszeit",
                 desc: "Name der nächsten Tageszeit",
                 type: "string"
                });
                function neue_tageszeit(abschnitt) {
                 var akt = tageszeiten[parseInt(abschnitt, 10)],
                 // wenn aktuelles Element ist letztes, dann nächstes ist erstes :-D
                 nxt = (abschnitt + 1 === tageszeiten.length) ? tageszeiten[0] : tageszeiten[parseInt(abschnitt + 1, 10)];
                 setState(idTageszeit, akt);
                 setState(idTageszeitNext, nxt);
                 log("neue Tagezeit: " + akt);
                 log("nächte kommende Tagezeit: " + nxt);
                }
                // Nacht
                schedule({
                 astro: "nauticalDusk", 
                 shift: 45
                }, function () { 
                 neue_tageszeit(0);
                });
                // Morgengdämmerung
                schedule({
                 astro: "nauticalDawn",
                 shift: -45
                }, function () {
                 neue_tageszeit(1);
                });
                // Sonnenaufgang
                schedule({
                 astro: "sunrise"
                }, function() {
                 neue_tageszeit(2);
                });
                // Morgen
                schedule({
                 astro: "sunriseEnd"
                }, function () {
                 neue_tageszeit(3);
                });
                // Vormittag 
                schedule({
                 astro: "goldenHourEnd",
                 shift: 60
                }, function () {
                 neue_tageszeit(4);
                });
                // Mittag
                schedule({
                 astro: "solarNoon",
                 shift: -30
                }, function () {
                 neue_tageszeit(5);
                });
                // Nachmittag
                schedule({
                 astro: "solarNoon",
                 shift: 30
                }, function () {
                 neue_tageszeit(6);
                });
                // Abend
                schedule({
                 astro: "goldenHour",
                 shift: -60
                }, function () {
                 neue_tageszeit(7);
                });
                // Sonnenuntergang
                schedule({
                 astro: "sunsetStart",
                }, function () {
                 neue_tageszeit(8);
                });
                // Abenddämmerung (nach Sonnenuntergang)
                schedule({
                 astro: "sunset"
                }, function () {
                 neue_tageszeit(9);
                });
                // *****************************************************************************
                // A S T O - T E I L 
                /* Objekt Astrotag 
                Astrotag liegt zwischen Sonnauf- und untergang, 
                Astronacht liegt zwischen Sonnenunter- und aufgang */
                const idAstrotag =  "0_userdata." + 0 + "." + pfad + ".Astrotag";
                // Objekt für Uhrzeiten der Astrozeiten
                const astrotime = {
                 "elements" : [
                     // Astrotag beginnt
                     {
                         "fname" : "sunrise", // function name
                         "de" : {
                             "name" : "Sonnenaufgang",
                             "nxt" : "nächster",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Sunrise",
                             "desc" : "top edge of the sun appears on the horizon"
                         },
                         "astroday" : true //during astroday
                     },
                     {
                         "fname" : "sunriseEnd", // function name
                         "de" : {
                             "name" : "Ende Sonnenaufgang",
                             "nxt" : "nächstes",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "End of sunrise",
                             "desc" : "bottom edge of the sun touches the horizon"
                         },
                         "astroday" : true //during astroday
                     },
                     {
                         "fname" : "goldenHourEnd", // function name
                         "de" : {
                             "name" : "Ende der goldenen Stunde am Morgen",
                             "nxt" : "nächstes",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "End of golden hour",
                             "desc" : "morning golden hour (soft light, best time for photography) ends"
                         },
                         "astroday" : true //during astroday
                     },
                     {
                         "fname" : "solarNoon", // function name
                         "de" : {
                             "name" : "Sonnenhöchststand",
                             "nxt" : "nächster",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Solar noon",
                             "desc" : "sun is in the highest position"
                         },
                         "astroday" : true //during astroday
                     },
                     {
                         "fname" : "goldenHour", // function name
                         "de" : {
                             "name" : "Goldene Stunde (am Abend)",
                             "nxt" : "nächste",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Golden hour",
                             "desc" : "evening golden hour starts"
                         },
                         "astroday" : true //during astroday
                     },
                     {
                         "fname" : "sunsetStart", // function name
                         "de" : {
                             "name" : "Beginn Sonnenuntergang",
                             "nxt" : "nächster",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Sunset starts",
                             "desc" : "bottom edge of the sun touches the horizon"
                         },
                         "astroday" : true //during astroday
                     },
                     // Astronacht beginnt
                     {
                         "fname" : "sunset", // function name
                         "de" : {
                             "name" : "Sonnenuntergang",
                             "nxt" : "nächster",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Sunset",
                             "desc" : "sun disappears below the horizon, evening civil twilight starts"
                         },
                         "astroday" : false //during astronight
                     },
                     {
                         "fname" : "dusk",
                         "de" : {
                             "name" : "Abenddämmerung",
                             "nxt" : "nächste",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Dusk",
                             "desc" : "evening nautical twilight starts"
                         },
                         "astroday" : false //during astronight
                     },
                     {
                         "fname" : "nauticalDusk",
                         "de" : {
                             "name" : "nautische Abenddämmerung",
                             "nxt" : "nächste",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Nautical dusk",
                             "desc" : "evening astronomical twilight starts"
                         },
                         "astroday" : false //during astronight
                     },
                     {
                         "fname" : "nadir",
                         "de" : {
                             "name" : "Nadir",
                             "nxt" : "nächster",
                             "desc" : "Fußpunkt gegenüber dem Zenit"
                         },
                         "en" : {
                             "name" : "Nadir",
                             "desc" : "darkest moment of the night, sun is in the lowest position"
                         },
                         "astroday" : false //during astronight
                     },
                     {
                         "fname" : "nauticalDawn",
                         "de" : {
                             "name" : "nautische Morgendämmerung",
                             "nxt" : "nächste",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "Nautical dawn",
                             "desc" : "morning nautical twilight starts"
                         },
                         "astroday" : false //during astronight
                     },
                     {
                         "fname" : "dawn",
                         "de" : {
                             "name" : "Morgendämmerung",
                             "nxt" : "nächste",
                             "desc" : ""
                         },
                         "en" : {
                             "name" : "dawn",
                             "desc" : "morning nautical twilight ends, morning civil twilight starts"
                         },
                         "astroday" : false //during astronight
                     }
                
                 ]
                };
                
                function writeAstroTimes(i) {
                 // führende Nummer zur Sortierung in Admin/Objekte
                 var nr = (i+1 < 10) ? "0" + (i+1) : (i+1);
                 // Erstelle Objekt, falls nicht bereits vorhanden
                 var idAstroObject = "0_userdata." + 0 + "." + pfad + ".Zeiten." + nr + " - " + astrotime.elements[i].fname;
                 createState(idAstroObject, " ", fC, {
                     name: astrotime.elements[i].de.nxt + " " + astrotime.elements[i].de.name + " Uhrzeit",
                     desc: astrotime.elements[i].en.desc,
                     type: "string"
                 });
                
                 setTimeout(function() { // kurz warten, damit Objekte ggf. erst angelgt werden können
                     var astrotag = getState(idAstrotag).val,
                         temp;
                     var today = new Date();
                     var tomorrow = new Date(today.setDate(today.getDate()+1));
                     var next_event;
                     if (astrotag) { 
                         // Wenn Tag (Aufgang vorbei (erst wieder morgen, Untergang kommt noch heute)
                         next_event = (astrotime.elements[i].astroday) ? tomorrow : today; // prüfen
                     } else { 
                         // nach Nacht (Untergang vorbei (erst wieder morgen, Aufgang kommt heute oder morgen)
                         next_event = (astrotime.elements[i].astroday) ? today : tomorrow; // prüfen
                     }
                     var fname = astrotime.elements[i].fname;
                     temp = getAstroDate(fname, next_event);
                     setState(idAstroObject, checkSec(temp.toLocaleTimeString('de-DE', { hour12: false })) );
                 }, 3 * 1000);
                }
                
                // Zeit mit oder ohne Sekunden anzeigen
                function checkSec (zeit) {
                 if (!sec) {
                     var newString_arr = zeit.split(":");
                     var newString = newString_arr[0] + ":" + newString_arr[1];
                     return (newString);
                 } else return (zeit);
                }
                
                function getAstroday() {
                 // Astrotag bestimmen (boolean)
                 createState(idAstrotag, false, fC, {
                     type: "boolean",
                     name: "Astrologischer Tag",
                     desc: "Liegt die aktuelle Zeit zwischen Sonnenauf- und untergang"
                 }); 
                 setState(idAstrotag, isAstroDay());
                }
                
                function iterateAstrotimes() {
                 // Zeiten für jede Astrozeit schreiben
                 for (var i = 0; i < astrotime.elements.length; i++) {
                     writeAstroTimes(i);
                 }
                }
                
                // Astrotag checken
                schedule("*/1 * * * *", function () { // jede Minute
                 getAstroday();
                 iterateAstrotimes();
                });
                
                iterateAstrotimes();
                getAstroday();
                
                
                

                Hi,
                das funktioniert bei mir genau, wie es soll. Schick mal einen Console-Log, vielleicht kommen wir so dahinter.
                PS: Der Script-Teil ist nicht global, also eigentlich kann er ohne den Script-Teil nicht schalten. Schaltet vielleicht die Kachel? Ist PostMessage-Kommunikation erlaubt?

                dslraser 2 Replies Last reply Reply Quote 0
                • dslraser
                  dslraser Forum Testing Most Active @s.bormann last edited by

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

                  Hi,
                  das funktioniert bei mir genau, wie es soll. Schick mal einen Console-Log, vielleicht kommen wir so dahinter.

                  In der Console kommt kein Fehler.

                  PS: Der Script-Teil ist nicht global, also eigentlich kann er ohne den Script-Teil nicht schalten.

                  macht er aber

                  Schaltet vielleicht die Kachel?
                  Bei klick auf die Kachel wird ein selbst angelegt Button in ioBroker geklickt, der wiederum setzt einen zweiten DP auf true/false, dann klappt die Kachel auf, also genau wie in dem Uhren/wetter Script

                  Ist PostMessage-Kommunikation erlaubt?

                  ja

                  1 Reply Last reply Reply Quote 0
                  • dslraser
                    dslraser Forum Testing Most Active @s.bormann last edited by

                    @s-bormann
                    und hier siehst Du den deaktivierten Script Teil (aber es schaltet...?)

                    Bildschirmfoto 2020-11-24 um 20.30.42.png

                    B 1 Reply Last reply Reply Quote 0
                    • dslraser
                      dslraser Forum Testing Most Active last edited by

                      @s-bormann
                      es scheint irgend ein Cache oder Puffer Problem zu sein...Ich habe eben sogar mal den html Datenpunkt geleert, oder iQontrol zeigt trotzdem noch alles an...

                      1 Reply Last reply Reply Quote 0
                      • B
                        blackeagle998 @dslraser last edited by

                        @dslraser
                        Hi,

                        exportier mal bitte das komplette Blockly und stelle es hier zur Verfügung. Ich importiere das mal bei mir.

                        dslraser 2 Replies Last reply Reply Quote 0
                        • dslraser
                          dslraser Forum Testing Most Active @blackeagle998 last edited by dslraser

                          @blackeagle998
                          ich Depp hatte eben noch auf Konstante, von der ganzen probiererei... Ich habe es jetzt umgestellt. Nun scheint es zu funktionieren. Das komplette Blockly ist erst "halb fertig", das poste ich gern wenn ich fertig bin.
                          Erstmal danke für Eure Hilfe.
                          Ich hatte eben übrigens mal einen Upload bei iQontrol gemacht, seit dem scheint es zu laufen...

                          B 1 Reply Last reply Reply Quote 1
                          • B
                            blackeagle998 @dslraser last edited by

                            @dslraser
                            Umso besser, ich hoffe es bleibt stabil.

                            1 Reply Last reply Reply Quote 0
                            • B
                              blackeagle998 @s.bormann last edited by

                              @s-bormann
                              Vielen Dank, hat funktioniert (iframe).

                              Bei den URL Parametern kann ich die Toolbar ausblenden (&noToolbar=true).
                              Kannst du hier auch die Option einfügen, das Panel auszublenden?

                              Ich habe eine Hauptview (mit Panel und Toolbar) wo ich in einem iframe einzelne Views anzeigen kann.
                              Genau da wäre es sinnvoll, wenn weder Panel noch Toolbar in diesen Unterviews sichtbar wären.

                              s.bormann 1 Reply Last reply Reply Quote 0
                              • X
                                X-R4Y @muuulle last edited by

                                @muuulle said in Test Adapter iQontrol 1.4.x:

                                In den Datenpunkt muss der entsprechende HTML Code reingeschrieben werden.

                                ein
                                <html><head><style>body { background-color:#E76E54; } </style></head></html>

                                aus
                                <html></html>

                                Das ein und aus ist bezogen auf den Trigger oder ist das immer so? Das kommt alles in einen DP?

                                M 1 Reply Last reply Reply Quote 0
                                • M
                                  muuulle @X-R4Y last edited by

                                  @X-R4Y said in Test Adapter iQontrol 1.4.x:

                                  @muuulle said in Test Adapter iQontrol 1.4.x:

                                  In den Datenpunkt muss der entsprechende HTML Code reingeschrieben werden.

                                  ein
                                  <html><head><style>body { background-color:#E76E54; } </style></head></html>

                                  aus
                                  <html></html>

                                  Das ein und aus ist bezogen auf den Trigger oder ist das immer so? Das kommt alles in einen DP?

                                  Richtig. Bei mir ist die Kabel beispielsweise ein Schalter. Dieser schaltet eine Lampe und gleichzeitig den Datenpunkt mit dem HTML. In Blockly mit einer wenn-dann Abfrage.

                                  s.bormann 1 Reply Last reply Reply Quote 0
                                  • s.bormann
                                    s.bormann Most Active @muuulle last edited by

                                    @muuulle sagte in Test Adapter iQontrol 1.4.x:

                                    @X-R4Y said in Test Adapter iQontrol 1.4.x:

                                    @muuulle said in Test Adapter iQontrol 1.4.x:

                                    In den Datenpunkt muss der entsprechende HTML Code reingeschrieben werden.

                                    ein
                                    <html><head><style>body { background-color:#E76E54; } </style></head></html>

                                    aus
                                    <html></html>

                                    Das ein und aus ist bezogen auf den Trigger oder ist das immer so? Das kommt alles in einen DP?

                                    Richtig. Bei mir ist die Kabel beispielsweise ein Schalter. Dieser schaltet eine Lampe und gleichzeitig den Datenpunkt mit dem HTML. In Blockly mit einer wenn-dann Abfrage.

                                    Cooler Ansatz, das so zu lösen 👍

                                    1 Reply Last reply Reply Quote 0
                                    • s.bormann
                                      s.bormann Most Active @blackeagle998 last edited by s.bormann

                                      @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                                      @s-bormann
                                      Vielen Dank, hat funktioniert (iframe).

                                      Bei den URL Parametern kann ich die Toolbar ausblenden (&noToolbar=true).
                                      Kannst du hier auch die Option einfügen, das Panel auszublenden?

                                      Ich habe eine Hauptview (mit Panel und Toolbar) wo ich in einem iframe einzelne Views anzeigen kann.
                                      Genau da wäre es sinnvoll, wenn weder Panel noch Toolbar in diesen Unterviews sichtbar wären.

                                      Kann ich machen, sollte kein Problem sein.

                                      Aber wenn Du den view mit dem neuen Datenpunkt BACKGROUND_VIEW einbindest, sollten Toolbar und Panel automatisch ausgeblendet sein. Funktioniert das nicht? (technisch fügt er dann den URL-Parameter &isBackgroundView=true ein, damit kannst Du auch Toolbar und Panel ausblenden lassen. Ferner sind auch die Wisch-Gesten damit außer Funktion. Außerdem ist das Timing noch etwas optimiert, der Ladebalken fehlt und der Lade-Bildschirm ist transparent.)

                                      s.bormann 1 Reply Last reply Reply Quote 0
                                      • s.bormann
                                        s.bormann Most Active @s.bormann last edited by

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

                                        @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                                        @s-bormann
                                        Vielen Dank, hat funktioniert (iframe).

                                        Bei den URL Parametern kann ich die Toolbar ausblenden (&noToolbar=true).
                                        Kannst du hier auch die Option einfügen, das Panel auszublenden?

                                        Ich habe eine Hauptview (mit Panel und Toolbar) wo ich in einem iframe einzelne Views anzeigen kann.
                                        Genau da wäre es sinnvoll, wenn weder Panel noch Toolbar in diesen Unterviews sichtbar wären.

                                        Kann ich machen, sollte kein Problem sein.

                                        Aber wenn Du den view mit dem neuen Datenpunkt BACKGROUND_VIEW einbindest, sollten Toolbar und Panel automatisch ausgeblendet sein. Funktioniert das nicht? (technisch fügt er dann den URL-Parameter &isBackgroundView=true ein, damit kannst Du auch Toolbar und Panel ausblenden lassen. Ferner sind auch die Wisch-Gesten damit außer Funktion. Außerdem ist das Timing noch etwas optimiert, der Ladebalken fehlt und der Lade-Bildschirm ist transparent.)

                                        Hab den Parameter noPanel in der aktuellen Github-Version hochgeladen.

                                        B 1 Reply Last reply Reply Quote 0
                                        • B
                                          blackeagle998 @s.bormann last edited by blackeagle998

                                          Einmal mehr herzlichen Dank für die Ent- und Weiterentwicklung von iQontrol!!!

                                          dslraser 1 Reply Last reply Reply Quote 4
                                          • dslraser
                                            dslraser Forum Testing Most Active @blackeagle998 last edited by

                                            @blackeagle998
                                            hier mal inspiriert durch Dein Uhren-Wetter Script

                                            20201125_230824.gif

                                            1 Reply Last reply Reply Quote 3
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            675
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            app dark-mode iqontrol responsive vis visualisierung visualization widget
                                            295
                                            7633
                                            5747973
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo