Page 1 of 2

Dashticz v3.14.1-beta

Posted: Tuesday 25 March 2025 18:46
by Lokonli
After some silence a new Dashticz release v3.14.1-beta!

This release focuses on changes in the handling of Domoticz device blocks.

Besides quite some internal code changes, this release also brings new functionality:
  • Combine multiple values of a device into one block (for instance multiple values of a P1 Smart Meter)
  • Combine device values of multiple devices into one block
combine.jpg
combine.jpg (6.71 KiB) Viewed 1751 times
p1_multiline.jpg
p1_multiline.jpg (18.27 KiB) Viewed 1751 times
Changes have been documented in the Release Notes

For the users that make use of 'getExtendedBlockTypes' code hook: check the update notes

Re: Dashticz v3.14.1-beta

Posted: Wednesday 26 March 2025 1:16
by solarboy
Excellent, thank you, shall try it now.

Re: Dashticz v3.14.1-beta

Posted: Wednesday 26 March 2025 9:44
by TroisSix
Nice feature, will try this soon.
Thank you Lokonli ^^

Re: Dashticz v3.14.1-beta

Posted: Sunday 06 April 2025 10:40
by madpatrick
Hi Lokonli,

I noted the following during update to 3.14.1 beta.

The group icons are overruled

Code: Select all

blocks[gr_tuin] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_garden.png', title:'Tuin'}
blocks[gr_kamer] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_desk_lamp.png', title:'Kamer'}
2025-04-06 10_33_06-Dashticz.png
2025-04-06 10_33_06-Dashticz.png (49.67 KiB) Viewed 1411 times
2025-04-06 10_33_24-Dashticz.png
2025-04-06 10_33_24-Dashticz.png (51.45 KiB) Viewed 1409 times


With the Logitech Media server i had a empty line when switched off, but his now giving a text

Code: Select all

blocks['lms'] 			= {idx: 480, width : 8,iconOn: 'fas fa-volume-down fa-beat', iconOff: ' '}
2025-04-06 10_35_52-Dashticz.png
2025-04-06 10_35_52-Dashticz.png (4.1 KiB) Viewed 1409 times


The block heights are now overrruled from my .css file
The mouse over is correct, but the normal block height is not smaller

Code: Select all

/* --------------------------------------------------------------------------- BLOCKS  */
.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 : 8px; 
	padding-bottom : 6px; 
	border : 2px solid rgba(255,255,255,0); 
	border-radius : 1px;
	background : rgba(77,77,222,0.2);
	background-clip : padding-box;
	height: 100px ;
	text-align : center !important;
	}

/* --------------------------------------------------------------------------- On mouse-over  */ 
.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 : 8px; 
	padding-bottom : 6px; 
	border : 2px solid rgba(255,255,255,0); 
	border-radius : 1px;
	background : rgba(77,77,222,0.2);
	background-clip : padding-box;
	height: 100px ;
	text-align : center !important;
font-size: 26px !important;
 }

Re: Dashticz v3.14.1-beta

Posted: Thursday 10 April 2025 7:40
by Lokonli
ok, thanks for testing.

Last minute I had added a small bugfix, which unfortunately has some side effects.

It's a signal however that the code has become too complex, and that the current approach of manual testing is not sufficient anymore.

So, i decided to:
1) Implement an automatic testing framework. The idea is that all examples in the Dashticz documentation will be tested after every change. I've implemented the first 5 tests at the moment.
2) Another redesign of the software code for handling the Domoticz devices.

Next update will follow soon.

Re: Dashticz v3.14.1-beta

Posted: Wednesday 16 April 2025 7:53
by Renber
Hello,
Since the April 15 update, I've lost my icons on LightSwitch devices (whether switches, doors, or IR sensors). FYI: I don't have any "icon:" parameters in my JS; I'm using the default icons.
Thanks.

Re: Dashticz v3.14.1-beta

Posted: Friday 18 April 2025 14:00
by Lokonli
Renber wrote: Wednesday 16 April 2025 7:53 Hello,
Since the April 15 update, I've lost my icons on LightSwitch devices (whether switches, doors, or IR sensors). FYI: I don't have any "icon:" parameters in my JS; I'm using the default icons.
Thanks.
Can you test latest version? (3.14.1.3, 17-4)
It should work now.

Re: Dashticz v3.14.1-beta

Posted: Friday 18 April 2025 16:39
by Lokonli
madpatrick wrote: Sunday 06 April 2025 10:40 Hi Lokonli,

I noted the following during update to 3.14.1 beta.



The block heights are now overrruled from my .css file
The mouse over is correct, but the normal block height is not smaller

Code: Select all

/* --------------------------------------------------------------------------- BLOCKS  */
.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 : 8px; 
	padding-bottom : 6px; 
	border : 2px solid rgba(255,255,255,0); 
	border-radius : 1px;
	background : rgba(77,77,222,0.2);
	background-clip : padding-box;
	height: 100px ;
	text-align : center !important;
	}

/* --------------------------------------------------------------------------- On mouse-over  */ 
.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 : 8px; 
	padding-bottom : 6px; 
	border : 2px solid rgba(255,255,255,0); 
	border-radius : 1px;
	background : rgba(77,77,222,0.2);
	background-clip : padding-box;
	height: 100px ;
	text-align : center !important;
font-size: 26px !important;
 }
I had to change the CSS classes slightly because in the new Dashticz version a Domoticz block can consist of multiple lines, meaning the height of a block should be able to grow.

You can change your styling to:

Code: Select all

.transbg {
	background-color : rgba(77,77,222,0.2) !important;
        padding-top : 8px !important; 
	padding-bottom : 6px !important; 
	border : 2px solid rgba(255,255,255,0) !important; 
	border-radius : 1px !important;
}

.mh {
	height: 100px !important;
	text-align : center !important;
}

.transbg.hover:hover {
        font-size: 26px !important;
}

Re: Dashticz v3.14.1-beta

Posted: Friday 18 April 2025 17:41
by Lokonli
madpatrick wrote: Sunday 06 April 2025 10:40 With the Logitech Media server i had a empty line when switched off, but his now giving a text

Code: Select all

blocks['lms'] 			= {idx: 480, width : 8,iconOn: 'fas fa-volume-down fa-beat', iconOff: ' '}
2025-04-06 10_35_52-Dashticz.png
Probably fixed in 3.14.4.

Can you test? (I don't have a LMS)

Re: Dashticz v3.14.1-beta

Posted: Friday 18 April 2025 20:12
by Renber
Can you test latest version? (3.14.1.3, 17-4)
It should work now.
It's good for me. Thank you for your work.

Re: Dashticz v3.14.1-beta

Posted: Friday 18 April 2025 20:42
by madpatrick
Hi Lokonli,

Thanks for the update.
It looks better now, but not all good for me yet.
Probably some setup issues which need to sort out.

The block are good now and needs a little bit tweaking
The LMS text is now ok, but needs a bit more testing when the music is playing
[EDIT]
The LMS text is ok

The standby screen is now mangled
[EDIT]
THe problem looks to appear in the TEXTBLOCK

Old version
Standby-old.png
Standby-old.png (44.8 KiB) Viewed 1055 times
New version
Standby-New.png
Standby-New.png (47.59 KiB) Viewed 1055 times

Code: Select all

/* --------------------------------------------------------------------------- STANDBY BACKGROUND --------------------------------------------------------------------------- */ 
.screenstandby 					{background-color: black !important}

/* --------------------------------------------------------------------------- STANDBY SCREEN --------------------------------------------------------------------------- */	
.standby .block_textblock1 			{height: 150px !important;background-color: rgba(0,0,0,1) !important;text-align: left !important}	
.standby .block_textblock1 .title 		{display: none !important}
.standby .block_textblock1 .value 		{font-size: 22px !important;color:white !important; display:inline-block;position: relative; left: -50px !important;top: -15px !important;}

.standby .block_textblock2 			{height: 150px !important;background-color: rgba(0,0,0,1) !important} 	
.standby .block_textblock2 .title 		{display: none !important}	
.standby .block_textblock2 .value 		{font-size: 22px !important;color:white !important;text-align: center !important;top: -15px !important;}	

.standby .block_textblock3 			{height: 150px !important;background-color: rgba(0,0,0,1) !important}
.standby .block_textblock3 .title 		{font-size: 26px !important;position: fixed;top:  5px;right: 10px;text-align: right !important;text-shadow: 2px 2px 5px #FF0000 !important}
.standby .block_textblock3 .value 		{font-size: 22px !important;position: fixed;top: 40px;right:  5px;text-align: right !important;}
.standby .block_textblock3 img			{position: fixed;top: 8px;right: 135px;text-align: right !important;max-width: 30px !important;}


.block_textblock1 				{height: 150px !important;background-color: rgba(0,0,0,1) !important;text-align: left !important}	
.block_textblock1 .title 			{display: none !important}
.block_textblock1 .value 			{font-size: 22px !important;color:white !important; display:inline-block;position: relative; left: -50px !important;top: -15px !important;}

.block_textblock2 				{height: 150px !important;background-color: rgba(0,0,0,1) !important} 	
.block_textblock2 .title 			{display: none !important}	
.block_textblock2 .value 			{font-size: 22px !important;color:white !important;display:inline-block;position: relative;top: -15px !important;}	

.block_textblock3 				{height: 150px !important;background-color: rgba(0,0,0,1) !important}
.block_textblock3 .title 			{font-size: 26px !important;position: fixed;top:  5px;right: 10px;text-align: right !important;text-shadow: 2px 2px 5px #FF0000 !important}
.block_textblock3 .value 			{font-size: 22px !important;position: fixed;top: 40px;right:  5px;text-align: right !important;}
.block_textblock3 img				{position: fixed;top: 8px;right: 135px;text-align: right !important;max-width: 30px !important;}


.standby [data-id='myclock']			{height: 150px !important;background-color: rgba(0,0,0,1) !important;}
			 
.standby [data-id='myclock'] .clock-day		{color: rgba(250, 190, 190, 1) !important;text-shadow: 4px 3px 3px #8c8c64 !important;font-weight: bold !important;}
.standby [data-id='myclock'] .clock-hours	{color: rgba(242, 242, 242, 1) !important;}
.standby [data-id='myclock'] .clock-minutes	{color: rgba(242, 242, 242, 1) !important;}
.standby [data-id='myclock'] .clock-seconds 	{color: rgba(179, 179, 179, 0.6) !important;}
.standby [data-id='myclock'] .clock-label	{color: rgba(200, 200, 0, 1) !important;font-weight: bold;font-family: "floydian"}

.standby .block_regen 				{font-family: Arial !important;height: 180px !important;display:flex;align-items:center;text-align: right !important;background-color: rgba(0,0,0,1) !important}
.standby .block_regen .title 			{font-size: 30px !important;rgba(244, 255, 204, 0.5) !important;} 
.standby .block_regen .value 			{display: none}
.standby .block_regen img			{display: none}

.standby [data-id='weather_standby'] 		{font-family: Arial !important;height: 180px !important;background-color: rgba(0,0,0,1) !important}
.standby [data-id='weather_standby'] .icon	{font-size: 24pt !important;padding-left: 10px !important}
.standby [data-id='weather_standby'] .temp	{font-family: Arial !important;font-weight: bold;font-size: 26pt !important;color:#f4ffcc;}

.standby .weather .icon				{max-width: 80px !important;}
.standby .weather .temp				{font-family: Arial !important;font-weight: bold;font-size: 26pt !important;color:#f4ffcc;}

.standby .block_sunrise		 		{height: 80px !important;display:flex;align-items:center;text-align: center !important;background-color: rgba(0,0,0,1) !important}
.standby .wi-sunrise:before 			{font-size: 32pt !important; color: yellow; !important;padding-left: 40px !important;}
.standby .wi-sunset:before  			{font-size: 32pt !important; color: orange !important; padding-left: 30px !important;}
.standby .sunrise 				{font-size: 30pt !important; color: #f4ffcc !important;padding-left: 20px !important;}
.standby .sunset 				{font-size: 30pt !important; color: #f4ffcc !important;padding-left: 20px !important;}

.standby .block_lms				{height: 150px !important;display:flex;align-items:center;text-align: left !important;padding-top: 100px !important;background-color: rgba(0,0,0,1) !important}
.standby .block_lms .icon 			{max-width: 40px !important;color: #89CCFF !important}
.standby .block_lms .col-data			{color : yellow !important;display:flex;align-items:center;text-align: left !important;}
.standby .block_lms .title 			{display: none}
.standby .h4.h4 				{font-size:22px;}

Re: Dashticz v3.14.1-beta

Posted: Friday 25 April 2025 6:59
by Renber
Hello,
since the update I have lost the domoticz blocks that had a space in their name. I resolved this by replacing the space with "_".

Re: Dashticz v3.14.1-beta

Posted: Friday 25 April 2025 19:56
by Lokonli
madpatrick wrote: Friday 18 April 2025 20:42 Hi Lokonli,

Thanks for the update.
It looks better now, but not all good for me yet.
Probably some setup issues which need to sort out.

The block are good now and needs a little bit tweaking
The LMS text is now ok, but needs a bit more testing when the music is playing
[EDIT]
The LMS text is ok

The standby screen is now mangled
[EDIT]
THe problem looks to appear in the TEXTBLOCK

Old version
Standby-old.png

New version
Standby-New.png

Code: Select all

/* --------------------------------------------------------------------------- STANDBY BACKGROUND --------------------------------------------------------------------------- */ 
.screenstandby 					{background-color: black !important}

/* --------------------------------------------------------------------------- STANDBY SCREEN --------------------------------------------------------------------------- */	
.standby .block_textblock1 			{height: 150px !important;background-color: rgba(0,0,0,1) !important;text-align: left !important}	
.standby .block_textblock1 .title 		{display: none !important}
.standby .block_textblock1 .value 		{font-size: 22px !important;color:white !important; display:inline-block;position: relative; left: -50px !important;top: -15px !important;}

.standby .block_textblock2 			{height: 150px !important;background-color: rgba(0,0,0,1) !important} 	
.standby .block_textblock2 .title 		{display: none !important}	
.standby .block_textblock2 .value 		{font-size: 22px !important;color:white !important;text-align: center !important;top: -15px !important;}	

.standby .block_textblock3 			{height: 150px !important;background-color: rgba(0,0,0,1) !important}
.standby .block_textblock3 .title 		{font-size: 26px !important;position: fixed;top:  5px;right: 10px;text-align: right !important;text-shadow: 2px 2px 5px #FF0000 !important}
.standby .block_textblock3 .value 		{font-size: 22px !important;position: fixed;top: 40px;right:  5px;text-align: right !important;}
.standby .block_textblock3 img			{position: fixed;top: 8px;right: 135px;text-align: right !important;max-width: 30px !important;}


.block_textblock1 				{height: 150px !important;background-color: rgba(0,0,0,1) !important;text-align: left !important}	
.block_textblock1 .title 			{display: none !important}
.block_textblock1 .value 			{font-size: 22px !important;color:white !important; display:inline-block;position: relative; left: -50px !important;top: -15px !important;}

.block_textblock2 				{height: 150px !important;background-color: rgba(0,0,0,1) !important} 	
.block_textblock2 .title 			{display: none !important}	
.block_textblock2 .value 			{font-size: 22px !important;color:white !important;display:inline-block;position: relative;top: -15px !important;}	

.block_textblock3 				{height: 150px !important;background-color: rgba(0,0,0,1) !important}
.block_textblock3 .title 			{font-size: 26px !important;position: fixed;top:  5px;right: 10px;text-align: right !important;text-shadow: 2px 2px 5px #FF0000 !important}
.block_textblock3 .value 			{font-size: 22px !important;position: fixed;top: 40px;right:  5px;text-align: right !important;}
.block_textblock3 img				{position: fixed;top: 8px;right: 135px;text-align: right !important;max-width: 30px !important;}


.standby [data-id='myclock']			{height: 150px !important;background-color: rgba(0,0,0,1) !important;}
			 
.standby [data-id='myclock'] .clock-day		{color: rgba(250, 190, 190, 1) !important;text-shadow: 4px 3px 3px #8c8c64 !important;font-weight: bold !important;}
.standby [data-id='myclock'] .clock-hours	{color: rgba(242, 242, 242, 1) !important;}
.standby [data-id='myclock'] .clock-minutes	{color: rgba(242, 242, 242, 1) !important;}
.standby [data-id='myclock'] .clock-seconds 	{color: rgba(179, 179, 179, 0.6) !important;}
.standby [data-id='myclock'] .clock-label	{color: rgba(200, 200, 0, 1) !important;font-weight: bold;font-family: "floydian"}

.standby .block_regen 				{font-family: Arial !important;height: 180px !important;display:flex;align-items:center;text-align: right !important;background-color: rgba(0,0,0,1) !important}
.standby .block_regen .title 			{font-size: 30px !important;rgba(244, 255, 204, 0.5) !important;} 
.standby .block_regen .value 			{display: none}
.standby .block_regen img			{display: none}

.standby [data-id='weather_standby'] 		{font-family: Arial !important;height: 180px !important;background-color: rgba(0,0,0,1) !important}
.standby [data-id='weather_standby'] .icon	{font-size: 24pt !important;padding-left: 10px !important}
.standby [data-id='weather_standby'] .temp	{font-family: Arial !important;font-weight: bold;font-size: 26pt !important;color:#f4ffcc;}

.standby .weather .icon				{max-width: 80px !important;}
.standby .weather .temp				{font-family: Arial !important;font-weight: bold;font-size: 26pt !important;color:#f4ffcc;}

.standby .block_sunrise		 		{height: 80px !important;display:flex;align-items:center;text-align: center !important;background-color: rgba(0,0,0,1) !important}
.standby .wi-sunrise:before 			{font-size: 32pt !important; color: yellow; !important;padding-left: 40px !important;}
.standby .wi-sunset:before  			{font-size: 32pt !important; color: orange !important; padding-left: 30px !important;}
.standby .sunrise 				{font-size: 30pt !important; color: #f4ffcc !important;padding-left: 20px !important;}
.standby .sunset 				{font-size: 30pt !important; color: #f4ffcc !important;padding-left: 20px !important;}

.standby .block_lms				{height: 150px !important;display:flex;align-items:center;text-align: left !important;padding-top: 100px !important;background-color: rgba(0,0,0,1) !important}
.standby .block_lms .icon 			{max-width: 40px !important;color: #89CCFF !important}
.standby .block_lms .col-data			{color : yellow !important;display:flex;align-items:center;text-align: left !important;}
.standby .block_lms .title 			{display: none}
.standby .h4.h4 				{font-size:22px;}
I expect these issues have been solved in latest version.

Could you retest?

Re: Dashticz v3.14.1-beta

Posted: Friday 25 April 2025 20:02
by Lokonli
Renber wrote: Friday 25 April 2025 6:59 Hello,
since the update I have lost the domoticz blocks that had a space in their name. I resolved this by replacing the space with "_".
I cannot reproduce the problem.

Can you send me:
1. your block definition from CONFIG.js
2. the json output of the Domoticz device:
http://domoticz-ip:port/json.htm?type=command&param=getdevices&rid=123

with 123 your device id.

Re: Dashticz v3.14.1-beta

Posted: Friday 25 April 2025 20:04
by madpatrick
Looking good.
Thanks for the swift fix

Re: Dashticz v3.14.1-beta

Posted: Friday 25 April 2025 20:40
by madpatrick
Hi Lokonli,

Found another issue

My sliders are gone

Code: Select all

.ui-slider-handle 				{padding: 6px 10px 6px 10px !important;background-color: #00aaff !important;border-color: white !important;border-radius: 14px;height: 22px !important;width: 48px !important;box-shadow: inset 3px 3px 5px 0px rgba(255,255,255,0.5)}
.ui-slider-horizontal 				{background-color: #6a6a6a !important;border-color: #ffffff;max-width: 85% !important;}
2025-04-25 20_39_32-Dashticz.png
2025-04-25 20_39_32-Dashticz.png (107.08 KiB) Viewed 648 times
2025-04-25 20_40_06-Dashticz.png
2025-04-25 20_40_06-Dashticz.png (97.69 KiB) Viewed 648 times

Re: Dashticz v3.14.1-beta

Posted: Saturday 26 April 2025 11:28
by Lokonli
madpatrick wrote: Friday 25 April 2025 20:40 Hi Lokonli,

Found another issue

My sliders are gone
Fixed in latest version.

I've slightly changed (improved) the CSS definition of the stop button, to make the height 100% correct.
You may have to adjust your css styling as well a bit.

Re: Dashticz v3.14.1-beta

Posted: Saturday 26 April 2025 11:34
by madpatrick
Thanks for the quick fix.

How can i adjust the stop button ?

Code: Select all

.btn-number.stop 				{width: 88px !important;height: 50px !important; border: 1px solid rgba(255,255,255,0.7);background: red; border-radius: 5px;font-size:20px !important;}
When i change the size it doesn't work

Re: Dashticz v3.14.1-beta

Posted: Saturday 26 April 2025 12:11
by Renber
I cannot reproduce the problem.

Can you send me:
1. your block definition from CONFIG.js
2. the json output of the Domoticz device:
http://domoticz-ip:port/json.htm?type=command&param=getdevices&rid=123

with 123 your device id.
is ok: blocks['VLC_Bureau'] = {idx:1386,width:12,title:'VLC'};
is not ok: blocks['VLC Bureau'] = {idx:1386,width:12,title:'VLC'};

"SubType" : "X10",
"SwitchType" : "Media Player",
"SwitchTypeVal" : 17,
"Timers" : "false",
"Type" : "Lighting 1",
"TypeImg" : "Media",

Re: Dashticz v3.14.1-beta

Posted: Saturday 26 April 2025 12:47
by Lokonli
madpatrick wrote: Saturday 26 April 2025 11:34 Thanks for the quick fix.

How can i adjust the stop button ?

Code: Select all

.btn-number.stop 				{width: 88px !important;height: 50px !important; border: 1px solid rgba(255,255,255,0.7);background: red; border-radius: 5px;font-size:20px !important;}
When i change the size it doesn't work
I will make styling a bit easier.

Can you add the following to custom.css for testing:

Code: Select all

.mh {
    --col1width: 30px;
    --col2width: 30px;
}

.right2col {
    padding-right: calc(var(--col1width) + var(--col2width) + 8px);
}

.col-button2 {
    width: calc(var(--col1width) + var(--col2width));
}

.col-button2 .btn-number {
    width: var(--col1width);
}

.btn.stop {
    width: var(--col2width);
    font-size:20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Only change below this line*/

.mh {
    --col1width: 60px;
    --col2width: 60px;
}

.mh .btn {
    background-color: #00aaff;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px;
}

.mh .btn.stop {
    background-color: red;
}
You can change the width of the up/down and stop button via the two parameters: now they are 60px.
The styling can be done via ".mh .btn", or via ".mh .btn.stop" for the stop button only.

If this is working for you let me know, and I'll include in the next version.