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

[clinkadink]

That's a nice dashboard. Complete overview of all utilities. Well done!

[EdwinK]

I agree. Nice, easy layout. I especially like the energy-usage for the various devices. You use smartplugs for those?

[Jimster]

That's a nice dashboard. Complete overview of all utilities. Well done!

Thanks! And of course many thanks to you and Lokonli (and some more people who worked on Dashticz) for your great work!

I agree. Nice, easy layout. I especially like the energy-usage for the various devices. You use smartplugs for those?

Thanks! I use Blitzwolf BW-SHP6 smartplugs which I flashed with Tasmota. They now give info to Domoticz via MQTT. They sell for about 13 euro's a piece on AliExpress. But I also tried a cheaper one (about 10 euro's) which I also succesfully flashed with Tasmota. I also have one for 8 euro's but with no power measure, only switching which I use for my garden lights.
Many plugs which work with the Tuya or Smartlife app will work. Compatible plugs you can find here: https://templates.blakadder.com/plug.html
They are really easy to flash with Tuya-convert using a Raspberry.

[bobpeters]

Two months ago I started with Dashticz. Domoticz is running for a few years now, and a user friendly dashboard in the living room is really nice. I like the way it is made, really good work! Thanks to everyone who is involved!

Also this forum was important to help me with some issues. Today I made the first topic with a question, so I think it is time to show my dashboard as well...

I made a frame of MDF and put some magnets in it so it sticks to a metal plate on the wall. On the other side of the wall there is a power outlet to charge the tablet. It is a Huawei T3 10"tablet, with the Fully Kiosk browser running.

At the moment it needs some fine tuning, and I need to add some more switches. Also the frame needs some fresh paint. Work in progress...

The attachment 1.jpg is no longer available

1.jpg (107.61 KiB) Viewed 2558 times

2.jpg (53.23 KiB) Viewed 2558 times

[Sjonnie2017]

Great build! Might just inspire me to do something similar.

Greetz,

Sjonnie

[GilbertvH]

My first attempt creating a Dashticz dashboard! Still awaiting a couple of wifi power plugs to add and make some equipment smarter

Dashticz.JPG (149.53 KiB) Viewed 2408 times

[Droid]

I just got started playing around with Domoticz and Dashticz. First thing I've done is connect the P1 smart meter to my Synology so Domoticz can read the values.
In a few months we move to a new home. I would like to extend my domotica there. Just gotta confince my wife that it is necessary


For now I've got my Dashboard like this:

Screen01.JPG (143.2 KiB) Viewed 2343 times

Screen02.JPG (59.15 KiB) Viewed 2343 times

Screen03.JPG (59.05 KiB) Viewed 2343 times

I've created a virtual switch with Node-RED which casts the Dashboard to my Google Hub. Works like a charm.
What I would like to do is make a light theme. Haven't come to that yet.

For those who are interested, this is my configuration:

CONFIG.js

Code: Select all

var config = {
    domoticz_ip         : '...',
    app_title           : 'Dashticz',
    domoticz_refresh    : 5,
    dashticz_refresh    : 60,
    switch_horizon      : '...',
    hide_topbar         : true,
    hide_seconds        : true,

    use_favorites       : 0,
    auto_positioning    : 0,

    timeformat          : 'DD-MM-YY HH:mm',
    calendarformat      : 'dd DD.MM HH:mm',
    calendarlanguage    : 'nl_NL',

    owm_api             : '...',
    owm_city            : '...',
    owm_name            : '...',
    owm_country         : 'nl',
    owm_lang            : 'nl',
    owm_days            : true,
    own_cnt             : 5,
    static_weathericons : true,


    garbage_company     : 'mijnafvalwijzer',
    garbage_icalurl     : 0,
    garbage_zipcode     : '...',
    garbage_street      : '...',
    garbage_housenumber : '...',
    garbage_maxitems    : 3,
    garbage_width       : 12,
    garbage             : {
        gft: {kliko: 'green', code: '#375b23', name: 'GFT', icon: 'custom/img/afval.png'},
        pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
        rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
        papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'}
    }
}

