Where do i go wrong

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Post Reply
klaasvd
Posts: 5
Joined: Wednesday 13 March 2019 16:42
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Where do i go wrong

Post by klaasvd »

So i'm trying to make a custom Dashticz dashboard, following the manual. I took the code from the manual, the first steps so without the block configuration. No problem there, that works. So i take the next step, with block, column, etc, then it wont work. Dashticz loads, but there is nothing to see. F12 gives this error
js/main.js:303 TypeError: Cannot read property 'forEach' of undefined
at getBlock (js/blocks.js:62)
at buildScreens (js/main.js:745)
at onLoad (js/main.js:451)
at js/main.js:299
at mightThrow (bundle.js?t=15:309)
at R (bundle.js?t=15:309

This is the code

Code: Select all

var config = {}
config['language'] = 'nl_NL'; //or: en_US, de_DE, fr_FR, hu_HU, it_IT, pt_PT, sv_SV;
config['domoticz_ip'] = 'http://192.my ip';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';

config['use_favorites'] = 0; //Request all Domoticz Devices, not only favorites
config['auto_positioning'] = 0; // Use 0 this if you have defined your own columns

//Definition of blocks
blocks = {}
blocks[1] = {
  width: 6
}

blocks[3] = {
  width: 6
}

//Definition of columns
columns = {}
columns[1] = {
  //In this example: No blocks are defined in this column
  //This column will be empty
  width: 4
}
columns[2] = {
  blocks : [1, 3],
  width: 8
}

//Definition of screens
screens = {}
screens[1] = {
  columns: [1, 2]
}
What am i doing wrong?
Last edited by klaasvd on Monday 26 April 2021 9:17, edited 2 times in total.
bce626
Posts: 17
Joined: Saturday 03 November 2018 10:12
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Location: Netherlands
Contact:

Re: Where do i go wrong

Post by bce626 »

I don't think this is necessary
//Definition of blocks
blocks = {}
blocks[1] = {
width: 6
}
'
this is the my version
//overige
blocks[95] = {} /*seisoen*/
blocks[95]['width'] = 2;
blocks[95]['switch'] = true;
blocks[95]['hide_data'] = true;
blocks[95]['image'] = '4s.png',
without the dubble {}
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Where do i go wrong

Post by EdwinK »

First, put your code between the < code > and < /code> block if posting it will make reading a bit easier

Second, I don't see any devices in the blocks. See my example below

Code: Select all

var config = {
    domoticz_ip         : 'http://192.168.0.11:8080',
    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            : 'Rhoon',
    owm_name            : 'Rhoon',
    owm_country         : 'nl',
    owm_lang            : 'nl',
    owm_days            : true,
    own_cnt             : 5,
    static_weathericons : true,
*/
    garbage_company     : 'barafvalbeheer',
    garbage_icalurl     : 0,
    garbage_zipcode     : '',
    garbage_street      : '',
    garbage_housenumber : '27',
    garbage_maxitems    : 4,
    garbage_width       : 6,
    garbage             : {
        gft				: {kliko: 'green',	code: '#375b23', name: 'GFT',		icon: '/img/garbage/kliko_green.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_gas_and_elektra';
var title_gas               = 'title_gas';
var title_elektra           = 'title_elektra';
var title_112meldingen      = 'title_112meldingen';
var title_presence			= 'title_presence';
//var title_news            = 'title_news';
var title_lampen	     	= 'title_lampen';
var title_calendar          = 'title_calendar';
var title_garbage           = 'title_garbage';
var title_menu				= 'title_menu';
var title_toon				= 'title_toon';

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

// Smartmeter Elektra
// Smart Meter Elektra: _1 = Huidig Elektra, _2 = Elektra Vandaag, _3 = Elektra Totaal (IDX1)
// Smart Meter Gas _1 = vandaag, _2 = totaal (IDX2)
var p1_gas_vandaag          = '2_1';
var p1_gas_totaal           = '2_2';
var p1_grafiek_gas          = 'graph_gas';

var p1_elektra_nu           = '1_1';
var p1_elektra_vandaag      = '1_2';
var p1_elektra_totaal       = '1_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 = {}

blocks['weather'] = {
    type: 'weather',
    layout: 3,
    name:'Albrandswaard',
}

// toon
blocks[title_toon] = {}
blocks[title_toon]['type'] 	= 'blocktitle'
blocks[title_toon]['title'] = 'TOON'
//blocks[title_toon]['image'] = '


// 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]['icon'] = 'fas fa-plug',

// 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]['icon'] = 'far fa-bolt',


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

// TOON 

// BLOCK MENU
blocks[title_menu] = {},
blocks[title_menu]['type'] = 'blocktitle',
blocks[title_menu]['title'] = 'MENU',

// Title: 112 meldingen
blocks[title_112meldingen] = {}
blocks[title_112meldingen]['type'] = 'blocktitle'
blocks[title_112meldingen]['title'] = '112 meldingen ....'
blocks[title_112meldingen]['icon'] = 'fas fa-bullhorn',

blocks['alarmmeldingen'] = {
    title           : '',
    rss             : 'http://www.alarmeringen.nl/feeds/region/rotterdam-rijnmond.rss',
    filter			: 'Poortugaal,Rhoon,Albrandswaard',
	show_lastupdate : true,
    width           : 12,
    refresh         : 300,
    results         : 5, 
    icon           	: 'far fa-bullhorn',
    timeformat      : 'DD-MM HH:mm',
    }

// Lampen
blocks[title_lampen] = {}
blocks[title_lampen]['type']	= 'blocktitle'
blocks[title_lampen]['title']	= 'Verlichting'
blocks[title_lampen]['icon']	= 'far fa-lightbulb'

// Title: Agenda
blocks[title_calendar] = {}
blocks[title_calendar]['type']	= 'blocktitle'
blocks[title_calendar]['title'] = 'Agenda'
blocks[title_calendar]['icon'] = 'far fa-calendar-alt',

// Agenda
blocks['gmail_calendars'] = {
        type: 'calendar',
        layout: 2,
        icalurl: {
                Personal: {
                        ics: 'https://',
                color: 'blue'
                },
                Business: {
                        ics: 'https://',
                        color: 'purple'
                }
        },
        holidayurl: 'https://www.calendarlabs.com/ical-calendar/ics/75/Netherlands_Holidays.ics',
        maxitems: 100,
        weeks: 4,
        lastweek: true,
        isoweek: false,
        width: 12
}

// Title: Gargabe
blocks[title_garbage] = {}
blocks[title_garbage]['type']	= 'blocktitle'
blocks[title_garbage]['title']	= 'Afvalcontainers'
blocks[title_garbage]['image']	= '/garbage/kliko.png'

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

columns[1] = {};// toon blocks need to be created
columns[1]['blocks'] = ['title_toon',1106,1114,054,1053,1056,
    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'] = 5;

columns[2] = {};
columns[2]['blocks'] = [
    title_112meldingen, 'alarmmeldingen',
    title_lampen, 1004,1006,1021,1022,406,740,1039,
]
columns[2]['width'] = 5;

columns[3] = {};
columns[3]['blocks'] = [title_menu,]
columns[3]['width'] = 2;

columns[4] = {};
columns[4]['blocks'] = [  title_calendar, 'gmail_calendars',    
]
columns[4]['width'] = 12;

columns[5] = {};
columns[5]['blocks'] = [
]
columns[5]['width'] = 12;

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

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

screens[2] = {} // calendar
screens[2]['columns'] = [4]

Last edited by EdwinK on Monday 26 April 2021 8:14, edited 4 times in total.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
klaasvd
Posts: 5
Joined: Wednesday 13 March 2019 16:42
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Where do i go wrong

Post by klaasvd »

Thnx for the replies i put it between te <code></code> tags now., so the code from the manual from dashticz(https://dashticz.readthedocs.io/en/mast ... board.html) doesnt state any devices?
bce626
Posts: 17
Joined: Saturday 03 November 2018 10:12
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Location: Netherlands
Contact:

Re: Where do i go wrong

Post by bce626 »

@ klaasvd I think he meant me. I have them between quotation marks
bce626
Posts: 17
Joined: Saturday 03 November 2018 10:12
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Location: Netherlands
Contact:

Re: Where do i go wrong

Post by bce626 »

@ EdwinKer, I don't use text, because I use the idx of domoticz

Code: Select all

var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = '';
config['app_title'] = 'Dashticz V3';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'https://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '20';
config['boss_stationclock'] = 'RedBoss';
config['standby_after'] = '1';
config['enable_websocket'] = true;
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['garbage_company'] = 'xxxxx';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = 'xxxx';
config['garbage_street'] = 'xxxx';
config['garbage_housenumber'] = 'xxxxx';
config['garbage_maxitems'] = '12';
config['garbage_width'] = '12';
config['owm_api'] = 'b9a12bbeab21fe92e6a367165d0fc352';
config['owm_city'] = 'xxxxx';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '3';
config['owm_min'] = true;
config['owm_days'] = true;
config['vertical_scroll'] = '0';
config['longfonds_zipcode'] = 'xxxxxx';
config ['longfonds_housenumber'] = 'xxx';

//block 
var blocks = {}

// kop (naam van de rij of sectie in hoofd blokken)
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'verlichting BG';

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

// schakellaars en informatie in de blocken

//BG
blocks[2] = {} /*gang verlichting*/
blocks[2]['width'] = 12; 
blocks[2]['switch'] = true; 
blocks[2]['hide_data'] = true; 

blocks[3] = {} /*gang verlichting*/
blocks[3]['width'] = 12;
blocks[3]['switch'] = true; 
blocks[3]['hide_data'] = true; 

blocks[4] = {} /*keuken links*/
blocks[4]['width'] = 12; 
blocks[4]['switch'] = true; 
blocks[4]['hide_data'] = true; 

blocks[5] = {} /*keuken rechts*/
blocks[5]['width'] = 12; 
blocks[5]['switch'] = true; 
blocks[5]['hide_data'] = true; 

blocks[6] = {} /*keuken midden*/
blocks[6]['width'] = 12; 
blocks[6]['switch'] = true; 
blocks[6]['hide_data'] = true; 

blocks[32] = {} /*stalenkast*/
blocks[32]['width'] = 12; 
blocks[32]['switch'] = true; 
blocks[32]['hide_data'] = true; 

blocks[34] = {} /*lamp openhaard*/
blocks[34]['width'] = 12; 
blocks[34]['switch'] = true; 
blocks[34]['hide_data'] = true; 

blocks[78] = {} /*zonnenscherm keuken*/
blocks[78]['width'] = 12; 
blocks[78]['switch'] = true; 
blocks[78]['hide_data'] = true; 
// BG

//overige
blocks[95] = {} /*seisoen*/
blocks[95]['width'] = 2; 
blocks[95]['switch'] = true; 
blocks[95]['hide_data'] = true; 
blocks[95]['image'] = '4s.png',

blocks[130] = {} /*locatie*/
blocks[130]['width'] = 2; 
blocks[130]['switch'] = true; 
blocks[130]['hide_data'] = true; 
blocks[130]['icon'] = 'fas fa-bold'

blocks['alarmmeldingen'] = {}
blocks['alarmmeldingen']['rss'] = 'https://www.alarmeringen.nl/feeds/region/';
blocks['alarmmeldingen']['show_lastupdate'] = true;
blocks['alarmmeldingen']['width'] = 9;
blocks['alarmmeldingen']['refresh'] = 300;
blocks['alarmmeldingen']['results'] = 5;

blocks['longfonds'] = {}
blocks['longfonds']['title'] = 'Luchtkwaliteit';
blocks['longfonds']['switch'] = true;
blocks['longfonds']['width'] = 12;
//overige

//buttons
buttons = {}
buttons.moon = {
  width:3,
  refresh: 3600,
  btnimage: 'moon'
}
//buttons

// rijen dashticz
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['sunrise','miniclock','95']

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1','2','3','4','6','5','32','34','78']
columns[1]['width'] = 6;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_2','news','traffic','weather_owm',buttons.moon,'alarmmeldingen']
columns[2]['width'] = 6;

columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather_owm','garbage','130','longfonds']
columns_standby[1]['width'] = 12;
// rijen dashticz

//screen indeling / pagina uitbereiding
var screens = {}
screens[1] = {}
screens[1]['background'] = 'Blauwe_achtergrond.jpg';
screens[1]['background_morning'] = 'ochtend1.jpg';
screens[1]['background_noon'] = 'middag.jpg';
screens[1]['background_afternoon'] = 'avond.jpg';
screens[1]['background_night'] = 'nacht.jpg';
screens[1]['columns'] = [1,2]
//screen indeling / pagina uitbereiding
User avatar
HansieNL
Posts: 964
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Where do i go wrong

Post by HansieNL »

klaasvd wrote: Monday 26 April 2021 9:04 Thnx for the replies i put it between te <code></code> tags now., so the code from the manual from dashticz(https://dashticz.readthedocs.io/en/mast ... board.html) doesnt state any devices?
Can you try with the following code:

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://<ip address>:<port>';
config['app_title'] = 'Dashticz V3';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';

blocks = {}
blocks[1] = {
	width: 6
}

blocks[3] = {
	width: 6
}


columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']

columns[1] = {
	blocks: [],
	width: 6
}

columns[2] = {
	blocks: [1,3],
	width: 6
}

screens = {}
screens[1] = {
	columns: [1,2]
}
Blah blah blah
Lokonli
Posts: 2290
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Where do i go wrong

Post by Lokonli »

klaasvd wrote: Sunday 25 April 2021 23:58 So i'm trying to make a custom Dashticz dashboard, following the manual. I took the code from the manual, the first steps so without the block configuration. No problem there, that works. So i take the next step, with block, column, etc, then it wont work. Dashticz loads, but there is nothing to see. F12 gives this error
js/main.js:303 TypeError: Cannot read property 'forEach' of undefined
at getBlock (js/blocks.js:62)
at buildScreens (js/main.js:745)
at onLoad (js/main.js:451)
at js/main.js:299
at mightThrow (bundle.js?t=15:309)
at R (bundle.js?t=15:309

This is the code

Code: Select all

var config = {}
config['language'] = 'nl_NL'; //or: en_US, de_DE, fr_FR, hu_HU, it_IT, pt_PT, sv_SV;
config['domoticz_ip'] = 'http://192.my ip';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';

config['use_favorites'] = 0; //Request all Domoticz Devices, not only favorites
config['auto_positioning'] = 0; // Use 0 this if you have defined your own columns

//Definition of blocks
blocks = {}
blocks[1] = {
  width: 6
}

blocks[3] = {
  width: 6
}

//Definition of columns
columns = {}
columns[1] = {
  //In this example: No blocks are defined in this column
  //This column will be empty
  width: 4
}
columns[2] = {
  blocks : [1, 3],
  width: 8
}

//Definition of screens
screens = {}
screens[1] = {
  columns: [1, 2]
}
What am i doing wrong?
Somehow a bug returned. I thought it was fixed, but apparently not.

Each column must have a block parameter of type array. So as an example you could define columns 1 as follows:

Code: Select all

columns[1] = {
  //In this example: No blocks are defined in this column
  //This column will be empty
  blocks: [],
  width: 4
}
I'll fix this in a new master and beta version this week.
klaasvd
Posts: 5
Joined: Wednesday 13 March 2019 16:42
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Where do i go wrong

Post by klaasvd »

This worked indeed, now i do have 2 visible buttons
HansieNL wrote: Monday 26 April 2021 11:57
klaasvd wrote: Monday 26 April 2021 9:04 Can you try with the following code:

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://<ip address>:<port>';
config['app_title'] = 'Dashticz V3';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';

blocks = {}
blocks[1] = {
	width: 6
}

blocks[3] = {
	width: 6
}


columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']

columns[1] = {
	blocks: [],
	width: 6
}

columns[2] = {
	blocks: [1,3],
	width: 6
}

screens = {}
screens[1] = {
	columns: [1,2]
}
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest