Styling

DizmoSpace provides a basic styling and the library dizmoElements. On top of that, each dizmo can be styled according to your 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 dizmoSpace.

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
    |-- dizmo
    |   |-- dizmoHelper.js
    |-- 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: Only the content in the asset folder will be included into your dizmo during the build process.

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 shows only the most important information. It is a simple and minimal status display. If possible, the user should not need to click anywhere get to the information. Avoid as far as possilbe scrollbars and use this UI element only long lists. A dizmo should run immediately when installed in dizmoSpace. If parameter and date are 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 are still necessary elements of the dizmo.

Utilises the following elements: Dropdowns, formfield, buttons, checkboxes, radiobuttons.

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

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 asses the value. You can replace the placeholders for Icon.png and Preview.png.

External resources