My Tileboard has three pages - one for alarm, one for light and one for music. When the alarm is armed, I would like the alarm page to be the default and the alarm is disarmed, I would like the light page to be default.
Can this be done?
Thx
This is how to do a custom tile:
{
position: [0, 0],
type: TYPES.CUSTOM,
title: 'Screen Off',
id: { },
icon: 'mdi-monitor',
action: function(item, entity) {
fully.startScreensaver();
}
},
You’ll need to add a JavaScript function in the action. You can use the state and the Api as here:
action: function(item, entity) { // toggle mute
Api.send({
type: "call_service",
domain: 'media_player',
service: "volume_mute",
service_data: {
entity_id: item.id,
is_volume_muted: !entity.attributes.is_volume_muted
}
});
}
Hi all,
I tried to use a the type DIMMER_SWITCH which wasn’t mentioned once in this thread.
{
position: [0, 2.5],
title: 'Office',
id: 'light.shelly_shsw_1_3284e8',
type: TYPES.DIMMER_SWITCH,
state: false,
icons: {
on: "mdi-floor-lamp",
off: "mdi-floor-lamp",
},
actionPlus: {
type: "call_service",
domain: "script",
service: "toggle",
service_data: {
entity_id: "script.office_decrease"
}
}
}
It seems not to work or I haven’t understood how this works :). Could someone give me a hint?
Thanks
Can you toggle a script? It might need to be turn_on. Also, you might need to write a function around your request, as in the above example.
You can toggle a script. I tried and it works perfectly from HA Services tab.
I would like to toggle my script either using the plus/minus on TYPES.LIGHT or TYPES.DIMMER_SWITCH.
I don’t really care which one I had to use. I just want it work :). Hope someone can give me an example or even a hint.
Thanks
hi guys,
i am PicApport to serve photos and display through the web (locally).
It also can be embeded via iFrame and I have successfully added them to the tile.
I am wondering if it is possible to use the same iFrame as screensaver?
Thanks
Hi there
I’m pretty new to this world, so sorry if this question is “too simple”.
I use HA on my iPhone, and I have set up Lovelace.
However, now I have been working with Tileboard, and set up a new board.
But how to I make this my default entry, when opening the App on my phone?
I’m using duckdns to access the HA-setup.
Right now, when I use the app, my normal Lovelace-interface is showing.
Can someone help?
Thanks
hi, how do you get a full screen like that? i love minimal margin,dont like wasted space in a small 10" tablet.
thanks
hi there
do you mind sharing your config,
how do you get the margin so minimal, on mine i have lots of wasted spaces around the edges
Thanks
Hi,
Newbie when it comes to javascript and trying to get my head around triggering events in combination with tiles. What I would like to achieve is to trigger an popup iframe tile.
As far I´ve come is that I need a tile outside of config, so added the following just above the config var:
var iframe = {
position: [2, 0],
width: 3,
height: 3,
title: 'Test Iframe',
type: TYPES.POPUP_IFRAME,
id: {}, // using empty object for an unknown id
refresh: 10000, // 10 seconds
url: "http://www.xxx.com"
}
But completely lost when it comes to the event definition in config.js…Anyone that could give me a hint? 
How do you restrict the screensaver to a single image rather than going through a few of them?
screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
timeout: 20, // after 5 mins of inactive
//slidesTimeout: 5, // 10s for one slide
styles: { fontSize: '40px' },
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
slides: [
{ bg: 'images/bg1.jpeg' },
{
bg: 'images/bg2.png',
rightTop: [ // put text to the 2nd slide
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' }
]
},
Just remove the slides you don´t want…I.e:
slides: [
{
bg: 'images/bg5.jpg',
rightTop: [ // put text to the 2nd slide
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: '<b>Cedervall</b>',
styles: { fontSize: '40px' }
}
]
},
]
},
Would be a single slide…
Anyone managed to find a solution to trigger a message from home assistant with data in the message…?
Like:
message: "The status of the lamp is {{ switch.screen_turned_on.state }}"...
sends the text string directly. Would like to actually get the state value of device…
Would it be possible to have some sort of countdown timer (in seconds) on tileboard? I’d quite like to add a visual 10 second timer that is started by clicking a tile.
Anyone managed to find a solution to trigger a message from home assistant with data in the message…?
If you look at the example tiles the weather tile shows an example of this being done 
Hey everyone
First of all I love TileBoard and started using it on my 7" Raspi display for the wall.
But I had the problem that it is not possible to symlink the config.js or a optional secrets.js due to restrictions of the built-in Home-Assistant web server, when using TileBoard in the Home-Assistant www/ directory. Since I’ve added TileBoard as a git-submodule in my HA-Config repository, symlinking was the only chance to have my config in the repository.
Then I found a security issue with my configuration… Of course it is all Javascript and since my Home-Assistant instance is callable from the www, it was also possibly to call TileBoard directly, including the secrets.js file… But it should only be available for internal use cases and not be as publicly accessible as my Home Assistant.
tldr;
So long story short… I’ve created a simple Docker Container for TileBoard just serving the files with a Python3 web server
So you can decide if you want to expose it with Traefik (and even an own domain and https) to the web or not.
2 Likes
I did this by setting up a timer in HA (Countdown kitchen timer - #15 by Flipso) and then displaying it. I press a tile in Tileboard to activate the HA automation. Once it is active another tile becomes visible in Tileboard and shows the timer. When tmer is finished lights flash and the tile is hidden again. My child uses this to time how long until their cup of tea is ready.
As an aside before Google broke the integration with HA I was using a similar approach to display the current status of my Google timers in TielBoard - which was really useful.)
{
position: [0, 3], // [x, y]
width: 1,
type: TYPES.SENSOR,
title: 'Tea Timer running',
id: 'counter.timer_counter',
customStyles: {'color': '#d469f4','font-weight':'900'},
state: false,
hidden:function(item, entity){
if (entity.state==240) {return true}
else {return false}
},
filter: function (value) {
var minutes = Math.floor(value / 60);
var seconds = value - minutes * 60;
var final;
if(seconds<=9){ final = minutes +':0'+seconds;}
else{ final = minutes +':'+seconds;}
return final;
}
1 Like
This looks to be exactly what I’m after. None of my timers are currently longer than 1 minute so I should be able to simplify things also. Thanks very much.
@kwetiaw You can set the style directly in the Header configuration.
Or you could add your own custom.css, overwriting the sizes.
Inspect the classes header and pages-menu in your browser for more details on the current size/pading/margin values
@fbrinker thanks for your help. i thought it would be as easy as changing the settings inside config.js.
I dont have experience at creating CSS
Cheers!