[Gelöst] netatmo - CO2-Werte als farbige Bilder in FTUI

[ulobo60]

In den netatmo-Apps für die MobilePhones wird der CO2-Wert (Indoor) auch als großer, farbiger Punkt/Kreis dargestellt.
Beispiel-Grafiken habe ich beigefügt.
Diese Bild-Anzeige würde ich gern in einer Zelle meines Tablet-UI darstellen.

Die Darstellung soll möglichst erfolgen nach folgenden Intervallen:
'["0","700","1200"]' (grün, gelb, rot)

Habe bereits erfolglos mit folgenden Widgets herumprobiert:
Image, Label, Symbol ... ohne jeden Erfolg.

Kann mir bitte jemand aufs Fahrad helfen und mich in die richtige Richtung schubsen?
Schon mal Danke im Voraus.

[Thyraz]

Mit dem Image Widget sollte das gehen.
Leg dir im Netatmo Device ein Userreading an, welches je nachdem wie hoch der CO2 Wert ist den Dateinamen des jeweiligen Bildes enthält.

Das Image-Widget dann mit dem Userreading als Dateiname füttern.

[ulobo60]

@Thyraz
Danke für Deine schnelle Antwort.
Habe zwar bisher noch keine Ahnung was ein 'Userreading' ist (beschäftige mich erst seit ca. 3 Tagen mit FHEM = Newbie), aber das wird sich sicher bald ändern! Mit Deinen Stichworten kann ich jedenfalls arbeiten. 
Melde mich, sobald ich was geschafft habe.
Merci vielmals.

[Thyraz]

Hallo ulobo60,

die einstellige Beitragszahl unter deinem Namen war mir nicht aufgefallen,
sonst hätte ich doch etwas mehr geschrieben.

Readings sind ja an sich "ausgelesene" Werte eines Geräts.
UserReadings sind zusätzliche virtuelle Readings die der Nutzer definieren kann.

Das kann z.B. hilfreich sein um sich zusätzliche Werte zu bilden die aus anderen Readings berechnet werden können.
Man kann bei einem UserReading immer angeben auf welches andere Reading (bzw. Event) es lauscht und dann seinen Wert aktualisiert.

Hier mal ein Beispiel welches ich einsetze um ein Icon im Image Widget anzuzeigen,
abhängig davon ob eine Lampe an oder aus ist:

Code Auswählen Erweitern


ftuiIcon:pct.* {
  my $state = ReadingsVal($name,"pct",0);
 
  if ($state == 0) {
    return "bulb_off";
  } else {
    return "bulb_on";
  }
}

Das Reading heißt dann "ftuiIcon" und wird immer aktualisiert (indem der Perl Code ausgeführt wird) wenn sich das reading "pct" des Geräts ändert.
Dieses Reading beinhaltet bei Philips Hue Lampen den Helligkeitswert.

Dieses "Lauschen" auf das Reading (Angabe hinter dem Doppelpunkt in der Definition) kann man auch weglassen, dann wird es bei JEDEM Event aktualisiert.
Sollte man aber Abstand davon nehmen, da dies die Systemlast bei vielen UserReadings sonst sicher irgendwann spürbar erhöht.

So sieht dann der Code bei meinem Beispiel im FTUI HTML aus:

Code Auswählen Erweitern


<div data-type="image"
            data-device="DeviceName"
            data-get="ftuiIcon"
            data-suffix=".png"
            data-path="img/"
            data-opacity="1.0"
            data-size="40"
            class="readonly">
        </div>


Die Bilder bulb_on.png und bulb_off.png liegen dann in einem Unterverzeichnis "img" im tablet Ordner.

[ulobo60]

Hallo Thyraz,

Wow, super Service von Dir - danke!
Ja, ich bin in der Tat noch ein Frischling, was FHEM, FTUI und Perl betrifft. Habe aber mittlere Erfanrung in der Programmierung mit VBA. Schleifenprogrammierung mit IF, THEN, ELSE, ELSEIF etc. ist mir nicht fremd. Aber Perl leider weniger ... noch :


Ich hatte gestern Nacht bis 2 Uhr in allen möglichen Beiträgen rumgelesen zu den von Dir angesprochenen Themen 'Image Widget' und 'UserReading' und hatte von hinten angefangen.
Also, was benötigt das Image Widget zur Darstellung des Bildes (HTML-Code):

Code Auswählen Erweitern


