Final Report

 CSCI 499 Final Report

By: Hamza Rashid, Kaitlyn Khan, Tom Reingold, Tong Chen

Hamza Rashid

My contribution to the project is the streamplayer website. The code reads from a csv, user1.csv, which is a users 8 selected “favorite” radio stations. My code fetches the csv and then processes the data, loading 8 divisions which would contain the stream, as well as a play/pause button. Once this is loaded the user is presented with multiple options, such as being able to change the 8 available “favorite” streams. To make this easier for users, the available radio stations are loaded into a drop down menu. Simply select the radio stream number, the station you would like to select, then hit change. If it is successful an alert will appear on screen. Finally users have an option to save the new “favorite” streams. Hitting save will update the user1.csv in the server, an alert will appear if it was successful. (Hamza Rashid)

To organize my code I broke up parts of my code into functions. For example I wrote a function, csvToArray, which will turn the csv into an array for easy processing. I wrote a separate function, addstream, which creates a div and adds the stream link, stream name and image. These two functions work in conjunction in the getData function. The getData function fetches the csv, uses csvToArray to make an easy to process array, and then uses addstream to load the 8 streams. So instead of writing one long function, I wrote three more targeted functions. Other functions I wrote were playAudio, which is the code for the play and pause button, changestream which allows users to change the radio streams, pop_options which loads the dropdown of all available streams for users to choose from, and push_file which allows users to save the new csv to the server. (Hamza Rashid)

While working on my code I ran into many problems which required a lot of research and help from other group members to solve. An initial problem I had was that the play/pause button would only pause the first stream on the page. To solve this I used the “this” keyword. Which basically returns the division element where the play button is held. This way I can directly access the specific element that I am trying to play/pause. Another problem, which was the major problem I encountered, was not being able to fetch data from the server. Since my code uses http instead of the more secure https, I ran into many obstacles when fetching the data. For example my request was blocked completely on the github hosted site, because of security concerns. Tom was able to help me with this by hosting the website on his own server, and changing to server settings to allow fetches of data. This problem really helped me understand the importance of internet security. Being that github is a site used by many students, it made sense that a request from my unsecure website was blocked. I also ran into an issue when I wanted to save the csv to the server. This problem was mostly solved by doing research, such as how to generate a csv and following tutorials. We also had to install php into the server. Php is the language which is used to manipulate the server. (Hamza Rashid) 

Kaitlyn Khan

For my contribution for the project, I was in charge of creating the webpage for our user interface.  Since I had prior experience with github and web development, it was a task I was determined to take on. There were alot of issues along the way, the biggest of which was implementing an API to make searching through our radio streams easier. The API part of the project took the most amount of work. Using the ones we had available on RapidAPI.com, first finding one with suitable parameters became a challenge. Afterwards, implementing the one I chose caused unforeseen issues. I’ve worked with APIs before in Swift programming, and did not experience as much trouble. I even contacted the creator of the API, they tested my code personally and couldn't help me find a resolution as to why the calls were not working as they should. After some more tedious research I eventually got the API working by creating an asynchronous function. The next issue was that with over 50,000 radio stations that can be searched and called with the algorithm, it was creating too many API calls and exceedinging my 400/day hard limit, therefore narrowing the amount that could be displayed on one page. After discussing it with my group members, we determined it was best to eliminate this part of the project and focus the search engine on the limited radio stations we have at our disposal; which was 60.  (Kaitlyn Khan)

Pivoting the search bar to only display 60 radio stations became a challenge due to the time constraints we were working with. My other group members originally had the the station data on a csv file containing just the name, url and logo. I was the one who picked out the logos and put them in a folder, which caused an issue with sizing. To fix this, I scaled each image down using the Preview application on my macbook. I tried to teach myself how to make calls from csv files, but with the bugs I was receiving I made the call to make my own data file in the form of a json, something I know how to work with. I hand wrote out the json files, then did my own tedious research to find genre and location. It was quite time consuming, but well worth the effort to have more information to display on the webpage. I soon realized that the 60 streams that we have are mainly variations of ABC, so while the stations are different, they hold a lot of similarities. (Kaitlyn Khan)

Creating the search bar section of our webpage was the most fun for myself, however still a dispute. I played around with the code for a while and could not figure out why my images would not show up, when I did figure it out, the orientation of the page was off and continued to fix one issue, another would arise. Implementing the search algorithm took some time as well, but I followed some styling help from a github page I found online and worked around the problem. One the search bar displayed all the parameters I wanted per string entered, regardless of name, genre or location, I was able to move on to styling the page. I thought it would be fun for the user to test out the stream while deciding on one, so they are able to click on the icon to do so. This action will open up another tab and play the song on a blank screen with a play bar. They can simply exit it out when done and continue to test out other options. (Kaitlyn Khan)

