Dashticz V2 - Custom JS

From Domoticz
Jump to: navigation, search

There is the possibility to use your own functions in Dashticz V2.0
For this there is the file <dashticz v2 folder>/custom/custom.js you can edit.

There is a predefined function which will be called when the dashboard got all device informatie, named: afterGetDevices()
You can enter code inside this function which you want to be called.

Of course, you can also use stuff like $(document).ready() etc...


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.
Add the following function to show the icons and data-layout for blocks with your own names.

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;
}



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?
Add to custom.js one of the examples:

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;
}


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;
}



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.
Example, add a red background to a switch when energy usage reaches a limit.

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');
   }
}


And in custom.css add:

.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;
}


Or if you like a blinking version:

.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);
   }
}


To find the correct parameter you have to use (example: if(parseFloat(device['Data'])>4), u can use http://domoticz_url:8080/json.htm?type=devices&filter=all&used=true&order=Name and search the output for attributes you could use. For example, you could use for switch:

function getStatus_145(idx,value,device){
   if(device['Data']=="On"){
      $('div.block_145').addClass('warning');
   }
   else {
      $('div.block_145').removeClass('warning');
   }
}




Dv2-home.png Dv2-applications.png
Dashticz V2.0 Main Page Custom Applications