Week 3: Web Tech Research
- Julia
- May 20, 2019
- 2 min read
Tomorrow I will have an appointment with Matthijs to discuss my possibilities as a web developer in this project and get some guidance. More exactly, I'm looking for advice on two questions:
How to get data from the input screen into the Arduino?
How to embed maps into a website?
How to integrate Spotify into the screen?
From the Screen to the Arduino
The letter S will receive a design based on a user input via a screen at the installation. I did some research on which technologies could be used.
The first technology that came to my mind was Processing. In the Physical Computing lessons and in Project Exhibition, I have already used Processing - not yet with an Adafruit Neopixel LED strip but it should definitely be feasible. The communication between Processing and the Arduino is easy, but how can the colour be selected on the screen? To find a solution for that, I did some research on colour pickers in Processing and found this website:
The second possibility (this is why I also called this post web tech) is to use JavaScript or a back-end language to get the data to the Arduino. There are several possibilities:
Building a colour picker with HTML and JS:
Transferring data from Node.js to Arduino:
Transferring data from PHP to Arduino:
I mainly did this research to see what is possible within my capabilities. I have not really checked out the colour picker in Processing yet but I feel as if the web technologies offer more options here. With Node.js, I am super uncomfortable but I'd be excited to work with PHP. This might be a good idea because PHP is also a suitable language to work with a database - which I might also have to create.
Google Maps on the Website
Embedding Google Maps does not seem to be a big challenge. I already found an easy instruction on the web after searching for 20 seconds:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
There is even the opportunity to mark a location in the map, however, tagging several locations at once will be more complex as I think.
Spotify on a Website
Embedding Spotify on a website is super easy. With the help of this website, I managed to set it up within two minutes:
https://www.sidify.com/topic/embed-spotify-audio-on-your-sites-with-spotify-play-button.html
The problem with this type of embedding is that it only plays a snippet of each song and there is alway a pop-up asking you to sign in to Spotify. Even if you sign in in a different browser window, it does not work though. It is probably more difficult than I thought - I might have to use the Spotify API. I am definitely going to consult with Matthijs on that issue tomorrow, maybe he knows a bit more about the possibilities of the Spotify API.
Here, you can see the issues that I described in the test of one of my own Spotify playlists:
Comments