OpenWeatherMap widget for HABPanel

Apps & Services HABPanel
,
64

Mine looks like this:

grafik
grafik541×934 216 KB

The layout did not fit my screen either, so I arranged the code within habpanel editor.

You don’t see it, but the icons are even animated :slightly_smiling_face:
see here:

My habpanel code for the upper part of th weather widget:
Please note: I habe changed the image syntax to match the animated icons - the original syntax is included in the commented lines (

<!-- For more information goto: https://github.com/BasvanH/habpanel-widget-openweathermap -->

<link rel="stylesheet" type="text/css" href="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/weather-icons-master/css/weather-icons.css">

<style>
@media (min-width: 992px) {
.col-sm-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-sm-border + .col-sm-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
  .owm-to-upper:first-letter {
text-transform: uppercase;
}
  .owm-condition {
  height: 1em;
 }
  .owm-row-current {
  margin: 1em 0em 2em;
 }
   .owm-row-forecast {
  margin-bottom: 0em;
 }
}
</style>

<div id="container">
  <div class="row owm-row-current">
  <div class="col-xs-4">
  <h3 class="text-left owm-to-upper">{{itemValue('W_OWM_Condition')}}</h3>
  <h5 class="text-left owm-to-upper">{{itemValue('W_OWM_ObservationTime') | date: 'HH:mm'}}</h5>
</div>
  <div class="col-xs-4">
  <img style="filter: invert(72%) sepia(79%) saturate(447%) hue-rotate(29deg) brightness(94%) contrast(87%);-webkit-filter: invert(72%) sepia(79%) saturate(447%) hue-rotate(29deg) brightness(94%) contrast(87%);" src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue('W_OWM_ConditionId_Form')}}"></img>
<!--       <i class="wi wi-owm-{{itemValue('W_OWM_ConditionId')}}" ng-style="{ 'color' : (config.icon_color_current == NULL) ? primary-color : config.icon_color_current, 'font-size' : (config.icon_size_current == NULL) ? '5em' : config.icon_size_current + 'em' }"></i> -->
   </div>
  <div class="col-xs-4">
<h4 class="text-right"> {{'%.1f' | sprintf:itemValue('W_OWM_Temperature').split(' ')[0]}} {{itemValue('W_OWM_Temperature').split(' ')[1]}}</h4>
  <h5 class="text-right"> <img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/humidity.png"/> {{itemValue('W_OWM_Humidity')}}</h5>
  <h5 class="text-right owm-to-upper"> <img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/wind.png"/> {{'%.1f' | sprintf:itemValue('W_OWM_Wind_Speed').split(' ')[0]}} {{itemValue('W_OWM_Wind_Speed').split(' ')[1]}}</h5>
   </div>
  </div>
2 Likes