Userinterface (UI) for Smarthome
We need a UserInterface for our Smarthome solution.
Viewing is based on HTML5/CSS3. Graphic and Icons should be of format .SVG.
The UI uses so called widgets for viewing and controlling.
These widgets use DIV boxes as container. These boxes are invisible and
contain the complete element.
The following widgets are needed:
1. Light Switch
ON/OFF - Switch for light including a state display that indicates
if the light is on or off. We need two variants.
One as a push-switch (one button for on and off)
and an on/off-Switch with separate buttons for on and off.
Function for dimming a light and to switch it on and off.
The state must be visualized (0%..100%, numeric or visual)
3. Blinds / Jalousie
Buttons for open, close and stop. Jalousie needs in addition Buttons
to control the angle of the lamellas. Both states (open, close or
something between) and the angle of the lamellas must be visible.
4. Room temperature
View the actual temperature and set an new value, typically in
between 16° and 25°. In addition a switch is needed to select the
mode: possible modes are Day / Night / Frost / Heat
5. Camera view
Container for a camera picture including s short description of the
camera. Optional functions to control the camera (move left, right, up,
down and zoom in and out)
6. View value
Text before and behind the value. Is used for example to show outside
temperature or wind speed. The text behind is typically the unit for the
displayed value. e.g.: outside temperature 5 °C, brightness 5000 Lux
Optionally the unit can also be displayed as Icon.
7. Execute scene
Short description of the scene and a button to execute the scene.
e.g.: All lights off, All lights on and so on.
8. Toggle scene
Like 7. but is used to activate / deactivate a scene. One button and a
state to display wether the scene is active or not.
9. User Login
Diplay a user as picture when logged in and a button to log out.
If the user is not logged in show a button to login.
Pressing this button opens a dialog to enter user name and password.
Navigation is needed to switch between several pages (different
function areas). Typically buttons are used with short text description.
The navigation consists of only one dimension and can be horizontal
or vertical. It is just a container with one or more buttons.
11. Remote control
Typical remote control for multimedia.
Buttons needed: Start/Stop/Play/Pause/Left/Right/Up/Down/Select
and for selecting the context Pictures/Video/TV/Audio.
And last Power on/off and a possibility to select a room (room name).
12. LED state view with different colors
Either three sliders (RGB) for creating the color value, or one color-
circle with RGB-colorscale to select the desired color
- All elements must contain a text description (max. 30 characters)
or alternatively a unique icon.
- There is no need of a special responsive design. All widgets will be
shown among themselves on smart phones. In this case the hole
width of the display is used per widget. The height may vary.
- All buttons must work on touch devices and normal PC's. Don't use
Hover effects. Pressing a button should be clearly visualized.
- We prefer flat design. If possible dont use 3D effects
Internally these widgets are organized in rooms. Rooms may have attributes like color. That means you may use colors to identify the room where the widgets is in.
As a result we wold like to get a HTML file (including CSS as a separate file) with all widgets above. In addition all graphics as svg when possible.
As basis for the design you should use a resolution of 1024 * 768
(browser in fullscreen mode)
We are sure that there are many open questions, so please dont hesitate to ask for additional information.