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