Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. Einfach mal zeigen will….. :-) - Teil 3

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Einfach mal zeigen will….. :-) - Teil 3

    This topic has been deleted. Only users with topic management privileges can see it.
    • Negalein
      Negalein Global Moderator last edited by Negalein

      @Mic

      Ich habe dein Script für die Nav-Leiste aus deinem Beitrag heute versucht einzubinden.

      Das Script scheint mit dem Button zu funktionieren, da es true/false schaltet.

      Aber mir wird das Menü nicht eingeblendet.

      Anbei ein paar Screenshots meiner Einstellungen.

      Edit vis.png
      Edit vis (1).png
      Edit vis (2).png

      CSS

      #vis_container .mic-navleft-huawei .label {
        font-size: 100% !important;
        font-family: RobotoCondensed-Light !important;
        text-align: left !important;
        text-shadow: 2px 2px 2px #000000 !important;
        padding: 0 !important;
        margin: -3px 0px 0px 50px !important;
      }
      /* Nicht selektiert */
      #vis_container .mic-navleft-huawei .bg-orange {
          background: none !important;
          box-shadow: none !important; /* Rahmen weg */
      }
      /* selektiert */
      #vis_container .mic-navleft-huawei .bg-black {
          background: rgba(46, 46, 46, 0.6) !important;
          box-shadow: none !important; /* Rahmen weg */
      

      Script

      /****************************
       * Sidebar States
       * 28.10.2018
       ***************************/
      // Set States and hide sidebar after 10 seconds
      const LEFT_SIDEBAR_STATE = 'javascript.0.nega.vis-support.sidebar-left-switch';
      MG_createState(LEFT_SIDEBAR_STATE, 'Sidebar on/off', 'boolean', 'switch', false);
      on({id: LEFT_SIDEBAR_STATE, change: 'any'}, function(obj) {
          if ((obj.state.val !== false) && (obj.state.val !== 0)) {
              setStateDelayed(LEFT_SIDEBAR_STATE, false, 10000);        
          }
      });
      // Hide sidebar on view change
      const VIS_PROJECT = 'main'; // Name des Projekts z.B. aus URL; http://xxxx:8082/vis/edit.html?Pad
      on({id: 'vis.0.control.command', val:'changedView'}, function(obj) {
          let currView = getState('vis.0.control.data').val;
          currView = currView.substring(0, VIS_PROJECT.length);
          if (currView === VIS_PROJECT) {
              setState(LEFT_SIDEBAR_STATE, false);        
          }
      });
       /**
       * Create States - General
       * @param {string} stId      ID
       * @param {string} stName    Name, Description
       * @param {mixed}  stType     Datatype: string, boolean, etc.
       * @param {string} stRole    Role: button, etc.
       * @param {mixed}  stDef      Default value
       */
      function MG_createState(stId, stName, stType, stRole, stDef) {
          createState(stId, {
              'name': stName,
              'desc': stName,
              'type': stType,
              'read': true,
              'write': true,
              'role': stRole,
              'def': stDef,
          });
      }
      

      Dann ist mir nochwas aufgefallen.

      Ich hab meine Seite in 2 Teilen aufgebaut.
      Header (mit Infos wie Datum, Uhr, usw.), der ein eigenes View in Widget ist
      und Body mit den einzelnen Views.

      Wenn ich den Menübutton in den Header packe und das View in Widget (für das Menü) in den Body, bleibt die ganze Seite leer!

      Glasfaser 2 Replies Last reply Reply Quote 0
      • Glasfaser
        Glasfaser @Negalein last edited by Glasfaser

        @Negalein

        Hast du den Menue Button einmal im aktuellen View gedrückt , da beim neu anlegen im Editor erstmal der View leer bleibt.

        Hier als Beispiel : Gerade noch einmal neu angelegt im Editor und er bleibt leer ...
        0000000000000.JPG

        Im aktuellen View aufrufen , und wieder zurück zum Editor , dann wird er sichtbar .

        11111111111111111111111111.JPG

        Nashra 1 Reply Last reply Reply Quote 0
        • Glasfaser
          Glasfaser @Negalein last edited by Glasfaser

          @Negalein

          Da ist mir noch was aufgefallen ,
          in deinen View in Widget nimm die CSS Klasse raus .

          444444444.JPG

          1 Reply Last reply Reply Quote 0
          • Negalein
            Negalein Global Moderator last edited by

            @Glasfaser

            Danke, es funktioniert jetzt.

            Fehler war, dass er vom Header in den Body nichts schalten kann.
            Hab jetzt den Button und Menü nur im Body und es funktioniert.

            CSS-Klasse im Menü benötige ich, da es sonst nicht so aussieht wie ich möchte.

            Glasfaser 1 Reply Last reply Reply Quote 0
            • Glasfaser
              Glasfaser @Negalein last edited by

              @Negalein

              Bei mir in der Leiste habe ich die CSS-Klasse nicht , deshalb wollte ich jeden Fehler ausschließen.
              Schön das es jetzt klappt.

              1 Reply Last reply Reply Quote 0
              • Nashra
                Nashra Most Active Forum Testing @Glasfaser last edited by

                @Glasfaser sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                11111111111111111111111111.JPG

                Hallo, wo bekommt man denn die tollen Mülltonen Bilder und gibt es die auch für Bio und Papier?

                Glasfaser joergeli 2 Replies Last reply Reply Quote 0
                • Glasfaser
                  Glasfaser @Nashra last edited by

                  @Nashra

                  Habe Sie von hier : Link Text

                  Mülltonne gelb

                  [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":true,"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","refreshInterval":"0","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,"src":"/vis.0/Wohnen/tonnegelb.png","visibility-oid":"javascript.0.muell.gelbersack","name":"Gelbe Tonne morgen"},"style":{"left":"526px","top":"286px","z-index":"4","width":"36px","height":"53px"},"widgetSet":"basic"}]
                  

                  Abfalltonne

                  [```
                  [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":true,"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":"0","visibility-groups-action":"hide","refreshInterval":"0","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,"src":"/vis.0/Wohnen/tonne.png","visibility-oid":"javascript.0.muell.restmuell","name":"Mülltonne heute","class":""},"style":{"left":"517px","top":"241px","z-index":"5","width":"50px","height":"50px"},"widgetSet":"basic"}]

                  Nashra 1 Reply Last reply Reply Quote 2
                  • Nashra
                    Nashra Most Active Forum Testing @Glasfaser last edited by Nashra

                    @Glasfaser sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                    @Nashra

                    Habe Sie von hier : Link Text

                    Danke für den Link 👍 schade, leider keine blaue und grüne Tonne dabei.

                    Glasfaser padrino 2 Replies Last reply Reply Quote 0
                    • E
                      eMd last edited by

                      Ich habe mir da was mit iQontrol gebastelt fürs Handy.

                      Handyvisualisierung

                      Bilder von icon8 und der Rest alles aus dem iobroker ui kit...

                      MfG
                      eMd

                      Glasfaser 1 Reply Last reply Reply Quote 1
                      • Glasfaser
                        Glasfaser @Nashra last edited by

                        @Nashra

                        muelltonne-mit-armen.png

                        aufkleber-mulltonne_jpg.jpg

                        K 1 Reply Last reply Reply Quote 1
                        • Glasfaser
                          Glasfaser @eMd last edited by

                          @eMd

                          Sieht gut aus auf dem Handy auf .. übersichtliche Buttons angelegt und so leicht bedienbar .👍

                          1 Reply Last reply Reply Quote 1
                          • padrino
                            padrino Most Active @Nashra last edited by padrino

                            @Nashra sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                            Danke für den Link 👍 schade, leider keine blaue und grüne Tonne dabei.

                            Taddaa! 😉

                            Vielleicht nicht ganz perfekt, aber ich denke, man kann damit arbeiten. 😃

                            tonne_blau.png

                            tonne_grün.png

                            Glasfaser B 2 Replies Last reply Reply Quote 4
                            • Glasfaser
                              Glasfaser @padrino last edited by

                              @padrino sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                              Vielleicht nicht ganz perfekt, aber ich denke, man kann damit arbeiten. 😃

                              Doch …. sieht gut aus ✍

                              1 Reply Last reply Reply Quote 0
                              • padrino
                                padrino Most Active last edited by

                                So, die "Zungen" sind oben gefixt. 😄

                                1 Reply Last reply Reply Quote 1
                                • joergeli
                                  joergeli @Nashra last edited by

                                  @Nashra
                                  Hi, ich hatte hier schon mal meine Tonnen eingestellt:
                                  https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/839

                                  Gruß
                                  Jörg

                                  1 Reply Last reply Reply Quote 0
                                  • opossum
                                    opossum last edited by opossum

                                    Hallo,

                                    hier mal meine Bilder für lustige Mülltonnen. Habe die von oben mal eingefärbt.

                                    muelltonne_1.zip

                                    1 Reply Last reply Reply Quote 2
                                    • Nashra
                                      Nashra Most Active Forum Testing last edited by

                                      Moin @Glasfaser, @padrino, @opossum , ihr seit einfach Klasse 👍 👍 👍
                                      Danke für die Tonnenauswahl 😁

                                      1 Reply Last reply Reply Quote 0
                                      • L
                                        lesiflo Most Active last edited by lesiflo

                                        Hallo,
                                        auf vielfachen Wunsch hier ein aktueller Export meiner Vis im "Material Design" von Uhula.

                                        Home.JPG

                                        Hatte ich auch schon mal hier vorgestellt:
                                        https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/607

                                        Homer.J. B S V Jens Meyer 5 Replies Last reply Reply Quote 0
                                        • Flexer
                                          Flexer last edited by

                                          Habe meine Vis mal abgefilmt!

                                          Hier der Link

                                          https://m.youtube.com/watch?v=DQ9PoF1Vjlo&feature=youtu.be

                                          Negalein W 3 Replies Last reply Reply Quote 4
                                          • Negalein
                                            Negalein Global Moderator @Flexer last edited by

                                            @Flexer sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                            Habe meine Vis mal abgefilmt!

                                            Hier der Link

                                            https://m.youtube.com/watch?v=DQ9PoF1Vjlo&feature=youtu.be

                                            Schaut richtig gut aus!

                                            Der Netzwerkview gefällt mir. Vorallem das mit den blauen animierten Linien.

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.2k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            vis vis editor visualisierung visualization
                                            155
                                            813
                                            266644
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo