assignment: application to interface w/ an input or output device~

group assignment: compare as many tools as possible

This week, I’d like to build something to make progress on my final project. I would like to build a web interface to communicate over serial with the board.

For the input devices week, Elliot made a web app to visualize the touchpad input on his device. He writes, “Since websites can’t talk to hardware sockets on your machine, I created a simple websocket server that forwards information from the serial port over the websocket. The webpage then receives live readings from hardware through the websocket.” I am planning to follow a similar structure.

technologies

high level process

  • sketch out features and user interface
  • learn about react
  • explore data visualization library
  • mock up basic frontend
    • in order to simulate basic actions, i thought using arrow key presses would beintuitive for left right up and down.
  • implement backend
    • this involves the python server that communicates the incoming serial data. the code is based on elliot’s code (for python <–> web) and neil’s code for (device <-serial-> python on computer).
    • system design
      • device sends message w/ marker to computer over serial.
        • message takes the form: “AX0000000AY000000AZ0000000”

takeaways

  • find the right plot
  • system design

next steps!

  • make input device
  • load code onto device
  • send acceleration from device to website via websockets.
  • website recieves messages from server.
  • website parses messages correctly and adds data to the plot.

Update(12/07/18)

I will be finishing this assignment for my final project.

Update(12/16/18)

This was sort of held up by my accelerometer not working, so I’m happy it started working!

You can see the interface updating as it recieves readings over serial.

Update (12/17/18)

Improved interface to have better controls for the motors & actually send messages to talk to the microcontrollers that send pwm signals!