The first step to create our dinamic dashboard is to draw a template in SVG. Although there are several drawing programs which can manage that format, I recommend Inkscape, which is opensource and a portable version is available too.
It’s very important to draw using the grid (menu View – Grid):
First, let’s draw the “static” part of our dashboard: in my example the dashboard will be composed by a thermometer and a text information about actual temperature. If you can’t use Inkscape, on Internet you can find very good tutorials (es. 1 and 2) about it.
While drawing the thermometer, it’s important to find out the number of units which correspond to one degree (in my example 1 degree = 5 units):
Add to the drawing the elements which change while temperature changes: a rectangle for the liquid in the thermometer and the text. It’s not important at the moment the value you choose:
Open XML editor (menu Edit – XML Editor…):
If you select an element, you can show its properties in the XML source.
Choose the rectangle and try to change height property (after having changed it, confirm with CTRL+ENTER):
If rectangle grew in the wrong direction (to the bottom), use Object – Flip Vertical to rotate it 180°:
Change id property to give a more friendly name to the object (for example temp_level):
Choose the text and change id property too (for example temp_value):
At last, resize the “page” of our drawing: File menu – Document properties…, open Resize page to content… and click Resize page to drawing or selection. If you want, you can add some margin around the drawing:
In the next page we’re going to learn how to make our SVG file dynamic using PHP…