The Networking and Commuication Process #

Knowing that my end goal is to connect my microcontroller to a phone, I decided to explore the potential using BLE as a network. To begin this process, as in true in many week, I asked ChatGPT to help me draft code for my website and Arduino IDE. Prior to this week, I wasn’t aware that I could use my website at the platform to connect with my device by embedding JavaScipt and discovered this was possible by observing on of the group assignments last week.

I wrote to ChatGPT to understand how to integrate these two pieces (JS and Arduino) and then workshopped the code. It took me a little while to figure out how to get the JavaScript to work, but after I realized it was a issue related to where I was storying the code then I was able to get it onto my FabLab site. (This issue was the my hugo theme uses page bundles, and I was putting my JS in a static folder rather than the content > docs folder). From here, I refined the Arduino code for my microcontroller by adding a set of UUIDs generated from this website.

After a few more iterations, and figuring out that I couldnt have my bluetooth on while plugging in my ESP-32, I was able to get the BLE connection to work. This consisted of going to my FabLab website on the chrome browser on my phone, clicking on the “Connect to StoryStone” JavaScript button," and selecting my device.

Unfortunately, I ran into an issue that I was unable to resolve when I decided to rename my device. My phone no longer picked up the microcontroller, even through my tablet was able to see it. After trying out my housemates iPhone, I also ended up finding out that this system of communication is not compatible with anything but Android devices. For some reason, Apple doesn’t allow their devices to connect with BLE using a web browswer and instead you have to create an app. Given that I want iPhone users to be able to connect to my device, I will now have to figure how to get my system to work with low energy over Wifi.

Resources: #

https://javl.github.io/image2cpp/

Recitation Notes: #

How to make things usable? - Jan Borchers HTMAA fame?

Golden Rules:

• Simplicity!
  • User, task, context
• Visibiilty and Feedback
  • current state -> can you easily determine this?
  • are the features easily available?
  • how to access the features?
• Gestalt Laws
• how do we perceive things as a unit or group?
  • things close together are a group
  • closed shapes are a group
  • things that are similar are also perceived as togther
• Natural Mappings
  • e.g. up and down buttons should match their physical arrangement –> up button is on the top and down button is on the bottom /or/ up button should be turn the device on and the down button should turn the device off
  • similarly turning a dial clockwise should be on and turning it counterclockwise should be off
• User’s Language
  • use the language that the user understands Avoid Modes
• same user interface gestures does something different depending on the state
• Principle of Least Surprise
  • make it so that the user interface doesnt surprise the user
  • resist the temptation of the timeout!
• Dialog, not monolog
  • interactive
• Tolerate Errors
  • provide useful errors to user
• Visual Design
  • color.adobe.com

The DIA Cycle (Design is Iterative and Agile)

• what problem is this solving?
• who is the user? Implement prototypes!
• this could be a one paragraph story, not even necessarily the device itself
• Analyze and Interpret interactions with system –> ask afterwards
• Slowly converge to a solution

Recommendations:

• The Design of Everyday Things
• Bret victors rant on the future of interaction design

Murphy’s Law:

• anticipate how things will going wrong

Rely on modularity