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

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    14
    1
    348

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    603

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    1.8k

Der "schöne Smartphone-VIS" Bastelthread

Geplant Angeheftet Gesperrt Verschoben Visualisierung
visown projectios app
52 Beiträge 18 Kommentatoren 11.6k 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.
  • 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
                  • W Offline
                    W Offline
                    wye
                    schrieb am zuletzt editiert von
                    #47

                    Egal was ich mache, ich bekomme die Favicon nicht geändert.
                    Habe die index.html und das png nun manuell per Terminal am Pi in .../vis kopiert.
                    Mit "ls" sind auch beide dateien zu sehen, aber Vis erkennt sie nicht.
                    Wenn ich im Dateimanager unter .../vis schaue sind sie nicht zu sehen.

                    Gibts eine Möglichkeit das irgendwie hinzubekommen?

                    Danke vorab!

                    sigi234S 1 Antwort Letzte Antwort
                    0
                    • W wye

                      Egal was ich mache, ich bekomme die Favicon nicht geändert.
                      Habe die index.html und das png nun manuell per Terminal am Pi in .../vis kopiert.
                      Mit "ls" sind auch beide dateien zu sehen, aber Vis erkennt sie nicht.
                      Wenn ich im Dateimanager unter .../vis schaue sind sie nicht zu sehen.

                      Gibts eine Möglichkeit das irgendwie hinzubekommen?

                      Danke vorab!

                      sigi234S Online
                      sigi234S Online
                      sigi234
                      Forum Testing Most Active
                      schrieb am zuletzt editiert von sigi234
                      #48

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

                      Egal was ich mache, ich bekomme die Favicon nicht geändert.
                      Habe die index.html und das png nun manuell per Terminal am Pi in .../vis kopiert.
                      Mit "ls" sind auch beide dateien zu sehen, aber Vis erkennt sie nicht.
                      Wenn ich im Dateimanager unter .../vis schaue sind sie nicht zu sehen.

                      Gibts eine Möglichkeit das irgendwie hinzubekommen?

                      Danke vorab!

                      Mit Dateimanager unter vis.0 hochladen.
                      Die Struktur hat sich seit 2.x js Controller geändert.

                      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                      Immer Daten sichern!

                      W 1 Antwort Letzte Antwort
                      0
                      • sigi234S sigi234

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

                        Egal was ich mache, ich bekomme die Favicon nicht geändert.
                        Habe die index.html und das png nun manuell per Terminal am Pi in .../vis kopiert.
                        Mit "ls" sind auch beide dateien zu sehen, aber Vis erkennt sie nicht.
                        Wenn ich im Dateimanager unter .../vis schaue sind sie nicht zu sehen.

                        Gibts eine Möglichkeit das irgendwie hinzubekommen?

                        Danke vorab!

                        Mit Dateimanager unter vis.0 hochladen.
                        Die Struktur hat sich seit 2.x js Controller geändert.

                        W Offline
                        W Offline
                        wye
                        schrieb am zuletzt editiert von
                        #49

                        @sigi234 und dann?
                        Die zu ändernde index.html liegt trotzdem unter vis

                        So habe ich es ja auch gemacht... über vis.0 hochgeladen und dann per terminal nach /vis verschoben.

                        sigi234S 1 Antwort Letzte Antwort
                        0
                        • W wye

                          @sigi234 und dann?
                          Die zu ändernde index.html liegt trotzdem unter vis

                          So habe ich es ja auch gemacht... über vis.0 hochgeladen und dann per terminal nach /vis verschoben.

                          sigi234S Online
                          sigi234S Online
                          sigi234
                          Forum Testing Most Active
                          schrieb am zuletzt editiert von sigi234
                          #50

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

                          @sigi234 und dann?
                          Die zu ändernde index.html liegt trotzdem unter vis

                          So habe ich es ja auch gemacht... über vis.0 hochgeladen und dann per terminal nach /vis verschoben.

                          https://forum.iobroker.net/topic/26759/js-controller-2-jetzt-für-alle-im-stable

                          Zitat:
                          WAS IST BESONDERS ZU BEACHTEN?
                          Der js-controller 2 ist generell kompatibel mit allen bestehenden ioBroker-Systemen. Es kann von jeder früheren Version auf die Version 2.1 aktualisiert werden. Einzig die Node.js-Version muss vor dem Update mindestens auf 8.x, besser noch auf 10.x angehoben werden! Für Node.js 12.x ist es aber noch etwas zu früh, da hier immer noch einige Adapter nicht kompatibel sind!
                          Falls ihr in diesem Zuge die Node.js-Version aktualisieren wollt, beachtet bitte die Informationen bzw. die Anleitung unter https://forum.iobroker.net/topic/22867/how-to-node-js-für-iobroker-richtig-updaten

                          Weiterhin wird der ioBroker-eigene Dateibereich (im Normalfall bisher unter <ioBroker-Verzeichnis>/iobroker-data/files/...) nun strikter behandelt. Manuell oder per Skript (fs.write) dort direkt abgelegte/hin kopierte Dateien sind ggf. nach dem Update nicht mehr in Visualisierungen anzeigbar!
                          Skripte müssen angepasst werden (Nutzung von writeFile) bzw. die Dateien müssen in offiziell definierte Adpater-Basisverzeichnisse (z.B. vis.0, iqontrol.meta u.ä.) abgelegt werden. Nutzt am besten auch die offiziellen Uploader von Vis oder iqontrol, damit diese Dateien korrekt registriert sind. Diese Änderung wurde auch zur Erhöhung der Sicherheit umgesetzt! Der positive Nebeneffekt ist auch, dass die Files dann mit im Backup landen, was bisher nicht erfolgte!
                          Bei der Installation (oder nachträglich per iobroker file sync) werden die erlaubten Verzeichnisse geprüft und bisher nicht registrierte Dateien aufgenommen. Wer komplett eigene Verzeichnisse angelegt hat, bekommt dazu eine Fehlermeldung - diese werden nicht automatisch übernommen und müssen manuell korrekt kopiert werden. Siehe dazu auch die Informationen zum Ordner 0_userdata.0 im Post #3 in diesem Thread!

                          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                          Immer Daten sichern!

                          W 1 Antwort Letzte Antwort
                          0
                          • sigi234S sigi234

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

                            @sigi234 und dann?
                            Die zu ändernde index.html liegt trotzdem unter vis

                            So habe ich es ja auch gemacht... über vis.0 hochgeladen und dann per terminal nach /vis verschoben.

                            https://forum.iobroker.net/topic/26759/js-controller-2-jetzt-für-alle-im-stable

                            Zitat:
                            WAS IST BESONDERS ZU BEACHTEN?
                            Der js-controller 2 ist generell kompatibel mit allen bestehenden ioBroker-Systemen. Es kann von jeder früheren Version auf die Version 2.1 aktualisiert werden. Einzig die Node.js-Version muss vor dem Update mindestens auf 8.x, besser noch auf 10.x angehoben werden! Für Node.js 12.x ist es aber noch etwas zu früh, da hier immer noch einige Adapter nicht kompatibel sind!
                            Falls ihr in diesem Zuge die Node.js-Version aktualisieren wollt, beachtet bitte die Informationen bzw. die Anleitung unter https://forum.iobroker.net/topic/22867/how-to-node-js-für-iobroker-richtig-updaten

                            Weiterhin wird der ioBroker-eigene Dateibereich (im Normalfall bisher unter <ioBroker-Verzeichnis>/iobroker-data/files/...) nun strikter behandelt. Manuell oder per Skript (fs.write) dort direkt abgelegte/hin kopierte Dateien sind ggf. nach dem Update nicht mehr in Visualisierungen anzeigbar!
                            Skripte müssen angepasst werden (Nutzung von writeFile) bzw. die Dateien müssen in offiziell definierte Adpater-Basisverzeichnisse (z.B. vis.0, iqontrol.meta u.ä.) abgelegt werden. Nutzt am besten auch die offiziellen Uploader von Vis oder iqontrol, damit diese Dateien korrekt registriert sind. Diese Änderung wurde auch zur Erhöhung der Sicherheit umgesetzt! Der positive Nebeneffekt ist auch, dass die Files dann mit im Backup landen, was bisher nicht erfolgte!
                            Bei der Installation (oder nachträglich per iobroker file sync) werden die erlaubten Verzeichnisse geprüft und bisher nicht registrierte Dateien aufgenommen. Wer komplett eigene Verzeichnisse angelegt hat, bekommt dazu eine Fehlermeldung - diese werden nicht automatisch übernommen und müssen manuell korrekt kopiert werden. Siehe dazu auch die Informationen zum Ordner 0_userdata.0 im Post #3 in diesem Thread!

                            W Offline
                            W Offline
                            wye
                            schrieb am zuletzt editiert von
                            #51

                            @sigi234
                            Super! Vielen Dank! Mit „iobroker file sync“ klappt es.
                            Es wurde sogar angezeigt, dass 2 Files in /vis geupdatet wurden :)

                            1 Antwort Letzte Antwort
                            0
                            • D Offline
                              D Offline
                              dtp
                              schrieb am zuletzt editiert von dtp
                              #52

                              Hier mal ein kleines Video meiner Visualisierung für's iPhone X.
                              EDIT: Link gelöscht.

                              ioBroker im Docker-Container auf Synology DiskStation DS718+, HomeMatic IP über CCU3, IKEA Dirigera inkl. Matter, Apple Homekit, Amazon Alexa.

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


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              910

                              Online

                              32.6k

                              Benutzer

                              81.9k

                              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