linkes Menü in Gruppen einteilen?

Begonnen von moelski, 28 Dezember 2016, 08:10:53

Vorheriges Thema - Nächstes Thema

Invers

ZitatZitat

    kann ich irgendwie ein roomicon für die 1. Ebene vergeben?

Nein. Jedenfalls nicht ohne zusaetzlichen JS-Code


Hat da schon jemand eine Lösung gefunden? Falss ja, wäre ich stark daran interessiert.
Danke.
Pi3B+ mit SSD/ Bullseye | FB7590 AX | 12 x Dect200 | CUL433+868 | SDuino | HM-LAN | 3 x Heizung FHT + FKontakte | KeyMatic + 4 FB | HM Wandtaster 2-fach m. LED | 6 x Türkont. TFK-TI | HM-Bew.-Melder innen | 3 x Smoked. HM-SEC-SD-2

DarkT

Zitat von: didi-fritz am 07 Januar 2018, 20:07:03
kann ich irgendwie ein roomicon für die 1. Ebene vergeben?

Zitat von: rudolfkoenig am 07 Januar 2018, 23:15:37
Nein. Jedenfalls nicht ohne zusaetzlichen JS-Code

Ist geplant das das möglich sein wird?

PSI69

Ich bin gestern durch Zufall darüber 'gestolpert' und habe gleich alle Raumzuordungen geändert - einfach nur Super! :)
Danke für das Feature!

Peter
FHEM 6 auf RPi 4 unter Buster mit inzwischen einem ganzen Zoo von Geräten...

roedert

Ist denn auch noch irgendwie geplant, dass man Devices auch in die "obere Gruppe" legen kann?
Wenn ich aktuell die Räume A->1 habe und A->2 werden unter A die Räume angezeigt, und im Hauptfenster dann die entsprechenden Devices.
Wenn ich einem Device jetzt den "Gruppenraum" A zuordne, wird dieser dann doppelt angezeigt - einmal als normaler Raum und einmal als aufklappbare Gruppe.

bismosa

Hallo!
Auch ich bin nach einem FHEM-Update zufällig drüber gestolpert. Geniales Feature! Schade, dass es so "unbekannt" ist  :)

Ich würde mir ja auch vorsichtig wünschen, dass man die obere Gruppe verwenden kann. Da ich noch nie mit JavaScript etc. zu tun hatte tue ich mich da aber etwas schwer. Ich habe es bisher so verstanden:
Da die Raum-Namen ja weiterhin Raum->Raum2 sind und auch so angesprochen werden, wird in der fhemweb.js
FW_treeMenu
Zeile 914
if(!ma[nxt]) {
          $(tr).before("<tr class='menuTree closed level"+i1+"' "+
              "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
              "<td><div><a href='#'>"+ta[i1]+"</a><div></div></div></td></tr>");
        }

Das extra Menü eingefügt.
Meine Idee dazu war, dass man einfach den übergeordneten Raum mit den Namen: "Raum->" anlegt. Dann könnte man an dies an dieser Stelle in etwa so machen:
if(!ma[nxt]) {
          if(ta[ta.length -1] == ""){
            $(tr).replaceWith("<tr class='menuTree closed level"+i1+"' "+
              "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
              "<td><div><a href='#'>"+ta[i1]+"</a><div></div></div></td></tr>");

          } else {
            $(tr).before("<tr class='menuTree closed level"+i1+"' "+
              "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
              "<td><div><a href='#'>"+ta[i1]+"</a><div></div></div></td></tr>");
  }
         
        }


Also wenn der Sub-Raum keinen Namen hat ist dies der Menüeintrag.
Soweit klappt es (Nur in der Anzeige). Ich habe nur keine Ahnung, woher ich den href-Link bekommen könnte. Da bin ich noch am suchen...nicht so einfach für einen Noob in JS...für die eine Zeile habe ich nen halben Tag gebraucht  :)

Vielleicht könnte sich das auch ein Profi eben mal anschauen? Oder ist die Idee müll?

Gruß
Bismosa
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

bismosa

#80
Hallo,

