Dashticz V2 - Positioning

Custom Positioning

If you have defined config['auto_positioning'] = 0; 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: https://fontawesome.com/v4.7.0/icons/
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[1]['speak'] = 'Device status has changed'  //speak text when device is changed
blocks[1]['speakOn'] = 'Device is on' //speak text when device changes to On
blocks[1]['speakOff'] = 'Device is off' //speak text when device changes to Off
blocks[1]['gotoslide'] = 2;  //Goto screen when a device changes
blocks[1]['gotoslideOn'] = 2;  //Goto screen when a device changes to on
blocks[1]['gotoslideOff'] = 2;  //Goto screen when a device changes to off

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: https://fontawesome.com/v4.7.0/icons/
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]['hide_stop'] = true;	If you want to hide stop button, for example from the blinds switch
blocks[IDX]['playsound'] = 'sounds/ping.mp3';	Play a sound when a device changes
blocks[IDX]['playsoundOn'] = 'sounds/ping.mp3';	Play a sound when a device changes to On
blocks[IDX]['playsoundOff'] = 'sounds/ping.mp3';	Play a sound when a device changes to Off
blocks[IDX]['speak'] = 'Device status has changed';	Speaks text when a device changes
blocks[IDX]['speakOn'] = 'Device is on';	Speaks text when a device changes to on
blocks[IDX]['speakOff'] = 'Device is off';	Speaks text when a device changes to off
blocks[IDX]['protected'] = true;	Protect switching manually in Dashticz, not in Domoticz
blocks[IDX]['gotoslide'] = 2;	Goto screen when a device changes
blocks[IDX]['gotoslideOn'] = 2;	Goto screen when a device changes to on
blocks[IDX]['gotoslideOff'] = 2;	Goto screen when a device changes to off
blocks[IDX]['openpopup'] = {} blocks[IDX]['openpopup']['url'] = 'http://www.urltocamera.nl/image.jpg'; blocks[IDX]['openpopup']['auto_close'] = 5; //seconds	Open a popup when a device changes Autoclose popup after x seconds
blocks[IDX]['openpopupOn'] = {} blocks[IDX]['openpopupOn']['url'] = 'http://www.urltocamera.nl/image.jpg'; blocks[IDX]['openpopupOn']['auto_close'] = 5; //seconds	Open a popup when a device changes to on Autoclose popup after x seconds
blocks[IDX]['openpopupOff'] = {} blocks[IDX]['openpopupOff']['url'] = 'http://www.urltocamera.nl/image.jpg'; blocks[IDX]['openpopupOff']['auto_close'] = 5; //seconds	Open a popup when a device changes to off Autoclose popup after x seconds

文件: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

---

Function - Layout per device

It is now possible to use another column/block setup per resolution.

To setup, use this code in config.js, change according your own needs..
Change the maxwidth, maxheight and numbers of your columns.

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1920;
screens['default']['maxheight'] = 1080;

screens['default'][1] = {}
screens['default'][1]['background'] = 'bg9.jpg';
screens['default'][1]['columns'] = [1,2,4]

screens['default'][2] = {}
screens['default'][2]['background'] = 'bg9.jpg';
screens['default'][2]['columns'] = [5,6,7]

screens['tablet'] = {}
screens['tablet']['maxwidth'] = 1024;
screens['tablet']['maxheight'] = 768;
screens['tablet'][1] = {}
screens['tablet'][1]['background'] = 'bg9.jpg';
screens['tablet'][1]['columns'] = [3,1]

screens['tablet'][2] = {}
screens['tablet'][2]['background'] = 'bg9.jpg';
screens['tablet'][2]['columns'] = [2,4]

Remember, if you are testing this on your laptop with resizing your browser window, refresh to rebuild the columns/blocks.

---

Custom Positioning - Standby Screen

There is the ability to let Dashticz v2.0 go into standby mode. This defined with the config['standby_after'] 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;

---

Dashticz V2.0 Main Page

CSS