The simplest thing would probably be to override the theme for that tile with theme:
I’m sorry guys but due to recent changes in my life I’m unable to spend much time on TileBoard. I’ll be happy to review and accept pull requests from the community and I’ve also opened wiki on GitHub so anyone could suggest an edit.
1 Like
I finally got it to work by removing !important in the themes.css file, although that will probabably get overwritten on an update. Here is what it looks like:
The tile code:
{
position: [0, 4],
type: TYPES.SENSOR,
title: 'Work',
id: 'sensor.to_work',
value: '&sensor.to_work.state',
state: false,
filter: function (value) {
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(0) : value;
},
customStyles: function(item, entity){
var a = entity.state;
var c = 'white';
if (a >= 35 && a < 40 ) { bc = 'rgba(255,255,0,0.9)', c = 'rgba(0,0,0,1)'};
if (a >= 40) { bc = 'rgba(255,0,0,0.9)', c = 'rgba(255,255,255,1)' };
return {
'backgroundColor': bc,
'color': c
}
},
}
1 Like
That is looking very nice. You don’t mind sharing?
Hi everyone,
After the last upgrade of home-assistant I cannot see anymore the mode control for climate entities: there’s no more the button to select operation mode such as cool, warm, auto, dehumidifier, etc.
Anybody is experiencing this?
thanks!
I updated TileBoard a while ago and ever since my DOORENTRY camera has not displayed does anybody know why? Maybe a breaking change?
I’m trying to set the title of a tile to show the time until next activity. But, if hold_state=on and hold_until=null, i want it to return “N/A - Hold”.
I’m able to get this function to work, where if hold_until=null it will return N/A - Hold. But I want it to evaluate two variables to get the logic. ANything i try with the second variable results in errors. What’s the best way to get this to work while evaluation both hold_state and hold_until?
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_until = "null" ) { return 'N/A - Hold' } else return timeAgo(start);
},
What version did you upgrade from/to of HomeAssistant? The climate module went through some pretty drastic changes around v0.95 so if you were on an older version, there may have been some issues with the module in HA itself and not anything with TileBoard
Yea, likely a HA issue and not TileBoard.
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.