ich glaube ich habs hinbekommen.  8)
Tschuldigung, wenn ich irgendwelche Regeln dabei verletzt haben sollte. Ich kenne mich einfach nur sehr wenig aus...
Hier ist ein Patch: (Vielleicht gefällt es ja schon so?) Erzeugt mit WinMerge.

--- //server/rootfs/opt/fhem/www/pgm2/fhemweb.js.original Mon Oct 15 18:38:47 2018
+++ //server/rootfs/opt/fhem/www/pgm2/fhemweb.js Tue Oct 16 17:49:34 2018
@@ -912,9 +912,21 @@
       for(var i1=0; i1<ta.length-1; i1++) {
         nxt += "->"+ta[i1];
         if(!ma[nxt]) {
-          $(tr).before("<tr class='menuTree closed level"+i1+"' "+
+          if(ta[ta.length -1] == ""){
+   if($(tr).hasClass("sel")){
+ $(tr).replaceWith("<tr class='menuTreeC closed sel level"+i1+"' "+
+ "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
+ "<td><div><a href='/fhem?room="+spanTxt+"'>"+ta[i1]+"</a><div></div></div></td></tr>");
+   } else {
+ $(tr).replaceWith("<tr class='menuTreeC closed level"+i1+"' "+
+ "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
+ "<td><div><a href='/fhem?room="+spanTxt+"'>"+ta[i1]+"</a><div></div></div></td></tr>"); 
+   }
+          } else {
+            $(tr).before("<tr class='menuTreeC closed level"+i1+"' "+
               "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
               "<td><div><a href='#'>"+ta[i1]+"</a><div></div></div></td></tr>");
+   }
         }
         ma[nxt] = true;
         lst = nxt;
@@ -928,27 +940,36 @@
   if(fnd) {
     $("head").append(
       "<style>"+
-        "tr.menuTree { cursor:pointer; }"+
+        "tr.menuTreeC { cursor:pointer; }"+
+        "tr.menuTree { cursor:default; }"+
         "tr.menuTree.level1 > td > div { margin-left:10px; }"+
+ "tr.menuTreeC.level1 > td > div { margin-left:10px; }"+
         "tr.menuTree.level2 > td > div { margin-left:20px; }"+
+ "tr.menuTreeC.level2 > td > div { margin-left:20px; }"+
         "tr.menuTree.level3 > td > div { margin-left:30px; }"+
+ "tr.menuTreeC.level3 > td > div { margin-left:30px; }"+
         "tr.menuTree.open { font-weight: bold; }"+
+ "tr.menuTreeC.open { font-weight: bold; }"+
         "tr.menuTree > td > div > div { "+
           "display:inline-block; width:1em; height:1em; float:right;"+
           "background-size: contain; background-repeat: no-repeat;"+
         "}"+
+ "tr.menuTreeC > td > div > div { "+
+          "display:inline-block; width:1em; height:1em; float:right;"+
+          "background-size: contain; background-repeat: no-repeat;"+
+        "}"+
       "</style>");
     var t = $("div#menu table.room");
     $(t).find("tr[data-mTree]").not(".level0").hide();
-    $(t).find("tr.menuTree").click(function(){treeClick(this)});
-    $(t).find("tr.menuTree > td > div > div")
+    $(t).find("tr.menuTreeC").click(function(){treeClick(this)});
+    $(t).find("tr.menuTreeC > td > div > div")
         .css("background-image", "url('"+FW_arrowRight+"')");
     var selRoom = $("div#content").attr("room");
     if(selRoom) {
       var ta = selRoom.split("->"), nxt="";
       for(var i1=0; i1<ta.length-1; i1++) {
         nxt += FW_escapeSelector("->"+ta[i1]);
-        treeClick($(t).find("tr.menuTree[data-nxt="+nxt+"]"));
+        treeClick($(t).find("tr.menuTreeC[data-nxt="+nxt+"]"));
       }
     }
   }
@@ -965,8 +986,12 @@
         .hide().addClass("closed");
       $(el).find("div>div").css("background-image", "url('"+FW_arrowRight+"')");
     }
-    $(el).toggleClass("closed");
-    $(el).toggleClass("open");
+ //Nur bei aufkappenden Menüs (sonst Festtschrift)
+ if ($(el).find("div>div").length > 0){
+ $(el).toggleClass("closed");
+ $(el).toggleClass("open");
+ }
+   
   };
}


