Hi Comunity,
I just want to share my mini-project. I integrated a weather forecasts from a specific page (czech meteo page) to a home assistant dashboard. It auto-updates approximately as new data come.
Known bugs: a first day of the month till 6AM does not load sometimes - I can live with that.
Code of html file stored on home assistant config/www/chmi4.html:
<!DOCTYPE html>
<html>
<head>
<title>CHMI Brno-Slatina</title>
</head>
<body>
<script>
var date_formatted = "xxx";
var date_formatted_example = "2020101406";
var currentDate = new Date(),
currentDay = currentDate.getDate(), // < 10
//? '0' + currentDate.getDate()
//: currentDate.getDate(), //adding zero is not actually needed
currentMonth = currentDate.getMonth() < 9
? '0' + (currentDate.getMonth() + 1)
: (currentDate.getMonth() + 1),
currentHour = currentDate.getHours(),
format_hour = currentDate.getHours()<6
? '18' : currentDate.getHours()<12 ? '00'
: currentDate.getHours()<18
? '06' : '12',
format_day = format_hour=='18' ? currentDay-1 : currentDay, //if hour 18 take previous day - yes when the month flips it will not work
format_day_null = format_day < 10 ? '0' + format_day : format_day;
date_formatted = ''.concat(currentDate.getFullYear() , currentMonth, format_day_null, format_hour);
//document.write('<br> format day:' + format_day+ '<br>');
//document.write('<br> format day null:' + format_day_null+ '<br>');
//document.write('<img src="http://portal.chmi.cz/files/portal/docs/meteo/ov/aladin/results/public/meteogramy/data/'+ date_formatted +'/40.png" alt="Brno" width="800"');
document.write('<div style="width:100%;"><img src="http://portal.chmi.cz/files/portal/docs/meteo/ov/aladin/results/public/meteogramy/data/'+ date_formatted +'/40.png" alt="Brno" style="float:left;width:100%;height:100%;object-fit:contain;"></div>');
document.write('<br> date formatted = ' + date_formatted);
</script>
</body>
</html>
<!--
zisti kedy zverejnuju nove meteogramy - link je 00 06 12 18 na konci datumoveho kodu ale 12 nevyjde o 12h ale neskor (15:23 este nie)
docasny fix - posunute cele o 6 hodin.
daj nejaku vatu - kvoli zimnemu/letnemu casu - Aladin je referencovany k UTC
original:
format_hour = currentDate.getHours()<6
? '00' : currentDate.getHours()<12 ? '06'
: currentDate.getHours()<18
? '12' : '18';
integracia:
https://www.home-assistant.io/lovelace/iframe/
-->
Lovelace card:
type: iframe
url: /local/chmi4.html
aspect_ratio: 100%