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

blackeagle998

@dslraser
Ich nutze mittlerweile das Wettericon rechts oben, um die Wettervorschau anzuzeigen / auszublenden.
Wäre das für dich eine Option?

Wenn ja, müsstest du mir mal dein komplettes Skript zur Verfügung stellen, dann kann ich dir helfen, das anzupassen.
Dafür bräuchtest du lediglich einen zusätzlichen Datenpunkt (boolean, switch), der über true/false die Anzeige (true = Kachel aktiv = Größe 3x2, false = Kachel inaktiv = Größe 3x1) regelt.

dslraser

@blackeagle998
Moin, danke für Deine Hilfe. Das Script ist noch das hier aus dem Forum (V7 ohne Müll)

Edit: müßte das hier sein
https://forum.iobroker.net/post/491770

const DP_Uhr_digital = '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7';

fctInit();

function fctInit(){
 if(!existsState(DP_Uhr_digital)) {
     createState(DP_Uhr_digital,
         {type: 'string', name: 'iQontrol Uhr', role: 'value', read: true , write: true}
     );
 }
 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_style      = '';
  let image_Wetter        = '';

  //in diesem iQontrol Unterordner liegen die Wetter-Icons
  image_Wetter        = './../iqontrol.meta/userimages/usericons/wetter/';

// ##########################################################################
// CSS Style (Formatierung der HTML Elemente)
// ##########################################################################
  str_HTML_style = str_HTML_style + '<style>';
  str_HTML_style = str_HTML_style + 'body {';
  str_HTML_style = str_HTML_style + 'background-color:' + str_color_body + ';';
  str_HTML_style = str_HTML_style + '}';

  str_HTML_style = str_HTML_style + 'span {';
  //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
  //str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border:1px solid gainsboro;border-color:White;';
  //Textausrichtung
  str_HTML_style = str_HTML_style + 'text-align:' + str_position_font + ';';
  //Schriftfarbe
  str_HTML_style = str_HTML_style + 'color:' + str_color_font + ';';
  //Wer keine Hintergrundfarbe für die Boxen will, kommentiert die nachfolgende Zeile aus oder löscht sie.
  //str_HTML_style = str_HTML_style + 'background-color:' + str_color_cell + ';';
  str_HTML_style = str_HTML_style + '}';

  str_HTML_style = str_HTML_style + 'td {';
  str_HTML_style = str_HTML_style + 'border-width:1px;';
  str_HTML_style = str_HTML_style + 'border-style:solid;';
  str_HTML_style = str_HTML_style + 'border-color:black;';
  str_HTML_style = str_HTML_style + '}';

  str_HTML_style = str_HTML_style + '.container_column {';
  str_HTML_style = str_HTML_style + 'display:flex;';
  //Elemente werden untereinander dargestellt
  str_HTML_style = str_HTML_style + 'flex-direction: column;';
  str_HTML_style = str_HTML_style + 'justify-content: flex-start;';
  //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
  //str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow;';
  str_HTML_style = str_HTML_style + '}';

  str_HTML_style = str_HTML_style + '.container_row {';
  str_HTML_style = str_HTML_style + 'display: flex;';
  //Elemente werden untereinander dargestellt
  str_HTML_style = str_HTML_style + 'flex-direction: row;';
  str_HTML_style = str_HTML_style + 'justify-content: space-between;';
  //Rahmen: abgerundete Ecken (5px), Strichstärke (0px = aus) und Farbe
  //str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow;';
  str_HTML_style = str_HTML_style + '}';

  str_HTML_style = str_HTML_style + 'input {';
  str_HTML_style = str_HTML_style + 'height:10vw;';
  str_HTML_style = str_HTML_style + 'width:10vw;';
  str_HTML_style = str_HTML_style + '}';

  str_HTML_style = str_HTML_style + '.img_wetter {';
  str_HTML_style = str_HTML_style + 'height:15vw;';
  str_HTML_style = str_HTML_style + 'width:15vw;';
  str_HTML_style = str_HTML_style + '}';
 
  //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_style = str_HTML_style + '.box_uhr {font-size:14vmax;}';
  str_HTML_style = str_HTML_style + '.box_datum {font-size:4vmax;text-align:center;}';
  str_HTML_style = str_HTML_style + '.box_wetter {font-size:4vmax;margin-right:1.5vw;text-align:center;}';
  
  str_HTML_style = str_HTML_style + '.table_Wettervorschau {';
  str_HTML_style = str_HTML_style + 'margin-top:3vw;';
  str_HTML_style = str_HTML_style + 'border-collapse: collapse;';
  str_HTML_style = str_HTML_style + 'font-size:3vmax;';
  str_HTML_style = str_HTML_style + 'color:' + str_color_font + ';';
  str_HTML_style = str_HTML_style + '}';
  str_HTML_style = str_HTML_style + '</style>';

// ##########################################################################
// 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_style + '<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 + '<span><img class="img_wetter" src="' + image_Wetter + getState('daswetter.0.NextHours.Location_1.Day_1.current.symbol_value').val + '.png' + '"/></span>';
  }else{
      str_HTML = str_HTML + '<span><img class="img_wetter" src="' + image_Wetter + 'mond/' + getState('daswetter.0.NextHours.Location_1.Day_1.moon_symbol').val + '.png' + '"/></span>';
  }
  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 + 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 + 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 + 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 + 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 + 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;
}

blackeagle998

Hier stand was.

dslraser

@blackeagle998
Danke Dir. Ich muß jetzt erstmal los. Probiere ich dann später und gebe Dir Rückmeldung.

dslraser

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

Anschließend solltest du per Klick auf das Wetter-Icon oben rechts die Anzeige steuern können.
Probier mal bitte ob es geht.

