Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Der "schöne Smartphone-VIS" Bastelthread

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.3k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.6k

Der "schöne Smartphone-VIS" Bastelthread

Geplant Angeheftet Gesperrt Verschoben Visualisierung
visown projectios app
52 Beiträge 18 Kommentatoren 11.5k Aufrufe 16 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • F Offline
    F Offline
    flubb
    schrieb am zuletzt editiert von
    #27

    Hallo,

    würde eure Vorlage auch gerne für mich verwenden (möchte darüber nur ein paar Lampen steuern, und Raumtemperaturen anzeigen). Leider bin ich bzgl. VIS noch blutiger Anfänger, und scheitere bereits beim Import :-( . Könnt ihr hier kurz Hilfestellung geben? Auch habe ich in dem bereitgestellten ZIP die Bilder z.B. für die Steckdose nicht gesehen, sind die bereits vorinstalliert oder brauche ich noch bestimmte Adapter für euren View?

    Danke & sorry für die Anfängerfragen

    Markus

    1 Antwort Letzte Antwort
    0
    • HiltexH Offline
      HiltexH Offline
      Hiltex
      schrieb am zuletzt editiert von
      #28

      Du brauchst die MFD Icons

      http://www.iobroker.net/docu/?page_id=3571&lang=de

      Blog: indibit.de

      1 Antwort Letzte Antwort
      0
      • MicM Offline
        MicM Offline
        Mic
        Developer
        schrieb am zuletzt editiert von
        #29

        Hallo Hiltex,

        vielen Dank für das super Design, klasse! 8-) Ich habe es für mich entsprechend übernommen :)

        Auch sehr elegant umgesetzt mit den Widgets, ohne unnötiger Überlagerungen/Verbergungen.

        Kurzer Tipp zu den svg-Icons, falls man sich welche aus dem Web herunterlädt:

        Diese werden nicht korrekt übernommen in den Widgets, dazu einfach die svg im Text-Editor öffnen und alle Stellen von " <path d/durch/"<path/style="fill:#FFFFFF;" entsprechend/ersetzen./hier/muss/also/"fill:#ffffff"/vorhanden/sein,/dann/werden/die/bilder/korrekt/übernommen.<br=""> 6940_ipd2.png </path>

        1 Antwort Letzte Antwort
        0
        • M Offline
          M Offline
          Mr.Oz
          schrieb am zuletzt editiert von
          #30

          @flubb:

          Hallo,

          würde eure Vorlage auch gerne für mich verwenden (möchte darüber nur ein paar Lampen steuern, und Raumtemperaturen anzeigen). Leider bin ich bzgl. VIS noch blutiger Anfänger, und scheitere bereits beim Import :-( . Könnt ihr hier kurz Hilfestellung geben? Auch habe ich in dem bereitgestellten ZIP die Bilder z.B. für die Steckdose nicht gesehen, sind die bereits vorinstalliert oder brauche ich noch bestimmte Adapter für euren View?

          Danke & sorry für die Anfängerfragen

          Markus `

          Hallo zusammen,

          ich habe leider das gleiche Problem wie der User "flubb". Bei mir werden auch die Buttons für die Aktoren nicht angezeigt. Nach dem Imprt sehe ich diese zwar in der Widget-Auswahlliste aber nicht in der View. Habe versucht den Fehler selber zu finden aber komme da mit meinen Json-Anfängerwissen nicht weiter.

          Folgendes habe ich … ich sag mal jetzt selbstbewusst herausgefunden :lol: und bereits nach Informationen aus dem Thread durchgeführt.

          • Der Ordner ".AppleDouble" im Ordner images ist unter ssh oder per sftp nicht zu sehen. Im Vis Dateimanager ja aber die Bilder sind leer/gelöscht

          • Im CSS Reiter werden einige Zeilen mit einen Ausrufekennzeichen gekennzeichnet. Zeilen mit "!Important"

          • Wenn ich die Widgets (Bsp. w00052) Auswähle, fehlt im Eigenschaftenmenü die Gruppe "Allgemein"

          • Adapter MFD SVG Version 1.0.2 ist installiert

          • Vis Version 1.1.8 ist installiert

          Muss man vielleicht den "Material UI" Adapter installieren um irgend welche Objekt zu installieren.

          Hoffe mir kann jemand helfen.

          @Hiltex: Das Design und die Idee sind wirklich super.

          Gruß

          Martin

          9364_vis.png

          1 Antwort Letzte Antwort
          0
          • M Offline
            M Offline
            Mr.Oz
            schrieb am zuletzt editiert von
            #31

            Hallo zusammen,

            habe den "Fehler" bzw. die fehlenden Widgets gefunden.

            Folgende Adapter muss man noch zusätzlich installieren

            https://github.com/ioBroker/ioBroker.vis-jqui-mfd.git

            Zusätzlich habe ich noch den Material Widget Adapter installiert.

            Ich denke der kann auch nicht schaden :D

            https://github.com/nisiode/ioBroker.vis-material.git

            Gruß Martin

            1 Antwort Letzte Antwort
            0
            • HiltexH Offline
              HiltexH Offline
              Hiltex
              schrieb am zuletzt editiert von
              #32

              Sorry, das stimmt. Ist mir aber leider nicht eingefallen. Liegt bestimmt daran, dass ich den seit Anfang an installiert habe.

              Blog: indibit.de

              1 Antwort Letzte Antwort
              0
              • M Offline
                M Offline
                Mr.Oz
                schrieb am zuletzt editiert von
                #33

                Kein Problem. Beim suchen eines Fehlers lernt man einiges ;)

                1 Antwort Letzte Antwort
                0
                • M Offline
                  M Offline
                  Marcel85
                  schrieb am zuletzt editiert von
                  #34

                  Guten Morgen!

                  Wirklich sehr schöne Visualisierung!

                  Da ich noch keine Mobile-VIS habe, werde ich mal deine als Basis nehmen.

                  Ich habe allerdings ein merkwürdiges Verhalten.

                  Ich habe dein Projekt 2 mal Importiert, eine zum Testen und eine für den täglichen Einsatz.

                  Sobald ich bei dem bisher unveränderten Projekt über das seitliche Menü was öffnen möchte, schließt sich das Menü ohne eine neue Seite zu öffnen.

                  Hat jemand selbiges Verhalten?

                  EDIT: Ich sehe gerade das das Thema schon weiter oben behandelt wurde! Läuft jetzt!

                  Gruß

                  Marcel

                  1 Antwort Letzte Antwort
                  0
                  • M Offline
                    M Offline
                    Marcel85
                    schrieb am zuletzt editiert von
                    #35

                    Ich schon wieder!

                    Lässt sich der Dialog für einfaches Ein/Aus für die Beleuchtung separat ändern?

                    Derzeit ist es ja so, dass der Dialog über CSS übergreifend verändert wird.

                    Sprich: Ändere ich den Rolladen-Dialog, änder sich der Dialog beim jqui-mfd on/off auch.

                    Bei diesem würde ich allerdings gerne den On/Off Taster separat ändern, dass dieser optisch dem Bereich Räume auf der Übersicht ähnelt.

                    Schön groß und farbig.

                    Gruß

                    Marcel

                    1 Antwort Letzte Antwort
                    0
                    • HiltexH Offline
                      HiltexH Offline
                      Hiltex
                      schrieb am zuletzt editiert von
                      #36

                      Ja, aber es gibt verschiedene Wege:

                      1. Du könntest den Dialog anhand seiner ID formatieren. Das hätte den Nachteil, dass ein zweiter Dialog vom gleichen Typ diese Formatierung nicht übernehmen würde.

                      2. Du könntest dem Dialog eine zusätzliche CSS-Klasse mitgeben und ihn über diese Klasse formatieren (Eigenschaften -> Generell -> CSS-Klasse)

                      3. Du könntest die ganze Formatierung für den Rolladendialog an eine weitere CSS-Klasse knüpfen und dem Rolladen-Dialog die entsprechende CSS-Klasse verpassen (macht vielleicht Sinn, wenn der Standard nicht so aussehen soll, wie der Rolladen-Dialog). Dann formatierst du das allgemeine Dialog-Widget um.

                      4. Du verwendest einen Dialog, in den man eine View laden kann und baust deine Steuerung in einer neuen View so auf, wie Du sie haben willst.

                      Gibt bestimmt noch mehr Wege, aber das sind die, die mir gerade ingefallen sind.

                      Blog: indibit.de

                      1 Antwort Letzte Antwort
                      0
                      • M Offline
                        M Offline
                        Marcel85
                        schrieb am zuletzt editiert von
                        #37

                        Ich bin ja schon froh das ich deine Änderungen in CSS verstehe, aber eine Klasse kriege ich leider nicht erstellt.

                        Wenn ich das richtig sehe erstellt meine Klasse mit ".irgendwas {".

                        Leider klappt das nicht so wie ich möchte.

                        Könntest du mir beim erstellen einer Klasse wohl auf die Sprünge helfen?

                        Gruß

                        Marcel

                        1 Antwort Letzte Antwort
                        0
                        • M Offline
                          M Offline
                          Mr.Oz
                          schrieb am zuletzt editiert von
                          #38

                          Hi,

                          könnt ihr mir noch einen Tipp geben wir ich folgendes umsetzen kann?

                          Wollte die aktivieren Buttons etwas dezenter anzeigen lassen. Habe folgendes im CSS Code geändert aber irgendwie bring es nichts.

                          Anzeige soll
                          9364_active.png

                          Änderung im CSS
                          9364_active2.png

                          1 Antwort Letzte Antwort
                          0
                          • HiltexH Offline
                            HiltexH Offline
                            Hiltex
                            schrieb am zuletzt editiert von
                            #39

                            @Mr.Oz:

                            Hi,

                            könnt ihr mir noch einen Tipp geben wir ich folgendes umsetzen kann?

                            Wollte die aktivieren Buttons etwas dezenter anzeigen lassen. Habe folgendes im CSS Code geändert aber irgendwie bring es nichts.

                            Anzeige soll

                            active.PNG

                            Änderung im CSS

                            active2.PNG `

                            Du musst die Klasse ui-state-active so anpassen.

                            .vis-widget.ui-widget.ui-button.ui-corner-all.ui-state-default.ui-state-active {
                                box-shadow: 0px 0px 10px #fd3166 !important;
                            }
                            

                            Blog: indibit.de

                            1 Antwort Letzte Antwort
                            0
                            • HiltexH Offline
                              HiltexH Offline
                              Hiltex
                              schrieb am zuletzt editiert von
                              #40

                              @Marcel85:

                              Ich bin ja schon froh das ich deine Änderungen in CSS verstehe, aber eine Klasse kriege ich leider nicht erstellt.

                              Wenn ich das richtig sehe erstellt meine Klasse mit ".irgendwas {".

                              Leider klappt das nicht so wie ich möchte.

                              Könntest du mir beim erstellen einer Klasse wohl auf die Sprünge helfen?

                              Gruß

                              Marcel `

                              Damit bist du doch auf dem richtigen Weg. Wo genau liegt das Problem?

                              Blog: indibit.de

                              1 Antwort Letzte Antwort
                              0
                              • M Offline
                                M Offline
                                Mr.Oz
                                schrieb am zuletzt editiert von
                                #41

                                @Hiltex:

                                Du musst die Klasse ui-state-active so anpassen.

                                .vis-widget.ui-widget.ui-button.ui-corner-all.ui-state-default.ui-state-active {
                                    box-shadow: 0px 0px 10px #fd3166 !important;
                                }
                                ```` `  
                                

                                Danke :)

                                1 Antwort Letzte Antwort
                                0
                                • P Offline
                                  P Offline
                                  plazmatic07
                                  schrieb am zuletzt editiert von
                                  #42

                                  Hi,

                                  ich habe auch mal etwas rumgespielt… Sieht super aus.

                                  Wie verhält es sich denn mit der generierten Instanz. Scheint, dass diese regelmäßig abläuft.

                                  Dann kommt de VIS Spinning Wheel. Ich denke mal ist aufgrund des FlyOver Menüs?

                                  3619_img_7045.png

                                  Wenn der Abstand des Öffnen groß genug ist, macht VIS einen Auto-Refresh… aber dazwischen (so 2-3 Minuten) ist es natürlich teilweise ärgerlich

                                  1 Antwort Letzte Antwort
                                  0
                                  • HiltexH Hiltex

                                    Hallo zusammen,

                                    im Thread https://forum.iobroker.net/viewtopic.php?f=30&t=1860&start=200 ist die Idee entstanden, dass man vielleicht mal einen eigenen Thread starten könnte, bei dem der Fokus auf Visualisierungen liegt, die speziell auf Smartphones ausgerichtet sind und man vielleicht gemeinsam daran basteln könnte. Also fange ich hier einfach mal an.

                                    Meine VIS ist für die Auflösung von einem iPhone 6 bis 8 optimiert - also eine nutzbare Fläche von 375 x 647 Pixeln ein klein wenig responsive und nutzt die gesamte Bildschirmfläche, wenn man sie als Web-App speichert (Seite in Safari aufrufen -> Teilenmenü -> Zum Homebildschirm). Die Statuszeile vom iPhone wird weiß eingefärbt und es gibt ein schönes App-Icon für den Homescreen.

                                    Aktueller Stand: befindet sich im Moment noch recht weit am Anfang - es gibt noch viel zu tun.

                                    Im Moment stehen eigentlich nur die Design-Idee, die Übersichtsseite, das Seitenmenü, das ich aus dem https://forum.iobroker.net/viewtopic.php?f=30&t=7739 extrahiert habe und der Musik-Seite. Alles aber noch verbesserungswürdig.

                                    Screenshots:
                                    9433_img_2684.png 9433_img_2685.png 9433_img_2686.png 9433_img_2691.png

                                    Um die weiße Statuszeile und das App-Icon zu bekommen, muss die Datei apple-touch-icon.png an folgenden Ort kopiert werden:

                                    /opt/iobroker/iobroker-data/files/vis/apple-touch-icon.png

                                    Anschließend wird die Datei /opt/iobroker/iobroker-data/files/vis/index.html in einem Editor geöffnet und im Head um folgende zwei Zeilen ergänzt:

                                    <meta name="apple-mobile-web-app-status-bar-style" content="default">
                                    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
                                    

                                    Damit sollte sich dann folgendes Bild ergeben:

                                    <!DOCTYPE html>
                                    <html manifest="cache.manifest" xmlns="http://www.w3.org/1999/html">
                                    <head>
                                        <!-- vis Version 1.1.7 -->
                                    
                                        <meta charset="utf-8">
                                        <meta name="apple-mobile-web-app-capable" content="yes" />
                                        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=0.5, user-scalable=yes" />
                                        <meta name="mobile-web-app-capable" content="yes">
                                        
                                        <meta name="apple-mobile-web-app-status-bar-style" content="default">
                                        <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
                                    
                                    	<!-- cordova settings -->
                                    	<meta http-equiv="Content-Security-Policy"
                                              content="default-src 'self' * 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline' *; img-src 'self' 'unsafe-inline' * data:; media-src 'self' 'unsafe-inline' *; connect-src 'self' 'unsafe-eval' 'unsafe-inline' * ws: wss:; script-src 'self' 'unsafe-eval' 'unsafe-inline' *">
                                    	<meta name="format-detection" content="telephone=no">
                                    	<meta name="msapplication-tap-highlight" content="no">
                                    	
                                    	...
                                    

                                    Leider müssen diese Einträge jedes mal neu hinzugefügt werden, wenn VIS-relevante Adapter installiert oder deinstalliert werden, da dann diese index.html neu erzeugt wird.

                                    Habt viel Spaß damit und lasst ruhig auch Kritik da.

                                    2019-02-16-iPhone_6s.zip
                                    apple-touch-icon.png

                                    RöstkartoffelR Offline
                                    RöstkartoffelR Offline
                                    Röstkartoffel
                                    schrieb am zuletzt editiert von
                                    #43

                                    @Hiltex sagte in Der "schöne Smartphone-VIS" Bastelthread:

                                    Um die weiße Statuszeile und das App-Icon zu bekommen, muss die Datei apple-touch-icon.png an folgenden Ort kopiert werden:

                                    /opt/iobroker/iobroker-data/files/vis/apple-touch-icon.png

                                    Anschließend wird die Datei /opt/iobroker/iobroker-data/files/vis/index.html in einem Editor geöffnet und im Head um folgende zwei Zeilen ergänzt:

                                    Damit sollte sich dann folgendes Bild ergeben:

                                    
                                    	...
                                    

                                    Habt viel Spaß damit und lasst ruhig auch Kritik da.

                                    @Hiltex
                                    Kannst du bitte das Icon und die "zwei Zeilen im Head", sowie das Bild wieder einfügen?
                                    Das ist wohl bei der Forumsumstellung verschütt gegangen.

                                    Danke.

                                    NUC7i3BNH mit Proxmox und ioBroker (VM Debian Buster), Raspi3 (Slave Smartmeter für eHZ easymeter), Hardware CCU2, SMA SB5000TL-21

                                    1 Antwort Letzte Antwort
                                    0
                                    • M Offline
                                      M Offline
                                      mirK
                                      schrieb am zuletzt editiert von
                                      #44

                                      hallo zusammen,

                                      könnte jemand die view noch einmal zur verfügung stellen ?
                                      Finde sie leider nicht hier im thread. sind diese dem forumsumzug zum opfer gefallen, oder bin ich einfach nur blind ?:white_frowning_face:

                                      1 Antwort Letzte Antwort
                                      0
                                      • HiltexH Offline
                                        HiltexH Offline
                                        Hiltex
                                        schrieb am zuletzt editiert von
                                        #45

                                        Sieht tatsächlich so aus, als wäre das bei der Umstellung des Forums verloren gegangen. Ich lade das später neu hoch

                                        Blog: indibit.de

                                        1 Antwort Letzte Antwort
                                        0
                                        • HiltexH Offline
                                          HiltexH Offline
                                          Hiltex
                                          schrieb am zuletzt editiert von
                                          #46

                                          Ich habe meinen ersten Post überarbeitet und das Projekt neu angehängt. Es ist jedoch nicht mehr zu 100% der gleiche Stand wie ursprünglich.
                                          Ich habe zwar nicht mehr viel daran gemacht, da ich derzeit an einem anderen Design arbeite, aber ich wollte euch trotzdem ein paar Grundlagen in Sachen responsive Design mitgeben. Kürzlich habe ich mir ein neueres iPhone mit größerem Display gegönnt, daher wurde das dann plötzlich relevant für mich.
                                          Abgucken könnt ihr euch das im View 00_home und rnav.

                                          BTW: dieser Thread war eigentlich nicht nur dafür gedacht, dass nur ich hier meine VIS vorstelle. Es sollte eigentlich mehr ein Sammelpunkt für Visualisierungen sein, die auf die Bedürfnisse eines Smartphones zugeschnitten sind. Wenn hier also noch jemand anderes seine VIS vorstellen möchte - immer her damit.

                                          Blog: indibit.de

                                          1 Antwort Letzte Antwort
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          655

                                          Online

                                          32.5k

                                          Benutzer

                                          81.7k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe