Nach Variablen Wert bestimmte Grafik anzeigen

nobse

Hallo zuammen

meine Wetterstation liefert mir die Wetteraussichen als Wert zwischen 1 und 9

Jetzt möchte ich je nach Wert eine andere Grafik anzeigen.

Wie kann ich das machen.

Gruß Norbert

ruhr70

Hi Norbert,

Vorweg, meine Lösungsvorschläge sind eher pragmatisch statt elegant. Bin halt kein Programmierer.

Ich würde das so machen:

Das Widget basic - img 8 kann für die Werte 0 - 7 jeweils eine andere Grafik anzeigen.

Wenn Dir 8 Werte reichen, dann kannst Du mit Javascript die Werte 1-9 auf eine Javascriptvariable mit den Werten von 0-8 mappen und dann mit dem Widget die gewünschte Grafik anzeigen.

Wetterstation = 1 -> Variable = 0

Wetterstation = 2 -> Variable = 1

Wetterstation = 3 -> Variable = 1 //ein Wert muss doppelt vorkommen, um auf 8 zu kommen

Wetterstation = 4 -> Variable = 2

usw.

Wetterstation = 9 -> Variable = 7

Wenn Dir alle 9 Werte als unterschiedliche Grafik wichtig sind, dann würde ich einfach zwei basic - img 8 Widgets übereinanderlegen und über ein zweite Javascriptvariable die Sichtbarkeit steuern.

Ich mache das so, wenn ich mir in einem Bereich mehr als acht Rickshaw Charts anzeigen will (mit basic iFrame - 8)

In Javascript musst Du dann folgendes realisieren:

Variable für die Grafik ->

Wetterstation -1 = JavaScriptvariable

Javascriptvariable Widget = 0 // für das erste Widget

Wenn Wetterstation = 9 dann Javascriptvariable = 0 und Javascriptvariable Widget = 1 // für das zweite Widget

Viele Grüße,

Michael

Bluefox

~~@nobse:~~

Hallo zuammen

meine Wetterstation liefert mir die Wetteraussichen als Wert zwischen 1 und 9

Jetzt möchte ich je nach Wert eine andere Grafik anzeigen.

Wie kann ich das machen.

Gruß Norbert `
Wie ist dein Grafik aufgebaut? HTML Seite (wie Rickshaw) oder Bild (wie png/jpg)?

nobse

Hallo ruht70

mit dem Widget basic - img 8 habe ich auch schon getestet aber es wird kein Bild angezeigt.

@Bluefox

Es ist eine ganz normale Grafik .png

nobse

Ich würde das ja mal mit Jacascript versuchen.

Nur scheiter ich schon drann eine CCU2 Systemvariable auszulesen.

Und wie startet man das Javascript? Eigenlich soll es ja immer laufen und änderung des wertes was machen.

Sorry bin ebend anfänger.

ruhr70

~~@nobse:~~

mit dem Widget basic - img 8 habe ich auch schon getestet aber es wird kein Bild angezeigt. `

Ich habe das gerade einmal probiert. Nur eine Testgrafik für den Wert 0 angegeben.

Als ID die Lautstärke eines Sonos Lautsprecher. Wenn ich die Lautstärke auf 0 stelle, sehe ich die Grafik, wenn am Sonso die Lautstärke erhöhe, wird sie ausgeblendet.

Ds Widget arbeitet also.

Wie gibts Du im Feld URL die Grafik an?

Ich mache das über das Kästchen rechts daneben und darüber lade ich die Grafiken auch hoch.

Siehe dazu auch:

http://forum.iobroker.org/viewtopic.php … =533#p3633

bku

~~@nobse:~~

Nur scheiter ich schon drann eine CCU2 Systemvariable auszulesen.

Und wie startet man das Javascript? Eigenlich soll es ja immer laufen und änderung des wertes was machen. `
Schau doch mal im Unterforum zum Scripten - da findest Du schon Beispiele.

Gruß Bernd

ruhr70

~~@nobse:~~

Ich würde das ja mal mit Jacascript versuchen.

Nur scheiter ich schon drann eine CCU2 Systemvariable auszulesen.

Und wie startet man das Javascript? Eigenlich soll es ja immer laufen und änderung des wertes was machen.

Sorry bin ebend anfänger. `

Hi Norbert,

ein größerer Anfänger als ich kannst Du nicht sein. Ich kopiere hier auch wild Beispiele zusammen ohne sie richtig zu verstehen.

Ich schwöre aber, dass ich das zum Anlass nehme und Javascript lernen werde ;-)

Um mehr als 8 Werte darzustellen habe ich mir folgendes gebastelt (in meinem Fall wird nur nicht das Widget mit den Grafiken verwendet, sondern das iFrame 8, wobei das dem Script egal ist):

createState('ZeigeGraphNr', 0);   // 0-7 für das erste iFrame für Graphen
createState('ZeigeGraphNr1', 0);  // 0-7 für das zweite iFrame für Graphen

createState('ZeigeiFrame', 0);   // welcher iFrame soll gezeigt werden

// wenn ein Button mit der ID ZeigeGraphNr gedrückt wird:
// on("javascript.0.ZeigeGraphNr", function(obj) {
on({id: "javascript.0.ZeigeGraphNr", valNe: true}, function(obj) {
        ZeigeiFrame = 0;
        setState("javascript.0.ZeigeiFrame",0);
        log("Anderer Graph gewünscht: iFrame:" + ZeigeiFrame);
});

// wenn ein Button mit der ID ZeigeGraphNr1 gedrückt wird:
// on("javascript.0.ZeigeGraphNr1", function(obj) {
on({id: "javascript.0.ZeigeGraphNr1", valNe: true}, function(obj) {
        ZeigeiFrame = 1;
        setState("javascript.0.ZeigeiFrame",1);
        log("Anderer Graph gewünscht: iFrame:" + ZeigeiFrame);
});

So und nun mit den Worten eines Anfängers:

Ja, das Script ist "immer aktiv".

