Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Wie aus einem HTML-Widget ein neues Widget machen?

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Wie aus einem HTML-Widget ein neues Widget machen?

    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Communicate last edited by

      Hallo Bluefox, hast du einen tip für mich?

      von unterwegs gesendet

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

        @Communicate:

        Hallo Bluefox, hast du einen tip für mich?

        von unterwegs gesendet `
        Eigentlich man kann nur in 4 Dateien Version manuell hochzählen:

        • package.json

        • io-package.json

        • /widgets/xxx.html

        • /widgets/xxx/js/xxx.js

        Aber du kannst auch Gruntfile.js von hier nehmen:

        https://github.com/ioBroker/ioBroker.vi … untfile.js

        (Habe Fehler gefunden)

        1 Reply Last reply Reply Quote 0
        • Lenny.CB
          Lenny.CB Most Active last edited by

          @Bluefox:

          Schritt 1. - Template runterladen

          Runterladen https://github.com/ioBroker/ioBroker.vi … master.zip.

          Schritt 2 - Template auspacken

          Auspacken in /opt/iobroker/node_modules

          Schritt 3 - Template Verzeichnis umbenennen

          Umbenennen "/opt/iobroker/node_modules/ioBroker.vis-template-master" ins "/opt/iobroker/node_modules/iobroker.vis-communicate"

          Schritt 4 - npm Pakete laden

            cd /opt/iobroker/node_modules/iobroker.vis-communicate
  npm install

          Schritt 5 - Template selbst umbenennen

          grunt rename –name=communicate --author=Communicate --email=dominic@bialas24.de

          Schritt 6 - style.css befühlen

          Die Datei /opt/iobroker/node_modules/ioBroker.vis-communicate/widgets/communicate/css/style.css

          mit

          ! @font-face { font-family: 'CF'; src: url('Cicle Fina.ttf'); } ! .communicate-ul { margin:0px; padding:0px; list-style-type:none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } ! .communicate-var_nav { position:relative; background:#e2e1f4; width:361px; height:70px; margin-bottom:50px; } ! .communicate-link_bg { width:70px; height:70px; position:absolute; ! background:#7A56A0; color:white; ! z-index:2; } ! .communicate-link_bg-i { position:relative; } ! .communicate-link_title { position:absolute; width:100%; z-index:3; color:#7A56A0; } .communicate-link_title:hover .icon { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } ! .communicate-var_nav:hover .link_bg { width:100%; background:#E01B6A; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ! .communicate-var_nav:hover { font-weight:bold; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out; } ! .communicate-icon { position:relative; width:70px; height:70px; text-align:center; color:white; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; float:left; transition:all .5s ease-in-out; float:left; } ! .communicate-left { text-align:left; } .communicate-right { text-align: right; } .communicate-center { text-align: center; } .communicate-justify { text-align: justify; } .communicate-start { text-align: start; } .communicate-img { margin-top: 0.7em; } .communicate-p { margin-top: 0.7em; padding-left: 80px; } !
          Befüllen.

          Schritt 6 - communicate.html befühlen

          Die Datei /opt/iobroker/node_modules/ioBroker.vis-communicate/widgets/communicate.html

          mit

          Befüllen.

          Schritt 7 - communicate.js löschen

          Die Datei /opt/iobroker/node_modules/ioBroker.vis-communicate/widgets/communicate/js/communicate.js

          und Verzeichnis /opt/iobroker/node_modules/ioBroker.vis-communicate/widgets/communicate/js/

          löschen, weil nicht benutzt wird.

          Schritt 8 - Image einfügen

          Alles was in /opt/iobroker/node_modules/ioBroker.vis-communicate/widgets/communicate/img liegt

          löschen und die Datei sani_heating_temp.svg dorthin kopieren.

          Schritt 9 - Font einfügen

          Die Datei Cicle Fina.ttf ins /opt/iobroker/node_modules/ioBroker.vis-communicate/widgets/communicate/css kopieren.

          Schritt 10 - Debug einschalten und Kode uploaden

          cd /opt/iobroker
iobroker visdebug communicate

          Hier sind Windows-Ausgaben:

          ! ````
          C:\pWork>iobroker visdebug communicate
          ! C:\pWork>node node_modules/iobroker.js-controller/iobroker.js visdebug communicate
          Upload "C:\pWork\node_modules\iobroker.js-controller\node_modules\iobroker.vis\www\index.html.original"
          Upload "C:\pWork\node_modules\iobroker.js-controller\node_modules\iobroker.vis\www\edit.html.original"
          Modify "C:\pWork\node_modules\iobroker.js-controller\node_modules\iobroker.vis\www\cache.manifest"
          Modify config.js
          Upload C:/pWork/node_modules/iobroker.vis-communicate/widgets
          Upload "C:/pWork/node_modules/iobroker.vis-communicate/widgets/communicate/css/style.css"
          Upload "C:/pWork/node_modules/iobroker.vis-communicate/widgets/communicate/img/sani_heating_temp.svg"
          Upload "C:/pWork/node_modules/iobroker.vis-communicate/widgets/communicate/js/communicate.js"
          Upload "C:/pWork/node_modules/iobroker.vis-communicate/widgets/communicate.html"

          
Das muss man machen bei jeder Änderung in irgendeine Datei in ****C:/pWork/node_modules/iobroker.vis-communicate/widgets**** damit man die Änderungen in vis sieht.

.

.

. `

          ######################################################################################

          hallo Bluefox, tolle Anleitung! Habe das mal ausprobiert aber leider werden mir die Widges nicht im vis-Editor angezeigt.

          Im Admin ist es vorhanden. Auch eine Instanz ist da und läuft.

          Was kann hier schief laufen? Ist alles wie in deiner Beschreibung durch gelaufen.

          Bis auf (Schritt 10 der Anleitung):

          root@lemaker:/opt/iobroker# iobroker visdebug lenny
