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)