查看“Dashticz V2 - Custom JS”的源代码

__TOC__
There is the possibility to use your own functions in Dashticz V2.0 <br>
For this there is the file '''<dashticz v2 folder>/custom/custom.js''' you can edit.<br>
<br>
There is a predefined function which will be called when the dashboard got all device informatie, named: '''afterGetDevices()'''<br>
You can enter code inside this function which you want to be called.<br>
<br>
Of course, you can also use stuff like $(document).ready() etc...<br>
<br>
----
===function getExtendedBlockTypes(blocktypes)===
Some blocktypes are filtered out by their distinct name and therefore will not produce the nice icons. Referring to "blocktypes.Name = {}" section in blocks.js.<br>
Add the following function to show the icons and data-layout for blocks with your own names.
<br>
<syntaxhighlight lang="java">
function getExtendedBlockTypes(blocktypes){
   blocktypes.Name['Maan op'] = { icon: 'fa-moon-o', title: '<Name>', value: '<Data>' }
   blocktypes.Name['Maan onder'] = { icon: 'fa-moon-o', title: '<Name>', value: '<Data>' }
   return blocktypes;
}
</syntaxhighlight>
<br>
----

===function getBlock_IDX(device,idx)===
Want your block to show up differently then Dashticz generates and do you have a little bit of coding skills?<br>
Add to custom.js one of the examples:
<br>
<syntaxhighlight lang="java">
function getBlock_233(device,idx){ //change 233 to the idx of your device!
   $('.block_'+idx).attr('onclick','switchDevice(this)');
   var html='';
   html+='<div class="col-xs-4 col-icon">';
      if(device['Status']=='Off') html+=iconORimage(idx,'fa-toggle-off','','off icon');
      else html+=iconORimage(idx,'fa-toggle-on','','on icon');
   html+='</div>';
   html+='<div class="col-xs-8 col-data">';
   html+='<strong class="title">'+device['Name']+'</strong><br />';
   if(device['Status']=='Off') html+='<span class="state">AFWEZIG</span>';
   else html+='<span class="state">AANWEZIG</span>';

   if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
   html+='</div>';
   return html;
}
</syntaxhighlight>
<br>
<syntaxhighlight lang="java">
function getBlock_6(device,idx){ 
   $('.block_'+idx);
   var html='';
   html+='<div class="col-xs-4 col-icon">';
      if(device['Status']=='Off') html+='<img src="img/cust_away.png" class="off icon" />';
      else html+='<img src="img/cust_home.png" class="on icon" />';
   html+='</div>';
   html+='<div class="col-xs-8 col-data">';
   html+='<strong class="title">'+device['Name']+'</strong><br />';
   if(device['Status']=='Off') html+='<span class="state">AFWEZIG</span>';
   else html+='<span class="state">AANWEZIG</span>';

   if((_SHOW_LASTUPDATE && (typeof(blocks[idx])=='undefined' || typeof(blocks[idx]['hide_lastupdate'])=='undefined' || blocks[idx]['hide_lastupdate']===false)) || (!_SHOW_LASTUPDATE && (typeof(blocks[idx])!=='undefined' && typeof(blocks[idx]['show_lastupdate'])!=='undefined' && blocks[idx]['show_lastupdate']==true))  ){
          html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
   }
   html+='</div>';
   return html;
}
</syntaxhighlight>
<br>
----

===function getStatus_IDX(idx,value,device)===
Just like the function to take action on change of a value, now is extended functionality to do something with a block when it has a specific value. <br>
Example, add a red background to a switch when energy usage reaches a limit.<br>
First you'll have to find the correct IDX for the device. To find the correct IDX number, use http://domoticz_url:8080/json.htm?type=devices&filter=all&used=true , you get an overview of the devices, IDX and it's corresponding parameters.<br>
After you have the correct IDX, you can add this device to the custom.js according to the following example:<br>
<br>
<syntaxhighlight lang="java">
function getStatus_145(idx,value,device){
   if(parseFloat(device['Data'])>23){
      $('div.block_145').addClass('warning');
   }
   else {
      $('div.block_145').removeClass('warning');
   }
}

function getStatus_286(idx,value,device){
   if(parseFloat(device['Data'])>4){
      $('div.block_286').addClass('warningblue');
   }
   else {
      $('div.block_145').removeClass('warningblue');
   }
}
</syntaxhighlight>
<br>
And in '''custom.css''' add your css, according to this example:<br> 
<syntaxhighlight lang="java">
.warning {
   background: rgba(199,44,44,0.3) !important;
    background-clip: padding-box;
}

.warningblue {
   background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
}
</syntaxhighlight>
<br>
Or if you like a blinking version: <br>
<syntaxhighlight lang="java">
.warning {
   background: rgba(199,44,44,0.3) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
   -webkit-animation: BLINK-ANIMATION 1s infinite;
   -moz-animation: BLINK-ANIMATION 1s infinite;
   -o-animation: BLINK-ANIMATION 1s infinite;
   animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
   0%, 49% {
      background-color: rgba(199,44,44,0.3);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
   50%, 100% {
      background-color: rgba(199,44,44,0.7);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
}

.warningblue {
   background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
   -webkit-animation: BLINK-ANIMATION-BLUE 1s infinite;
   -moz-animation: BLINK-ANIMATION-BLUE 1s infinite;
   -o-animation: BLINK-ANIMATION-BLUE 1s infinite;
   animation: BLINK-ANIMATION-BLUE 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION-BLUE {
   0%, 49% {
      background-color: rgba(45,119,204,0.3);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
   50%, 100% {
      background-color: rgba(45,119,204,0.7);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
}
</syntaxhighlight>
<br>
----

===function getStatus_IDX(idx,value,device) triggerd by UpdateStatus===

Based on the command "unix()-(3600*2)" where 3600*2 = 2 hours it will check the LastUpdate status and add/remove the corresponding class

<syntaxhighlight lang="java">
function getStatus_153(idx,value,device){
	setTimeout(function(){
		if(moment(device['LastUpdate']).unix()<(moment().unix()-(3600*2))){
			$('div.block_153 span.lastupdate').addClass('lu_warningred');
		}
		else {
			$('div.block_153 span.lastupdate').removeClass('lu_warningred');
		}
	},1000);
}
</syntaxhighlight>

<br>
More about other json commands, you can find in the Domoticz wiki: http://www.domoticz.com/wiki/Domoticz_API/JSON_URL%27s#Get_all_devices_of_a_certain_type
<br><br>
----
{| width="40%"
|- valign="top"
| width="16.6%" align="center" | [[file:dv2-home.png|link=Dashticz_V2]]
| width="16.6%" align="center" | [[file:dv2-applications.png|link=Dashticz V2 - Custom Applications]]
|}
{| width="40%"
|- valign="top"
| width="16.6%" align="center" | '''Dashticz V2.0 Main Page'''
| width="16.6%" align="center" | '''Custom Applications'''
|}

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