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

donate donate
  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.6k

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

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

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.
  • F FuXXz2

    @s-bormann
    Ok danke! Das klappt erstmal super.
    Direkten Einfluss auf die Anordnung hat man nicht oder? Außer CSS meine ich jetzt?
    Dort fehlen mir nämlich im DIV ID DialogAdditionalControlsContent weitere klassen.
    Schön wäre, wenn die Additional_Controls nebeneinander wären, zumindest die Dimmwerte.
    Screenshot 2020-11-07 141103.jpg

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

    @FuXXz2 sagte in Test Adapter iQontrol 1.4.x:

    @s-bormann
    Ok danke! Das klappt erstmal super.
    Direkten Einfluss auf die Anordnung hat man nicht oder? Außer CSS meine ich jetzt?
    Dort fehlen mir nämlich im DIV ID DialogAdditionalControlsContent weitere klassen.
    Schön wäre, wenn die Additional_Controls nebeneinander wären, zumindest die Dimmwerte.
    Screenshot 2020-11-07 141103.jpg

    Hi,
    das wurde schon gefragt und steht auch auf meiner Liste, habe ich bislang aber noch nicht geschafft. Ein paar zusätzliche Klassen einfügen wäre aber ja vermutlich schnell erledigt, was bräuchtest Du denn genau?
    LG

    1 Antwort Letzte Antwort
    0
    • E eMd

      @s-bormann

      Geht bei mir auch nicht über .pro

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

      @eMd Danke für die Rückmeldung, dann weiß ich bescheid! LG

      1 Antwort Letzte Antwort
      0
      • s.bormannS Offline
        s.bormannS Offline
        s.bormann
        Most Active
        schrieb am zuletzt editiert von s.bormann
        #3736

        Hallo,

        es gibt eine neue Github-Version zum testen. Es wäre toll, wenn das einige mal testen und Rückmeldung geben könnten, ob noch alles passt, denn ich musste viele CSS-Eigenschaften anpassen. Das ganze hat erst ganz locker angefangen - aber egal, wo ich was gedreht habe, ging irgendwo eine neue Baustelle auf... Nach viel Frust und vielen Änderungen passt es jetzt bei mir zumindest wieder alles, aber das heißt ja noch nichts :)

        Das ganze war notwendig, weil ich ein Panel eingebaut habe, so dass man sich eine zweite Ansicht links neben die Hauptansicht schieben kann. Quasi eine Art Split-Screen wie auf dem iPad:
        9ac48f14-c627-4f43-a7eb-0f4a5a1f65f8-image.png

        Man kann das Panel bzw. den Split-Screen umfassend konfigurieren (z.B. ob er ab einer gewissen Bildschirmgröße automatisch eingeblendet werden soll, wie er geöffnet, wie geschlossen wird etc.).

        Befüllen kann man das Panel mit HTML, also auch Widgets - oder einer eigenen View (auch bei den Gerätekacheln kann man jetzt Views als Hintergrund einfügen - wie auf dem Bild schon zu sehen).

        Solche Background-Views sind ganz normal angelegte Ansichten in iQontrol. Es gibt aber ein paar Besonderheiten: Neben geringfügig anderem Styling, ist z.B. Swiping, die Toolbar und Panels deaktiviert. Außerdem, und das ist glaube ich wichtig, kann man bei den einzelnen Gerätekacheln jetzt die Option aktivieren Die verknüpfte Ansicht in der Haupt-Instanz öffnen, wenn diese Ansicht als BACKGROUND_VIEW verwendet wird. Das bedeutet, dass die Links zu anderen Ansichten, nicht im Split-Screen, sondern auf der Haupt-Ansicht geöffnet werden. Man kann sich somit also eine schöne Navigation in die Seitenleiste bauen:
        b1124213-a8c2-47fe-b4c0-1b17d0fab81d-image.png

        Ein paar Kleinigkeiten gibts noch, z.B. die optionale Anzeige von Swipe-Goals ganz oben in der Ecke:
        26b5f194-e681-4f2f-b63a-5b31ba064966-image.png

        Und ein paar Verbesserungen bei den Widgets. So wird jetzt beim Hinzufügen von Widgets ein Konfigurationsdialog gezeigt:
        3fab3f6f-aeff-450b-95dc-b809c630a218-image.png

        Lieb gewonnen habe ich die FLOT-Charts als Hintergrund in den Kacheln:
        9e9a3c5f-90db-4b9b-b92e-17bc8d58657b-image.png

        So dann, ich hoffe, alles läuft!!
        Viel Spaß damit!

        LG

        V S B B M 5 Antworten Letzte Antwort
        6
        • 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

          C Offline
          C Offline
          CrazyFloyd
          schrieb am zuletzt editiert von CrazyFloyd
          #3737

          @dslraser sagte in Test Adapter iQontrol 1.4.x:

          @blackeagle998

          hier noch mal das aktuelle Script für diese Ansicht

          Erstmal herzlichen Dank für dein Script. Ich brauche eine kurze Hilfe bezüglich der Moon Icons. In welchem Pfad müssen diese genau liegen. Da ich leider trotz durchforsten des Scripts keine Pfadangabe finden konnte. Oder müssen die PNG Bilder eine besondere Namensgebung bekommen? Danke.

          dslraserD B 2 Antworten Letzte Antwort
          0
          • s.bormannS s.bormann

            Hallo,

            es gibt eine neue Github-Version zum testen. Es wäre toll, wenn das einige mal testen und Rückmeldung geben könnten, ob noch alles passt, denn ich musste viele CSS-Eigenschaften anpassen. Das ganze hat erst ganz locker angefangen - aber egal, wo ich was gedreht habe, ging irgendwo eine neue Baustelle auf... Nach viel Frust und vielen Änderungen passt es jetzt bei mir zumindest wieder alles, aber das heißt ja noch nichts :)

            Das ganze war notwendig, weil ich ein Panel eingebaut habe, so dass man sich eine zweite Ansicht links neben die Hauptansicht schieben kann. Quasi eine Art Split-Screen wie auf dem iPad:
            9ac48f14-c627-4f43-a7eb-0f4a5a1f65f8-image.png

            Man kann das Panel bzw. den Split-Screen umfassend konfigurieren (z.B. ob er ab einer gewissen Bildschirmgröße automatisch eingeblendet werden soll, wie er geöffnet, wie geschlossen wird etc.).

            Befüllen kann man das Panel mit HTML, also auch Widgets - oder einer eigenen View (auch bei den Gerätekacheln kann man jetzt Views als Hintergrund einfügen - wie auf dem Bild schon zu sehen).

            Solche Background-Views sind ganz normal angelegte Ansichten in iQontrol. Es gibt aber ein paar Besonderheiten: Neben geringfügig anderem Styling, ist z.B. Swiping, die Toolbar und Panels deaktiviert. Außerdem, und das ist glaube ich wichtig, kann man bei den einzelnen Gerätekacheln jetzt die Option aktivieren Die verknüpfte Ansicht in der Haupt-Instanz öffnen, wenn diese Ansicht als BACKGROUND_VIEW verwendet wird. Das bedeutet, dass die Links zu anderen Ansichten, nicht im Split-Screen, sondern auf der Haupt-Ansicht geöffnet werden. Man kann sich somit also eine schöne Navigation in die Seitenleiste bauen:
            b1124213-a8c2-47fe-b4c0-1b17d0fab81d-image.png

            Ein paar Kleinigkeiten gibts noch, z.B. die optionale Anzeige von Swipe-Goals ganz oben in der Ecke:
            26b5f194-e681-4f2f-b63a-5b31ba064966-image.png

            Und ein paar Verbesserungen bei den Widgets. So wird jetzt beim Hinzufügen von Widgets ein Konfigurationsdialog gezeigt:
            3fab3f6f-aeff-450b-95dc-b809c630a218-image.png

            Lieb gewonnen habe ich die FLOT-Charts als Hintergrund in den Kacheln:
            9e9a3c5f-90db-4b9b-b92e-17bc8d58657b-image.png

            So dann, ich hoffe, alles läuft!!
            Viel Spaß damit!

            LG

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

            @s-bormann
            Also vorweg, das Panel funktioniert super.
            Wie kann ich z.B. die Hauptansicht mit dem Panel steuern?
            Wenn ich "Verknüpfung zu anderer Ansicht" wähle, wechselt die Ansicht im Panel und nicht in der Hauptansicht.
            Wo liegt mein Gedankenfehler?

            s.bormannS 1 Antwort Letzte Antwort
            0
            • C CrazyFloyd

              @dslraser sagte in Test Adapter iQontrol 1.4.x:

              @blackeagle998

              hier noch mal das aktuelle Script für diese Ansicht

              Erstmal herzlichen Dank für dein Script. Ich brauche eine kurze Hilfe bezüglich der Moon Icons. In welchem Pfad müssen diese genau liegen. Da ich leider trotz durchforsten des Scripts keine Pfadangabe finden konnte. Oder müssen die PNG Bilder eine besondere Namensgebung bekommen? Danke.

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

              @CrazyFloyd sagte in Test Adapter iQontrol 1.4.x:

              @dslraser sagte in Test Adapter iQontrol 1.4.x:

              @blackeagle998

              hier noch mal das aktuelle Script für diese Ansicht

              Erstmal herzlichen Dank für dein Script. Ich brauche eine kurze Hilfe bezüglich der Moon Icons. In welchem Pfad müssen diese genau liegen. Da ich leider trotz durchforsten des Scripts keine Pfadangabe finden konnte. Oder müssen die PNG Bilder eine besondere Namensgebung bekommen? Danke.

              Kann ich Dir gar nicht sagen, da ich keine Moon Icons nutze. Dazu kann @blackeagle998 Dir bestimmt helfen.

              1 Antwort Letzte Antwort
              1
              • C CrazyFloyd

                @dslraser sagte in Test Adapter iQontrol 1.4.x:

                @blackeagle998

                hier noch mal das aktuelle Script für diese Ansicht

                Erstmal herzlichen Dank für dein Script. Ich brauche eine kurze Hilfe bezüglich der Moon Icons. In welchem Pfad müssen diese genau liegen. Da ich leider trotz durchforsten des Scripts keine Pfadangabe finden konnte. Oder müssen die PNG Bilder eine besondere Namensgebung bekommen? Danke.

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

                @CrazyFloyd
                Die mond Icons müssen in folgendem Ordner liegen:

                ./../iqontrol.meta/userimages/usericons/wetter/mond/
                

                Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                C dslraserD 3 Antworten Letzte Antwort
                0
                • V vepman

                  @s-bormann
                  Also vorweg, das Panel funktioniert super.
                  Wie kann ich z.B. die Hauptansicht mit dem Panel steuern?
                  Wenn ich "Verknüpfung zu anderer Ansicht" wähle, wechselt die Ansicht im Panel und nicht in der Hauptansicht.
                  Wo liegt mein Gedankenfehler?

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

                  @vepman sagte in Test Adapter iQontrol 1.4.x:

                  @s-bormann
                  Also vorweg, das Panel funktioniert super.
                  Wie kann ich z.B. die Hauptansicht mit dem Panel steuern?
                  Wenn ich "Verknüpfung zu anderer Ansicht" wähle, wechselt die Ansicht im Panel und nicht in der Hauptansicht.
                  Wo liegt mein Gedankenfehler?

                  Du musst diese Option in der Kachel mit der Verknüpfung zur anderen Ansicht aktivieren:
                  d5daab42-4fb4-4e47-8214-e2d429ec3cc9-image.png

                  LG

                  V 1 Antwort Letzte Antwort
                  0
                  • B blackeagle998

                    @CrazyFloyd
                    Die mond Icons müssen in folgendem Ordner liegen:

                    ./../iqontrol.meta/userimages/usericons/wetter/mond/
                    

                    Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                    Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                    C Offline
                    C Offline
                    CrazyFloyd
                    schrieb am zuletzt editiert von
                    #3742

                    @blackeagle998
                    Prima. Danke. Werde es heute Abend sehen.

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

                      @vepman sagte in Test Adapter iQontrol 1.4.x:

                      @s-bormann
                      Also vorweg, das Panel funktioniert super.
                      Wie kann ich z.B. die Hauptansicht mit dem Panel steuern?
                      Wenn ich "Verknüpfung zu anderer Ansicht" wähle, wechselt die Ansicht im Panel und nicht in der Hauptansicht.
                      Wo liegt mein Gedankenfehler?

                      Du musst diese Option in der Kachel mit der Verknüpfung zur anderen Ansicht aktivieren:
                      d5daab42-4fb4-4e47-8214-e2d429ec3cc9-image.png

                      LG

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

                      @s-bormann
                      Klappt jetzt

                      V 1 Antwort Letzte Antwort
                      0
                      • S Offline
                        S Offline
                        sandro_gera
                        schrieb am zuletzt editiert von
                        #3744

                        Hallo an alle,

                        ich habe mir zwar die Dokumentation durchgelesen, aber ich komme nicht wirklich weiter.
                        Ich beschäftige mich noch nicht so lange mit ioBroker, daher bitte ich meine dummen Fragen zu entschuldigen.
                        Ich habe versuch ein Wetterwidget auf Home zu ersellen und dazu bei Backround url die url einer Wetterstation bei wunderground eingegeben. leider kommt die Meldung das wundergrund den Zugriff verweigert.

                        Des weiteren habe ich bereits Räume Steckdosen (Geräte) und Lampen angelegt und möchte auf Home eine Anzeige bekommen welche Lampen eingeschaltet, welche Geräte an und welche Fenster offen sind bekommen. Leider hab ich nicht wirklich eine Idee wie ich das anstellen kann.

                        Es wäre nett wenn mir jemand hilft oder mir einen tipp gibt wo ich eine anleitung dafür finde.

                        Vielen Dank im Voraus

                        Master RPI4 8GB, Slave RPI3 1GB
                        Node.js v18.17.1, npm: 9.6.7,
                        JS-Controller: 5.0.16

                        1 Antwort Letzte Antwort
                        0
                        • B blackeagle998

                          @CrazyFloyd
                          Die mond Icons müssen in folgendem Ordner liegen:

                          ./../iqontrol.meta/userimages/usericons/wetter/mond/
                          

                          Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                          Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

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

                          @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                          @CrazyFloyd
                          Die mond Icons müssen in folgendem Ordner liegen:

                          ./../iqontrol.meta/userimages/usericons/wetter/mond/
                          

                          Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                          Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                          Kann bitte mal Jemand "vernünftige" Mond Symbole zur Verfügung stellen ?

                          C 1 Antwort Letzte Antwort
                          0
                          • V vepman

                            @s-bormann
                            Klappt jetzt

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

                            @vepman sagte in Test Adapter iQontrol 1.4.x:

                            @s-bormann
                            Klappt jetzt

                            Bis auf das ein iQontrol-Popup von Blockly gleichzeitig auch im Panel angezeigt wird.

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

                              Hallo,

                              es gibt eine neue Github-Version zum testen. Es wäre toll, wenn das einige mal testen und Rückmeldung geben könnten, ob noch alles passt, denn ich musste viele CSS-Eigenschaften anpassen. Das ganze hat erst ganz locker angefangen - aber egal, wo ich was gedreht habe, ging irgendwo eine neue Baustelle auf... Nach viel Frust und vielen Änderungen passt es jetzt bei mir zumindest wieder alles, aber das heißt ja noch nichts :)

                              Das ganze war notwendig, weil ich ein Panel eingebaut habe, so dass man sich eine zweite Ansicht links neben die Hauptansicht schieben kann. Quasi eine Art Split-Screen wie auf dem iPad:
                              9ac48f14-c627-4f43-a7eb-0f4a5a1f65f8-image.png

                              Man kann das Panel bzw. den Split-Screen umfassend konfigurieren (z.B. ob er ab einer gewissen Bildschirmgröße automatisch eingeblendet werden soll, wie er geöffnet, wie geschlossen wird etc.).

                              Befüllen kann man das Panel mit HTML, also auch Widgets - oder einer eigenen View (auch bei den Gerätekacheln kann man jetzt Views als Hintergrund einfügen - wie auf dem Bild schon zu sehen).

                              Solche Background-Views sind ganz normal angelegte Ansichten in iQontrol. Es gibt aber ein paar Besonderheiten: Neben geringfügig anderem Styling, ist z.B. Swiping, die Toolbar und Panels deaktiviert. Außerdem, und das ist glaube ich wichtig, kann man bei den einzelnen Gerätekacheln jetzt die Option aktivieren Die verknüpfte Ansicht in der Haupt-Instanz öffnen, wenn diese Ansicht als BACKGROUND_VIEW verwendet wird. Das bedeutet, dass die Links zu anderen Ansichten, nicht im Split-Screen, sondern auf der Haupt-Ansicht geöffnet werden. Man kann sich somit also eine schöne Navigation in die Seitenleiste bauen:
                              b1124213-a8c2-47fe-b4c0-1b17d0fab81d-image.png

                              Ein paar Kleinigkeiten gibts noch, z.B. die optionale Anzeige von Swipe-Goals ganz oben in der Ecke:
                              26b5f194-e681-4f2f-b63a-5b31ba064966-image.png

                              Und ein paar Verbesserungen bei den Widgets. So wird jetzt beim Hinzufügen von Widgets ein Konfigurationsdialog gezeigt:
                              3fab3f6f-aeff-450b-95dc-b809c630a218-image.png

                              Lieb gewonnen habe ich die FLOT-Charts als Hintergrund in den Kacheln:
                              9e9a3c5f-90db-4b9b-b92e-17bc8d58657b-image.png

                              So dann, ich hoffe, alles läuft!!
                              Viel Spaß damit!

                              LG

                              S Offline
                              S Offline
                              sebi85
                              schrieb am zuletzt editiert von
                              #3747

                              @s-bormann Finde die neuen Funktion mit dem Panel super - danke dafür!

                              Bei mir scheint soweit auch alles zu funktionieren. Ich fände es noch schick, wenn man die Option hätte, dass das Panel nach dem Klick eines Geräts wieder schließt (oder auf Geräte-Ebene analog dem "Die verknüpfte Ansicht in der Haupt-Instanz öffnen"). Ich würde das Panel als Navigationsmenü nutzen und dort viele Verknüpfungen auf andere Seiten erstellen.

                              LG, Sebi

                              s.bormannS 1 Antwort Letzte Antwort
                              0
                              • dslraserD dslraser

                                @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                                @CrazyFloyd
                                Die mond Icons müssen in folgendem Ordner liegen:

                                ./../iqontrol.meta/userimages/usericons/wetter/mond/
                                

                                Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                                Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                                Kann bitte mal Jemand "vernünftige" Mond Symbole zur Verfügung stellen ?

                                C Offline
                                C Offline
                                CrazyFloyd
                                schrieb am zuletzt editiert von
                                #3748

                                @dslraser sagte in Test Adapter iQontrol 1.4.x:

                                @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                                @CrazyFloyd
                                Die mond Icons müssen in folgendem Ordner liegen:

                                ./../iqontrol.meta/userimages/usericons/wetter/mond/
                                

                                Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                                Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                                Kann bitte mal Jemand "vernünftige" Mond Symbole zur Verfügung stellen ?

                                mond.zip

                                Ich finde diese ganz schön...

                                dslraserD 1 Antwort Letzte Antwort
                                1
                                • C CrazyFloyd

                                  @dslraser sagte in Test Adapter iQontrol 1.4.x:

                                  @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                                  @CrazyFloyd
                                  Die mond Icons müssen in folgendem Ordner liegen:

                                  ./../iqontrol.meta/userimages/usericons/wetter/mond/
                                  

                                  Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                                  Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                                  Kann bitte mal Jemand "vernünftige" Mond Symbole zur Verfügung stellen ?

                                  mond.zip

                                  Ich finde diese ganz schön...

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

                                  @CrazyFloyd
                                  Danke. (hatte ich auch gerade in einem anderen Thread gefunden😀)

                                  Die finde ich auch besser als die originale im Adapter.

                                  1 Antwort Letzte Antwort
                                  0
                                  • B blackeagle998

                                    @CrazyFloyd
                                    Die mond Icons müssen in folgendem Ordner liegen:

                                    ./../iqontrol.meta/userimages/usericons/wetter/mond/
                                    

                                    Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                                    Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                                    C Offline
                                    C Offline
                                    CrazyFloyd
                                    schrieb am zuletzt editiert von
                                    #3750

                                    @blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

                                    @CrazyFloyd
                                    Die mond Icons müssen in folgendem Ordner liegen:

                                    ./../iqontrol.meta/userimages/usericons/wetter/mond/
                                    

                                    Darin befinden sich die einzelnen x.png Dateien durchnummeriert von 0.png bis 28.png glaube ich.

                                    Du kannst natürlich auch einen anderen Ordner verwenden, dann muss der Pfad im Skript aber angepasst werden.

                                    Mondumschaltung klappt jetzt. Siehe Bild. Danke.
                                    (mondbs.jpg

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

                                      Hallo,

                                      es gibt eine neue Github-Version zum testen. Es wäre toll, wenn das einige mal testen und Rückmeldung geben könnten, ob noch alles passt, denn ich musste viele CSS-Eigenschaften anpassen. Das ganze hat erst ganz locker angefangen - aber egal, wo ich was gedreht habe, ging irgendwo eine neue Baustelle auf... Nach viel Frust und vielen Änderungen passt es jetzt bei mir zumindest wieder alles, aber das heißt ja noch nichts :)

                                      Das ganze war notwendig, weil ich ein Panel eingebaut habe, so dass man sich eine zweite Ansicht links neben die Hauptansicht schieben kann. Quasi eine Art Split-Screen wie auf dem iPad:
                                      9ac48f14-c627-4f43-a7eb-0f4a5a1f65f8-image.png

                                      Man kann das Panel bzw. den Split-Screen umfassend konfigurieren (z.B. ob er ab einer gewissen Bildschirmgröße automatisch eingeblendet werden soll, wie er geöffnet, wie geschlossen wird etc.).

                                      Befüllen kann man das Panel mit HTML, also auch Widgets - oder einer eigenen View (auch bei den Gerätekacheln kann man jetzt Views als Hintergrund einfügen - wie auf dem Bild schon zu sehen).

                                      Solche Background-Views sind ganz normal angelegte Ansichten in iQontrol. Es gibt aber ein paar Besonderheiten: Neben geringfügig anderem Styling, ist z.B. Swiping, die Toolbar und Panels deaktiviert. Außerdem, und das ist glaube ich wichtig, kann man bei den einzelnen Gerätekacheln jetzt die Option aktivieren Die verknüpfte Ansicht in der Haupt-Instanz öffnen, wenn diese Ansicht als BACKGROUND_VIEW verwendet wird. Das bedeutet, dass die Links zu anderen Ansichten, nicht im Split-Screen, sondern auf der Haupt-Ansicht geöffnet werden. Man kann sich somit also eine schöne Navigation in die Seitenleiste bauen:
                                      b1124213-a8c2-47fe-b4c0-1b17d0fab81d-image.png

                                      Ein paar Kleinigkeiten gibts noch, z.B. die optionale Anzeige von Swipe-Goals ganz oben in der Ecke:
                                      26b5f194-e681-4f2f-b63a-5b31ba064966-image.png

                                      Und ein paar Verbesserungen bei den Widgets. So wird jetzt beim Hinzufügen von Widgets ein Konfigurationsdialog gezeigt:
                                      3fab3f6f-aeff-450b-95dc-b809c630a218-image.png

                                      Lieb gewonnen habe ich die FLOT-Charts als Hintergrund in den Kacheln:
                                      9e9a3c5f-90db-4b9b-b92e-17bc8d58657b-image.png

                                      So dann, ich hoffe, alles läuft!!
                                      Viel Spaß damit!

                                      LG

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

                                      @s-bormann
                                      Die Panel Funktion ist ja genial, finde ich persönlich ideal für die Auflistung aller aktiven Geräte (Lichter, offene Fenster etc.).
                                      So viel neues, da muss ich erstmal in Ruhe wieder einiges umbauen.

                                      Danke, dass du so viel Arbeit da rein steckst!!!

                                      Btw. wäre es denkbar ein zweites Panel auf der anderen Seite anzulegen, sodass man beidseitig verschiedene Informationen per Panel einblenden kann?

                                      Top Arbeit!

                                      s.bormannS 1 Antwort Letzte Antwort
                                      0
                                      • B Offline
                                        B Offline
                                        blackeagle998
                                        schrieb am zuletzt editiert von
                                        #3752

                                        @s-bormann
                                        Ich erweitere mal meine obige Anfrage zum Panel um zwei Punkte:

                                        1. Das Panel soll in Abhängigkeit vom Inhalt eines Datenpunktes dauerhaft angezeigt werden, bis der Datenpunkt leer (string) oder false ist.
                                          Eigentlich funktioniert das schon fast, nur dauerhaft nicht, richtig?

                                        2. Bei eingeblendetem Panel wird links immer noch der Öffnen Pfeil angezeigt, kann der ausgeblendet werden?

                                        Screenshot_20201108-190426_Chrome_1.png

                                        B 1 Antwort Letzte Antwort
                                        0
                                        • s.bormannS s.bormann

                                          Willkommen im iQontrol-Entwicklungs-Thread!

                                          iQontrol ist ein Visualisierungs-Adapter.

                                          Number of Installations
                                          Stable version
                                          NPM version
                                          Downloads
                                          Known Vulnerabilities

                                          Dies ist der Entwicklungs-Thread

                                          Hier werden die neuesten Updates veröffentlicht, neue Ideen und Features diskutiert und es finden alpha und beta-Tests statt. Wer also immer auf dem neuesten Stand sein will oder sich aktiv einbringen möchte, ist hier richtig aufgehoben.

                                          Alternativ gibt es noch den iQontrol-Support-Thread. Hier sollen Support-Anfragen gestellt und diskutiert werden:
                                          https://forum.iobroker.net/topic/52077

                                          Wichtige Resourcen

                                          Das Readme auf Github beschreibt die wichtigsten Einstellungen, Troubleshooting etc.:
                                          https://github.com/sbormann/ioBroker.iqontrol

                                          Video-Tutorials:
                                          https://www.youtube.com/playlist?list=PL8epyNz8pGEv6-R8dnfXm-m5aBlZFKOBG

                                          Wiki mit einer Sammlung nützlicher Scripte, Widgets etc.:
                                          https://github.com/sbormann/ioBroker.iqontrol/wiki

                                          Viel Spaß und Erfolg,
                                          Sebastian

                                          B Offline
                                          B Offline
                                          Blackeye
                                          schrieb am zuletzt editiert von
                                          #3753

                                          Hallo zusammen,

                                          bin gerade über das Tool gestolpert und es ist wirklich super.
                                          Habe jetzt angefangen mir die Buttons nur unter bestimmten Bedingungen einzublenden.
                                          Das mit dem eigenen Status habe ich hinbekommen aber mit dem Staubsauger klappt es nicht ganz.
                                          Der andere Adapter hat leider keinen aktuellen Status, dachte ich mir ich kann ja den Akku prüfen...Also ich möchte den Button sehen wenn der Akku des Robos nicht bei 100% liegt....
                                          So klappt es aber nicht :

                                          mihome-vacuum.0.info.battery level <> "100"

                                          Danke!

                                          s.bormannS 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

                                          667

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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