[Frage] Widget-Inhalte im zeitlichen Wechsel anzeigen

pix

Hallo Thorsten,
~~@dtp:~~

aus Platzgründen möchte ich gerne in einem meiner Views zwei Widgets zur Anzeige der Luftfeuchtigikeit und der Windgeschwindigkeit meines HomeMatic-Wettersensors übereinander legen und alle 3 Sekunden im Wechsel anzeigen lassen. `
Ich empfehle, per Script den Inhalt einer Variable abwechselnd mit der Windgeschwindigkeit und der Luftfeuchtigkeit zu füllen. Diese Variable wird dann ganz normal in VIS angezeigt. Sollte ein String sein, damit man die Formatierung und die Einheit gleich mit geben kann.

Script:

createState('Wetter', {
    type: 'string',
    name: 'Wetteranzeige (rotierend)',
    def: 'leer'
});

var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen';
var idWindspeed = 'hier den HM-Datenpunkt eintragen';

var wetter = [];
wetter[0] = 'Wetter: ' + getState(idLuftfeuchte).val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle
wetter[1] = 'Wetter: ' + getState(idWindspeed).val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen
// weitere Zeilen nach diesem Muster einfügen

var x=0; // Zähler auf 0

setInterval(function () {
    setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben
    x++; // hochzählen
    if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen.
}, 10 * 1000); // alle zehn Sekunden

Dann den Datenpunkt "javascript.0.Wetter" als ID in das VIS-Widget eintragen.

Ich empfehle, ein HTML Widget zu verwenden und dann in das Feld HTML das hier einzutragen:

{javascript.0.Wetter}

Dann lassen sich auch HTML Befehle zur Formatierung (sowas wie span mit style) in die Variable mit einweben.

Gruß

Pix

dtp

Super. Danke. Werde ich mal ausprobieren.

Gruß,

Thorsten

Dutchman

Die Lösung von Pix ist sogar viel besser als direkte Antwort auf deine Frage

Sent from my iPhone using Tapatalk

pix

Schön, dass es gefällt. Ich habe das Skrip noch mal angepasst. Stichwort toFixed().

Pix

Alex1808

Habe es zum "testen" laufen lassen, zeitliche Wechsel vom anzeige funktioniert ganz gut, aber werte vom Temperatur und Feuchte werden nur bei Start vom skript übermittelt und weiter ändern sich nicht.

pix

Das ist natürlich richtig erkannt und mein Fehler :oops: . Ich nutze so eine Konstruktion zur Dastellung von Webcam-Bildern. Da ändert sich nix an der URL, deshalb läuft es. Hier muss dann noch nachgebessert werden, damit entweder

1. bei jedem Interval (also hier alle zehn Sekunden) die Wetterdaten neu eingelesen werden:

>! ````
createState('Wetter', {
    type: 'string',
    name: 'Wetteranzeige (rotierend)',
    def: 'leer'
});
>! var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen';
var idWindspeed = 'hier den HM-Datenpunkt eintragen';
>! var wetter = [];
function leseWetter() {
    wetter[0] = 'Wetter: ' + getState(idLuftfeuchte).val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle
    wetter[1] = 'Wetter: ' + getState(idWindspeed).val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen
// weitere Zeilen nach diesem Muster einfügen 

}
>! var x=0; // Zähler auf 0
>! setInterval(function () {
    leseWetter();
    setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben
    x++; // hochzählen
    if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen.
}, 10 * 1000); // alle zehn Sekunden
>! ````

oder

1. bei jeder Änderung der Wetterwerte, die Variable mit den Wetterdaten neu beschrieben wird:
! createState('Wetter', { type: 'string', name: 'Wetteranzeige (rotierend)', def: 'leer' }); ! var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen'; var idWindspeed = 'hier den HM-Datenpunkt eintragen'; ! var wetter = []; ! on(idLuftfeuchte, function(data) { wetter[0] = 'Wetter: ' + data.state.val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle }); ! on(idWindspeed, function(data) { wetter[1] = 'Wetter: ' + data.state.val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen }); ! var x=0; // Zähler auf 0 ! setInterval(function () { setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben x++; // hochzählen if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen. }, 10 * 1000); // alle zehn Sekunden !

Kann man sich aussuchen. Version 1 braucht weniger Code, Version 2 macht vielleicht deutlich, dass man nur neue Werte braucht, wenn sie sich verändert haben.

Gruß

Pix

dtp

Hi Pix,

nochmals Danke. Bin noch gar nicht zum Ausprobieren gekommen. Muss ich heute Abend mal machen.

Kurz noch eine Frage (kenne mich mit Javascript leider nicht aus). Du schreibst "toFixed(0)" heißt zwei Dezimalstellen und toFixed(1) eine Dezimalstelle. Was muss ich denn eingeben, wenn ich gar keine Dezimalstelle haben möchte? Für die Luftfeuchte genügt mir die Angabe als ganze Zahl vollkommen aus.

Und noch eine kleine Frage. Wenn mir der reine Zahlenwert genügt, geht das doch mit

wetter[0] = getState(idLuftfeuchte).val.toFixed(1);

oder?

Gruß,

Thorsten

Homoran

~~@dtp:~~

Was muss ich denn eingeben, wenn ich gar keine Dezimalstelle haben möchte `
~~@dtp:~~

