# Week 13
## Interface and Application Programming
### Individual Assignment
> Write an application that interfaces a user with an
input &/or output device that you made
For this week I started with the code from Week-3 that allows me to activate any pixel on the screen.
#### Web Serial API
I used the [Web Serial API as described in this article](https://developer.chrome.com/docs/capabilities/serial).
Here are the key pieces of code:
```
```
#### Creating a grid of pixels in HTML
I started with this idea for an interface for the pixels on the [B09JWN8K99 0.96 Inch OLED Module 12864](../week-3/index.html#pixelsonthescreen). Click on any of the black rectangles below:
These are just checkbox elements with some css formatting a naming pattern for an id so they can be called during the Web Serial API:
``
Where the first number `000` corresponds to the column of the pixel and the second `004` corresponds to the row.
#### Creating a grid of pixels in with JavaScript
It would be very tedious and hard to extend if I had to type out each html element for each pixel one by one. I wanted to use javascript to automate the creation of these html checkbox elements.
Starting with this [HTML checkbox array grid generator chat](https://claude.ai/share/cc2dc211-b1f7-48a5-aa9e-f7c1f77e3dbb), I used this script to turn on any pixels on the screen. I changed the width of the pixels to better reflect the size of the screen.
Here is the interface for the pixels with Javascript:
Arduino Code:
### Group Assignment
> compare as many tool options as possible
There are many different topics covered this week, some are programming languages which have specific advantages for creating applications (Java is an object oriented language that is good for computer applications, while JavaScript is much more widely used for websites.) Others are protocols which allow an interface to connect to devices, or devices to become interfaces (USB).
#### Three.js
I looked at three.js, which is a JavaScript library to create 3d graphics in the web browser. It has support for elements like a camera, coordinate systems, shaders, which are typical of graphics engines like Blender or Maya, but everything is running in the browser.
#### HTML5
HTML5 is a version of HTML that supports audio, video, and a wider range of graphics than previous HTML versions. HTML5 can be thought as another way to create a reactive graphical interfaces. You can create interactive audio visual experiences (games, animations etc) using the HTML Canvas element, but it does not have support for 3d graphics.
#### React
React is another way to create a responsive, dynamic website. It uses this pattern of responsive functions which return bits of HTML. It can be used to create very complicated sites with changing windows, scrolling and updating elements (and was developed with support from Facebook for creating the web interfaces for that site). Unlike Three.js, it is not specialized to be used for 3d computer graphics, but it is more commonly used accross the web and can result in sites that load faster. React be used in conjuction with Three.js for user interface parts of a website.
#### React Native
React Native is the same as React but allows applications to run natively on IOS, Android, Windows, instead of being constrained just to browsers.
#### MQTT
I looked at MQTT which allows you to connect devices that are on a local web server via the same WebSocket address. It is advertized as ideal of Internet of Things devices. This is an great approach for wireless and web enabled devices. I would need an ESP which has wifi capability to use this system.
#### pySerial
I looked at pySerial which allows you to connect to the serial communications using python. From this [article](https://premioinc.com/blogs/blog/serial-ports-vs-usb-ports-comparison) I learned to recognize what the Serial COM port connection looks like and how USB is often more reliable than serial port communications. In the Xiao package, serial communications can happen through the USB C port.
#### pyUSB
I also looked at the [pyUSB project](https://github.com/walac/pyusb/). According to the git repo it allows for easy USB access using python. It allows you to communicate with usb devices. You can talk to the device as well as access data from it. [This tutorial](https://github.com/walac/pyusb/blob/master/docs/tutorial.rst) helped me understand its functionality.
#### WebUSB
I could have also accessed the device as a USB device via the web interface, as described in this article on [access USB devices on the web](https://developer.chrome.com/docs/capabilities/usb).
## Attachments
[Serial Communications Arduino Code](files/251218_Serial_Communications/251218_Serial_Communications.ino)
## Acknowledgments
Adin for his suggestion to try HTML to serial communication this week!