Reacticz

A Domoticz dashboard as a static web app, using MQTT and React.

TL;DR

Have a Domoticz home automation server with MQTT gateway? Open this page and start building your custom dashboard!

All widgets are draggable and resizeable. See more screenshots on the wiki.

Requirements

• A Domoticz server running on your home network.
• An MQTT broker also running locally. For example Mosquitto can easily be installed on Raspberry Pi or Synology Diskstation. Make sure that websockets are enabled, as described in these articles.
• A properly configured MQTT Client gateway in Domoticz, to bind the above two (see Domoticz Wiki).

Optionally, you can build this project and host the resulting files on a webserver of your choosing. Or you can use the public Reacticz url that points at the gh-pages branch of this repository.

If you want to use https/wss, a few extra steps are required which are described in this article on the wiki.

Getting started

If you only want to use Reacticz without modifying it, you can simply use the public server. If you prefer having a local copy, you can download a pre-built release package and copy the files in your domoticz/www folder.

Either way, once you're there, you can jump to Configuration.

Running, building, testing

If you want to build this project yourself, for example to make some changes to Reacticz, use the commands below. These are provided by Create React App, for more details please refer to the full guide here.

Important note

By default, Reacticz builds assuming it will be hosted under a reacticz/ subpath on the web server. This allows you to simply copy the build folder in your Domoticz www directory, rename it to reacticz, and access Reacticz at http://<your domoticz ip>:8080/reacticz.

If you want to build Reacticz to work from a different path, or at the root of the server (like the public server does), you'll need to change the homepage property in package.json to make sure it matches the URL where your build will be deployed (or relative paths in the app might break).

For example, if you want to deploy to a dedicated webserver that's hosted at 192.168.1.1, the homepage property should be set as follows:

"homepage": "http://192.168.1.1",

In the project directory, you can run:

npm install

Downloads and installs the required dependencies.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.

Configuration

When opening Reacticz for the first time on a new device, you will be redirected to the Server settings screen. Just enter the address and port of your Domoticz server and MQTT broker and click Save (see Requirements). If the configuration is correct you will then land on the home screen (an empty dashboard).

Note on personal data

All configuration settings are stored on your web browser's localStorage only and are not shared with the rest of the world. When using the dashboard, your browser uses MQTT (via websockets) and JSON to talk directly to your Domoticz server through your local network, there is no external third party involved.

In other words it is safe to use the public server.

Disclaimer: on the public server some very basic, anonymous Google Analytics are collected (such as number of visitors, time spent, or country location), but personal configuration or dashboard actions are not tracked. If you make your own build of Reacticz, the analytics code will not be inserted.

Customizing the dashboard

Selecting devices

To add widgets to your dashboard you must choose them from a list of all available devices.

Unfold the menu bar (cog icon on the top right corner) and click the list-like icon to go to the Device selection screen. All your Domoticz devices should show up there. Tick the checkbox next to the devices you want to appear in your dashboard. Once you're done, click the Home icon in the menu to get back to the home screen and start organizing your widgets.

If you have room plans configured in Domoticz, you can also use the selector to automatically check all the devices corresponding to a given room plan.

Organizing the widgets

On the home screen, open the menu bar and click the padlock icon to unlock your dashboard layout and enter edit mode. When the padlock is unlocked, all widgets become draggable and resizable (and can no longer be clicked). Organize them to your liking and click the padlock again to lock the layout and return to normal use.

Just like the server configuration, the layout is stored locally on your browser, and will be restored every time you open Reacticz on this device.

Theming options

It is possible to change the color theme of Reacticz by using the selector in the information page.

Sharing your configuration

The information page (last icon in the menu bar) provides a special link that lets you share your configuration with other devices of your home network so that you can clone your custom dashboard without having to redo it manually on each device.

Supported widgets

See the dedicated wiki page for a list of currently supported devices.

Credits

This project was bootstrapped with Create React App.

The dashboard grid is handled by React-grid-layout.

Reacticz communicates with Domoticz thanks to the MQTT.js and axios packages.

Weather widget icons are based on Kevin Aguilar's Material Design Weather Icon Set.

Other icons are from material.io and Material Design Icons.

The clock in the screensaver is rendered by React-Clock.