Display the weather on your piSignage display with a simple weather widget. All you have to do is copy few lines of code from our github page in a text file, enter required location details and upload the edited file as an asset. Let us look at it step by step.
You can either refer to the video demo or follow the step by step explanation followed.
Go to the github page of piSignage to get the weather widget file. You can just google “piSignage github weather” to the link to the page will be available. open the link. (refer screenshot below)
In the page there are 4 files each suitable for different zones in layout. You can display weather in a main zone,side zone or bottom zone.
If you are in the main github page of piSignage, you will find the weather files under example section. For the demo here we will use the file weather.html , which can be used in layout 1, ie a single zone layout. (default main zone). click on the weather.html link. A page with widget code opens.
You can copy the complete code visible inside the box and paste it in a text file. Easier way is click on the Raw button on the top right of the page.
Complete text of the code will be displayed in a browser window.
a) Open a new text file.
b) Copy the entire code. You can use CTRL A —> CTRL C —> CTRL V sequence to select, copy and paste the code in a text file. (CMD A-->CMD C --> CMD V for Mac users)
Edit inputs as per your need. Around line 158 of code pasted in your editor, you will find code text
const city = "Honolulu”;
You can find this line in your file using CTRL F or a CMD F command based on your system. Now this is just default text. So if you use this code as it is temperature for Honolulu will be displayed.
Change the name Honolulu with a place of your choice. As long as the place can be found on google map, the weather of that place can be displayed. The location can be a detailed string say for example SanJose ,CA, US . This is useful to get cities with same names in different states or Countries.
You can even give the name of your establishment.
Next line is const units = "metric";
Here you can choose in what unit you need your temperature displayed , ie you can choose from standard,metric and imperial units.
For example if you want to display temperature in Fahrenheit use units=imperial , for displaying temperature in Celsius use units=metric
Default will be the standard unit. Ie in case of temperature if you don't provide any input,the temperature will be displayed in kelvin unit.
Next line is const lang = "en";
Here "en" means output will be english. You can choose a codes for set of languages provided in the link given below. For example if you want output in german, use the language code "de" . In the link below you can see the available languages and their respective code.
Next line is const forecastDays = 5;
You can use the range 1 to 7. Depending on your input you will get the weather forecast for entered number of days.
Be careful to keep the code structure intact and make changes carefully so as to avoid any glitches in output due to inadvertent errors.
Once completed save the file with changes. Make sure to save the file with a .html extension. for example you can save the file as myweather.html
The file is now ready to be used as an asset in your pisignage account.
Go to assets tab and upload this file the way you would upload any other file asset. You can refer to the video about how to upload file assets.
Once you upload this file you can display this asset as part of any playlist. You can also check the weather output by opening this file in a browser.
Note that the weather file we are using is suitable to be displayed in a single zone layout. If your display is using different layout structure (multi zone layouts) choose the appropriate file in the github section.
You can see the sample weather widget display for place " palo Alto " in the image below. You can see the Temperature (present,Max and min) , weather and weather forecast for the next 5 days. Apologies for the quality of camera capture . The display in real view is much more clear.
Again as said before this example is for main zone display. if you want to display weather on a side zone or a bottom zone ,in a multi zone layout, choose the appropriate file in github and edit it as per your need.
While this is a simple display, You can always modify the HTML,CSS to create your own design :)
we are also in the process of designing an app store where you can select, edit and display your widgets the way you need with simple clicks. for any help you can always write to us at firstname.lastname@example.org