SlideIn-Menü für temporäre Anzeigen?

[tomster]

Servus zusammen!

Nachdem ich immer noch am Layout für meinen Smart Mirror bastle, hab ich mir gerade Gedanken dazu gemacht, wie man Werte anzeigen lassen kann, die zwar nur zeitweise dann aber am Liebsten "sticky" angezeigt werden sollen.
Vielleicht kurz erläutert:
Wenn ich z.B. Pulled Pork grille oder den Timer am Herd eingeschaltet habe, dann würde ich die übermittelten Temperaturwerte/ Timer-Status gerne auf dem FTUI angezeigt bekommen. Dann kann man im Vorbeigehen immer Mal einen Blick drauf werfen. Klar, man könnte jetzt eine Gridster-Kachel dafür verwenden, aber dann muss irgendein anderes Widget für diesen Zeitraum weichen. Ein PopUp fände ich nicht sinnvoll, weil sich dieses dann mit anderen eventuell in diesem Zeitraum auftretenden PopUps (Kamerabild Klingel, Telefonanrufe, etc.) in die Quere kommen könnte. Mehrer Popups an der gleichen Stelle finde ich nicht soo geil. Schaut dann irgendwie aus wie bei Windows, wenn man bei einem "Systemfehler" die 1.000 PopUps nicht wegclicken kann Noch dazu es bei (m)einem SmartMirror "konzeptbedingt" gar keine Möglichkeit gibt auf Touchgesten in der Mitte des Spiegels zu reagieren.

Drum bin ich auf den Ansatz eines SlideIn-Widgets gekommen. Meine Idee war, dass aus FHEM ein Trigger gesetzt wird (z.B. Thermometer an), der ein SlideIn-Layer ausklappen lässt. Quasi wie ein "Flag", das auf einem Z-Layer über das normale Gridster-Layout geschoben wird. In dem "in-geslideten" Fenster kann man dann die entsprechenden Widgets platzieren. Ich würde dieses Menü semi-transparent halten, damit man eventuell darunterliegende Widgets noch lesen kann. Das bisherige SlideIn-Menü des Mobile FTUIs schiebt ja das aktuelle Fenster nach rechts. Das wäre in für meinen Spiegel natürlich nicht gerade ideal, weil dadurch Teile des eigentlichen Layouts verloren gehen.

Ich suche etwas von der Art her wie hier: https://jsfiddle.net/elmouse19/ggx7jy76/

Noch ein bissl mit opacity, top und height spielen, dann kann ich zumindest ein SlideIn genau da positionieren wo ich es haben möchte.

Ich vermute, das jetzige Widget bietet diese Funktion nicht out-of-box. Es wird wohl immer das eigentliche ("Z0-Layer") seitlich geschoben, oder?.

Hat jemand eventuell eine andere Idee, wie man eine solche Anzeige vielleicht auch mit schon bestehenden Widgets realisieren könnte?

[eki]

Das lässt sich, zumindest für Widgets die data-classes unterstützen (z.B. Labels) machen. Folgendes Beispiel für ein Label:

Code Auswählen Erweitern


<div data-type="label"
    data-device="dummyTest"
    data-classes='["slideoutHidden","slideoutVisible"]'
    data-get="value"
    data-limits-get="visible"
    data-limits='["0","1"]'
>
</div>


Das Label zeigt das Reading "value" eines Dummies mit Namen dummyTest an. Ein zweites reading bestimmt, ob das label sichtbar ist oder nicht (könnte man auch direkt über den Inhalt von 'value' machen, dann müsste eben das data-limits-get weg). Die Sichtbarkeit wird über die Klassen slideoutHidden und slideoutVisible gesetzt, wenn als der Wert des Readings 'visible' auf 1 steht, dann bekommt das Objekt die Klasse slideoutVisible wenn es auf 0 steht, dann die Klasse slideoutHidden.

Die Klassen müssen in einem eingebundenen css file (z.B. fhem-tablet-ui-user.css fals Du das verwendest) definiert werden und könnten beispielsweise so aussehen (ist aber nur ein Beispiel, da kannst Du Dich beliebig austoben):

Code Auswählen Erweitern


.slideoutVisible {
width: 100%;
opacity: 1;
transition: width ease 1000ms, opacity ease 500ms;
border-color: #929292;
border-style: solid;
border-width: thin;
}
.slideoutHidden {
width: 0px;
opacity: 0;
transition: width ease 1000ms, opacity ease 500ms;
border-color: #929292;
border-style: solid;
border-width: thin;
}


Wenn Du Lust hast, kannst Du mir ja mal was zu Deinem SmartMirror erzählen, ist bei mir auch noch so ein "ToDo". Vor allem wäre ich interessiert, welches Glas/Folie Du verwendest.

[tomster]

Servus eki,

Danke für Deine Antwort. Das ginge auch mit der class hide. So habe ich es am Spiegel mit ein paar "Widgets" gemacht. Dabei kann man aber nur entweder das eine Widget oder das Andere anzeigen. Ich wollte ja, dass das Layout so bleibt wie es ist und nur im Bedarfsfall ein SlideIn vom Bildschrimrand her drübergelegt wird.

