Weather on the wall, or my wBox :)

[Smarmen]

Hi
Some time ago my weather server had definitively death. To replace my wBox, I decided to buy the cheapest 8'' tablet running on Windows 10 to be able to project current weather conditions continuously.
I use WH 2080 personal weather station, had no problems to install Cumulus MX, connect the station and transfer the data and hang my tablet on the wall using simple holders. I decided to turn off the options of screen. In browser I turned off the updates option because they evoke restart after the installation and I update both manually from time to time.
As I considered that it’s easier to interpret numbers than gauges concerning current weather conditions and this is why I decided to build a brand new website that would answer my needs, apart from HTML I used JavaScript. Thanks to that the data are being read and actualized every <#realtimeinterval> interval (eg. 20 sec.) causing no need to refresh the whole website!
Web’s size corresponds to the tablet or monitor screen resolution (eg. 800 x 1280 px). I’ve hidden the scroll bar purposefully! Web browser must be support with JavaScript and work in full screen mode – from Android system I’m using Dolphin Express web browser, and Firefox from Windows. As displays I used to good effect different tablets, large monitors 22''' and even my old HTC HD2
The solution which I present is designed for holders weather stations - not for all users, because the screen does not have labels! I gave up with any descriptions with few exceptions only, web’s structure is simplified at the most although it may not be simple The implementation requires a little of knowledge but a careful analysis of my website to customize it to your needs.
The data is read by the library’s wBox.js (and other) from the two files: realtime.txt and realmore.txt, code below

Code: Select all

<#pressYL> <#TpressYL> <#pressYH> <#TpressYH> <#pressTL> <#TpressTL> <#pressTH>
<#TpressTH> <#WindRoseData> <#realtimeinterval>

Documentation: http://andreovia.pl/weather/doc/wBox_EN.pdf


example, position, resolution (px), WindCompass
http://andreovia.pl/weather/wBoxH.html, horizontal, 800 x 1280, normal
http://andreovia.pl/weather/wBoxHr.html, horizontal, 800 x 1280, reverse
http://andreovia.pl/weather/wBoxHD2.html, horizontal, 980 x 1560, normal
http://andreovia.pl/weather/wBoxHD2r.html, horizontal, 980 x 1560, reverse
http://andreovia.pl/weather/wBoxV.html, vertical, 1680 x 1050, normal
http://andreovia.pl/weather/wBoxVr.html, vertical, 1680 x 1050, reverse
http://andreovia.pl/weather/wBoxVD2.html, vertical, 1560 x 980, normal
http://andreovia.pl/weather/wBoxVD2r.html, vertical, 1560 x 980, reverse

And what do you think about it?

[ronwright418]

Very nice

[uncle_bob]

That looks great!

[Mapantz]

Yeah - I like!
Can this be used like a mobile site as well?

[Smarmen]

I dont know if I understand correctly. Can you just look at my own example?

[Mapantz]

I think I've answered my own question..

Screenshot_2017-07-27-17-07-16.png

Can you choose the update interval? This is something I'd love to use, as I use my phone a lot.

[Smarmen]

OK, have you read wBox documentation http://andreovia.pl/weather/doc/wBox_EN.pdf ?

The solution which I present is designed for holders weather stations - not for all users, because the screen does not have labels! I gave up with any descriptions with few exceptions only, web’s structure is simplified at the most although it may not be simple The implementation requires a little of knowledge but a careful analysis of my website to customize it to your needs.

If you still want to try I can send the file data, then you will see what you can do

[Smarmen]

Mówisz i masz [PL]

http://andreovia.pl/weather/doc/wBox.zip

And remember - be very careful!

Tips & Tricks
Some SETTINGS yrnoSettings.php

Code: Select all

$yrnoID      = 'Poland/Swiety_Krzyz/Jędrzejów~770157';         // adres do generowania pliku XML
$iconsOwn   = false;                              // użyj oryginalnych ikon YR.NO
$yourArea   = 'Jędrzejów';                           // miejscowość
$organ      = 'Andreovia.pl';                        // nazwa PWS
$latitude   = '50.63945';                           // współrzędne geograficzne
$longitude   = '20.30454';                           // współrzędne geograficzne
$charset   = 'UTF-8';                              // character set used for this website/script
$lower      = false;                           // konwertuj wszystkie teksty na duże litery
$tempSimple   = false;                           // false = colorfull temps;  true = red blue temps
#----------Jednostki Miary-----------------------------------------------------
$uomTemp   = '°C';                  // or = °F
$uomRain   = ' mm';                  // or = in
$uomWind    = ' km/h';               // or = kts, m/s, mph
$uomBaro   = ' hPa';                  // or = hPa, mb, inHg
$uomSnow   = ' cm';                  // or = cm, in
$uomDistance   = ' km';               // or = km, mi
#----------Data i Czas---------------------------------------------------------
$timeFormat      = 'd.m.Y H:i';         // or = M j Y g:i a  (March 31 2012 2:03 pm)
$timeOnlyFormat   = 'H:i';            // or = g:i a  (2:03 pm)
$hourOnlyFormat   = 'H';               // or = ga  (2pm)
$dateOnlyFormat   = 'd.m.Y';            // or = M j Y  (March 3 2013)
$dateLongFormat   = 'l d F Y';            // or = l M j Y  (Thursday January 3 2013)
$timezone      = 'Europe/Brussels';         // strefa czasowa
$lang         = 'pl';      


Some SETTINGS wBox*.html files

Code: Select all

   <script type="text/javascript">
      //   ODWRACANIE KOMPASU i RÓŻY WIATRÓW o 180° -- dopuszczalne wartości 1 lub 2
      //   reComp = 1 -- PÓŁNOC jest na górze   (kompas normalny)
      //   reComp = 2 -- POŁUDNIE jest na górze (kompas odwrócony)
      reComp = 1;
      //   średnica okręgu dla wykresu Wilgotności
      fiHumg = 56;
      //   średnica wykresu Róży Wiatrów
      fiRose = 83;
      //   ukryj [0] /pokaż [1] -- temperaturę i wilgotność w domu
      viPext = 1;
      //   ukryj [0] /pokaż [1] -- ciśnienie max/min
      viHome = 1;
      //   ukryj [0] /pokaż [1] -- elementy debugowania strony
      vidBg1 = 0;
      vidBg2 = 0;
   </script>


Some SETTINGS wBox.js

Code: Select all

setTimeout(getRT, 20000);       // odswiezenie zmiennych co 20s   


Use translator for Polish descriptions

[Smarmen]

I have a request: If someone runs an application at home let me show a picture of the device (but NOT a screenshot).
This may be a photo of your hand holding the phone or... your crocodile when checking the forecast on tablet. You know, let it be funny

And here are my wBoxes:


In my house, tablet W'10 hangs on the wall (above russian barometer 'Made in USSR')...


...in the kitchen, on my old HTC-HD2 CyanogenMod...


...and at work - a big monitor hangs in the hallway under the ceiling (the back of the monitor is an Android dongle)

[bthoven]

Hi,
Great template.
I tried it and like it very much. One thing, the forecast row do not show the time icons (east, noon, west, night...). Don’t know how to make it appear.

243B3BAA-2BA6-40E6-B622-C4903B78BC67.jpeg

If I want to add my webcam image with auto refresh every 30 sec. Could you recommend how to?

Thanks.

[Smarmen]

Hi
See path:
../yr/ico/_iFCtime1.png
../yr/ico/_iFCtime2.png
../yr/ico/_iFCtime3.png
../yr/ico/_iFCtime4.png
These are the icons you need. You see it? If not, unpack ZIP.

About webcam - I do not know, ask your head The easiest way is if the camera takes cyclical photos with the same name. Then just paste the photo to page template and it will refresh automatically, but the picture must be small!

Give me a link to your wBox - I will see how it looks

Regards (pozdrawiam)

[bthoven]

Hi
See path:
../yr/ico/_iFCtime1.png
../yr/ico/_iFCtime2.png
../yr/ico/_iFCtime3.png
../yr/ico/_iFCtime4.png
These are the icons you need. You see it? If not, unpack ZIP.

About webcam - I do not know, ask your head The easiest way is if the camera takes cyclical photos with the same name. Then just paste the photo to page template and it will refresh automatically, but the picture must be small!

Give me a link to your wBox - I will see how it looks

Regards (pozdrawiam)

Hi...those icon files are there. What should I do?

Capture.JPG

[Smarmen]

Why do not I see the entire website on your photo? Did you cut something out of the template?
Give me a link to your wBox - I will see how it looks

[bthoven]

I did not touch anything in the template.
http://bthoven.dyndns.biz:802/wBox/

[Smarmen]

These are paths to files:
fragment yrnoSettings.php

Code: Select all

$iconsDir      = $scriptDir.'ico/';               // all icons are stored here in separate folders
$imgDir      = $scriptDir.'ico/';               // contains images like sun-up  sun-down


So it has to be. And how is it with you?