Dashticz - Show your dashboard and how-to's!

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

woody4165
Posts: 476
Joined: Monday 14 March 2016 13:55
Target OS: Linux
Domoticz version: beta
Location: Rome, Italy
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by woody4165 »

poudenes wrote:
Nice Nice. I mounted mine also on the wall. Here screenshot how i did it. i can take off the tablet as well to use it when needed:


p.s. don't look at the background... that was a joke :)
Hi @poudenes

How is the plastic bushing attached to the tablet? Is it removable?
Sorry for my Google translate...

Thanks
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
poudenes
Posts: 667
Joined: Wednesday 08 March 2017 9:42
Target OS: Linux
Domoticz version: 3.8993
Location: Amsterdam
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by poudenes »

woody4165 wrote:
poudenes wrote:
Nice Nice. I mounted mine also on the wall. Here screenshot how i did it. i can take off the tablet as well to use it when needed:


p.s. don't look at the background... that was a joke :)
Hi @poudenes

How is the plastic bushing attached to the tablet? Is it removable?
Sorry for my Google translate...

Thanks
Used double side tape. So you can remove it when you sell the tablet in future :D
RPi3 B+, Debain Stretch, Domoticz, Homebridge, Dashticz, RFLink, Milight, Z-Wave, Fibaro, Nanoleaf, Nest, Harmony Hub, Now try to understand pass2php
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by EdwinK »

poudenes wrote:
woody4165 wrote: Hi @poudenes

How is the plastic bushing attached to the tablet? Is it removable?
Sorry for my Google translate...

Thanks
Used double side tape. So you can remove it when you sell the tablet in future :D
Hope you have strong enough tape, or you might wake up one morning with your tablet on the ground.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
woody4165
Posts: 476
Joined: Monday 14 March 2016 13:55
Target OS: Linux
Domoticz version: beta
Location: Rome, Italy
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by woody4165 »

poudenes wrote: Used double side tape. So you can remove it when you sell the tablet in future :D
Thanks @poudenes

I think I will go fo this, it will cost me around 16€ and the tablet it will be still removable...

Image

PS: Just checked that is not good for my 7" tablet, it should be at least 17.8cm in the smaller side, an mine is 12...

Aaaargh
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
User avatar
rbo0567
Posts: 12
Joined: Thursday 13 April 2017 16:41
Target OS: Linux
Domoticz version: v4.9701
Location: 's-Hertogenbosch
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by rbo0567 »

[quote="pkrabben"]Here is mine current dashboard still work in process to fine tune.
Adding more smoke detectors this week.

Image


Looks very nice!
How did you hide the switch-value (AAN or UIT) for geofencing and only use the green or red house-icon?
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by EdwinK »

My dashboard; still a work in progress, but I was asked to show it. So.. here you go.

Image
Image
Image
Image

Config.js
Spoiler: show
var _LANGUAGE = 'nl_NL'; //or en_US
var _HOST_DOMOTICZ = 'http://192.168.0.10:8084';
var _DOMOTICZ_REFRESH = 10; //in seconds
var _THEME = 'default'; // default = dashticz default theme


/*
*/
var _HOST_ZIGGO_HORIZON = ''; //e.g. http://192.168.1.3/domoticz/switch_horizon.php';
var _APIKEY_WUNDERGROUND = '<API>>';
var _WEATHER_CITY = 'Rhoon';
var _WEATHER_CITYNAME = 'Albrandswaard';
var _WEATHER_COUNTRY = 'NL';
var _USE_DUTCH_TRAFFICINFO = false;
var _USE_DUTCH_TRAININFO = false;
var _BACKGROUND_IMAGE = 'background.jpg';
var _USE_AUTO_POSITIONING = false;
var _USE_FAVORITES = false;
var _HIDE_SECONDS_IN_CLOCK = false;
var _HIDE_MEDIAPLAYER_WHEN_OFF = false;
var _NEWS_RSSFEED = 'http://www.nu.nl/rss/algemeen';
var _USE_FAHRENHEIT = false;
var _USE_BEAUFORT = true; //Bft instead of m/s
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _STANDBY_AFTER_MINUTES = false;
var _IDXmoonpicture = 1; //index of the uservariabele MoonPicture
var _SCREENSLIDER_EFFECT = 'slide';
var _DASHTICZ_REFRESH = 30; //in minutes

// trafic map
var _APIKEY_MAPS = 'API';
var _MAPS_LATITUDE = 51.860067;
var _MAPS_LONGITUDE = 4.412692;
var _MAPS_ZOOMLEVEL = 11;

//predefined colors, when you have RGB-lamps
var _SAVED_COLORS = ['black', 'white', 'blanchedalmond','rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow'];

// calendar

[[removed for privacy]]

calendars.combined = {}
calendars.combined.calendars = [
{ color:'white',calendar:calendars.first },
{ color:'#ccc',calendar:calendars.second },
{ color:'#ccc',calendar:calendars.third }
]
calendars.combined.url = 'https://www.icloud.com/#calendar';


//
var buttons = {}
buttons.buienradar = {width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/Rada ... =285&h=256', url: 'http://www.weeronline.nl/Europa/Nederland/Rhoon/4057944'}
buttons.moon = {width:12, isimage:true, refreshimage:60000, image: 'moon'}



//CUSTOM POSITIONING:

var blocks = {}

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Schakelaars';
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Weer';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Energieverbruik';
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Gas';
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Media - Film';
blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Media - Radio';
blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Synology usage';
blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Synology Drives';
blocks[1] = {}
blocks[1]['width'] = 4;
blocks[104] = {}
blocks[104]['title'] = 'Thermostaat';
blocks[104]['switch'] = true;
blocks[105] = {}
blocks[105]['title'] = 'Temperatuur'
blocks[105]['switch'] = true;
blocks[113] = {}
blocks[113]['switch'] = true;
blocks[113]['width'] = 8;
blocks[113]['icon'] = 'fa-tint';
blocks[115] = {}
blocks[115]['image'] = 'Ping.png';
blocks[116] = {}
blocks[116]['icon'] = 'fa-upload';
blocks[117] = {}
blocks[117]['icon'] = 'fa-download';
blocks[142] = {}
blocks[142]['width'] = 12;
blocks[142]['icon'] = 'fa-trash-o';
blocks[120] = {}
blocks[120]['icon'] = 'fa-moon-o';
blocks[120]['title'] = 'Maan';
blocks[120]['switch'] = true;
blocks[123] = {}
blocks[123]['icon'] = 'fa-moon-o';
blocks[123]['title'] = 'Maan fase';
blocks[123]['width'] = 12;
blocks[123]['switch'] = true;
blocks[124] = {}
blocks[124]['icon'] = 'fa-male';
blocks[124]['width'] = 12;
blocks[124]['title'] = 'Edwin';
blocks[128] = {}
blocks[128]['switch'] = true;
blocks[128]['icon'] = 'fa-tint';
blocks[129] = {}
blocks[129]['switch'] = true;
blocks[132] = {}
blocks[132]['switch'] = true;
blocks[133] = {}
blocks[133]['switch'] = true;
blocks[134] = {}
blocks[134]['icon'] = 'fa-hdd-o';
blocks[134]['title'] = 'HDD 1 / backup';
blocks[134]['switch'] = true;
blocks[135] = {}
blocks[135]['title'] = 'Virt. Memory';
blocks[135]['switch'] = true;
blocks[136] = {}
blocks[136]['icon'] = 'fa-hdd-o';
blocks[136]['switch'] = true;
blocks[137] = {}
blocks[137]['icon'] = 'fa-hdd-o';
blocks[137]['switch'] = true;
blocks[138] = {}
blocks[138]['icon'] = 'fa-hdd-o';
blocks[138]['switch'] = true;
blocks[139] = {}
//blocks[139]['title'] = 'Temperatuur';
blocks[139]['switch'] = true;
blocks[140]= {}
blocks[140]['switch'] = true;
blocks[141]= {}
blocks[141]['switch'] = true;
blocks[142]= {}
blocks[142]['icon'] = 'fa-trash';
blocks[142]['width'] = 12;
blocks[142]['switch'] = true;


blocks['s2'] = {}
blocks['s2']['width'] = 12;
blocks['s2']['icon'] = '';

//defining number of columns, their contents en widths
//width can be a number 1 to 12, but total widths of all columns should always be 12
var columns = {}

columns[1] = {}
columns[1]['blocks'] =
['blocktitle_1','s1',104,105,91,51,99,125,52,53,54,55,56]//[calendars.combined] //idx 104 = Setpoint. 57 - 62 reserve KaKU
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_2','currentweather_big','weather',113,128,129,'139_2',140,141]
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['clock','sunrise',124,142,buttons.moon,123]
columns[3]['width'] = 2;


columns[4] = {}
columns[4]['blocks'] = ['blocktitle_4','graph_109','109_1','109_2']
columns[4]['width'] = 6;

columns[5] = {}
columns[5]['blocks'] = ['blocktitle_5','graph_110']
columns[5]['width'] = 6;

columns[6] = {}
columns[6]['blocks'] = ['blocktitle_6',48,49]
columns[6]['width'] = 5;

columns[7] = {}
columns[7]['blocks'] = ['s2']
columns[7]['width'] = 2;

columns[8] = {}
columns[8]['blocks'] = ['blocktitle_8',130,131]
columns[8]['width'] = 5;

columns[9] = {}
columns[9]['blocks'] = ['blocktitle_9',132,133,135]
columns[9]['width'] = 6;

columns[10] = {}
columns[10]['blocks'] = ['blocktitle_10',134,136,137,138]
columns[10]['width'] = 6;


//if you want to use multiple screens, use the code below:
var screens = {}
screens[1] = {}
screens[1]['background'] = 'background.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'background.jpg';
screens[2]['columns'] = [4,5] //blocks can be size 6

screens[3] = {}
screens[3]['background'] = 'background.jpg';
screens[3]['columns'] = [6,7,8]

screens[4] = {}
screens[4]['background'] = 'background.jpg';
screens[4]['columns'] = [9,10]


var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big','weather']
columns_standby[1]['width'] = 12;
Custom.css
Spoiler: show
.col-data .title {
font-size:15px;
}
.col-data span {
font-size:15px;
}

#graphoutput109 { height:150px;}
#graphoutput110 { height:150px;}

.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa-male:before{font-size: 36px;}


.swiper-pagination-bullet {
width: 0px;
height: 0px;
}

.fa,.wi {
font-size:24px !important;
}

.fa.fa-lightbulb-o.on {
color: rgba(255, 220, 10, 0.9);
)
}
/* Background 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:15px;
padding-bottom:15px;
border: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 25px; /* Round corners */
}
Custom.js
Spoiler: show
//add custom javascript in here
function afterGetDevices(){


}

function getExtendedBlockTypes(blocktypes){
return blocktypes;
}

function getBlock_124(device,idx){ //change 233 to the idx of your device! //old one 124
$('.block_'+idx).attr('onclick','switchDevice(this)');
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') html+=iconORimage(idx,'fa-toggle-off','','off icon');
else html+=iconORimage(idx,'fa-toggle-on','','on icon');
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">AFWEZIG</span>';
else html+='<span class="state">AANWEZIG</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
pkrabben
Posts: 55
Joined: Sunday 09 April 2017 15:55
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Almere
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by pkrabben »

rbo0567 wrote:
pkrabben wrote:Here is mine current dashboard still work in process to fine tune.
Adding more smoke detectors this week.

Image


Looks very nice!
How did you hide the switch-value (AAN or UIT) for geofencing and only use the green or red house-icon?
You can hide this with

blocks[idx]['hide_data'] = true;
User avatar
gielie
Posts: 290
Joined: Tuesday 12 January 2016 11:40
Target OS: Raspberry Pi / ODroid
Domoticz version: latest β
Location: The Netherlands (Alkmaar)
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by gielie »

EdKo66 wrote:My dashboard; still a work in progress, but I was asked to show it. So.. here you go.
Looks really nice Ed, I'm gonna copy some stuff from your config.
- Aeon Labs USB Stick met Z-wave plus
- Aeotec MultiSensor 6
- FIBARO FGS223
- FIBARO FGWPE Wall Plug
- Neo CoolCam Power plug
- Popp Smoke Detector
- Toon
- Kodi Media Server
ropske
Posts: 483
Joined: Tuesday 12 August 2014 5:37
Target OS: Raspberry Pi / ODroid
Domoticz version: V3_8394
Location: Rumbeke,Belgium
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by ropske »

EdKo66 wrote:My dashboard; still a work in progress, but I was asked to show it. So.. here you go.

Image
Image
Image
Image

Config.js
Spoiler: show
var _LANGUAGE = 'nl_NL'; //or en_US
var _HOST_DOMOTICZ = 'http://192.168.0.10:8084';
var _DOMOTICZ_REFRESH = 10; //in seconds
var _THEME = 'default'; // default = dashticz default theme


/*
*/
var _HOST_ZIGGO_HORIZON = ''; //e.g. http://192.168.1.3/domoticz/switch_horizon.php';
var _APIKEY_WUNDERGROUND = '<API>>';
var _WEATHER_CITY = 'Rhoon';
var _WEATHER_CITYNAME = 'Albrandswaard';
var _WEATHER_COUNTRY = 'NL';
var _USE_DUTCH_TRAFFICINFO = false;
var _USE_DUTCH_TRAININFO = false;
var _BACKGROUND_IMAGE = 'background.jpg';
var _USE_AUTO_POSITIONING = false;
var _USE_FAVORITES = false;
var _HIDE_SECONDS_IN_CLOCK = false;
var _HIDE_MEDIAPLAYER_WHEN_OFF = false;
var _NEWS_RSSFEED = 'http://www.nu.nl/rss/algemeen';
var _USE_FAHRENHEIT = false;
var _USE_BEAUFORT = true; //Bft instead of m/s
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _STANDBY_AFTER_MINUTES = false;
var _IDXmoonpicture = 1; //index of the uservariabele MoonPicture
var _SCREENSLIDER_EFFECT = 'slide';
var _DASHTICZ_REFRESH = 30; //in minutes

// trafic map
var _APIKEY_MAPS = 'API';
var _MAPS_LATITUDE = 51.860067;
var _MAPS_LONGITUDE = 4.412692;
var _MAPS_ZOOMLEVEL = 11;

//predefined colors, when you have RGB-lamps
var _SAVED_COLORS = ['black', 'white', 'blanchedalmond','rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow'];

// calendar

[[removed for privacy]]

calendars.combined = {}
calendars.combined.calendars = [
{ color:'white',calendar:calendars.first },
{ color:'#ccc',calendar:calendars.second },
{ color:'#ccc',calendar:calendars.third }
]
calendars.combined.url = 'https://www.icloud.com/#calendar';


//
var buttons = {}
buttons.buienradar = {width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/Rada ... =285&h=256', url: 'http://www.weeronline.nl/Europa/Nederland/Rhoon/4057944'}
buttons.moon = {width:12, isimage:true, refreshimage:60000, image: 'moon'}



//CUSTOM POSITIONING:

var blocks = {}

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Schakelaars';
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Weer';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Energieverbruik';
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Gas';
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Media - Film';
blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Media - Radio';
blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Synology usage';
blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Synology Drives';
blocks[1] = {}
blocks[1]['width'] = 4;
blocks[104] = {}
blocks[104]['title'] = 'Thermostaat';
blocks[104]['switch'] = true;
blocks[105] = {}
blocks[105]['title'] = 'Temperatuur'
blocks[105]['switch'] = true;
blocks[113] = {}
blocks[113]['switch'] = true;
blocks[113]['width'] = 8;
blocks[113]['icon'] = 'fa-tint';
blocks[115] = {}
blocks[115]['image'] = 'Ping.png';
blocks[116] = {}
blocks[116]['icon'] = 'fa-upload';
blocks[117] = {}
blocks[117]['icon'] = 'fa-download';
blocks[142] = {}
blocks[142]['width'] = 12;
blocks[142]['icon'] = 'fa-trash-o';
blocks[120] = {}
blocks[120]['icon'] = 'fa-moon-o';
blocks[120]['title'] = 'Maan';
blocks[120]['switch'] = true;
blocks[123] = {}
blocks[123]['icon'] = 'fa-moon-o';
blocks[123]['title'] = 'Maan fase';
blocks[123]['width'] = 12;
blocks[123]['switch'] = true;
blocks[124] = {}
blocks[124]['icon'] = 'fa-male';
blocks[124]['width'] = 12;
blocks[124]['title'] = 'Edwin';
blocks[128] = {}
blocks[128]['switch'] = true;
blocks[128]['icon'] = 'fa-tint';
blocks[129] = {}
blocks[129]['switch'] = true;
blocks[132] = {}
blocks[132]['switch'] = true;
blocks[133] = {}
blocks[133]['switch'] = true;
blocks[134] = {}
blocks[134]['icon'] = 'fa-hdd-o';
blocks[134]['title'] = 'HDD 1 / backup';
blocks[134]['switch'] = true;
blocks[135] = {}
blocks[135]['title'] = 'Virt. Memory';
blocks[135]['switch'] = true;
blocks[136] = {}
blocks[136]['icon'] = 'fa-hdd-o';
blocks[136]['switch'] = true;
blocks[137] = {}
blocks[137]['icon'] = 'fa-hdd-o';
blocks[137]['switch'] = true;
blocks[138] = {}
blocks[138]['icon'] = 'fa-hdd-o';
blocks[138]['switch'] = true;
blocks[139] = {}
//blocks[139]['title'] = 'Temperatuur';
blocks[139]['switch'] = true;
blocks[140]= {}
blocks[140]['switch'] = true;
blocks[141]= {}
blocks[141]['switch'] = true;
blocks[142]= {}
blocks[142]['icon'] = 'fa-trash';
blocks[142]['width'] = 12;
blocks[142]['switch'] = true;


blocks['s2'] = {}
blocks['s2']['width'] = 12;
blocks['s2']['icon'] = '';

//defining number of columns, their contents en widths
//width can be a number 1 to 12, but total widths of all columns should always be 12
var columns = {}

columns[1] = {}
columns[1]['blocks'] =
['blocktitle_1','s1',104,105,91,51,99,125,52,53,54,55,56]//[calendars.combined] //idx 104 = Setpoint. 57 - 62 reserve KaKU
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_2','currentweather_big','weather',113,128,129,'139_2',140,141]
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['clock','sunrise',124,142,buttons.moon,123]
columns[3]['width'] = 2;


columns[4] = {}
columns[4]['blocks'] = ['blocktitle_4','graph_109','109_1','109_2']
columns[4]['width'] = 6;

columns[5] = {}
columns[5]['blocks'] = ['blocktitle_5','graph_110']
columns[5]['width'] = 6;

columns[6] = {}
columns[6]['blocks'] = ['blocktitle_6',48,49]
columns[6]['width'] = 5;

columns[7] = {}
columns[7]['blocks'] = ['s2']
columns[7]['width'] = 2;

columns[8] = {}
columns[8]['blocks'] = ['blocktitle_8',130,131]
columns[8]['width'] = 5;

columns[9] = {}
columns[9]['blocks'] = ['blocktitle_9',132,133,135]
columns[9]['width'] = 6;

columns[10] = {}
columns[10]['blocks'] = ['blocktitle_10',134,136,137,138]
columns[10]['width'] = 6;


//if you want to use multiple screens, use the code below:
var screens = {}
screens[1] = {}
screens[1]['background'] = 'background.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'background.jpg';
screens[2]['columns'] = [4,5] //blocks can be size 6

screens[3] = {}
screens[3]['background'] = 'background.jpg';
screens[3]['columns'] = [6,7,8]

screens[4] = {}
screens[4]['background'] = 'background.jpg';
screens[4]['columns'] = [9,10]


var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big','weather']
columns_standby[1]['width'] = 12;
Custom.css
Spoiler: show
.col-data .title {
font-size:15px;
}
.col-data span {
font-size:15px;
}

#graphoutput109 { height:150px;}
#graphoutput110 { height:150px;}

.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa-male:before{font-size: 36px;}


.swiper-pagination-bullet {
width: 0px;
height: 0px;
}

.fa,.wi {
font-size:24px !important;
}

.fa.fa-lightbulb-o.on {
color: rgba(255, 220, 10, 0.9);
)
}
/* Background 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:15px;
padding-bottom:15px;
border: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 25px; /* Round corners */
}
Custom.js
Spoiler: show
//add custom javascript in here
function afterGetDevices(){


}

function getExtendedBlockTypes(blocktypes){
return blocktypes;
}

function getBlock_124(device,idx){ //change 233 to the idx of your device! //old one 124
$('.block_'+idx).attr('onclick','switchDevice(this)');
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') html+=iconORimage(idx,'fa-toggle-off','','off icon');
else html+=iconORimage(idx,'fa-toggle-on','','on icon');
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">AFWEZIG</span>';
else html+='<span class="state">AANWEZIG</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

Can you post again please? I can't see you picture :)
Jonb
Posts: 16
Joined: Thursday 20 April 2017 10:01
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: NL
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by Jonb »

Dashboard at the beginning. Now busy with complete restyle and functionality. Will upload my new picture soon. This was the traditional first version of the dashboard :D
Attachments
IMG_1551.jpg
IMG_1551.jpg (97.3 KiB) Viewed 4976 times
User avatar
corbin
Posts: 463
Joined: Saturday 20 August 2016 22:57
Target OS: Windows
Domoticz version: Beta
Location: Brisbane, Australia
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by corbin »

pkrabben wrote: Can I ask where you found the motion icons (moving man) I cant find then in the icon gallery
thanks in advance for your reply
They are the defaults for motion sensors, but images rather than icons and located at:
img/motion_off.png
img/motion_on.png

See Custom Positioning: https://www.domoticz.com/wiki/Dashticz_V2_-_Positioning
Question about the Xiaomi Gateway in Domoticz? Please check the Wiki first: https://www.domoticz.com/wiki/Xiaomi_Gateway_(Aqara)
pkrabben
Posts: 55
Joined: Sunday 09 April 2017 15:55
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Almere
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by pkrabben »

corbin wrote:
pkrabben wrote: Can I ask where you found the motion icons (moving man) I cant find then in the icon gallery
thanks in advance for your reply
They are the defaults for motion sensors, but images rather than icons and located at:
img/motion_off.png
img/motion_on.png

See Custom Positioning: https://www.domoticz.com/wiki/Dashticz_V2_-_Positioning
Thanks I found the issue inside Domoticz I didn't set the switch to a Motion sensor.
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by EdwinK »

EdKo66 wrote:My dashboard; still a work in progress, but I was asked to show it. So.. here you go.
Changed my background.

Image

The empty site on the left will one day, hopefullt, hold my calendars
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
ropske
Posts: 483
Joined: Tuesday 12 August 2014 5:37
Target OS: Raspberry Pi / ODroid
Domoticz version: V3_8394
Location: Rumbeke,Belgium
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by ropske »

is it something at me, but i can't see EdKo66 his pictures :s and i'm curious to see what he realized :)
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by EdwinK »

Strange. They are really there.

Maybe somehow either your ISP blocked postimg.org, or there is something wrong with your internet.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by EdwinK »

Maybe this works

Image
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
poudenes
Posts: 667
Joined: Wednesday 08 March 2017 9:42
Target OS: Linux
Domoticz version: 3.8993
Location: Amsterdam
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by poudenes »

My own creation to implement "NS Vertrektijden" Have created a .PHP on my VPS and created a API Account at NS (Free, and you can do 50.000 request a day) Maybe when people wants it it can be build into Dashticz and Rob creates a nice block editable script for it?

See a code problem... the platform number is not in center.. haha
Screenshot_20170505-113135.png
Last edited by poudenes on Friday 05 May 2017 11:57, edited 1 time in total.
RPi3 B+, Debain Stretch, Domoticz, Homebridge, Dashticz, RFLink, Milight, Z-Wave, Fibaro, Nanoleaf, Nest, Harmony Hub, Now try to understand pass2php
SwordFish
Posts: 278
Joined: Sunday 14 December 2014 12:28
Target OS: Raspberry Pi / ODroid
Domoticz version: V4.11375
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by SwordFish »

poudenes wrote:My own creation to implement "NS Vertrektijden" Have created a .PHP on my VPS and created a API Account at NS (Free, and you can do 50.000 request a day) Maybe when people wants it it can be build into Dashticz and Rob creates a nice block editable script for it?

Screenshot_20170505-113135.png
Looks really nice
Would be nice to have it into Dashticz
pkrabben
Posts: 55
Joined: Sunday 09 April 2017 15:55
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Almere
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by pkrabben »

poudenes wrote:My own creation to implement "NS Vertrektijden" Have created a .PHP on my VPS and created a API Account at NS (Free, and you can do 50.000 request a day) Maybe when people wants it it can be build into Dashticz and Rob creates a nice block editable script for it?

Screenshot_20170505-113135.png
This looks very nice and I'm interested to have this inside Dashticz
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by robgeerts »

poudenes wrote:My own creation to implement "NS Vertrektijden" Have created a .PHP on my VPS and created a API Account at NS (Free, and you can do 50.000 request a day) Maybe when people wants it it can be build into Dashticz and Rob creates a nice block editable script for it?

Screenshot_20170505-113135.png
If you can create a public url (with apikey as parameter), I can create a block for this..
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest