You can try doing same with customStyles, this should probably always redraw the tile.
I’m being very late again 
.camera-popup--list {
display: none;
}
.camera-popup--camera {
width: 100%;
}
Thanks man that’s what I needed 
Awesome! That works perfectly. Thanks!
{
position: [2, 1],
type: TYPES.INPUT_SELECT,
id: 'input_select.family_room_thermostat_fan_mode',
title: 'Family Room',
customStyles: function(item, entity){
return {
'background-image': this.states['climate.family_room_thermostat'].attributes.fan_action == 'Idle' ? 'url("/tileboard/images/fan5_off.gif")' : 'url("/tileboard/images/fan5_on.gif")',
};
},
state: function (item, entity) {
return (this.states['climate.family_room_thermostat'].attributes.fan_action);
},
},
Good! I’m glad it works now.
Perhaps a simple question: I want two TileBoards, one for a tablet and one for a smart phone. Do I just make two different index.html and config.js files within the /config/www/TileBoard directory, and modify the second index.html to point at the second config.js to achieve this?
I did this a few days ago. The answer is here: TileBoard - New dashboard for Homeassistant - #2420 by resoai
1 Like
Good afternoon everyone. I am trying to reduce the margins between tiles. I do not need the tiles to occupy 1 full “slot” so i set the height/width to .9. When i do this it puts a rather large margin between the tiles. Is it possible to reduce the margin to something like 1/2px? Any help would be greatly appreciated. Below is an example of several of my tiles and a screenshot of the margins i am getting.
{
position: [0, 0],
//width: .9,
height: .9,
type: TYPES.INPUT_BOOLEAN,
id: 'input_boolean.goodnight_house',
state: false,
title: 'Lets Go To Bed',
icons: {'off': 'mdi-sleep', 'on': 'mdi-toggle-switch-off'}
},
{
position: [1, 2],
//width: .9,
height: .8,
type: TYPES.FAN,
title: 'Living Room Fan',
id: 'fan.living_room_fan',
},
{
position: [0, 1],
title: 'Pantry Light',
//width: .9,
height: .8,
subtitle: '',
id: 'light.pantry_light',
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb-off",
},
},
Hi,
whilst you’re setting the height for the tiles, you’re setting absolution posistions for the tiles, so you’ll also need to change them, so reduce the position: [0,1] to position: [0,0.8] for example.
Hi, looking to adjust the Weather_List tile - does anyone know if it has a tertiary column so to speak.
I’d like to add another column to it (chance of rain on the given day), and would be easiest if the tile had another column to add.
in the example it is:
primary: forecast,
secondary: wind
i’d like to make it something like:
primary: forecast,
secondary: wind
tertiary: percipitation
Many Thanks,
Jason
1 Like
I use TileBoard effectively on a tablet for the last few years. I am now working on a simple smartphone TileBoard and I have one problem remaining. All I want is 2 columns and 5 rows of tiles that are switches. I have to scroll a little bit vertically to get it all to fit. And the issue is margin on the left side. In CONFIG, by setting the menuPosition parameter to MENU_POSITIONS.BOTTOM I can scroll vertically which is what I am after, however there is margin on the left side of the tiles so it pushes the second column off to the right and looks bad. If I set it to MENU_POSITIONS.LEFT, the layout looks great but I can no longer vertically scroll to the last row.
I have my groupMarginCss set to 40px 0px which works well because I get the group titles like I want and the spacing looks good. So I don’t think the problem is here,
I am looking at the page in Chrome and will migrate to Fully Kiosk Browser when I’m done. Basically I’m replacing a “Smart Life” app that we use to control Teckin outlets because I’ve decided I don’t want to rely on cloud devices and I’m flashing those outlets with firmware that gives me local control. If Chrome is the problem or Fully Kiosk is a bad choice for this application let me know.
So I am almost there and hope I’ve given enough information so that you can help.
1 Like
It would be much easier to change tile size for the whole page and make large tiles essentially larger.
Thank you! I will try that now.
Hey @khouse75 do you mind sharing your code? I am interested in what you did with the climate tiles, tried the previous solution it didn’t work. Guess some bug in the code
For the climate tile, I found some animated gifs that I liked and named them the same as their corresponding hvac_action attribute and placed them in /tileboard/images/. i.e. for cooling, cooling.gif and for heating, heating.gif. For idle, I don’t have a gif yet so behind the scenes, it currently fails with 404, which is fine as the error is not displayed in TileBoard. If you use one with a transparent background, your tile color will be visible. My cooling.gif is transparent but heating.gif looked better with a black background in the gif.
I have attached the heating.gif and cooling.gif I’m using. Haven’t figured out what I want to use for idle yet.
{
position: [2, 0],
id: "climate.family_room_thermostat",
title: "Family HVAC",
type: TYPES.CLIMATE,
customStyles: function(item, entity){
return {
'background-image': 'url("/tileboard/images/' + entity.attributes.hvac_action + '.gif")',
};
},
useHvacMode: true,
unit: ' \xB0F',
state: function (item, entity)
{
return entity.attributes.hvac_action + " / " + entity.attributes.current_temperature + ' \xB0F';
}
},
For the fan mode tile, I created an input_select that contains all the fan modes that my climate entity contains.
input_select.yaml
family_room_thermostat_fan:
name: Family Room Thermostat Fan Mode
options:
- On Low
- Auto Low
For my INPUT_SELECT tile, I have:
{
position: [3, 0],
type: TYPES.INPUT_SELECT,
id: 'input_select.family_room_thermostat_fan',
title: 'Family Room',
subtitle: 'HVAC Fan mode',
customStyles: function(item, entity){
return {
'background-image': this.states['climate.family_room_thermostat'].attributes.fan_action == 'Idle' ? 'url("/tileboard/images/fan5_off.gif")' : 'url("/tileboard/images/fan5_on.gif")',
};
},
state: function (item, entity) {
return ('Status: ' + this.states['climate.family_room_thermostat'].attributes.fan_action);
},
},
There might be an easier way to synchronize the input_select and the fan_mode but I haven’t had time to investigate further. For now, I have an automation that changes the climate fan mode when the input_select changes:
- id: '1593561185701'
alias: Thermostat Fan Mode Family Room
description: ''
trigger:
- entity_id: input_select.family_room_thermostat_fan
platform: state
condition:
- condition: template
value_template: '{{ trigger.to_state.state != trigger.from_state.state }}'
action:
- service: climate.set_fan_mode
data_template:
entity_id: climate.family_room_thermostat
fan_mode: '{{states.input_select.family_room_thermostat_fan.state}}'
And another automation that changes the input_select when the climate fan_mode is changed:
- id: '1593561185743'
alias: Thermostat Fan Mode Master Bedroom TB
description: ''
trigger:
- entity_id: climate.master_bedroom_thermostat
platform: state
condition:
- condition: template
value_template: '{{ trigger.to_state.attributes.fan_mode != trigger.from_state.attributes.fan_mode}}'
action:
- service: input_select.select_option
data_template:
entity_id: input_select.master_bedroom_thermostat_fan
option: '{{states.climate.master_bedroom_thermostat.attributes.fan_mode }}'
Finally, because I sometimes lose entity states after a restart (HA bug, I’m guessing), I have an automation that synchronizes the input_select fan mode with the climate fan mode, on HA start:
- id: '1593563113034'
alias: Thermostat Startup
description: ''
trigger:
- event: start
platform: homeassistant
condition: []
action:
- service: input_select.select_option
data_template:
entity_id: input_select.family_room_thermostat_fan
option: '{{ states.climate.family_room_thermostat.attributes.fan_mode }}'
The smoothest moving fan gif I could find is actually a boat propeller:
Thanks for the mobile configuration reference. I have to ask another simplistic question because working on it for 20 minutes I didn’t figure it out. How do I make the font size on the tiles bigger?
Thanks
You’ll want to use custom.css and classes: Since it depends upon which element you want to change text size, we’ll need to know which type of tile you want to change and which element of that tile you want to change the text size. There are several examples in this thread. Search for classes: and custom.css for various examples.
Thanks. Now that I know what I am looking for, I’ll hunt it down.