Dashticz - Function - Trigger action on specific value

[mikeoo]

It's not the same for all devices.
You can search the output (http://DOMOTICZ_URL:8080/json.htm?type=devices&filter=all&used=true&order=Name) for attributes you could use.
For example, you could use for switch:

Code: Select all

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

Thanks again for the quick response

[mvveelen]

I'm using:

Code: Select all

.transbg.col-xs-1, .transbg.col-xs-2, .transbg.col-xs-3, .transbg.col-xs-4, .transbg.col-xs-5, .transbg.col-xs-6, .transbg.col-xs-7, .transbg.col-xs-8, .transbg.col-xs-9, .transbg.col-xs-10, .transbg.col-xs-11, .transbg.col-xs-12 {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 2px solid rgba(255,255,255,0);
  background: rgba(0,0,0,0.2);
  background-clip: padding-box;
border-radius: 9px; 
}

for the size and rounded corners of the buttons. How can I use (for instance) the orange style code to get the same sized button? Tried a few things, but it still has another size. See attachment.

[htilburgs]

If you use this code, I think it should be the same....

Code: Select all

.warning {
   background: rgba(204,129,44,0.30) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
}

[htilburgs]

Is it also possible to get multiple devices / IDX in 1 function?
Now I've to add the same function 2, 3 or more times with a different IDX. Is it possible to create a kind of array?

[robgeerts]

Not yet but you can do this to by pass this:

Code: Select all

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

function getStatus_5(idx,value,device){
         getStatus_145(idx,value,device);
}

[repoman]

If you use this code, I think it should be the same....

Code: Select all

.warning {
   background: rgba(204,129,44,0.30) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
}

Hi. I've tried adding the line "border: 7px solid rgba(255,255,255,0);" but nothing seems to change.

The warning block is still bigger...

Is this by design? How can I make them the same size as the others?

Thanks,
Pascal

[mvveelen]

If you use this code, I think it should be the same....

Code: Select all

.warning {
   background: rgba(204,129,44,0.30) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
}

Unfortunately it isn't:

[HansieNL]

If you use this code, I think it should be the same....

Code: Select all

.warning {
   background: rgba(204,129,44,0.30) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
}

Unfortunately it isn't:

Don't know for sure, but what if removing the border code?

[mvveelen]

I get the same result when I delete that line.

[HansieNL]

I get the same result when I delete that line.

Does this work?

Code: Select all

.warning .transbg.col-xs-1, 
.warning. transbg.col-xs-2, 
.warning .transbg.col-xs-3, 
.warning .transbg.col-xs-4, 
.warning .transbg.col-xs-5, 
.warning .transbg.col-xs-6, 
.warning .transbg.col-xs-7, 
.warning .transbg.col-xs-8, 
.warning .transbg.col-xs-9, 
.warning .transbg.col-xs-10, 
.warning .transbg.col-xs-11, 
.warning .transbg.col-xs-12 {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 2px solid rgba(255,255,255,0);
  background: rgba(204,129,44,0.30) !important;
  background-clip: padding-box;
border-radius: 9px; 
}

[htilburgs]

Maybe you overrule the setting in your custom.css. Is it possible for you to post your custom.css
I've tested the css and for me it's working great.

[mvveelen]

Maybe you overrule the setting in your custom.css. Is it possible for you to post your custom.css
I've tested the css and for me it's working great.

Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/
.h4.h4 {
    font-size: 14px;
}

.trashcan { 
    height 36px;
    width: 36px;
} 

.warning {
   background: rgba(204,129,44,0.30) !important;
   background-clip: padding-box;
}

/* Calendar font modifications with icon active */
/*.col-xs-10.items {
/*   font-size: 12px;
/*}

/* Calendar font modifications with NO icon active */
/*.col-xs-12.items {
/*   font-size: 12px;
/*}

.trash .state div.trashrow {
    font-size: 12px;
}
.trash .state div.trashtoday {
    font-size: 16px;
    font-weight: bold;
}
.trash .state div.trashtomorrow {
    font-size: 14px;
    font-weight: bold;
}

/* Transparent background for buttons Thermostat */
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
    border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 20px;
    background-color: transparent;
}

.swiper-pagination-bullet {
    width: 30px !important;
    height: 30px !important;
}

/* Height of the blocktitles and center text in new height */
div.mh.titlegroups {
    height: 60px !important;
    padding-top: 3px !important;
}


.transbg.col-xs-1, .transbg.col-xs-2, .transbg.col-xs-3, .transbg.col-xs-4, .transbg.col-xs-5, .transbg.col-xs-6, .transbg.col-xs-7, .transbg.col-xs-8, .transbg.col-xs-9, .transbg.col-xs-10, .transbg.col-xs-11, .transbg.col-xs-12 {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 2px solid rgba(255,255,255,0);
  background: rgba(0,0,0,0.2);
  background-clip: padding-box;
border-radius: 9px; 
}

.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {padding-top:15px; padding-bottom:15px; border: 2px solid rgba(0,0,0,0); background: rgba(100,100,100,0.8); background-clip: padding-box; border-radius: 9px; }

#newsTicker li {
    min-height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 14px;
    color: #fff;
    max-height: 250px;    */ Set the maxim height of the news-ticker */
}

[htilburgs]

Ok, quite a puzzle (but a nice one...).

Put this in your custom.css for the .warning part and it should work:

Code: Select all

.warning {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	border-radius: 9px !important; 
	background-color: rgba(199, 44, 43, 0.3) !important;	
	border: 2px solid rgba(255,255,255,0) !important;
	background-image: initial !important;
	background-position-x: initial !important;
	background-position-y: initial !important;
	background-size: initial !important;
	background-repeat-x: initial !important;
	background-repeat-y: initial !important;
	background-attachment: initial !important;
	background-origin: initial !important;
	background-clip: padding-box !important;
}

Let me know, if its OK now.

And I see one minor error in your custom.css.
In the #newsTicker li part the */ Set the maxim height of the news-ticker */ shoud be /* Set the maxim height of the news-ticker */

For now it's not causing an issue, but you never now what it causes in the future....

[repoman]

Ok, quite a puzzle (but a nice one...).

Put this in your custom.css for the .warning part and it should work:

Code: Select all

.warning {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	border-radius: 9px !important; 
	background-color: rgba(199, 44, 43, 0.3) !important;	
	border: 2px solid rgba(255,255,255,0) !important;
	background-image: initial !important;
	background-position-x: initial !important;
	background-position-y: initial !important;
	background-size: initial !important;
	background-repeat-x: initial !important;
	background-repeat-y: initial !important;
	background-attachment: initial !important;
	background-origin: initial !important;
	background-clip: padding-box !important;
}

Let me know, if its OK now.

Tried this code and I get the rounded corners but the warning blocks are still bigger...
(it's the only code in my custom.css)

[htilburgs]

This was specific for @mveelen, based on his css.
I'll will look into it later on, now busy with my regular job....

[htilburgs]

Tried this code and I get the rounded corners but the warning blocks are still bigger...
(it's the only code in my custom.css)

Try this one:

Code: Select all

.warning {
	background: rgba(199,44,44,0.7) !important;
	background-image: initial !important;
	background-position-x: initial !important;
	background-position-y: initial !important;
	background-size: initial !important;
	background-repeat-x: initial !important;
	background-repeat-y: initial !important;
	background-attachment: initial !important;
	background-origin: initial !important;
	background-clip: padding-box !important;
}

[repoman]

Yep, that did the trick!

Thanks!

[freakshock]

I did this to have different colors, depending on the temperature of my living room:

Code: Select all

function getStatus_145(idx,value,device){
	if(parseFloat(device['Data'])>23){
		$('div.block_145').removeClass('warning').addClass('warningorange');
	}
	else if(parseFloat(device['Data'])>25){
		$('div.block_145').removeClass('warningorange').addClass('warning');
	}
	else {
		$('div.block_145').removeClass('warning').removeClass('warningorange');
	}
}

Hi Rob,

I think you need to switch the higher value with the lower value.
Your code did not work for me, the blocks remained orange even though the value exceeded 25.

My code:

Code: Select all

//kleurtje op knop temp huiskamer wanneer het warmer is dan bepaalde temperatuur (oranje of rood)
function getStatus_90(idx,value,device){
   if(parseFloat(device['Temp'])>25){
      $('div.block_90').removeClass('warningoranje').addClass('warning');
   }
   else if(parseFloat(device['Temp'])>23){
      $('div.block_90').removeClass('warning').addClass('warningoranje');
   }
   else {
      $('div.block_90').removeClass('warning').removeClass('warningoranje');
   }
}

[mvveelen]

Ok, quite a puzzle (but a nice one...).

Put this in your custom.css for the .warning part and it should work:

Spoiler: show

Code: Select all

.warning {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	border-radius: 9px !important; 
	background-color: rgba(199, 44, 43, 0.3) !important;	
	border: 2px solid rgba(255,255,255,0) !important;
	background-image: initial !important;
	background-position-x: initial !important;
	background-position-y: initial !important;
	background-size: initial !important;
	background-repeat-x: initial !important;
	background-repeat-y: initial !important;
	background-attachment: initial !important;
	background-origin: initial !important;
	background-clip: padding-box !important;
}

Let me know, if its OK now.

And I see one minor error in your custom.css.
In the #newsTicker li part the */ Set the maxim height of the news-ticker */ shoud be /* Set the maxim height of the news-ticker */

For now it's not causing an issue, but you never now what it causes in the future....

Yesssss, that's it !! Thanks !

Also changed the newsTicker-part

[htilburgs]

Ok, quite a puzzle (but a nice one...).

Put this in your custom.css for the .warning part and it should work:

Spoiler: show

Code: Select all

.warning {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	border-radius: 9px !important; 
	background-color: rgba(199, 44, 43, 0.3) !important;	
	border: 2px solid rgba(255,255,255,0) !important;
	background-image: initial !important;
	background-position-x: initial !important;
	background-position-y: initial !important;
	background-size: initial !important;
	background-repeat-x: initial !important;
	background-repeat-y: initial !important;
	background-attachment: initial !important;
	background-origin: initial !important;
	background-clip: padding-box !important;
}

Let me know, if its OK now.

And I see one minor error in your custom.css.
In the #newsTicker li part the */ Set the maxim height of the news-ticker */ shoud be /* Set the maxim height of the news-ticker */

For now it's not causing an issue, but you never now what it causes in the future....

Yesssss, that's it !! Thanks !

Also changed the newsTicker-part

I also noticed a minor in .trashcan. After height the : is missing. (I know, I'm a nitpicker )