Neues Verhalten der Navbars

[Chris M.]

Seit gestern Abend ist in der Entwicklungsversion ein neues Verhalten der Navbars (genauer: der linken Navbar) enthalten. So wie es eigentlich schon immer angedacht war, nur noch nicht implementiert Und so, dass sich damit die Bedienung auf Smartphones optimieren lässt.

Je nach Wert im dynamic Attribut verhält sich diese nun unterschiedlich:

	Mobiles Gerät mit kleinem Bildschirm	Großer Bildschirm
leer	Wie auf der übergeordneten Seite, sonst: Navbar ist ein- und ausblendbar. Nach Start ist diese ausgeblendet.	Wie auf der übergeordneten Seite, sonst: Navbar ist immer eingeblendet.
true	Navbar ist ein- und ausblendbar. Nach Start ist diese ausgeblendet.	Navbar ist ein- und ausblendbar. Nach Start ist diese eingeblendet.
false	Navbar ist immer eingeblendet.	Navbar ist immer eingeblendet.

Das Ein- und Ausblenden geht über ein Wischen vom linken Rand in die Mitte bzw. umgedreht.

Die Funktionalität ist somit vergleichbar mit dem MobileMenu Plugin. Was das MobileMenu Plugin wohl (noch) mehr hat ist die Möglichkeit über "<mobilemenu>" ein Menü-Element zum Ein- und Ausblenden zu setzen, dafür gibt es dort keine Wisch-Geste.
Zumindest so weit ich es verstanden habe, da ich es nicht nutze...
=> Wer nutzt das Plugin? Was würde noch benötigt werden um das Plugin komplett durch die nun implementierte native Lösung ersetzen zu können?

[Auweia]

Hallo Chris,
ich nutze das MobileMenu in Originalversion für mein i-Phone und ein Honor. Diese Version ist aber mindestens 3-4 Jahre alt und nur mit erhöhtem Aufwand wartbar. Deshalb bin ich gerade dabei dies abzulösen und auf die Version 11.2 zu gehen. Dort habe ich ein unschönes Problem mit dem Zeilenabstand im Group Widget.
Gerne teste ich das neue Verhalten!
Ist die Entwicklerversion als Docker Image verfügbar?
VG
Albert

[Auweia]

Hallo Chris,
habe jetzt die 0.12-dev im Docker am laufen (org.label-schema.build-date=2020-02-11T18:53:32+0000).
Als Änderung habe ich jetzt in der navbar angegeben: position=left , dynamic=true. Darauf verschwindet die navbar - auch mit Wischen ist die navbar nicht mehr sichtbar. Wahrscheinlich muss ich da mehr Änderungen machen?
Muss ich das plugin mobilemenu laden? Extra custom.css?
Soll ich dir eine Video-Aufzeichnung der Mobile-App zukommen lassen, per pn?

[Chris M.]

Genau, "0.12.0-dev" bzw. generischer "testing" sollten die Container mit dem aktuellen Entwicklungsstand sein.

MobileMenu brauchst Du als Plugin nicht. Bzw. evtl. könnte es sogar schädlich sein, wenn es geladen ist - ich habe nicht ausprobiert was passiert wenn man das gleichzeitig mit lädt...

Bei einem mobilen Gerät mit Touch-Eingabe(!) sollte alles Out-of-the-Box funktionieren.
Wichtig ist wirklich vom linken Bildschirmrand aus loszuwischen, als evtl. sogar bereits außerhalb des Bildschirms anfangen und von dort wirklich horizontal nach rechts. Evtl. muss ich hier den aktiven Bereich noch etwas fein justieren, bei meinen Geräten war der aktuelle Wert aber ganz passabel.

[Auweia]

dann werde ich alles alte ausbauen...
Schick am Mobile ist vor allem noch: die Navbar links wird über die bestehende Seite gelegt. Bei Touch auf eine Page innerhalb der Navbar wird die bestehende Navbar ab dem Touch nach unten verschoben und eine weitere Navbar angezeigt (falls definiert). Nach Klick auf diese Page werden die Navbars entfernt, die Überschrift der Page als Header angezeigt. Ich kann dir gerne ein mp4 Video zipped schicken, hat aber 2,8MB..

[Chris M.]

Bei der neuen Implementierung wird bei kleinen Displays (= Smartphone) die Navbar auch über die Seite gelegt, bei großen wie bisher üblich neben den Inhalt.

Am einfachsten für's Testen erst mal eine der Demo-Configs verwenden (Demo und Demo_flat würde ich da spontan nehmen). Wenn's da wie erwartet läuft dann bei der eigenen schauen was los ist. Wenn's bei den Demos nicht funktioniert kann ich's hier hoffentlich leichter nachstellen

[Auweia]

Habe jetzt alles vom Mobilemenu (mobilemenu Plugin+Widget, spezielle custom.css) ausgebaut und es läuft! Die 1. Navbar lässt sich aus- und einblenden.
Funktioniert bisher gut, wenn man deinen Rat befolgt und von "außerhalb" anfängt.
Ich möchte nun eine 2. Navbar kaskadierend mit in die 1. Navbar einbinden z.B. Menu -> Keller -> Raum 1 .
Kann ich das realisieren? Siehe mp4 :
SVID_20200220_123326_1.zip

[Auweia]

Ich habe intensiv getestet: Das Wischen funktioniert, jedoch sollte der Bereich von links vielleicht vergrößert bzw. angepasst werden.
Falls eine 2. Navbar kaskadierend ins Spiel klommt, wird bei Abgabe von "top" in der 2. Navbar die Navbar oben gesetzt, beim Wischen von links wird die 1. unter die 2. gesetzt.
Wird bei der 2. Navbar "left" gesetzt, wird die 2. unter die 1. gesetzt, bleibt der screen leer und man muss nochmals wischen, und damit die 1. + 2. sichtbar.

[Chris M.]

Leider verstehe ich den Text nicht so ganz.

Sub-Seiten können natürlich eine eigene Navbar (bzw. eigenen Inhalt in die bestehende) hinzufügen. Je nach dem ob in der XML die Navbar vor oder nach der anderen eingetragen ist wie diese ober- oder unterhalb erscheinen.

Was ich nicht umgesetzt habe ist ein Ausklappen, so wie es im Video dargestellt ist. Wie wichtig wäre das?

[Auweia]

Das Ausklappen ist sehr schick und spart etliche touchs/Wischen. Des Weiteren bleibt mehr Raum für die Anzeige zur Verfügung
Das Ausklappen ist über die 2. Navbar in der Mobile gelöst.
Bei mir ist das Verhalten der 2. Navbar etwas anders als du oben beschreibst:
im XML ist die Reihenfolge Navbar 1 (position=left), dann kommen mehrere Navbar2s.
Die 1. Navbar ist wischbar und ok.
Wenn die 2. Navbar position=left hat, wird diese an die 1. Navbar unten angefügt
Wenn die 2. Navbar position=top hat, wird diese oben direkt nach dem Header eingefügt . Wische ich jetzt , kommt die 1. Navbar aber unterhalb der 2. Navbar, die stehen bleibt. Klicke ich jetzt auf einen anderen link in der 1. Navbar mit der position=left in der 2.Navbar, dann ist der screen leer und ich muss nochmals wischen...
Wenn ich dich richtig verstehe, dann ist nur die 1. Navbar wischbar und die 2. muss top /bottom sein?
Hier die config: visu_config_cv12_mx.zip

[Auweia]

2 kleine Ungereimtheiten sind mir noch aufgefallen:
1. im Page Widget habe ich showtopnavigation = true angegeben. Diese wird auch korrekt angezeigt. Klicke ich nun auf den Namen in der Top Navigationsleiste passiert nichts, der Screen ist/bleibt leer. Ich muss mit Wischen beginnen und dann wird die 1. Navbar angezeigt. Das ist etwas unschön..
Ich weiß nicht, ob und wie ich das beeinflussen kann: Ich möchte, dass die 1. Navbar generell eingeblendet wird, wenn ich auf diesen buttom klicke, d.h. das Verhalten sollte so sein, wie wenn ich gewischt hätte.

2. Innerhalb der 1. Navbar habe ich die Namen der aufzurufenden Subpages mit der position = left definiert. Wische ich nochmals von links nach rechts drüber, wird der Name nach rechts in die Mitte (fast) zentriert verschoben. Habe ich den Namen mit position=center definiert, wird dieser etwas nach links verschoben.
Das Verschieben passiert auch, wenn ich in der Navbar die Subpage aufrufe.

