kitchenTV
Kitchen TV; weather, clock, live news feeds & video for Raspberry pi using PHP/javascript
This is a WEB based (PHP, Javascript) app I put together from various tools & scripts found on the web to create my own Kitchen TV : News, Clock & Weather music player & web browser display.
Here is a youtube video of it in action : https://www.youtube.com/watch?v=U5OF6tn-Ccg
If you want to set up the same thing: ======
-
Download my web files & upload to your own web space or host them locally.
-
EDIT the files to personalise it for your own needs:
-
config.php has easy user settings you can change. A list of YouTube LIVE channels, you can edit the list for your own channels.
- EDIT your city, country location for the weather api, how many days forecast
-
images/cface4.png EDIT the clock image if you want your own design. You will find the background colours for sunset, sunrise etc in the images folder too.
-
The page layout is designed to fit my TV. It will work on other screens but you would probably want to adjust slightly so it suits your screen. Here is how to best do that:
- load the page in the browser & make it fullscreen.
- The buttons on the bottom edge should be visible on screen. If they are off the bottom then reduce the height of the youtube video in config.php reduce the value for $yt_height.
- if the news headlines text on the bottom right is too large, or small, you can edit the font size in main.css at the bottom of the file: #news span (the description) & #news a (the title) the values are in vw (viewport width units) but of course use px or em if you like.
- if you need to adjust the size of the temperature: weather.css edit the font-size for .temperature
- if you need to adjust the size of the forecast cloud graphics: weather.css edit ".forecast span img" right at the bottom (the smallicons) & .weathericon close to the top. change the wisdth % and you might need to adjust the negative margins too.
- should you want to adjust the clock position main.css .clocks change the margin. margin: 50px auto; the first value is above & below, auto is left/right to keep it in the middle.
-
The www web browsing works in a frame, so it doesnt always work well with some websites - just be aware of this, you can always right-click open in new tab to get around that.
-
There is an IP changed alert - I use this to warn me my IP changed as I run my pi as a web server (for fun) I will disable this in the files, you can turn it on in config.php
==============
Additions by @hsoj95:
Along with the original code structure, I have added the following additions. Please note that my changes are intended to be used only with a 1080p screen, and will appear incorectly on smaller screens. When @riquezjp and I merge the forks into one program, we will work on solving the screen compatibility issue. Here are the feautres I added:
- Added a new default homepage for K.TV that loads the front page of Weather Underground for the user specified location
- Began integrating parts of the Materialize Framework (links below) into the program:
- Added a loading screen to hide the elemnts underneath loading
- Added a new navbar and responsive buttons to the botton, with a new logo in the bottom-left corner
- Added a few other tweaks as well
- Changed some of the specific images and font sizes to fit a 1080p screen nicely
- Changed the forecast default to 5 days instead of 3-4
More changes are to come from me. However, first I want to work with @riquezjp to merge the changes I made into one program so we can both work to make it as compatible and responsive as possible!
==============
The resources I used to put this together:
-
Building a weather App - Upamanyu Das https://www.youtube.com/watch?v=lpLUx-0t7aE
-
HTML5 analogue clock https://www.script-tutorials.com/html5-clocks/
-
YouTube Javascript API https://developers.google.com/youtube/js_api_reference#GettingStarted
-
Materialize Framework http://www.materializecss.com