Skip to content

Customization

Stefano Zenaro edited this page Apr 25, 2019 · 4 revisions

Customization

Plan

You can add your map(s) as SVG files in the directory:

/static/img/maps/

And then select it in the options > map selection

How to make a custom Plan

Use a software that handles Scalable Vector Graphics like Inkscape and Sodipodi and create a new document.

Start by placing rettangles and squares for each room, in inkscape you can change the borders and the filling colors using the color bar at the bottom of the window.

If you click the color it will change the fillment and if you click while holding maiusc key it will change the border color

Change the ID of the object property menu on the right to the name of the room (it must match the name of the nodemcu id ih the sketch) and then click the "set" button

An example might be "kitchen"

Add two text boxes per room:

  • temperature text box: set the ID to "t" + the name of the room

for example set the ID to "tkitchen" if the room is called "kitchen"

  • humidity text box: set the ID to "h" + the name of the room

for example set the ID to "hkitchen" if the room is called "kitchen"

I also suggest you to add one more text box per room as a label to know what room is which.

If you don't want to have the annoying problem that touching/clicking an element doesn't take you to the charts page, select the element, go in the "XML editor" on the right menu, put "class" in the text box on the left of the "set" button, in the text box below put in "x" + the name of the room and then click the "set" button.

for example enter "xkitchen" if the room is called "kitchen"

When you have finished creating your plan go to file, document properties, in the page tab go to the personalization section, click the plus sign next to "resize page to its content" and click the button "resize page to its drawing or selection".

Close the window, click on file, save as..., and place the svg file in the maps directory:

/static/img/maps/

Add/Change UI colors

To Add/Change the UI colors you can go in the t_colors tables inside db100_100 database.

If you want to add a color insert into the table a color using a color name and its hex value

If you want to delete a color remove the line