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

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

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.

NEWS

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

Support us

632
Online

31.6k
Users

79.5k
Topics

1.3m
Posts

NEWS

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

Support us

632Online

31.6kUsers

79.5kTopics

1.3mPosts

632
Online

31.6k
Users

79.5k
Topics

1.3m
Posts