wBox (weather box) in JSON version

[Big Daddy]

Great, and thank you Kris. I need to play now

I forgot, I added new features to my wBox, I see you included a link to my version in your documentation, thank you.

I added:
1) "Dew Point" on bottom left of my "moisture" section (one drop icon and value).
2) Todays "Sun hours" between Sunrise / Sunset reading and UV Solar reading.
3) Is the Sun Shining - shows a small sun icon above Sun Hours when Sun is shining

Now to try and work out the new json files for forecast and maybe add some new features like forecasted max / min temperature

Andy

[Smarmen]

Hi
Script wBox.js I join for those who want to go modify and use later!
I write about it in the documentation!

Websites filse used compressed script wBox.min.js

[Smarmen]

Hi Andy,
Thank you for writing.
I checked your work - I am very happy about it

For You and others, I also have some important information: I don't know why, but the forecasts in XML and JSON files are different.
The differences aren't great, but they are. I think the JSON prediction is more precise though.
Have a nice day

[Big Daddy]

So I have my wBox using the new json file and I am now doing some design work to fit in the max / min temperatures as that is a nice feature.

One question, in old xml version I used my Pi to get forecast data every 30 minutes and save as xml file (forecast.xml) so I did not constantly use API when not needed. It worked ok for me and then pointed wbox.js to the file here:

$(function(){
$.ajax({
url:'forecast.xml',
datatype : 'xml',

Now in new json version instead of using api call like this:
var forecastAPI = 'https://api.met.no/weatherapi/locationf ... =0.0421217'; I want to call it on my pi every 30 minutes and save as a json file

I want to point to my json file but cant find anywhere on internet how to call the file in JS to do this
var forecastAPI = location of my file (like src="forecast.json")

Any ideas

Andy

[Smarmen]

Hi Andy
Question: WHY do you want to do this?
I checked for a long time and everything works fine without saving the forecast file. Cyclic data refresh is included in the wBox.js library.
So what do you need the saved file for?
In the previous version, I had to do this, otherwise it didn't work.
Now forecast is captured permanently, whenever the site is up and running.

[Big Daddy]

Sounds like I am stuck in "old times".

I just noticed as well that it refreshes every 200s so I will go with the new way.

Thanks
Andy

[Smarmen]

Andy, I fell for it too It took a long time to find out that now it can be done easier.
Better late than never... as the old woman said, when she missed the train
(Polish saying)

[Smarmen]

Hello everyone

Today I made some small but important changes to improve the website experience.
Please download wBox.zip http://www.andreovia.pl/weather/wBox/wBox.zip unpack and replace files:
wBox.min.js
wBox.js
wBox.css
wBoxH3f.html
wBoxV2f.html

Have a nice day

[Big Daddy]

Hi Kris,
First I want to say Thank You for providing the updated JSON version of wBox. This means we will be able to continue using it when nr.yo change their API output very soon and wBox will continue to provide us with forecast data for many days and hopefully years to come. Your work is much appreciated.

So I am now running the new version for my forecast. I admit, I have not added all the new pieces that have been included, I need a much bigger screen to fit them all on and as I only have a 7-inch tablet in my office and a 10-inch tablet in my kitchen it will be difficult to make room. Maybe some other time. I also need to try and work out how to centralise the max / min temperature under the weather icons, especially when you have a 2-digit /1 digit like 11/8. That is me just being very peculiar and liking things straight.

My brother suggested another animated improvement which I also added tonight, this is varying cloudbase so the cloud gets higher if the cloudbase is higher. This is now added and changes every 500 feet up to a maximum of 2500 feet. I will see how that goes but it appears to work.

My wBox can be seen here http://midlifedad.me.uk/wBox/main.html#loaded

Once again many thanks

Andy

[Smarmen]

Hi Andy
You got the script very quickly - bravo!
I also like simplicity and spend a lot of time adapting the screen to my expectations.
Cloud base animation is a good idea - I'll do it too
Now I spend a lot of time in our big garden, so everything else falls into the background.

Have a nice afternoon for you
Krzysiek

[PaulMy]

Paul, does your hosting company allow you to use an .htaccess file? You can control cache times with this.

@freddie, would you have an example of what I can put in a new .htaccess file?

@Krzysiek, latest versions working ok. However the caching is still a problem when I view it.
The realtime.txt and realmore.txt are current and updating by CumulusMX.
In Edge the script showed the current time when opened so this indicates that is good, but does not continue to update the time http://komokaweather.com/cumulusmx/wBoxH3f.html.
In FF the time is from a day when it was previously opened, and the time does not update.
In Chrome the time is from a day when it was previously opened, but a different time compared to what is shown in FF, and the time does not update.

Enjoy,
Paul

[freddie]

Paul, does your hosting company allow you to use an .htaccess file? You can control cache times with this.

@freddie, would you have an example of what I can put in a new .htaccess file?

Hi Paul,

Try this code:

Code: Select all

# DISABLE CACHING
<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

<FilesMatch "\.(json|txt|xml)$">
    <IfModule mod_expires.c>
        ExpiresActive Off
    </IfModule>
    <IfModule mod_headers.c>
        FileETag None
        Header unset ETag
        Header unset Pragma
        Header unset Cache-Control
        Header unset Last-Modified
        Header set Pragma "no-cache"
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
    </IfModule>
</FilesMatch>

If you have an existing .htaccess file at the root of your website then put this at the end of it. If not, then just copy the code in.
If you look at the FilesMatch section (line 8 in the above code) I have put txt json and xml files. I believe that is all the file types you should need - you may not need XML, if not then remove it (including the | character just before it). If you need other types then add them (appended with a | character).

[freddie]

@PaulMy: I have just taken a look at your wbox page. Using F12 developer tools, I can see that the TTL for text files is being set to a very long time (Expires: Thu, 31 Dec 2037 23:55:55 GMT). So without the .htaccess cache override your .txt files will not update without a forced refresh for 16+ years!! Methinks your hosting company is being a tad OTT with their cache settings

[Big Daddy]

I remembered why I needed to use a file instead of a direct API call.

I set wBox up for my brother and we are running it on a very old Kindle Fire. When we first used it, first thing it did was go to internet and automatically update itself to latest version of OS and apps, including the browser which for some reason stopped wBox from working. So we defaulted the device back to factory setings and blocked it on his router from accessing the internet. Worked great. I updated his wBox last night but we did not get weather data due to router blocking the internet. However, I found what I needed to do and what I was originally asking. Now I have his Pi run a script to make the API call every 5 minutes and save the result as a json file. Then in wbox.js replaced ths line - $.getJSON(forecastAPI, function (data) with this $.getJSON('wbox_forecast.json', function (data).

All working good.

Andy

[PaulMy]

@freddie, thanks for your additional comment.
I had added the .htaccess yesterday and then opened in Edge and it showed the current time in both the H and V versions, but not in FF or Chrome. The script's update-circle displays every 20 seconds but the time displayed does not change.

This morning Edge H version was current but not the V. Neither H or V was current in FF and chrome.
http://komokaweather.com/cumulusmx/wBoxH3f.html
http://komokaweather.com/cumulusmx/wBoxV2f.html
I presume that is what others see as well.

I will give GoDaddy another call and see what suggestions they are willing to give.

Enjoy,
Paul