Dashticz - Module - Topbar

[robgeerts]

Added a topbar! Not only to give the dashboard more 'body' but also to add some new functions like a settings-icon (not working yet). And maybe in the future things like notifications and stuff.


To disable, add in config.js:

Code: Select all

var _HIDE_TOPBAR			= false;

To change, add in config.js:

Code: Select all

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

[blacksn0w]

Great feature! The "Dashticz" text is hardcoded in main.js, right? It might be cooler to edit this respectively make it editable.

EDIT: And maybe editable background transparency, this is editable via custom.css, but would be easier in custom.js itself.

[robgeerts]

Title can be changed in latest beta, add in config.js:

Code: Select all

var _APP_TITLE = 'My Title';

[EdwinK]

I liked the idea. Unfortunately, my screensize is too small, so everything was pushed a little to far down, so the bottom row wasn't visible anymore.

[Teunissm]

Is it also possible to make the topbar more transparent and make de borders a less smaller? Maybe in the config_css?

[robgeerts]

Add this to custom.css:

Code: Select all

.transbg.dark.col-xs-1, .transbg.dark.col-xs-2, .transbg.dark.col-xs-3, .transbg.dark.col-xs-4, .transbg.dark.col-xs-5, .transbg.dark.col-xs-6, .transbg.dark.col-xs-7, .transbg.dark.col-xs-8, .transbg.dark.col-xs-9, .transbg.dark.col-xs-10, .transbg.dark.col-xs-11, .transbg.dark.col-xs-12 {
    border: 7px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.5);
    background-clip: padding-box;
}

Change, for example:

Code: Select all

background: rgba(0,0,0,0.5);

TO

Code: Select all

background: rgba(0,0,0,0.1);

And/or add this to custom.css:

Code: Select all

.colbar.transbg {
    padding-left: 1px !important;
    padding-right: 1px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

[Teunissm]

the first one indeed did the trick. now i have al the blocks and the topbar the same

thanx.

[johansson]

I accidentally the whole topbar, is this bad?

While fiddling with settings I switched off the topbar and cannot get it switched back on, which means the settings-button is gone as well. I must admit I didn't get the local settings/config.js -thing at all, i.e seems that settings in config.js (with capitals) make no difference in the web interface. How should the config.js be used in order to see the changes in the dashboard?

e. Solved: obviously a minute after posting came across the solution Didn't notice the config.js was by default completely commented out...

[gielie]

I really like the topbar but my day name is in english and id like to have it in Dutch, how can i do this?
I also like to remove the time from the topbar, so only the date, is this possible?

[EdwinK]

Set language to NL if you want it in Dutch. Not sure how to change the time setting

[gielie]

Set language to NL if you want it in Dutch. Not sure how to change the time setting

i have it set to nl_NL but this doesn't change it

[aiolos]

Set language to NL if you want it in Dutch. Not sure how to change the time setting

i have it set to nl_NL but this doesn't change it

the language can be in the local storage of the browser, maybe you need to clear that.
In the config you can also change the following setting, causing all clock block show no time at all:

Code: Select all

config['shorttime'] = ' ';

(note the space, an empty string would cause a very long date/time string)

[htilburgs]

I really like the topbar but my day name is in english and id like to have it in Dutch, how can i do this?
I also like to remove the time from the topbar, so only the date, is this possible?

The topbar is built up in parts, which you can define in config.JS

Code: Select all

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

You can leave out 'miniclock', then there is no clock, but it's not nice alligned, because setup / fullscreen is not on the right.
A 'dirty' workaround for this:

- Create a dummy switch and take note of the IDX
- Create an entry in config.JS for the dummy switch

Code: Select all

blocks[IDX] = {} //Dummy block for topbar
blocks[IDX]['title'] = ''
blocks[IDX]['icon'] = ''; 	
blocks[IDX]['hide_data'] = true; 
blocks[IDX]['protected'] = true;
blocks[IDX]['width'] = 8;

- Create an entry in custom.css

Code: Select all

/* Dummy for Topbar */
.block_440 {
	height:0px !important;
	background-color: rgba(0,0,0,0) !important;
} 

- Make topbar in config.JS like this

Code: Select all

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

Maybe there is a nicer way, but this is how it can be done. Maybe you'll have to play with blocks[IDX]['width'] = 8 but this works for me....

[Derik]

Dear All:
i post on the "wrong topic"
Is there perhaps someone that create a sort of css for the topbar:
https://www.domoticz.com/forum/viewtopi ... 40#p164127

Now it is to high..[ for my opinion ]
And the space should be used much beter.