Wegen dem Spiegel:
Mein Spiegelglas habe ich aus einer Sammelbestellung im Magic Mirror Forum. Der genannte User hatte irgendwann auch einmal angekündigt einen Webshop aufziehen zu wollen. Ob das passiert ist, kann ich nicht sagen:
https://forum.fhem.de/index.php/topic,50187.msg563756.html#msg563756

Ich habe mir einfach ein recht großes Stück schicken lassen und dieses dann von meinem Glaser passend schneiden lassen. Mein Spiegelgehäuse hat abgerundete Ecken.
https://forum.fhem.de/index.php/topic,50187.msg684382.html#msg684382

In der Zwischenzeit hab ich allerdings den abgebildeten Monitor kaputt gemacht und ihn gegen einen Viewsonic VX3276-2k-mhd ausgetauscht. Der neue Monitor ist nur noch ein paar Zentimeter tief, von daher könnte das Gehäuse nun deutlich flacher gestaltet werden (das Jetzige ist 100mm hoch). Der Viewsonic ist inkl. flacher VESA-Halterung nur noch 55mm tief! Zudem hat der neue Monitor fast keinen Rahmen und kann durch Entfernen des unteren Aluprofils wirklich direkt (ohne nennenswerte Distanz) hinter den Spiegel gesetzt werden. Nur dadurch kommt der "Magic Miror"-Effekt auch gut rüber. Leider kann der neue Monitor aber kein HDMI-CEC. Damit habe ich den alten Monitor über ein Script ein und ausschalten können. In der neuen Variante wird dies nun über einen HM-Schaltaktor erledigt, der vom FHEM im Wohnzimmer gesteuert wird. Vorteil ist allerdings, dass der Viewsonic keine Energy-Saving-Abschaltung besitzt. Der bleibt an bis man ihn wieder ausschaltet (ohne nervige OSD-Einblendungen).

In meinem Gehäuse sitzen  links und rechts kleine Einbaulautsprecher und ein kleiner Verstärker, oben drauf ein PS3Eye (für Snips), ein Raspi 3 mit Browser im Kioskmode und der HM-Schaltaktor. Um zumindest eine minimale manuelle Bedienmöglichkeit zu schaffen, habe ich eine "Airbar" am unteren Spiegelrand angebracht. Die wird mit Hilfe zweier im Rahmen versenkter Neodymmagneten dann auf dem Spiegel am Platz gehalten. -> abnehmbar zum Putzen. Meine Airbar 15.6" lässt dann auf den unteren ~ 22cm Eingaben über Touchgesten zu.
https://forum.fhem.de/index.php/topic,50187.msg712062.html#msg712062

Wie im anderen Thread irgendwo geschrieben, ist mein Versuch einer Gesichtserkennung mittels OpenCV an der Performance des Pis kläglich gescheitert. Aber Snips und Touch am unteren Rand geben mir ausreichend Bedienmöglichkeiten. WAF ist noch nicht getestet; wird aber wahrscheinlich eine deutlich schwierigere Hürde, als der technische Kram

[eki]

Danke für die Info zum Spiegel, spannend.

