Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Roelli]

Hallo.

Ich habe diese auswahlmenü gebastelt:

Die Liste der Menüpunkte wird aber sehr lang werden, und ich hab nur eine bestimmte Breite zur Verfügung.
Wie schaffe ich es, dass man mit "Pfeil nach links" und "Pfeil nach rechts" Tasten die Menüpunkte verschieben kann um sie dann auszuwählen? (der Menüpunkt "System" ist im Moment z.B. nicht sichtbar)

Hier ist das Projekt:
2022-08-23-Navigation.zip

Danke!

[Homoran]

@roelli bitte keine externen Provider für Daten nutzen.
Sobald diese Quellen nicht mehr verfügbar sind wird der Thread sinnlos.

ganz abgesehen davon, dass viele aus Prinzip keine externen Links anklicken

[Roelli]

@homoran Sorry. Ich hab die Datei jetzt mittels "hochladen" hochgeladen. (hab's zuerst nicht gefunden, deswegen hatte ich's mit Dropbox hochgeladen gehabt)

[Homoran]

@roelli OK!

Wenn du das "Video" mit screen2gif machen kannst, bekommst du es auch hier hin
Dann mit "Bild hochladen"; 3. Icon von rechts

[Roelli]

@homoran Cool! Megapraktisch. Danke für die Info. Hab ich alles gemacht.

[Homoran]

@roelli DANKE!
jetzt ist alle Info an einem Platz und der Mauszeiger ist auch zu sehen.

Fehlt nur noch die Info was du da genau machst.
Welche(s) Witget(s) usw.

[BananaJoe]

@roelli Du nutzt VIS nehme ich an?
Du könntest den mittleren Teil per "View in Widget 8" darstellen.

Du hast dann also verschiedene Mini-Views welche anhand eines Zahlenwertes eines Datenpunktes eingeblendet werden:

Hauptseite:

Navigation 1:

Navigation 2:

Bedienung:

Datenpunkt:

Die beiden Buttons steuern bei mir 2 True/False Datenpunkte an - auf welche ein Script reagiert das die neue Zahl einträgt und zeitverzögert den Datenpunkt wieder auf false setzt (damit der beim drücken kurz aufleuchtet)
Nein, die beiden GIFs sind nicht synchron.

Nein, ich benutze das heute nicht mehr - warum auch immer zickt es immer irgendwann rum. Inzwischen "scrolle ich"

[Roelli]

@bananajoe Wie bekomme ich das Frame mit dem Auswahlmenü "scrollbar"? (ohne so fette Scrollbalken sehen zu müssen)

[Glasfaser]

@roelli

Oder so

.
EDIT :

Main View

