K.TV all-in-one app

[JoshuaKimsey]

So over the past few days I have been working on something big for K.TV, and I now feel I'm at a stage where I can announce what I am trying to do, since I have already succeeded to a degree. I have been trying to make it so that users would not need to hand start a php server to run the program, and I also wanted an easy way for users to be able to launch the program without needing the terminal.

I set out wanting to build K.TV in Electron, as that seemed to be the best solution to achieve an all-in-one style app, that wouldn't take a century to code. Electron, if you didn't know, runs on Node.js, and powers such programs as Atom, Brackets, Brave, Slack, Visual Studio Code, etc. At first it was rather tough to get a php program running properly in Electron, as most help online dealing with questions like that usually end with "Just use Node.js instead". Well I was in no fancy to try and recode K.TV into JavaScript, at least not right now anyways, so I had to figure out another way to do it. The solution I found was actually rather novel and simple, just have Node.js run a terminal command to open a php server on a declared port and you had a working server. With that out of the way, it was rather easy to get whatever else that was needed setup.

So now, I can officially announce that I have successfully prototyped K.TV in Electron! I have a working version that loads properly and looks great! Here's a picture for proof: (The loading screen is because I took the picture before I sorted out a bug that kept it from loading fully. That's fixed now!)

From here, I want to add in an easy way for people to change their location, as that would be quite hard in a fully packaged app otherwise. Beyond that, in the long run, I think it'd be greatly beneficial too use the power of Node.js to add features to K.TV! One thing that could be added back is a local music player like you once had. Being how Node.js works, I'm willing to bet that a local music player would work a lot better now than it did originally!

You just have no idea how happy I am that I got this working. I truly think this would help to make the program far more helpful to people, as they wouldn't have to deal with apache and hosting, and stuff. Let me know what you think about this! It's not at a point where I can add my code to my github branch yet, but that's not too far off at this point! 😃

[riquezjp]

wow, thats amazing. That really is a great idea. I cant wait to try it also!

I did wonder about hosting the PHP version online & people have a login to store their prefs, but having a stand alone version is really exciting. well done. Let me know when I can have a try - to be honest I know nothing about electron or computer apps, im just a lowly web guy - ha ha!

[JoshuaKimsey]

Ok, I think I'm nearing the point where I can make a prototype package you could view. What OS are you on? That would save me the work of making it for all three main OS's right now!

Also, I need your thoughts on making it easier for people to change their location data, specifically from within the clock itself. I was thinking maybe using a JSON file to hold the location data could work, as that should be editable from within the app itself, but I'd need your help working with that.

[riquezjp]

Mac OS on my main computer, I also have Linux. I can run a VM with win7 if I need to.

The location you could let people type it, but if they mess up it wont work. but it could show error feedback "location not found, please retry" If you want it to be 100% foolproof then you need a dropdown of countries & cities, but that will be a lot of combinations. I expect there is somewhere online you can download a database for that.

I would go for the type it method & explain it well Please enter your country & city. eg: Gueret, France Once they do that if you don't get valid weather from Yahoo then show "location error"

[JoshuaKimsey]

Awesome! Here is the package containing the clock that should run on Mac! Try it and see! You have to hit ⌘-Q to close out when your finished

Here is the program binary: *Edit: The file is 99MB, and Github only allows ten, so you'll have to wait until I can get it uploaded to a CDN for you to get.

For the location, people in the states can also just type in a zipcode to get their location, that's what I do! For others, they'll just have to follow the naming conventions exactly! I'll try and explain it throughly though!

[JoshuaKimsey]

Ok, here's the link to the Mac app for K.TV: https://drive.google.com/file/d/0B_aarz_vBkrLNHZockxFNFVvaHc/view?usp=sharing

Unzip that and doubleclick the App icon! Hopefully it works! 😄

(Note, I accidentally overwrote some of the most recent, uncommitted changes I had made to K.TV when I was working with it, so something within K.TV itself may still be a bit broken!)

[JoshuaKimsey]

I now realize that the packaged version isn't working on another Mac of mine, so it's likely it didn't work for you. I'm working on figuring that out now. When I fix it, I'll send you a new packaged version

[riquezjp]

Just a white screen for me.. no worries.let me know when youve updated

[JoshuaKimsey]

Yeah, something messed up while packaging. I'll see if I can repackage and try again

[JoshuaKimsey]

Here's part of the issue. When I open the packaged app on my Macbook, it seems to successfully open a php server to run K.TV from, and it connects to it, it just fails to find the index.php file for the program. I know it's something specifically with the app, because when I navigate to the specific folder with the files and manually start a php server from the terminal, and then navigate to the localhost:port i opened in the terminal, K.TV launches just fine.