toFixed(0) `
:!:

pix

Richtig Homoran und dtp, habe den Skriptkommentar oben editiert, danke für den Hinweis.

http://www.w3schools.com/jsref/jsref_tofixed.asp

Gruß

Pix

dtp

Öh, bin ich jetzt plemplem? Stand da nicht vorhin noch was von zwei Dezimalstellen? :roll: :?

Egal, nun macht's Sinn.

EDIT: Puh, doch nicht plemplem. :ugeek:

Alex1808

~~@pix:~~

bei jeder Änderung der Wetterwerte, die Variable mit den Wetterdaten neu beschrieben wird:

! createState('Wetter', { type: 'string', name: 'Wetteranzeige (rotierend)', def: 'leer' }); ! var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen'; var idWindspeed = 'hier den HM-Datenpunkt eintragen'; ! var wetter = []; ! on(idLuftfeuchte, function(data) { wetter[0] = 'Wetter: ' + data.state.val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle }); ! on(idWindspeed, function(data) { wetter[1] = 'Wetter: ' + data.state.val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen }); ! var x=0; // Zähler auf 0 ! setInterval(function () { setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben x++; // hochzählen if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen. }, 10 * 1000); // alle zehn Sekunden ! `

Bei der zweite Variante bekomme ich folgendes:

! ````
javascript-0 2016-06-27 15:18:05.716 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
javascript-0 2016-06-27 15:17:55.689 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
javascript-0 2016-06-27 15:17:45.662 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
javascript-0 2016-06-27 15:17:35.644 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
javascript-0 2016-06-27 15:17:25.618 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
javascript-0 2016-06-27 15:17:15.593 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions


Mein angepasste script:

>! ````
createState('Wetter', {
    type: 'string',
    name: 'Wetteranzeige (rotierend)',
    def: 'leer'
});
>! var idLuftfeuchte = 'hm-rpc.0.HEQMEINEHM.1.HUMIDITY';
var idTemperatur = 'hm-rpc.0.HEQMEINEHM.1.TEMPERATURE';
>! var wetter = [];
>! on(idLuftfeuchte, function(data) {
    wetter[0] = 'Wetter: ' + data.state.val.toFixed(0) + '% Luftfeuchte';
});
>! on(idTemperatur, function(data) {
    wetter[1] = 'Wetter: ' + data.state.val.toFixed(1) + '°C Lufttemperatur';
});
>! var x=0; // Zähler auf 0
>! setInterval(function () {
    setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben
    x++; // hochzählen
    if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen.
}, 10 * 1000); // alle zehn Sekunden

MfG

Alex

dtp

Dummerweise bin ich noch nicht wieder zum Testen des Skripts gekommen. War die letzten Tage mit dem Einrichten meines neuen Surface 3 beschäftigt, das mein iPad Air 2 ablösen soll. Melde mich, sobald ich neue Erkenntnisse gewonnen habe.

Gruß,

Thorsten

dtp

So, funktioniert super.

Hier mal ein kleines animiertes GIF (einfach drauf klicken, um die Animation zu sehen):

filename="2016-06-29 20h42_56.gif" index="0">~~

Danke,

Thorsten

Alex1808

~~@dtp:~~

So, funktioniert super. `

Welche Variante hast du jetzt benutzt, bei jedem Interval oder bei jeder Änderung der Werte?

dtp

Die mit dem Intervall. Allerdings habe ich 3 Sekunden verwendet.

Alex1808

~~@dtp:~~

Die mit dem Intervall. Allerdings habe ich 3 Sekunden verwendet. `

Alles klar!

Danke für die info.

dtp

Hi,

ich bin's noch mal. Das obige Skript von @Pix funktioniert bei mir absolut ohne Probleme. Nochmals vielen Dank dafür.

