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

[Lokonli]

Is there any way to prioritize the garbage type or, even better, a way to display a combination of images depending on the types collected on the next day ?

I tried to adjust the event times in home made garbage google calendar :
Plastic at 09.00 and Bio at 10.00
Even like this, the first item displayed in the list (and icon displayed) is always Bio bag.

Any idea ?
Thanks

Combining would be a bit more difficult, but in latest beta the garbage collection will be sorted based on the order of the keys in 'garbage' parameter.

[damdub]

Great news !
Thank you @Lokonli !

[damdub]

Hello
another question about new calendar block
Is it possible to limit the list to the next 7 days events ?
It seems like this is only possible with layout 2 via parameter weeks
Why is it limited t this layout only ?

Thank you for your help

[HansieNL]

I added a few calendar blocks and one of them contains only "all day" events (birthday dates)
Is it possible to hide the "hour" column for these events or for an entire calendar even if events are not all day events ?

Check out latest beta. You can now use layout:3 or layout: 4 for that.
See: https://github.com/Dashticz/dashticz/bl ... y-calendar

[RuudP1987]

Hello all,

New to dashticz but already came far with my skills. See attached screenshot after a few hours of testing and editing. I looked through this topic but couldn't find it so that is why I am asking.

I am looking for a few options to add:
- Sonos possibility to add my 3 speakers
- How can I group and arrange things better? Now it's a bit of a mess. I want to have the switches for my lamps and groups in a row on the left. Then my News + Buienradar radar image and forecast from owm. and last but not least my energy consumption in a third row on the right. How can I fix this?
- How can I add buienradar radar image to dashticz?
- In the topbar there is now maandag 8 february 2021. Is it possible to make it "Maandag 8 February 2021"? So with upperclass? Also I added 'sunrise' here but this doesn't show up.




Attached there is my config.JS

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.168.1.2:8080';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['app_title'] = 'xxxx';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['spot_clientid'] = 0;
config['hide_seconds'] = 1;
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['spot_clientid'] = 'xxxxxxx';
config['hide_mediaplayer'] = 1;
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
config['owm_api'] = 'xxxxx';
config['owm_city'] = '2757345';
config['owm_name'] = 'Delft';
config['owm_country'] = 'nl';
config['owm_lang'] = 0;
config['owm_cnt'] = '3';
config['owm_days'] = true;
config['owm_min'] = true;
config['background_image'] = 'img/bg12.jpg';

blocks = {}        //only once
blocks[40] = {
 title: 'Huisbediening',
 width: 4
}

//headerbar
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','sunrise','settings'],

//Definition of columns
// Woonkamer, Slaapkamer, Keuken en Thermostaat
columns = {}
columns[1] = {
  blocks : [40,'s1','s2', 34, 43],
    //In this example: No blocks are defined in this column
  //This column will be empty
  width: 6
}

//energiemeter, gasmeter//
columns[2] = {
  blocks : [2, '4_1'],
  width: 6
}

//spotify
columns[3] = {
 blocks : ['spotify'],
 width: 4
}

//energieverbruik grafiek
columns[4] = {
  blocks : ['graph_2'],
	devices: [2],
	legend: true,
	width: 4
}
//gasverbruik grafiek
columns[5] = {
  blocks : ['graph_4'],
	devices: [4],
	legend: true,
	width: 4

//weerbericht
}
columns[6] = {}
columns[6]['blocks'] = ['currentweather_big_owm','weather_owm']
columns[6]['width'] = 3;

[madpatrick]

Hello all,

New to dashticz but already came far with my skills. See attached screenshot after a few hours of testing and editing. I looked through this topic but couldn't find it so that is why I am asking.

I am looking for a few options to add:
- Sonos possibility to add my 3 speakers
- How can I group and arrange things better? Now it's a bit of a mess. I want to have the switches for my lamps and groups in a row on the left. Then my News + Buienradar radar image and forecast from owm. and last but not least my energy consumption in a third row on the right. How can I fix this?
- How can I add buienradar radar image to dashticz?
- In the topbar there is now maandag 8 february 2021. Is it possible to make it "Maandag 8 February 2021"? So with upperclass? Also I added 'sunrise' here but this doesn't show up.

To arrange your thing, play with the collums and blocks

for ex.

Place your block to the blocks section

Code: Select all

//energieverbruik grafiek
  blocks : ['graph_2'],
	devices: [2],
	legend: true,
	width: 4
  blocks : ['graph_4'],
	devices: [4],
	legend: true,
	width: 4

Code: Select all

columns[4] = {'graph_2', 'graph_4', width: 8}
 

This will place the both graph next to each other.

[Lokonli]

- How can I group and arrange things better? Now it's a bit of a mess. I want to have the switches for my lamps and groups in a row on the left. Then my News + Buienradar radar image and forecast from owm. and last but not least my energy consumption in a third row on the right. How can I fix this?

First decide how many screens you want to have. Then for the first screen: how many columns do you want to have?

Make the sum of the column width 12: (=100% screen width)
So, if your column width is 4, then that column will occupy 4/12 = 33% of the screen width.

Then you can a start adding blocks to each column. Per column-row, Dashticz again can fill up to a width of 12.
So, in one column row you can place three blocks each having width 4, one with width 12, or 6 with width 2. If a block doesn't fit anymore in the current row, it will shift to the next row (of the same column).

- How can I add buienradar radar image to dashticz?

Define a block:

Code: Select all

blocks['buienradar'] = {width:12, isimage:true, refresh:60, btnimage: 'https://image.buienradar.nl/2.0/image/animation/RadarMapRainNL?height=300&width=360&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=3&forecast=6&skip=1', url: 'https://www.buienalarm.nl/amsterdam-noord-holland-nederland/52.3727,4.8936'}

This will become a so called 'button' block, containing an image, and an url which will open on click.

And then add this button to a column:

Code: Select all

columns[3] = {
   blocks: ['buienradar']
}

[RuudP1987]

Thanks for the quick answer. But with the blocks I got this syntax error now:
SyntaxError: Unexpected token ':'. Parse error. at line 34, which is this line:
blocks : ['graph_2'],

Also I added the blocks title to my switches but this Block title won't show up

Code: Select all

blocks = {}        //only once
blocks[40] = {
 title: 'Huisbediening',
 width: 4
}

//energieverbruik grafiek
  blocks : ['graph_2'],
	devices: [2],
	legend: true,
	width: 4
  blocks : ['graph_4'],
	devices: [4],
	legend: true,
	width: 4,

//headerbar
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','sunrise','settings'],

// Woonkamer, Slaapkamer, Keuken en Thermostaat
columns = {}
columns[1] = {
  blocks : [40,'s1','s2', 34, 43],
  width: 6
}

//spotify
columns[3] = {
 blocks : ['spotify'],
 width: 4
}

//energiegrafieken
columns[4] = {'graph_2', 'graph_4', width: 8}

//weerbericht
}
columns[6] = {}
columns[6]['blocks'] = ['currentweather_big_owm','weather_owm']
columns[6]['width'] = 3;

[madpatrick]

Try:

Code: Select all

//energieverbruik grafiek
  blocks['graph_2'] = {
	devices: [2],
	legend: true,
	width: 4
	} 

blocks['graph_4'] = {
	devices: [4],
	legend: true,
	width: 4,
	}

[RuudP1987]

I am getting there but the layout is getting messier and messier haha. Buienradar works now!

Is there somewhere a guide on setting up blocks and more?

[Sjonnie2017]

Is there somewhere a guide on setting up blocks and more?

Start here: https://dashticz.readthedocs.io/en/master/

HTH

Greetz,

Sjonnie

[RuudP1987]

Hello all,

I have been busy working with columns and blocks.. My first block I got set up properly but when I add my second row it all goes wrong again.. What am I doing wrong? I calculated the width of the blocks and as Lokonli said a block is 12 and a column can be divided in 12 again. But I want the OWM and buienradar on their own line so I made these both 6 width. Attached a screenshot and my new code. My light switches and thermostat are at the correct place. The buienradar and OWN needs to go right of that block.

Code: Select all

blocks['s1','s2',34,43] = {
  Width:4
}
columns[1] = {
  blocks: ['s1','s2',34],
  width: 4,
}
columns[2] = {
 blocks: [43],
 width: 12,
}

blocks['buienradar','currentweather_big_owm','weather_owm'] = {
  Width:4
}
columns[3] = {
  blocks: ['buienradar'],
  width: 3,
}
columns[4] = {
 blocks: ['currentweather_big_owm','weather_owm'],
 width: 3,
}

Also if I start using

Code: Select all

blocks['s1'] = {    //Select group/scene with Domoticz index 12
  title: 'Slaapkamer'
}

Then I can name these easily and implement them in a block instead of 's1' I use 'Slaapkamer' right?

[madpatrick]

How does your screens setup look ?

for example:

Code: Select all

//Definition of screens
screens = {}
screens[1] = {
columns: [1, 2]
}

[Lokonli]

Hello all,

I have been busy working with columns and blocks.. My first block I got set up properly but when I add my second row it all goes wrong again.. What am I doing wrong? I calculated the width of the blocks and as Lokonli said a block is 12 and a column can be divided in 12 again. But I want the OWM and buienradar on their own line so I made these both 6 width. Attached a screenshot and my new code. My light switches and thermostat are at the correct place. The buienradar and OWN needs to go right of that block.

Code: Select all

blocks['s1','s2',34,43] = {
  Width:4
}
columns[1] = {
  blocks: ['s1','s2',34],
  width: 4,
}
columns[2] = {
 blocks: [43],
 width: 12,
}

blocks['buienradar','currentweather_big_owm','weather_owm'] = {
  Width:4
}
columns[3] = {
  blocks: ['buienradar'],
  width: 3,
}
columns[4] = {
 blocks: ['currentweather_big_owm','weather_owm'],
 width: 3,
}

Also if I start using

Code: Select all

blocks['s1'] = {    //Select group/scene with Domoticz index 12
  title: 'Slaapkamer'
}

Then I can name these easily and implement them in a block instead of 's1' I use 'Slaapkamer' right?

The keys are case sensitive. So use 'width' instead of 'Width'

And probably the next statement is incorrect:

Code: Select all

blocks['s1','s2',34,43] = {
  Width:4
}

Code: Select all

blocks['buienradar','currentweather_big_owm','weather_owm'] = {
  Width:4
}

Start the simple way, and define your blocks like:

Code: Select all

blocks['s1'] = {
    width: 4
}

blocks['s2'] = {
    width: 4
}

blocks['buienradar'] = {
   width: 4,
   //add the other parameters like btnimage and url here as well
}

[RuudP1987]

How does your screens setup look ?

for example:

Code: Select all

//Definition of screens
screens = {}
screens[1] = {
columns: [1, 2]
}

I don't use screens as I just only want 1 screen at the moment. Does it make any difference?

[Lokonli]

How does your screens setup look ?

for example:

Code: Select all

//Definition of screens
screens = {}
screens[1] = {
columns: [1, 2]
}

I don't use screens as I just only want 1 screen at the moment. Does it make any difference?

If you don't define screens[1] in CONFIG.js, then by default a screens[1] will be created that contains all columns you defined.
So, it should work ...

Your column 1 contains three blocks, and has width 4.
Your column 2 contains one block '43'. I assume this is the Thermostaat device. The column has width 12, so this second column doesn't fit right of the first column.
That means column 2 will start on a new row, below column 1.

Column 3 has width 3. However, column 2 (width 12) already covers the whole screen width. That means column 3 will start a new row, below column 2.

Column 4 has width 3. This column will fit right of column 3. The two columns together will fit within the left 50% of the screen.

So it seems the screenshot exactly shows how you defined your columns.

[RuudP1987]

How does your screens setup look ?

for example:

Code: Select all

//Definition of screens
screens = {}
screens[1] = {
columns: [1, 2]
}

I don't use screens as I just only want 1 screen at the moment. Does it make any difference?

If you don't define screens[1] in CONFIG.js, then by default a screens[1] will be created that contains all columns you defined.
So, it should work ...

Your column 1 contains three blocks, and has width 4.
Your column 2 contains one block '43'. I assume this is the Thermostaat device. The column has width 12, so this second column doesn't fit right of the first column.
That means column 2 will start on a new row, below column 1.

Column 3 has width 3. However, column 2 (width 12) already covers the whole screen width. That means column 3 will start a new row, below column 2.

Column 4 has width 3. This column will fit right of column 3. The two columns together will fit within the left 50% of the screen.

So it seems the screenshot exactly shows how you defined your columns.

I think I now get it. Back to the drawing bord!

[Lokonli]

Looking forward to see the results!

[RuudP1987]

Making a lot of progress these days! Almost happy with the result!

Although I want a graph with bars. But when I have set up this code nothing shows up anymore. What am I missing that it only displays the title and the usage and the custom buttons but not the graph?

Code: Select all

//energieverbruik grafiek
  blocks['graph_2'] = {
    title: 'Mijn verbruik',
	devices: [2],
	graph: 'bar',
	width: 12,		//12 is 100% column breedte
 	custom : {
        "Last 2 weeks": {
            range: 'month',
            filter: '14 days',
        },
        "Last 6 months": {
            range: 'year',
            filter: '6 months',
            }
    },
    legend: true,
}

[RuudP1987]

Almost done!



Only question left is my graph and how to center the Buienradar screen in my 2nd column?