Early in the semester I made a wireframe diagram to help myself and Hamza visualize what we wanted this webpage to look like. For the most part, it helped us organize without having to confirm where or how buttons on the webpage would operate. This also helped me coordinate with Hamza, since he wrote the code for the stream player page. I was later able to push his code into mine. The task I had at hand was styling his code so it coordinated with mine. I made sure it connected with my stylesheet so the font and boxes lined up and the background showed up properly. I came to realize that because his code showed up differently on both our group members' computers and browsers, regardless of it being on the same server, that it became impossible for me to style much more. However, we agreed it looked great on its own and didn’t need any more attention. (Kaitlyn Khan)

Tom Reingold

The concept came about from a conversation between me and my mother-in-law, Mimi. She wants to listen to at least one station that her radio can’t receive. Since Mimi is not interested in learning computer skills or maintaining new gadgets, I conceived of the Grandma Radio™. It occurred to me that even tech savvy people might enjoy it for its easy operation.

Part of the work was specifying the hardware and software components. It was easy to choose the Raspberry Pi for computer hardware since it’s inexpensive, small, and draws little power.

All group members needed to learn new skills, especially Apache web server and Linux. The unusual hardware components:

• Steel enclosure for housing the hardware

• Rotary switches

• Rotary encoders for the rotary switches

• Audio amplifier

• Speakers

We all spent a lot of time proposing, enhancing, and refining the features and flow control of the system. Eventually, we divided the work among us.

Configuration of the system involved setting up Apache and sshd to accept connections from non-standard TCP ports. We housed the system in my home, as I did most of the hardware work. I configured my home router to create port forwarding from the public IP address to the internal ports of the system. Apache ports are for Granddaughter Mode™ (users), and ssh is for logging into the shell and for file transfers by the programmers (us).

When the system is booted, it logs into the account called “pi” automatically. The .config/autostart folder specifies the apps to start upon startup. We start the vlc app to play the selected radio station. This is called Grandma Mode™. The Grandma user can change stations with the channel selector knob and adjust the volume with the volume knob. There are eight preset stations in eight channels.

Granddaughter Mode™ is invoked by opening a web browser and connecting to the web page in the system that allows configuring the eight channels. Here, the Granddaughter (user) can change the station in any given channel. There is a search mode that can search for available station using keywords. When the user finds a desired station, she can designate it as the station for a given channel and save that configuration in the system. Then when that channel is selected with the knob, the system plays that radio station.

Tong Chen

There are two main contributions I have to the project. First is the overall planning of the project, the radio blueprint, and the general flow chart. While it is true that both of these parts of the project aren’t really used or referenced a lot, I did spend the first half of the class doing it so I guess that is one of my main contributions. I have to admit that I didn’t do a good job here. Picking a job that isn’t really needed to be done. The flow chart and discussion on how to implement them may decided how some parts of the project turned out. But the blueprint is a complete waste of time since we decided to go for a different design. The main reason that I was doing those two things was that I wasn’t really sure what else I could do. Most of the hardware wasn't here and who knows if the code would work without testing them.

The second contribution I had to the project is mainly the two knobs. A volume knob that changes the volume a channel knob that changes the channel. I have to admit that even in this part I didn’t do a good job since the code is mainly using premade functions that any media player would have, increase/decrease the channel, go next/previous. It isn’t that I am trying to find the easy jobs to do since I did have a hard time trying to figure out trying to load the vlc library into the knobs. After hours of trying I have to say that you couldn’t, maybe someone else can do it but at least I can’t. So when I was about to give up scanning through all of the libraries I found one that contains the volume increment and decrement. Tired of trying more and wasting more time, well mainly that this code works and changed my PC's volume and should work on the pi I called it a day. When doing channel knob this time I tried the go next/previous in the same library and it worked on my music player and so I downloaded vlc and tested it there.

Some problem I had was first the knobs sometimes would not register a change in their positioning. The real reason behind this is unknown to me but I guess it might be just connection issues. Another problem I had was for the last few days of class I was working on opening vlc in python which I succeeded in doing so and loads a list of channels to play. Which turned out to be a complete waste of time since again it is not used since it doesn’t actually open vlc and most of our things work with vlc open. In all, I enjoyed this project while there is wasting time on a part that is not used, wasting time trying to figure out something hard then realizing that there is a simple solution, and wasting time on finishing something and realizing that is it in the wrong direction.