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

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

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;';

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.

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.

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 ?

blackeagle998

@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.

blackeagle998

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

dslraser

@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.

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.

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

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.

dslraser

@blackeagle998 sagte in Test Adapter iQontrol 1.4.x:

Schau mal durch, vielleicht findest du ja was.

edit einen über Dir

blackeagle998

@dslraser
Sehr edel, top!

dslraser

@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

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

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

@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.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

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

@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

dslraser

@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.

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?

NEWS

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

Support us

1.6k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts

NEWS

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

Support us

1.6kOnline

30.4kUsers

76.6kTopics

1.2mPosts

1.6k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts