Dashticz v3.2.0 beta

[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?

[janumix]

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

[HansieNL]

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.

[tarmacalastair]

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)

[janumix]

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.

[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

[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.

[Lokonli]

ok, I'll look into this as well.

[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:

Code: Select all

config['enable_swiper'] = 1;

Setting the swipe transition effect still doesn't work.

[janumix]

It works now - thanks !

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

[Lokonli]

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

[pvklink]

thanks, dashboard is looking great!
I am almost there.

[Lokonli]

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

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

[HansieNL]

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

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

[HansieNL]

I don’t know if this works:
[data-id='secpanel'] .btn.active

[Lokonli]

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.

[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...