Skip to content
  • 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
  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.
  • dslraserD dslraser

    @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

    Ja, die Kopie brauche ich bitte, sonst komme ich nur durcheinander und dann funktioniert am Ende nichts

    ich nutze aktuell dieses Script

    
    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      = '#005c78';
    let str_color_cell      = '#47575c';
    let str_color_font      = 'Silver';
    
    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 + '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:black;';
    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:3vw;';
    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;
    }
    
    
    

    In meinen Listen nutze ich aktuell Die Überschrift auch in weiß und Border und inaktive Geräte ist die Schriftfarbe : silver. Der Hintergrund ist in #424242

    Beispiel Liste

    Screenshot_20201103-131357_Chrome.jpg

    S Offline
    S Offline
    StephanJanine
    schrieb am zuletzt editiert von
    #3678

    @dslraser wie hast du die Bewegungsmelder aktiv und inaktiv geschaltet? also ich habe das mal über einen separaten Datenpunkt gemacht den ich dann immer nach einer Bewegung abfrage ob True/False aber das ist irgendwie umständlich

    dslraserD 1 Antwort Letzte Antwort
    0
    • B blackeagle998

      @dslraser
      Ändere mal bitte diese drei Zeilen

      let str_color_body      = '#005c78';
      let str_color_cell      = '#47575c';
      let str_color_font      = 'Silver';
      

      in

      let str_color_body      = 'rgba(0, 92, 120, 0)';
      let str_color_cell      = 'rgba(71, 87, 92, 0)';
      let str_color_font      = 'rgba(255, 255, 255, 1)';
      

      Hinweis:
      rgba(255, 255, 255, 1) = weiß, silber wäre (192, 192, 192, 1)

      Die 0 bzw. 1 am Ende gibt die Deckkraft (opacity) an, 1 = 100%, bei 0 sollte der Hintergrund also unsichtbar sein.
      Außerdem kannst du bei der Tabellenformatierung der Wettervorschau noch die Schriftfarbe von "black" in "silver" ändern, das wäre dann in diesem Abschnitt:

      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:black;';
      str_html_head = str_html_head + '}';
      

      Für weiß wäre das dann --> border-color:rgba(255, 255, 255, 1);
      Für Silber wäre das dann --> border-color:rgba(192, 192, 192, 1);

      Probier mal ob's klappt.

      dslraserD Offline
      dslraserD Offline
      dslraser
      Forum Testing Most Active
      schrieb am zuletzt editiert von
      #3679

      @blackeagle998
      jetzt habe ich das so eingestellt. Sa lasse ich es jetzt mal.

      Screenshot_20201103-143736_Chrome.jpg

      Screenshot_20201103-143746_Chrome.jpg

      B 1 Antwort Letzte Antwort
      0
      • S StephanJanine

        @dslraser wie hast du die Bewegungsmelder aktiv und inaktiv geschaltet? also ich habe das mal über einen separaten Datenpunkt gemacht den ich dann immer nach einer Bewegung abfrage ob True/False aber das ist irgendwie umständlich

        dslraserD Offline
        dslraserD Offline
        dslraser
        Forum Testing Most Active
        schrieb am zuletzt editiert von dslraser
        #3680

        @StephanJanine sagte in Test Adapter iQontrol 1.4.x:

        wie hast du die Bewegungsmelder aktiv und inaktiv geschaltet?

        Das macht ein Blockly. Dieses Blockly erstellt "dynamisch" html Listen, die sich auch in geöffneter Listenansicht live ändern.

        https://forum.iobroker.net/post/273896

        1 Antwort Letzte Antwort
        0
        • dslraserD dslraser

          @blackeagle998
          jetzt habe ich das so eingestellt. Sa lasse ich es jetzt mal.

          Screenshot_20201103-143736_Chrome.jpg

          Screenshot_20201103-143746_Chrome.jpg

          B Offline
          B Offline
          blackeagle998
          schrieb am zuletzt editiert von
          #3681

          @dslraser
          Hmm warum der Kachelumriss angezeigt wird, kann ich nicht genau sagen.
          Hast du bei der Kachel ein Hintergrundbild aktiv / inaktiv eingestellt? Wenn ja, nimm das mal bitte raus.

          Wenn du den Scrollbalken rechts nicht haben willst, ergänzt du hinter der Zeile "str_html_head = str_html_head + 'body {';" folgende Zeile:

          str_html_head = str_html_head + 'overflow:hidden;';
          
          dslraserD 2 Antworten Letzte Antwort
          0
          • B blackeagle998

            @dslraser
            Hmm warum der Kachelumriss angezeigt wird, kann ich nicht genau sagen.
            Hast du bei der Kachel ein Hintergrundbild aktiv / inaktiv eingestellt? Wenn ja, nimm das mal bitte raus.

            Wenn du den Scrollbalken rechts nicht haben willst, ergänzt du hinter der Zeile "str_html_head = str_html_head + 'body {';" folgende Zeile:

            str_html_head = str_html_head + 'overflow:hidden;';
            
            dslraserD Offline
            dslraserD Offline
            dslraser
            Forum Testing Most Active
            schrieb am zuletzt editiert von dslraser
            #3682

            @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

            Wenn du den Scrollbalken rechts nicht haben willst, ergänzt du hinter der Zeile "str_html_head = str_html_head + 'body {';" folgende Zeile:
            str_html_head = str_html_head + 'overflow:hidden;';

            Die Zeile zerstört dann die Farbe und der Balken bleibt.

            Screenshot_20201103-145559_Chrome.jpg

            Ein Hintergundbild aktiv/inaktiv habe ich nicht, steht auf standard.

            Edit: welche Zeilennummer meinst Du dafür ?

            str_html_head = str_html_head + 'overflow:hidden;';
            
            

            EDIT 2: der Scrollbalken ist weg, ich habe vorher an der falschen Stelle eingefügt.

            B 1 Antwort Letzte Antwort
            0
            • B blackeagle998

              @dslraser
              Hmm warum der Kachelumriss angezeigt wird, kann ich nicht genau sagen.
              Hast du bei der Kachel ein Hintergrundbild aktiv / inaktiv eingestellt? Wenn ja, nimm das mal bitte raus.

              Wenn du den Scrollbalken rechts nicht haben willst, ergänzt du hinter der Zeile "str_html_head = str_html_head + 'body {';" folgende Zeile:

              str_html_head = str_html_head + 'overflow:hidden;';
              
              dslraserD Offline
              dslraserD Offline
              dslraser
              Forum Testing Most Active
              schrieb am zuletzt editiert von dslraser
              #3683

              @blackeagle998
              der kleine weiße Strich am unteren Rand in der Kachel ist schon die erste Linie der darunter liegenden Tabelle. Bekomme ich das auch noch wech ?

              Screenshot_20201103-150350_Chrome.jpg

              B 1 Antwort Letzte Antwort
              0
              • dslraserD dslraser

                @blackeagle998
                der kleine weiße Strich am unteren Rand in der Kachel ist schon die erste Linie der darunter liegenden Tabelle. Bekomme ich das auch noch wech ?

                Screenshot_20201103-150350_Chrome.jpg

                B Offline
                B Offline
                blackeagle998
                schrieb am zuletzt editiert von
                #3684

                @dslraser

                str_html_head = str_html_head + '.table_Wettervorschau {';
                str_html_head = str_html_head + 'margin-top:3vw;';
                

                Anstatt 3vw kannst du 3.5vw oder 4vw probieren.
                Das ist der Abstand der Tabelle Wettervorschau nach oben.

                1 Antwort Letzte Antwort
                0
                • dslraserD dslraser

                  @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                  Wenn du den Scrollbalken rechts nicht haben willst, ergänzt du hinter der Zeile "str_html_head = str_html_head + 'body {';" folgende Zeile:
                  str_html_head = str_html_head + 'overflow:hidden;';

                  Die Zeile zerstört dann die Farbe und der Balken bleibt.

                  Screenshot_20201103-145559_Chrome.jpg

                  Ein Hintergundbild aktiv/inaktiv habe ich nicht, steht auf standard.

                  Edit: welche Zeilennummer meinst Du dafür ?

                  str_html_head = str_html_head + 'overflow:hidden;';
                  
                  

                  EDIT 2: der Scrollbalken ist weg, ich habe vorher an der falschen Stelle eingefügt.

                  B Offline
                  B Offline
                  blackeagle998
                  schrieb am zuletzt editiert von
                  #3685

                  @dslraser
                  Kannst du mal bitte ein Screenshot der Geräteübersicht machen, wo sich diese Kachel befindet (nicht die Kachel Einstellungen)?

                  dslraserD 1 Antwort Letzte Antwort
                  0
                  • B blackeagle998

                    @dslraser
                    Kannst du mal bitte ein Screenshot der Geräteübersicht machen, wo sich diese Kachel befindet (nicht die Kachel Einstellungen)?

                    dslraserD Offline
                    dslraserD Offline
                    dslraser
                    Forum Testing Most Active
                    schrieb am zuletzt editiert von dslraser
                    #3686

                    @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                    @dslraser
                    Kannst du mal bitte ein Screenshot der Geräteübersicht machen, wo sich diese Kachel befindet (nicht die Kachel Einstellungen)?

                    meinst Du das ?
                    Bildschirmfoto 2020-11-03 um 15.12.35.png

                    Edit: den obersten Haken habe ich raus genommen, der war da quatsch, weil ich mal die Geräte verschoben hatte.

                    1 Antwort Letzte Antwort
                    0
                    • dslraserD Offline
                      dslraserD Offline
                      dslraser
                      Forum Testing Most Active
                      schrieb am zuletzt editiert von dslraser
                      #3687

                      @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

                      B C F 3 Antworten Letzte Antwort
                      3
                      • 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

                        B Offline
                        B Offline
                        blackeagle998
                        schrieb am zuletzt editiert von
                        #3688

                        @dslraser
                        Aus meiner Sicht muss irgendwo in den Kachel oder in den Instanzeinstellungen irgendwas aktiviert sein, dass der Kachelumriss sichtbar ist.
                        Schau mal durch, vielleicht findest du ja was.

                        dslraserD 1 Antwort Letzte Antwort
                        0
                        • B blackeagle998

                          @dslraser
                          Aus meiner Sicht muss irgendwo in den Kachel oder in den Instanzeinstellungen irgendwas aktiviert sein, dass der Kachelumriss sichtbar ist.
                          Schau mal durch, vielleicht findest du ja was.

                          dslraserD Offline
                          dslraserD Offline
                          dslraser
                          Forum Testing Most Active
                          schrieb am zuletzt editiert von
                          #3689

                          @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                          Schau mal durch, vielleicht findest du ja was.

                          edit einen über Dir 👍😜

                          B 1 Antwort Letzte Antwort
                          1
                          • dslraserD dslraser

                            @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                            Schau mal durch, vielleicht findest du ja was.

                            edit einen über Dir 👍😜

                            B Offline
                            B Offline
                            blackeagle998
                            schrieb am zuletzt editiert von
                            #3690

                            @dslraser
                            Sehr edel, top!

                            dslraserD 1 Antwort Letzte Antwort
                            0
                            • B blackeagle998

                              @dslraser
                              Sehr edel, top!

                              dslraserD Offline
                              dslraserD Offline
                              dslraser
                              Forum Testing Most Active
                              schrieb am zuletzt editiert von dslraser
                              #3691

                              @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                              @dslraser
                              Sehr edel, top!

                              Danke. Und dank Deiner Hilfe👍

                              Und natürlich auch Dank an @s-bormann 👍👍👍

                              1 Antwort Letzte Antwort
                              0
                              • dslraserD Offline
                                dslraserD Offline
                                dslraser
                                Forum Testing Most Active
                                schrieb am zuletzt editiert von dslraser
                                #3692

                                @blackeagle998 @s-bormann

                                Ich habe jetzt mal die Version 0.9 für mein Blockly erstellt (noch nicht hoch geladen). Damit ist es möglich für die HTML Listen ein Standard Farbthema/ein helles Farbthema und ein dunkles Farbthema per Schalter in den Datenpunken zu schalten.
                                In diesem Beispiel schalte ich hier sogar direkt in iQontrol um
                                Screenshot_20201103-204701_Chrome.jpg

                                Hier mal am Beispiel mit iQontrol und der Fensterliste. (Gif mit nicht so toller Qualität)

                                2_5265006443148348354.gif

                                @s-bormann
                                So ähnlich meinte ich meine Anfrage, ob es möglich ist, eine Art Tag Nachtschaltung in iQontrol ein zu bauen ?
                                Dann könnte man, abhängig von einem Helligkeitswert oder Uhrzeit, die Ansicht umschalten lassen.

                                s.bormannS 1 Antwort Letzte Antwort
                                1
                                • dslraserD dslraser

                                  @blackeagle998 @s-bormann

                                  Ich habe jetzt mal die Version 0.9 für mein Blockly erstellt (noch nicht hoch geladen). Damit ist es möglich für die HTML Listen ein Standard Farbthema/ein helles Farbthema und ein dunkles Farbthema per Schalter in den Datenpunken zu schalten.
                                  In diesem Beispiel schalte ich hier sogar direkt in iQontrol um
                                  Screenshot_20201103-204701_Chrome.jpg

                                  Hier mal am Beispiel mit iQontrol und der Fensterliste. (Gif mit nicht so toller Qualität)

                                  2_5265006443148348354.gif

                                  @s-bormann
                                  So ähnlich meinte ich meine Anfrage, ob es möglich ist, eine Art Tag Nachtschaltung in iQontrol ein zu bauen ?
                                  Dann könnte man, abhängig von einem Helligkeitswert oder Uhrzeit, die Ansicht umschalten lassen.

                                  s.bormannS Offline
                                  s.bormannS Offline
                                  s.bormann
                                  Most Active
                                  schrieb am zuletzt editiert von
                                  #3693

                                  @dslraser sagte in Test Adapter iQontrol 1.4.x:

                                  @blackeagle998 @s-bormann

                                  Ich habe jetzt mal die Version 0.9 für mein Blockly erstellt (noch nicht hoch geladen). Damit ist es möglich für die HTML Listen ein Standard Farbthema/ein helles Farbthema und ein dunkles Farbthema per Schalter in den Datenpunken zu schalten.
                                  In diesem Beispiel schalte ich hier sogar direkt in iQontrol um
                                  Screenshot_20201103-204701_Chrome.jpg

                                  Hier mal am Beispiel mit iQontrol und der Fensterliste. (Gif mit nicht so toller Qualität)

                                  2_5265006443148348354.gif

                                  @s-bormann
                                  So ähnlich meinte ich meine Anfrage, ob es möglich ist, eine Art Tag Nachtschaltung in iQontrol ein zu bauen ?
                                  Dann könnte man, abhängig von einem Helligkeitswert oder Uhrzeit, die Ansicht umschalten lassen.

                                  Wie immer, sehr geile Umsetzung von Dir! Mir gefällt die Idee, wie Du das mit der Schalter-Liste gemacht hast. Ist schon krass, was man alles rausholen kann, wenn man etwas rumspielt und die ganzen Optionen richtig einzusetzen weiß!

                                  Mit der Tag-Nacht-Schaltung habe ich schon ein wenig geschaut - schön wäre ja z.B. eine automatisch Anpassung, die der Einstellung des Endgerätes folgt. Da sich mein Urlaub aber jetzt dem Ende neigt und das ganze eine etwas umfangreichere Anpassung mit viel Fleißarbeit wird (alle Farb-Optionen müssen ja im Prinzip nochmal für den Nachtmodus erstellt werden), fürchte ich, dass das noch ein wenig dauert. Kommt aber bestimmt!

                                  LG

                                  dslraserD V 2 Antworten Letzte Antwort
                                  2
                                  • s.bormannS s.bormann

                                    @dslraser sagte in Test Adapter iQontrol 1.4.x:

                                    @blackeagle998 @s-bormann

                                    Ich habe jetzt mal die Version 0.9 für mein Blockly erstellt (noch nicht hoch geladen). Damit ist es möglich für die HTML Listen ein Standard Farbthema/ein helles Farbthema und ein dunkles Farbthema per Schalter in den Datenpunken zu schalten.
                                    In diesem Beispiel schalte ich hier sogar direkt in iQontrol um
                                    Screenshot_20201103-204701_Chrome.jpg

                                    Hier mal am Beispiel mit iQontrol und der Fensterliste. (Gif mit nicht so toller Qualität)

                                    2_5265006443148348354.gif

                                    @s-bormann
                                    So ähnlich meinte ich meine Anfrage, ob es möglich ist, eine Art Tag Nachtschaltung in iQontrol ein zu bauen ?
                                    Dann könnte man, abhängig von einem Helligkeitswert oder Uhrzeit, die Ansicht umschalten lassen.

                                    Wie immer, sehr geile Umsetzung von Dir! Mir gefällt die Idee, wie Du das mit der Schalter-Liste gemacht hast. Ist schon krass, was man alles rausholen kann, wenn man etwas rumspielt und die ganzen Optionen richtig einzusetzen weiß!

                                    Mit der Tag-Nacht-Schaltung habe ich schon ein wenig geschaut - schön wäre ja z.B. eine automatisch Anpassung, die der Einstellung des Endgerätes folgt. Da sich mein Urlaub aber jetzt dem Ende neigt und das ganze eine etwas umfangreichere Anpassung mit viel Fleißarbeit wird (alle Farb-Optionen müssen ja im Prinzip nochmal für den Nachtmodus erstellt werden), fürchte ich, dass das noch ein wenig dauert. Kommt aber bestimmt!

                                    LG

                                    dslraserD Offline
                                    dslraserD Offline
                                    dslraser
                                    Forum Testing Most Active
                                    schrieb am zuletzt editiert von dslraser
                                    #3694

                                    @s-bormann
                                    Kein Problem, eilt ja auch nicht. Du bist ja sonst an Geschwindigkeit und Support nicht zu übertreffen.
                                    Aber...😀, Du hattest vor kurzem mal nach Ideen für die kalte Jahreszeit gefragt.😜

                                    1 Antwort Letzte Antwort
                                    2
                                    • s.bormannS s.bormann

                                      @dslraser sagte in Test Adapter iQontrol 1.4.x:

                                      @blackeagle998 @s-bormann

                                      Ich habe jetzt mal die Version 0.9 für mein Blockly erstellt (noch nicht hoch geladen). Damit ist es möglich für die HTML Listen ein Standard Farbthema/ein helles Farbthema und ein dunkles Farbthema per Schalter in den Datenpunken zu schalten.
                                      In diesem Beispiel schalte ich hier sogar direkt in iQontrol um
                                      Screenshot_20201103-204701_Chrome.jpg

                                      Hier mal am Beispiel mit iQontrol und der Fensterliste. (Gif mit nicht so toller Qualität)

                                      2_5265006443148348354.gif

                                      @s-bormann
                                      So ähnlich meinte ich meine Anfrage, ob es möglich ist, eine Art Tag Nachtschaltung in iQontrol ein zu bauen ?
                                      Dann könnte man, abhängig von einem Helligkeitswert oder Uhrzeit, die Ansicht umschalten lassen.

                                      Wie immer, sehr geile Umsetzung von Dir! Mir gefällt die Idee, wie Du das mit der Schalter-Liste gemacht hast. Ist schon krass, was man alles rausholen kann, wenn man etwas rumspielt und die ganzen Optionen richtig einzusetzen weiß!

                                      Mit der Tag-Nacht-Schaltung habe ich schon ein wenig geschaut - schön wäre ja z.B. eine automatisch Anpassung, die der Einstellung des Endgerätes folgt. Da sich mein Urlaub aber jetzt dem Ende neigt und das ganze eine etwas umfangreichere Anpassung mit viel Fleißarbeit wird (alle Farb-Optionen müssen ja im Prinzip nochmal für den Nachtmodus erstellt werden), fürchte ich, dass das noch ein wenig dauert. Kommt aber bestimmt!

                                      LG

                                      V Offline
                                      V Offline
                                      vepman
                                      schrieb am zuletzt editiert von
                                      #3695

                                      @s-bormann
                                      Nur eine Frage, kein Feature-Request.
                                      Es ist ja möglich eine einzelne Kachel über http aufzurufen.
                                      Kann man auch der Kachel einen Wert (true, false, 1, 0) mitgeben?
                                      Wenn ja, wie wäre dann die Syntax?

                                      metaxaM s.bormannS 2 Antworten Letzte Antwort
                                      0
                                      • V vepman

                                        @s-bormann
                                        Nur eine Frage, kein Feature-Request.
                                        Es ist ja möglich eine einzelne Kachel über http aufzurufen.
                                        Kann man auch der Kachel einen Wert (true, false, 1, 0) mitgeben?
                                        Wenn ja, wie wäre dann die Syntax?

                                        metaxaM Offline
                                        metaxaM Offline
                                        metaxa
                                        schrieb am zuletzt editiert von
                                        #3696

                                        @dslraser & @s-bormann:

                                        dslraser schreibt in

                                        iQontrol hat den Vorteil, das es auch für pro Nutzer ohne VPN oder ähnliches erreichbar und aufrufbar ist.

                                        Hi, bei mir gibts da seit Wochen (Monaten?) Probleme. Ich bekomme zwar meine iQontrol Startseite, kann danach aber nichts mehr weiter machen.
                                        Screenshot_20201102_093418_com.huawei.browser.jpg
                                        Am Handy ist es für mich unmöglich irgendwie F12 zu drücken.

                                        Woran könnte ich drehen? VIS,Admin, Float geht einwandfrei von der Startseite.

                                        LG, mxa

                                        dslraserD 2 Antworten Letzte Antwort
                                        0
                                        • metaxaM metaxa

                                          @dslraser & @s-bormann:

                                          dslraser schreibt in

                                          iQontrol hat den Vorteil, das es auch für pro Nutzer ohne VPN oder ähnliches erreichbar und aufrufbar ist.

                                          Hi, bei mir gibts da seit Wochen (Monaten?) Probleme. Ich bekomme zwar meine iQontrol Startseite, kann danach aber nichts mehr weiter machen.
                                          Screenshot_20201102_093418_com.huawei.browser.jpg
                                          Am Handy ist es für mich unmöglich irgendwie F12 zu drücken.

                                          Woran könnte ich drehen? VIS,Admin, Float geht einwandfrei von der Startseite.

                                          LG, mxa

                                          dslraserD Offline
                                          dslraserD Offline
                                          dslraser
                                          Forum Testing Most Active
                                          schrieb am zuletzt editiert von
                                          #3697

                                          @metaxa sagte in Test Adapter iQontrol 1.4.x:

                                          Woran könnte ich drehen?

                                          Kann ich Dir leider nicht beantworten, bei mir funktioniert das einwandfrei. (Android Note 10 plus 5G)

                                          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

                                          718

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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