// --------------------------------------------------------------------------------------------
// Screen definitions
// --------------------------------------------------------------------------------------------
//var max_resolution_desktop  = 'default';
//var max_resolution_smart    = 'tablet';

// --------------------------------------------------------------------------------------------
// Title Definitions
// --------------------------------------------------------------------------------------------
var title_gas_and_elektra   = 'title_misc';
var title_gas               = 'title_gas';
var title_elektra           = 'title_elektra';
var title_112meldingen      = 'title_hue';
var title_weer              = 'title_presence';
var title_news              = 'title_news';
var title_tvguide           = 'title_tvguide';
var title_calendar          = 'title_calendar';
var title_garbage           = 'title_garbage';

// --------------------------------------------------------------------------------------------
// IDX Definitions
// --------------------------------------------------------------------------------------------

// Smartmeter Elektra
// Smart Meter Elektra: _1 = Huidig Elektra, _2 = Elektra Vandaag, _3 = Elektra Totaal
// Smart Meter Gas _1 = vandaag, _2 = totaal
var p1_gas_vandaag          = '6_1';
var p1_gas_totaal           = '6_2';
var p1_grafiek_gas          = 'graph_gas';
var p1_elektra_nu            = '2_1';
var p1_elektra_vandaag      = '2_2';
var p1_elektra_totaal       = '2_3';
var p1_grafiek_elektra      = 'graph_elektra';

var calendar                = 'Agenda';
var news_1                  = 'news_1';
var news_2                  = 'news_2';

// --------------------------------------------------------------------------------------------
// Buttons
// --------------------------------------------------------------------------------------------
var buttons = {}

// --------------------------------------------------------------------------------------------
// Blocks
// --------------------------------------------------------------------------------------------
var blocks = {}

// Title: Gas & Elektra
blocks[title_gas_and_elektra] = {}
blocks[title_gas_and_elektra]['type'] = 'blocktitle'
blocks[title_gas_and_elektra]['title'] = 'Gas & Elektra'
blocks[title_gas_and_elektra]['image'] = '../custom/img/stroom.png',

// Elektra en gas knoppen
blocks[p1_elektra_nu] = {
    title           : 'Huidige verbruik',
    width           : 4, 
    last_update     : false
}
blocks[p1_elektra_vandaag] = {
    title           : 'Totaal vandaag',
    width           : 4, 
    last_update     : false
}
blocks[p1_elektra_totaal] = {
    title           : 'Meterstand',
    width           : 4, 
    last_update     : false
}

blocks[p1_gas_vandaag] = {
    title           : 'Totaal vandaag',
    width           : 4, 
    last_update     : false
}
blocks[p1_gas_totaal] = {
    title           : 'Meterstand',
    width           : 4, 
    last_update     : false
}

// Title: Elektra
blocks[title_elektra] = {}
blocks[title_elektra]['type'] = 'blocktitle'
blocks[title_elektra]['title'] = 'Elektra verbruik'
blocks[title_elektra]['image'] = '../custom/img/stroom.png',

// Grafiek elektra
blocks[p1_grafiek_elektra] = {
    graph           : 'bar',
    devices         : [2],
    datasetColors   : ['yellow'],
    width           : 12,
    height          : '450px',
    borderColors    : '#ddd',
    iconColour      : '#ffffff',
    datasetColors   : ['#ECBA16'],
    debugButton     : true,
    beginAtZero     : true,
    displayFormats : { day: 'dddd', minute: '', hour: '', week: '', month: '' },
    custom : {
        "Week" : {
            ylabels: ['Verbruik in kWh'],
            range: 'month',
            filter: '7 days',
            data: {
                Verbruik: 'd.v_2+d.v2_2'
            }
        },
        "Maand" : {
            ylabels: ['Verbruik in kWh'],
            range: 'month',
            filter: '1 month',
            data: {
                Verbruik : 'd.v_2+d.v2_2'
            }
        },
        "Jaar" : {
            ylabels: ['Verbruik in kWh'],
            range: 'year',
            filter: '12 months',
            data: {
                Verbruik: 'd.v_2+d.v2_2'
            }
        }
    }
};

// Title: Gas
blocks[title_gas] = {}
blocks[title_gas]['type'] = 'blocktitle'
blocks[title_gas]['title'] = 'Gas verbruik'
blocks[title_gas]['image'] = '../custom/img/gas.png',

// Grafiek gas
blocks[p1_grafiek_gas] = {
    graph           : 'bar',
    devices         : [6],
    datasetColors   : ['yellow'],
    width           : 12,
    height          : '450px',
    borderColors    : '#ddd',
    iconColour      : '#ffffff',
    datasetColors   : ['#EF6C00'],
    debugButton     : true,
    beginAtZero     : true,
    displayFormats : { day: 'dddd', minute: '', hour: '', week: '', month: '' },
    custom : {
        "Week" : {
            ylabels: ['Verbruik in m³'],
            range: 'month',
            filter: '7 days',
            data: {
                nett: 'd.v_6'
            }
        },
        "Maand" : {
            ylabels: ['Verbruik in m³'],
            range: 'month',
            filter: '1 month',
            data: {
                nett: 'd.v_6'
            }
        },
        "Jaar" : {
            ylabels: ['Verbruik in m³'],
            range: 'year',
            filter: '12 months',
            data: {
                nett: 'd.v_6'
            }
        }
    }
}

// Title: 112 meldingen
blocks[title_112meldingen] = {}
blocks[title_112meldingen]['type'] = 'blocktitle'
blocks[title_112meldingen]['title'] = '112 meldingen ....''
blocks[title_112meldingen]['image'] = '../custom/img/112meldingen.png',

// 112 meldingen
blocks['alarmmeldingen'] = {
    title           : '',
    rss             : 'https://alarmeringen.nl/feeds/city/.....rss',
    //filter          : 'Brandweer',
    show_lastupdate : true,
    width           : 12,
    refresh         : 300,
    results         : 5, 
    image           : '../custom/img/112meldingen.png',
    timeformat      : 'DD-MM HH:mm',
    show_lastupdate : false,
    icon            : false,
    image           : false
}

// Title: weer
blocks[title_weer] = {}
blocks[title_weer]['type'] = 'blocktitle'
blocks[title_weer]['title'] = 'Weer'
blocks[title_weer]['image'] = '../custom/img/weer.png',


// TV Gids
// 1 = NPO1, 2 = NPO2, 3 = NPO4, 4 = RTL4, 31 = RTL5, 36 = SBS6, 46 = RTL7, 37 = NET5, 34 = Veronica, 92 = RTL8
// 435 = 24Kitchen, 6 = Canvas, 466 = Ziggo Sport, 148 = Fox Sports Eredivisie
// Title: TV Gids - NL Zenders
blocks[title_tvguide] = {}
blocks[title_tvguide]['type'] = 'blocktitle'
blocks[title_tvguide]['title'] = 'TV Gids - NL Zenders'
blocks[title_tvguide]['image'] = '../custom/img/television.png'

// TV Guide
var tvguide = {}
tvguide = { 
    key:'dutch', 
    width:12, channels: [1,2,3,4,31,36,46,37,34,92], 
    maxitems: 5, 
    //image: '../custom/img/television.png' 
    image: false,
    icon: false
}

// Title: Agenda
blocks[title_calendar] = {}
blocks[title_calendar]['type'] = 'blocktitle'
blocks[title_calendar]['title'] = 'Agenda'
blocks[title_calendar]['image'] = '../custom/img/calendar.png',

// Agenda
blocks[calendar] = {
    type        : 'calendar',
    maxitems    : 5,
    layout      : 1,
    url         : 'https://calendar.google.com/calendar/...',
    icalurl     : 'https://calendar.google.com/calendar/ical/...',
    weeks       : 5,
    lastweek    : false,
    isoweek     : true,
    width       : 12,
    icon        : false
    //image       : '../custom/img/calendar.png'
}

// Title: Gargabe
blocks[title_garbage] = {}
blocks[title_garbage]['type'] = 'blocktitle'
blocks[title_garbage]['title'] = 'Afvalcontainers'
blocks[title_garbage]['image'] = '../custom/img/afval_titel.png'

// --------------------------------------------------------------------------------------------
// Columns
// --------------------------------------------------------------------------------------------
var columns = {}

columns[1] = {};
columns[1]['blocks'] = [
    title_weer, 'currentweather_big_owm', 'weather_owm',
    title_gas_and_elektra,
    p1_elektra_nu, p1_elektra_vandaag, p1_elektra_totaal, 
        p1_gas_vandaag, p1_gas_totaal,
    title_garbage, 'garbage'
]
columns[1]['width'] = 6;

columns[2] = {};
columns[2]['blocks'] = [
    title_112meldingen, 'alarmmeldingen',
    title_tvguide, tvguide,
    title_calendar, calendar,
]
columns[2]['width'] = 6;

columns[3] = {};
columns[3]['blocks'] = [
    title_elektra, p1_grafiek_elektra
]
columns[3]['width'] = 12;

columns[4] = {};
columns[4]['blocks'] = [
    title_gas, p1_grafiek_gas
]
columns[4]['width'] = 12;

// --------------------------------------------------------------------------------------------
// Screens
// --------------------------------------------------------------------------------------------
var screens = {}

screens[1] = {}
screens[1]['columns'] = [1,2]

screens[2] = {}
screens[2]['columns'] = [3]

screens[3] = {}
screens[3]['columns'] = [4]

custom.css

Code: Select all

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
* {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
}
body {
    font-size: 14px;
}
.dt_title {
    font-size: 1.1em;
    font-weight: 300;
    margin: 0;
}
.blocktitle {
    background-color: transparent !important;
    text-transform: uppercase;
    margin-bottom: -20px;
}
.blocktitle .col-icon {
    margin-top: 0;
}
.blocktitle .col-icon img {
    max-width: 28px;
    max-height: 28px;
}

/*******************
TV Guide
*******************/
.tvguide_item {
    display: flex;
    margin-bottom: 10px;
}
.tvguide_item span:nth-child(1) {
    flex-basis: 25px;
}
.tvguide_item span:nth-child(2) {
    flex-basis: 7em;
}
.tvguide_item img {
    max-height: 16px;
}

/*******************
Alarmeringen
*******************/
.alarm_item {
    display: flex;
    margin-bottom: 10px;
}
.alarm_item span:nth-child(1) {
    flex-basis: 7em;
}
.alarm_item a {
    color: white;
}

alarmmeldingen.js

Code: Select all

// line ~65
            html +=
              '<div class="alarm_item">' +
              '<span>' + pubDate.format(alarmobject.timeformat) + '</span>' +
              '<span>' + '<a href=' + el.find('link').text() +
              ' onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">' +
              el.find('description').text() +
              '</a>' + '</span>' +
              '</div>';

tvguide.js

Code: Select all

// line ~65
              var widget =
                '<div class="tvguide_item">' +
                '<span><img src="custom/img/zender_' + item['channel'] + '.png" /></span>' +
                '<span>' + item['starttime'] + ' - ' + item['endtime'] + '</span>' +
                '<span>' + item['title'] + '</span>' +
                '</div>';
                

[Sjonnie2017]

Looks good. Simple and effective. Guaranteed high WAF

[mojojojo490]

My first attempt creating a Dashticz dashboard! Still awaiting a couple of wifi power plugs to add and make some equipment smarter

Dashticz.JPG

Hey @GilbertvH, thats a nice layout, especially the graph.
How did you make this conclusion line?

[GilbertvH]

My first attempt creating a Dashticz dashboard! Still awaiting a couple of wifi power plugs to add and make some equipment smarter

Dashticz.JPG

Hey @GilbertvH, thats a nice layout, especially the graph.
How did you make this conclusion line?

Thanks. Meanwhile I rearranged some blocks and added some lamps and wifi power plugs to the dashboard. I will post my config.js below so you can grab the configuration lines of the graph.

Code: Select all

var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = 'xxx';
config['app_title'] = 'xxx';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss';
config['news_scroll_after'] = '4';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 'https://calendar.google.com/calendar/ical/xxx.calendar.google.com/public/basic.ics';
config['last_update'] = 0;
config['hide_topbar'] = 1;

//OWM parameters
config['owm_api'] = 'xxx';
config['owm_city'] = 'xxx';
config['owm_name'] = 'xxx';
config['owm_country'] = 'nl';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '4';
config['owm_min'] = true;
config['owm_days'] = true;


//Vuilnis Module
	config['garbage_company'] = 'deafvalapp';
	config['garbage_icalurl'] = 0;
	config['garbage_zipcode'] = 'xxx';
	config['garbage_street'] = 'xxx';
	config['garbage_housenumber'] = 'xxx';
	config['garbage_maxitems'] = '3';
	config['garbage_width'] = '12';
	config['garbage_hideicon'] = 0;
	config['garbage_use_names'] = true;
	config['garbage_use_colors'] = true;
	config['garbage_icon_use_colors'] = true;
	config['garbage_use_cors_prefix'] = false;
	config['garbage'] = {
		gft: {kliko: 'green', 		code: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
		pmd: {kliko: 'orange', 		code: '#db5518', name: 'PLASTIC', icon: 'img/garbage/kliko_orange.png'},
		rest: {kliko: 'grey', 		code: '#7CFC00', name: 'Restafval', icon: 'img/garbage/kliko_green.png'},
		papier: {kliko: 'blue', 	code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
		kca: {kliko: 'red', 		code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
		brown: {kliko: 'brown', 	code: '#7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
		black: {kliko: 'black', 	code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
		milieu: {kliko: 'yellow', 	code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
		kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},}

var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp3"},
{"track":2,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
];

var calendars = {}
	calendars.private = { maxitems: 5, icalurl: 'https://calendar.google.com/calendar/ical/xxx.calendar.google.com/public/basic.ics' }
	calendars.formule1 = { maxitems: 5, icalurl: 'https://calendar.google.com/calendar/ical/lp%40f1-fansite.com/public/basic.ics' }
	
// --------------------------------------------------------------------------------------------
// Frames
// --------------------------------------------------------------------------------------------

var frames = {}
frames.weather = {
  frameurl:"//forecast.io/embed/#lat=xxx&lon=xxx&name=xxx&color=#00aaff&font=Helvetica&fontColor=#ffffff&units=si&text-color=#fff&",
  height: 250     //height of the block in pixels
}

frames.buienradar = {
  frameurl:"https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256",
    height: 256     //height of the block in pixels
	}

// --------------------------------------------------------------------------------------------
// Blocks
// --------------------------------------------------------------------------------------------

var blocks = {}
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Temperatuur';


blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Stroomverbruik';


blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Netto Stroom / Zonnepanelen';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Gasverbruik';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Zonnepanelen';
blocks['blocktitle_5']['icon'] = 'fas fa-solar-panel'

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Afval';

blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'Waterlekkage sensor';

blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Sonos';

blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Verlichting';

blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Smart Plugs';

blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'Gezinsagenda';
blocks['blocktitle_11']['icon'] = 'fas fa-calendar'

blocks['blocktitle_12'] = {}
blocks['blocktitle_12']['type'] = 'blocktitle';
blocks['blocktitle_12']['title'] = 'F1 agenda';
blocks['blocktitle_11']['icon'] = '../custom/F1_2021.png'


// --------------------------------------------------------------------------------------------
// Status devices
// --------------------------------------------------------------------------------------------

//Stroomverbruik
blocks[44] = {}; 
blocks[44]['title'] = 'Verbruik laag';
blocks[44]['show_lastupdate'] = false;
blocks[44]['width'] = 5
blocks[44]['hide_data'] = true
blocks[44]['icon'] = 'fas fa-plug'

//Stroomverbruik
blocks[45] = {}; 
blocks[45]['title'] = 'Verbruik hoog';
blocks[45]['show_lastupdate'] = false;
blocks[45]['width'] = 5
blocks[45]['hide_data'] = true
blocks[45]['icon'] = 'fas fa-plug'

//Zwembadpomp
blocks[60] = {}; 
blocks[60]['title'] = 'Zwembadpomp';
blocks[60]['show_lastupdate'] = false;
blocks[60]['width'] = 5
blocks[60]['hide_data'] = true
blocks[60]['icon'] = 'fas fa-water'

//TV Lamp
blocks[68] = {}; 
blocks[68]['title'] = 'Lamp TV';
blocks[68]['show_lastupdate'] = false;
blocks[68]['width'] = 5
blocks[68]['hide_data'] = true
blocks[68]['icon'] = 'far fa-lightbulb'

//Lamp dressoir
blocks[65] = {}; 
blocks[65]['title'] = 'Lamp dressoir';
blocks[65]['show_lastupdate'] = false;
blocks[65]['width'] = 5
blocks[65]['hide_data'] = true
blocks[65]['icon'] = 'far fa-lightbulb'

//Alle lampen uit
blocks['s1'] = {}; 
blocks['s1']['title'] = 'Alle lampen aan / uit';
blocks['s1']['show_lastupdate'] = false;
blocks['s1']['width'] = 5
blocks['s1']['hide_data'] = true
blocks['s1']['icon'] = 'fas fa-power-off'

//Waterlekkage sensor
blocks[35] = {}; 
blocks[35]['title'] = 'Water Leak Detector';
blocks[35]['show_lastupdate'] = false;
blocks[35]['width'] = 5
blocks[35]['hide_data'] = true
blocks[35]['icon'] = 'fas fa-faucet'

var columns = {}
columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',29,31,2,'blocktitle_2',44,45,'blocktitle_4',40,'blocktitle_5',42,43,'blocktitle_3',15_1, 'graph_36']
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_11',calendars.private,'blocktitle_12',calendars.formule1,'blocktitle_7',35,'blocktitle_9',65,68,'s1','blocktitle_10',60] 
columns[2]['width'] = 4;

columns[3] = {}
columns[3]['blocks'] = [frames.weather,frames.buienradar,'streamplayer','blocktitle_6','garbage','blocktitle_8',50,51,52]
columns[3]['width'] = 4;

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big_owm']
columns_standby[1]['width'] = 12;

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg10.jpg';
screens[1]['columns'] = [1,2,3]

blocks['calendars.private'] = {
   type: 'calendar',
   layout: 1,
   icalurl: 'https://calendar.google.com/calendar/ical/xxx.calendar.google.com/public/basic.ics'
   
}

blocks['calendars.formule1'] = {
   type: 'calendar',
   layout: 1,
   icalurl: 'https://calendar.google.com/calendar/ical/lp%40f1-fansite.com/public/basic.ics'
   
}


blocks['graph_36'] = {
    title: 'Totaaloverzicht',
    devices: [36],
    graph: ['line','bar','bar'],
    custom : {
         "last 2 weeks": {
            range: 'month',
            filter: '14 days',
            data: {
                Netto: 'd.v_36+d.v2_36-d.r1_36-d.r2_36',
                Verbruik: 'd.v_36+d.v2_36',
                Opgewekt: '-d.r1_36-d.r2_36'
            }
        },
       "last day": {
            range: 'day',
            filter: '24 hours',
            data: {
                Netto: 'd.v_36+d.v2_36-d.r1_36-d.r2_36',
                Verbruik: 'd.v_36+d.v2_36',
                Opgewekt: '-d.r1_36-d.r2_36'
            }
        },
    },
    legend: true,
    datasetColors:['blue','red','yellow']
}

Config for graph are at the end of the file. Device 36 is my P1 smart meter device which has the output of all measures. Just change it to your device number and add the block name (in my case graph_36) to your column.

[mojojojo490]

Thanks. Meanwhile I rearranged some blocks and added some lamps and wifi power plugs to the dashboard. I will post my config.js below so you can grab the configuration lines of the graph.

Thanks for the code! I will look into it. This is new to me, so it will cost a little bit time. But it is really joyfull to do it.
I am trying to make a dashboard from scratch

[rubenmlll]

Last week I installed my water usage sensor, so finally my dashboard is complete. There is still a small gap left, but will be filled when I receive the switch for this.

On the first screen I have the weather info from Open Weather. Below that I have my Xiaomi temp sensors which are connected to a Xiaomi Hub. And then my Tado thermostat.
In the middle you see the energy usage and delivery. Info comes directly from the energy meter and also from the Solar system.
On the right public transport info, Google calendar and my Xiaomi robo vacuum.
On the next screen. The energy usage of some devices. I use energy meter sockets flashed with Tasmota. Gas & Water usage graph, Rain radar, Raspberry status info and the online/offline status of some devices.
And the last one is for switching lights, I also use smart plugs for that. Will add some more in the future.

This is how it looks:

Hi,

how do you read the water data through tasmota? I am in a similar project, and it gives me very high values.

Thank you

[Jimster]

Last week I installed my water usage sensor, so finally my dashboard is complete. There is still a small gap left, but will be filled when I receive the switch for this.

On the first screen I have the weather info from Open Weather. Below that I have my Xiaomi temp sensors which are connected to a Xiaomi Hub. And then my Tado thermostat.
In the middle you see the energy usage and delivery. Info comes directly from the energy meter and also from the Solar system.
On the right public transport info, Google calendar and my Xiaomi robo vacuum.
On the next screen. The energy usage of some devices. I use energy meter sockets flashed with Tasmota. Gas & Water usage graph, Rain radar, Raspberry status info and the online/offline status of some devices.
And the last one is for switching lights, I also use smart plugs for that. Will add some more in the future.

This is how it looks:

Hi,

how do you read the water data through tasmota? I am in a similar project, and it gives me very high values.

Thank you

I'm not using Tasmota for the water meter. I use a NPN sensor which is connected to my raspberry.

[NilsNijenhuis]

Almost done, this is how my dashboard has become
Very happy with it!

the only problem is the garbage collector that isn't working

[EdwinK]

Almost done, this is how my dashboard has become
Very happy with it!

the only problem is the garbage collector that isn't working

Looks nice.

[Zapp]

Here is my dashboard, not bad for someone with 0% coding skills

[Sjonnie2017]

Nice and simple. Although I am intrigued where the 4.5 KWh spike comes from @ 20.43

[NilsNijenhuis]

@zapp nice dashboard, but how do you place the second word of the title on the next line in a button

[Zapp]

Nice and simple. Although I am intrigued where the 4.5 KWh spike comes from @ 20.43

I think that was our induction hotplate in combination with the wash machine or something like that.

@zapp nice dashboard, but how do you place the second word of the title on the next line in a button

I did nothing to get it like that, I think the scaling on the iPad does all the work.

[madpatrick]

I've search the forum and web, but could not find it.
Maybe somebody can give a direction to find this.
I want the color over activated button of the selector changed.


Now it is grey and not very good visible