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

Opa75+

@blackeagle998 Liege ich richtig, die beiden scripts gehören im Widget eingefügt! Wenn ja, bei welchen Punkten. Könntest Du mir das mitteilen?

Nordischerjung

@da_Woody Moin,
bei Info_A und B hab ich nichts.

da_Woody

@nordischerjung ja, aber die temperatur wird an der position angezeigt und da glaube ich, das die schriftröße von info genommen wird.
hast du schon probiert das nicht als temperatur, sondern als state einzutragen? dann müsste das unten und somit größer angezeigt werden.
hab jetzt keine zeit zum testen, sollte aber funktionieren...

blackeagle998

@opa75
Die Datei clock.js mit einem Texteditor öffnen, alles markieren und den Inhalt kopieren. Anschließend im ioBroker der Datenpunkt bearbeiten clock_html_js bearbeiten und den kopierten Inhalt einfügen. Gleiches gilt für die css Datei.
Zum Bearbeiten eines Datenpunktes in das Feld "Wert" klicken.

Opa75+

@blackeagle998 Danke für die Anleitung. Bis hier war ich schon einmal. Ich weiß nicht wo einfügen! Zwischen den geschwungenen Klammen bei native? => Ergibt Fehler; Umrandung rot. Bin leider mit Html und Javascript vollkommener Neuling. VIS läuft bei mir, aber Iqontrol finde ich so toll, dass ich gerne damit arbeiten möchte. Mit den Räumen und Geräten geht es ja halbwegs, nur bei nicht vordefinierten Widgets stehe ich an.

blackeagle998

@opa75
Hast Recht, auf dem Stift editiert man die Einstellungen des Datenpunktes, aber nicht den Wert.
Dafür musst du in der Spalte "Wert" in das Feld klicken, hier im Beispiel auf "Samstag" klicken:

Danach solltest du folgendes Fenster sehen, wo du den kopierten Inhalt der clock.js hinein kopierst und auf "Wert setzen" klickst.

Opa75+

@blackeagle998 Herzlichen Dank, bin wieder einen Schritt weiter.

muuulle

@s-bormann
~~Meine mit dem Timepicker geänderten Datenpunkte hängen um eine Stunde. Zeitzone des Pi ist richtig. Hat das mit der Zeitumstellung zu tun?!~~

Lag an einer Berechnung, die mit dem Datenpunkt durchgeführt wurde. Ich hab’s mit einem kleinen Blockly umgangen!

Opa75+

@blackeagle998 Ich war anders beschäftigt und komme erst jetzt dazu die Script-Werte zu setzen. Ich bekomme da keinen Wert gesetzt. Es stehen die beiden scripts im Wert.

Anbei die beiden Skripte.

clock.js

function setState(stateId, value){
    sendPostMessage("setState", stateId, value);
}

function sendPostMessage(command, stateId, value){
    message = { command: command, stateId: stateId, value: value};
    window.parent.postMessage(message, "*");
}

und clock.css

body {
	background-color: #005c78;
	font-family:Verdana;
	color: Silver;
}

span {
    /* Rahmen: abgerundete Ecken (5px), Strichstaerke (0px = aus) und Farbe */
    /* border-radius:5px;border-collapse:separate;border:1px solid gainsboro;border-color:White; */
    /* margin-left:28vw; */
    /* Textausrichtung */
    text-align:left;
    /* Schriftfarbe */
    /* Wer keine Hintergrundfarbe fuer die Boxen will, kommentiert die nachfolgende Zeile aus oder loescht sie. */
    /* background-color:#47575c; */
}

td {
    padding-left:2vw;
	border-width:1px;
    border-style:solid;
    border-color:black;
}

input {
    height:10vw;
    width:10vw;
}

img {
    height:5vw;
    width:5vw;
}

.box_column {
    display:flex;
    /* Elemente werden untereinander dargestellt */
    flex-direction: column;
    justify-content: flex-start;
    /* Rahmen: abgerundete Ecken (5px), StrichstÃƒÂ¤rke (0px = aus) und Farbe */
    /* border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow; */
}

.box_row {
    display: flex;
    /* Elemente werden untereinander dargestellt */
    flex-direction: row;
    justify-content: space-between;
    /* Rahmen: abgerundete Ecken (5px), Strichstaerke (0px = aus) und Farbe */
    /* border-radius:5px;border-collapse:separate;border:2px solid gainsboro;border-color:yellow; */
}
   
/* Hier habt ihr die Moeglichkeit, CSS Eigenschaften fuer jede Box einzeln einzutragen. */
/* Bspw. koennt ihr hier eine separate Hintergrundfarbe einstellen. */
/* Ausserdem steuert ihr hier die Schriftgroessen der einzelnen Boxen */
.box_uhr {
	font-size:14vw;
}

.box_datum {
	font-size:4vw;
}

.box_wetter_temperatur {
		font-size:4vw;
		min-width:15vw;
		text-align:center;
}

.box_wetter_text {
		font-size:3vw;
		max-width:40vw;
		text-align:center;
}
 
.img_wetter {
    height:15vw;
    width:15vw;
}

.img_waste {
    height:15vh;
    width:20vw;
}
 
.table_Wettervorschau {
    margin-top:3vw;
    border-collapse: collapse;
    font-size:3vw;
}

Sorry, aber wie gesagt ich habe keine Ahnung von Programmierung.

Cino

Kann ich mir im Widget statt der Ziffer direkt das Heizprofil anzeigen lassen? Der Datenpunkt den ich anzeigen lassen will gibt nur Ziffern her.

da_Woody

@cino ich denk mal, wenn du namen statt 1 2 3 vergibst, dann sollte das klappern...

bei meinem roborock...
also statt 1 frühschicht, statt 2 mittagsschicht, ...

Cino

Ja du hast ja unterschiedliche Datenpunkte? Ich beschreibe ja den DP mit dem 1 2 3.
Da gibt es doch eine Einstellung, Name als DP Wert nehmen oder so. Deswegen die Ziffern.

sandro_gera

Hallo an alle,

Ich hab hier 2 ausgediente Tablets. und dachte mir ich könnte die zur Visualisierung nutzen. Ich würde gern den iQontrol Homescreen als Bilderrahmen nutzen der Fotos von meinem NAS zeigt und dort sollte auch eine Uhr mit der Wettervorhersage für den laufenden Tag erscheinen. Die anderen Screens möchte ich nach wie vor mir den einzelenen Kategorien wie Räume, Licht usw lassen. Dann hab ich mir vor 2 Monaten ein Synologiy NAS gegönnt. Eine DS220+ mit 10GB RAM darauf habe ich die Survailance Softare installiert und meine beiden Kameras eingebunden. Diese woltle ich auf einem Kamerareiter mir anzeigen lassen. Ich hoffe ihr könnte mir bezüglich der Bilderrahmen Funktion und Darstellung der Kameras weiterhelfen.

dslraser

@Geesthachter

das versuche ich tatsächlich schon seit zwei Tagen aber ich bekomme es nicht gebacken:
Der Beitrag ist im Entwicklungs-Thread und ist wahrscheinlich für Entwickler leicht zu lesen aber mir als Anwender fehlen da wohl doch ein paar Schritte um es zu verstehen. Ich werde es weiter selber versuchen würde mich aber freuen wenn sich jemand findet der mir auf die Sprünge hilft.
Björn

Vielleicht nochmal an dieser Stelle...
Bei mir läuft aktuell dieses Script (nicht von mir)


const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7';
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: 'html', 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:0px;';
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 '0_userdata.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('0_userdata.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.toFixed(1)) + '°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;
}

Wenn Du dieses Script bei Dir als Javascript einfügst (einfügen in ein neues leeres Script) und einmal startest, dann werden drei Datenpunkte erstellt, wenn es die noch nicht gibt. Bei mir sind das

const DP_Uhr_digital 				= '0_userdata.0.Uhr.Digital_Uhr_HTML_Uhrzeit_und_Datum_V7';
const DP_Wetter_Vorschau 			= '0_userdata.0.Uhr.Wetter_Vorschau';
const DP_Wetter_Vorschau_Trigger	= '0_userdata.0.Uhr.Wetter_Vorschau_Trigger';

Das sieht dann so aus bei mir:

Bildschirmfoto 2022-04-06 um 11.24.15.png

Im Script, bei mir Zeile 52 ist der Pfad angegeben, wo sich bei mir die Wetter Symbole/Icon befinden.

let image_Wetter_Pfad   = './../iqontrol.meta/userimages/usericons/wetter/';

Alles weitere ist in den Kommentaren im Script beschrieben (z.B. Astro---Tag/Nacht)

const sec = false; // Sekunden darstellen oder nicht
const fC = false; // forceCreation ein/aus
const pfad = "0_userdata." + 0  + ".Astro."; // Pfad zum Objekt - Objektbaum-Hauptverzeichnis

