Werteliste und Slider kein Refresh der kompletten Seite

[Hoschiq]

Hallo,

ich verwende bei mir die Werteliste und den Slider im FHEMWEB an einigen Dummy Devices.

Dabei ist mir aufgefallen, dass bei einer Wertänderung in der Werteliste und im Slider ein reload der kompletten Seite durchgeführt wird.
Das ist bei längeren Seiten insofern unschön, da man nach Wertänderung immer wieder an die Stelle scrollen muss, an der man gerade den Wert geändert hat.

Bei der Definition verwende ich ausschließlich setList und Webcmd.

Beispieldefinition:

Code Auswählen Erweitern

define test1 dummy
attr test1 setList state:2,3,4,5,7,9,10,12,15
attr test1 webCmd state

define test2 dummy
attr test2 devStateIcon 1:HomeStatus.1 2:HomeStatus.2 3:HomeStatus.3 4:HomeStatus.4
attr test2 setList state:slider,1,1,4
attr test2 webCmd state

Verwende ich allerdings an einem Dummy, welcher nur on off unterstützt das Attribut devStateIcon, dann kann ich mit einem Klick auf das Icon oder auf das WebCmd den State ändern, ohne dass die ganze Seite neu geladen wird.

Beispieldefinition:

Code Auswählen Erweitern

define test dummy
attr test devStateIcon on:remotecontrol/black_btn_GREEN:off off:remotecontrol/black_btn_RED:on
attr test setList on off
attr test webCmd &nbsp

Liegt das Verhalten von Werteliste und Slider bei Wertänderungen die Seite neu zu laden an meiner Definition? Wie kann man  den beiden beibringen, dass bei Wertänderung nicht die ganze Seite neu geladen werden soll?

Danke

[rudolfkoenig]

Habs geaendert, die naechste Version laedt die Seite bei Aenderung der Slider nicht mehr neu.

[Hoschiq]

Hallo Rudolf,

danke für die Änderung.

Ich hätte noch einen Patch für fhemweb_time.js. Bei time gab es auch das Verhalten des Reloads der kompletten Seite nachdem die neue Uhrzeit eingestellt und mit dem Button bestätigt wurde.

In der Funktion

Code Auswählen Erweitern

FW_timeCreate(el,cmd) muss

Code Auswählen Erweitern

document.location = cmd.replace('%',v); durch

Code Auswählen Erweitern

FW_cmd(cmd.replace('%',v)+"&XHR=1"); ersetzt werden.

[rudolfkoenig]

Danke fuer den Hinweis, habs eingecheckt.

[Hoschiq]

Hallo,

nachdem die Slider nun keine Seite mehr neu laden fehlt nur noch das Dropdown ohne Relaod.
Allerdings komme ich hier nicht weiter und benötige etwas Hilfe:

die folgende Definition:

Code Auswählen Erweitern

define dropdownTest dummy
attr dropdownTest room Test
attr dropdownTest setList state:0,2,4,6
attr dropdownTest webCmd state

erzeugt diesen HTML Code:

Code Auswählen Erweitern

<tr class="even"><td><div class="col1"><a href="/fhem?detail=dropdownTest">dropdownTest</a></div></td>
<td informId="dropdownTest"><div id="dropdownTest"  class="col2">4</div></td>
<td colspan='2'><form method="post"><input type="hidden" name="arg.dropdownTest" value="state"/><input type="hidden" name="dev.dropdownTest" value="dropdownTest"/><input type="hidden" name="room" value="Test"/><select onchange="submit()" id="dropdownTest-state" informId="dropdownTest-state" name="val.dropdownTest" class="dropdown"><option value='0'>0</option>
<option value='2'>2</option>
<option selected="selected" value='4'>4</option>
<option value='6'>6</option>
</select><input type="hidden" name="cmd.dropdownTest" value="set"/></form></td>
</tr>
</table>
</td></tr>

Hier wird durch das submit des Forms beim onChange ein Neuladen der Seite nach absenden des Formulars ausgelöst.

Ich habe durch Anpassen der beim onChange aufgerufenen Methode statt eines Posts nun ein GET daraus gemacht, dem der aktuell gewählte Wert mitgegeben wird.

