getting started with visualisations

Taragorm

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

@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);

Taragorm

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

@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.

Taragorm

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

Taragorm

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

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

Taragorm

@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

@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

Taragorm

Thanks - that's exactly what I needed to know

Taragorm

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

Bluefox

Участник @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 ?

Bluefox

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

Taragorm

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.

Taragorm

@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

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

Just tried to execute (windows):

and cannot see any errors

Taragorm

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

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

Taragorm

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

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

NEWS

getting started with visualisations

Support us

1.4k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts

NEWS

getting started with visualisations

Support us

1.4kOnline

30.4kUsers

76.6kTopics

1.2mPosts

1.4k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts