Dashticz - Function - Action on status change

[robgeerts]

In current beta it is possible to do 'something' when a anything changes.
Below are the options currently available with an example code to put in config.js. Dont forget to change the number '110' to the IDX of your device.

Play sound
Example: Play a sound when someone hits the doorbell wich is connected to Domoticz.

Code: Select all

blocks[110] = {}
blocks[110]['playsound'] = 'sounds/ping.mp3';

Go to slide
Example: Go to a second or third screen wich if filled with camera's when motion is detected in your yard.

Code: Select all

blocks[110] = {}
blocks[110]['gotoslide'] = 2;

Open popup
Example: Open camera when someone hits the doorbell

Code: Select all

blocks[110] = {}
blocks[110]['openpopup'] = {}
blocks[110]['openpopup']['url'] = 'http://www.urltocamera.nl/image.jpg';
blocks[110]['openpopup']['auto_close'] = 5; //seconds

Custom code???
Add a function like this in custom.js:

Code: Select all

function getChange_110(idx,value,device){
	$('div.block_110').css('color','red');
}

[SwordFish]

In latest beta it is possible to play sounds when a device changes.
Currently this is heavily beta and there is one sound available
Try it with a switch for example.

What I want to do at my tablet is that it rings a bell when pushing the doorbell (wich is silent by itself) and that it plays a sound when theres any movement in my yard (with motion sensors).

Add to config:

Code: Select all

blocks[110] = {}
blocks[110]['playsound'] = 'sounds/ping.mp3';

That sounds cool

[repoman]

In latest beta it is possible to play sounds when a device changes.
Currently this is heavily beta and there is one sound available
Try it with a switch for example.

What I want to do at my tablet is that it rings a bell when pushing the doorbell (wich is silent by itself) and that it plays a sound when theres any movement in my yard (with motion sensors).

Add to config:

Code: Select all

blocks[110] = {}
blocks[110]['playsound'] = 'sounds/ping.mp3';

That's a great feature! In my current setup I've domoticz calling vbs tts scripts to announce motion or switching device. It's kind of talking (depending on sleep mode etc)

[robgeerts]

Yeah but have to test a lot... for some reason it is playing on my laptop but not on my tablet.

[qwerk]

no sound on windows pc, windows tablet and android phone.

[robgeerts]

Could check console if there's any mp3 being called when clicking the switch?

[robgeerts]

Pleasy try latest beta. You can see in the sounds-folder wich mp3s are available..

[qwerk]

I cannot find any reference to sounds or mp3 in the F12 segments ( chrome and ff)
Is there a grand setting in the default.js to makes sounds possible?


blocks[1311] = {}
blocks[1311]['playsound'] = 'sounds/sonar.mp3';

blocks[1326] = {}
blocks[1326]['playsound'] = 'sounds/glass.mp3';

tried dimmers and real on/off switches.


Problem solved:

I declared same blocks further down the config
and only the last declarations are used ( as it should be)

[robgeerts]

New actions added! Check first post in this topic!

[pvm]

Wow, really nice to integrate this with doorbell!

[capman]

Wow, really nice to integrate this with doorbell!

It's not working with me. On domoticz a have a testswitch IDX=366.

On my custom.js a have copy your code with the idx from my testswitch.

Code: Select all

blocks[366] = {}
blocks[366]['gotoslide'] = 2;

So when a push in domoticz on my testswitch , nothing happens on my dashticz screen. A have the latest beta and offcourse 2 slides

[robgeerts]

Added the ability to write your own action:

Add a function like this in custom.js:

Code: Select all

function getChange_110(idx,value,device){
	$('div.block_110').css('color','red');
}

[bsmeding]

This function works well to display camera when there is motion in the frontyard or someone is pushing the doorbell....but only when the screen is not on standbyscreen

When standby is enabled, then it will not move to the screen where the camera's are shown. (use the gotoslide function)

Is this by design or can this changed?


And is it possible to open an popup from a normal switch instead of switching the device? Why? because i want to open an popup when clicking on an user at home and then show the location of the user

[HansieNL]

I want my ui-slider-handle color to be changed when the bulb is on. Found the right code...
Add to custom.js:

Code: Select all

function getStatus_124(idx,value,device){
   if(device['Data']!="Off"){
      $('div.block_124').addClass('slider-on'); //change .ui-slider-handle color
   }
   else {
      $('div.block_124').removeClass('slider-on');
   }
}

Add to cunstom.css:

Code: Select all

.slider-on .ui-slider-handle {
    background-color: #fff;
    border-color:  #fff;
}

[robgeerts]

This function works well to display camera when there is motion in the frontyard or someone is pushing the doorbell....but only when the screen is not on standbyscreen

When standby is enabled, then it will not move to the screen where the camera's are shown. (use the gotoslide function)

Is this by design or can this changed?

Could you test this in latest beta?
It should remove the standby-screen now..

And is it possible to open an popup from a normal switch instead of switching the device? Why? because i want to open an popup when clicking on an user at home and then show the location of the user

Not yet, you could add a button, like:

Code: Select all

var buttons = {}
buttons.nos = {key: 'nos',  width:12, icon: 'fa-newspaper-o', title: 'Nos', url: 'http://www.nos.nl'}

But then add the url to the google maps...

[repoman]

Hi. The popup for the camera's work very well.

Can you center the camera image on the popup?
(or make the popup adjust to the size of the image?)

Thanks,
Pascal

[capman]

Hi. The popup for the camera's work very well.

Can you center the camera image on the popup?
(or make the popup adjust to the size of the image?)

Thanks,
Pascal

Hey Repoman, is it possible to share your code? Wath you have in your config.js and custom.js for your camera.
Because a can't have it working. In my custom.js stand

Code: Select all

// camera popup

function getChange_366(idx,value,device){
   $('div.block_366').css('color','red');
}

And in my config.js stand

Code: Select all

//Popup Camera Deurbel

blocks[366] = {}
blocks[366]['openpopup'] = {}
blocks[366]['openpopup']['url'] = 'http://xxx.xxx.xxx.xxx:xxx/cgi-bin/CGIProxy.fcgi?cmd=xxxxxxxxx.....xxxxx';

[repoman]

Hi. The popup for the camera's work very well.

Can you center the camera image on the popup?
(or make the popup adjust to the size of the image?)

Thanks,
Pascal

Hey Repoman, is it possible to share your code? Wath you have in your config.js and custom.js for your camera.
Because a can't have it working. In my custom.js stand

Code: Select all

// camera popup

function getChange_366(idx,value,device){
   $('div.block_366').css('color','red');
}

And in my config.js stand

Code: Select all

//Popup Camera Deurbel

blocks[366] = {}
blocks[366]['openpopup'] = {}
blocks[366]['openpopup']['url'] = 'http://xxx.xxx.xxx.xxx:xxx/cgi-bin/CGIProxy.fcgi?cmd=xxxxxxxxx.....xxxxx';

Uhm, ok:

config.js:

Code: Select all

var _LANGUAGE 				= 'nl_NL'; //or: en_US, fr_FR, hu_HU
var _HOST_DOMOTICZ		  	= 'http://192.168.90.10:8080';
var _DOMOTICZ_REFRESH           = 5; //in seconds
//var _DASHTICZ_REFRESH           = 300; //in minutes (of ook seconds)
var _USE_AUTO_POSITIONING 	= false; //don't want to configure positions, use auto positioning
var _USE_FAVORITES		= false; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK 	= true; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF 	= false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED		= 'http://www.nu.nl/rss/algemeen';
var _USE_FAHRENHEIT		= false;
var _SCROLL_NEWS_AFTER 		= 10000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE 		= true;
var _LASTUPDATE_FORMAT 		= 'DD-MM-YY HH:mm';
var _SCREENSLIDER_EFFECT 	= 'slide'; //'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
var _USE_STATIC_WEATHERICONS = true;
var _AUTO_SWIPEBACK_TO          = 1; //when no activity, swipe back to main screen after x seconds
var _AUTO_SWIPEBACK_TIME        = 120; //seconds
var _STANDBY_AFTER_MINUTES  	= 5; //enter amount of minutes
var _THEME = 'default'; // default = dashticz default theme

var _APIKEY_WUNDERGROUND  	= 'xxx';
var _WEATHER_CITY 		= 'xxx';
var _WEATHER_COUNTRY 		= 'BE';

var _APIKEY_MAPS		= 'xxx';
var _MAPS_LATITUDE		= '51.2218369';
var _MAPS_LONGITUDE		= '4.7131726';
var _MAPS_ZOOMLEVEL		= '10';


var frames1 = {}
frames.log = {refreshiframe:10000,height:500,frameurl:"http://192.168.90.10/iframe_log_triggers.php",width:12}

var frames2 = {}
frames.ups = {refreshiframe:10000,height:500,frameurl:"http://192.168.90.10/cgi-bin/upsstats.cgi",width:12}


// Online Radio Stream Plugin, Note: you must enable  plugin in column section 'streamplayer', see columns[3]['blocks'] example below.

var _STREAMPLAYER_TRACKS     = [
   {"track":1,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp3"},
   {"track":2,"name":"538 Hitzone","file":"http://vip-icecast.538.lw.triple-it.nl/WEB11_MP3"},
   {"track":3,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
   {"track":4,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
   {"track":5,"name":"StuBru","file":"http://mp3.streampower.be/stubru-high.mp3"},
];

//Buttons or images to open webpages in an iframe, like a news website or weather forecast

var buttons = {}

buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=500&h=400', url: 'http://www.weer.nl/verwachting/nederland/son/189656/'}

buttons.camera1 = {width:12, isimage:true, refreshimage:3000, image: 'http://192.168.90.20:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx', url: 'http://192.168.90.20:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx'}

buttons.camera2 = {width:12, isimage:true, refreshimage:3000, image: 'http://192.168.90.17/axis-cgi/jpg/image.cgi', url: 'http://192.168.90.17/axis-cgi/jpg/image.cgi'}

buttons.camera3 = {width:12, isimage:true, refreshimage:3000, image: 'http://192.168.90.16/snapshot.cgi?cmd=snapPicture', url: 'http://192.168.90.16/snapshot.cgi?cmd=snapPicture'}

buttons.radio = {width:3, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}

buttons.nunl = {width:3, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}

buttons.log = {width:3, icon: 'fa-newspaper-o', title: 'log', url: 'http://192.168.90.10/iframe_log_triggers.php'}

buttons.snapshots = {width:3, icon: 'fa-newspaper-o', title: 'snapshots', url: 'http://192.168.90.10/repochalet/ftp/archived/'}

buttons.ups = {width:3, icon: 'fa-newspaper-o', title: 'ups', url: 'http://192.168.90.10/cgi-bin/upsstats.cgi'}

"CUSTOM POSITIONING:"

//defining wich blocks to show, de 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[71] = {}
blocks[71]['width'] = 4;
blocks[71]['title'] = 'power' 

blocks[162] = {}
blocks[162]['width'] = 4;
blocks[162]['title'] = 'hdd'

blocks[157] = {}
blocks[157]['width'] = 4;
blocks[157]['title'] = 'cpu'

blocks[159] = {}
blocks[159]['width'] = 4;
blocks[159]['title'] = 'ram'

blocks[201] = {}
blocks[201]['width'] = 4;
blocks[201]['title'] = 'security'

blocks[135] = {}
blocks[135]['width'] = 4;
blocks[135]['title'] = 'repo'
blocks[135]['icon'] = 'fa-home'

blocks[149] = {}
blocks[149]['width'] = 4;
blocks[149]['title'] = 'ima'
blocks[149]['icon'] = 'fa-home'

blocks[8] = {}
blocks[8]['width'] = 4;
blocks[8]['title'] = 'alert notification'

blocks[11] = {}
blocks[11]['width'] = 4;
blocks[11]['title'] = 'door sensor'

blocks[18] = {}
blocks[18]['width'] = 4;
blocks[18]['title'] = 'smoke detector'

blocks[104] = {}
blocks[104]['width'] = 4;
blocks[104]['title'] = 'motion cams'

blocks[28] = {}
blocks[28]['width'] = 4;
blocks[28]['title'] = 'motion door'

blocks[27] = {}
blocks[27]['width'] = 4;
blocks[27]['title'] = 'motion ins'

blocks[132] = {}
blocks[132]['width'] = 4;
blocks[132]['title'] = 'mail cams MD'

blocks[203] = {}
blocks[203]['width'] = 4;
blocks[203]['title'] = 'speak motion cams'

blocks[100] = {}
blocks[100]['width'] = 4;
blocks[100]['title'] = 'MD cam 1'

blocks[30] = {}
blocks[30]['width'] = 4;
blocks[30]['title'] = 'MD cam 2'

blocks[130] = {}
blocks[130]['width'] = 4;
blocks[130]['title'] = 'MD cam 3'

blocks[97] = {}
blocks[97]['width'] = 4;
blocks[97]['title'] = 'MD cam 5'

blocks[94] = {}
blocks[94]['width'] = 4
blocks[94]['title'] = 'motion c1'
blocks[94]['playsound'] = 'sounds/ping.mp3'
//blocks[94]['gotoslide'] = 3;
blocks[94]['openpopup'] = {}
blocks[94]['openpopup']['url'] = 'http://192.168.90.20:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx';
blocks[94]['openpopup']['auto_close'] = 5; //seconds

blocks[95] = {}
blocks[95]['width'] = 4
blocks[95]['title'] = 'motion c2'
blocks[95]['playsound'] = 'sounds/ping.mp3'
//blocks[95]['gotoslide'] = 3;
blocks[95]['openpopup'] = {}
blocks[95]['openpopup']['url'] = 'http://192.168.90.17/axis-cgi/jpg/image.cgi';
blocks[95]['openpopup']['auto_close'] = 5; //seconds

blocks[102] = {}
blocks[102]['width'] = 4;
blocks[102]['title'] = 'motion c4'
blocks[102]['playsound'] = 'sounds/ping.mp3'
blocks[102]['gotoslide'] = '3'

blocks[103] = {}
blocks[103]['width'] = 4;
blocks[103]['title'] = 'motion c5'
blocks[102]['playsound'] = 'sounds/ping.mp3'
blocks[103]['gotoslide'] = '3'

blocks[139] = {}
blocks[139]['width'] = 12;
blocks[139]['title'] = 'squeeze living'

blocks['6_1'] = {}
blocks['6_1']['width'] = 4
blocks['6_1']['title'] = 'temp verw';

blocks['6_2'] = {}
blocks['6_2']['width'] = 4
blocks['6_2']['title'] = 'hum verw';

blocks['7_1'] = {}
blocks['7_1']['width'] = 4;
blocks['7_1']['title'] = 'temp inside'

blocks['7_2'] = {}
blocks['7_2']['width'] = 4;
blocks['7_2']['title'] = 'hum inside'

blocks['78_1'] = {}
blocks['78_1']['width'] = 4;
blocks['78_1']['title'] = 'temp outside'

blocks['78_2'] = {}
blocks['78_2']['width'] = 4;
blocks['78_2']['title'] = 'hum outside'

blocks['71_1'] = {}
blocks['71_1']['width'] = 4;
blocks['71_1']['title'] = 'power now'

blocks['71_2'] = {}
blocks['71_2']['width'] = 4;
blocks['71_2']['title'] = 'power today'

blocks['news_2'] = {}
blocks['news_2']['width'] = 12;
blocks['news_2']['feed'] = 'https://crossorigin.me/http://www.nu.nl/rss/algemeen';

blocks['currentweather'] = {}
blocks['currentweather']['width'] = 12;

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'system';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'security';

//defining number of columns, their contents en widths
//width can be a number 1 to 12, but total widths of all columns should always be 12

var columns = {}

//scr1

columns[1] = {}
columns[1]['blocks'] = [139,157,162,159,'71_1','71_2',135,149,201,8,11,18,104,28,27,10,9,20,22,122,124,132,203] 
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['currentweather_big','weather','6_1','7_1','78_1',buttons.radio,buttons.ups,buttons.log,buttons.snapshots,'news_2']
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['clock',buttons.camera1,buttons.camera2,buttons.camera3]
columns[3]['width'] = 2;

//columns[4] = {}
//columns[4]['blocks'] = [buttons.buienradar,buttons.camera1,buttons.camera2,buttons.camera3]
//columns[4]['width'] = 2;


//scr2

columns[4] = {}
columns[4]['blocks'] = [6,7,78,100,30,130,97,94,95,102,103,157,162,159,'71_1',135,149,201,8,11,18,104,28,27,10,9,20,22,122,124,132,203]
columns[4]['width'] = 5;

columns[5] = {}
columns[5]['blocks'] = ['currentweather_big','clock','sunrise',frames.log]
columns[5]['width'] = 5;

columns[6] = {}
columns[6]['blocks'] = [buttons.camera1,buttons.camera2,buttons.camera3,buttons.buienradar]
columns[6]['width'] = 2;

//scr3

columns[7] = {}
columns[7]['blocks'] = [buttons.camera2,frames.log]
columns[7]['width'] = 4;

columns[8] = {}
columns[8]['blocks'] = ['currentweather_big',buttons.camera1,buttons.buienradar]
columns[8]['width'] = 4;

columns[9] = {}
columns[9]['blocks'] = [buttons.camera3,'trafficmap']
columns[9]['width'] = 4;

// screens standby

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big','weather']
columns_standby[1]['width'] = 12;


//screens background:

var screens = {}

screens[1] = {}
screens[1]['background'] = 'brushed-metallic-backgroud800x480_3.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'brushed-metallic-backgroud800x480_3.jpg';
screens[2]['columns'] = [4,5,6]

screens[3] = {}
screens[3]['background'] = 'brushed-metallic-backgroud800x480_3.jpg';
screens[3]['columns'] = [7,8,9]

Oh, the ping sound is also working

custom.js:

Code: Select all

//add custom javascript in here
function afterGetDevices(){
	
}
function getExtendedBlockTypes(blocktypes){
	//blocktypes.Type['Lighting 2'] = { icon: 'fa fa-lightbulb-o', title: '<Name>', value: 'ds' }
	return blocktypes;
}

//repo aanwezig

function getBlock_135(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;
}

//ima aanwezig

function getBlock_149(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;
}


//change background color block on value 71 power

function getStatus_71_1(idx,value,device){
   if(parseFloat(device['Usage'])>1500){
      $('div.block_71_1').addClass('warning');
   }
   else {
      $('div.block_71_1').removeClass('warning');
   }
}


//change background color block on value 162 hdd

function getStatus_162(idx,value,device){
   if(parseFloat(device['Data'])>90){
      $('div.block_162').addClass('warning');
   }
   else {
      $('div.block_162').removeClass('warning');
   }
}


//change background color block on value 157 cpu

function getStatus_157(idx,value,device){
   if(parseFloat(device['Data'])>90){
      $('div.block_157').addClass('warning');
   }
   else {
      $('div.block_157').removeClass('warning');
   }
}


//change background color block on value 159 mem

function getStatus_159(idx,value,device){
   if(parseFloat(device['Data'])>90){
      $('div.block_159').addClass('warning');
   }
   else {
      $('div.block_159').removeClass('warning');
   }
}


//change background color block on value 8 alert

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


//change background color block on value 104 motion cams

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


//change background color block on value 28 motion pir door

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


//change background color block on value 27 motion pir inside

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


//change background color block on value 11 door

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

I hope this helps...

[capman]

Thanks 4 sharing. A dig into it , 2 figure it out.

[EdwinK]

I have this now in custom.js

Code: Select all

//temp alart
function getStatus_176_1(idx,value,device){
   if(parseFloat(device['Temp'])>30){
      $('div.block_176_1').removeClass('warning').removeClass('warningorange').addClass('warningred');
   }
   else if(parseFloat(device['Temp'])>25){
      $('div.block_176_1').removeClass('warning').removeClass('warningred').addClass('warningorange');
   } 
   else if(parseFloat(device['Temp'])>22){
      $('div.block_176_1').removeClass('warningorange').removeClass('warningred').addClass('warning');
   }
   else {
      $('div.block_176_1').removeClass('warning').removeClass('warningorange').removeClass('warningred');
   }
}

But instead of the flashing tile, I get the normal one. No warning in read or what ever colo(u)r.