Styling

DizmoViewer provides basic styling and library dizmoElements. 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.

style.scss

The stylesheet is in SASS and will be compiled to CSS for dizmoViewer.

Asset organisation

Your stylesheet is located in the folder ‘style’. Place your images in the folder ‘assets/images’. You can then specify the path to your pictures starting with ‘assets/images/’.

Gauge
|-- assets                                  <--
    |-- Icon.png
    |-- Preview.png
|-- manage.py
|-- project.cfg
|-- src
    |-- application.js
    |-- index.html
    |-- javascript
    |   |-- Main.js
    |   |-- Dizmo.js
    |-- lib
        |-- joose
            |-- joose.min.js
        |-- jquery
            |-- jquery.min.js
        |-- jquery-ui
            |-- css (folder)
            |-- jquery-ui-1.10.3.custom.js
            |-- jquery-ui-1.10.3.custom.min.js
|-- style                                   <--
        |--style.scss
|-- test
    |-- index.html
    |-- javascript
        |-- CustomAssertions.js
        |-- test_dizmo.js
    |-- lib (folder)
    |-- test
        |-- test_ExampleTest.js

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 folder src/styles/ and src/styles/images, for libraries the src/lib folder and for any other files that are important during runtime of your project you can use the assets/ folder in the root of your project. Any files that are not in these folders, and are not part of a JavaScript include or your index.html file will not be copied over.

Grid system

A dizmo measures multiples of 80px from top to bottom and left to right including a border of 10px on the bottom.

Grid system
Grid system

Hence, the possible width are: 80 px, 160 px, 240 px, 320 px, … And the possible heights are: 90 px, 170 px, 250 px, 330 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.

Front of a dizmo

Front of a dizmo
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 them only 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.

Status display
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: Dropdowns, formfield, buttons, checkboxes.

Back of a dizmo

Back of a dizmo
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.

dizmo Icon

Supply two icons with the same design, but with different colors, with your dizmo and name them Icon.svg and Icon-dark.svg. When the lightness of the framecolor is below 35%, Icon-dark.svg is used, otherwise Icon.svg. Icon.svg should be dark, as it’s 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.

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.

Design assets

  • 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.

Practical example

We are going to style Gauge according to design.

Gauge design
Gauge design

We set the initial height and width in the project-to-project configuration file project.cfg:

// Initial width and height of the dizmo
"width": 240,
"height": 170,

In our index.html file, we add a Pulldown in preparation for further gauge types and the html-tags for our stylesheet:

<div class="gauge_select_wrapper">
    <label for="gauge_select" class="gauge_label">Select the gauge type</label>
    <select id="gauge_select" class="gauge_select"
            data-type="dizmo-selectbox" data-onback="true">
        <option value="number">Number Gauge</option>
        <option value="coming">Coming soon</option>
    </select>
</div>
<div class="maximum_value">
    <label for="maximum_value_inputfield" class="max_label">Max. value</label>
    <input id="maximum_value_inputfield" class="max_input" type="text" data-type="dizmo-input">
</div>
<div class="minimum_value">
    <label for="minimum_value_inputfield" class="min_label">Min. value</label>
    <input id="minimum_value_inputfield" class="min_input" type="text" data-type="dizmo-input">
</div>
<div class="unit">
    <label for="unit_inputfield" class="unit_label">Unit</label>
    <input id="unit_inputfield" class="unit_input" type="text" data-type="dizmo-input">
</div>

Please refer to the stylesheet.css for an in-depth look.

At this stage, we are going to set the parameters of our project.cfg file. We increment the version to ‘0.2’,

"version": "0.2",

then add a description and tags

// Short description of the dizmo
"description": "Gauge displays the output of a docked dizmo as a numerical value.",

// Array containing the tags belonging to the dizmo
"tags": ["gauge", "value", "display"],

and lastly we change the category

// Add the category of your dizmo. The following categories are available:
// books_and_references, comics, communication, education, entertainment, finance, games, health_and_fitness, libraries_and_demo, lifestyle, media_and_video, medical, music_and_audio, news_and_magazines, personalization, photography, productivity, shopping, social, sports, tools, transportation, travel_and_local, weather
"category": "tools",

We add the files Icon.svg, Icon-dark.svg, Preview.png, to the assets folder. When a user iconizes Gauge, they can still recognize that it is the Gauge dizmo based on its icon. As Gauge changes its framecolor according to the output of another docked dizmo the user can still assess the value. You can replace the placeholders for Icon.png and Preview.png.

External resources