Das mit dem Slideout müsste schon so gehen. Wenn Du folgendes div direkt auf die oberste Ebene Deiner Darstellung legst (also z.B. direkt als erstes Element in <body> und den rest der oben beschriebenen Einstellungen machst, dann hast Du ein Element, das die anderen nicht verdrängt und von links sichtbar wird oder nicht. Die Positionierung kannst Du natürlich durch top left entsprechend ändern.

Code Auswählen Erweitern


<div style="position: absolute; width: auto; top: 20px; background-color: #2A2A2A; padding: 2px 10px;"
data-type="label"
data-device="dummyTest"
data-classes='["slideoutHidden","slideoutVisible"]'
data-get="value"
data-limits-get="visible"
data-limits='["0","1"]'
>
</div>


[tomster]

Ahh, jetzt, ja. Nun hab ich glaub ich verstanden auf was Du hinaus willst.

Allerdings stimmt da noch was nicht. Denn das dann auftretenede Phänomen kann ich mir nicht erklären:

Wenn ich Dein <div> als Erstes setze (egal ob vor oder innerhalb des <gridster>-divs) dann ist vom restlichen FTUI-Layout nix mehr zu sehen. Die Transition funktioniert aber einwandfrei. Da ich dachte, dass es an irgendwelchen Z-indexes liegt, hab ich Mal ein 3D-DOM-Inspektor bemüht. Und siehe da: die FTUI-Layers erscheinen nicht einmal; sie sind quasi weg!

Setze ich das Tag aber als Letztes (also innerhalb <gridster>, nach dem letzten Widget-<div>, dann sehe ich das Layout wieder. Nur ist dann natürlich Dein <div> im untersten Z-Index und dadurch nicht zusehen.

Ach ja, nur der Ordnung halber:
Als 3D-Inspektor nutze ich diesen Link, den ich in meinem Browser als Bookmark gespeichert habe. Damit kann ich die gerade geöffnete Seite durch einfachen Klick auf das Bookmark dreidimensional inspizieren. Verlassen geht nur durch reload (am PC F5):

Code Auswählen Erweitern


javascript:void%20function(b,p){function%20l(k,c,b,e,g,d,f){return"<div%20style='position:absolute;-webkit-transform-origin:%200%200%200;"+("background:"+f+";")+("width:"+e+"px;%20height:"+g+"px;")+("-webkit-transform:"+("translate3d("+k+"px,"+c+"px,"+b+"px)")+("rotateX(270deg)%20rotateY("+d+"deg)")+";")+"'></div>"}function%20o(k,c,d,f){for(var%20j=k.childNodes,n=j.length,m=0;m<n;m++){var%20a=j[m];if(1===a.nodeType){a.style.overflow="visible";a.style.WebkitTransformStyle="preserve-3d";a.style.WebkitTransform="translateZ("+(b+(n-m)*q).toFixed(3)+"px)";var%20h=d,i=f;a.offsetParent===k&&(h+=k.offsetLeft,i+=k.offsetTop);o(a,c+1,h,i);e+=l(h+a.offsetLeft,i+a.offsetTop,(c+1)*b,a.offsetWidth,b,0,g[c%(g.length-1)]);e+=l(h+a.offsetLeft+a.offsetWidth,i+a.offsetTop,(c+1)*b,a.offsetHeight,b,270,g[c%(g.length-1)]);e+=l(h+a.offsetLeft,i+a.offsetTop+a.offsetHeight,(c+1)*b,a.offsetWidth,b,0,g[c%(g.length-1)]);e+=l(h+a.offsetLeft,i+a.offsetTop,(c+1)*b,a.offsetHeight,b,270,g[c%(g.length-1)])}}}var%20g="#C33,#ea4c88,#663399,#0066cc,#669900,#ffcc33,#ff9900,#996633".split(","),q=0.001,e="",d=document.body;d.style.overflow="visible";d.style.WebkitTransformStyle="preserve-3d";d.style.WebkitPerspective=p;var%20r=(window.innerWidth/2).toFixed(2),s=(window.innerHeight/2).toFixed(2);d.style.WebkitPerspectiveOrigin=d.style.WebkitTransformOrigin=r+"px%20"+s+"px";o(d,0,0,0);var%20f=document.createElement("DIV");f.style.display="none";f.style.position="absolute";f.style.top=0;f.innerHTML=e;d.appendChild(f);var%20j="NO_FACES";document.addEventListener("mousemove",function(b){if("DISABLED"!==j){var%20c=b.screenX/screen.width,b=(360*(1-b.screenY/screen.height)-180).toFixed(2),c=(360*c-180).toFixed(2);d.style.WebkitTransform="rotateX("+b+"deg)%20rotateY("+c+"deg)"}},!0);document.addEventListener("mouseup",function(){switch(j){case%20"NO_FACES":j="FACES";f.style.display="";break;case%20"FACES":j="NO_FACES",f.style.display="none"}},!0)}(25,5E3);

[eki]

Bei mir hat das funktioniert, aber nur in einer Testumgebung. Um das genaue zu untersuchen, bräuchte ich mal ein größeres Stück Deines HTML.

[Zippo2000]

Danke für die Info zum Spiegel, spannend.

Das mit dem Slideout müsste schon so gehen. Wenn Du folgendes div direkt auf die oberste Ebene Deiner Darstellung legst (also z.B. direkt als erstes Element in <body> und den rest der oben beschriebenen Einstellungen machst, dann hast Du ein Element, das die anderen nicht verdrängt und von links sichtbar wird oder nicht. Die Positionierung kannst Du natürlich durch top left entsprechend ändern.

Code Auswählen Erweitern


<div style="position: absolute; width: auto; top: 20px; background-color: #2A2A2A; padding: 2px 10px;"
data-type="label"
data-device="dummyTest"
data-classes='["slideoutHidden","slideoutVisible"]'
data-get="value"
data-limits-get="visible"
data-limits='["0","1"]'
>
</div>


Hallo zusammen,
sorry, dass ich den schon etwas älteren Thread ausgrabe....aber ich hatte den Code letztes Jahr auch bei mir 1:1 übernommen. Anfangs hat das slide-in wunderbar funktioniert, seit einigen Wochen allerdings nicht mehr. Das slide-in wird einfach permanent angezeigt, 'slideoutHidden' hat quasi keine Auswirkung.
Geht das bei euch noch? Hat sich hier FHEM-seitig was geändert?

Viele Grüße,
Tobias

[Zippo2000]

Hallo zusammen,

ich muss das Thema nochmal hervorholen, da es mich aktuell wieder beschäftigt und ich es einfach nicht hinbekomme 
Hat jemand eine Idee, warum das nicht mehr funktioniert?

Grüße,
Tobias