Page 3 of 5
Re: v3.2.0 beta
Posted: Monday 11 November 2019 10:12
by Dave47
ion sound is fixed as well
Thank you!
Code: Select all
blocks['78'] = {} blocks['78']['width'] = 12; blocks['78']['title'] = 'Huego2'; blocks['78']['flash'] = 1000; blocks['78']['speak'] = 'device on';
'Speak' maybe a bug?
Re: v3.2.0 beta
Posted: Monday 11 November 2019 15:15
by janumix
Lokonli wrote: ↑Monday 11 November 2019 8:00
Swiper indeed has been enabled on mobile devices. You can swipe horizontally.
I'll make enableSwiper a config setting, so that you can disable it.
Thank, but even horizontally it doesn't works for now

Re: v3.2.0 beta
Posted: Monday 11 November 2019 15:20
by HansieNL
HansieNL wrote: ↑Sunday 10 November 2019 18:52
Dave47 wrote: ↑Sunday 10 November 2019 18:22
Must i also rewrite these blocks?
blocks['116'] = {} blocks['116']['width'] = 4; blocks['116']['title'] = 'Dashticz';
I have ' 116' must i write 116?
In readthedocks the settings is a little bit difference for v3
Your code should normally work. If you like you can also use the following code:
Code: Select all
blocks['116'] = {
width: 4,
title: Dashticz
}
If you use anything other than a number you have to put it between quotes ''
Some examples ['s1'] ['v3'] ['123_1']
If you only use numbers you can leave them out.
Re: v3.2.0 beta
Posted: Monday 11 November 2019 16:14
by tarmacalastair
janumix wrote: ↑Monday 11 November 2019 15:15
Lokonli wrote: ↑Monday 11 November 2019 8:00
Swiper indeed has been enabled on mobile devices. You can swipe horizontally.
I'll make enableSwiper a config setting, so that you can disable it.
Thank, but even horizontally it doesn't works for now
That's interesting because on both my phones (Android and Iphone) the auto_slide and the manual swipe work fine.
In my tests I've also noticed that you can't scroll down any more on mobile.
In fact, the behaviour also seems to have changed in Firefox on a PC:
In beta 3.1.0:
A page with multiple screens - can scroll down the page on a mobile phone but not in a PC browser (resized window, or full if the page is too long)
A page with only one screen - can scroll down on both PC and phone
In beta 3.2.0:
multi screen page - cannot scroll down (mobile and PC)
single screen page - also cannot scroll down (mobile and PC)
Re: v3.2.0 beta
Posted: Monday 11 November 2019 22:21
by janumix
tarmacalastair wrote: ↑Monday 11 November 2019 16:14
janumix wrote: ↑Monday 11 November 2019 15:15
Lokonli wrote: ↑Monday 11 November 2019 8:00
Swiper indeed has been enabled on mobile devices. You can swipe horizontally.
I'll make enableSwiper a config setting, so that you can disable it.
Thank, but even horizontally it doesn't works for now
That's interesting because on both my phones (Android and Iphone) the auto_slide and the manual swipe work fine.
In my tests I've also noticed that you can't scroll down any more on mobile.
In fact, the behaviour also seems to have changed in Firefox on a PC:
In beta 3.1.0:
A page with multiple screens - can scroll down the page on a mobile phone but not in a PC browser (resized window, or full if the page is too long)
A page with only one screen - can scroll down on both PC and phone
In beta 3.2.0:
multi screen page - cannot scroll down (mobile and PC)
single screen page - also cannot scroll down (mobile and PC)
Yes, I can confirm both 3.1.0 and 3.2.0 in my case with single screen.
Re: v3.2.0 beta
Posted: Monday 11 November 2019 23:48
by Lokonli
The new version of the swiper component gives some issues for single screen dashboards and for vertical scrolling on touch devices.
I'm preparing a fix
Sent from my SM-A320FL using Tapatalk
Re: v3.2.0 beta
Posted: Tuesday 12 November 2019 0:52
by tarmacalastair
Sorry, but I think I've found some more bugs in 3.2.0 beta that were working fine in 3.1.0
When I try to create a menu as per
https://dashticz.readthedocs.io/en/beta ... ide-button:
The documentation says,
"If you use a button to slide to specific screen (menu button), then the background colour of that button will change if that specific screen is active" - Unfortunately, the colour of the button does not change in this version - also, adding this in the custom.css file does nothing:
Code: Select all
.selectedbutton {
background-color: #cba !important;
}
For the setting:
Code: Select all
config['slide_effect'] = 'flip'; //(or 'slide' or 'fade', etc)
only
slide seems to work now.
Thanks for all your hard work.
Re: v3.2.0 beta
Posted: Tuesday 12 November 2019 7:54
by Lokonli
ok, I'll look into this as well.
Re: v3.2.0 beta
Posted: Tuesday 12 November 2019 15:19
by Lokonli
I've updated the beta branch with some swiper related changes. This should solve most issues.
If you want to disable swiper for narrow display widths, add the following to CONFIG.js:
Setting the swipe transition effect still doesn't work.
Re: v3.2.0 beta
Posted: Tuesday 12 November 2019 15:35
by janumix
It works now - thanks !
Re: v3.2.0 beta
Posted: Tuesday 12 November 2019 19:19
by pvklink
is there a way to style frames.secpanel ?
Like background color etc?
also the security button 1728 for for the panel does not work as aspected
.block_1728 .btn.active {color: white;background-color: rgb(119,110,97) !important;}
.block_1728 select {background-color: white !important;color: rgb(119,110,97)!important;}
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 19:51
by Lokonli
pvklink wrote: ↑Tuesday 12 November 2019 19:19
is there a way to style frames.secpanel ?
Like background color etc?
also the security button 1728 for for the panel does not work as aspected
.block_1728 .btn.active {color: white;background-color: rgb(119,110,97) !important;}
.block_1728 select {background-color: white !important;color: rgb(119,110,97)!important;}
It's difficult to style frames.secpanel, because it's an iframe: The contents comes from Domoticz. I did some experiments, but did not find a way yet.
A security device can be styled as follows:
(replace 234 with 1728)
Code: Select all
.block_234 {
height: 120px !important;
background-color: yellow !important;
}
.block_234 .title {
font-size: 30px !important;
color: green;
}
.block_234 .col-icon {
color: black !important;
}
.block_234 .btn {
background-color: red!important;
font-size: 20px !important;
}
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 21:18
by pvklink
thanks, dashboard is looking great!
I am almost there.
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 21:20
by Lokonli
pvklink wrote: ↑Tuesday 12 November 2019 19:19
is there a way to style frames.secpanel ?
Like background color etc?
also the security button 1728 for for the panel does not work as aspected
.block_1728 .btn.active {color: white;background-color: rgb(119,110,97) !important;}
.block_1728 select {background-color: white !important;color: rgb(119,110,97)!important;}
I don't think you can style the content of the iframe. It's served from a different port number as Dashticz. The browser blocks modifying the content of an iframe if it comes from a different port or domain.
What you can do is scaling the content of an iframe. Assuming you add "key: 'secpanel' " to the frames.secpanel definition, you can scale the secpanel with:
Code: Select all
[data-id='secpanel'].frame iframe {
transform: scale(0.5);
border: 0px;
height: 600px !important;
width: 200%;
max-width: 200%;
transform-origin: 0 0;
}
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 22:17
by pvklink
oeps, changed the wrong message
Only part that is not ok is the selected/active button color.
I tried to add it my self by adding .btn.active

- Naamloos.png (4.34 KiB) Viewed 1143 times
Code: Select all
.block_1728 {
height: 120px !important;
background-color: rgb(59,53,50) !important;
}
.block_1728 .title {
font-size: 18px !important;
color: white;
}
.block_1728 .btn {
background-color: white!important;
border-color: black !important;
font-size: 16px !important;
}
.block_1728 .btn.active {
color: black;
background-color: green!important;
font-size: 10px !important;
}
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 22:28
by HansieNL
pvklink wrote: ↑Wednesday 13 November 2019 22:17
oeps, changed the wrong message
Only part that is not ok is the selected/active button color.
I tried to add it my self by adding .btn.active
Naamloos.png
Code: Select all
.block_1728 {
height: 120px !important;
background-color: rgb(59,53,50) !important;
}
.block_1728 .title {
font-size: 18px !important;
color: white;
}
.block_1728 .btn {
background-color: white!important;
border-color: black !important;
font-size: 16px !important;
}
.block_1728 .btn.active {
color: black;
background-color: green!important;
font-size: 10px !important;
}
I think you forgot to add a space between green and !important... and that’s !important

Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 22:36
by pvklink
does not work either...
strange, perhaps the secpanel device is a different object ...or a bug ?
.block_1728 .btn.active {
color: black !important;
background-color: green !important;
font-size: 10px !important;
}
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 22:41
by HansieNL
I don’t know if this works:
[data-id='secpanel'] .btn.active
Re: v3.2.0 beta
Posted: Wednesday 13 November 2019 22:46
by Lokonli
pvklink wrote: ↑Wednesday 13 November 2019 22:36
does not work either...
strange, perhaps the secpanel device is a different object ...or a bug ?
.block_1728 .btn.active {
color: black !important;
background-color: green !important;
font-size: 10px !important;
}
Try:
Code: Select all
.block_1728 .btn.btn-warning {
color: black !important;
background-color: green !important;
font-size: 10px !important;
}
To the active button an additional class btn-warning is added.
Re: v3.2.0 beta
Posted: Thursday 14 November 2019 9:23
by Vomera
After updating to 3.2.0 my script for status displaying the washing machine doesnt work anymore.
It works great in 3.1.0 (still have 3.1.0 version also). I
Custom.js
Code: Select all
// wasmachine
function getChange_7344_1(idx,value,device){
if(parseFloat(device['Usage'])==1){
$('div.block_7344_1').addClass('warninggreen').removeClass('warningrood');
blocks['7344_1']['icon'] = 'fas fa-check';
blocks['7344_1']['title'] = 'Wasmachine klaar en staat nog aan';
}
else if(parseFloat(device['Usage'])==0){
$('div.block_7344_1').removeClass('warninggreen').removeClass('warningrood');
blocks['7344_1']['icon'] = 'fas fa-power-off';
blocks['7344_1']['title'] = 'Wasmachine uit';
}
else {
$('div.block_7344_1').removeClass('warninggreen').addClass('warningrood');
blocks['7344_1']['icon'] = 'fas fa-tshirt';
blocks['7344_1']['title'] = 'Wasmachine is bezig';
}
}
custom.css
Code: Select all
.warninggreen {
background: rgba(154,205,50,1.0) !important;
background-clip: padding-box;
}
.warningrood {
background: rgba(199,44,44,1.0) !important;
background-clip: padding-box;
}
Cannot find the faillure of the code...