I'm finding it rather difficult to work with jerry-rigging php to work in Node.js, as it's not really designed for that. I may end up just trying to see if I can recreate K.TV's functionality in JavaScript, as to eliminate the use of php all the way around, and open up the ability to truly harness the powers of Node.js. The biggest issue I see will be rewriting the php functions that go out and collect data from weather underground, as I don't honestly know how to do that in Javascript, but I'm gonna see if I can learn.

[JoshuaKimsey]

Well, now that I've flipped-flopped on what I said before, I'll go ahead and do it again! xD

I think I may have discovered a way to natively run php through a Node.js plugin. It may take me a bit to figure it out, but when I do, hopefully that will be the solution.

[JoshuaKimsey]

And all be dang, I think I did it! All thanks to gulp-connect-php, I think I now have a truly functioning php server running in the program! I have to give credit to @micahblu for making such an awesome npm plugin!

Now, the real fun! Implementing location editing for users! Now that I have PHP up and running, I should just be able to use PHP to achieve that, which makes things easier!

[JoshuaKimsey]

Ok, so here's an update! I have the program running properly in a development environment. It actually runs like a dream! Here's a problem I've run into though, when I package the program, it stops functioning. Either the php server fails to launch, or the php server does launch properly, but it doesn't launch in a way that loads the index.php file.

I'm still trying to figure this out. When I do, I'll pass along a packaged program for you.

[JoshuaKimsey]

Well, how many times have I flip-flopped on myself just in this one thread? I lost count!

So here's an update for you. I have given up trying to work with PHP in Node.JS, it's simply too hard and not worth the hassle. I am now currently working on replicating the features you made in PHP in JavaScript. It's slow going, but I'm working through it. I am going to replace your "config.php" file, where users enter in relevant data to personalize their clock, to a "config.json" file that will serve the same purpose.

At this point, the program is in a state where it will actually launch and arrive at the loading screen I made, though due to JS errors, it fails to proceed beyond that point. This is very encouraging though, as the fact that it can even launch means that a lot of work has already been done to help get it working fully in Node.JS and Electron.

Here's where I give you some bad news, though it doesn't directly center on my version of K.TV, it will affect all versions of it. In trying to look up some info on the jQuery weather plugin you used, I discovered this issue thread under the GitHub page for the plugin: Current Status of simpleWeather #281. Seems like the Yahoo API is acting up and may not be a permanent thing. This leads to a question that may need to be answered sooner or later, what would we use to replace it should it disappear? I know Wunderground offers an API to use, but you have to signup and use an API key to access it. The other idea is to fully scrape the data we need from the web, though this does raise some ethical concerns doing so on a large scale. I honestly don't have a good answer for this one. But I thought you should be aware that there may be trouble afoot with the weather plugin.

[JoshuaKimsey]

I HAZ MADE PROGRESS❕

What you are about to see may shock you... I present to you, for the first time, K.TV running natively in Node.JS, without failing to do so from errors:

I still have a lot of work to do. The headlines and video sections are still broken, just to name a few things. But I have made a lot of progress too. I have moved the user settings to two JSON files, one for weather/location, the other for video streams. My goal is to have those be changed through a setting menu I'm gonna implement. I also need to build the JS functions to get the BBC headlines and the Wunderground alerts for the users location.

Still a long way to go, but the longest and worst part is now behind me. The core functions of the program are now running in Node.JS and Electron, and soon I'll try and package it to see if you can test it.

[riquezjp]

Thats awesome man. Well done! It will be a cool little app 😃

[JoshuaKimsey]

Ok, I believe I have replicated >95% of the original Kitchen TV in Node.JS at this point. Only a few things remain to be completed, namely the volume controls for videos, the weather alerts from Wunderground, and the settings window for changing streams and what not. Here's a screen shot of what it looks like running now:

If you can't tell any real difference between the PHP version and the Node.JS version, then I have done my job well! 😉

The program is now at a point where I can share a CONFIRMED working Mac version with you! Just a few things about it: You can close it either with ⌘-Q or by clicking the Red X button in the menu button at the bottom. The iFrame updates dynamically, so a total refresh of the page will not occur when a new video is launched. Some of the videos in the video's button menu are just placeholder videos because I didn't want to put in all of the livestreams yet, or couldn't find any. Other than that, the Node.JS version of K.TV works exactly the same as the PHP version you originally made! 😃

Here is the Mac version of it: https://drive.google.com/open?id=0B_aarz_vBkrLeU9rdUd5Q0M1R0U

From this point, besides implementing the few features I listed above, I plan on making some updates to a few features as well. I'd like to make it so the analog clocks second hand moves in a smooth sweep pattern, or close to it at least. I'm gonna need your help with this, as I don't understand canvas in HTML whatsoever. How do you make a second hand tick several times a second, or even become a smooth motion? Along with that, I think I might try and work on adding a dedicated music/video player to the program, as now that it is run directly off the users machine, there should be no performance issues.