Upload "/opt/iobroker/node_modules/iobroker.vis/www/index.html.original"
Upload "/opt/iobroker/node_modules/iobroker.vis/www/edit.html.original"
Modify "/opt/iobroker/node_modules/iobroker.vis/www/cache.manifest"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/css/style.css"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/img/sani_heating_temp.png"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/js/lenny.js"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny.html"
root@lemaker:/opt/iobroker#

          bei mir fehlt nach der Ausgabe in deiner Anleitung:

          Modify config.js

          Grüße, Lenny

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

            ` > bei mir fehlt nach der Ausgabe in deiner Anleitung:

            Код:

            Modify config.js `
            Cache gelöscht?

            1 Reply Last reply Reply Quote 0
            • Lenny.CB
              Lenny.CB Most Active last edited by

              @Bluefox:

              Cache gelöscht? ` npm chache clean + Browser-Cache ?

              muss das bei jedem neunen "iobroker visdebug" gemacht werden?

              Browser cache löschen

hat keine Änderung gebracht

              npm chache clean

muss ich Abend probieren, habe aus der Ferne "noch" keinen Konsolenzugriff

              Grüße, Lenny

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

                @Lenny.CB:

                @Bluefox:

                Cache gelöscht? ` npm chache clean + Browser-Cache ?

                muss das bei jedem neunen "iobroker visdebug" gemacht werden?

                Browser cache löschen

hat keine Änderung gebracht

                npm chache clean

muss ich Abend probieren, habe aus der Ferne "noch" keinen Konsolenzugriff

                Grüße, Lenny `
                Nein. Kannst du selbst checken, ob in /opt/iobroker/iobroker-data/files/vis/js/config.js dein Widget-Set aufgelistet ist?

                1 Reply Last reply Reply Quote 0
                • Lenny.CB
                  Lenny.CB Most Active last edited by

                  @Bluefox:

                  Cache gelöscht? `
                  Jupp, Browser-Cache und npm cache clean gemacht…

                  selbes Ergebnis.

                  root@lemaker:/opt/iobroker# iobroker visdebug lenny
