<![CDATA[
<topbar style="display:none;">
<item><a href="../index.html">Home</a></item>
<item><a href="../about_me/about.html">About</a></item>
<item><a href="../week_x/index.html">Final Project</a></item>
</topbar>
<!-- This is a comment, it is ignored by the compiler/interpreter -->
<style>
h0 {
font-family:;
font-size: 30px;
color: #414040;
margin-top: 50px;
margin-bottom: 6px;
word-spacing: 5px;
}
a {
color: #e479f1;
}
</style>
###Week12: Interface and Application Programming
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
### Overview
Final project overview. A wireless communication between the shoe and the web-browser is needed, so that people can dance freely. For the communication, I choose websocket as a bridge.
<img src="system.jpg" alt="strandbeest" width="1000"/>
### Websocket
I followed along an ESP-websocket tutorial to build my first ever websocket. The light switch can be controlled by the web, wirelessly.
<img src="ws-1.jpg" alt="strandbeest" width="1000"/>
<img src="ws-2.jpg" alt="strandbeest" width="1000"/>
<img src="ws-3.JPG" alt="strandbeest" width="1000"/>
<iframe width="1000" height="600" src="https://www.youtube.com/embed/BCZdSpHwOno" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### BNO-055 (Orientation, Accelerometer Sensor)
As I need the position and orientation data from the shoe, Nathan suggested me to go to Accelerometer route. Sadly, I have no luck using this previous sensor in the first round.
At the beginning, I used my own designed ESP32 board, and the arduino IDE console kept telling I2C is not detected....
<img src="BNO055-0.JPG" alt="strandbeest" width="1000"/>
<img src="BNO055-1.jpg" alt="strandbeest" width="1000"/>
<img src="BNO055-2.jpg" alt="strandbeest" width="1000"/>
### New BNO-055
Nathan helped me debugging for a while, we then use a off-the-shelf ESP32 feather board and a new BNO055 sensor, and it worked!
<img src="newBNO055-0.JPG" alt="strandbeest" width="1000"/>
<img src="newBNO055-1.jpg" alt="strandbeest" width="1000"/>
<img src="newBNO055-2.jpg" alt="strandbeest" width="1000"/>
<img src="newBNO055-3.jpg" alt="strandbeest" width="1000"/>
<iframe width="1000" height="600" src="https://www.youtube.com/embed/pxdGTBx-3Vk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### Serial input - p5.js
Visualizing the pressure sensor is part of my final project,whether the output should be GUI or TUI-based is still debating. For this week,I focused on making my ESP32 talk to <a href="https://editor.p5js.org/">p5.js</a>. So, I came to understand that there is a thing called <a href="https://www.youtube.com/watch?v=JwpNRD990Js&list=PLx3k0RGeXZ_wZ_gYpYXfH6FTK7e0cDL0k&index=2">websocket</a>
that enables machines to talk to each other synchronized through a server. I struggled a lot to find the right tutorial for connecting serial input from your device to the web. Starting from Daniel Schiffman's coding train, Jose Luis's Parametric Camp, they all talk about the concept around websocket and firebase, which I need to understand but still missing something for my final project. Luckily enough,
I found a very very very useful tutorial from NYU, by Tom Igoe.
In the website, it includes everything you need to know about the hardware and software part.
The tutorial that is very easy to follow along is: <a href ='https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/'>serial input-to-p5.js</a>
I eventually managed to read in data in p5 from my pressure sensor, and then I manipulated that data to some simple geometry visualization for now.
The wi-fi networking part is something I haven't touched , but will continue trying out.
<img src="../week_11/p5-serial-websocket.jpg" alt="strandbeest" width="1000"/>
<img src="../week_11/p5-4.jpg" alt="strandbeest" width="1000"/>
<img src="../week_11/p5-3.jpg" alt="strandbeest" width="1000"/>
<img src="../week_11/p5-2.jpg" alt="strandbeest" width="1000"/>
<img src="../week_11/p5.jpg" alt="strandbeest" width="1000"/>
<iframe width="1000" height="600" src="https://www.youtube.com/embed/zOJfsfjP6Is" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### Multiple Serial Inputs -> Websocket -> P5.js
TO BE CONTINUED....
]]>