DizmoViewer provides basic styling and the dizmoElements library. On top of that, each dizmo can be styled according to your design. The default stylesheet style.scss can be extended as desired.
The stylesheet is in SASS format and will be compiled to CSS for dizmoViewer.
Your stylesheet is located in the directory style. Place your images in the directory assets/images. Specify the path to your pictures starting with assets/images/.
MyDizmo
|-- assets <--
|-- Icon.png
|-- Preview.png
|-- style <--
|--style.scssNote: If you wish to have your files available in your built project, they have to be placed under their respective folders. Use the directories src/styles/ and src/styles/images for any files regarding styles (icons, images, stylesheets, etc.). Use src/lib directory for libraries. For any other files that are important during the runtime of your project, use the assets/ directory in the root of your project. Any files that are not in these directories, and are not part of an included JavaScript or your index.html file, will not be copied over.
A dizmo measures multiples of 80px from top to bottom, and left to right. This includes a border of 10px on the bottom.
Hence, the possible widths are: 80 px, 160 px, 240 px, 320 px, etc.
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. The smallest possible square and header could be achieved with the following code:
dizmo.setHeight(50);
dizmo.setWidth(80);
The front of a dizmo only shows the most important information. It is a simple and minimal status display. Preferably, the user should not need to click anywhere to get to the information they seek from the dizmo. Avoid using scrollbars as much as possible.
A dizmo should run immediately when installed in dizmoViewer. If parameters 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 displays.
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, for example, a clock face to show 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.
Utilizes the following elements, styled with dizmoElements: Dropdowns, formfield, buttons, checkboxes.
The back of the dizmo displays settings, short explanations, and secondary features. Use the back to display anything that does not need to be constantly visible, but is still a necessary part of the dizmo.
Utilizes the following elements: Dropdowns, formfield, buttons, checkboxes, radiobuttons.
Supply your dizmo with two icons of the same design, but with different colors. Name them Icon.svg and Icon-dark.svg.
Icon-dark.svg is displayed when the lightness of the frame color is below 35%. Otherwise, Icon.svg is displayed.
Icon.svg should be dark, as it is used on a light background, and the main color should be #424142. Icon-dark.svg should be light, as it’s used on a dark background, and the main color should be #e5e5e5.
Avoid adding important functionality into the dizmo settings menu, as it will not be not immediately visible to the user. Instead, settings are displayed on the back. Only place advanced features in the settings menu.
Utilizes the following elements: Icon and text.