Funktioniert prima. Danke Dir.

blackeagle998

Hier stand was.

Kueppert

@blackeagle998 ich denke, das kannst du auf jeden Fall hier reinstellen. Ggf kann man das mit irgendwo beim Adapter packen als Idee zu einer Ideensammlung?
Ich hab noch den Vacuum v1, da gibts keine Räume, aber die restlichen Funktionen sollten funktionieren.

blackeagle998

@Kueppert
Hab's oben ergänzt
Hmm kann sein, dass es momentan nur geht, wenn auch Räume gefunden werden.
Wusste nicht, dass es auch ohne Raumdefinitionen geht.

Probier es mal, wenn nicht, muss ich da nochmal ran...

Kueppert

@blackeagle998 wofür ist das css- und js-file? ^^ Ansonsten hört sich das total easy an. Probiere ich später direkt mal aus ^^
NACHTRAG: steht in Punkt 1 ^^

dslraser

@Kueppert sagte in Test Adapter iQontrol 1.2.x:

Ich hab noch den Vacuum v1, da gibts keine Räume, aber die restlichen Funktionen sollten funktionieren.

Ich habe auch noch den V1, mal schauen was da geht...

muuulle

@s-bormann
Magst du einmal einen kurzen Ausblick geben, was deine nächsten Schwerpunkte beim Adapter sind?

Ich denke, dass ich nicht der einzige Neugierige bin

s.bormann

@dslraser sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Ich habe bisher eine kleine Kachel als Wert benutzt um mir html Listen anzuzeigen.
Eine aktive Kachel ist hell mit entsprechendem Symbol und eine inaktive mit anderem Symbol.

aktiv

inaktiv

Liste als PopUp

Jetzt möchte ich das Ganze als Widget nutzen, das funktioniert auch soweit, bis auf eine Kleinigkeit. Ich bekomme den Überzug der Kachel nicht weg

links als Wert /rechts als Widget

Das Widget an sich gefällt mir besser, da mehr Bildschirmfläche auf dem Handy benutzt wird

Wie bekomme ich den Überzug bzw. "Schleier" von dem 0,5x0,5 Icon weg ?

Hi,
die neue Github-Version hat das jetzt als Option
VG

s.bormann

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Hi, siehst du irgendeine Möglichkeit die .js und .css Dateien im Ordner /userwidgets direkt über die iQontrol Config Seite bearbeiten zu können?

Dieses ständige hochladen bei Änderungen nervt etwas

Wir denken wohl oft an das Gleiche. Schau mal in der aktuellen github-Version

s.bormann

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@dslraser @s-bormann
Hmm stimmt, jetzt lässt sich der virtuelle State einer Widget Kachel nicht mehr schalten, wenn das Icon blank ist.
Kann man die Option pro Kachel steuerbar machen?

Hi,
ist jetzt als Option in der aktuellen Github-Version verfügbar (Mauszeiger-Events für Icon).
VG

s.bormann

@dslraser sagte in Test Adapter iQontrol 1.2.x:

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

Sag mal, kann man mit den neuen ADDITIONAL_CONTROLS nicht so was basteln? Eine value-List, in der man den Sender auswählt, und darunter ein oder mehrere Strings mit den EPG-Infos. Dahinter steckt dann ein Blockly-Script, dass dann die String-Datenpunkte entsprechend der Auswahl der value-List befüllt.

meinst Du so in etwa ?

Ja, das sieht doch ganz gut aus, oder?

EDIT: übrigens sind beim Start trotz anderer Einstellung alle Sektionen geöffnet

Bei mir funktioniert das genau, wie es soll.

Für die REMOTE-Sektionen wurde jetzt eine eigene Option eingebaut (aktuelle Github-Version).
VG!

s.bormann

@muuulle sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Magst du einmal einen kurzen Ausblick geben, was deine nächsten Schwerpunkte beim Adapter sind?

Ich denke, dass ich nicht der einzige Neugierige bin

Hmm, das ganze geschieht mehr so spontan und ohne so ganz ausgeklügelten Plan

Manchmal fasziniert mich einfach ein Gedanke oder eine Idee (die kommen ja auch oft hier aus dem Forum).

Ein paar andere Dinge stehen zwar noch auf einer ToDo-Liste, allerdings weiß ich noch nicht, ob und wann ich das umsetzen will und kann.

Was ich gerne noch machen würde (aber das geht vermutlich nur, wenn ich Urlaub und mehr zusammenhängende Zeit habe), ist eine Möglichkeit, automatisch Räume und Geräte einfügen zu lassen (entsprechend der Raum-Liste von ioBroker). Aktuell ist mir das aber ein zu großes Projekt.

Zunächst denke ich deshalb eher, dass ich etwas Zeit in die feste Implementation von Widgets stecken werde. Hier sind ja schon einige ziemlich gute Entwürfe entstanden, die ich gerne (natürlich mit Zustimmung der Entwickler) fest in iQontrol integrieren würde. Hier denke ich gerade darüber nach, wie man das dann mit den dazu benötigten Datenpunkten lösen kann.

Ich hoffe, das hilft erst mal

VG!

dslraser

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

Hi,
die neue Github-Version hat das jetzt als Option
VG

Danke Dir, aber welche Option ist das ?

s.bormann

@dslraser
Gibts für aktiv/inaktiv/vergrößert

dslraser

@s-bormann
Danke, funktioniert wie gewünscht.

dslraser

@s-bormann
hattest Du das gelesen ? (dazu hast Du Dich bisher noch nicht geäußert)

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

NEWS

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

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

Support us

535

32.4k

81.3k

1.3m