Interface and Applications

This weeks task was to individual assignment: write an application that interfaces a user with an input &/or output device that you made group assignment: compare as many tool options as possible

Web Application

I wanted to build off my work from networking week, where I made a very simple application to show a camera feed and turn a joystick. My two big things I wanted to upgrade this week was 1. Make the camera better, currently it downright sucks, so Im hoping to find a different library that will improve quality and framerate 2. Add a joystick, my final project is going to be a camera that looks around. I want to make a joystick (on the webserver, not physical) that I can drag to actually make the camera look.

Improving Camera

The camera, which was basically just the esp32cam library outputting straight onto a webpage with a button, was horrifically slow. I found that it was an easy fix, as I just needed to change from using the async sketch to the regular. This will have a limit if multiple devices try to connect at the same time, but the fix for that is just not having multiple devices connect at the same time, and this didn't need that so not a big loss. With the upgrades, the camera now runs incredibly smoothly at resolutions even of 1280x720 streamed over wifi. As with all cameras this small, it struggles with low light environment, which my workplace usually always is

Joystick

I'm not good at making websites, so I won't pretend to be, so I'll say right now that this was generated by AI. Specifically, I took my old code from Networking Week and asked it to add a joystick. After it did that, I went through to understand, and will explain my knowledge here. Basically, it uses a library built only to be a really good joystick combined with the same code from networking week (calling a hook at /move?x=x&y=y). In order to combine the camera stream, it uses some CSS magic to autofit the camera stream to the screen (and add borders where it doesn't), then have the joystick be overlayed on top of that on the bottom left. everytime the joystick changes positions, it will send the updated position to the microcontroller (theres small delay between these to avoid 80 requests each informing that its moved 1 more left). The microcontroller then maps that value (which is between -160 and 160) into a step delay between 20 and 5 ms and a direction (high or low). higher step delay means higher delay between steps which means the stepper spins slower.

The exact conversation can be found here

Slow Wifi Fix

Throughout this, I was having an issue with high latencies in both the joystick and the camera stream. After searching around online, I found the solution in adding in this line of code:

  WiFi.setSleep(WIFI_PS_NONE);

this one line, inserted close after calling WiFi.Begin(), tells the microcontroller to disable power saving measures for the wifi. This will of course mean that power is not saved, but also it greatly reduced latency, especially in the first packet during which I would assume it would be rebooting the wifi stack.

Hero Shot

This was a 480x320 stream so that it fit better on my computer, on the phone it will be the full 1280x720 stream Also my room was really dark at the time with only a lamp shining on half my face, the worst conditions for this camera possible

Group Work

A link to my group work can be found here

Reflection

Finding that wifi fix is big for me, as thats something that im going to use in all projects (that need low latency) from now on. As for the code itself, It's really cool to be working as a partner with an AI that can do better than me at virtually everything, but always strays from the goal that I have in my head. I don't trust it to do my complete perfection vision, but it gets close enough and I can teach myself enough to fix that 10%

Files

The updated camera and base files can be found here