Upload "/opt/iobroker/node_modules/iobroker.vis/www/index.html.original"
Upload "/opt/iobroker/node_modules/iobroker.vis/www/edit.html.original"
Modify "/opt/iobroker/node_modules/iobroker.vis/www/cache.manifest"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/css/style.css"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/img/sani_heating_temp.png"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/js/lenny.js"
Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny.html"
root@lemaker:/opt/iobroker#

                  @Bluefox:

                  Nein. Kannst du selbst checken, ob in /opt/iobroker/iobroker-data/files/vis/js/config.js dein Widget-Set aufgelistet ist? `
                  Habe in der Datei geschaut. Ist ein Widget-Set angelegt. Wird dennoch nicht im VIS angezeigt.

                  var visConfig = {
    "widgetSets": [
        "bars",
        "basic",
        "hqwidgets",
        "jqplot",
        {
            "name": "jqui-mfd",
            "depends": [
                "basic",
                "jqui"
            ]
        },
        {
            "name": "jqui",
            "depends": [
                "basic"
            ]
        },
        {
            "name": "lenny",
            "depends": []
        },
        {
            "name": "metro",
            "depends": [
                "jqui-mfd",
                "basic"
            ]
        },
        "plumb",
        "rgraph",
        "tabs",
        "timeandweather",
        "weather-adapter"
    ]
};
if (typeof exports != 'undefined') {
    exports.config = visConfig;
} else {
    visConfig.language = window.navigator.userLanguage || window.navigator.language;
}
                  1 Reply Last reply Reply Quote 0
                  • Lenny.CB
                    Lenny.CB Most Active last edited by

                    so bin weiter gekommen…

                    habe mal eine höhere node-Version drauf gepackt....

                    von````
                    root@lemaker:/opt/iobroker# node -v
                    v0.10.22

                    auf
                    root@lemaker:~# node -v
                    v0.12.6

                    
nun läuft auch````
iobroker visdebug lenny
````und die fehlende Zeile "Modify config.js" ist nun auch da.

                    root@lemaker:/opt/iobroker# iobroker visdebug lenny
                    Upload "/opt/iobroker/node_modules/iobroker.vis/www/index.html.original"
                    Upload "/opt/iobroker/node_modules/iobroker.vis/www/edit.html.original"
                    Modify "/opt/iobroker/node_modules/iobroker.vis/www/cache.manifest"
                    Modify config.js
                    Upload /opt/iobroker/node_modules/iobroker.vis-lenny/widgets
                    Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/css/style.css"
                    Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/img/sani_heating_temp.png"
                    Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny/js/lenny.js"
                    Upload "/opt/iobroker/node_modules/iobroker.vis-lenny/widgets/lenny.html"
                    root@lemaker:/opt/iobroker#

                    
im VIS-Editor werden nun auch 13 Widget-Sätze geladen. Mein erstellter Satz wir auch angezeigt.

Nur leider ohne Inhalt. Werd mal weiter probieren…
                    1 Reply Last reply Reply Quote 0
                    • B
                      BuzzIbauz last edited by

                      Hallo Liebe Leute,

                      auch ich versuche mich gerade daran ein eigenens widget für einen Wand Thermostat zu erstellen, leider aber nur mit mäßigem Erfolg. ERstemal Danke @Bluefox für die tolle Anleitung! Das hat soweit geklappt, und ich kann auch mein Widget schon im Vis sehen und benutzen, allerdings schaffe ich es leider nicht, dass mein Javascipt läuft. Ich hab schon alles mögliche versucht, aber wenn ich im laufenden betrieb mit dem "prüfen" Feature von Chrome versuche zu debuggen finde ich meine .js Datei gar nicht. Ich hoffe ihr könnt mir helfen, denn ich komm selber einfach nicht drauf. Im Anhang findet ihr ein Zip mit meinem Widget vom Rasperry und dann nochmal das file "slider.html" das zeigt wie es aussehen sollte.

                      Vielen Dank schon mal für eure Mühen!
                      1366_slider.zip
                      1366_iobroker.vis-buzzhome-wandthermostat.zip

                      1 Reply Last reply Reply Quote 0
                      • D
                        dtp last edited by

                        Hi,

                        ich würde gerne das hier in ein fertiges Widget zur Steuerung meiner Heizung umgestalten:

                        996_2017-02-26_10h38_33.gif

                        Im Moment habe ich das Ganze noch als einen View in vis realisiert, den ich über ein Dialog-Widget aufrufe (siehe http://forum.iobroker.net/viewtopic.php?f=21&t=4199&p=40139#p40139). Nur leider ist der Bildaufbau ziemlich langsam. Daher dachte ich daran, das Dialogfenster in ein Widget umzugestalten.

                        Geht das?

                        Gruß,

                        Thorsten

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        833
                        Online

                        31.7k
                        Users

                        79.8k
                        Topics

                        1.3m
                        Posts

                        5
                        79
                        16031
                        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