Dashticz V2 - Positioning

From Domoticz
Jump to: navigation, search

Custom Positioning

If you have defined var _USE_AUTO_POSITIONING = false in the Custom Parameter section, you have the ability to define your own positioning for the buttons. The custom positioning is done in 2 parts. The first part is creating the blocks. Blocks are a selection of buttons / functionality. The second part is the creation of the columns in which the defined blocks can be used.

Custom Positioning - Blocks

//CUSTOM POSITIONING:
//defining which blocks to show, the numbers represents the IDX of the device in Domoticz
//only define if you want to use a custom width instead of the default
 
var blocks = {}
 
blocks[1] = {}
blocks[1]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[1]['title'] = 'Living room' //if you want change the name of switch different then domoticz
blocks[1]['icon'] = 'fa-eye'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[1]['image'] = 'bulb_off.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[1]['switch'] = true; //if you want to switch the title and data
blocks[1]['hide_data'] = true; //if you want to hide the data of this block
blocks[1]['show_lastupdate'] = true; //if you want to show the last update specific for this block
blocks[1]['playsound'] = 'sounds/ping.mp3'; //play a sound when a device changes
blocks[1]['protected'] = true; //protect switching manually in Dashticz
 
blocks['s1'] = {} //scene or group
 
blocks[204] = {} //dimmer
blocks[204]['width'] = 12;
blocks[204]['title'] = 'Living room' //if you want change the name of switch different then domoticz
 
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Schakelaars';


Parameter Description
var blocks = {} Mandatory - Defines the blocks section
blocks[IDX] = {} Defines the block of your Device - Get the IDX from your Domoticz installation (Setting - Devices)
blocks['sIDX'] = {} Defines the block of your Scene or Group - Add an "s" in front of the IDX and put between prime symbols ' '
blocks[IDX]['width'] = 4; Defines the width of the block - Enter value between 1 and 12
blocks[IDX]['title'] = 'Living room' Defines alternative name of the device. Empty is the name from Domoticz
blocks[IDX]['icon'] = 'fa-eye' Defines alternative icon of the device instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[IDX]['image'] = 'bulb_off.png' If you want to show an image instead of an icon, place image in img/ folder
blocks[IDX]['switch'] = true If you want the title and data to be switched
blocks[IDX]['hide_data'] = true If you don't want the data to be shown
blocks[IDX]['show_lastupdate'] = true; if you want to show the last update specific for this block
blocks[IDX]['playsound'] = 'sounds/ping.mp3'; play a sound when a device changes
blocks[IDX]['protected'] = true; protect switching manually in Dashticz, not in Domoticz


Informatie.jpg REMARK:
You can define as many blocks as you like. For ordering the blocks you can make use of the blocktitle, so you can group devices.
You have to remove the '//' before the var blocks={} to make use of this function.
You can use the examples in CONFIG.js, don't forget to remove the '//' also!

Parameter Description
blocks['blocktitle_1'] = {} Defines the blocktitle - Create a unique name for each block
blocks['blocktitle_1']['type'] = 'blocktitle'; Defines the type of block. This always should be blocktitle.
blocks['blocktitle_1']['title'] = 'Switches' Defines the blocktitle as shown in the Dashboard


Blocks.jpg


Custom Positioning - Columns

var columns = {}
 
columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',1,2,'144_2',295] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
columns[1]['width'] = 5;


Parameter Description
columns[1] = {} Mandatory - Defines the columns section
columns[1]['blocks'] = ['blocktitle_1',1,204]; Defines the blocks that are shown within the column.

You can use 'blocktitle_x' to display the blocktitle. You use the IDX number of the blocks that you have created in the Blocks Section.

columns[1]['width'] = 5; Defines the width of the column between 1 and 12. REMARK, the total width of all columns should always be 12!


There are already some predefined blocks you can also use in the columns:

  • currentweather_big
  • weather
  • clock
  • sunrise
  • horizon
  • news
  • log
  • buttons.buienradar
  • buttons.radio
  • buttons.calendar
  • buttons.nunl
  • buttons.nzbget


columns[2] = {}
columns[2]['blocks'] = ['currentweather_big','weather',5,'144_1','news']
columns[2]['width'] = 5; 
 
columns[3] = {}
columns[3]['blocks'] = ['clock','sunrise','horizon',buttons.buienradar,buttons.radio,buttons.calendar,buttons.nunl,buttons.nzbget]
columns[3]['width'] = 2;


Informatie.jpg REMARK: You can define as many columns as you like, as long as the total width of all columns is always 12!


Custom Positioning - Multiple screens

There is the ability to use multiple screens within Dashticz v2.0. Each screen can use it's own background.
The background can also automatically change for the part of the day.

//if you want to use multiple screens, use the code below:
 
var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg1.jpg';
screens[1]['background_morning'] = 'bg_morning.jpg';
screens[1]['background_noon'] = 'bg_noon.jpg';
screens[1]['background_afternoon'] = 'bg_afternoon.jpg';
screens[1]['background_night'] = 'bg_night.jpg';
screens[1]['columns'] = [1,2,3]
 
screens[2] = {}
screens[2]['background'] = 'bg3.jpg';
screens[2]['background_morning'] = 'bg_morning.jpg';
screens[2]['background_noon'] = 'bg_noon.jpg';
screens[2]['background_afternoon'] = 'bg_afternoon.jpg';
screens[2]['background_night'] = 'bg_night.jpg';
screens[2]['columns'] = [4,5,6]


Parameter Description
var screens = {} Mandatory - Defines the screens section
screens[1] = {} Defines the screen number
screens[1]['background'] = 'bg1.jpg'; Defines the screen background - the image file must be in the \dashboard\img folder
screens[1]['background_morning'] = 'bg_morning.jpg'; Defines the screen background for morning (06:00-10:59) - the image file must be in the \dashboard\img folder
screens[1]['background_noon'] = 'bg_noon.jpg'; Defines the screen background for noon (11:00-15:59) - the image file must be in the \dashboard\img folder
screens[1]['background_afternoon'] = 'bg_afternoon.jpg'; Defines the screen background for afternoon (16:00-19:59) - the image file must be in the \dashboard\img folder
screens[1]['background_night'] = 'bg_night.jpg'; Defines the screen background for night (20:00:05:59) - the image file must be in the \dashboard\img folder
screens[1]['columns'] = [1,2,3] Defines which columns are shown on the defined screen



Custom Positioning - Standby Screen

There is the ability to let Dashticz v2.0 go into standby mode. This defined with the var _STANDBY_AFTER_MINUTES parameter in the CONFIG.js file. The screen get sort of grayed out and you can show items on the standby theme. These items MUST have been declared and used in the Dashboard.

var columns_standby = {}
 
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big','weather']  //specify blocks for the standby mode
columns_standby[1]['width'] = 12;



Dv2-home.png Dv2-css.png
Dashticz V2.0 Main Page CSS