// *****************************************************************************
// TAGESZEITEN - T E I L 

// Tageszeiten nach eigenem Gusto
const tageszeiten = [{name: "Nacht", astro: "nauticalDusk", shift: 45},
   	     {name: "Morgendämmerung", astro: "nauticalDawn", shift: -45},
   	     {name: "Sonnenaufgang", astro: "sunrise", shift: 0},
   	     {name: "Morgen", astro: "sunriseEnd", shift: 0},
   	     {name: "Vormittag", astro: "goldenHourEnd", shift: 60},
   	     {name: "Mittag", astro: "solarNoon", shift: -30},
   	     {name: "Nachmittag", astro: "solarNoon", shift: 30},
   	     {name: "Abend", astro: "goldenHour", shift: -60},
   	     {name: "Sonnenuntergang", astro: "sunsetStart", shift: 0},
   	     {name: "Abenddämmerung", astro: "sunset", shift:0}
                   ];

const idTageszeit = pfad + "Tageszeit.current" /*Tageszeit*/,
     idTageszeitNext = pfad + "Tageszeit.next",
     idAstrotag =  pfad + "Tageszeit.Astrotag";

     
createState(idTageszeit, "nächste Minute abwarten", {
   name: "Tageszeit",
   desc: "Name der Tageszeit",
   type: "string"
});   
createState(idTageszeitNext, "nächste Minute abwarten", {
   name: "nächste Tageszeit",
   desc: "Name der nächsten Tageszeit",
   type: "string"
});
createState(idAstrotag, isAstroDay(), {
   type: "boolean",
   name: "Astrologischer Tag",
   desc: "Liegt die aktuelle Zeit zwischen Sonnenauf- und untergang"
}); 


schedule('* * * * *', function() { // jede Minute
   for(let i = 0; i < tageszeiten.length; i++) {
   	var act = tageszeiten[i];
   	var next = tageszeiten[0];
   	if(i + 1 < tageszeiten.length) next = tageszeiten[i + 1];
       var actTime = getAstroDate(act.astro).getTime() + 60000 * act.shift;
       var nextTime = getAstroDate(next.astro).getTime() + 60000 * next.shift;
       if(actTime > nextTime) {
           if(new Date().getHours() > 12) nextTime = nextTime + 24 * 3600000;
           else actTime = actTime - 24 * 3600000;
       }    
   	var now = Date.now();
   	if(now > actTime && now < nextTime) {
			setState(idTageszeit, act.name, true);
   		setState(idTageszeitNext, next.name, true);
   	}
   }
   setState(idAstrotag, isAstroDay(), true);
});


// *****************************************************************************
// A S T R O - T E I L 

