Color Change Update
Last week I got my color changing web app working. It was only a one page website with a button on it. When a user visited the website, they could click the button to change to color of the background. This color was selected randomly from an array I made. This array was filled with hexadecimals that I got from colourlovers.com. After showing it to professors in the department, I got some feedback I needed to incorporate. When you hit the button on the web app, it changes to a random color. But you don’t know as the user what color you changed it to. I was advise to list only 3 or 5 colors on the page as buttons. And the user could click one to change the website to that color. This way the user knows they are impacting the app.
To do this, I set up custom data attributes on the color buttons holding their hexadecimal value. When a button is pressed, JS strips the value form the data attribute, sends it to the server. The server then sends that value to all the people online and the browser’s background color is updated. This newer version can be viewed at https://color-change.herokuapp.com/.
What my current example does is shows you what the device’s orientation is, on the actual device. It does NOT use websockets. Next week, I need to set up a websocket example that take the device’s data and broadcasts is to all devices also connected.
To continue working with WebSockets I also made my own chat room. This project is the “Hello World” of websockets. I call is Emoji Chat. All users are given an emoji and enter a chat room. They can then posts messages and read the messages of others. See it live here: https://emoji-chat.herokuapp.com/
I continued my research on other projects and found one that combines websockets and device motion detection. It is from 2012 though. Web I initially downloaded it, it would not run. Some of the code is depreciated and needed an update. After I did that, I actually got it to work. It uses a phones rotation to rotate a logo on the page. This will be a great help further into my project. https://github.com/hadimichael/DeviceOrientationEvent-demo
Next week I will have device motion detection working with websockets.
- Update Color Changing App: 2hrs
- Device motion detection tutorials and desktop attempts: 3hrs 30mins
- Set up device motion detection on iPhone: 1hr 45 mins
- Emoji Chat: 1hr 20 mins
- Work on multi-user motion detection on remote: 2hrs 15 mins
- Total: 10hrs 45 min