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

da_Woody

@s-bormann tankö! werd mal mit gimp drüberfummeln... wenn ich was gutes zusammen bekomme, stell ichs zu verfügung...

muuulle

@s-bormann
Super, funktioniert.

~~Ist das nur bei mir so, dass mein Background html nun im Vordergrund ist? 🥴~~ (Fehler gefunden)

Ich kann seeehr weit nach unten scrollen:
Bildschirmfoto 2020-11-02 um 21.14.28.png

dslraser

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

Versuch mal die aktuelle Github-Version

Jetzt sind die kleinen Icon schön dicht untereinander.
Ich habe in meiner Ansicht bei Listen inaktive Kacheln versteckt. Es passen sechs Kacheln in eine Reihe, danach habe ich NZ (neue Zeile) gemacht. Ist das so gewollt, das dann der "leere Platz" reserviert ist, oder könnte auch das Icon aus der neuen Zeile da hin rutschen ?

blackeagle998

Hi, in der aktuellen Version besteht das Problem aus folgendem Post wieder (DIALOG wird nicht zentriert angezeigt):
Du hattest das ja damals schon gefixt, kannst du das bitte nochmal prüfen?

Danke!

s.bormann

@zahnheinrich sagte in Test Adapter iQontrol 1.4.x:

@s-bormann
Danke, hatte ich probiert.
Ging nicht.
Geht das bei dir?

Habs gerade noch mal probiert, bei mir klappt es.

Hier mein Test-Datenpunkt:

{
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1602936231881,
  "common": {
    "name": "Test.Testbool",
    "role": "button",
    "type": "boolean",
    "desc": "Manuell erzeugt",
    "def": "",
    "read": true,
    "write": true
  },
  "native": {},
  "acl": {
    "object": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator",
    "state": 1636
  },
  "_id": "javascript.0.Test.Testbool",
  "type": "state"
}

Was genau klappt den nicht? Gibt es eine Meldung in der Konsole?

s.bormann

@dslraser sagte in Test Adapter iQontrol 1.4.x:

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

Versuch mal die aktuelle Github-Version

Jetzt sind die kleinen Icon schön dicht untereinander.
Ich habe in meiner Ansicht bei Listen inaktive Kacheln versteckt. Es passen sechs Kacheln in eine Reihe, danach habe ich NZ (neue Zeile) gemacht. Ist das so gewollt, das dann der "leere Platz" reserviert ist, oder könnte auch das Icon aus der neuen Zeile da hin rutschen ?

Hi,
nein, die neue Zeile generiert quasi einen neuen Container, in dem die Kacheln angeordnet werden. Deshalb geht das nicht.
Aber warum machst Du eigentlich "per Hand" eine neue Zeile? Wenn nach 6 voll ist, macht er doch automatisch eine neue Zeile auf. Dann ordnet er sich auch neu an, wenn eine Kachel ausgeblendet wird.
LG

PS: Echt geiles Layout - coole Umsetzung mit den kleinen Buttons mit und ohne Hintergrund bei aktiv/inaktiv!
Dürfte ich den Screenshot vielleicht auf der Github-Seite im Readme als Beispiel veröffentlichen (gerne mit (C) by dslraser)?

s.bormann

@blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

@s-bormann
Hi, in der aktuellen Version besteht das Problem aus folgendem Post wieder (DIALOG wird nicht zentriert angezeigt):

@blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

@s-bormann
Hey, openDialog einer Popup Kachel mit URL wird nicht vernünftig skaliert, das Popup rutscht immer aus dem Bild rechts raus:

Bei einem "normalen" Dialog klappt es:

Kannst du mal bitte schauen ob du da noch was drehen kannst?

Du hattest das ja damals schon gefixt, kannst du das bitte nochmal prüfen?

Danke!

Seltsam, habe ich eigentlich nichts mehr dran geändert. Vielleicht ist jetzt durch die vielen iFrames für die Widgets, die er laden muss, das Timing etwas verschoben. Versuch es bitte noch mal mit der aktuellen Github-Version, da habe ich das Timing noch mal angepasst.

LG

dslraser

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

Aber warum machst Du eigentlich "per Hand" eine neue Zeile? Wenn nach 6 voll ist, macht er doch automatisch eine neue Zeile auf. Dann ordnet er sich auch neu an, wenn eine Kachel ausgeblendet wird.
LG

Hi, neue Zeile mache ich, damit die Ansicht am Mac genau so aussieht.

PS: Echt geiles Layout - coole Umsetzung mit den kleinen Buttons mit und ohne Hintergrund bei aktiv/inaktiv!

Danke für die Blumen.

Dürfte ich den Screenshot vielleicht auf der Github-Seite im Readme als Beispiel veröffentlichen (gerne mit (C) by dslraser)?

Klar, kannst Du gern machen.

s.bormann

@sandro_gera sagte in Test Adapter iQontrol 1.4.x:

@s-bormann

Ja im IO broker ist sie unter meinen deConz devices drin.
hier der Screenshot vom Philips Dimmer

Hier der von Sonoff Touch 2CH

Bitte bescheid sagen alls du noch mehr brauchst

Hi,
ich denke, der "Philips Dimmschalter" ist nur eine Fernbedienung, oder? (Da steht sensor als Rolle). In iQontrol musst Du aber das Endgerät einbinden, das Du schalten möchtest (also die Lampe(n)). Willst Du mehrere Lampen auf einmal schalten, dann kannst Du Dir z.B. eine virtuelle Gruppe mit dem Szenes-Adapter erstellen und dann diese virutelle Gruppe in iQontrol einbinden und ansteuern.
VG!

blackeagle998

@s-bormann
Jepp, funktioniert wieder, danköööööööö!

blackeagle998

@dslraser
Echt ne schicke View!
Sollte dich der blaue Hintergrund der Uhr-Kachel stören, sag Bescheid, dann machen wir das transparent und die Schriftfarbe weiß. Würde bestimmt auch cool aussehen.

dslraser

@blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

@dslraser
Echt ne schicke View!
Sollte dich der blaue Hintergrund der Uhr-Kachel stören, sag Bescheid, dann machen wir das transparent und die Schriftfarbe weiß. Würde bestimmt auch cool aussehen.

Danke, in der View sind ja auch Deine Sachen dabei.
Deine Vorschläge würde ich gern probieren. (ich nutze die Version ohne Müll usw. Brauchst Du das Script in Kopie ?)

blackeagle998

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

da_Woody

@dslraser jau, sieht echt geil aus! in welcher px grösse hast du deine icons gespeichert?

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

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.

dslraser

@blackeagle998
so sieht es jetzt aus:

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

dslraser

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

dslraser

@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

NEWS

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

Support us

728
Online

30.4k
Users

76.6k
Topics

1.2m
Posts

NEWS

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

Support us

728Online

30.4kUsers

76.6kTopics

1.2mPosts

728
Online

30.4k
Users

76.6k
Topics

1.2m
Posts