Was ich jetzt eigentlich gemacht habe (hier ein paar Kommentare):

if(ta[ta.length -1] == ""){ //Wenn der Raum mit "->" endet (also das letzte Element im Array leer ist), ist dies der Eltern-Knoten
  if($(tr).hasClass("sel")){ //Wenn ausgewählt auch die class "sel" mit hinzufügen (Dann funktioniert auch die Markierung des Eltern-Knotens)
$(tr).replaceWith("<tr class='menuTreeC closed sel level"+i1+"' "+
"data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
"<td><div><a href='/fhem?room="+spanTxt+"'>"+ta[i1]+"</a><div></div></div></td></tr>"); //den href füge ich jetzt so hinzu...ist das ok?
  } else {
$(tr).replaceWith("<tr class='menuTreeC closed level"+i1+"' "+
"data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
"<td><div><a href='/fhem?room="+spanTxt+"'>"+ta[i1]+"</a><div></div></div></td></tr>");  //den href füge ich jetzt so hinzu...ist das ok?
  }
          } else {  //der bisherige Weg...funktioniert weiterhin!
            $(tr).before("<tr class='menuTreeC closed level"+i1+"' "+
              "data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
              "<td><div><a href='#'>"+ta[i1]+"</a><div></div></div></td></tr>");
  }


Hier habe ich die Styles hinzugefügt "menuTreeC". So kann ich den Cursor nur beim "Eltern-Knoten" als pointer setzen. Mich persönlich hatte es beim testen gestört, dass man auch neben einen Texteintrag klicken konnte ohne das was passierte.

$("head").append(
      "<style>"+
        "tr.menuTreeC { cursor:pointer; }"+
        "tr.menuTree { cursor:default; }"+
        "tr.menuTree.level1 > td > div { margin-left:10px; }"+
"tr.menuTreeC.level1 > td > div { margin-left:10px; }"+
        "tr.menuTree.level2 > td > div { margin-left:20px; }"+
"tr.menuTreeC.level2 > td > div { margin-left:20px; }"+
        "tr.menuTree.level3 > td > div { margin-left:30px; }"+
"tr.menuTreeC.level3 > td > div { margin-left:30px; }"+
        "tr.menuTree.open { font-weight: bold; }"+
"tr.menuTreeC.open { font-weight: bold; }"+
        "tr.menuTree > td > div > div { "+
          "display:inline-block; width:1em; height:1em; float:right;"+
          "background-size: contain; background-repeat: no-repeat;"+
        "}"+
"tr.menuTreeC > td > div > div { "+
          "display:inline-block; width:1em; height:1em; float:right;"+
          "background-size: contain; background-repeat: no-repeat;"+
        "}"+
      "</style>");


Und hier nur hinzufügen, wenn es ein Eltern-Knoten ist.

$(t).find("tr.menuTreeC").click(function(){treeClick(this)});
    $(t).find("tr.menuTreeC > td > div > div")
        .css("background-image", "url('"+FW_arrowRight+"')");
    var selRoom = $("div#content").attr("room");
    if(selRoom) {
      var ta = selRoom.split("->"), nxt="";
      for(var i1=0; i1<ta.length-1; i1++) {
        nxt += FW_escapeSelector("->"+ta[i1]);
        treeClick($(t).find("tr.menuTreeC[data-nxt="+nxt+"]"));
      }
    }


Fettschrift ebenfalls nur beim Eltern-Knoten.

//Nur bei aufkappenden Menüs (sonst Festtschrift)
if ($(el).find("div>div").length > 0){
$(el).toggleClass("closed");
$(el).toggleClass("open");
}


Wie es funktioniert:
Wie bisher...wenn man aber einen Raum "Hauptraum->" anlegt, wird dies der Eltern-Knoten der auch angeklickt werden kann.
Wenn man auf den Pfeil klickt, klappt man nur den Raum aus. Aufgerufen wird der Raum "nur" mit einem Klick auf die Beschriftung. (Wie bei allen anderen Räumen auch).
Also:

Ebene1->,
Ebene1->E1_Eintrag1
Ebene1->E1_Eintrag2
Ebene1->Ebene2->
Ebene1->Ebene2->E2_Eintrag1
Ebene1->Ebene2->E2_Eintrag2
Ebene1->Ebene2->Ebene3->
Ebene1->Ebene2->Ebene3->E3_Eintrag1
Ebene1->Ebene2->Ebene3->E3_Eintrag2

Dann sieht es so aus wie im Screenshot.

Was meint ihr?

Gruß
Bismosa

[edit]
Hier noch ein bisschen Text für die Commandref(commandref_frame_DE.html)

   Mit -&gt; werden R&auml;ume strukturiert, z.Bsp. OG-&gt;Schlafzimmer<br>
   Soll in dem &uuml;bergeordnetem Raum das Ger&auml;t hinzugef&uuml;gt werden, muss dies mit -&gt; enden. z.Bsp.<br>
   OG-><br>
   OG->Schlafzimmer<br>
   OG->Plots-><br>
   OG->Plots->Stromverbrauch<br>
   Resultierendes Men&uuml;:<br>
   OG<br>
   &nbsp;&nbsp;|-Schlafzimmer<br>
   &nbsp;&nbsp;|-Plots<br>
   &nbsp;&nbsp;&nbsp;&nbsp;|-Stromverbrauch<br>
   </li><br>

Vielleicht lässt sich das noch besser erklären?
Englisch:

   The -&gt; string is considered as a structure separator for rooms, e.g. "1st. floor-&gt;Master bedroom".
   Should the device be added to the structure node it must be end with -&gt;. e.g.
   1st. floor-><br>
   1st. floor->Master bedroom<br>
   1st. floor->Plots-><br>
   1st. floor->Plots->Power Consumption<br>
   Resulting menu:<br>
   1st. floor<br>
   &nbsp;&nbsp;|-Master bedroom<br>
   &nbsp;&nbsp;|-Plots<br>
   &nbsp;&nbsp;&nbsp;&nbsp;|-Power Consumption<br>
   </li><br>

Sorry...mein Englisch ist müll  ;)

[/edit]
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

choetzu

Hallo zusammen,

Sehr cool, dieses Feature. Wenn ich mich richtig durchgelesen habe dann kann man die Hierarchie mittels

Attr WEB sortRooms System System->Plots MQTT

realisieren. Bei mir geht es nicht. Es zeigt die 3 Räume System TEST un MQTT untereinander.

Fehlt noch ein Code?

Danke und lg c
Raspi3, EnOcean, Zwave, Homematic

Kai-Alfonso

#82
Zitat von: choetzu am 21 Oktober 2018, 22:48:39
Hallo zusammen,

Sehr cool, dieses Feature. Wenn ich mich richtig durchgelesen habe dann kann man die Hierarchie mittels

Attr WEB sortRooms System System->Plots MQTT

realisieren. Bei mir geht es nicht. Es zeigt die 3 Räume System TEST un MQTT untereinander.

Fehlt noch ein Code?

Danke und lg c

Ich meine, es gibt Probleme mit dem Leerzeichen. Versuche mal

Attr WEB sortRooms System System->Plots.MQTT

Sorry,  jetzt erst gelesen, deswegen der Edit

Ich meine, sortRooms sortiert die Reihenfolge der Räume nur. Du müsstest ein attr $DEVICENAME room System System->Plots.MQTT machen. (Punkt  = Leerzeichen)
Raspi2|nanoCul433|nanoCul868|CCU2
Energie-USBZähler|homebrew HM Devices
DBLog|DBRep|Homematic|Baumarktsteckdosen
Hue|Webcams mit DS-Station (Synology)|Bewegungsmelder|Rollladen|Schalter (IT|HM)

bismosa

Hallo,

ich wüsste nicht, ob dies mit sortRooms gehen würde. (Damit habe ich bisher noch nicht gearbeitet)

Es geht bisher auf jeden Fall über den Raum also:
Attr <Device> room System->Plots MQTT

Das was ich vorher geschrieben habe ist noch nicht weiter eingecheckt.

@rudolfkoenig
So wie ich es bisher gelesen habe bist Du start beschäftigt mit dem f18 (vielen Dank dafür!). Da habe ich jetzt auch gelesen, dass Du das Menü dorthin transferieren möchtest?
Ich möchte die Änderung nicht selbst einchecken. Dafür ist mir das eine zu grundsätzliche Funktion und sollte nur von einem Profi gemacht werden. Wäre aber schön, wenn Du Dich mal kurz dazu äußern könntest. Vielleicht ist das ja auch Schwachsinn, was ich da gemacht habe...dann brauche ich mir da keine weitere Gedanken zu machen...und stempel es einfach mal als Versuch ab :)

Gruß
Bismosa
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

rudolfkoenig

ZitatDa habe ich jetzt auch gelesen, dass Du das Menü dorthin transferieren möchtest?
Das muss ein Missverstaendnis sein, kannst du mir die Stelle zeigen?

ZitatIch möchte die Änderung nicht selbst einchecken.
Das ist beruhigend, bei Erteilung der Schreibrechte auf dem Quellcode wird darauf hingewiesen, dass man nur die eigenen Dateien modifizieren darf, andere Modifikationen muessen als Patch dem Maintainer im Forum geschickt werden.

ZitatWäre aber schön, wenn Du Dich mal kurz dazu äußern könntest.
Ist auf meiner TODO Liste, ist aber wg. der Groesse der Aenderung, Aufwand fuer die Tests, und Relevanz weiter nach hinten gerutscht.

bismosa

Hallo!
Vielen Dank für die Rückmeldung!

f18.js Zeile 4
Zitat// TODO: hierMenu+Pin,SVGcolors,floorplan
Dann ist das ein Missverständnis. Kein Problem.

ZitatDas ist beruhigend, bei Erteilung der Schreibrechte auf dem Quellcode wird darauf hingewiesen, dass man nur die eigenen Dateien modifizieren darf, andere Modifikationen muessen als Patch dem Maintainer im Forum geschickt werden.
Das hatte ich auch nie vor! Sorry.

ZitatIst auf meiner TODO Liste
Danke für die Rückmeldung! Bitte kein Stress deswegen! Ich bin blutiger Anfänger und habe nur mal ein wenig getüftelt...
Ich wollte mir in dem Zusammenhang auch noch das Zusammenspiel mit den RoomIcons anschauen und ob man da nicht noch mehr "optimieren" kann. Eigentlich finde ich es nicht richtig, das der Html-Code ersetzt wird. Eher in die Richtung addClass etc....aber da bin ich noch nicht weiter gekommen...und wusste dann auch nicht, ob sich der Aufwand lohnt. :)

Vielen Dank!!!!

Gruß
Bismosa
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

Dirk070

Hallo zusammen,

auch ich bin erst jetzt über dieses coole Feature gestolpert, klasse!!

Eine Frage dazu, kann ich die Elemente auf der obersten Ebene sortieren?
Ich habe es mit sortRooms im WEB versucht, das klappt aber bei mir nicht....

Weder so
attr sortRooms Zentrale Status EG-> OG-> DG UG-> System->

noch so
attr sortRooms Zentrale Status EG OG DG UG System

Vielen Dank vorab und schöne Grüße
Dirk

Invers

aber so:
Wohnung->Wohnzimmer Wohnung->Schlafzimmer Wohnung->Küche
Pi3B+ mit SSD/ Bullseye | FB7590 AX | 12 x Dect200 | CUL433+868 | SDuino | HM-LAN | 3 x Heizung FHT + FKontakte | KeyMatic + 4 FB | HM Wandtaster 2-fach m. LED | 6 x Türkont. TFK-TI | HM-Bew.-Melder innen | 3 x Smoked. HM-SEC-SD-2

Dirk070

Ah ok, also müssen alle Elemente inkl. der Unterelemente sortiert werden. Probiere ich aus, Danke Dir!!

xanker

Zitat von: Dirk070 am 08 August 2019, 12:33:52
Ah ok, also müssen alle Elemente inkl. der Unterelemente sortiert werden. Probiere ich aus, Danke Dir!!
Als Alternative mache ich mal Werbung für meinen Style: https://forum.fhem.de/index.php/topic,101749.0.html
Damit kann man alle Menü-Einträge (nicht nur Räume) per Drag'n'Drop' sortieren  :)
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...