[GELÖST] Javascript von einer ext. Seite Einbinden in ioBroker

tomdeboom

Hi,

ich habe folgende Seite im Internet gefunden:

http://www.starpage.de/content/themen/2 … erechnung/

Dort stellt der Betreiber dieser Seite ein Mondphasenscript zu verfügung.

Meine Version der HTML: MondV1.0.1.html

! <title>Anzeige der aktuellen Mondphase</title>
!

Meine Version des Javascripts: MondV1.js

! function phasenberechnung()
! {
! var jetzt, jahr, vm, diff, anz;
! var pfad = "./phasenbilder/";
! var syn = 29.530588;
! var text = "Falsche Systemzeit, Berechnung nicht aktiv!";
! var phase = 1;
! jetzt = new Date();
! jahr = jetzt.getYear();
! if(jahr < 1900) { jahr += 1900; }
! if(jahr >= 2010)
! {
! vm = new Date(2009, 11, 31, 20, 12, 36) / 86400000;
! jetzt = jetzt / 86400000;
! diff = jetzt - vm;
! anz = diff / syn;
! phase = Math.round(anz * 100) / 100;
! phase = Math.floor((phase - Math.floor(phase)) * 100);
! if(phase == 0)
! {
! phase = 100;
! text = "Vollmond";
! }
! else if(phase < 25 || (phase > 25 && phase < 50))
! { text = "Mond ab"; }
! else if(phase == 25) { text = "Halbmond ab"; }
! else if(phase == 50) { text = "Neumond"; }
! else if((phase > 50 && phase < 75) || (phase > 75 && phase < 100))
! { text = "Mond zu"; }
! else if(phase == 75) { text = "Halbmond zu"; }
! }
! document.getElementById("mondtext").innerHTML = text;
! window.document.images[0].src = pfad + phase + ".png";
! }

Nun habe ich die Vorlage der HTML Seite mit dem "basic iframe" widget verbunden.

