Habpanel on iPad iOS 9.5

(Remo) #1

Display on iPad mini (iOS 9.5) does not work porperly. I have issues with openweathermap display (OpenWeatherMap widget for HABPanel).
It works on all other devices (Macbook, iPad Pro, iPad mini 4, iPhone XS). Is there a limitation for old devices ?

0 Likes

OpenWeatherMap widget for HABPanel
(Remo) #2

I fixed it using a template instead the widget

<!-- 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: 2em;
 		}
  	.owm-row-current {
  		margin: 1em 0em 2em;
 		}
   	.owm-row-forecast {
  		margin-bottom: 1em;
 		}
}
</style>

<div id="container">
  <div class="row owm-row-current">
    <div class="col-sm-4">
      <h2 class="text-left owm-to-upper">{{itemValue('Weather_OWM_Condition')}}</h2>   
    </div>
  	<div class="col-sm-3">
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId')}} pull-center" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_current == NULL) ? '10em' : config.icon_size_current + 'em' }"></i>
    </div>
	  <div class = "col-sm-5 text-right">
      <h2>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temperature').split(' ')[0]}} {{itemValue('Weather_OWM_Temperature').split(' ')[1]}}</h2>
      <h5><img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/humidity.png"/> {{itemValue('Weather_OWM_Humidity')}}</h5>
      <h5><img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/wind.png"/> {{'%.1f' | sprintf:itemValue('Weather_OWM_Wind_Speed').split(' ')[0]}} {{itemValue('Weather_OWM_Wind_Speed').split(' ')[1]}}</h5>
      <h5>{{itemValue('Weather_OWM_ObservationTime') | date: 'HH:mm'}}</h5>
   	</div>
  </div>
	<div class="row owm-row-forecast">
		<div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time0') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId0')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition0')}}</h5> -->
      <h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp0').split(' ')[0]}} {{itemValue('Weather_OWM_Temp0').split(' ')[1]}}</b></h6>
    </div>
    <div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time1') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId1')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition1')}}</h5> -->
			<h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp1').split(' ')[0]}} {{itemValue('Weather_OWM_Temp1').split(' ')[1]}}</b></h6>
    </div>
    <div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time2') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId2')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition2')}}</h5> -->
      <h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp2').split(' ')[0]}} {{itemValue('Weather_OWM_Temp2').split(' ')[1]}}</b></h6>
    </div>
    <div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time3') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId3')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition3')}}</h5> -->
      <h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp3').split(' ')[0]}} {{itemValue('Weather_OWM_Temp3').split(' ')[1]}}</b></h6>
    </div>
	</div>
</div>
0 Likes