Hauptmenü

devStateIcon mit Icon UND Text?

Begonnen von TeeVau, 20 Juni 2015, 20:20:31

Vorheriges Thema - Nächstes Thema

TeeVau

Hallo,

ich scheitere gerade gefühlt an einer Kleinigkeit.
Über einen Dummy stelle ich einen Wert ein. Diesen Wert möchte ich im FHEMWEB sehen. Das ist auch nicht Problem. Zusätzlich möchte ich jedoch ein Icon neben dem Wert haben, was mir anzeigt ob der Wert noch in einem Bereich ist, der ok ist.
Also z.B.:
wert von 20-24 = devStateIcon message_ok@green <der Wert>
wert von 18-19 = devStateIcon message_failure@red <der Wert>
wert von 25-30 = devStateIcon message_failure@red <der Wert>

Ich schaffe es aber nur den Wert anzuzeigen, über stateFormat, oder eben ein icon über devStateIcon. Habe nirgends etwas gefunden wie ich mit devStateIcon ein Icon und danach einen Text setzen kann.
Damit teste ich:

define test_Temperatur dummy
attr test_Temperatur Temp:18,18.5,19,19.5,20,20.5,21,21.5,22,22.5,23,23.5,24,24.5,25


Aussehen soll es in etwa so wie im Anhang (Der Anhang ist mit readingsGroup gemacht, darauf würde ich aber gerne verzichten)
FHEM 5.8 dev (virtualisiert) / FBF 7390 (CUL 868MHz V 1.51 / panStick (AVR1))
FS20: fs20di,fs20pira,fs20sm8,fs20st2,fs20tfk,fs20ue1,fs20ws1
panStamp (AVR1): RGB Multi von ext23, 1W-DSxxxx, I/O Sketch, Spritzpumpe
Multimedia: Panasonic TV (VIERA), Kodi, Yamaha RX-V781, LMS
Sonstiges: XiaomiFlowerSen

justme1968

in fhemweb geht (zur zeit) nur text oder icon. nicht beides gemeinsam.

du kannst die {...} variante von devStateIcon verwenden und selber den html code bauen um icon und text anzuzeigen.

oder du nimmst doch readingsGroup :)

gruss
  andre
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

TeeVau

Das habe ich schon fast befürchtet ;-)
Ich denke, bevor ich mich mit HTML rumschlage versuche ich mich dann jetzt doch mal an readingsGroup. Die Erkenntnisse kann ich sicherlich eher nochmal verwenden im Leben mit FHEM :-)
Dann ist mein Abend ja gerettet ;-)
FHEM 5.8 dev (virtualisiert) / FBF 7390 (CUL 868MHz V 1.51 / panStick (AVR1))
FS20: fs20di,fs20pira,fs20sm8,fs20st2,fs20tfk,fs20ue1,fs20ws1
panStamp (AVR1): RGB Multi von ext23, 1W-DSxxxx, I/O Sketch, Spritzpumpe
Multimedia: Panasonic TV (VIERA), Kodi, Yamaha RX-V781, LMS
Sonstiges: XiaomiFlowerSen

ramses

Hallo,

ist das noch immer so (entweder icon oder text) oder hat sich da was getan inzwischen?

danke

Byte09

#4
Zitat von: TeeVau am 20 Juni 2015, 20:20:31
Hallo,

ich scheitere gerade gefühlt an einer Kleinigkeit.
Über einen Dummy stelle ich einen Wert ein. Diesen Wert möchte ich im FHEMWEB sehen. Das ist auch nicht Problem. Zusätzlich möchte ich jedoch ein Icon neben dem Wert haben, was mir anzeigt ob der Wert noch in einem Bereich ist, der ok ist.
Also z.B.:
wert von 20-24 = devStateIcon message_ok@green <der Wert>
wert von 18-19 = devStateIcon message_failure@red <der Wert>
wert von 25-30 = devStateIcon message_failure@red <der Wert>

Ich schaffe es aber nur den Wert anzuzeigen, über stateFormat, oder eben ein icon über devStateIcon. Habe nirgends etwas gefunden wie ich mit devStateIcon ein Icon und danach einen Text setzen kann.
Damit teste ich:

define test_Temperatur dummy
attr test_Temperatur Temp:18,18.5,19,19.5,20,20.5,21,21.5,22,22.5,23,23.5,24,24.5,25


Aussehen soll es in etwa so wie im Anhang (Der Anhang ist mit readingsGroup gemacht, darauf würde ich aber gerne verzichten)

wenn ich es richtig verstanden habe sollte das in etwa so was sein , was du suchst.
habe es eben nur schnell hingefummelt, geht sicher schöner und die Icons müsstest du nach wunsch anpassen.


ich habe mich allerdings noch nicht damit beschäftigt, ob ich das svg so irgendwie eingebunden bekomme , schaue ich nachher ggf. nochmal.

gruss Byte09


edit: jetzt erst gesehen, @ramses da hast du ja einen etwas älteren Thread hochgeholt ;-) ... egal , jetzt bleibt es stehen .

