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;;\
\
  # Popup mit drei klickbaren Lampen\
  return\
    '<span>'\
      # erste Lampe\
      . '<a href="/fhem?cmd=set '.$name.' '.$reading1.' '.($state eq "on" ? "off" : "on").'&XHR=1">'\
        . FW_makeImage($icon)\
      . '</a>'\
      # zweite Lampe\
      . '<a href="/fhem?cmd=set '.$name.' '.$reading2.' '.($state1 eq "on" ? "off" : "on").'&XHR=1">'\
        . FW_makeImage($icon1)\
      . '</a>'\
      # dritte Lampe\
      . '<a href="/fhem?cmd=set '.$name.' '.$reading3.' '.($state2 eq "on" ? "off" : "on").'&XHR=1">'\
        . FW_makeImage($icon2)\
      . '</a>'\
    . '</span> '\
    . '<a style="cursor:pointer" onclick=\''\
      . 'event.stopPropagation();;'\
      . 'var container=document.createElement("div");;'\
      . 'container.style.display="flex";;'\
      . 'container.style.flexDirection="column";;'\
      . 'container.style.gap="8px";;'\
      . 'var legacy=document.createElement("div");;'\
      . 'legacy.innerHTML="'.$h.'";;'\
      . 'container.appendChild(legacy);;'\
      . 'FW_okDialog(container,this);;'\
    . '\'>'.$popupIcon.'</a>';;\
}\

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-03 21:36:26 19colorpicker_HUE 202
setstate popupTest 2026-01-03 21:36:27 power 45
setstate popupTest 2026-01-03 21:44:27 state on
setstate popupTest 2026-01-03 21:44:27 state1 on
setstate popupTest 2026-01-03 21:44:26 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