Page 1 of 5

Weather on the wall, or my wBox :)

Posted: Sat Jul 22, 2017 6:28 pm
by 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

Image
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?

Re: My weather box

Posted: Sat Jul 22, 2017 6:50 pm
by ronwright418
Very nice :clap: :clap: :clap: :clap:

Re: My weather box

Posted: Sun Jul 23, 2017 11:46 am
by uncle_bob
That looks great!

Re: Weather on the wall, or my wBox :)

Posted: Wed Jul 26, 2017 5:52 pm
by Mapantz
Yeah - I like! :clap:
Can this be used like a mobile site as well?

Re: Weather on the wall, or my wBox :)

Posted: Thu Jul 27, 2017 3:43 pm
by Smarmen
I dont know if I understand correctly. Can you just look at my own example?

Re: Weather on the wall, or my wBox :)

Posted: Thu Jul 27, 2017 4:09 pm
by 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.

Re: Weather on the wall, or my wBox :)

Posted: Fri Jul 28, 2017 8:48 am
by 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 :idea:

Re: Weather on the wall, or my wBox :)

Posted: Sun Jul 30, 2017 9:46 am
by 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   = '&deg;C';                  // or = &deg;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 :)

Re: Weather on the wall, or my wBox :)

Posted: Wed Aug 02, 2017 1:07 pm
by 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 :lol:

And here are my wBoxes:

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

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

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

Re: Weather on the wall, or my wBox :)

Posted: Mon Dec 25, 2017 12:52 am
by 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.

Re: Weather on the wall, or my wBox :)

Posted: Mon Dec 25, 2017 7:30 am
by 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 :D 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)

Re: Weather on the wall, or my wBox :)

Posted: Mon Dec 25, 2017 1:49 pm
by bthoven
Smarmen wrote: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 :D 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

Re: Weather on the wall, or my wBox :)

Posted: Mon Dec 25, 2017 2:38 pm
by 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

Re: Weather on the wall, or my wBox :)

Posted: Mon Dec 25, 2017 2:47 pm
by bthoven
I did not touch anything in the template.
http://bthoven.dyndns.biz:802/wBox/

Re: Weather on the wall, or my wBox :)

Posted: Mon Dec 25, 2017 3:13 pm
by 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?