DizmoViewer provides basic styling and the dizmoElements library. On top of that, each dizmo can be styled according to your own design, with the default stylesheet being
style.scss that can be extended as desired.
The stylesheet is in SASS and will be compiled to CSS for dizmoViewer.
Your stylesheet is located in the directory
style. Place your images in the directory
assets/images. You can then specify the path to your pictures starting with
Gauge |-- assets <-- |-- Icon.png |-- Preview.png |-- style <-- |--style.scss
Note: If you wish to have your files available in your built project, they have to be under their respective folders: For any files regarding styles (icons, images, stylesheets, etc.) you should use the directory
src/styles/images, for libraries the
src/lib directory and for any other files that are important during runtime of your project you can use the
index.html file will not be copied over.
A dizmo measures multiples of 80px from top to bottom and left to right including a border of 10px on the bottom.
Hence, the possible width are: 80 px, 160 px, 240 px, 320 px, … And the possible heights are: 50 px, 130 px, 210 px, 290 px, …
Since the height of all the UI elements in the DizmoElements library is 40 px, you can stack these elements inside the 80 px grid.
When setting dimensions, keep in mind that the dizmo header is not part of the dizmo height. Smallest square and header could be achieved with the following code:
Front of a dizmo
The front of a dizmo only shows the most important information; it is a simple and minimal status display. If possible, the user should not need to click anywhere to get to the information. As far as possible avoid using scrollbars – ideally only use them for long lists. When installed in dizmoViewer a dizmo should run immediately. If parameter and date are required, pre-set them to meaningful defaults.
Consider the front of a dizmo as a status display. Please take a look at Magic Ink: Information Software and the Graphical Interface for more details about status display.
The front should be as visual as possible. A dizmo, even at a very small scale, should still give a useful status indication. It is a good starting point to use the layout and color of existing physical objects, like using a clock face for showing time. Graphical elements should be simplified as much as possible. Interactive elements can use light gradients and light drop shadows. Non-interactive elements use a flat design.
Utilises the following elements, styled with dizmoElements: Dropdowns, formfield, buttons, checkboxes.
Back of a dizmo
The back of the dizmo displays settings, short explanations and secondary features. Use the back to display anything that do not need to be constantly visible but is still a necessary element of the dizmo.
Utilises the following elements: Dropdowns, formfield, buttons, checkboxes, radiobuttons.
Supply two icons with the same design, but with different colors, with your dizmo and name them
Icon-dark.svg. When the lightness of the framecolor is below 35%,
Icon-dark.svg is used, otherwise
Icon.svg should be dark, as it’s used on a light background, and the main color should be
Icon-dark.svg should be light, as it’s used on a dark background, and the main color should be
Dizmo settings menu
Avoid adding functionality into the dizmo settings menu, as it will not be not immediately visible to the user (settings are displayed on the back). Only place advanced features in the settings menu.
Utilises the following elements: Icon and text.
- Dizmo creators can use their own assets
- For dropdowns, formfield, buttons, checkboxes we recommend to use the dizmoElements library
- For fonts we recommend the dizmoElements library. DizmoViewer uses the font VAG Rounded.
- For icons, we recommend the Clear Icons – Thick set.