Hello. Loving TileBoard! Thank you for creating and sharing the code! I’m using it on Fire HD 8’s with Fully Kiosk. It’s the missing piece in my HA setup. Quick question regarding Garage for anyone that might know…
I’m trying to make a tile that mimic’s Home Assistants garage cover (two arrows and garage icon). I copied the existing cover HTML code and some of the css code along with adding another block called ‘COVER_GARAGE’. Goal is to replace the middle ‘stop’ icon with a garage icon the same size as the other tile icons and remove the ‘stop’ button from doing anything. I was able to get some of it to work. But new to css and stumped on this. Here are my outstanding Items:
- Center garage icon
- Have icon change color when open (like the light / alarm tiles do)
- Background of tile should be translucent a bit when closed (like other tiles shown)
- Tile should be non translucent when in open state
Also, if this gets ironed out, would it be worth putting into the main TileBoard codebase? I imagine others using HA might want something similar for Garages? Of course, I may be going about all of this wrong and there is a better solution 
TileBoard index.html:
<div ng-if="item.type === TYPES.GARAGE_COVER"
class="item-entity-container">
<div class="item-entity">
<div class="item-cover-garage--button -open"
ng-class="{'-disabled': entity.state === 'open' && (!entity.attributes.current_position || entity.attributes.current_position === 100)}"
ng-click="sendCover('open_cover', item, entity)">
<i class="mdi mdi-arrow-up"></i>
</div>
<div class="item-cover-garage--icon">
<i class="mdi"
ng-class="{
'mdi-garage -close': entity.state === 'closed',
'mdi-garage-open': entity.state !== 'closed'
}">
</i>
</div>
<div class="item-cover--button -close"
ng-class="{'-disabled': entity.state === 'closed'}"
ng-click="sendCover('close_cover', item, entity)">
<i class="mdi mdi-arrow-down"></i>
</div>
</div>
</div>
TileBoard JS code from config.js:
{
position: [2,1],
type: TYPES.COVER_GARAGE,
id: "cover.linear_garage",
title: "Garage Door",
icons: {
'Closed': 'mdi-garage',
'open': 'mdi-garage-open',
'opening': 'mdi-garage-open',
'closing': 'mdi-garage-open'
},
states: {
open: 'Open',
closed: 'Closed',
opening: 'Opening',
closing: 'Closing'
},
},
CSS in custom.css
.item-cover-garage {
height: 80px;
line-height: 80px;
top: calc(50% - 45px);
left: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
.item-cover-garage--icon {
width: 34px;
height: 34px;
margin: 3px;
font-size: 60px;
line-height: 80px;
text-align: center;
display: inline-block;
}
.item-cover-garage--button {
width: 34px;
height: 34px;
margin: 3px;
font-size: 26px;
line-height: 34px;
text-align: center;
display: inline-block;
cursor: pointer;
}
.item-cover-garage--button:active {
background: rgba(0, 0, 0, 0.3);
}
.item-cover-garage--button.-disabled {
opacity: 0.5;
pointer-events: none;
}