defmod test_Temperatur dummy
attr test_Temperatur devStateIcon { my $img;; my $st = ReadingsNum($name,"state","");; $img = "<img src='/fhem/images/default/10px-kreis-gruen.png'>" if ($st >=20 && $st <= 24);; $img = "<img src='/fhem/images/default/10px-kreis-gelb.png'>" if ($st >=18 && $st <= 19);; $img = "<img src='/fhem/images/default/10px-kreis-rot.png'>" if ($st >=25 && $st <= 30);; return '<div>'.$img .'</div><div>Temp: '. $st.' Grad</div>' }
attr test_Temperatur icon 10px-kreis-gelb
attr test_Temperatur room 1_test
attr test_Temperatur setList Temp:18,18.5,19,19.5,20,20.5,21,21.5,22,22.5,23,23.5,24,24.5,25
attr test_Temperatur webCmd Temp

setstate test_Temperatur Temp 20.5
setstate test_Temperatur 2018-11-18 09:07:58 state Temp 20.5

ramses


abc2006

Sehr cool, ja!
Danke Danke Danke dass du was gepostet hast, mit dem ich was anfangen konnte.
Bin auch schon einen ganzen Schritt weiter. Hänge aber immer noch an ein paar Punkten:

Könntest du noch einen Tipp geben, wie man SVG-Icons einfärbt?
Mit
{
my $img;;
my $current = ReadingsNum($name,"current","");;
my $energy = ReadingsNum($name,"energy","");;
my $power = ReadingsNum($name,"power","");;
$img = "<img style='fill:f0f0f0' src='/fhem/images/fhemSVG/general_an.svg'>" if (ReadingsVal($name,"status","0") eq "on");;
$img = "<img src='/fhem/images/fhemSVG/general_aus.svg'>" if (ReadingsVal($name,"status","0") eq "off");;
return '<div>'.$img .' I: '. $current.'A  | P: '. $power.'VA | W: '. $energy.' Wh </div>'
}

hat leider nicht funktioniert.
Desweiteren hab ich versucht, einen Link zu erzeugen:
{
my $img;;
my $current = ReadingsNum($name,"current","");;
my $energy = ReadingsNum($name,"energy","");;
my $power = ReadingsNum($name,"power","");;
$img = "<a href='http://mainfhem:8083/fhem?cmd=set%20KNX02.O04_Aktor%20off&XHR=1'><img xmlns='http://www.w3.org/2000/svg' src='/fhem/images/fhemSVG/general_an.svg'></a>" if (ReadingsVal($name,"status","0") eq "on");;
$img = "<a href='http://mainfhem:8083/fhem?cmd=set%20KNX02.O04_Aktor%20on&XHR=1'><img xmlns='http://www.w3.org/2000/svg' src='/fhem/images/fhemSVG/general_aus.svg'></a>" if (ReadingsVal($name,"status","0") eq "off");;
return '<div>'.$img .' I: '. $current.'A  | P: '. $power.'VA | W: '. $energy.' Wh </div>'
}

Das funktioniert. Hat aber den Nachteil, dass ich jedes Device auf sich selbst anpassen muss ...
Geht das auch einfacher?

Drittens hab ich ein riiiiieeeesiges Icon, was fast den ganzen Bildschirm füllt.
Auch mit verschiedensten Größenanpassungsattributen krieg ich das nicht in den Griff.

Könntest du dich dazu nochmal äussern?
Das wäre mega!
Grüße,
Stephan
FHEM nightly auf Intel Atom (lubuntu) mit VDSL 50000 ;-)
Nutze zur Zeit OneWire und KNX

justme1968

#7
mehrere icons bzw. icons und text geht inzwischen auch einfacher. siehe hier: https://wiki.fhem.de/wiki/DevStateIcon und https://forum.fhem.de/index.php/topic,97586.0.html

färben gehen in dem man an den icon namen @<farbe> anhängt. aber nur wenn fhem die icons erzeugt, nicht wenn man die img tags über perl code selber baut. dann muss man das einfärben auch selber machen. siehe fhemweb quelltext.
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

Beta-User

...doppelt genäht hält evtl. besser...

Es gibt zwischenzeitlich übrigens auch eine einfachere Variante mit mehrzeiligen stateFormat-Angaben:

https://wiki.fhem.de/wiki/DevStateIcon#Syntax

Wichtig ist dabei zu wissen, dass jede Zeile für sich ausgewertet wird und einen eigenen Text oder ein Icon erzeugt (ggf. iVm. den Angaben in devStateIcon). Dabei geht u.A. auch farbig. Siehe auch das Beispiel hier: https://wiki.fhem.de/wiki/DeviceOverview_anpassen#Multi-Icon-Variante
Server: HP-elitedesk@Debian 12, aktuelles FHEM@ConfigDB | CUL_HM (VCCU) | MQTT2: MiLight@ESP-GW, BT@OpenMQTTGw | MySensors: seriell, v.a. 2.3.1@RS485 | ZWave | ZigBee@deCONZ | SIGNALduino | MapleCUN | RHASSPY
svn: u.a MySensors, Weekday-&RandomTimer, Twilight,  div. attrTemplate-files

abc2006

Danke euch. Und ich suche seit nem halben Jahr nach einer Lösung ...
Danke!!

Stephan
FHEM nightly auf Intel Atom (lubuntu) mit VDSL 50000 ;-)
Nutze zur Zeit OneWire und KNX