devStateIcon mit Icon UND Text?

[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:

Code Auswählen Erweitern


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)

[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

[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

[ramses]

Hallo,

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

danke

[Byte09]

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:

Code Auswählen Erweitern


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 .

Code Auswählen Erweitern

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]

sehr cool!

[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

Code Auswählen Erweitern

{
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:

Code Auswählen Erweitern

{
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

[justme1968]

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.

[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

[abc2006]

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

Stephan