Der Bereich on("… wird abgeabreitet, wenn sich in der überwachten Objekt (?) etwas ändert.

In meinen Fall oben gibt es also zwei Objekte, die auf Änderungen, unabhängig voneinander, reagieren.

Mit createState wurden drei Javascriptvariablen definiert, die global gelten und die Du im Admin unter Objekte findest.

Was ist nun das Ereignis, auf dem reagiert wird?

In meinem Fall habe ich derzeit, mit dem Widget basic - html state zehn Buttons kreiert.

Die ersten 8 Buttons haben im Bereich Allgemein die Objekt ID: javascript.0.ZeigeGraphNr

Jeder der Buttons hat nun unter Wert im Bereich Allgemein eine andere Zahl stehen (0-7).

Mit Klick auf dem Button wird nun also die Javascriptvariable javascript.0.ZeigeGraphNr verändert.

Damit reagiert der Bereich on({id: "javascript.0.ZeigeGraphNr",… im Javascript und setzt nun die Javascriptvariable javascript.0.ZeigeiFrame auf 0.

Hast Du nun den Button gedrückt, bei dem der Wert 3 eingestellt ist, dann ist das Ergebnis:

javascript.0.ZeigeGraphNr = 3 // das war der Wert, der im Widget steht

javascript.0.ZeigeiFrame = 0 // der Wert wurde durch das Javascript gesetzt

Bei den beiden übereinanderliegenden Widgets ist im Bereich Sichtbarkeit einmal:

Object ID: javascript.0.ZeigeiFrame

Bedingung: ==

Wert für Bedingung: 0

eingestellt.

(und beim anderen Widget beim Wert: 1).

Je nach Wert der Variable javascript.0.ZeigeiFrame (0 oder 1) wird nun das eine oder das andere Widget angezeigt.

Welche URL (bei Dir Image) angezeigt wird, wird nun durch den Wert bestimmt, den der Button der anderen Variable zugewiesen hat.

Das Javascript macht also nicht wirklich viel.

Versuch doch erst einmal nur eine Variable zu definieren.

D.h. Dein JavaScript besteht nur aus der Zeile:

createState('ZeigeGraphNr', 0);

Diese Zeile erzeugt die Variable javascript.0.ZeigeGraphNr, die Du in den Objekten findest.

Diese Variable gibst Du nun in Deine Widgets an.

Damit kannst Du schon einmal 8 verschiedene Buttons bedienen (0-7).

nobse

Danke für deine Hilfe.

ich stelle mir das eventuell so vor

Variable definieren (wetteraussichten)

CCU Variable auslesen

mit if Abfragen der Variable wetteraussichten einen String zuweisen (/vis.0/main/img/wetter1.png)

so steht in der Variable die aktuelle Grafik

jetzt nur noch mit einem Widget die Grafik die in der Variable steht anzeigen

und hier komme ich nicht weiter.

Bluefox

~~@nobse:~~

Danke für deine Hilfe.

ich stelle mir das eventuell so vor

Variable definieren (wetteraussichten)

CCU Variable auslesen

mit if Abfragen der Variable wetteraussichten einen String zuweisen (/vis.0/main/img/wetter1.png)

so steht in der Variable die aktuelle Grafik

jetzt nur noch mit einem Widget die Grafik die in der Variable steht anzeigen

und hier komme ich nicht weiter. `
Schon probiert ? "basic - string img src"

nobse

Oh bin ich blind

genau das habe ich gesucht.

Dann werde ich mir morgen mal das script zusammen bauen.

vielen Dank für eure Anregungen und Hilfe.

nobse

So für alle die es intressiert hier das ganz einfach Script.

Javascript Variable wird erstellt
eine Systemvariable der CCU2 wird ausgelesen
je nach Wert wird der Javascript Variable eine andere Grafik zugeordnet

angezeigt wird die Javascript Variable mit dem Widget Basic String img src

createState('Wetteraussichten', '');

on("hm-rega.0.2775", function(obj) {
    var ccu_wetteraussichten = obj.newState.val
    switch (ccu_wetteraussichten){
        case 1:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10221.png');
            break;
        case 2:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10223.png');
            break;
        case 3:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10230.png');
            break;
        case 4:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10225.png');
            break;
        case 5:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10222.png');
            break;
        case 6:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10226.png');
            break;
        case 7:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10227.png');
            break;
        case 8:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10228.png');
            break;
        case 9:
            setState('Wetteraussichten', '/vis.0/main/img/wetter/VISUQC10229.png');
            break;
        default:  log("Wetteraussichten kein Wert","info");
    }
});

ruhr70

Hui,

danke für die Rückmeldung. Das sieht wesentlich eleganter aus, als mein Vorschlag.

Viele Grüße,

Michael

Bluefox

~~@nobse:~~

So für alle die es intressiert hier das ganz einfach Script.

Javascript Variable wird erstellt

eine Systemvariable der CCU2 wird ausgelesen

je nach Wert wird der Javascript Variable eine andere Grafik zugeordnet

angezeigt wird die Javascript Variable mit dem Widget Basic String img src `
:) Optimierungsvorschlag:

var images = ["", "VISUQC10221", "VISUQC10223", "VISUQC10230", "VISUQC10225", "VISUQC10222", "VISUQC10226", "VISUQC10227", "VISUQC10228", "VISUQC10229"];

createState('Wetteraussichten', '');

on("hm-rega.0.2775", function(obj) {
    var ccu_wetteraussichten = parseInt(obj.newState.val, 10);

	if (images[ccu_wetteraussichten]) {
		setState('Wetteraussichten', '/vis.0/main/img/wetter/' + images[ccu_wetteraussichten] + '.png');
	} else {
		log("Wetteraussichten kein Wert: " + ccu_wetteraussichten);
	}
});

ruhr70

Danke für die Beispiele und die Optimierungen!

Das ist sehr hilfreich um was zu lernen.

webseb79

Guten Abend,

versuche mich heute zum ersten mal in Javascript und ich bin ein absoluter Anfänger.

Ich wollte mir das Script von Bluefox anpassen aber ich habe kein Erfolg das ich ein Ergebnis geliefert bekomme.

createState('Wetteraussichten', '');

var images = ["Heiter", "Dunst", "Nebel", "Regenschauer", "Nieselregen", "Regen", "Bedeckt", "Wolkig"];

on("hm-rega.0.7103", function(obj) {
    var Wetterbedingungen = parseInt(obj.newState.val, 8);

   if (images[Wetterbedingungen]) {
      setState('Wetteraussichten', '/HM Wetter/' + images[Wetterbedingungen] + '.png');
   } else {
      log("Wetteraussichten kein Wert: " + Wetterbedingungen);
   }
});

Vielleicht kann ja jemand dazu was sagen was ich falsch mache.

Und vielleicht hat jemand ein Tipp für ein gutes Buch über Javacript…Weihnachten steht ja vor der Tür.

Danke im voraus

Sebastian

Bluefox

~~@webseb79:~~

Guten Abend,

versuche mich heute zum ersten mal in Javascript und ich bin ein absoluter Anfänger.

Ich wollte mir das Script von Bluefox anpassen aber ich habe kein Erfolg das ich ein Ergebnis geliefert bekomme.
createState('Wetteraussichten', '');

var images = ["Heiter", "Dunst", "Nebel", "Regenschauer", "Nieselregen", "Regen", "Bedeckt", "Wolkig"];

on("hm-rega.0.7103", function(obj) {
    var Wetterbedingungen = parseInt(obj.newState.val, 8);

   if (images[Wetterbedingungen]) {
      setState('Wetteraussichten', '/HM Wetter/' + images[Wetterbedingungen] + '.png');
   } else {
      log("Wetteraussichten kein Wert: " + Wetterbedingungen);
   }
});
Vielleicht kann ja jemand dazu was sagen was ich falsch mache.

Und vielleicht hat jemand ein Tipp für ein gutes Buch über Javacript…Weihnachten steht ja vor der Tür.

Danke im voraus

Sebastian `
Wo liegen deine Bilder? So wie du es geschrieben hast, meinst du dass die unter "http://ip/HM Wetter/Heiter.png" sind.

Das ist aber nicht möglich.

Du musst die Bilder hoch laden, z.B. unter "/vis.0/main/img/HMWetter/" und dann

      setState('Wetteraussichten', '/vis.0/main/img/HMWetter/' + images[Wetterbedingungen] + '.png');

pix

Hallo Sebastian,
~~@webseb79:~~

Guten Abend,

versuche mich heute zum ersten mal in Javascript und ich bin ein absoluter Anfänger.

Ich wollte mir das Script von Bluefox anpassen aber ich habe kein Erfolg das ich ein Ergebnis geliefert bekomme.
createState('Wetteraussichten', '');

var images = ["Heiter", "Dunst", "Nebel", "Regenschauer", "Nieselregen", "Regen", "Bedeckt", "Wolkig"];

on("hm-rega.0.7103", function(obj) {
    var Wetterbedingungen = parseInt(obj.newState.val, 8);

   if (images[Wetterbedingungen]) {
      setState('Wetteraussichten', '/HM Wetter/' + images[Wetterbedingungen] + '.png');
   } else {
      log("Wetteraussichten kein Wert: " + Wetterbedingungen);
   }
});
Vielleicht kann ja jemand dazu was sagen was ich falsch mache.

Und vielleicht hat jemand ein Tipp für ein gutes Buch über Javacript…Weihnachten steht ja vor der Tür.

Danke im voraus

Sebastian `

auf die Schnelle drübergeschaut:

parseInt macht aus einem String eine Zahl. Du solltest parseInt mit dem Radix 10 nutzen. Du nutzt aber 8, machst also eine Octalzahl.

Besser:

var Wetterbedingungen = parseInt(obj.newState.val, 10);

Das hat nix mit der Zahl der Elemente im Array zu tun.

Suche mal parseInt über google. Du erhälst eine Liste mit Seiten, die ganz gut Javascript erklären (auch auf https://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&ved=0CEgQFjAEahUKEwjj8rW7lebIAhUBrSwKHby6BWA&url=http%3A%2F%2Fwiki.selfhtml.org%2Fwiki%2FJavaScript%2FFunktionen%2FParseInt&usg=AFQjCNGK7NRSvkTTrBMl67IwxWZ9kdH5zw). Manche davon haben sogar einen http://www.tutorialspoint.com/java/number_parseint.htm (fertige Skripte mit Ausgabe. Man kann dann etwas am Skript ändern und sieht die veränderte Ausgabe).

Spar das Geld für das Buch und kauf dir davon eine HomeMatic-Komponente. Oder besser spende es an ioBroker für Webspace, Testhardware, etc. :D

Gruß,

Pix

webseb79

Guten Morgen,

wenn natürlich parseint aus einem String eine Zahl macht haben wir das Problem vielleicht schon.

In der CCU läuft ein Script welches von Wunderground die Wetterbedingungen in eine Zeichenkette schreibt z.B. Heiter oder Bedeckt oder Leichter Niesel usw.

Diese Variable heißt in Iobroker "m-rega.0.7103" Wetterbedingungen.

Meine Bilder passend zu den Wetterbedingungen haben den gleichen Namen und liegen per Filezilla auf dem Raspi unter /HM Wetter/Heiter.png.

Muß ich meine Bilder alle zwingend unter "/vis.0/main/img/" ablegen ?

Da wäre dann vielleicht der nächste Fehler!

Und ist ein Leerzeichen bei z.B "Leichter Niesel" ein Fehler ?

Weil Wunderground liefert die Zeichenketten mit Leerzeichen zwischen den Wörtern !

Nach meinem Verständnis ist das Script von nobse etwas besser zu verstehen aber dort werden Zahlen von der CCU übergeben und durch case 1 verglichen und ein Bild dementsprechend zugewiesen.

Hab ich das richtig verstanden?

Bei mir kommen Zeichenketten welche verglichen werden müssen um dann das passende Bild zuteilen zu können.

Javescript wird mir bestimmt viel Kopfzerbrechen bereiten ;)

Ich danke euch fürs mitlesen und Problem lösen

Sebastian

Community Forum

NEWS

Nach Variablen Wert bestimmte Grafik anzeigen

Support us

659

32.6k

82.2k

1.3m