Dashticz v3.7.6 beta

[Sjonnie2017]

Shouldn't it be CONFIG.js instead of config.js?

Hi lokonli, oops! Edwin I mean

Both did not work. I am at a loss here.

Greetz,

Sjonnie

[Lokonli]

What is the output of

make stop
make start

Sent from my SM-A320FL using Tapatalk

[Sjonnie2017]

What is the output of

make stop
make start

Sent from my SM-A320FL using Tapatalk

Tx for your relentless support!

Code: Select all

~/dev/dashticz $ make stop
Cleaning up dtv3-8082
Container dtv3-8082 exists
sudo docker stop dtv3-8082
dtv3-8082
sudo docker rm dtv3-8082
dtv3-8082

Code: Select all

~/dev/dashticz $ make start
Checking container dtv3-8082
Checking port 8082
sudo docker build --build-arg tz="Europe/Amsterdam" -t dtv3-8082 .
Sending build context to Docker daemon  3.072kB
Step 1/4 : FROM php:7.4-apache
 ---> a6a0a1e0a8da
Step 2/4 : ARG tz="Europe/Amsterdam"
 ---> Using cache
 ---> 8ff05c84eadd
Step 3/4 : RUN printf "[PHP]\ndate.timezone = $tz\n" > /usr/local/etc/php/conf.d/tzone.ini && mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
 ---> Using cache
 ---> d0ad1726f727
Step 4/4 : SHELL ["/bin/bash", "-c"]
 ---> Using cache
 ---> 2ef0c3cf431c
Successfully built 2ef0c3cf431c
Successfully tagged dtv3-8082:latest
sudo docker run  --restart unless-stopped -v /etc/localtime:/etc/localtime:ro  --name dtv3-8082 -d -p 8082:80 --mount type=bind,source="/home/pi/dev/dashticz",target=/var/www/html dtv3-8082
10eb0b4e99a416692dfe48e06924d4878d4b9c7b3b3f638fa81c8759b06d9220

Dashticz is running at:
http://192.168.16.165:8082
http://172.17.0.1:8082

As an added bonus I now get an error launching Dashticz but I think I can figure that out

Greetz,

Sjonnie

[Sjonnie2017]

Problem solved! I just needed a few more f*ck*ps to get a meaningful error message. So I ended up changing the IP in 127.0.0.1 since Domoticz and Dashticz reside on the same machine. Dashticz told me there were three possible errors: Ip address, user name or password. So I re-checked the CONFIG.js file and saw that somehow the username and password were defined. Removed them and presto! All working as expected!

I changed it to this:

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://192.168.16.165:2080';
config['login_timeout'] = '60';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Home Control';

[TroisSix]

Hi Lokonli,
I juste tested the "Log" display with the 3.7.6, functionality very useful, cool.
The logs are displayed on only one line, and each new line replace the old one.
Is it possible do display logs line after line on the screen?

PS: I am still searching why Dashticz exits on my iPad either in Safari (shortcut as an app) or Kiosk Browser, if you have any advice?

[Lokonli]

PS: I am still searching why Dashticz exits on my iPad either in Safari (shortcut as an app) or Kiosk Browser, if you have any advice?

What do you mean with exit? Is it a crash? or is the iPad just stopping an active browser window?
After how much time approximately does Dashticz stop?
Is that always after the same amount of time?
Can it be related to the standby mode of Dashticz?

How many Domoticz devices do you have?

Could you create a room plan in Domoticz, and only add one simple switch device.
Then create a Dashticz dashboard making use of this room plan, so that Dashticz only will receive a very limited number of device updates.
Add only this device to the Dashticz dashboard.
set domoticz_refresh parameter to a high number (60*60*24)

Do you then still experience the exits?

[TroisSix]

Sure, I'll try to give more details:
- I have a dashticz running on an iPad 2, and sometimes, at a random delay, my iPad goes back to the home screen (exiting of the browser)
- I get this behaviour with either a "shortcut of dashticz's url on the home page" or "Kiosk browser for iPad", behaviour already present in previous version of dashticz
- yes, I tried to give a high value to domoticz_refresh, but no improvement, it doiesn't seem to be related to the standby mode
- in my specific room in domoticz for dashticz, I have 105 devices + googlemaps + agendas + weatherwidget + ..., too much?

That's why I am searching to get logs from Dashticz to find the root cause

Yes I can also try to create a new room with only one device from domoticz in Dashticz.

[TroisSix]

Hi Lokonli,
After a lot of tests, it seems that the reason of the bug was the frame displaying the floorplan of my domoticz:

Code: Select all

frames.floorplan = { frameurl: 'http://192.168.x.x:8080/#/Floorplans', height: 695, width:12 }

What is wrong?

In fact, I would prefer to have a simple button displaying the floorplan in fullscreen, but I couldn't make it work. So I added a page with this frames.floorplan

[madpatrick]

This is my setting as reference

Code: Select all

frames.slide3 = {frameurl:"http://192.168.x.x:9200/#/Floorplans",  height: '540',scrollbars : false,  width:12}
frames.fl= { frameurl: 'http://192.168.x.x:8080/#/Floorplans', height: 695, width:12 }

The differences

Code: Select all

' instead of "  with http link (should not make a big difference i think

' is missing at height setting

Code: Select all

height: 695

should be

Code: Select all

height: '695'

[Lokonli]

Hi Lokonli,
After a lot of tests, it seems that the reason of the bug was the frame displaying the floorplan of my domoticz:

Code: Select all

frames.floorplan = { frameurl: 'http://192.168.x.x:8080/#/Floorplans', height: 695, width:12 }

What is wrong?

In fact, I would prefer to have a simple button displaying the floorplan in fullscreen, but I couldn't make it work. So I added a page with this frames.floorplan

Interesting.

frames refresh every 300 seconds by default. Maybe it's related to that.

Could you add 'refresh: 30000' as block parameter and test again?

I'll do some tests as well.

As an alternative, you can show the floorplan in a new window by setting the url and newwindow parameter of a button.
See: https://dashticz.readthedocs.io/en/beta ... ttons.html

[TroisSix]

Hi Lokonli,

In fact, I also had the bug without this frame.floorplan...
I will start again all my tests by waiting more longer (several jours between each test...)
If only I could know where to search in logs :'(

Ok madpatrick, I can search inside my code for all the missing quotes, and control I have double quotes for the url, if Lokonli confirms?

[Lokonli]

Hi Lokonli,

In fact, I also had the bug without this frame.floorplan...
I will start again all my tests by waiting more longer (several jours between each test...)
If only I could know where to search in logs :'(

Ok madpatrick, I can search inside my code for all the missing quotes, and control I have double quotes for the url, if Lokonli confirms?

single quotes or double quotes will not make any difference.

In case it's not related to a frame block, maybe something goes wrong with the Websocket channel: Dashticz sets up a direct communication channel with Domoticz to receive instant device updates.

You can disable websockets with:

Code: Select all

config['enable_websocket'] = false;

Could you test this as well?

[Chris12]

There are a few steps:
1) Add the right device status
You can use the recently added device hook functionality. You have to do some programming...
Add the following to custom.js:

Code: Select all

function deviceHook(device) {
    if (device.idx==43) {  //Check that device 43 is indeed the correct Domoticz device id
        var ppmvalue = parseFloat(device.Data);
        device.deviceStatus = ppmvalue> 500 ? 'bad':'good';
    }
}

In this example the deviceStatus will be labeled 'bad' or 'good', depending on the ppm value.
The deviceStatus will be added as CSS class name to the dial values that use this device.

2) Set the styling in custom.css

Code: Select all

.item.bad {
  color: 'red' !important
}

.item.good {
   color: 'green' !important
}

Does this work for Dials with text values shown as well?

I have a dial basically showing me the status of my RPi Active/inactive using Monit, on that RPi I run Pihole.
So it would be great if I can see if the status is OK (Active) or Not OK (Inactive)

I tried this custom.js code:

Spoiler: show

Code: Select all

function deviceHook(device) {
    if (device.idx==1032) {  //Domoticz device ID 
        var rpiactive = parseFloat(device.Data);
        device.deviceStatus = rpiactive=='Active' ? 'good':'bad';
    }
}

And added the css code as well. But I cannot see any changes for the specific dial (I expect that it will be green, as status is active)
The device ID is correct (it's a text device in Domoticz)

The data of your text device is already a string, so you have to remove parseFloat, otherwise it will be interpreted as a number. Like this:

Code: Select all

function deviceHook(device) {
    if (device.idx==1032) {  //Domoticz device ID 
        var rpiactive = device.Data;
        device.deviceStatus = rpiactive=='Active' ? 'good':'bad';
    }
}

Formatting the main value of a dial is also slightly different. You can use the following:

Code: Select all

.good .value {
    color: green;
}

.bad .value {
    color: red;
}

I tried to create this for another dial as well.
This dial shows an ON/OFF switch device so I added this:

In my config.js file:

Spoiler: show

Code: Select all

blocks['VPN-Status'] = {
	title: 'VPN Status',
	type: 'dial',
	width: 4,
		values : [
        {
         idx: 1155,
        },
	]
}

and added this in my custom.js (left out the other parts of working dials):

Spoiler: show

Code: Select all

function deviceHook(device) {
        if (device.idx==1155) {  //Domoticz device ID VPN-status script
        var VPNstatus = device.Data;
        device.deviceStatus = VPNstatus=='On' ? 'good':'bad';
    }
}

But this does not change the color of the dial to green, it stays highligted orange (default color scheme when on)
Should the name/variable defined in the custom.js be exactly the same as the name in domoticz? In domoticz the device 1155 name is 'VPN Status ON/OFF'.

[Lokonli]

What is the device type of device 1155? A switch or a text device?

[Chris12]

What is the device type of device 1155? A switch or a text device?

it is a switch type.

My current dial config:

Spoiler: show

Code: Select all

blocks['VPN-Status'] = {
	title: 'VPN Status',
	idx: 1155,
	type: 'dial',
	popup: 'VPN-Status-graph',
	width: 4,
	dialicon: 'fas fa-user-secret',
	last_update: true,
}

The 'dialicon' does not change the icon within the dial.

edit: Another thing noticed is that the graph does not show any values of this switch. In domoticz I can see the ON/OFF in the log/graph, so there're values logged.

[Lokonli]

What is the device type of device 1155? A switch or a text device?

it is a switch type.

My current dial config:

Spoiler: show

Code: Select all

blocks['VPN-Status'] = {
	title: 'VPN Status',
	idx: 1155,
	type: 'dial',
	popup: 'VPN-Status-graph',
	width: 4,
	dialicon: 'fas fa-user-secret',
	last_update: true,
}

The 'dialicon' does not change the icon within the dial.

edit: Another thing noticed is that the graph does not show any values of this switch. In domoticz I can see the ON/OFF in the log/graph, so there're values logged.

Dials of switch type already get a css class 'on' and 'off' assigned, depending on the switch state.

To set the colors of the icon, title, ring, lastupdate, use the following in custom.css (for a block labeled 'switchtest'):

Code: Select all

/*title color*/
div[data-id='switchtest'] .on .device {
    color: green !important
}

div[data-id='switchtest'] .off .device {
    color: red !important
}

/*switch icon color*/
div[data-id='switchtest'] .on i {
    color: green !important
}

div[data-id='switchtest'] .off i {
    color: red !important
}

/*ring color*/
div[data-id='switchtest'] .dial-center.on {
    --dial-rgba: green !important;
}

div[data-id='switchtest'] .dial-center.off {
    --dial-rgba: red !important;
}

div[data-id='switchtest'] .off .switch-face {
    box-shadow: 0 0 25px 1px var(--dial-rgba);
}

/*last update colors*/
div[data-id='switchtest'] .on .info {
    color: green !important
}

div[data-id='switchtest'] .off .info {
    color: red !important
}

For this test I've used the following block definition (that also uses a different switch icon):

Code: Select all

blocks['switchtest'] = {
//  idx: 5,
  type: 'dial',
  idx: 5,
  iconSwitch: 'fas fa-volume-up'
}

No changes in custom.js

Results:

on.jpg (6.37 KiB) Viewed 872 times

off.jpg (5.96 KiB) Viewed 872 times

Currently the graph module doesn't support on/off devices.

[Chris12]

@lokonli, thanks for helping me out! the above works great!
Also the icon is now working

How can I change the position of the text inside the dial?
I want to lower the dial-title, and I want to raise the last update text a little bit (as these overlap the inner ring a little bit).

Ps. can you add support for the graph module for on/off devices, to the enhancement list?

[madpatrick]

Hi Lokonli,

I not sure, but it looks like a recent update change the icn sizes of some blocks.
I've tried to change the font size, but it is not changing
Everything was good until some days ago. I'm not sure when, because these blocks are on the second screen.

I've on test version running still on 3.7.5 and wiht the same config.js and custom.css the icon are large

Dashticz 3.7.5


Dashticz 3.7.6


Has something change in the blocks ?

[madpatrick]

It looks it is only on my Android tablet.
On a PC or iPad it looks ok

Could it be appearing on smaller screens only ?

I think i found were it did go wrong

Going back to commit

Code: Select all

git checkout a14782748c1c430e87c32f3c675162ddd30938e2

is getting the correct sizes of the icons back

So after update it goes wrong

Code: Select all

commit 2515b05c699130b5959d7b376c782a145bfa0bb2
Author: lokonli
Date:   Mon Mar 15 22:14:04 2021 +0100

[Lokonli]

Yes, there are some changes. I'll fix it later.

Sent from my SM-A320FL using Tapatalk