// Objekt für Uhrzeiten der Astrozeiten
const astrotime = {
   "elements" : [
       // Astrotag beginnt
       {
           "fname" : "nadir",
           "de" : {
               "name" : "Nadir",
               "nxt" : "nächster",
               "desc" : "Fußpunkt gegenüber dem Zenit"
           },
           "en" : {
               "name" : "Nadir",
               "desc" : "darkest moment of the night, sun is in the lowest position"
           },
           "astroday" : false //during astronight
       },
       {
           "fname" : "nauticalDawn",
           "de" : {
               "name" : "nautische Morgendämmerung",
               "nxt" : "nächste",
               "desc" : ""
           },
           "en" : {
               "name" : "Nautical dawn",
               "desc" : "morning nautical twilight starts"
           },
           "astroday" : false //during astronight
       },
       {
           "fname" : "dawn",
           "de" : {
               "name" : "bürgerliche Morgendämmerung",
               "nxt" : "nächste",
               "desc" : ""
           },
           "en" : {
               "name" : "dawn",
               "desc" : "morning nautical twilight ends, morning civil twilight starts"
           },
           "astroday" : false //during astronight
       },
       {
           "fname" : "sunrise", // function name
           "de" : {
               "name" : "Sonnenaufgang",
               "nxt" : "nächster",
               "desc" : ""
           },
           "en" : {
               "name" : "Sunrise",
               "desc" : "top edge of the sun appears on the horizon"
           },
           "astroday" : true //during astroday
       },
       {
           "fname" : "sunriseEnd", // function name
           "de" : {
               "name" : "Ende Sonnenaufgang",
               "nxt" : "nächstes",
               "desc" : ""
           },
           "en" : {
               "name" : "End of sunrise",
               "desc" : "bottom edge of the sun touches the horizon"
           },
           "astroday" : true //during astroday
       },
       {
           "fname" : "goldenHourEnd", // function name
           "de" : {
               "name" : "Ende der goldenen Stunde am Morgen",
               "nxt" : "nächstes",
               "desc" : ""
           },
           "en" : {
               "name" : "End of golden hour",
               "desc" : "morning golden hour (soft light, best time for photography) ends"
           },
           "astroday" : true //during astroday
       },
       {
           "fname" : "solarNoon", // function name
           "de" : {
               "name" : "Sonnenhöchststand",
               "nxt" : "nächster",
               "desc" : ""
           },
           "en" : {
               "name" : "Solar noon",
               "desc" : "sun is in the highest position"
           },
           "astroday" : true //during astroday
       },
       {
           "fname" : "goldenHour", // function name
           "de" : {
               "name" : "Goldene Stunde (am Abend)",
               "nxt" : "nächste",
               "desc" : ""
           },
           "en" : {
               "name" : "Golden hour",
               "desc" : "evening golden hour starts"
           },
           "astroday" : true //during astroday
       },
       {
           "fname" : "sunsetStart", // function name
           "de" : {
               "name" : "Beginn Sonnenuntergang",
               "nxt" : "nächster",
               "desc" : ""
           },
           "en" : {
               "name" : "Sunset starts",
               "desc" : "bottom edge of the sun touches the horizon"
           },
           "astroday" : true //during astroday
       },
       // Astronacht beginnt
       {
           "fname" : "sunset", // function name
           "de" : {
               "name" : "Sonnenuntergang",
               "nxt" : "nächster",
               "desc" : ""
           },
           "en" : {
               "name" : "Sunset",
               "desc" : "sun disappears below the horizon, evening civil twilight starts"
           },
           "astroday" : false //during astronight
       },
       {
           "fname" : "dusk",
           "de" : {
               "name" : "Ende bürgerliche Abenddämmerung",
               "nxt" : "nächstes",
               "desc" : ""
           },
           "en" : {
               "name" : "Dusk",
               "desc" : "evening nautical twilight starts"
           },
           "astroday" : false //during astronight
       },
       {
           "fname" : "nauticalDusk",
           "de" : {
               "name" : "Ende nautische Abenddämmerung",
               "nxt" : "nächstes",
               "desc" : ""
           },
           "en" : {
               "name" : "Nautical dusk",
               "desc" : "evening astronomical twilight starts"
           },
           "astroday" : false //during astronight
       }
   
   ]
};

for(let i = 0; i < astrotime.elements.length; i++) {
   // führende Nummer zur Sortierung in Admin/Objekte
   var nr = i;
   if(i < 10) nr = '0' + nr;
   // Erstelle Objekt, falls nicht bereits vorhanden
   var idAstroObject = pfad + "Zeiten." + nr + "-" + astrotime.elements[i].fname;
   createState(idAstroObject, " ", {
       name: astrotime.elements[i].de.nxt + " " + astrotime.elements[i].de.name,
       desc: astrotime.elements[i].en.desc,
       type: "string"
   });
}

function writeAstroTimes(i) {
   // führende Nummer zur Sortierung in Admin/Objekte
   var nr = i;
   if(i < 10) nr = '0' + nr;
   var idAstroObject = pfad + "Zeiten." + nr + "-" + astrotime.elements[i].fname;
   var today = new Date();
   var tomorrow = today.setDate(today.getDate()+1);
   var fname = astrotime.elements[i].fname;
   var next_event = today.getTime();
   if (getAstroDate(fname) < today) next_event = tomorrow;
   var temp = getAstroDate(fname, next_event);
   let astro = formatDate(temp, 'hh:mm');
   if(sec) astro = formatDate(temp, 'hh:mm:ss');
   setState(idAstroObject, astro, true);
}

function iterateAstrotimes() {
   // Zeiten für jede Astrozeit schreiben
   for (var i = 0; i < astrotime.elements.length; i++) {
       writeAstroTimes(i);
   }
}

schedule("59 1 * * *", iterateAstrotimes);

setTimeout(function() { // Skriptstart
   iterateAstrotimes();
   setState(idAstrotag, isAstroDay(), true);
}, 200);

Hier noch meine verwendeten Wettersymbole und Mondsymbole

userfiles_usericons_wetter.zip

userfiles_usericons_wetter_mond.zip

Und hier noch ein Export des Gerätes von/in iQontrol zum wieder importieren

2022-04-06_iqontrol_0_devices.json.zip

Das sieht dann bei mir so aus (am Handy)

Bei Klick auf das Wetter Icon oben rechts sieht es dann so aus (ein Tag mehr gibt es noch, den müsste ich scrollen)

EDIT: Voraussetzung ist der Adapter daswetter
https://github.com/rg-engineering/ioBroker.daswetter/blob/master/README.md
Bildschirmfoto 2022-04-06 um 12.08.39.png

würde mich aber freuen wenn sich jemand findet der mir auf die Sprünge hilft.

Wobei brauchst Du denn Hilfe...?

Edit: eine kleine Ergänzung:

In Zeile 172 im Uhren Script habe ich einen Sensor für die Aussentemperatur eingetragen. Wenn Du keinen hast, dann einen anderen Datenpunkt, z.B. von daswetter, z.B. den hier (daswetter.0.NextHours.Location_1.Day_1.current.temp_value). Im daswetter Adapter habe ich alle Pfade von 1-4 eingetragen. Mehr ist eigentlich nicht zu machen.

Edit: Nachtrag wo sich bei mir wetter und mond icon in iQontrol befinden:

wetter habe ich in /usericons/wetter
mond habe ich in /usericons/wetter/mond

In Zeile 162 im Uhrenscript ist die Pfadangabe für mond drinn

Geesthachter

@dslraser Vielen Dank für deine Antwort.
Sorry das ich jetzt erst schreibe ich habe es heute erst gesehen das du mir diese Hilfe geschickt hast.
Ich habe es leider bisher noch nicht zum Laufen gebracht, irgendwas fehlt mir anscheinend noch. Wie du siehst erscheint nur die Überschrift "Digitaluhr" aber nicht die Digitaluhr selber.
screenshot.iqontrol.png

Wenn ich dann dort anklicke erscheint

und wenn ich dann auf öffnen gehe kommt das.

Ich habe folgendes gemacht.
Ich habe für das „Digital Uhr Script“ und das „Astro Script“ je ein Javascript erstellt.
Dabei wurden die drei von dir erwähntem Datenpunkte wie bei dir erstellt.

screenshot.Angelegte Datenpunkte.png

Die Wetter Icons habe ich in dem gleich Pfad wie du gespeichert.

screenshot.Wetter icons .png

Dann habe ich das Widget „2022-04-06_iqontrol_0_devices.json“ als Gerät importiert.

screenshot.Datenpunkte des Widgets.png

Und ich habe „derWetter“ Adapter installiert mich dort angemeldet und einen generierten Pfad bei
„Pfad 1: XML-Datei mit 7-Tage-Wettervorhersage und Tagesübersicht“ eingetragen. screenshot.dasWette.0 Adapter.png

Was habe ich falsch gemacht oder was fehlt mir noch?
Kannst du mir bitte weiterhelfen.

Gruß Björn

s.bormann

@nordischerjung sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

@s-bormann Moin, ich habe mir ein WLAN Grillthermometer gebaut und visualisiere diesen mit iQontrol.

Leider sind die Werte sehr klein, egal ob 2x1 oder 1x1 oder groß beim klicken. Kann man die Werte größer erstellen?

Hi,
wenn Du die Werte bei STATE verlinkst, erscheinen sie unten in groß.
EDIT: Sorry, war eine Zeit nicht da (Fortbildung und Urlaub). Habe gerade gesehen, @da_Woody hatte das schon beantwortet. VG

s.bormann

@cino sagte in Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread):

Ja du hast ja unterschiedliche Datenpunkte? Ich beschreibe ja den DP mit dem 1 2 3.
Da gibt es doch eine Einstellung, Name als DP Wert nehmen oder so. Deswegen die Ziffern.

Du kannst einfach die Überschriften weglassen:

Soukai

@dslraser Bin neu in iQontrol, würde gerne dein Widget nutzen, da es sehr gelungen ist wie geh ich das an? Ich habe es probiert als eigenes widget zu erstellen und den code als JS eingetragen, jedoch kann ich es nicht in "BACKGROUND_xx" sehen. Vielen Dank!

im Javascript adapter krieg ich einen fehler

Adapter das wetter ist installiert

dslraser

@soukai
ich weiß nicht wie ich da helfen könnte. Ich habe eigentlich alles dazu geschrieben (inkl. Nachträge)

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

Soukai

@dslraser Du hast recht, sorry. War wohl zu voreilig. Habe alles soweit hinbekommen. Danke für dein Widget! und es funktioniert

NEWS

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

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

Support us

45

32.4k

81.3k

1.3m