<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> ###Week11: Networking and Communications /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ ### Sensor Fabrication This week, I was aiming to retouch the sensor fabrication. To enhance the robustness, I replaced the copper tape to plate so that it is more mechanically beneficial. As such, I redesigned the mold to position the copper plate in the precise location rather than floating in silicone. However, I didn't take the tolerance into consideration because the cnc-milled copper plate can't fit into the 3d-printed mold. After several times of iteration,I gave up, and moved on to do some real networking stuff for this week. I need to think about a neater way to enclose copperplate and silicone, or, even if I don't need copper plate at all? <img src="m1.jpg" alt="strandbeest" width="320"/> <img src="m2.jpg" alt="strandbeest" width="700"/> <img src="f1.jpg" alt="strandbeest" width="500"/> <img src="f2_ESP32-copper.jpg" alt="strandbeest" width="500"/> ### Networking - #### Wi-fi scan This was just the very first test, to see if the ESP board is functioning by scanning its surrounding wi-fi. The way that I compile-upload program to ESP32 is by this procedure: 1) compile + upload 2) long-press the button + program switch on 3) when the 'connecting...' shows, release the button 4) go to serial monitor, switch off the program, and hit the button 5) you should be able to see the functioning sign in the serial monitor. <img src="p00-wifiscan.jpg" alt="strandbeest" width="500"/> <img src="p0-wifiscan.jpg" alt="strandbeest" width="350"/> #### 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 wifi networking part is something I haven't touched , but will continue trying out. <img src="p5-serial-websocket.jpg" alt="strandbeest" width="1000"/> <img src="p5-4.jpg" alt="strandbeest" width="1000"/> <img src="p5-3.jpg" alt="strandbeest" width="1000"/> <img src="p5-2.jpg" alt="strandbeest" width="1000"/> <img src="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>