Interface and Application Programming

write an application that interfaces with an input &/or output device

Week17 | 18.May.2016 ~ 24.May.2016

This week's assingnments

  • Explained the protocols you used
  • Had a fun time

Web application

This week, I tried to make a simple we application related to my final project. Since I'm using a wireless connection, I have many ways to control my board. I already made a bluetooth connection previous week, this week I wanted to go further. TO THE WORLD WIDE WEB!

Concept

During week 14, I made a rgb led board. So my plan for thi sweek is controlling this output device, with wifi connection. For example, if I click the 'red button' on the web, the rgb led change its coulor to red. It would be fun if it's possible to control hex coulour later!
test images

Javascript

Before I controll my physical board, I tested with web page. Here's my plan; display several buttons one web page. When specific button is clicked, the backgroung colour changes.

To make this happen, we need to use javascript. Since HTML is stable web language which means after it download the web page, its appearance cannot be chaged. On the other hand, javascript is active. That's why we need a javascript source for this project.

First, I made very simple html codes. It will display header and the have a reference of style.css file. It's just a boring webpage with a sentence.

Now it's the time to put some spicy on it. I'm gonna make several buttons and give them a specific value. As you can see above, we already gave the id to the body and this is used for changing colour. It means if the button 'black' is clicked, the body get class name 'black'.

Now take take a look of css file. Here, we have to write what we want to do when the button clicked. So I made the website change its background colour when the button clicked.



Result

You can play around with colours here.




Wifi

We have ESP12e in our local fab lab. I found a nice tutorial at adafruit and instructable. To use a esp 12e, some module board is needed, because you have to reset every single time you upload the code. So I made a board for wifi but the programming parts are saved for future.



Design & Code Files

download


Conclusion

What I made

  • Web application
  • Wifi module

What left

  • Programming esp-e12 to connect the board to the web




← week16 | networking and communication week18 | applications and implications →