Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.1k

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

Scheduled Pinned Locked Moved Tester
appdark-modeiqontrolresponsivevisvisualisierungvisualizationwidget
7.6k Posts 296 Posters 7.0m Views 201 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • da_WoodyD da_Woody

    @cb187 würd sagen, schalter, und infoA, infoB.
    nix anderes als bei meiner heizung.
    59723c62-cc08-46fd-9b69-0380ed393726-grafik.png

    C Offline
    C Offline
    cb187
    wrote on last edited by
    #7246

    @da_woody 026AB370-723C-4D42-AE9F-0033CF171844.jpeg

    Meine das eher so.

    da_WoodyD 1 Reply Last reply
    0
    • B Offline
      B Offline
      Beowolf
      wrote on last edited by
      #7247

      Hab da mal ne Frage.

      Kann ich die Farbe einer Kachel in Abhängikeit einer Varable ändern lassen?

      Also wenn "0" dann rot, bei "1" blau und bei "2" grün?

      Wenn ja wie?

      Die Natur braucht nicht unseren Schutz, sie braucht unsere Abwesenheit.

      da_WoodyD 1 Reply Last reply
      0
      • C cb187

        @da_woody 026AB370-723C-4D42-AE9F-0033CF171844.jpeg

        Meine das eher so.

        da_WoodyD Offline
        da_WoodyD Offline
        da_Woody
        wrote on last edited by
        #7248

        @cb187 das ist iQontrol?
        das sieht mir nach lovelace, bzw homeassistant aus...

        gruß vom Woody
        HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

        C 1 Reply Last reply
        0
        • B Beowolf

          Hab da mal ne Frage.

          Kann ich die Farbe einer Kachel in Abhängikeit einer Varable ändern lassen?

          Also wenn "0" dann rot, bei "1" blau und bei "2" grün?

          Wenn ja wie?

          da_WoodyD Offline
          da_WoodyD Offline
          da_Woody
          wrote on last edited by
          #7249

          @beowolf pöff, die ganze kachel kann ich dir nicht sagen...
          ich mach das z.b. bei meteoalarm über glow, also die umrandung. da gibt je level eine farbe. meteoalarm.0.color
          c23956cc-3902-4ec2-9909-192c142048bf-grafik.png

          gruß vom Woody
          HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

          B 1 Reply Last reply
          0
          • da_WoodyD da_Woody

            @beowolf pöff, die ganze kachel kann ich dir nicht sagen...
            ich mach das z.b. bei meteoalarm über glow, also die umrandung. da gibt je level eine farbe. meteoalarm.0.color
            c23956cc-3902-4ec2-9909-192c142048bf-grafik.png

            B Offline
            B Offline
            Beowolf
            wrote on last edited by
            #7250

            @da_woody

            glow ist auch ok. Gehen denn drei Farben?

            Die Natur braucht nicht unseren Schutz, sie braucht unsere Abwesenheit.

            da_WoodyD s.bormannS 2 Replies Last reply
            0
            • B Beowolf

              @da_woody

              glow ist auch ok. Gehen denn drei Farben?

              da_WoodyD Offline
              da_WoodyD Offline
              da_Woody
              wrote on last edited by da_Woody
              #7251

              @beowolf kommt auf deinen DP an...
              bc9041f1-2bfa-4cae-97e2-d45d078cc200-grafik.png
              aktuell keine warnung, daher grün. da halt sogar 4 farben...

              gruß vom Woody
              HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

              1 Reply Last reply
              0
              • da_WoodyD da_Woody

                @cb187 das ist iQontrol?
                das sieht mir nach lovelace, bzw homeassistant aus...

                C Offline
                C Offline
                cb187
                wrote on last edited by
                #7252

                @da_woody nein ist vom meinem Smarthome Hersteller.Aber wäre cool wenn das in iqontrol gehn würde.Vielleicht kann der Entwickler das umsetzen.

                da_WoodyD 1 Reply Last reply
                0
                • C cb187

                  @da_woody nein ist vom meinem Smarthome Hersteller.Aber wäre cool wenn das in iqontrol gehn würde.Vielleicht kann der Entwickler das umsetzen.

                  da_WoodyD Offline
                  da_WoodyD Offline
                  da_Woody
                  wrote on last edited by
                  #7253

                  @cb187 sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

                  Smarthome Hersteller

                  wie soll ich das verstehn? wenn du 0, 1, 2 bekommst in den objekten, dann gehts ja. ich denk mal, das kann man in iQ auch über den schraubenschlüssl definieren. value-list...
                  bei meteoalarm bekomm ichs halt direkt vom adapter.

                  gruß vom Woody
                  HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                  C 1 Reply Last reply
                  0
                  • da_WoodyD da_Woody

                    @cb187 sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

                    Smarthome Hersteller

                    wie soll ich das verstehn? wenn du 0, 1, 2 bekommst in den objekten, dann gehts ja. ich denk mal, das kann man in iQ auch über den schraubenschlüssl definieren. value-list...
                    bei meteoalarm bekomm ichs halt direkt vom adapter.

                    C Offline
                    C Offline
                    cb187
                    wrote on last edited by
                    #7254

                    @da_woody versteh ich jetzt nicht mit 0,1,2.Ich würde so ne Kachelansicht erstellen wie oben in meinem Bild frage war ob dies in iqontrol möglich ist?!

                    da_WoodyD 1 Reply Last reply
                    0
                    • C cb187

                      @da_woody versteh ich jetzt nicht mit 0,1,2.Ich würde so ne Kachelansicht erstellen wie oben in meinem Bild frage war ob dies in iqontrol möglich ist?!

                      da_WoodyD Offline
                      da_WoodyD Offline
                      da_Woody
                      wrote on last edited by
                      #7255

                      @cb187 sorry, passiert, wenn man 2 leutz gleichzeitig helfen versucht... 🙂

                      9bac6577-6d1b-4f76-932f-69f743ad9e41-grafik.png

                      so funktioniert das in iQ nicht. da sind die kacheln anders aufgebaut. so gesehn wird das in iQ nicht funktionieren.
                      du hast da thermostat, licht und rollo in einer kachel, wie ich das sehe.

                      gruß vom Woody
                      HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                      C 1 Reply Last reply
                      0
                      • da_WoodyD da_Woody

                        @cb187 sorry, passiert, wenn man 2 leutz gleichzeitig helfen versucht... 🙂

                        9bac6577-6d1b-4f76-932f-69f743ad9e41-grafik.png

                        so funktioniert das in iQ nicht. da sind die kacheln anders aufgebaut. so gesehn wird das in iQ nicht funktionieren.
                        du hast da thermostat, licht und rollo in einer kachel, wie ich das sehe.

                        C Offline
                        C Offline
                        cb187
                        wrote on last edited by
                        #7256

                        @da_woody genau geh ich in den raum sehe ich sozusagen die geräte einzeln.Ah schade das wäre echt cool gewesen das ginge.

                        s.bormannS 1 Reply Last reply
                        0
                        • C cb187

                          @da_woody genau geh ich in den raum sehe ich sozusagen die geräte einzeln.Ah schade das wäre echt cool gewesen das ginge.

                          s.bormannS Offline
                          s.bormannS Offline
                          s.bormann
                          Most Active
                          wrote on last edited by s.bormann
                          #7257

                          @cb187 Man kann eine Ansicht definieren und die dann in einer Kachel anzeigen lassen. Damit kann man so etwas ähnliches bauen.
                          Edit: Oder man arbeitet mit der Listen-Funktion, damit ginge das auch so ähnlich.
                          LG

                          1 Reply Last reply
                          0
                          • B Beowolf

                            @da_woody

                            glow ist auch ok. Gehen denn drei Farben?

                            s.bormannS Offline
                            s.bormannS Offline
                            s.bormann
                            Most Active
                            wrote on last edited by
                            #7258

                            @beowolf sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

                            @da_woody

                            glow ist auch ok. Gehen denn drei Farben?

                            Zwei Farben kann iQontrol von alleine abhängig vom Status der Kachel (ACTIVE/INACTIVE).

                            Will man mehr Farben, müsste man das mit einem Script erledigen (blockly), dass die gewünschte Farbe in Abhängigkeit von einem Zustand in einen Datenpunkt schreibt. Den kann man dann in iQontrol verwenden (sowohl für GLOW_ACTIVE/INACTIVE_COLOR, als auch für die gesamte Kachel mit OVERLAY_ACTIVE/INACTIVE_COLOR).

                            VG

                            1 Reply Last reply
                            0
                            • dslraserD dslraser

                              @blackeagle998

                              hier noch mal das aktuelle Script für diese Ansicht

                              
                              const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7_neu';
                              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: 'value', 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:1px;';
                              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 'javascript.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('javascript.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;
                              }
                              
                              
                              

                              EDIT: so ist es nun fertig.

                              Screenshot_20201103-153131_Chrome.jpg

                              Hier habe ich das angepasst, nun ist es perfekt.

                              Bildschirmfoto 2020-11-03 um 15.24.37.png

                              Bildschirmfoto 2020-11-03 um 15.24.46.png

                              F Offline
                              F Offline
                              fir3drag0n
                              wrote on last edited by
                              #7259

                              @dslraser muss ich dieses Wetter Skript als HTML importieren?

                              dslraserD 1 Reply Last reply
                              0
                              • F fir3drag0n

                                @dslraser muss ich dieses Wetter Skript als HTML importieren?

                                dslraserD Offline
                                dslraserD Offline
                                dslraser
                                Forum Testing Most Active
                                wrote on last edited by
                                #7260

                                @fir3drag0n sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

                                @dslraser muss ich dieses Wetter Skript als HTML importieren?

                                Wo ist das Script was Du meinst ?

                                1 Reply Last reply
                                0
                                • F Offline
                                  F Offline
                                  fir3drag0n
                                  wrote on last edited by fir3drag0n
                                  #7261

                                  @dslraser das Wetter skript. Das habe ich als js angelegt, kann es aber irgendwie nicht auswählen.

                                  So wie ich das verstanden habe, kann ich nur HTML als widget einbinden. Dann ist mir aber nicht klar, wie ich bin dem Skript umgehen muss.

                                  dslraserD 1 Reply Last reply
                                  0
                                  • F fir3drag0n

                                    @dslraser das Wetter skript. Das habe ich als js angelegt, kann es aber irgendwie nicht auswählen.

                                    So wie ich das verstanden habe, kann ich nur HTML als widget einbinden. Dann ist mir aber nicht klar, wie ich bin dem Skript umgehen muss.

                                    dslraserD Offline
                                    dslraserD Offline
                                    dslraser
                                    Forum Testing Most Active
                                    wrote on last edited by dslraser
                                    #7262

                                    @fir3drag0n sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

                                    @dslraser das Wetter skript. Das habe ich als js angelegt, kann es aber irgendwie nicht auswählen.

                                    So wie ich das verstanden habe, kann ich nur HTML als widget einbinden. Dann ist mir aber nicht klar, wie ich bin dem Skript umgehen muss.

                                    Ich weiß immer noch nicht welches Script Du meinst, es gibt viele…
                                    Poste das Script doch mal bzw. den Link wo Du es her hast.

                                    F 1 Reply Last reply
                                    0
                                    • dslraserD dslraser

                                      @fir3drag0n sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

                                      @dslraser das Wetter skript. Das habe ich als js angelegt, kann es aber irgendwie nicht auswählen.

                                      So wie ich das verstanden habe, kann ich nur HTML als widget einbinden. Dann ist mir aber nicht klar, wie ich bin dem Skript umgehen muss.

                                      Ich weiß immer noch nicht welches Script Du meinst, es gibt viele…
                                      Poste das Script doch mal bzw. den Link wo Du es her hast.

                                      F Offline
                                      F Offline
                                      fir3drag0n
                                      wrote on last edited by
                                      #7263

                                      @dslraser

                                       
                                      const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7_neu';
                                      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: 'value', 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:1px;';
                                      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 'javascript.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('javascript.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;
                                      }
                                       
                                       
                                      
                                      
                                      dslraserD 1 Reply Last reply
                                      0
                                      • F fir3drag0n

                                        @dslraser

                                         
                                        const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7_neu';
                                        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: 'value', 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:1px;';
                                        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 'javascript.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('javascript.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;
                                        }
                                         
                                         
                                        
                                        
                                        dslraserD Offline
                                        dslraserD Offline
                                        dslraser
                                        Forum Testing Most Active
                                        wrote on last edited by dslraser
                                        #7264

                                        @fir3drag0n
                                        hast Du denn die benötigten Datenpunkte (z.B. die oberen drei bzw. in den ersten drei Zeilen) angelegt oder auf Deine eigenen Datenpunkte angepasst ?
                                        Ich glaube im Script gibt es noch mehr eigene Datenpunkte, aber eigentlich sind auch immer Kommentare im Script

                                        F 1 Reply Last reply
                                        0
                                        • dslraserD dslraser

                                          @fir3drag0n
                                          hast Du denn die benötigten Datenpunkte (z.B. die oberen drei bzw. in den ersten drei Zeilen) angelegt oder auf Deine eigenen Datenpunkte angepasst ?
                                          Ich glaube im Script gibt es noch mehr eigene Datenpunkte, aber eigentlich sind auch immer Kommentare im Script

                                          F Offline
                                          F Offline
                                          fir3drag0n
                                          wrote on last edited by
                                          #7265

                                          @dslraser angelegt, aber wie füge ich das jetzt in iQontrol hinzu?

                                          J 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          730

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe