Sorry, not quite sure what you mean. What should I try changing?
groupMarginCss have a look at our github
That is awesome, can you share the css for that header? I just got mine up and somewhat configured, Ive been looking for where that welcome to tileboard header was to change it lol. THis looks awesome if you dont mind pointing me in the right direction? I looked through all the github files but havent seen it just yet, Thank you!
I found the wiki for it, but where exactly does it go in config.js? Sorry for the rookie questions…
I know Im off here, but i havent found anything on google…is it something like…
…
hideScrollbar: false,
groupsAlign: GROUP_ALIGNS.HORIZONTALLY,
header: [
{
styles: {
Thought I found it, but it looks like head.html defined on each page is depricated?
I found this scrolling this gigantic thread, but I get an orange message saying head is depreciated…anyone feel like sharing how they are adding the new header?
pages: [
{
title: 'Home',
bg: 'images/v.jpg',
icon: 'mdi-home-outline',
head: 'head.html',
groups: [
{
title: '',
width: 2,
height: 3,
items: [This looks pretty cool and gave me the idea of using my front door camera as my screen saver, but I don’t want a button to trigger it. Prefer it to startup just like the current screensaver does.
I tried the following, but it is not working. Any ideas?
screensaver: {
timeout: 5, // 5 seconds for testing
slidesTimeout: 1, // update slide once per second
slides: [
{bg: function(item, entity) {
return 'http://MY_CAMERA_ADDRESS/jpg/image.jpg?size=3' +"&iterator=" + Math.ceil(Date.now() / 100 / 100000);
}
},
]
},
I have seen the anonymous function used in other bg: tags, but this is not working here.
head.html for every group is now deprecated in favour of global header. Here is the link to our wiki page which explains how to configure it:
This will not work. You can try specifying m-jpeg stream (HA is using m-jpeg in camera cards)
Hi @resoai, the new ‘header’ tag is great, but I’ve lost the ability to change the font attributes for the clock. Any chance of adding the clockStyles attribute into HEADER_ITEMS.DATETIME?
I have this hack for now, but…
<div ng-if="item.type === HEADER_ITEMS.DATETIME"> <clock ng-style="clockStyles()"></clock> <date format="item.dateFormat"></date> </div>
Thanks, I actually been looking at that page, but I just dont understand where I place that code? It sounds like it should go in config.js?
Sorry, im brand new when it comes to js/css. appreciate your patience…
Any chance you could share a sample of how it looks in place?
The only file you should;d be editing is config.js. The header object can be placed directly in CONFIG object, or to the each page you have. Here is out updated example config:
Maybe Im over thinking it or somehting. WHen I look at that I see the one line 'header: DEFAULT_HEADER,
Wouldnt I need to change or remove that to the code in the header configuration doc?
I also removed the screensaver portion, I do not want the screen saver so that could be messin with me too. Ill paste a section of my config file for example.
events: [],
header: DEFAULT_HEADER,
timeFormat: 12,
menuPosition: MENU_POSITIONS.LEFT,
hideScrollbar: false,
groupsAlign: GROUP_ALIGNS.HORIZONTALLY,
pages: [
{
title: 'Home',
bg: 'images/v.jpg',
icon: 'mdi-home-outline',
groups: [
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 1],
id: "climate.ecobee",
type: TYPES.CLIMATE,
unit: 'F',
I think i may have figurred it out just now, it looks like i need to just add that header config right below “groups_aligned” on my config?
Like this, but fix the spacing?
events: [],
header: DEFAULT_HEADER,
timeFormat: 12,
menuPosition: MENU_POSITIONS.LEFT,
hideScrollbar: false,
groupsAlign: GROUP_ALIGNS.HORIZONTALLY,
styles: {
padding: '30px 130px 0',
fontSize: '28px'
},
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
styles: {
margin: '0'
}
}
],
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: {
margin: '40px 0 0'
}
},
// Uncomment weather object to get weather in your header.
/*{
type: HEADER_ITEMS.WEATHER,
styles: {header: CODE GOES HERE
I really think that you need to do at least a bit of reading on JS.
i hear ya, thanks
one last question. where is DEFAULT_HEADER located? the actualy code, i originally started to just looking to remove the “Welcome to TileBoard” message, that will do until i am able to get up to speed on js
1 Like
DEFAULT_HEADER is located in app.js but yoou should never edit this file since it will be overwritten by the update.
can you see where im messed up with syntax? Ive been reading and throwing ish since this morning. jsonlint isnt the most helpful either…
events: [],
timeFormat: 12,
menuPosition: MENU_POSITIONS.LEFT,
hideScrollbar: false,
groupsAlign: GROUP_ALIGNS.HORIZONTALLY,
header:
{
styles: {
padding: '30px 130px 0',
fontSize: '28px'
},
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd',
styles: {
margin: '0'
}
}
],
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: {
margin: '40px 0 0'
}
},
{
type: HEADER_ITEMS.WEATHER,
styles: {
margin: '0 0 0'
}
},
icon: '&sensor.dark_sky_icon.state',
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: {
summary: '&sensor.dark_sky_summary.state',
temperature: '&sensor.dark_sky_temperature.state',
temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
}
}
]
}
pages: [
{
title: 'Home',
bg: 'images/v.jpg'From the first look I can see that you are missing a coma after the last } before pages:
good call. missed that. didnt fix it though, its weird actually when i added the missing comma i get a red “}” at the very end of my file. I use sublime text that calls those out sometimes.
I completely remove this section and it works fine so I know the issue is in here somewhere.
I want this to work so damn bad lol. I had 4 hadashboards for a long time around the house, the look of those are just too dated and the speed killed me, this is light years ahead and exactly what i need. the cams popping up on motion and the way the media players just keep the image up of whats playing is beautiful. im not givin up on this