{
   "settings": {
       "style": {
           "background-repeat": "no-repeat",
           "background-image": "",
           "background-size": "",
           "background-clip": "",
           "background_class": "",
           "background-color": "#000000"
       },
       "theme": "redmond",
       "sizex": "1280",
       "sizey": "800",
       "gridSize": "",
       "useBackground": false,
       "snapType": null,
       "alwaysRender": false
   },
   "widgets": {
       "e00001": {
           "tpl": "tplStatefulContainerView8",
           "data": {
               "oid": "0_userdata.0.VISMenu.VIS_SEITE",
               "g_fixed": false,
               "g_visibility": false,
               "g_css_font_text": false,
               "g_css_background": true,
               "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",
               "count": "4",
               "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,
               "contains_view_0": "Energie",
               "contains_view_1": "Wetterdaten",
               "contains_view_2": "Kameras",
               "contains_view_3": "Türkommunikation",
               "contains_view_4": "System"
           },
           "style": {
               "left": "315px",
               "top": "212px",
               "width": "635px",
               "height": "212px",
               "background-color": "#d20f0f"
           },
           "widgetSet": "basic"
       },
       "e00002": {
           "tpl": "i-vis-multi",
           "data": {
               "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",
               "iUniversalWidgetType": "State",
               "iValueType": "boolean",
               "iStateResponseTime": "0",
               "iStateResetValueTime": "0",
               "iNavWait": "100",
               "iHttpType": "iSend",
               "iPopUpBackground": "#666666",
               "iPopUpPreventClickOutside": "",
               "iPopUpShowTitle": "true",
               "iPopUpTitle": "",
               "iPopUpTitleColor": "#ffffff",
               "iPopUpCloseBtnColor": "#dc2e2e",
               "iPopUpWidth": "800",
               "iPopUpHeight": "500",
               "iPopUpHeightTitle": "50",
               "iPopUpTitleSize": "28",
               "iPopUpPosition": "center",
               "iPopUpPositionX": "0",
               "iPopUpPositionY": "0",
               "iPopUpCloseAfterSeconds": "0",
               "iPopUpCornerRadiusUL": "12",
               "iPopUpCornerRadiusUR": "0",
               "iPopUpCornerRadiusLR": "12",
               "iPopUpCornerRadiusLL": "0",
               "iPopUpShadowXOffset": "2",
               "iPopUpShadowYOffset": "2",
               "iPopUpShadowBlur": "2",
               "iPopUpShadowSpread": "1",
               "iPopUpShadowColor": "#111111",
               "iUniversalValueCount": "1",
               "iCheckType1": "iCheckDefault",
               "iValueComparison1": "equal",
               "iButtonActiveM1": "",
               "iTextColorActive1": "#ffffff",
               "iShadowColorActiveM1": "",
               "iShadowInnerColorActiveM1": "",
               "iShadowTextColorActiveM1": "",
               "iBorderColorActiveM1": "#ffffff",
               "iImgBlinkTrue1": "0",
               "iImgColorTrue1": "",
               "iHtmlTextFieldTrue1": "",
               "iButtonCol": "#48d100",
               "iButtonColHover": "",
               "iOpacityBack": "1",
               "iCornerRadiusUL": "0",
               "iCornerRadiusUR": "0",
               "iCornerRadiusLR": "0",
               "iCornerRadiusLL": "0",
               "iContentFlexDirection": "vertical",
               "iContentVertAlign": "iSpace-between",
               "iContentOrder": "orderImgText",
               "iOpacityCtn": "1",
               "iContentType": "image",
               "iTextColor": "#ffffff",
               "iTextColorActive": "#ffffff",
               "iTextSize": "12",
               "iTextAlign": "iStart",
               "iTextDecoration": "none",
               "iTextSpaceTop": "0",
               "iTextSpaceBottom": "0",
               "iTextSpaceLeft": "0",
               "iTextSpaceRight": "0",
               "iIconSize": "35",
               "iImgAlign": "iCenter",
               "iImgRotation": "0",
               "iImgSpaceTop": "-50",
               "iImgSpaceBottom": "0",
               "iImgSpaceLeft": "0",
               "iImgSpaceRight": "0",
               "iImgBlinkFalse": "0",
               "iImgColorFalse": "",
               "iImgClockFace": "01",
               "iImgClockHands": "01",
               "iImgClockShowBorder": "true",
               "iImgColorClockFace": "#ffffff",
               "iImgColorHands": "#ffffff",
               "iImgColorHandSecond": "#ff0000",
               "iClockShowSeconds": "",
               "iClockTimezone": "Europe/Berlin",
               "iHtmlTextFieldFalse": "",
               "iShadowXOffset": "2",
               "iShadowYOffset": "2",
               "iShadowBlur": "2",
               "iShadowSpread": "1",
               "iShadowColor": "#111111",
               "iShadowInnerXOffset": "0",
               "iShadowInnerYOffset": "0",
               "iShadowInnerBlur": "0",
               "iShadowInnerSpread": "0",
               "iShadowInnerColor": "#111111",
               "iShadowTextXOffset": "0",
               "iShadowTextYOffset": "0",
               "iShadowTextBlur": "0",
               "iShadowTextColor": "#111111",
               "iBorderSize": "0",
               "iBorderStyle": "none",
               "iBorderColor": "#ffffff",
               "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,
               "iImageFalse": "/vis.0/Roelli/back_arrow.svg"
           },
           "style": {
               "left": "299px",
               "top": "120px",
               "width": "63px",
               "height": "55px"
           },
           "widgetSet": "vis-inventwo"
       },
       "e00003": {
           "tpl": "i-vis-multi",
           "data": {
               "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",
               "iUniversalWidgetType": "State",
               "iValueType": "boolean",
               "iStateResponseTime": "0",
               "iStateResetValueTime": "0",
               "iNavWait": "100",
               "iHttpType": "iSend",
               "iPopUpBackground": "#666666",
               "iPopUpPreventClickOutside": "",
               "iPopUpShowTitle": "true",
               "iPopUpTitle": "",
               "iPopUpTitleColor": "#ffffff",
               "iPopUpCloseBtnColor": "#dc2e2e",
               "iPopUpWidth": "800",
               "iPopUpHeight": "500",
               "iPopUpHeightTitle": "50",
               "iPopUpTitleSize": "28",
               "iPopUpPosition": "center",
               "iPopUpPositionX": "0",
               "iPopUpPositionY": "0",
               "iPopUpCloseAfterSeconds": "0",
               "iPopUpCornerRadiusUL": "12",
               "iPopUpCornerRadiusUR": "0",
               "iPopUpCornerRadiusLR": "12",
               "iPopUpCornerRadiusLL": "0",
               "iPopUpShadowXOffset": "2",
               "iPopUpShadowYOffset": "2",
               "iPopUpShadowBlur": "2",
               "iPopUpShadowSpread": "1",
               "iPopUpShadowColor": "#111111",
               "iUniversalValueCount": "1",
               "iCheckType1": "iCheckDefault",
               "iValueComparison1": "equal",
               "iButtonActiveM1": "",
               "iTextColorActive1": "#ffffff",
               "iShadowColorActiveM1": "",
               "iShadowInnerColorActiveM1": "",
               "iShadowTextColorActiveM1": "",
               "iBorderColorActiveM1": "#ffffff",
               "iImgBlinkTrue1": "0",
               "iImgColorTrue1": "",
               "iHtmlTextFieldTrue1": "",
               "iButtonCol": "#48d100",
               "iButtonColHover": "",
               "iOpacityBack": "1",
               "iCornerRadiusUL": "0",
               "iCornerRadiusUR": "0",
               "iCornerRadiusLR": "0",
               "iCornerRadiusLL": "0",
               "iContentFlexDirection": "vertical",
               "iContentVertAlign": "iSpace-between",
               "iContentOrder": "orderImgText",
               "iOpacityCtn": "1",
               "iContentType": "image",
               "iTextColor": "#ffffff",
               "iTextColorActive": "#ffffff",
               "iTextSize": "12",
               "iTextAlign": "iStart",
               "iTextDecoration": "none",
               "iTextSpaceTop": "0",
               "iTextSpaceBottom": "0",
               "iTextSpaceLeft": "0",
               "iTextSpaceRight": "0",
               "iIconSize": "107",
               "iImgAlign": "iCenter",
               "iImgRotation": "0",
               "iImgSpaceTop": "-30",
               "iImgSpaceBottom": "0",
               "iImgSpaceLeft": "0",
               "iImgSpaceRight": "0",
               "iImgBlinkFalse": "0",
               "iImgColorFalse": "",
               "iImgClockFace": "01",
               "iImgClockHands": "01",
               "iImgClockShowBorder": "true",
               "iImgColorClockFace": "#ffffff",
               "iImgColorHands": "#ffffff",
               "iImgColorHandSecond": "#ff0000",
               "iClockShowSeconds": "",
               "iClockTimezone": "Europe/Berlin",
               "iHtmlTextFieldFalse": "",
               "iShadowXOffset": "2",
               "iShadowYOffset": "2",
               "iShadowBlur": "2",
               "iShadowSpread": "1",
               "iShadowColor": "#111111",
               "iShadowInnerXOffset": "0",
               "iShadowInnerYOffset": "0",
               "iShadowInnerBlur": "0",
               "iShadowInnerSpread": "0",
               "iShadowInnerColor": "#111111",
               "iShadowTextXOffset": "0",
               "iShadowTextYOffset": "0",
               "iShadowTextBlur": "0",
               "iShadowTextColor": "#111111",
               "iBorderSize": "0",
               "iBorderStyle": "none",
               "iBorderColor": "#ffffff",
               "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,
               "iImageFalse": "/vis.0/Roelli/tab_right_active.svg"
           },
           "style": {
               "left": "908px",
               "top": "120px",
               "width": "63px",
               "height": "55px"
           },
           "widgetSet": "vis-inventwo"
       },
       "e00004": {
           "tpl": "tplCarousel",
           "data": {
               "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",
               "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,
               "contains_view": "testNavigation"
           },
           "style": {
               "left": "363px",
               "top": "128px",
               "width": "520px",
               "height": "43px"
           },
           "widgetSet": "swipe"
       }
   },
   "name": "Main",
   "filterList": []
}

[BananaJoe]

@roelli Also,

ich habe eine View "Startseite"
Rechts ist ein "View in Widget" das so eingestellt ist (sonst geht das scrollen nicht):

Im Webbrowser auf deinen PC wirst du die Scrollbalken sehen. (Beim GIF habe ich geschummelt und den nicht mit aufgezeichnet) Auf meinen Tablets ist der aber nicht zu sehen. Alternativ, wenn es auf dem PC sein muss, könnte man den per CSS verstecken / transparent machen.
In dem Widget stelle ich eine eigene View dar bei der ich eine Höhe von 3000 Pixeln eingestellt habe (nach Bedarf:)

Links ist ein "view in widget 8" welches dann die rechts ausgewählte Seite darstellt:

Abhängig vom Datenpunkt. Die Button des Menüs rechts schreiben die richtige Zahl in den Datenpunkt:

und der nächste 2, 3 usw ...