Yes! Thank you! This helps a lot!
Hi at all, in standard dashbord HA i’m using Mini Graph Card [Lovelace: mini graph card]. Please, someone could point me to the right direction on how to open this type of popup insted of standard history graph that comes to tileboard?
thanks a lot.
Hi All!
I’m facing some issues with history not displaying due to a CORS policy but couldn’t an answer through the previous posts. See image.
The error message is :
Access to XMLHttpRequest at 'http://192.168.20.6:8123/api/history/period/2020-01-18T11:09:09.991Z?end_time=2020-01-23T11:09:09.991Z&filter_entity_id=sensor.temperature_house' from origin 'http://192.168.20.99' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The weird thing is that the same request + bearer auth works just fine from the terminal on the same device as TileBoard runs on:
curl -H 'Accept: application/json' -H "Authorization: Bearer REDACTED" http://192.168.20.6:8123/api/history/period/2020-01-23T09:00:54.287Z?end_time=2020-01-23T10:56:54.287Z&filter_entity_id=sensor.temperature_house
What am I missing ?
Well since nobody shared any answers to my question, I thought I’ll partially answer it myself in case anyone else needs it, thanks to this post . Not ideal since it changes the opacity of the map as well. How would I format this code (if at all possible) to substitute the bg picture instead of the opacity? Tried and failed.
BTW I keep forgetting to thank resoai for his awesome work!
customStyles: function(item, entity){
return {
'opacity': this.states['input_boolean.xxx'].state === 'off' ? '0.5' : '1',
}
You are making request from *.99 IP while HA host is at *.6 thus it’s blocked by CORS.
You can whitelist specific hosts to be allowed with HTTP - Home Assistant
2 Likes
Hi All, @resoai
Do you think it will possible to integrate the following grid editing mode to Tileboard?
Surely it will take it to the next level:
http://hootsuite.github.io/grid/
Thanks!
Nope. First of all TileBoard would need to be able to write data which is not possible with it being a single HTML page and a separate visual editing would need to be introduced since a lot of us are using loops and anonymous functions which will not work. TileBoard was never meant to do that.
1 Like
BTW, just for an idea. Anonymous function in the ‘state’ option with MaterialDesign webfont and customization with ‘classes’. Used for indicate HA Thermostat and Scheduler enabled on smart socket:
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;
}
1 Like
Hi! I need to disable the “long press action = history” for 3 of my tiles???
Someone could help me?
Thanks
try
secondaryAction: function() {},
thanks man! it works!!!
Is it possible to use an automation to cause a popup for a set amount of time?
I’ve created a door entry (TYPES.DOOR_ENTRY in TileBoard) - but would like for it to popup automatically if someone pushes my door bell (SWITCH.DOORBELL in HA), and then close again after a minute or two if no action.
Define doorEntryTimeout: XXX in CONFIG. Doorentry will close automatically in XXX seconds.
Great - thanks - any idea how to get it to automatically pop up though, when a button (switch) is pushed from HA?
Found your post at 424 which gives an example, tried to implement it as is - but it doesn’t work. If I use the defined variable DOORENTRY_TILE in the TileBoard layout - Tileboard just gives errors
Not sure if I’m using the variable incorrectly. if I hover over it in VSCode, it shows the definitiion:
fractionSize: 2,
},
}, /* END PREVIOUS TILE */
{
DOORENTRY_TILE
},
Further to the above, if I don’t use the above variable on the tileboard, is it still able fire from the event? (because it doesn’t seem to be working)
events: [
{
command: 'open_doorentry',
action: function(eventData) {
this.$scope.openDoorEntry(DOORENTRY_TILE, DOORENTRY_TILE.id);
}
}
],
and in HA
action:
- event: tileboard
event_data:
command: open_doorentry
Obviously DOORENTRY_TILE needs to define the tile.
It is defined as per you previous posts, above CONFIG =
var DOORENTRY_TILE = {
position: [0, 2],
type: TYPES.DOOR_ENTRY,
id: {},
icon: 'mdi-door',
title: 'Entrance Door',
state: false,
layout: {
camera: {
type: TYPES.CAMERA,
id: 'camera.entrance_door_cam_low_def',
refresh: 1500,
bgSize: 'contain'
},
page: {},
tiles: []
}
};
Defition of tile already has brackets { … }, so remove those from CONFIG.