Hallo,
ich möchte den Inhalt der Spalten mit der activity des von hub ein/ausblenden.
<div class="gridster">
<ul>
<!-- 1 Spalte -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtTerrasse.htm"></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtVR_mob.htm"></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="templates/tmp_Tueren.htm"></li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
<li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Rolladen_mob.htm"></li>
<li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
<li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Multimedia_mob.htm"></li>
<li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Homestatus_mob.htm"></li>
<!-- 2 Spalte -->
<li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_Sender.htm" style="background-color:#A9F5D0" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></li>
<li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_AmazonPrime.htm" data-type="html" data-class="hub:activity" data-map-class='{"AmazonPrime":"show", ".*":"hide"}'><li>
<!-- 3 Spalte -->
<li data-row="1" data-col="11" data-sizex="5" data-sizey="9" data-template="templates/tmp_Harmony.htm" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></li>
<li data-row="10" data-col="11" data-sizex="5" data-sizey="3" data-template="templates/tmp_Activity.htm" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></li>
</ul>
</div>
Das ein/ausblenden funktioniert zwar aber irgendwie zerschießt es mir das Layout. Jemand einen Tip/Idee. Oder geht das so nicht?
Gruß
Eisix
Bei Spalte 2 hast du ein <li> nicht geschlossen. Vielleicht hilft das schon.
@Paul: Danke für den Codereview. Man ist dann doch einfach blind.
Das bring mich etwas weiter. Wenn ich nur die zweite Spalte im Code aktiv lasse werden die Templates angezeigt allerdings nicht übereinander sondern nebeneinander. Also wird das ausgeblendete zwar nicht angezeigt aber es erscheint als leeres Feld und das was aktiv ist wird in die 3 Spalte verschoben.
Sobald ich die 3 Spalte im Code aktiviere zerschießt es wieder alles.
Irgendwas passt da noch nicht.
Gruß
Eisix
Ich sehe den Fehler zwar auch nicht, aber vielleicht kannst du mir beim html Widget weiterhelfen ...
Ich möchte abhängig vom Inhalt des Dummys ActiveMenu ein anderes Menü anzeigen
<div data-template="includes/menuMain.inc" data-type="html" data-class="ActiveMenu:state" data-map-class='{"main":"show",".*":"hide"}'></div>
<div data-template="includes/menuSubRooms.inc" data-class="ActiveMenu:state" data-map-class='{"subrooms":"show",".*":"hide"}'></div>
Statt des Hauptmenüs wird allerdings alles angezeigt, wenn ActiveMenu "main" ist !?
Hallo,
in der zweiten Zeile fehlt data-type='html"
Gruß
Eisix
danke ::)
Jetzt funktioniert es - fast. Wenn die Seite gerade geladen wurde (dann setze ich im body onload den Inhalt von ActiveMenu auf "main") wird beim Click auf einen Menüpunkt der Inhalt von ActiveMenu geändert (s. Toast Message in Bild 1 - im FHEMWEB ist es auch geändert), aber das Menü erscheint erst nach einem erneuten Clicken des Icons. Bis zum nächsten reload funktioniert dann alles ...
Was genau steht in der CSS-Klasse "hide"?
Du hast nämlich in CSS zwei Möglichkeiten, Objekte nicht anzuzeigen.
- display:none - Das Objekt wird nicht angezeigt und auch kein Platz dafür reserviert
- visibility:hidden - Das Objekt wird nicht angezeigt, es wird aber der benötigte Platz dafür reserviert
visibility wäre also in deinem Fall die Lösung, wenn ich dich richtig verstanden habe.
Hallo,
habe mal beide Varianten in fhem-tablet-ui-user.css gepackt und getestet.
.myhidden {display:none}
.hidden {visibility:hidden}
<li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_Sender.htm" style="background-color:#A9F5D0" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"myhidden"}'></li>
<li data-row="1" data-col="6" data-sizex="5" data-sizey="12" data-template="templates/tmp_AmazonPrime.htm" data-type="html" data-class="hub:activity" data-map-class='{"PowerOff":"show", ".*":"myhidden"}'></li>
Sehe vom Verhalten her aber keinen Unterschied sieht immer so wie im screenshot aus. Habe ich was vergessen?
Gruß
Eisix
Mir ist leider nicht ganz klar, wie das aussehen soll. Kannst du mir bitte einen Screenshot machen, in dem das Zeug eingeblendet ist? Und markieren, was ausgeblendet werden soll?
Die Sachen auf der linken Seite sind die Standard Ansicht. Wenn der User über ein Circlemenu den Harmony Hub auf eine andere Aktion schaltet(reading für den Classchanger) soll rechts ein entsprechendes Fernbedienungslayout erscheinen. Der eigentliche Gridster ist 3 mal so breit wie der am Handy sichtbare Bildschirm, somit kann man dann durch die 3 spalten wischen.
Hoffe das ist so verständlich.
Gruß
Eisix
Ok, hab's verstanden. Und gerade ausprobiert. Scheint nicht zu funktionieren. Das Gridster-HTML wird - wie's aussieht - aufgebaut, bevor du's manipulieren kannst. Um zu erreichen, was du machen möchtest, müsstest du wohl das HTML mit JavaScript manipulieren.
Oder, was wahrscheinlich erfolgsversprechender ist, ein Gridster-Element nehmen und darin <div>s austauschen.
Also zweite und dritte Spalte in einem <li> vereinen und den Inhalt der beiden bisherigen Spalten in ein <div class="inline"> umbauen.
Verstehst du, was ich meine? Bzw. hab ich verstanden, was du meinst?
Also den Classchanger dann innerhalb des <li> laufen lassen wie es dt2510 bei seinem Menue hat?
Ja, genau. Hab ich übersehen, dass er das so macht.
@Eisix wie macht du die Icons mehrfarbig und nur grau?
@TWART016
data-classes='["","faded"]
<div class="round top-narrow grow-1 inline" data-type="image" data-device="rr_XXXX" data-state-get="state" data-states='["((home)|(gotosleep))","((absent)|(gone))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Minion-Hello-icon.png"></div>
Gruß
Eisix
Hallo,
kriege es nicht hin.
index.html
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtTerrasse.htm"></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtVR_mob.htm"></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="templates/tmp_Tueren.htm"></li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
<li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Rolladen_mob.htm"></li>
<li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
<li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Multimedia_mob.htm"></li>
<li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Homestatus_mob.htm"></li>
<li data-row="1" data-col="6" data-sizex="10" data-sizey="12" data-template="Switch.htm"></li>
</ul>
</div>
</body>
Switch.htm
<div data-template="templates/tmp_Fernsehen_mob.htm" data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"hide"}'></div>
<div data-template="templates/tmp_AmazonPrime_mob.htm" data-type="html" data-class="hub:activity" data-map-class='{"AmazonPrime":"show", ".*":"hide"}'></div>
Es wird nur die leere Box angezeigt. Ist das wieder das template im template Problem?
Gruß
Eisix
Kann ich nicht sagen. Aber probier's einfach mal ohne Template.
Zitat von: Eisix am 23 April 2018, 13:21:18
Es wird nur die leere Box angezeigt. Ist das wieder das template im template Problem?
Template in Template geht nicht, lässt sich aber einfach beheben:
statt data-template= nimmst du data-url= und packst das ganze mit data-type="include" in einen <DIV> Tag, falls es dort nicht sowieso schon steht. Also z.B.
<div data-type="html" data-class="hub:activity" data-map-class='{"AmazonPrime":"show", ".*":"hide"}'>
<div data-type="include" data-url="templates/tmp_AmazonPrime_mob.htm"></div>
</div>data-type="html" muss dann aussen um das <DIV> herum...
Habe jetzt gerade ohne zweites Template und mit include probiert und beide Varianten funktionieren.
Nicht ganz so elegant wie das <li> ausblenden aber nahe dran. Die dritte Spalte zeigt dann halt eine leere Box.
Danke!
Gruß
Eisix