Ansonsten habe ich festgestellt, dass die CV zuverlässig und stabil läuft (ich habe bisher ohne Anbindung KNX, OH2 getestet).

Dank an Chris für die hervorragende Arbeit bei der Entwicklung der Cometvisu!
Viele Grüße
Albert

[Chris M.]

Ich habe intensiv getestet: Das Wischen funktioniert, jedoch sollte der Bereich von links vielleicht vergrößert bzw. angepasst werden.

Kannst Du in der Datei class/cv/ui/structure/pure/NavBar.js in Zeile 115 vom "touches.clientX > 20" die 20 mal vergrößern, bis Du einen Wert hast den Du optimal findest?

Bei den letzten beiden Postings #10 und #11 habe ich Schwierigkeiten den Inhalt zu verstehen, daher konnte ich leider noch keine Antwort dazu finden. Kannst Du irgendwie anders beschreiben (z.B. Screenshots, Mockup im Grafikprogramm, o.ä.) welches Verhalten Du haben möchtest - und was Du statt dessen bekommst?

[Auweia]

Habe erst jetzt wieder Zeit gefunden zum Testen:

[QUOTE=Chris M.;n1475444]
Kannst Du in der Datei class/cv/ui/structure/pure/NavBar.js in Zeile 115 vom "touches.clientX > 20" die 20 mal vergrößern, bis Du einen Wert hast den Du optimal findest?

Ich habe die Source nicht geladen, sondern nur das Image cv12-testing im Docker laufen. Ein Verzeichnis class/cv/ existiert bei mir, enthält aber nur ein script:
IconConfig.js und leider keine weiteren Unterverzeichnisse..

Zum Post 11 habe ich ein video.mp3 gemacht und bin dabei am Ende auf einen Fehler gestoßen: Screen-Navbar.zip

Beim Klick auf die Überschrift ist die CV hängen geblieben. Hier sollte der Klick auf die Überschrift wie ein Wischen wirken und die Navbar anzeigen.

[Chris M.]

Leider gibt es keine einfache Möglichkeit in der Testing-Version einen anderen Wert als 20 einzutragen. (Die komplizierte möchte ich uns ersparen )
Alternativ (Beschreibung klingt schlimmer und länger als es wirklich ist) kannst Du Dir merken ab wo es funktionieren sollte, dann in Chrome die Visu öffnen, per Strg+Shift+I den Entwicklungsmodus des Browsers öffnen und dort per Strg+Shit+M in den Geräte-Emulations-Modus wechseln.
Dort hast Du links und v.a. oben ein "Lineal" bei dem Du die Pixel-Zahl ablesen kannst an der Du klicken würdest.
(In diesem Modus kannst Du den Browser-Bereich auch "zusammenschieben" um ein kleines Gerät, wie ein hochkant gehaltenes Smartphone, zu simulieren. Auch wird da die Maus zu einem "Finger" der Touch-Events erzeugt, d.h. Du kannst hier eine Bedienung wie am Handy simulieren)

Zum Video:
Kannst Du mir noch die dafür verwendete Config-Datei mit schicken?

Und weiter oben habe ich gelesen, dass Du "position=center" verwendest.
Bei einer Navbar gibt es kein "center", das gibt es nur beim "align".
=> Ist Die verwendete Config laut Config-Check i.O.?
Wenn nicht, dann kann es seltsame Effekte geben.

[Auweia]

Gute Beschreibung für den Entwicklungsmodus!
Hier die die Config, die ich für das Video benutzte.. Diese ist fehlerfrei.
visu_config_cv12_mx (6).zip

Ja, du hast recht, es sollte "align" heißen.
In der obigen Config sind 2-stufige Navbars definiert, wie ich im Post #11 unter 1. beschrieben habe:
z.B. Start(rpi3 cv12 Mx) -> Garage -> (Tore, FBH)
Wenn ich nun Garage wische bzw. klicke, kommt die 2. Navbar mit Position "top". Das ist ok.
Im 1. Versuch wollte ich diese 2.Navbar mit align = links setzen, rechts von der 1. positionieren. Geht das überhaupt?