Jetzt habe ich aber eine Situation, wo ich doch eher den periodischen Wechsel zweier übereinander gelegter Widgets benötige. Es geht um folgendes:

Ich lasse mir mit einem Widget den Zustand des Haustürschlosses (verriegelt -> grün, entriegelt -> rot) anzeigen. Nun habe ich das noch um die Zustandsanzeige des Tagesriegels (siehe https://homematic-forum.de/forum/viewtopic.php?f=19&t=36961) erweitert. Aus Platzgründen möchte ich beides an derselben Stelle im View anzeigen. Und zwar derart, dass bei entriegeltem Tagesriegel dessen Widget mit rotem Hintergrund im sekündlichen Wechsel mit dem Haustürschloss-Widget angezeigt wird. Ist der Tagesriegel dagegen verriegelt, soll nur das Haustürschloss-Widget angezeigt werden.

Gibt es eine Möglichkeit, per Javaskript direkt auf die Sichtbarkeit eines Widgets Einfluss zu nehmen?

Gruß,

Thorsten

dtp

So,

hab eine Lösung gefunden:

// Wechselnde Widget-Anzeige für Tagesriegel und Haustürschloss

createState('vis.HaustuerSwitch', {
  read: true,
  write: true,
  desc: 'vis.HaustuerSwitch',
  type: 'number',
  name: 'rotierende Haustüranzeige',
  min: 0,
  max: 1,
  def: 0,
});

var count = 0; // Zähler auf 0
var IntervalId;

on("hm-rega.0.4038", function(obj){ // HomeMatic Systemvariable "EG Haustür SV Tagesriegel"
  if(obj.state.val === 0){
    clearInterval(IntervalId);
    setState("javascript."+ instance + ".vis.HaustuerSwitch", 0);
  }
  else if(obj.state.val === 1){
    IntervalId = setInterval(function(){
      setState("javascript."+ instance + ".vis.HaustuerSwitch", count); // rotierende Anzeige in Variable schreiben
      count++; // hoch zählen
      if(count == 2) count = 0; // wenn Zahl der verschiedenen Anzeigen erreicht, wieder nullen.
    }, 2 * 1000); // alle zwei Sekunden
  }
});

Das obige Skript macht nichts anderes, als bei Änderung der HomeMatic-Systemvariablen "EG Haustür SV Tagesriegel" die Variable "javascript.0.vis.HaustuerSwitch" im zweisekündigen Wechsel von 0 auf 1 zu schalten, sofern "EG Haustür SV Tagesriegel" den Wert 1 (entriegelt) angenommen hat, und dauerhaft auf 0 zu schalten, sofern "EG Haustür SV Tagesriegel" den Wert 0 (verriegelt) angenommen hat. In den entsprechenden Widgets wird dann die Sichtbarkeit in Abhängigkeit von "javascript.0.vis.HaustuerSwitch" gesetzt, und zwar derart, dass das eine Widget sichtbar ist, wenn "javascript.0.vis.HaustuerSwitch" den Wert 0 angenommen hat, und dass das andere Widget sichtbar ist, wenn "javascript.0.vis.HaustuerSwitch" den Wert 1 angenommen hat. That's it.

So sieht das Ganze dann in vis aus (rechts oben befinden sich die fraglichen Widgets).

Mit dem obigen Skript kann man übrigens im zeitlichen Wechsel beliebig viele übereinander liegende Widgets anzeigen. Nehmen wir an, wir wollen auf diese Weise "n" Widgets behandelt, dann müssen lediglich "if(count == n+1)…" und "max: n," im Skript gesetzt werden.

Gruß,

Thorsten

PS.: Ein wenig Bauchschmerzen bereitete mir die lokale Variable "IntervalId", die notwendig ist, um den zeitlichen Werte-Wechsel für "javascript.0.vis.HaustuerSwitch" zu stoppen, da diese Variable erst gesetzt wird, wenn "EG Haustür SV Tagesriegel" auf 1 gesetzt wurde. Allerdings habe ich im Log bisher keine Fehler oder Warnungen diesbezüglich angezeigt bekommen.

NEWS

[Frage] Widget-Inhalte im zeitlichen Wechsel anzeigen

Support us

777
Online

32.1k
Users

80.6k
Topics

1.3m
Posts

NEWS

[Frage] Widget-Inhalte im zeitlichen Wechsel anzeigen

Support us

777Online

32.1kUsers

80.6kTopics

1.3mPosts

777
Online

32.1k
Users

80.6k
Topics

1.3m
Posts