This has been a tough, but highly educational and fun adventure! It truly is the best way to learn another language, I don't care what some others might say. I want to offer to you, do you wanna keep your version of Kitchen TV in PHP, or would you like for me to make your's into a Node.JS version as well? It wouldn't take me nearly as long as it did this time, because I already know what I'm doing! 😄

Let me know how you like the new K.TV, and let me know if it runs correctly!

[JoshuaKimsey]

Ok, on top of the Mac version above, I now have also ported a version to work on the Raspberry Pi! It was surprisingly easy to get running on the Pi, save for needing a specific version of Electron for it. I'll attach a download link to the Pi version of it here: https://drive.google.com/open?id=0B_aarz_vBkrLcnFEZHUwN2xLcT

When you unzip that, you should have three items in a folder, two folders and an executable bash file. Chmod that file to enable it to execute, double click it, and K.TV should open on you're Pi. It runs quite well, although it is just a tad stuttery at the beginning when trying to load Wunderground. The only issue I saw is that non-streaming videos, like what a few of the video buttons link to, can drop a frame every now and then. One solution to this is to run them at 360p, as being so small, you don't notice the resolution drop. Ironically the streams don't seem to have a framerate issue. Considering the nature of Electron for ARM devices, I imagine this will improve as time goes on, but for now I imagine that K.tv in Electron will probably run on Pi 3's, and maybe 2's. I guarantee you it won't run on a Pi Zero, but that's the cost of having an all-in-one program.

[JoshuaKimsey]

Ok, so! I believe I have now fully replicated the functionality of the original K.TV in Electron/Node.JS. However, there is still one major hurdle I don't know how to over come. I don't know how to make the volume setting change. I don't understand how the api works, and the original setup doesn't seem to work in the new version I made. I wanna get a version uploaded to GitHub on a separate branch, so you can look at the code, but I really wanna figure out how to make the volume part work first.

Aside from that, I have changed a few things overall. Firstly, I removed your HTML canvas you used for the clock and have instead opted to use CSS and JavaScript to make an animated clock instead. Although canvas is supposed to be the more resource conservative of the two, the CSS/JavaScript version seems to obviously run smoother on the Pi than does the Canvas version. Secondly, I am working on making the weather icons that appear in the current conditions and the forecast area animated. I'm still trying to work out some kinks, but once I do, I think it will make it all the more lively.

Here is an image for you to see what it now looks like:

If you have any tips or tricks for working with the YouTube API to change the sound, please let me know, as I'm lost when it comes to that... 😕

[riquezjp]

oh wow, this looks really amazing now. good work. I think you will have it really polished soon!

The YouTube player API is javascript & it loads youtubes script which we dont have control over. in my original index towards the end of the page it loads the youtube api <script src="https://www.youtube.com/iframe_api"></script>

In library.js I set the volume using the API

player.unMute();
player.setVolume(20);

These are youtube own functions which they control in the iframe_api script So those player.xxx function calls are the youtube API The other bits I wrote to change the button css etc $( "#vol20" ).removeClass( "von" ); This is making use of the jquery shortcuts to select a ID & change the css.

Theres more details about the api on this page https://developers.google.com/youtube/iframe_api_reference

There is a 5 step bit of code "getting started" which gives a good example of the steps.

[JoshuaKimsey]

Thank you! It's nearly ready for primetime! 😃

With the API, I tried using those commands, but it kept throwing an "undefined" error back in the console... I may just have to rebuild the youtube part of the JS code from scratch again to make it work. If for some reason that doesn't work, I could always make it so the Node.JS calls a bash function to control the system volume itself. That'd be a Pi specific fix, but it would work! However, I really want to get the API working instead.

Aside from this one bit, the only other part is building a working setting screen, which shouldn't be too hard, although I must admit I haven't learned how to do that in Node.JS yet. But I will shortly! 😄

I have to say, this has been a really fun experience overall. Very challenging, but fun! I definitely have a strong appreciation for Node.JS and Electron now! Don't forget to let me know if you want your version of Kitchen.TV made into a Node.JS/Electron version as well Shouldn't be too hard to drop it into the framework I have already built!

[riquezjp]

undefined means one of the variables is undefined or missing, the error should say a line or variable name

[JoshuaKimsey]

Yeah it says "player.setVolume is not a function", yet here is the code:

var player
function onYouTubeIframeAPIReady () {
  player = new YT.Player('ytplayer', {
    events: {
      onReady: setVol
    }
  })
}