Code Auswählen Erweitern

onchange="FW_cmd('/fhem?XHR=1&cmd.dropdownTest=set dropdownTest  '+ this.options[this.selectedIndex].value+ ' &room=Test')"

Jetzt ist aber noch folgendes offen:

1. an welcher Stelle wird das Select mit den options im fhemweb definiert. Habe schon in 01_FHEMWEB.pm geschaut aber nix gefunden.
2. ich bin mir nicht sicher ob das nur für den state eines devices funktioniert oder aber auch für andere Readings

Ich hoffe Rudi kann hierzu etwas sagen..
Danke.

[rudolfkoenig]

Die zustaendige Stelle in 01_FHEMWEB.pm ist in FW_dropdownFn, und der ist in $data{webCmdFn} eingetragen, als Fallback.
FW_dropdownFn ist fehlerhaft (verwendet form, was in einem weiteren form sein kann, was IE stoert) und ueberkompliziert, und ich wuerde es heute als javascript-only bauen. Alle webCmdFn sind noch doppelt angelegt, einmal in FHEMWEB und einmal in JavaScript, die FHEMWEB Versionen muessten eigentlich alle rausfliegen.

Allerdings habe ich gerade nicht die Muße alles umzubauen, und mit allen Randbedingungen (FLOORPLAN/Raum-Ansicht,Detail-Ansicht, etc) zu testen, sorry.

[Hoschiq]

Ich habe die Methode FW_dropdownFn in 01_FHEMWEB.pm überarbeitet. Dabei habe ich das Form und die Hidden Fields entfernt.
Bei Auswahl des neuen Wertes wird ein Get zum Wert übermitteln verwendet.
Die Funktion scheint nur in der Raumsicht verwendet zu werden, in der Detailsicht wird eine andere verwendet, es muss daher dort wie bei Slider und Time der Button set und ein Page reload verwendet werden.
Mit der Modifikation verhält sich die Werteliste nun analog zu Slider und Time.

Code Auswählen Erweitern

FW_dropdownFn()
{
  my ($FW_wname, $d, $FW_room, $cmd, $values) = @_;

  return "" if($cmd =~ m/ /);   # webCmd temp 30 should generate a link
  my @tv = split(",", $values);
  # Hack: eventmap (translation only) should not result in a
  # dropdown.  eventMap/webCmd/etc handling must be cleaned up.
  if(@tv > 1) {
    my $txt;
    if($cmd eq "desired-temp" || $cmd eq "desiredTemperature") {
      $txt = ReadingsVal($d, $cmd, 20);
      $txt =~ s/ .*//;        # Cut off Celsius
      $txt = sprintf("%2.1f", int(2*$txt)/2) if($txt =~ m/[0-9.-]/);
    } else {
      $txt = ReadingsVal($d, $cmd, Value($d));
      $txt =~ s/$cmd //;
    }

    my $fpname = $FW_wname;
    $fpname =~ s/.*floorplan\/(\w+)$/$1/;  #allow usage of attr fp_setbutton
    my $fwsel;
    $fwsel = ($cmd eq "state" ? "" : "$cmd ") .
              FW_select("$d-$cmd","val.$d", \@tv, $txt,"dropdown","FW_cmd('$FW_ME?XHR=1&cmd.$d=set $d  '+ this.options[this.selectedIndex].value+ ' &room=$FW_room')");
     return "<td colspan='2'>".
      "$fwsel</td>";

  }
  return undef;
}

Der folgende HTML Code wird daraus erzeugt.

Code Auswählen Erweitern

<tr class="even"><td><div class="col1"><a href="/fhem?detail=dropdownTest">dropdownTest</a></div></td>
<td informId="dropdownTest"><div id="dropdownTest"  class="col2">4</div></td>
<td colspan='2'><select onchange="FW_cmd('/fhem?XHR=1&cmd.dropdownTest=set dropdownTest  '+ this.options[this.selectedIndex].value+ ' &room=Test')" id="dropdownTest-state" informId="dropdownTest-state" name="val.dropdownTest" class="dropdown">
<option value='0'>0</option>
<option value='2'>2</option>
<option selected="selected" value='4'>4</option>
<option value='6'>6</option>
</select></td>
</tr>

[rudolfkoenig]

Hast du es auch mit FLOORPLAN oder gesetzten csrfToken probiert? Falls ja, dann wuerde ich es einchecken.

[Hoschiq]

Mit gesetztem Token csrfToken funktioniert es.
Im Floorplan funktioniert es wie folgt: (gilt für Slider, Time und Werteliste, Lampensymbol bei on off dummy)

Nach Auswahl eines neuen Wertes wird der neue Wert gesendet via FW_cmd(). In einem parallel geöffneten Tab mit der Raumsicht oder z.B. Dashboard wird der neue Wert aktualisiert dargestellt. Der Floorplan aktualisiert allerdings nicht das ICON bzw. den angezeigten STATE.
Nach einem Reload der Seite mit dem Floorplan werden die geänderten Werte angezeigt.

Ändert man bei geöffnetem Floorplan in der Raumsicht einen Wert wird dieser im Floorplan auch nicht aktualisiert.

Zum Vergleich: bei einem Dummy mit on off und dem Lampensymbol klappt im Floorplan das Ändern des Status durch Klicken auf das Lampensymbl auch nicht. Es muss hier erst auf einen der Befehle geklickt werden, bei dem dann die Seite neu geladen wird.

Bin mir nun nicht sicher ob das im Floorplan so ok ist, allerdings ist das Verhalten bei allen genannten Elementen ja gleich.
Ich bin davon ausgegangen, dass sich der Floorplan wie z.B. die Raumsicht verhält und den STATUS selbst nachzieht bei Änderungen, was er aber nur durch einen reload hinbekommt.

[rudolfkoenig]

Ich habe auf meine Testseite auch keine Negativ-Effekte bemerkt, habs also eingecheckt.

[justme1968]

readingsGroup hat problem mit der änderung (http://forum.fhem.de/index.php/topic,14425.msg198586.html#msg198586). ich weiss aber noch nicht ob in der raumübersicht oder im floorplan oder in beidem. ich schaue mal was ich rausfinde.

[justme1968]

das problem betrifft den floorplan. vor einer weile gab es schon mal ein ähnliches problem. da lag es daran das die verschachtelten forms mal post und mal get verwendet haben. in fhemweb post und in floorplan ein get. floorplan wurde dann umgestellt auf $FW_formmethod und hat somit die gleiche method verwendet wie fhemweb und alles war gut.

der patch jetzt scheint fhemweb auf get umzustellen ohne $FW_formmethod zu ändern. d.h. fhemweb verwendet get und floorplan post. und es passt wieder nicht zusammen.

wie kann man das ganze so reparieren das nicht immer an einer stelle nachgezogen werden muss?

[justme1968]

ein einfaches setup zum testen:

Code Auswählen Erweitern

define d dummy                           
attr d setList test:1,2,3,4               
attr d room test

set d 1
                                         
define rg readingsGroup d:               
attr rg commands { 'd.state' => "test:" }
attr rg room test

im room test kann man das menü in der readingsGroup benutzen, im floorplan leider nicht mehr.

[karl0123]

Bei mir geht es in einem Raum (NICHT FLOORPLAN) auch außerhalb der Readingsgroup nicht (normales webCmd).

Es sollte über das Dropdown folgendes gesendet werden

Code Auswählen Erweitern

set <device> favorites <name>

Es wird aber (mit Firefox Konsole getesetet) folgendes gesendet:

Code Auswählen Erweitern

set <device>  <name>

(2 Leerzeichen zwischen <device> und <name>. Es fehlt also das "favorites".

[justme1968]

ich war zu schnell. zumindest dieses problem hat nichts mit dem floorplan zu tun.

es wird scheinbar wenn es nicht um state geht das commando nicht mehr ins set mit eingebaut.

wenn man den dummy von oben mit

Code Auswählen Erweitern

define dummy d
attr d setList reading:1,2,3
attr d webCmd readingdefiniert wird auch im webCmd state aktualisiert und nicht reading. hat also nichts mit der readingsGroup zu tun.