here is one example from aliexpress, but this one is only 7 inch, currently im living in China and they have this kind of displays up to 13 inch.
1 Like
In the latest changes to TileBoard there where some modifications with regards to the Api variable and since then the following approach to directly interact with the Home Assistant throws errors saying that the Api is not defined
Api.send({
type: 'call_service',
domain: 'media_player',
service: 'select_source',
service_data: {
entity_id: 'entity_id', //replace with entity_id of media_player
source: 'source' //replace with source name
}
Is there a new approach to interact with the API directly?
Not sure if you are still looking for this answer, but in the proposed you have to download the file and save it in your tileboard directory.
I’ve added the following in between the HTML <head> and </head> tags:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/i18n/angular-locale_nl-be.js"></script>
This is using a hosted version on the Cloudflare CDN rather than a local file. Both approaches have there advantage.
Where are you calling that from? From the action handler? If so, you have this.apiRequest available there.
Thanks @rchl!
I tried at first to do this.apiRequest.send but that failed. Using this.apiRequest solves the issue.
Just to inform you and others that in the more recent versions of Tileboard the Api.send call is replaced by this.apiRequest.
Your example then becomes the following:
action: function(item, entity) { // toggle mute
this.apiRequest({
type: "call_service",
domain: 'media_player',
service: "volume_mute",
service_data: {
entity_id: item.id,
is_volume_muted: !entity.attributes.is_volume_muted
}
});
}
2 Likes
Trying to make weather tile work but it’s only showing plain text for example:
Feels like &sensor.dark_sky_apparent_temprature.state
This is my code, just copied from the example
position: [2, 1],
height: 2,
//classes: [’-compact’], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: ‘weather.hem’,
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'Does anyone know if I can add a CSS class to a group? I appear to be able to apply classes to the individual items but not to the group. I’m experimenting with making tileboard responsive.
groups: [
{
classes: ["-this-group-name-does-not-work"],
items: [
{
classes: ["-this-item-name-works-fine"]
}
]
}
]
Grateful for a response - even to say it’s not possible.
Cheers
Hi All,
Can someone please point me in the right direction here:
I’m using some TEXT_LIST
position: [0, 1],
width: 2,
height: 1,
title: 'Travel',
id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
type: TYPES.TEXT_LIST,
state: false,
list: [
{
title: 'Time to office',
icon: 'mdi-office-building',
value: '&sensor.home_to_office.attributes.duration'
},]
all working well, times are showing perfectly in my list , however,
I want to change the color of the value in my text list depending on duration.
So let’s say travel time below 45 mins is green, between 46 and 90 is orange , >90 is red.
I’ve played with customStyles but am unable to get it to work.
Appreciate your insights
not really, I’m experimenting with the code.
No problem, I’m in fact trying something similar as I also find the sliders on 1x1 light tiles far to small to be useful.
I’m trying to make the light tile resize when there is a long-press, so it goes from a 1x1 tile to a 3x1 tile. I would make sure the long pressed tile is on top, some CSS should be enough for this.
This way it would work well on a 10" touchscreen, or may horizontally fill a vertical 5" screen.
If I make some progress I’ll try and put a demo for inspiration. 
I really like the pop-up/model idea however, and would be nice for other kinds of tile which need more than simple on/off toggles.
Hey, guys,
I was able to get google calendar event but its just one event any idea how to make a list of next 5-10 events? I have that as Lovelace card but I want it to my TileBoard.
here is what I’m using in Lovelence: https://github.com/ljmerza/calendar-card
As i read here im using TEXT_LIST approach but It’s not so good for the job.
{
position: [0, 0],
width: 2,
title: 'Google Calendar',
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: 'Calendar Event',
icon: 'mdi-numeric-1-box-outline',
value: '&calendar.google_calendar.attributes.message'
},
{
title: 'Calendar Start',
icon: 'mdi-numeric-1-box-outline',
value: '&calendar.google_calendar.attributes.start_time',
}
Hi everyone,
does anybody have an example for HVAC climate? I cannot get all the options for my daikin AC on tileboard using this configuration:
{
position: [0, 2],
width: 1,
id: "climate.daikinap39610",
type: TYPES.CLIMATE,
unit: 'C',
title: 'AC',
subtitle: 'Cucina'
},
this worked for me:
2 Likes
@Roel11: thank you very much! I managed to get back the working tile, however I cannot see the menu to select the hvac_mode:
If I click below the temperature somewhere I get the menu.
make sure you change both main.css and index.html, should work then
What are the changes you recommend on main.css? I don’t see it in the post you linked above.
Thanks 
Sorry, typo , meant main.js :
from set_preset_mode to set_hvac_mode
and preset_mode to hvac_mode
Is anyone using HA behind an NGINX proxy with Tileboard and managed to get the new history graphs feature to work? Tileboard works OK but with the graphs my browser keeps throwing errors in the console when I try and open the graphs, and the graph does not appear, has anyone else had this?
Here’s the error I’m getting
XMLHttpRequest cannot load https://my_ha_proxy_domain_redacted.duckdns.org/api/history/period/2019-11-27T06:03:02.526Z?filter_entity_id=sensor.water_tank due to access control checks.
function loadScript(url) {
var req = new XMLHttpRequest();
req.open('GET', url + '?cache=' + Math.random(), false);
req.onreadystatechange = function(){
if (req.readyState === 4) {
var s = document.createElement('script');
s.appendChild(document.createTextNode(req.responseText));
document.head.appendChild(s);
}
};
req.send(null);
}
Hi, this code seems to have stopped working for me on Firefox and Chrome, I’m getting this error on my browser now:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ config.js:162:6
Is there a workaround / fix for this? Or would it be better to go back to including everything in a single config.js file for now?