查看“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====
<syntaxhighlight lang="java">
//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';
</syntaxhighlight>
<br>
{| class="wikitable"
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | Parameter     
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | 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'] = {}<br>blocks[IDX]['openpopup']['url'] = 'http://www.urltocamera.nl/image.jpg';<br>blocks[IDX]['openpopup']['auto_close'] = 5; //seconds
| Open a popup when a device changes<br><br>Autoclose popup after x seconds
|-
| blocks[IDX]['openpopupOn'] = {}<br>blocks[IDX]['openpopupOn']['url'] = 'http://www.urltocamera.nl/image.jpg';<br>blocks[IDX]['openpopupOn']['auto_close'] = 5; //seconds
| Open a popup when a device changes to on<br><br>Autoclose popup after x seconds
|-
| blocks[IDX]['openpopupOff'] = {}<br>blocks[IDX]['openpopupOff']['url'] = 'http://www.urltocamera.nl/image.jpg';<br>blocks[IDX]['openpopupOff']['auto_close'] = 5; //seconds
| Open a popup when a device changes to off<br><br>Autoclose popup after x seconds 
|}
<br>
[[File:informatie.jpg]]
'''''REMARK:'''
<br>
''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.''<br>
''You have to remove the '//' before the '''var blocks={}''' to make use of this function.'' <br>
''You can use the examples in CONFIG.js, don't forget to remove the '//' also!''
<br><br>
{| class="wikitable"
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | Parameter     
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | 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
|}
<br>
[[File:Blocks.jpg]]
<br><br>
----

====Custom Positioning - Columns====
<syntaxhighlight lang="java">
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;
</syntaxhighlight>
<br>
{| class="wikitable"
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | Parameter     
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | 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!
|}
<br>
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
<br>
<syntaxhighlight lang="java">
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; 
</syntaxhighlight>
<br>
[[File:informatie.jpg]]
'''''REMARK:''' You can define as many columns as you like, as long as the total width of all columns is always 12!''
<br><br>
----

====Custom Positioning - Multiple screens====
There is the ability to use multiple screens within Dashticz v2.0. Each screen can use it's own background.<br>
The background can also automatically change for the part of the day.<br>
<syntaxhighlight lang="java">
//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]

</syntaxhighlight>
<br>
{| class="wikitable"
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | Parameter     
! style="font-weight: bold; color: white; background-color: orange; text-align: left;" | 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
|}
<br>
----

==== Function - Layout per device ====
It is now possible to use another column/block setup per resolution.<br>
<br>
To setup, use this code in config.js, change according your own needs..<br>
Change the maxwidth, maxheight and numbers of your columns.<br>
<syntaxhighlight lang="java">
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]
</syntaxhighlight>
Remember, if you are testing this on your laptop with resizing your browser window, refresh to rebuild the columns/blocks.<br>
<br>
----

====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.
<br>
<syntaxhighlight lang="java">
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;
</syntaxhighlight>
<br>
----

{| width="40%"
|- valign="top"
| width="16.6%" align="center" | [[file:dv2-home.png|link=Dashticz_V2]]
| width="16.6%" align="center" | [[file:dv2-css.png|link=Dashticz V2 - CSS]]
|}
{| width="40%"
|- valign="top"
| width="16.6%" align="center" | '''Dashticz V2.0 Main Page'''
| width="16.6%" align="center" | '''CSS'''
|}

[[Category:Domoticz]]
[[Category:Customization]]