well, I feel like I am close, but I donât know css at all. The goal is the pic, or close to it
Today
max/low {space} icon {space} summary
Tomorrow
max/low {space} icon {space} summary
Day 3 (friendly name)
max/low {space} icon {space} summary
etc. But this hopefully would be in one widget so it can take up less space. Right now the best I could do is this
(The today is me trying to add the summary)
This is the post I took the three files from. Share your HADashboard setups
And here are my three files:
base_day_forecast.css
.widget-base_day_forecast-{{id}} {
position: relative;
}
.widget-base_day_forecast-{{id}} .title {
position: absolute;
top: 5px;
width: 100%;
}
.widget-base_day_forecast-{{id}} .title2 {
position: absolute;
top: 23px;
width: 100%;
}
.widget-base_day_forecast-{{id}} .iconcontainer.icon {
position: absolute;
bottom: 25%;
width: 100%;
}
h1.title.left-title{
text-align:left;
box-sizing:border-box;
padding-left: 15px;
top: 17px;
}
h2.value.left-value{
box-sizing: border-box;
padding-left: 15px;
font-size: 125% !important;
top: 35px !important;
bottom: auto;
position: absolute;
left: 0;
}
.icon.right-icon{
text-align:right;
padding-right:15px;
box-sizing:border-box;
}
base_day_forecast.html
<h1 class="title left-title" data-bind="text: title"></h1>
<h2 class="iconcontainer icon right-icon" data-bind="attr:{style: icon_style}"><i data-bind="attr: {class: icon}"></i></h2>
<div class="valueunit" style=""><h2 class="value left-value" data-bind="html: value" style="color: #fff;font-size: 100%;"></h2></div>
and finally
base_day_forecast.js
function base_day_forecast(widget_id, url, skin, parameters)
{
self = this;
self.widget_id = widget_id;
self.parameters = parameters;
if ("monitored_entity" in self.parameters)
{
entity = self.parameters.monitored_entity
}
else
{
entity = self.parameters.entity
}
var callbacks = [];
self.OnStateAvailable = OnStateAvailable;
self.OnStateUpdate = OnStateUpdate;
var monitored_entities =
[
{"entity": parameters.entity, "initial": self.OnStateAvailable, "update": self.OnStateUpdate}
];
WidgetBase.call(self, widget_id, url, skin, parameters, monitored_entities, callbacks)
function OnStateAvailable(self, state)
{
set_view(self,state);
}
function OnStateUpdate(self, state)
{
set_view(self,state);
}
function set_view(self,state){
self.icon = 'mdi ' + state.attributes.icon.replace(':','-');
self.title = state.attributes.friendly_name;
self.value = state.state;
self.set_field(self, "icon", self.icon)
self.set_field(self, "value", self.value)
self.set_field(self, "title", self.title)
}
}