<div data-type="image"
data-device="co2_pic" # Name des userReadings
data-get="STATE"      # oder: state ??? Test !!! enthält path u. Image-Filename
data-width="100%">
</div>

(Statt dessen übernehme ich aber sofort Deine HTML-Code-Elemente !!! Siehe weiter unten.)

Dann setzte ich mich an das userReading.
Device-Name = netatmo_indoor60
Reading = co2

Code Auswählen Erweitern


attr netatmo_indoor60 userReadings co2_pic {ReadingsVal("netatmo_indoor60","co2", XXX}

Und dann wurschtelte ich mir den Wolf mit der Schleifenprogrammierung in Perl (XXX) und merkte:
It's a long way to Tiparillo! - zumindest für mich.

Dein Ansatz ist natürlich klasse!
Gehe ich Recht in der Annahme dass Dein 1. Code-Schnipsel (ftuiIcon:pct.*{ ...) in die 99_myUtils.pm kopiert wird?
Wenn ja, muss das noch als 'sub' definiert werden?
Wenn nein, wo 'kommt das hin'?

Auf jeden Fall kann ich hier meine co2-Intervalle definieren:

Code Auswählen Erweitern


ftuiIcon:pct.* {
  my $state = ReadingsVal($name,"pct",0);

  if ($state =< 700) {
    return "pic1";
  } elseif {$state =< 1200) {
    return "pic2"; {
  } else {
    return "pic3";
  }
}

Ist das so korrekt? Und was bedeutet 'pct'?

Jetzt Deine leicht modifizierte FTUI HTML - Codierung:

Code Auswählen Erweitern


<div data-type="image"
            data-device="DeviceName" # oder: netatmo_indoor60 ???
            data-get="ftuiIcon"
            data-suffix=".png"
            data-path="own/"
            data-opacity="1.0"
            data-width="100%"        # soll die ftui-Zelle ausfüllen; k.A. ob das so geht
            class="readonly">
        </div>


Wäre toll, wenn Du noch mal drüber schauen könntest ;
Und nochmal big thx für Deine detaillierte Hilfe.
Das gesamte Thema FHEM fasziniert mich schon nach den paar Tagen Beschäftigung damit.

[Thyraz]

Hi, das ftuiIcon Zeug muss nicht in deine myUtils, sondern in das userReadings Attribut.
Nicht davon verwirren lassen, dass ich die Definiton der Übersichtlichkeit  wegen auf mehrere Zeilen verteilt geschrieben habe.

das pct ist das Reading auf das dieses UserReading lauscht.
Sobald pct im Device verändert wird, berechnet sich ftuuIcon neu.

[ulobo60]

  aaahhh, jetzt, jaaaa 
Ist aber auch wirklich schön übersichtlich!

Gehe jetzt erst mal auf die Suche  nach dem Befehl, wie man aus der Befehlszeile oben in FHEM ein konsolenähnliches Eingabefenster macht. Hatte ich gestern Nacht irgendwo gelesen.
Ich melde mich dann noch mal - hoffentlich nach Vollzug.

[ulobo60]

Heureka!

Aufgrund des excellenten Lehrers hat der Schüler ein sehr gutes Ergebis erreicht (siehe Anlage) 
Ich lüfte gerade! 
Habe mir allerdings den Wolf gebastelt bzgl. der korrekte Syntax des conditional statements.
Das richtige Setzen der brackets innerhalb des IF ELSIF ELSE Codes haben mir einigen Schweiss gekostert.
Und bis ich mal bemerkt hatte, dass es in Perl nicht ELSEIF sondern ELSIF heißt..... 

Auf zu neuen Herausforderungen und
nochmals recht herzlichen Dank, Thyraz, für Deine sehr kompetente Hilfe.

[ulobo60]

Hier meine persönlich Lösung für das Vorhaben, die bildliche netatmo-Anzeige für die Raumluftqualität (CO2-Wert in ppm - indoor) in der FTUI darzustellen. Damit dies funktioniert, muss das netatmo-Modul von FHEM installiert sein.
Die Bildanzeige für die aktuelle Raumluftqualität erfolgt nach der Einordnung des aktuellen CO2-Werts in eins von 3 Intervallen. Der co2-Wert wird als Reading vom indoor-Modul bereitgestellt.

Intervalle:
0 bis 699 = grün (pic1.png; siehe oben)
700 bis 1199 = gelb (pic2.png)
1200 und mehr = grün (pic1.png)

1. UserReading im indoor-Device anlegen

Code Auswählen Erweitern


ftuiIcon:co2.* {my $state = ReadingsVal($name,"co2",0);
if ($state < 700) {return "pic1";}
elsif ($state < 1200) {return "pic2";}
else {return "pic3";}}


2. HTML-Code zur Einbindung der Darstellung in Eure FTUI-Oberfläche eingeben

Code Auswählen Erweitern


    <div data-type="image"
        data-device="netatmo_indoor60"
        data-get="ftuiIcon"
        data-path="own/"
        data-suffix=".png"
        data-opacity="1.0"
        data-size="140"
    </div>

Ich habe zur Darstellung eine 2x2-Zelle in der FTUI benutzt.
Setzt in data-device Eure Bezeichnung für den indoor-Device von netatmo ein.
Ich habe für die 3 Bilder einen neuen Ordner auf meinem raspi angelegt: /opt/fhem/www/tablet/own/
Tragt den Namen für den neuen Ordner in data-path ein.
Mit dem Wert data-size müßt Ihr entsprechend Eures FTUI-Layouts etwas herumspielen, damit das Bild in der Zelle möglichst flächenfüllend angezeigt wird.
Have fun!

[Lucky2k12]

Hallo und Danke für die Zusammenfassung!

1200 und mehr = grün (pic1.png)
...
   else {return "pic3";}}

Hat sich hier noch ein copy-paste Fehler eingeschlichen?

Das Vorgehen sollte doch auch auf ein co2mini übertragbar sein, oder? https://forum.fhem.de/index.php/topic,41750.msg339990.html#msg339990
Gruß
Lucky

[ulobo60]

hi Lucky2k12,

Hat sich hier noch ein copy-paste Fehler eingeschlichen?

Ich glaube nicht  - die letzte } bezieht sich m.E. auf die öffnende { ganz oben hinter 'ftuiIcon:co2.*' 

Habe mir gerade mal Deinen Beitrag zum co2mini durchgelesen. Sollte problemlos gehen.
Du musst Dir halt nur die Intervalle nach Deiner CO2-Situation selbst einteilen.
Bei mir im Wohnraum (wo der indoorDevice steht, der CO2 liest) habe ich nach starkem Lüften (Temp= ca. 20,8 Grad) einen CO2-Wert von ca. 380ppm.
Nach ein paar Stunden - und einigen gequalmten Zigaretten - liegt der Wert dann bei ca. 1100ppm.
Vielleicht muss ich meinen 1200er Wert um 100 reduzieren? 

Mit der Farb-Intensität meiner bisherigen pics war ich nicht zufrieden. Habe einen neuen Satz gebastelt und hier angehängt. Wobei: das grüne pic hat noch einen leicht gelben Halo - muss ich vielleicht noch mal mit Photoshop ran.
Kannst ja mal schauen, welcher Satz Dir besser gefällt.
Have fun!

[Lucky2k12]

Danke für diene Antwort, ulobo60.

Zum copy-paste Fehler:
Die dritte Zeile wird ja dann aktiv, wenn du 1200ppm erreichst, dann wird pic3, also rot ausgegeben.
in deiner Erläuterung steht aber "1200 und mehr = grün (pic1.png)"

Meine Frage zum co2mini bezog sich auf deinen folgenen Satz, der mich etwas irritiert hat:

Damit dies funktioniert, muss das netatmo-Modul von FHEM installiert sein

Das UserReading kann ich wohl genau so gut in meinem co2mini device anlegen.
Ich probier's einfach mal aus. Bei Erfolg kann ich dann ja die Lösung hier rein editieren.
Sorry, wollte deinen Thread nicht kapern

Gruß

[ulobo60]

Gut, dass Du so beharrlich bist.

Copy/Paste-Fehler:
ja, ist einer
Ich hatte aufgrund Deines Hinweises im Code nachgeschaut und dort stimmts. Aber in der Beschreibung drüber ist der Fehler!

"muss das netatmo-Modul von FHEM installiert sein":
Ist in der Tat Quatsch. Kann man für jedes Reading verwenden, bei dem es sich anbietet, zusätzlich eine optische Ampel darzustellen.

Naja - bin halt noch ein Newbie, was das gesamte FHEM-Thema betrifft.
Und: ich finde überhaupt nicht, das Du meinen Thread gekapert hast. 

[ulobo60]

Habe pic1.png noch "etwas grüner" hinbekommen - hier das Ergebnis.