Interface & application programming
Objectives for Week 14
- Write an application that interfaces a user with an input &/or output device that I made
- Compare as many tool options as possible
Individual Assignment
Group Assignment:
Group Assignment
Group assignment link.
Interface
Interface programming is about how humans or devices interact with a system. It usually means creating user interfaces (UIs) like buttons, menus, or screens in apps or websites. It can also include how two machines talk to each other
Application Programming
Application programming is about writing the actual code that makes an app or system do things — like saving data, showing information, or responding to user input. It includes backend logic, APIs, and how different parts of a program or system work together.
Web Serial Communication
The Web Serial API provides a way for websites to read from and write to serial devices. These devices may be connected via a serial port, or be USB or Bluetooth devices that emulate a serial port.
The Web Serial API is one of a set of APIs that allow websites to communicate with peripherals connected to a user's computer. It provides the ability to connect to devices that are required by the operating system to communicate via the serial API, rather than USB which can be accessed via the WebUSB API, or input devices that can be accessed via WebHID API. To read more click here.
Individual Assignment
Interface
In this week I tried to make a slider to control the servo motor using web serial communication. I used ChatGPT to create the Web USB Interface.
I specified all the requirements and tried to understand how it works. Using the html and css we can create the slider and how the website looks. To establish the web USB connections and add the functions for the slider or any thing which we created in the website, java script is needed for that. The javascript part does all these things and it is included in the html in a scrpit tag.
Display Code Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Servo Slider</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
}
.container {
text-align: center;
border: 2px solid black;
padding: 40px;
border-radius: 10px;
}
.connect-btn {
background-color: red;
color: white;
padding: 10px 20px;
margin: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.connected {
background-color: green !important;
}
.slider-container {
border: 2px solid black;
padding: 20px;
margin-top: 20px;
}
.slider {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<h2>SERVO SLIDER</h2>
<button id="connectBtn" class="connect-btn">Connect</button>
<div class="slider-container">
<h3>Angle of Servo</h3>
<input type="range" id="servoSlider" min="0" max="180" value="90" class="slider">
<p>Angle: <span id="angleValue">90</span>°</p>
</div>
</div>
<script>
let port;
let writer;
const connectBtn = document.getElementById('connectBtn');
const slider = document.getElementById('servoSlider');
const angleValue = document.getElementById('angleValue');
connectBtn.addEventListener('click', async () => {
if (port) return;
try {
port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
writer = port.writable.getWriter();
connectBtn.classList.add('connected');
connectBtn.textContent = 'Connected';
} catch (err) {
alert('Connection failed: ' + err);
}
});
slider.addEventListener('input', async () => {
const value = slider.value;
angleValue.textContent = value;
if (writer) {
const data = new TextEncoder().encode(value + '\n');
await writer.write(data);
}
});
</script>
</body>
</html>
Code Explanation
- Creating the slider
- In input, type="range" creates a slider. also the minimum and maximum values were declared.
- javascript
- Connect to serial port
- Slider Update
<div class="container">
<h2>SERVO SLIDER</h2>
<button id="connectBtn" class="connect-btn">Connect</button>
<div class="slider-container">
<h3>Angle of Servo</h3>
<input type="range" id="servoSlider" min="0" max="180" value="90" class="slider">
<p>Angle: <span id="angleValue">90</span>°</p>
</div>
</div>
let port;
let writer;
Initialize the port and writer to store the serial communication info.
connectBtn.addEventListener('click', async () => {
if (port) return;
try {
port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
writer = port.writable.getWriter();
connectBtn.classList.add('connected');
connectBtn.textContent = 'Connected';
} catch (err) {
alert('Connection failed: ' + err);
}
});
When we click the connect button a popup apperars and displays all the COM ports available and can select the COM port we needed.
slider.addEventListener('input', async () => {
const value = slider.value;
angleValue.textContent = value;
if (writer) {
const data = new TextEncoder().encode(value + '\n');
await writer.write(data);
}
});
It will update the angle text and sent it to the micro controller.
ChatGPT Promt:
I need to control a servo using web serial communication. The controller should be a slider from 0 to 180 degrees. explain me how to build this web serial communication step by step. I'm a beginner in this. I am attaching an image how the interface looks. The connect button should be red and while connected it should become green. all the things should be in the center of the screen.
Explain each steps as simple as possible
Code for Esp32
#include <ESP32Servo.h>
Servo myServo;
void setup() {
Serial.begin(115200); // Serial monitor Baud rate
myServo.attach(2); // Servo connected to GPIO2
myServo.write(0); // Move to its 0 position
}
void loop() {
if (Serial.available()) { // Check anything typed
int angle = Serial.parseInt(); // Read the number typed
if (angle >= 0 && angle <= 180) {
myServo.write(angle); // Move to that angle
}
}
}
Code Explanation
This was a code written to sent and accept value through a serial monitor.
- #include <ESP32Servo.h>- Esp32 library for servo.
- Servo myServo; - Servo is a clas from servo.h library which will control the servo motors.
- void setup() {
Serial.begin(115200); // Serial monitor Baud rate
myServo.attach(2); // Servo connected to GPIO2
myServo.write(0); // Move to its 0 position
}
It will begin the serial monitor with 115200 baud rate, declare servo is attached to GPIO2, and moves the servo to its 0 position.
- void loop() {
if (Serial.available()) { // Check anything typed
int angle = Serial.parseInt(); // Read the number typed
if (angle >= 0 && angle <= 180) {
myServo.write(angle); // Move to that angle
}
- Check the value from the serial if the value is between 0 and 180 it will rotate to that direction.