Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. English
    3. Visualization
    4. getting started with visualisations

    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

    getting started with visualisations

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

      My, it's quiet in here.

      Having just written my first adaptor, https://github.com/Taragorm/ioBroker.evohome, I'd like to make some custom Visulaisations for it.

      I know enough JS, HTML and CSS to know how to do the business logic. I don't (I think) need help with that.

      I've pulled the template, but there seems to be a lot there I don't understand, doubtless due to a lot of libraries I'm not familiar with. I can guess at some of the following, but I prefer not to guess 🙂

      Specifics would be:

      • How must a widget register itself/what interface must it provide to be loaded into ioBroker.vis?
      • How are configuration parameters provided?
      • Do you have to provide a custom editor view? Can you, if you need to?
      • How does live data subscription work?
      • Conversely, how are values written back to states?

      If there's a good description somewhere (even in German, that I can use Google Translate on), I'm happy to go and read it before asking further questions.

      -T

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

        @Taragorm

        How must a widget register itself/what interface must it provide to be loaded into ioBroker.vis?

        Adapter has to have the "widgets" folder in the iobroker.evohome and inside must be evohome.html

        How are configuration parameters provided?

        https://github.com/ioBroker/ioBroker.template/blob/master/VIS/widgets/template.html#L13

        Do you have to provide a custom editor view? Can you, if you need to?

        What do you mean with custom editor? Custom editor of the parameter field, like color picker or OID Selector?

        How does live data subscription work?

        You have 2 ways:

        • build in EJS engine, like this one https://github.com/ioBroker/ioBroker.template/blob/master/VIS/widgets/template.html#L114 <%== vis.states[this.data.attr('oid') + '.val'] %>
          Description: https://v2.canjs.com/guides/EJS.html
        • or via javascript code like this one: https://github.com/ioBroker/ioBroker.template/blob/master/VIS/widgets/template/js/template.js#L47

        Don't forget to unsubscribe, when the widget will be destroyed. This can be done by storing of all OIDs and onChange function in the main div:

                        // remember all ids, that bound
                        $div.data('bound', bound);
                        // remember bind handler
                        $div.data('bindHandler', onChange);
        

        Example here: https://github.com/ioBroker/ioBroker.vis-hqwidgets/blob/master/widgets/hqwidgets/js/hqwidgets.js#L1436

        Elsewise by page destroy you function will still exist and consume browser resources.

        Conversely, how are values written back to states?

        https://github.com/ioBroker/ioBroker.vis-hqwidgets/blob/master/widgets/hqwidgets/js/hqwidgets.js#L1468

        Only from JS code

        vis.setValue(data.oid, data.value);
        
        1 Reply Last reply Reply Quote 0
        • T
          Taragorm last edited by

          Thanks, I will do some more reading.

          What do you mean with custom editor? Custom editor of the parameter field, like color picker or OID Selector?

          Yes. Probably won't need it right away, but I like to know "how stuff works".

          -T

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

            @Taragorm There is no easy possibility for that, but your callback will be called after the value set:
            if you define the attribute like attrName[defaultValue]/type/callbackName
            Example: https://github.com/ioBroker/ioBroker.vis-hqwidgets/blob/master/widgets/hqwidgets.html#L41

            So the callback must exists vis.binds.evohome.callbackName, like here:
            https://github.com/ioBroker/ioBroker.vis-hqwidgets/blob/master/widgets/hqwidgets/js/hqwidgets.js#L3069

            Of course you can overload the code and bind your own click handler on the button, but for that you must know, how vis editor works, and jquery.... and naming.

            1 Reply Last reply Reply Quote 0
            • T
              Taragorm last edited by

              Thanks. I'll leave that alone for now then. 🙂

              1 Reply Last reply Reply Quote 0
              • T
                Taragorm last edited by

                Another question - what is the best procedure for visualisation development?

                I have a local project (under home) that contains the development package; I can install that using the customURL function.

                So far, so good.

                After I've changed the package, and re-installed, nothing seems to change, so there must be more to it.

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

                  @Taragorm Have you seen that? https://github.com/ioBroker/ioBroker/wiki/How-to-debug-vis-and-to-write-own-widget-set

                  T S 2 Replies Last reply Reply Quote 0
                  • T
                    Taragorm @Bluefox last edited by

                    @Bluefox I have, and I think I followed the instructions, but if I reinstall my adaptor using "from custom URL", nothing much seems to change, even if I restart iobroker.

                    Clearly I'm doing something wrong?

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

                      @Taragorm I do it like this.

                      My folder structure is like this one:

                      /opt/iobroker
                              iobroker.my-new-adapter
                              node_modules
                                     ...
                                     iobroker.js-controle
                                     iobroker.xxxx
                                     ...
                      

                      Then I install my new adapter by writing npm i iobroker.my-new-adapter in /opt/iobroker.
                      As result the npm creates a sym-link to my developer folder:

                      /opt/iobroker
                              iobroker.my-new-adapter
                              node_modules
                                     ...
                                     iobroker.js-controle
                                     iobroker.my-new-adapter (symlink)
                                     iobroker.xxxx
                                     ...
                      

                      after that I develop my adapter as usual in /opt/iobroker/iobroker.my-new-adapter even as a git repo.

                      after every change I write iobroker r vis && iobroker u vis This should work 100%.

                      Additionally I can write iobroker visdebug my-new-adapter and if I see the output
                      Disable cache I restart the iobroker (only for the first time).

                      After that I can directly modify the file /opt/iobroker/iobroker-data/files/vis/widgets/my-new-adapter.html and after every browser refresh it will be loaded anew from disk. So you can fast see your changes.

                      But, the changes in /opt/iobroker/iobroker-data/files/vis/widgets/my-new-adapter.html must be copied to /opt/iobroker/iobroker.my-new-adapter/widgets/ manually and you may not call iobroker u vis till you do that, else they will be overwritten

                      T 1 Reply Last reply Reply Quote 0
                      • T
                        Taragorm last edited by

                        Thanks - that's exactly what I needed to know

                        1 Reply Last reply Reply Quote 0
                        • T
                          Taragorm last edited by

                          Hmm.

                          The module is iobroker.vis-taragorm

                          iobroker@iobrokerdev /o/iobroker> iobroker visdebug vis-taragorm
                          
                          /opt/iobroker/node_modules/iobroker.js-controller/lib/setup/setupVisDebug.js:64
                                      if (!adapterDir) throw 'Adapter not found. Tried: ' + adapterNames2Try.join(', ');
                                                       ^
                          Adapter not found. Tried: vis-vis-taragorm, vis-taragorm
                          iobroker@iobrokerdev /o/iobroker> 
                          
                          

                          however, vis-taragorm.html does exist in widgets, and there is an instance installed ok. I can't see my widget in the list though.

                          Possiby unrelated, I should also note that I got some errors installing (and many warnings, but I didn't include those):

                          unix_dgram.target.mk:101: recipe for target 'Release/obj.target/unix_dgram/src/unix_dgram.o' failed
                          make: *** [Release/obj.target/unix_dgram/src/unix_dgram.o] Error 1
                          make: Leaving directory '/opt/iobroker/node_modules/unix-dgram/build'
                          gyp ERR! build error 
                          gyp ERR! stack Error: `make` failed with exit code: 2
                          gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
                          gyp ERR! stack     at ChildProcess.emit (events.js:197:13)
                          gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
                          gyp ERR! System Linux 4.9.0-8-amd64
                          gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
                          gyp ERR! cwd /opt/iobroker/node_modules/unix-dgram
                          gyp ERR! node -v v11.10.1
                          gyp ERR! node-gyp -v v3.8.0
                          gyp ERR! not ok 
                          npm WARN optional SKIPPING OPTIONAL DEPENDENCY: unix-dgram@0.2.3 (node_modules/unix-dgram):
                          npm WARN optional SKIPPING OPTIONAL DEPENDENCY: unix-dgram@0.2.3 install: `node-gyp rebuild`
                          npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
                          
                          

                          The last message implies this isn't fatal, but I'm new to NodeJS...

                          The dev env is Debian Stretch

                          iobroker@iobrokerdev ~/projects> uname -a
                          Linux iobrokerdev 4.9.0-8-amd64 #1 SMP Debian 4.9.130-2 (2018-10-27) x86_64 GNU/Linux
                          
                          
                          1 Reply Last reply Reply Quote 0
                          • Bluefox
                            Bluefox last edited by

                            Участник @Taragorm написал в getting started with visualisations:

                            /opt/iobroker/node_modules/iobroker.js-controller/

                            It would be easier, if I can see the repo on github.
                            Do you have file /opt/iobroker/node_modules/iobroker.vis-taragorm/widgets/taragorm.html ?

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

                              BTW, you can deliver in your adapter https://github.com/Taragorm/ioBroker.evohome the widgets too. It is even better.

                              1 Reply Last reply Reply Quote 0
                              • T
                                Taragorm last edited by

                                Thanks for the quick response!

                                The repo is up at: https://github.com/Taragorm/ioBroker.vis-taragorm

                                It's mostly template right now.

                                This is intended for some generic visualisations (and to practice in) so I didn't include it in the evohome repo. I'll add some specific visualisations there once I know what I'm doing.

                                1 Reply Last reply Reply Quote 0
                                • T
                                  Taragorm @Bluefox last edited by

                                  @Bluefox

                                  iobroker@iobrokerdev ~/projects> ls -l /opt/iobroker/node_modules/iobroker.vis-taragorm/widgets
                                  total 12
                                  drwxrwxrwx+ 4 iobroker iobroker 4096 Mar  2 10:26 vis-taragorm/
                                  -rw-r--r--+ 1 iobroker iobroker 6521 Mar  2 11:47 vis-taragorm.html
                                  
                                  

                                  Seems to be there...

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

                                    @Taragorm No matter. With iobroker r vis && iobroker u vis it should work.
                                    Not Fast, but work.

                                    Just tried to execute (windows):
                                    2797695c-1307-4c36-a736-32d4f35862c9-image.png
                                    and cannot see any errors

                                    T 1 Reply Last reply Reply Quote 0
                                    • T
                                      Taragorm last edited by

                                      Something broken with my install, maybe?

                                      I added a bit of logging to the empty catch block (line 24 here):

                                          this.enableDebug = function (widgetset) {
                                              console.log( "widgetset=" + widgetset );
                                      
                                              if (widgetset) {
                                                  // Try to find out the adapter directory out of a list of options
                                                  var adapterDir;
                                                  var adapterNames2Try = ['vis-' + widgetset, widgetset];
                                                  if (adapterNames2Try[0] === adapterNames2Try[1]) adapterNames2Try.splice(1, 1);
                                                  for (var i = 0; i < adapterNames2Try.length; i++) {
                                                      try {
                                                          var adapterDir2Try = tools.getAdapterDir(adapterNames2Try[i]);
                                                          // Query the entry
                                                          var stats = fs.lstatSync(adapterDir2Try);
                                      
                                                          console.log(stats.toString() );
                                      
                                                          // Is it a directory?
                                                          if (stats.isDirectory()) {
                                                              //found it!
                                                              adapterDir = adapterDir2Try;
                                                              break;
                                                          }
                                                      } catch (e) {
                                                          console.error(e);
                                                      }
                                                  }
                                      
                                                  if (!adapterDir) throw 'Adapter not found. Tried: ' + adapterNames2Try.join(', ');
                                              }
                                      
                                      

                                      and got this:

                                      obroker@iobrokerdev /o/iobroker> iobroker visdebug vis-taragorm
                                      widgetset=vis-taragorm
                                      TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be one of type string, Buffer, or URL. Received type object
                                          at Object.lstatSync (fs.js:857:3)
                                          at VisDebug.enableDebug (/opt/iobroker/node_modules/iobroker.js-controller/lib/setup/setupVisDebug.js:52:36)
                                          at /opt/iobroker/node_modules/iobroker.js-controller/lib/setup.js:2464:30
                                          at Object.connected (/opt/iobroker/node_modules/iobroker.js-controller/lib/setup.js:3145:70)
                                          at Socket.<anonymous> (/opt/iobroker/node_modules/iobroker.js-controller/lib/states/statesInMemClient.js:87:68)
                                          at Socket.Emitter.emit (/opt/iobroker/node_modules/iobroker.js-controller/node_modules/component-emitter/index.js:133:20)
                                          at Socket.emit (/opt/iobroker/node_modules/iobroker.js-controller/node_modules/socket.io-client/lib/socket.js:138:10)
                                          at Socket.onconnect (/opt/iobroker/node_modules/iobroker.js-controller/node_modules/socket.io-client/lib/socket.js:335:8)
                                          at Socket.onpacket (/opt/iobroker/node_modules/iobroker.js-controller/node_modules/socket.io-client/lib/socket.js:232:12)
                                          at Manager.<anonymous> (/opt/iobroker/node_modules/component-bind/index.js:21:15)
                                      [object Object]
                                      
                                      /opt/iobroker/node_modules/iobroker.js-controller/lib/setup/setupVisDebug.js:67
                                                  if (!adapterDir) throw 'Adapter not found. Tried: ' + adapterNames2Try.join(', ');
                                                                   ^
                                      Adapter not found. Tried: vis-vis-taragorm, vis-taragorm
                                      
                                      
                                      • T
                                      Bluefox 1 Reply Last reply Reply Quote 0
                                      • Bluefox
                                        Bluefox @Taragorm last edited by

                                        @Taragorm Can it be, that you have js-controller 1.4.2? Please update to 1.5.7

                                        1 Reply Last reply Reply Quote 0
                                        • T
                                          Taragorm last edited by

                                          Certainly looks to be 1.4.2

                                          iobroker@iobrokerdev /o/iobroker> npm outdated
                                          Package                 Current  Wanted  Latest  Location
                                          iobroker.js-controller    1.4.2   1.4.2   1.5.7  iobroker.inst
                                          yargs                     7.1.0   7.1.0  13.2.2  iobroker.inst
                                          
                                          

                                          main iobroker package calls for "stable", rather than a particular rev - do I just alter the depend there and npm update - or is there a "proper" way to do it?

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

                                            @Taragorm via npm is ok. Just stop iob before update

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            825
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            4
                                            43
                                            4838
                                            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