Yes, you need to define styles: {...} within each item for that:
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
styles: {
margin: '0'
}
}
],
Hi @resoai,
Can you tell please, if you have some development roadmap for the tileboard.
I’m wondering if you think of enabling configuration directly from the browser, adding/editing tiles from the browser and etc?
Thanks!
I’m sorry but no editing configs in browser will be coming. TileBoard was never designed to be a friendly user dashboard but rather a half-backed highly hackable tool for those who want to get their hands dirty in javascript but configure every thing the way they want. Adding a UI will defeat the whole purpose of TileBoard.
Hi,
I have trouble getting the weather component working …
the component work well on the standard version and is declareted in the config.yaml as:
#Dark Sky
weather:
- platform: darksky
and in config.js:
items: [
{
position: [0, 0],
height: 2,
//classes: [‘-compact’], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: ‘weather.dark_sky’,
state: ‘&sensor.dark_sky_summary.state’, // label with weather summary (e.g. Sunny)
icon: ‘&sensor.dark_sky_icon.state’,
//iconImage: ‘&sensor.dark_sky_icon.state’, // use this one if you want to replace icon with image
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: { // most of that fields are optional
summary: ‘&sensor.dark_sky_summary.state’,
temperature: ‘&sensor.dark_sky_temperature.state’,
temperatureUnit: ‘&sensor.dark_sky_temperature.attributes.unit_of_measurement’,
windSpeed: ‘&sensor.dark_sky_wind_speed.state’,
windSpeedUnit: ‘&sensor.dark_sky_wind_speed.attributes.unit_of_measurement’,
humidity: ‘&sensor.dark_sky_humidity.state’,
humidityUnit: ‘&sensor.dark_sky_humidity.attributes.unit_of_measurement’,list: [ // custom line 'Feels like ' + '&sensor.dark_sky_apparent_temperature.state' + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement', // another custom line 'Pressure ' + '&sensor.dark_sky_pressure.state' + '&sensor.dark_sky_pressure.attributes.unit_of_measurement', // yet another custom line '&sensor.dark_sky_precip_probability.state' + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement' + ' chance of rain' ] } }, //position 0,0 Weather
A little help will be welcomed.
This is exactly what I’ve been looking for to use with old android tablets…but…
I’ve failed at the first hurdle.
Getting an error when trying navigate to http://MY_HAS_IP:8123/local/tileboard/index.html
http://localhost:8123/auth/authorize?client_id=http%3A%2F%2F192.168.0.133%3A8123&redirect_uri=http%3A%2F%2F192.168.0.133%3A8123%2Flocal%2Ftileboard%2Findex.html%3Foauth%3D1
did you confirgure your config.js this way ? do you have a ssl connection setup ?
serverUrl: “http://192.168.0.133:8123”,
wsUrl: “ws://192.168.0.133:8123/api/websocket”
It should be DarkSky sensor rather than weather, also what is the “list: []” doing in weather tile?
Please make sure serverUrl and wsUrl are configure properly and clear browser’s cache. It might help to open the page in incognito mode or disabling cache in developer tools.
Ok, thanks.
I will review the effort to implement the tile creation functionality and will let you know.
Once it will done, I think tileboard could totally replace all other hass UIs …
You see, JavaScript config is what allows you to use anonymous functions and… well do something like this:
{
width: 3,
height: 7.5 * musicHeight,
items: []
.concat([0,1,2,3,4,5,6].map(function (id) {
return $$(TILES.CASATUNES_SWITCH, {
position: [0, id * musicHeight],
id: 'switch.casatunes_' + id,
width: 1.5,
height: musicHeight
});
}))
.concat([0,1,2,3,4,5,6].map(function (id) {
return $$(TILES.CASATUNES_VOLUME, {
position: [1.5, id * musicHeight],
id: 'input_number.casatunes_volume_' + id,
width: 1.5,
height: musicHeight
});
}))
}
Take it away and end up with a HADashboard.
The “list:[]” come from the sample …
Indeed. I’ve forgotten about it myself 
I have yes, I also added:
passwordType: PROMPT_AND_SAVE
Im now able to access the GUI, sort off…
I get an error message
Uncaught ReferenceError: CONFIG is not defined
passwordType is not needed
Please note that password and passwordType are no more (replaced by the new auth). It looks like you have an error in the config which is something we could could help you with if we see the full config.
I’ve removed the passwordType, and still get errors, so I think youre probably right…its my basic JS knowledge letting me down here.
Here is my config file → var CONFIG = { customTheme: null, transition: TRANSITIONS.ANIMATED_GPU, - Pastebin.com
and the errors:
JS error
Uncaught SyntaxError: Unexpected identifier
File: http://192.168.0.133:8123/local/tileboard/config.js
Line: 115:22
JS error
Uncaught ReferenceError: CONFIG is not defined
File: http://192.168.0.133:8123/local/tileboard/scripts/init.js
Line: 22:20
Ok, I got it work by modifying my darksky component from weather to sensor, listing all the needed fields and by grouping all this fields in a group called “weather”. I think i’ll add an explenation in the TILE_EXAMPLE file.
Thanks for pointing me the good direction.
You have unclosed string literals:
value: '&sensor.pihole_domains_blocked
value: '&sensor.pihole_ads_percentage_blocked_today
thanks, I spotted this also…I closed them and can now access the UI
but these 2 above mentioned sensors show &sensor.pihole_ads_percentage_blocked_today,
not the actual values. I have cleared browser cache and still don’t see the vlaues
It would be really helpful if you would go through example tiles and wiki and try to understand how values are formed:
value: '&sensor.XXX.state'
or
value: '&sensor.XXX.attributes.YYY'