Aaah now I understand! But is it the component that needs to be updated to reflect the new architecture?
Yes, make sure your climate component gets updated on the HA side of the house to be able to support the architecture changes around climate. Then try using the Lovelace climate card and make sure that all works as anticipated. If you are using a custom climate component then you may need to update it manually.
If you have more issue with this issue, then search the community or post something about your specific climate component on the general community threads as it’s likely not a TileBoard issue. Good luck!
Working syntax, for those following along at home.
title: function (item, entity) {
var start = entity.attributes.next_activity_start;
var hold_state = entity.attributes.hold_state;
var hold_until = entity.attributes.hold_until;
if ( hold_state == "on" && hold_until === null ) { return 'N/A - Hold'; }
return timeAgo(start);
},
So the completed TYPES.CLIMATE should look like this?
<div ng-if="item.type === TYPES.CLIMATE"
class="item-entity-container">
<div>
<div class="item-button -center-right"
ng-if="entity.attributes.temperature && entity.state !== 'off'"
ng-click="increaseClimateTemp($event, item, entity)">
<i class="mdi mdi-plus"></i>
</div>
<div class="item-button -bottom-right"
ng-if="entity.attributes.temperature && entity.state !== 'off'"
ng-click="decreaseClimateTemp($event, item, entity)">
<i class="mdi mdi-minus"></i>
</div>
</div>
<div class="item-climate">
<div class="item-climate--target">
<span ng-bind="climateTarget(item, entity)"></span>
<span ng-if="(_unit = entityUnit(item, entity))"
class="item-climate--target--unit" ng-bind="_unit"></span>
</div>
<div class="item-climate--mode" ng-if="entity.state"
ng-click="openSelect(item)">
<span ng-bind="entity.state"></span>
</div>
</div>
<div ng-if="selectOpened(item)" class="item-select"
ng-style="itemSelectStyles(entity, entity.attributes.hvac_modes)">
<div class="item-select--option"
ng-repeat="option in entity.attributes.preset_modes track by $index"
ng-class="{'-active': option === entity.state}"
ng-click="setClimateOption($event, item, entity, option)">
<span ng-bind="option"></span>
</div>
</div>
</div>
Has anyone managed to make Tileboard switch layouts depending on device orientation?
I’d quite like to have seperate portrait and landscape layouts and I’m sure with some JS in the right place this may be possible.
I have managed to get the Climate Tile working after upgrading to HA 0.98.2
I updated index.html with the following for the Climate tile:
<div class="item-climate">
<div class="item-climate--target">
<span ng-bind="climateTarget(item, entity)"></span>
<span ng-if="(_unit = entityUnit(item, entity))"
class="item-climate--target--unit" ng-bind="_unit"></span>
</div>
<div class="item-climate--mode" ng-if="entity.attributes.hvac_modes"
ng-click="openSelect(item)">
<span ng-bind="entity.state"></span>
</div>
</div>
<div ng-if="selectOpened(item)" class="item-select"
ng-style="itemSelectStyles(entity, entity.attributes.hvac_modes)">
<div class="item-select--option"
ng-repeat="option in entity.attributes.hvac_modes track by $index"
ng-class="{'-active': option === entity.state}"
ng-click="setClimateOption($event, item, entity, option)">
<span ng-bind="option"></span>
</div>
</div>
And the main.js with the following:
$scope.setClimateOption = function ($event, item, entity, option) {
$event.preventDefault();
$event.stopPropagation();
sendItemData(item, {
type: "call_service",
domain: "climate",
service: "set_hvac_mode",
service_data: {
entity_id: item.id,
hvac_mode: option
}
});
$scope.closeActiveSelect();
return false;
};
4 Likes
This works great, thanks! I can create a PR for this on Github, if you’d like?
1 Like
I just wanted to say thankyou for producing this component, I enjoy using it!
Has anyone been able to display an icon and a sensor value on the same tile? (e.g. temperature value with a little thermometer icon) If so could they share their config please?
That would be great but this update will only work with HA 0.98 onwards due to the changes in the Climate architecture.
I went ahead and opened a PR for it. It seems to me that keeping pace with the current version makes more sense than leaving it “broken” for compatibility. Also, the changes were in 0.96, not 0.98, so it’s been a couple months already.
@inxaos @athua, this PR needs a bit more logic added to it before it should be implemented in the TileBoard code. I placed some comments on GitHub.
Not exactly what you are looking for, but I’ve done this:
Here’s the code.
{
position: [2.1, 1.5],
width: 0.5,
height: 0.5,
classes: ['-temp'],
title: '',
id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
type: TYPES.TEXT_LIST,
state: 'Crawl Space',
list: [
{
icon: 'mdi-thermometer',
value: '&sensor.crawl_space_temp.state' + ' °F',
},
{
icon: 'mdi-water',
value: '&sensor.crawl_space_humidity.state' + ' %'
}
]
},
Then in custom.css:
.-temp .item-entity--value {
font-size: 16px;
}
.-temp .item-state {
font-size: 10px;
padding: 1px;
right: 0px;
width: 97%;
border-radius: 8px 8px 0px 0px;
}
.-temp .item-list--item {
margin-left: 2px;
}
.-temp .item-list--name, .-temp .item-list--value {
display: contents;
}
.-temp .item-list--name .mdi {
margin-right: 0px;
}
.-temp .item-entity-container {
margin-top: 20px;
}
2 Likes
thankyou, that’s really nice!
1 Like
Hello guys,
after a few minutes turning off my iPad, my HA banning my IP address because of wrong token… My ha is exposed to the internet, so setting a static token is not recommended ?!
Any ideas ?
Thanks
Hello,
I’m trying show a placeholder image in the tile when an entity is unavailable, has anyone done this?
Hi @resoai
What is this used for? Does it auto find the correct Index file?
Also where in config file should it be place please.
Thanks for help
Is it possible to run this on an external webserver ? As auth not working and I get error 403 after a few minutes…
The code you quoted should allow you to use multiple layout files for different devices.
I’m currently trying something similar with seperate portrait and landscape views but so far it only adjusts when Tileboard is closed and reopened. I’m still learning JS
Hi @HypnoToad. Thanks for your reply. I am still learning also. At the moment I have setup different Config and Index.html files and it works fine. Would be nice to have one lot of fine and auto adjust. Cheers