function setVol (vol) {
  var player = document.getElementById('ytplayer')

  player.setVolume(vol)
}

I'm not sure what's going wrong with it. :/

[JoshuaKimsey]

Whoops, didn't mean to close that

[riquezjp]

ok, so the YT script is not included

[riquezjp]

'player' is an API function & its hosted by YT. So you need to include the script tags on the main page.

[JoshuaKimsey]

Hmm... It's included in my scripts area, exactly in the same spot you set it up in... I might try downloading it to see if using the hard coded version will work better.

[JoshuaKimsey]

Ok, aside from still trying to figure out the YouTube API thing, I have implemented a rudimentary settings window to adjust different aspects of the app! Right now it just has a location field, but I plan on adding more things for celsius/Fahrenheit, custom url's, and maybe even a way to easily change the YouTube streams!

[JoshuaKimsey]

Hey, got a cool addition I wanted to tell you about! How does animated weather icons sound to you? 😄

[JoshuaKimsey]

Just so you don't think I've abandoned the project, I am still working on it! Had a few extra pieces I had to fix, but it's still coming along slowly! The semester coming to an end has been a bit hectic, so that hasn't helped either. Hopefully I'll have the finished version out by the end of the year! :slightly_smiling_face:

[JoshuaKimsey]

Lol, well I now realize it's been how long since I responded here? Like 4 months? Ok so, I haven't forgotten about my Electron version of K.TV. Life and school just got in the way and made really being able to work on it rather tough. I do have some changes I will make soon, then I think my version would be ready for primetime! :)

[riquezjp]

yep. There are a few versions. (see FORK button at the top) My one is the original & runs as a web app (so you need to upload it or run your own webserver) hsoj95's version is a computer app you can just install, you need to visit his Fork page to download his files. Or my page https://github.com/riquezjp/kitchenTV to download my version.

[JoshuaKimsey]

I can't see the question that asked about this, but I'll go ahead and respond. My version isn't totally stable yet, but i'm close to having a stable version ready. Admittedly, my version only works well on the most-powerful Raspberry Pi's, or on a normal computer, but I'm working on trying to fix that!

[riquezjp]

oh it looks like he deleted it, confusing...

[JoshuaKimsey]

Ok so... After nearly a year of working with this, I have come to a realization, Electron is simply too unstable and too unwieldy to be of proper use for the Raspberry Pi. Even an overclocked Pi struggles with running it. So, with this in mind, I still want to make an all-in-one style for it, and this has in many ways already been achieved. A lot of the work I did was turning the PHP code into normal JS code. Having done this, I am now going to transition over to making my version also run in the browser like your original version, but have it be functioning without the need for hosting. It will run purely on JS, and should run a lot smoother. If this fails to solve the issues I'm experiencing with lagginess, I may start looking at dumping frameworks like Materialize for making my own things instead.

I shall let you know of my progress when I achieve results! :)

[riquezjp]

Hey J95. OK, thanks for the update. Thats a shame because it looked like a great solution.

I will say that going only JS you may be likely to have the same issues ... the pi starts to struggle once we start adding features in browser. Originally I had a JS music player added to KTV, it was very minimal but I had to drop it, as things started lagging badly. However, you might be alright, so its worth a try. See how it goes.

If your aim is to have a stand-alone simple app that users can run without technical knowledge (installing apache etc) then one way might be to have your own server host the app & the user just has a url & login for their own personalised experience. That way the user gets served a very lightweight web page. (you can get amazon aws free for a year!)

That said, its worth noting that people who buy a pi expect some technical fiddling, its kind of the point. Its not that powerful, so the game is to find a compromise between features, difficulty, performance that you find acceptable. Could you trim down the electron version & have essential features? If that works then you cn at least offer a lite version & then go from there. :-) good luck!

[JoshuaKimsey]

Yeah, I really wanted to make a truly all-in-one application. The issue isn't so much the intensiveness of K.TV. It's the instability of Electron itself on the Pi. I have issues where, when running the Electron version, my Pi will utterly freeze up, to the point of having to power it of and back on again.

For the lagginess, I'm gonna see if making it a stand alone web-based app improves that. If it does then great! If it doesn't, then I'll see about removing features and/or frameworks to improve performance. On the plus side, if that route works, then it would be easy to reimplement a version for Electron.

The server based idea is also interesting, but then that adds complications, and limits a users ability to change aspects of the program.

You are right though, people with Pi's expect some fiddling! I would like the program to at least operate smoothly out of the box though, and Electron isn't providing that experience unfortunately... Not for Pi users at least. If I were to totally do it over, I might write the program in Java, as to have it be able to universally run without issue. But having to rewrite it in Java now would be utterly painful... So I think I'll try and make the pure JS version first, then I'll see about how to expand that further.