! [{"tpl":"tplIFrame","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"","seamless":true,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"/vis.0/main/Icon/Wetter/Mond_V1.0.1.html","refreshOnWakeUp":true,"refreshOnViewChange":true,"scrollY":false,"scrollX":false,"refreshWithNoQuery":false,"noSandbox":false},"style":{"left":"530px","top":"340px","width":"120px","height":"120px","overflow-x":"","z-index":"10","background":"transparent","background-color":"transparent"},"widgetSet":"basic"}]

Die Mond_V1.0.1.html und die mondV1.js Datei, sowie die Bilder habe ich in meinem VIS Verzeichnis abgespeichert.

Das funktionierte auch bei dem ersten Bild gestern Abend, nun aber nicht mehr…

Muss ich da ein cron einbauen?

Nun meine Frage, gibt es die Möglichkeit das script ins Javascript von iobroker zu holen und von dort aus irgendwie die Bildsteuerung der 100 Bilder zu machen?

Danke und Gruß,

Tom

tomdeboom

Guten Morgen,

kann mir jemand sagen ob das oben gefragte funktioniert oder nicht?

Ich möchte ungern viel Zeit investieren um dann festzustellen das dies nicht geht, ich bin auch noch nicht so Fit was Javascript betrieft.

Ich Danke euch und ein schönen Gruß,

Tom

paul53

https://forum.iobroker.net/viewtopic.php?f=21&t=11987&p=126520#p127232 lässt sich sicherlich auf bis zu 100 Bildern erweitern.

tomdeboom

Danke Paul, aber dann müsste ich z.B. im Widget Image 8 alle 100 Bilder hinterlegen?

Und anstatt "states: {" müsste ich aus der neuen funktion "phase" benutzen?

Gruß,

Tom

paul53

~~@tomdeboom:~~

dann müsste ich z.B. im Widget Image 8 alle 100 Bilder hinterlegen? `
Von VIS habe ich keine Ahnung
~~@tomdeboom:~~

anstatt "states: {" müsste ich aus der neuen funktion "phase" benutzen? `
states (Zustandstexte) ist eine definierte Eigenschaft von Datenpunkten in ioBroker. Wenn mehr Bilder gewünscht werden, muss die Anzahl erweitert werden (pro Bild ein Integer-Wert 0…N).

tomdeboom

Ok, danke ich versuche mal mein Glück…

Ich Lasse aber die Frage nochmal offen.

Gruß,

Tom

arteck

du kannst doch dynamisch die das Widget füllen

tomdeboom

Hallo arteck,

und wie mache ich das?

Gruß,

Tom

paul53

~~@tomdeboom:~~

anstatt "states: {" müsste ich aus der neuen funktion "phase" benutzen? `
Die states kann man auch weglassen, was bei 100 Werten zu empfehlen ist. Die Integerwerte erzeugt man dann nicht mit if(…), sondern per Berechnung.

const suncalc = require('suncalc');
const idVis = 'Vis.Mondphase';  // Für Vis

createState(idVis, 0, {
   type: 'number',
   min: 1,
   max: 100,
   role: 'level',
});

function mpVis() {
   var mond = suncalc.getMoonIllumination(new Date());
   var mp = mond.phase;  // 0...1 mit 0 = Neumond
   mp = 100 * mp - 50;
   if(mp < 0.5) mp = mp + 100;  // Neumond = 50 
   mp = Math.round(mp); // Integer 1 ... 100, 100 = Vollmond
   setState(idVis, mp, true);
}

mpVis(); // Skriptstart

schedule("*/10 * * * *", mpVis);  // alle 10 Minuten

tomdeboom

Hallo Paul,

vielen Dank für das Script, es funktioniert so das ich die Bild Nummer in ein State geschrieben bekomme.

Nun versuche ich gerade das Script so zu ergänzen das ich den kompletten Bildpfad als State geschrieben bekomme.

Nur bekomme ich es nicht hin, habe jetzt schon verschiedene Ansätze versucht, aber irgendwie funktioniert es nicht…

Hier mein Versuch:

const suncalc = require('suncalc');
const idVis = 'Vis.Mondphase2';  // Für Vis

var pfad = "/vis.0/main/Icon/Wetter/phasenbilder/";

// createState('Vis.Image', 0, {type: 'string'});
createState('Vis.Image', pfad + mp + '.png', {type: 'string'}); // funktioniert nicht

createState(idVis, 0, {
   type: 'number',
   min: 1,
   max: 100,
   role: 'level',
});

function mpVis() {
   var mond = suncalc.getMoonIllumination(new Date());
   var mp = mond.phase;  // 0...1 mit 0 = Neumond
   mp = 100 * mp - 50;
   if(mp < 0.5) mp = mp + 100;  // Neumond = 50 
   mp = Math.round(mp); // Integer 1 ... 100, 100 = Vollmond
   setState(idVis, mp, true);
}

// setState('Vis.Image', pfad + mp + '.png'); // funktioniert nicht

mpVis(); // Skriptstart

schedule("*/1 * * * *", mpVis);  // alle 1 Minuten

Kannst du mir dabei helfen? Und kann ich dann später diesen State dazu nutzen um das Bild mit z.B. "basic - string img scr" mir anzeigen zu lassen?

Gruß,

Tom

paul53

Möchtest Du den Pfad zur png-Datei in den Datenpunkt schreiben ? Wenn ja, wozu ?

Oder möchtest Du den Inhalt der png-Datei in den Datenpunkt schreiben ? Das dürfte kaum gelingen.
~~@tomdeboom:~~

Und kann ich dann später diesen State dazu nutzen um das Bild mit z.B. "basic - string img scr" mir anzeigen zu lassen? `
Wie schon weiter oben erwähnt, habe ich von VIS keine Ahnung.

tomdeboom

sorry wg. der vis Anfrage…

Also ich hätte gerne einen Datenpunkt wo dann der komplette Pfad mit dem jeweiligen Bild steht.

so: /vis.0/main/Icon/Wetter/phasenbilder/32.png

Gruß,

Tom

paul53

~~@tomdeboom:~~

Datenpunkt wo dann der komplette Pfad mit dem jeweiligen Bild steht.

so: /vis.0/main/Icon/Wetter/phasenbilder/32.png `
Bei createState() kann die Variable mp nicht verwendet werden, da sie lokal (innerhalb einer Funktion) deklariert ist.

Das setState() muss innerhalb der Funktion aufgerufen werden.

const suncalc = require('suncalc');
const idVis = 'Vis.Mondphase2';  // Für Vis
const pfad = '/vis.0/main/Icon/Wetter/phasenbilder/';

createState('Vis.Image', pfad + '1.png', {type: 'string'});

createState(idVis, 0, {
   type: 'number',
   min: 1,
   max: 100,
   role: 'level',
});

function mpVis() {
   var mond = suncalc.getMoonIllumination(new Date());
   var mp = mond.phase;  // 0...1 mit 0 = Neumond
   mp = 100 * mp - 50;
   if(mp < 0.5) mp = mp + 100;  // Neumond = 50 
   mp = Math.round(mp); // Integer 1 ... 100, 100 = Vollmond
   setState(idVis, mp, true);
   setState('Vis.Image', pfad + mp + '.png', true);
}

mpVis(); // Skriptstart

schedule("*/1 * * * *", mpVis);  // alle 1 Minuten

tomdeboom

Guten Morgen,

vielen Dank für die schnelle Beantwortung! Ich finde es immer wieder Super das du es auch erklärst was man falsch gemacht hat.

Nur so kann ich es Lernen.

Schönen Tag und Gruß,

Tom

NEWS

[GELÖST] Javascript von einer ext. Seite Einbinden in ioBroker

[GELÖST] Javascript von einer ext. Seite Einbinden in ioBroker

Support us

106

32.4k

81.3k

1.3m