Material Design Widgets: Top App Bar Widget

[Negalein]

@horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

View Index

da ist was faul.
Erst wenn ich die TopAppBar neu einfüge, funktionierts.

Probier mal das Widget der TopAppBar (Objekt-ID anpassen)

[{"tpl":"tplVis-materialdesign-TopAppBar-Navigation","data":{"oid":"0_userdata.0.MaterialDesign.TopAppBar.topappbar","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","navItemCount":"1","navDefaultValue":"0","topAppBarLayout":"dense","titleTopAppBar":"Material Design Widgets","colorTopAppBarTitle":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.title;dark:vis-materialdesign.0.colors.dark.top_app_bar.title; mode === \"true\" ? dark : light}","colorTopAppBarBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.background;dark:vis-materialdesign.0.colors.dark.top_app_bar.background; mode === \"true\" ? dark : light}","titleFont":"{vis-materialdesign.0.fonts.top_app_bar.title}","titleFontSize":"{vis-materialdesign.0.fontSizes.top_app_bar.title}","topAppBarZ_index":"2000","vibrateTopAppBarOnMobilDevices":"50","drawerLayout":"modal","drawerItemLayout":"standard","listItemDividerStyle":"standard","z_index":"1000","showHeader":"true","headerLabel":"<h4 class='mdc-drawer__title'>Material Design Widgets</h4><h6 class='mdc-drawer__subtitle'>by Scrounger</h6>","showLabels":"true","listItemAlignment":"left","listItemTextFont":"{vis-materialdesign.0.fonts.top_app_bar.item}","listItemTextFontDisabled":"{vis-materialdesign.0.fonts.top_app_bar.item_disabled}","listItemTextSize":"{vis-materialdesign.0.fontSizes.top_app_bar.item}","listItemHeaderFont":"{vis-materialdesign.0.fonts.top_app_bar.header}","listItemHeaderTextSize":"{vis-materialdesign.0.fontSizes.top_app_bar.header}","backdropLabelBackgroundHeight":"30","vibrateDrawerOnMobilDevices":"0","colorDrawerBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.menu_background;dark:vis-materialdesign.0.colors.dark.top_app_bar.menu_background; mode === \"true\" ? dark : light}","colorDrawerItemBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_background;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_background; mode === \"true\" ? dark : light}","colorDrawerHeaderBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.header_background;dark:vis-materialdesign.0.colors.dark.top_app_bar.header_background; mode === \"true\" ? dark : light}","colorListItemHover":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_hover;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_hover; mode === \"true\" ? dark : light}","colorListItemSelected":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_selected;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_selected; mode === \"true\" ? dark : light}","colorListItemText":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_text;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_text; mode === \"true\" ? dark : light}","colorListItemTextSelected":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_text_selected;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_text_selected; mode === \"true\" ? dark : light}","colorListItemTextDisabled":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_text_disabled;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_text_disabled; mode === \"true\" ? dark : light}","colorListItemIconDisabled":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon_disabled;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon_disabled; mode === \"true\" ? dark : light}","colorListItemHeaders":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.header_text;dark:vis-materialdesign.0.colors.dark.top_app_bar.header_text; mode === \"true\" ? dark : light}","colorListItemDivider":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_divider;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_divider; mode === \"true\" ? dark : light}","colorSubItemToggleIcon":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon_toggle;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon_toggle; mode === \"true\" ? dark : light}","colorDrawerbackdropLabelBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_backdrop_background_text_off;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_backdrop_background_text_off; mode === \"true\" ? dark : light}","colorDrawerbackdropLabelBackgroundActive":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_backdrop_background_text_on;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_backdrop_background_text_on; mode === \"true\" ? dark : light}","drawerSubItemLayout":"standard","listSubItemDividerStyle":"standard","colorListSubItemDivider":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_divider;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_divider; mode === \"true\" ? dark : light}","listSubItemAlignment":"left","listItemSubTextFont":"{vis-materialdesign.0.fonts.top_app_bar.subItem}","listSubItemTextSize":"{vis-materialdesign.0.fontSizes.top_app_bar.subItem}","listItemSubTextFontDisabled":"{vis-materialdesign.0.fonts.top_app_bar.subItem_disabled}","showSubItemsLabels":"true","colorDrawerSubBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_background_all;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_background_all; mode === \"true\" ? dark : light}","colorDrawerSubItemBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_background;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_background; mode === \"true\" ? dark : light}","colorListSubItemHover":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_hover;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_hover; mode === \"true\" ? dark : light}","colorListSubItemSelected":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_selected;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_selected; mode === \"true\" ? dark : light}","colorListSubItemText":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_text;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_text; mode === \"true\" ? dark : light}","colorListSubItemTextSelected":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_text_selected;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_text_selected; mode === \"true\" ? dark : light}","colorDrawerbackdropSubLabelBackground":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_backdrop_background_text_off;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_backdrop_background_text_off; mode === \"true\" ? dark : light}","colorDrawerbackdropSubLabelBackgroundActive":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.subItem_backdrop_background_text_on;dark:vis-materialdesign.0.colors.dark.top_app_bar.subItem_backdrop_background_text_on; mode === \"true\" ? dark : light}","iconDrawer0":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","iconDrawerColor0":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility0":"hide","iconDrawer1":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","iconDrawerColor1":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility1":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"0px","top":"0px","width":"972px","height":"56px"},"widgetSet":"materialdesign"}]

[Glasfaser]

@horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

Der Wert sticky und auto kommen nicht in CSS Allgemein rein .

      "style": {

        "left": "0px",

        "top": "0px",

        "width": "967px",

        "height": "48px",

        "cursor": "auto",

        "opacity": "",

        "position": "sticky",

EDIT :

und ein html Widget ist in der mitte vom View Index ohne Inhalt plaziert .
Das heißt ,es befinden sich ein drittes Widget in dem Start View ohne nutzen !

    "e00003": {

      "tpl": "tplHtml",

      "data": {

[Negalein]

@glasfaser sagte in Material Design Widgets: Top App Bar Widget:

Der Wert sticky und auto kommen nicht in CSS Allgemein rein

Stimmt, soweit hab ich garnicht geschaur!

[Oli]

@chilihead
Welche Warnbutton meinst du?

[Horst Böttcher]

@negalein @Glasfaser

Ok danke euch

Der Wert sticky und auto kommen nicht in CSS Allgemein rein

Genau da war der Fehler jetzt geht es
und das lehre Feld hab ich auch entfernt das war noch ein Überbleibsel vom alten View

[CKMartens]

@scrounger sagte in Material Design Widgets: Top App Bar Widget:

@ckmartens
Versuch davor Mal noch das Widget komplett neu zu erstellen

Guten Morgen,
ich bin leider erst gestern dazu gekommen mir alles anzusehen. Ich habe das Widget gelöscht und nochmal neu angelegt. Diesmal gingen "nur" die letzten drei Einträge nicht.
Erst als ich im View in WIdget 8 alle Leerzeilen mit Dummyeinträge gefüllt habe, die View Instanz und den Browser neu gestartet hatte ging es.
In der Browser Entwicklerkonsole wird dieser Hinweis angezeigt:

DevTools failed to load SourceMap: Could not load content for http://iob1.martensnetz.de:8082/lib/js/socket.io.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Danke für eure Hilfe auch an @Glasfaser

[Glasfaser]

@ckmartens

Dies ist kein Fehler vom Widget ,

lese hier :

https://forum.iobroker.net/topic/34645/vis-reconnect-immer-öfter-immer-länger/15

[CKMartens]

@glasfaser Danke für die Hilfe und Info

[babl]

@ckmartens habe ein problem nach dem update auf den js controller schaltet die top app bar die links zu den anderen views nicht mehr, habe ich da was zerschossen?

Alles Gut habe die Objekt ID gelöscht, geht wieder.

Trotzdem bekomme ich im log einen Fehler web.0 2021-02-19 18:53:08.221 warn (14345) State "nothing_selected" has no existing object, this might lead to an error in future versions

und da ich in der app bar "Nothing-selected" drin stehen habe denke ich mal daß es dies ist, denn als ich das gelöscht habe dann war die warnmeldung weg aber die navigation ging auch nicht mehr , wer kann mir denn da weiterhelfen?

[Scrounger]

@babl
siehe https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/26 und folgende

[babl]

@scrounger danke das wars, aber warum daß man sehen kann wie oft die aufgerufen wurde, irgendwie habe ich das beim einrichten nicht gecheckt hab mir immer schon gedacht was da wohl reinkommt?

Danke Warnmeldungen sind weg.

[IOBaer]

Hallo zusammen,

sehe ich das richtig, dass das Widget bei mehreren Usern, die gleichzeitig die VIS nutzen sollen, nicht sinnvoll ist, weil die Anzeige - wegen des Datenpunktes - bei allen Usern immer identisch wäre?

[BamBam89]

Erstmal Herzlichen Dank an @Scrounger für die tolle Arbeit!!

Ich hätte aber eine Frage. Ich nutze derzeit die Top App Bar.
Dort gibt es vier Elemente Rum Vodka... etc

Ich habe allerdings zwei Views Rum vielleich auch mal 3 oder 4. Der Einfachheit halber, nenn wir diese mal Rum_Start; Rum_1; Rum_2
Nun kann ich über die Top App Bar in Rum_Start springen. Soweit funktioniert alles. Von Rum_Start möchte ich dann jedoch über Navigation Button die Seiten wechseln können.
Ist das möglich oder gibt das das Widget nicht her?

Gruß Christian

Edit: Verschoben da Frage Widget Einstellung betrifft

[Glasfaser]

@bambam89 sagte in Material Design Widgets: Top App Bar Widget:

Button die Seiten wechseln können.

in etwa so :
https://forum.iobroker.net/topic/41839/vis-mit-top-app-und-button-steuern/6

[BamBam89]

@glasfaser

Also wenn ich das richtig verstehe, dann ist das nicht das was ich suche.
In deinem Beispielt geht es ja scheinbar darum das Keller, Erdgeschoss, etc immer angezeigt werden soll. Das ist bei mir nicht der Fall. Ich versuche das mal bitte Bilder zu hinterfüllen.

Das sind meine Views Zumindest die ersten. Ich bin noch in der kreativen Phase :

Auf 0_1_Index liegt das Widget Top App Bar und das View in Widget 8.
Bei sind über den Datenpunkt .... Zahl für Navigation.... verbunden

Über das Menü Top App Bar kann ich nun einer meiner fünf Views besuchen

Wenn ich also auf Rum klicke, komme ich in das View 1_1_Rum

Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas), unten Links möchte ich dann gerne 1_2_Rum angezeigt bekommen.
Hier wären dann ebenfalls ein Button um wieder zurück zu kommen. Bzw. sollte es mal eine Seite 1_3_Rum geben müsste es auf 1_2_Rum natürlich zwei Button geben um entweder auf 1_1_Rum oder auf 1-3-Rum zu kommen...

Gruß

[Glasfaser]

@bambam89 sagte in Material Design Widgets: Top App Bar Widget:

Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas),

Ich habe dich schon verstanden .
Du kannst doch die Widget´s auf deine View´s einzeln platzieren ( nicht die Index View) und dort mit Blättern .
Also linker Button zu 1 ,rechter Button zu 2 . ( Er schaltet dann die View in Widget 8 um )

.

. oder meinst du beim Aufgehen der TopAppBar Liste ,das dort ein vor / zurück Button rein soll !?

[BamBam89]

@glasfaser

Ne das geht eben nicht.
Also den Button den man dort nun sieht, ist im View 1_1_Rum und verweist eigentlich auf 1_2_Rum.
Wenn ich diesen betätige passiert.

Halt Stop kommt gleich ein Uodate...

[Glasfaser]

@bambam89 sagte in Material Design Widgets: Top App Bar Widget:

Wenn ich diesen betätige passoert aber nix

Kann ich mir nicht vorstellen , habe es so mit meinen Cam´s , ich kann hin und her schalten .

Schaltet der Button von dir den Datenpunkt "Zahl für Navigation" von dir , auch mit den Werte .. 0 bis .. je nach View .

[BamBam89]

@glasfaser

Ja das macht er. Ich habe das eben noch einmal versucht. Das geht am PC!
Aber nicht auf dem Tablet.....

[Glasfaser]

@bambam89 sagte in Material Design Widgets: Top App Bar Widget:

Das geht am PC!

Aber nicht auf dem Tablet.....

und da liegt das Problem ... !

Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?