Widgets im Popup

[schwatter]

Morgen Rudi,

ich hatte eine Idee zum PopupWidget. Aber bin dann über den alten Thread gestolpert.

https://forum.fhem.de/index.php?topic=33766.msg261329#msg261329

Da ist beschrieben, wie du und justme1968 bereits 2015 ein Popup für Widgets eingebaut habt.
Syntaxbeispiel:

Code Auswählen Erweitern

attr d devStateIcon .*:on:hue:ct:dim
attr d setList hue:colorpicker,HUE,0,100,65000 ct:colorpicker,CT,2500,6000 dim:slider,0,5,100
Meine Frage dazu, kann ich 2 Icons direkt im devStateIcon kombinieren? Beispiel, Icon1 zum schalten und Icon2 öffnet die Widgets?

Syntax ist falsch, aber in etwa so

Code Auswählen Erweitern

devStateIcon off:FS20.off:on on:FS20.on:off .*:on:hue:ct:dim
Momentant behelfe ich mir so, aber vielleicht geht es auch einfacher?

Code Auswählen Erweitern

defmod popupTest dummy
attr popupTest devStateIcon {\
\
  my $reading1 = "state";;\
  my $reading2 = "state1";;\
  my $reading3 = "state2";;\
\
  my $popupIcon = FW_makeImage("remotecontrol/black_btn_MENUDroid");;\
\
  my $state  = ReadingsVal($name,$reading1,"off");;\
  my $state1 = ReadingsVal($name,$reading2,"off");;\
  my $state2 = ReadingsVal($name,$reading3,"off");;\
\
  # Icons\
  my $icon  = $state  eq "on" ? "li_wht_on" : "li_wht_off";;\
  my $icon1 = $state1 eq "on" ? "li_wht_on" : "li_wht_off";;\
  my $icon2 = $state2 eq "on" ? "li_wht_on" : "li_wht_off";;\
\
  # webCmd + Widgets\
  my $cmdList = AttrVal($name, "webCmd", "");;\
  my $allCmds = FW_widgetOverride($name, getAllSets($name));;\
  my $h = "";;\
\
  foreach my $cmd (split(":", $cmdList)) {\
    my $htmlTxt;;\
    my @c = split(' ', $cmd);;\
\
    if (@c && $allCmds =~ m/\b$c[0]:([^ ]*)/) {\
      my $values = $1;;\
      foreach my $fn (sort keys %{$data{webCmdFn}}) {\
        no strict "refs";;\
        $htmlTxt = &{$data{webCmdFn}{$fn}}($FW_wname, $name, $FW_room, $cmd, $values);;\
        use strict "refs";;\
        last if defined $htmlTxt;;\
      }\
    }\
\
    if ($htmlTxt) {\
      $h .= "<p>$htmlTxt</p>";;\
    } else {\
      my $link = "cmd.$name=set $name $cmd";;\
      $h .= "<p><a href='$FW_ME$FW_subdir?$link$FW_CSRF'>$cmd</a></p>";;\
    }\
  }\
\
  $h =~ s/'/\\"/g;;\
\
  return\
    '<span style="display:flex;; gap:8px;; align-items:center;;">'\
      . '<a href="/fhem?cmd=set '.$name.' '.$reading1.' '.($state eq "on" ? "off" : "on").'&XHR=1">'\
        . FW_makeImage($icon)\
      . '</a>'\
      . '<a href="/fhem?cmd=set '.$name.' '.$reading2.' '.($state1 eq "on" ? "off" : "on").'&XHR=1">'\
        . FW_makeImage($icon1)\
      . '</a>'\
      . '<a href="/fhem?cmd=set '.$name.' '.$reading3.' '.($state2 eq "on" ? "off" : "on").'&XHR=1">'\
        . FW_makeImage($icon2)\
      . '</a>'\
      . '<a style="cursor:pointer" onclick=\''\
        . 'event.stopPropagation();;'\
        . 'var content=document.createElement("div");;'\
        . 'content.innerHTML="'.$h.'";;'\
        . 'FW_okDialog(content,this);;'\
      . '\'>'.$popupIcon.'</a>'\
    . '</span>';;\
\
}\

attr popupTest readingList state state1 state2 power 19colorpicker_HUE
attr popupTest room popup
attr popupTest setList power:slider,0,5,100 19colorpicker_HUE:colorpicker,HUE,0,1,359 state:select,on,off state1:select,on,off state2:select,on,off
attr popupTest webCmd power:19colorpicker_HUE:state:state1:state2

setstate popupTest on
setstate popupTest 2026-01-05 20:49:04 19colorpicker_HUE 209
setstate popupTest 2026-01-05 20:45:50 power 45
setstate popupTest 2026-01-05 20:59:02 state on
setstate popupTest 2026-01-05 20:59:01 state1 on
setstate popupTest 2026-01-05 20:59:01 state2 on



Gruß schwatter

[rudolfkoenig]

Momentant behelfe ich mir so, aber vielleicht geht es auch einfacher?

Mir ist nichts bekannt.
Ich wuerde den Code in eine Funktion @ 99_myUtils.pm packen, da kann man auf ;; und \ verzichten, und mit <<"EOF" lesbares JavaScript bauen.

Wozu sind die container.style Anweisungen notwendig?
Ich habe nach dem Entfernen keinen Unterschied gemerkt.

Sonst: schickes Demo

[schwatter]

Nabend,

dann werde ich weiter in der fhemweb.js und 01_FHEMWEB.pm schmökern. Der Widget-Button würde FHEM von Haus aus gut stehen.
Er müsste allerdings auch deaktivierbar sein. Bei f18 habe ich ,,Show all columns on small screen" auf off gesetzt. In Kombination
mit dem Button ergibt das einen schönen aufgeräumten Look, während bei Bedarf weiterhin alle Widgets angezeigt werden können und
das per 1-Handbedieung am Smartphone.

Der Container war ein Experiment. Habe ich oben angepasst. Gap kann jetzt direkt im <span> gesetzt werden.

Ja, ich denke, dann packe ich es erstmal in die 99_myUtils.pm. Wahrscheinlich muss ich dann Mehrere Readings für Werte und Icons übergeben.
Und die Schalter ein- und ausblendbar machen.

Daher werde ich das Thema erstmal in Codeschnipsel parken.


Gruß schwatter