Reacticz dashboard: no install, no hassle

[ptitneo]

Hello,

I've made a minimalistic web-based dasboard. I tried to make it very clean and simple, with large buttons, to use on smartphones mostly. Something that's fast and as reliable as possible (it's written in React and works with MQTT). It's entirely configurable from the app: no file to edit, no webserver to configure (but you'll still need an MQTT broker and Domoticz MQTT device). It's a work in progress but it currently looks like this:

Reaticz.png (20.98 KiB) Viewed 25750 times

Each device stores its configuration locally in the browser, which means that you can compose a different dashboard on each device of your household. Widgets can be arranged and resized directly on the dashboard. And you don't even need to host the app

If you want to give it a try, just visit http://reacticz.t0m.fr, and start configuring it with your local settings! All your configuration data stays on your device and nowhere else. If you already have your MQTT broker running (with websockets enabled), it should only take a few seconds to get a working dashboard.

Note: I've only written support for a few basic device types so far (switches, dimmers, Hue, weather, blinds). Groups and scenes are not supported yet (see this post where I'm trying to figure it out).

Feedback welcome!
Cheers,

PS: the source is on github but I havent written the doc yet

[Justintime]

Looks clean and great WAF factor. I will hook in when you have implemented the scenes.

Thanks

[felix63]

Would love to try. I think I have MQTT broker running but how do I find the required setting?

[ptitneo]

Would love to try. I think I have MQTT broker running but how do I find the required setting?

Sounds like you have the hard part done. Next you need to make sure you have a proxy configured in Domoticz. Also, check out mosquitto.conf on your broker to make sure you have websockets enabled.

For example, my own MQTT broker is running on a Diskstation NAS but many users here chose to have it on their Domoticz server. It shouldn't make any difference. My mosquitto.conf file looks like this:

Code: Select all

listener 1883
protocol mqtt

listener 9001
protocol websockets

So, if we say the broker's ip is 192.168.0.123, then in Reacticz config screen the MQTT URL should be ws://192.168.0.123:9001
The other required information is your Domoticz server url and port, which is the same as what you type to see Domoticz dashboard.

I will hook in when you have implemented the scenes.

Coming soon!

[ptitneo]

Quick update: scenes and groups are now supported !

dimmer_scene_group.png (6.32 KiB) Viewed 25597 times

First widget is a dimmer-type, that wasn't clear in the previous screenshot (just tap or slide on its surface to set the value).
Gray corners on the second item mean it's a scene (ie push-button behavior).
Third item is a group switch. Yellow corners mean the group is in a mixed state (when it's all on/off it turns yellow or light gray, like a regular switch). State is updated in real time.

Also, a couple of tips:
- you can add the page to your mobile device's home screen for an app-like experience (ie fullscreen, without any browser chrome)
- in the info panel you can generate a handy link that'll let you transfer your exact configuration to another device

Cheers,

[bbqkees]

Isn't this very insecure by running all this via your server?

[ptitneo]

Isn't this very insecure by running all this via your server?

Hey bbqkees, thanks for asking. This is a static app, nothing runs on the server My server (which is actually github with a custom domain name) only hosts static files (html/css/javascript). It is your own web browser that stores your personal configuration, and talks to Domoticz via MQTT and JSON. No personal data is ever sent to the server hosting the static files. In other words, your configuration and all communications remain on your local network exclusively. You can also download the files from github and host a copy yourself on a local webserver, it would make no difference. I only created the public server to skip that step (and provide updates).

Cheers,

[blauwebuis]

There is a ridiculous amount of design talent on this forum. Very clean.

[ptitneo]

Thanks blauwebuis

Just a quick update to let you know that I finally wrote some doc in the github rep, and made little screen captures of the different widgets if you're interested in seeing them in action.

[NietGiftig]

Thanks for this insight in technology, it keeps amaze me!!

I have tried Reacticz out on my Desktop and on a tablet and it worked right out the box.
I have already running node.js and node.red on my Domoticz server, so Iḿ going to try to install it local.
Being a complete web-design and javascript moron my question is: are you including more widgets, or have I do this my-self?
I assume it would be the best to use the node.js webserver when I do a local install?
Any directions you can give me?

- you can add the page to your mobile device's home screen for an app-like experience (ie fullscreen, without any browser chrome)

Nice, How?
no browser necessary?

[ptitneo]

I have tried Reacticz out on my Desktop and on a tablet and it worked right out the box.

Nice! Glad it works for you too

I have already running node.js and node.red on my Domoticz server, so Iḿ going to try to install it local.
Being a complete web-design and javascript moron my question is: are you including more widgets, or have I do this my-self?
I assume it would be the best to use the node.js webserver when I do a local install?
Any directions you can give me?

Sure, to build your own copy of Reacticz you need to clone the github repository and run

Code: Select all

npm install

then

Code: Select all

npm run build

in the project directory and you'll get the resulting files in the /build folder (or you can download the pre-built files from the gh-pages branch of the github repo). Then simply move these files somewhere you can access them. You can serve them with your node.js server as you suggested, but the www folder in domoticz should also work just fine.

Regarding additional widgets, the proper way to add them yourself would be to contribute to the project via github pull requests. This implies some familiarity with github and Javascript coding. Since it's written in React, if you're willing to give it a shot I'd suggest that you also read the React documentation and then dive into Reacticz.

If that's too much work, you can (and should) also file an issue on the repository, requesting the new widget/feature, and if I have some spare time I can try to give it a shot

- you can add the page to your mobile device's home screen for an app-like experience (ie fullscreen, without any browser chrome)

Nice, How?
no browser necessary?

A browser is actually used, but the page will show without the usual browser interface (no URL bar at the top, just like my screenshot in the first post). The procedure to add a webpage to the homescreen varies depending on your device, there is a little guide here.

Cheers,

[NietGiftig]

A browser is actually used, but the page will show without the usual browser interface (no URL bar at the top, just like my screenshot in the first post). The procedure to add a webpage to the homescreen varies depending on your device, there is a little guide here.

If everything in life was so simple!!
Thanks, I always assumed that that that option put a web-url as Icon on the tablet.
learning, everyday

[NietGiftig]

I have Linux on my computer
After git clone I have tried to build/start Reacticz on my desktop, node.js is installed
The npm install ended with

Code: Select all

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/react-scripts/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

After that I did npm start

Code: Select all

ng@L-Mint-KDE:/mnt/Data/Develop/Domoticz/reacticz > npm start

> [email protected] start /mnt/Data/Develop/Domoticz/reacticz
> react-scripts start

sh: 1: react-scripts: Permission denied

npm ERR! Linux 3.19.0-32-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 126
npm ERR! 
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the reacticz package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs reacticz
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls reacticz
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/Data/Develop/Domoticz/reacticz/npm-debug.log

I have a permission error, not sure where the react-scripts are
The clone, install and start are done under my standard username
This is the error log

Code: Select all

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/mnt/Data/Develop/Domoticz/reacticz/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
10 verbose lifecycle [email protected]~start: CWD: /mnt/Data/Develop/Domoticz/reacticz
11 silly lifecycle [email protected]~start: Args: [ '-c', 'react-scripts start' ]
12 silly lifecycle [email protected]~start: Returned: code: 126  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `react-scripts start`
14 verbose stack Exit status 126
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /mnt/Data/Develop/Domoticz/reacticz
17 error Linux 3.19.0-32-generic
18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
19 error node v6.9.2
20 error npm  v3.10.9
21 error code ELIFECYCLE
22 error [email protected] start: `react-scripts start`
22 error Exit status 126
23 error Failed at the [email protected] start script 'react-scripts start'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the reacticz package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     react-scripts start
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs reacticz
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls reacticz
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

[ptitneo]

Hmm I think you are correct, you might need superuser permission. Try installing and running with sudo.

[NietGiftig]

Hmm I think you are correct, you might need superuser permission. Try installing and running with sudo.

Running sudo npm install and sudo npm start gives the same result

Are you running node.js on Linux or Windows?

[ptitneo]

Running sudo npm install and sudo npm start gives the same result

Are you running node.js on Linux or Windows?

Neither, I wrote Reacticz on a Mac. But I did build it successfully on Linux too. I might have broken the package.json file at some point, I'll check tonight.

[ptitneo]

Ok so it might be because react-scripts isn't executable. I've updated the dependencies in package.json so that npm fetches a more recent version (the issue has been fixed in v0.8.4 but I was using v0.7.0). The easiest for you to get the updated version would be run

Code: Select all

git checkout

and then

Code: Select all

npm update

Alternatively you could try

Code: Select all

chmod a+x node_modules/.bin/react-scripts

(all of these from your reacticz folder).

[NietGiftig]

Hah, problem solved.
Do not install this on a ntfs formatted drive if you run linux, your permissions are screwed then.
Did a new install now on an EXT4 drive, and all is well

Now running local on my desktop
Thanks for your assistance

I have now npm build dasticz and got a build dir
Second (noob?) question:
How to deploy this on my domoticz server
Where do I place the build dir on my domoticz server.
You said an option was the domoticz www directory, but I assume not between all domoticz files?
Can (must?) I put them in a reacticz directory ?
Please some more advice

[ptitneo]

Congrats on getting it running! Yes, you can put the files inside your build dir under something like www/reacticz on your domoticz install, and then you should be able to access reacticz at http://you-domoticz-ip:port/reacticz

[NietGiftig]

A note for other people like me, not familiar with www/js programming:
If you deploy this on your domoticz server in a subdir from the Domoticz www dir:
before you build Reacticz edit the packet.json and change the homepage to

Code: Select all

  "homepage": "http://localhost:8080/reacticz",

then you can call Reacticz with

Code: Select all

http:// ip-domoticz :8080/reacticz/