Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Tester
appdark-modeiqontrolresponsivevisvisualisierungvisualizationwidget
7.6k Beiträge 296 Kommentatoren 7.0m Aufrufe 201 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • C cb187

    @s-bormann ich hab mal ne frage kann man in einer Kachel zb für einen Raum anzeigen lassen ob licht angeschaltet ist und wie die Raumtemperatur ist?

    da_WoodyD Offline
    da_WoodyD Offline
    da_Woody
    schrieb am zuletzt editiert von
    #7245

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

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

    C 1 Antwort Letzte Antwort
    0
    • 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
      schrieb am zuletzt editiert von
      #7246

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

      Meine das eher so.

      da_WoodyD 1 Antwort Letzte Antwort
      0
      • B Offline
        B Offline
        Beowolf
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • C cb187

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

          Meine das eher so.

          da_WoodyD Offline
          da_WoodyD Offline
          da_Woody
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antworten Letzte Antwort
              0
              • B Beowolf

                @da_woody

                glow ist auch ok. Gehen denn drei Farben?

                da_WoodyD Offline
                da_WoodyD Offline
                da_Woody
                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                0
                • da_WoodyD da_Woody

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

                  C Offline
                  C Offline
                  cb187
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                            0
                            • B Beowolf

                              @da_woody

                              glow ist auch ok. Gehen denn drei Farben?

                              s.bormannS Offline
                              s.bormannS Offline
                              s.bormann
                              Most Active
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #7259

                                @dslraser muss ich dieses Wetter Skript als HTML importieren?

                                dslraserD 1 Antwort Letzte Antwort
                                0
                                • F fir3drag0n

                                  @dslraser muss ich dieses Wetter Skript als HTML importieren?

                                  dslraserD Offline
                                  dslraserD Offline
                                  dslraser
                                  Forum Testing Most Active
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  0
                                  • F Offline
                                    F Offline
                                    fir3drag0n
                                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          277

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe