Dashticz - General Discussions

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Locked
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by robgeerts »

And your toon device itself shows the graphs correctly?
User avatar
mAiden88
Posts: 56
Joined: Friday 14 October 2016 22:15
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.7286
Location: Almelo
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by mAiden88 »

robgeerts wrote:Although I do see toonopafstand.eneco.nl is down, Toon still does work correctly here, the latest graph-output (Gas) I get is:

[code
{
"d" : "2017-04-11 11:00",
"v" : "0.010"
}
[/code]
Same here, Toon works correctly with Domoticz..

I will post screenshots later today, I'm at my work now.. Really should continue with my app now, otherwise school angry. :lol:
Anyone can build a fast processor. The trick is to build a fast system.
Blueone
Posts: 130
Joined: Friday 29 November 2013 11:30
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by Blueone »

robgeerts wrote: You can add css for this in custom.css, like:

Code: Select all

body {
	font-size:10px !important;
}
.h4, h4 {
    font-size: 14px !important;
}
[/quote]

Thanks for the quick tip! I extracted these items with font sizes in it. I changed those but the blocks are still sized a bit strange (800x480), I thing I'm going to convert the css to percentage and ems instead of the pixels :)

Code: Select all

/* //CUSTOM CSS FILE */
html,
body {
	height: 100%;
	width: 100%;
}
body {
	font-size:10px;
}

.newsWrapper { width:80%; height:106px; overflow:hidden; }
	#newsTicker { padding:0; margin:10px 0 0 15px; color:#333; }

	#newsTicker li {
		min-height:72px;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		font-size: 17px;
		color:#fff;
	}

/* edited */
.sunriseholder,
.sunriseholder .wi{
	font-size:14px !important;
}
.sunriseholder .wi-sunset{
	padding-left:10px;
}
.sunriseholder .wi {
	padding-right:5px;
	padding-top:5px;
}

.title{ font-size:12px;}
.wi {font-size:30px;}
.fa {font-size:30px;}
.fa.fa-small {font-size:20px;}
h1 {
	font-size:35px;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.trafficrow{
    font-size: 14px !important;
     padding-top: 20px !important;
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}
.navbar-default .nav > li > a:focus {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: #222222;
}
.navbar-default.affix .navbar-header .navbar-brand {
    color: #F05F40;
    font-size: 14px;
  }
	.blinds .fa.fa-arrow-up,.blinds .fa.fa-arrow-down,.blinds .fa.fa-stop-circle {
		font-size: 20px !important;
    	margin-right: 3px !important;
	}
.big .weatherloc {
	display:inline-block;
	margin-top:-2px;
	font-size:24px;
	font-weight:bold;
}
.weatherfull > div div.day {
	margin-top: 10px;
	font-weight: 300;
	font-size:13px;
}
.weatherfull > div div.temp { font-size: 28px; font-weight:400; }
.weatherfull > div div.temp .nightT { display:block;font-size:22px; opacity:.7; padding-bottom: 10px}
.weatherfull i {
	font-size:50px !important;
	margin:5px auto 0 auto;
	opacity:.9;
}
.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
	padding:0px 5px 0px 5px;
	font-size:10px;
	margin-right:5px;
}
I also saw something about changing the title in the dasboard with, but this doesn't seem to work anymore in the latests versions. :
blocks[524] = {}
blocks[524]['width'] = 12;
blocks[524]['title'] = 'Living room';

Also I'm noticing some small cosmetic issues, temperatur is shown in domoticz with 1 decimal but in the dasboard with two decimals:
2017-04-11 11_37_16-Dashboard.png
2017-04-11 11_37_16-Dashboard.png (5.3 KiB) Viewed 1880 times
Last edited by Blueone on Tuesday 11 April 2017 12:09, edited 2 times in total.
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by EdwinK »

robgeerts wrote:And your toon device itself shows the graphs correctly?
As far as I can see, they do. Toon is a pain in the (*) right now, with all the log-in error's. Even removed the installation and re-added it again. No avail, but I guess that is something for another topic.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by robgeerts »

Blueone wrote: Thanks for the tip, I extracted these items wit font sizes in it. I changed those but the blocks are still sized a bit strange, I thing I'm going to convert the css to percentage and ems instead of the pixels :)
Indeed, thats better!
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by robgeerts »

Blueone wrote: I also saw something about changing the title in the dasboard with, but this doesn't seem to work anymore in the latests versions. :
blocks[524] = {}
blocks[524]['width'] = 12;
blocks[524]['title'] = 'Living room';

Also I'm noticing some small cosmetic issues, temperatur is shown in domoticz with 1 decimal but in the dasboard with two decimals:
Could you test both in latest version?
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by EdwinK »

Also a itsy bitsy tiny 'problem'.

Image

Both tiles are from one IDX.

In the domoticz settings I've set that it should be one tile
Image

Code: Select all

{
ActTime: 1491904091,
ServerTime: "2017-04-11 11:48:11",
Sunrise: "06:55",
Sunset: "20:31",
result: [
{
AddjMulti: 1,
AddjMulti2: 1,
AddjValue: 0,
AddjValue2: 0,
BatteryLevel: 255,
CustomImage: 0,
Data: "Humidity 71 %",
Description: "",
Favorite: 1,
HardwareID: 21,
HardwareName: "Buienradar",
HardwareType: "Buienradar.nl (Weather lookup)",
HardwareTypeVal: 94,
HaveTimeout: false,
Humidity: 71,
HumidityStatus: "Wet",
ID: "00150002",
LastUpdate: "2017-04-11 11:43:45",
Name: "Humidity",
Notifications: "false",
PlanID: "0",
PlanIDs: [
0
],
Protected: false,
ShowNotifications: true,
SignalLevel: "-",
SubType: "LaCrosse TX3",
Timers: "false",
Type: "Humidity",
TypeImg: "temperature",
Unit: 2,
Used: 1,
XOffset: "0",
YOffset: "0",
idx: "96"
}
],
status: "OK",
title: "Devices"
}
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by robgeerts »

I dont see the value of that setting in the output?
Blueone
Posts: 130
Joined: Friday 29 November 2013 11:30
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by Blueone »

robgeerts wrote: Could you test both in latest version?
Both fixed! Thanks for the quick fix
robgeerts wrote:
Blueone wrote: Thanks for the tip, I extracted these items wit font sizes in it. I changed those but the blocks are still sized a bit strange, I thing I'm going to convert the css to percentage and ems instead of the pixels :)
Indeed, thats better!
I have to check how I can make is responsive to the 800x480 resolution, I'm seeing some stuf like "@media (min-width: 768px) {"
Maybe I can do something wit @media (max-widt:800) or something. I'm going to learn some CSS first :D

Edit:
I now added this to my custom CSS:

Code: Select all

@media only screen and (max-width: 800px) {
/* Block height */
	div.mh {
		height: 60px;
	}

/* sunrise */
.sunriseholder,
.sunriseholder .wi{
	font-size:14px !important;
}


/* clock size */
.h1, h1 {
	font-size:25px;
}
.h4, h4 {
    font-size: 14px !important;
}
p {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 20px;
}


.block_clock {
	padding-top: 10px !important;
    padding-bottom: 10px !important;
	}

/* Weather */
.big .weatherdegrees,
.big .weatherloc {
	display:inline-block;
	margin-top:-2px;
	font-size:20px;
	font-weight:bold;
}
.weatherfull > div div.temp { font-size: 20px; font-weight:400; }
.weatherfull > div div.temp .nightT { display:block;font-size:12px; opacity:.7; padding-bottom: 10px}
.weatherfull i {
	font-size:40px !important;
	margin:5px auto 0 auto; 
	opacity:.9;
	text-align: center;
 
}
.weatherfull > div div.icon {
	border-radius: 50%;
	width: 60px;
	height: 60px;
	margin: 5px auto;
}
.weatherfull > div div.icon i { color:#fff !important; }

}
Which results in this, already a lot better, needs some finetuning but now I can use it with the raspberry screen :)
dashboard.png
dashboard.png (264.5 KiB) Viewed 1836 times
One other minor thing, I'm getting this warning in the console:

Code: Select all

jquery.min.js:4 Subresource requests whose URLs contain embedded credentials (e.g. `https://user:pass@host/`) are deprecated, and will be blocked in M59, around June 2017. See https://www.chromestatus.com/feature/5669008342777856 for more details.

Maybe a point of attention in the near future.
Last edited by Blueone on Tuesday 11 April 2017 14:34, edited 2 times in total.
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by EdwinK »

robgeerts wrote:I dont see the value of that setting in the output?
It seems there is a problem with the buienradar script. Going to check it there first

Going to the dentist-office. Back in a few hours. I hope....
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
SuperMouse
Posts: 30
Joined: Sunday 09 April 2017 11:14
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by SuperMouse »

Hi all,

Just a short question.

How can I change the opacity of the blocks to 100%, or remove the squares. I checked all opacity settings but no results.

I am really curious how it looks like with the letters only on the aluminum background.
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by HansieNL »

SuperMouse wrote:Hi all,

Just a short question.

How can I change the opacity of the blocks to 100%, or remove the squares. I checked all opacity settings but no results.

I am really curious how it looks like with the letters only on the aluminum background.
You can put this code in the custom.css

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 {
   background-color: rgba(0,0,0,0.0);
}
rgba(0,0,0,0.0) The red value alpha is the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Blah blah blah
Bob123bob
Posts: 31
Joined: Monday 09 March 2015 7:35
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by Bob123bob »

robgeerts wrote:
Bob123bob wrote: For me it's still not working :
device 167 displays now, today and total
device 167_1 displays now, today and total
device 167_2 displays today and total
device 167_3 displays total

Still no way to display 167_1 (now) only :(
Did you have '167' and '167_1' at the same time displaying on your dashboard?
If yes, try only using 167_1 and removing the rest... What does is display?
I can imagine it give some problems when using 167 and 167_1 at the same time.
You are right, I was displaying 167 and 167_1
167_1 only is working perfectly

Thanks
Ierlandfan
Posts: 89
Joined: Friday 09 October 2015 17:40
Target OS: Linux
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by Ierlandfan »

Is it still possible to have for example a bar "some-name" and a bar "Schakelaars" in the first block?
like:
Block1
Some-name
custom switch, custom switch2
Schakelaars
some switches
pvm
Posts: 550
Joined: Tuesday 17 June 2014 22:14
Target OS: NAS (Synology & others)
Domoticz version: 4.10538
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by pvm »

Yes use 2 title blocks
columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',1,6,8,9,11,'blocktitle_2','train','traffic']
Synology NAS, slave PI3, ZWave (Fibaro), Xiaomi zigbee devices, BTLE plant sensor, DzVents, Dashticz on tablet, Logitech Media Server
Ierlandfan
Posts: 89
Joined: Friday 09 October 2015 17:40
Target OS: Linux
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by Ierlandfan »

Thanx! Works like a charm!

Ofcourse define it first:

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'some-name';
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by robgeerts »

Nice to read that how older the project gets, the community is able to help eachother more and more :) more spare time for me ;)
( But the next new function is almost ready)
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by EdwinK »

Can't wait to see it ready :)

Time for you to get your own board here on the forum
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Ierlandfan
Posts: 89
Joined: Friday 09 October 2015 17:40
Target OS: Linux
Domoticz version:
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by Ierlandfan »

Finally some time to edit my dashboard!
Probably very easy but can I substitue a rss feed for a local text file?
The graphs for "Lux" aren't working. (which is probably only important for me, that's ok)
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design v2, custom positioning and multiple screens

Post by robgeerts »

Could you send me your graph output?
Locked

Who is online

Users browsing this forum: No registered users and 1 guest