Week 7

Oct 3, 2022

Week 7

Serial Communications

Basic Circuit

This will read the value from the first potentiometer, and print it to the Serial Monitor.

void setup() {
// start serial port at 9600 bps:
Serial.begin(9600);}

void loop() {
int analogValue = analogRead(A0);
Serial.println(analogValue);}

The lab said that output from analogRead() can’t fit in a single byte, because the microcontroller’s analog-to-digital converter (ADC) reads the input with a resolution of 10 bits, or 210. To get the output into a single byte, map the output to a range from 0-255 so I used this code provided by the lab and the output ranged from 0 to 255. :

void setup() {
// start serial port at 9600 bps:
Serial.begin(9600);
}

void loop() {
int analogValue = analogRead(A0);
int mappedValue = map(analogValue, 0, 1023, 0, 255);
Serial.println(mappedValue);
}

Sensor input in Serial Monitor

Ascii

void setup() {

// start serial port at 9600 bps:

Serial.begin(9600);

}

void loop() {

// read analog input, map it to make the range 0-255:

int analogValue = analogRead(A0);

int mappedValue = map(analogValue, 0, 1023, 0, 255);

Serial.println(mappedValue);

// print different formats:

Serial.write(mappedValue); // Print the raw binary value

Serial.print('t'); // print a tab

// print ASCII-encoded values:

Serial.print(mappedValue, BIN); // print ASCII-encoded binary value

Serial.print('t'); // print a tab

Serial.print(mappedValue); // print decimal value

Serial.print('t'); // print a tab

Serial.print(mappedValue, HEX); // print hexadecimal value

Serial.print('t'); // print a tab

Serial.print(mappedValue, OCT); // print octal value

Serial.println(); // print linefeed and carriage return

Mapped Sensor Input

Converted to Ascii

Punctuation

const int switchPin = 2; // digital input

void setup() {
// configure the serial connection:
Serial.begin(9600);
// configure the digital input:
pinMode(switchPin, INPUT);
}

void loop() {
// read the sensor:
int sensorValue = analogRead(A0);
// print the results:
Serial.print target="_blank">Serial.print target="_blank">Serial.print target="_blank">Serial.print(sensorValue);
Serial.print(",");

// read the sensor:
sensorValue = analogRead(A1);
// print the results:
Serial.print(sensorValue);
Serial.print(",");

// read the sensor:
sensorValue = digitalRead(switchPin);
// print the results:
Serial.println(sensorValue);
}

Serial Communication in p5.js using p5WebSerial();

I used the same circuit with different code

void setup() {
Serial.begin(9600); // initialize serial communications
}

void loop() {
// read the input pin:
int potentiometer = analogRead(A0);

// remap the pot value to fit in 1 byte:
// print it out the serial
port: Serial.write(mappedPot);
// slight delay to stabilize the ADC:
delay(1); }

Had some trouble with loading p5WebSerial so I came back home to try again and eventually fixed with adjusting the code in intro.html and sketch.js. I didn’t include a way to invoke the serial port chooser dialogue box.

Notes from the lab helped..

p5.WebSerial Sketch Checklist
Most p5.WebSerial sketches that you write will have a similar structure to this one. The main difference between them all will be how you read and interpret incoming serial data, and how and when you send and format outgoing serial data. Here’s a checklist of the pieces you’re likely to see in every sketch:

In the HTML file, include the p5.webserial library
In the global variables of the sketch,
make a new instance of the library
include a port selector button or some way to invoke the serial port chooser dialogue box
In the setup:
- Make sure WebSerial is supported in this browser
- Include a call to serial.getPorts() to check for ava
  
  ilable ports.
- include serial.on() listeners for these events:
  - noport
  - portavailable
  - data
  - close
  - requesterror
- include navigator listeners for connect and disconnect
Define handler functions for all of the events above. Most of these can be simple alerts or console.log messages
Customize the function that responds to the data listener (usually called serialEvent() in these examples), as you’ll see below.
Decide when and how you’ll send serial data out, as you’ll see in the other p5.webserial labs.

The last two items of this list are the ones on which you’ll spend most of your time. The rest of the items are things you’re likely to copy from one sketch to another.

Graph in p5.js

function graphData(newData) {

// map the range of the input to the window height:

var yPos = map(newData, 0, 255, 0, height);

// draw the line in a pretty color:

stroke(0xA8, 0xD9, 0xA7);

line(xPos, height, xPos, height - yPos);

// at the edge of the screen, go back to the beginning:

if (xPos >= width) {

xPos = 0;

// clear the screen by resetting the background:

background(0x08, 0x16, 0x40);

} else {

// increment the horizontal position for the next reading:

xPos++;

}

Serial Output From p5.js Using the p5.webserial Library with LED

I did this lab with help of Spenser Harris!

Codes for Arduino

const int ledPin = 5; // the pin that the LED is attached to
int incomingByte; // a variable to read incoming serial data into

void setup() {
Serial.begin(9600); // initialize serial communication
pinMode(ledPin, OUTPUT); // initialize the LED pin as an output
}

void loop() {
if (Serial.available() > 0) { // see if there's incoming serial data
incomingByte = Serial.read(); // read it
if (incomingByte == 'h') { // if it's a capital H (ASCII 72),
digitalWrite(ledPin, HIGH); // turn on the LED
// if you're using a speaker instead of an LED, uncomment line below and comment out the previous line:
// tone(5, 440); // play middle A on pin 5
}
if (incomingByte == 'l') { // if it's an L (ASCII 76)
digitalWrite(ledPin, LOW); // turn off the LED
// if you're using a speaker instead of an LED, uncomment line below and comment out the previous line:
// noTone(5);
}
}
}

For p5.js sketch

const serial = new p5.WebSerial();

// HTML button object:
let portButton;
let inData; // for incoming serial data
let outByte = 0; // for outgoing data

let xPos = 0;

function setup() {
createCanvas(400, 300); // make the canvas
background(0x08, 0x16, 0x40);
// check to see if serial is available:
if (!navigator.serial) {
alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
}
// if serial is available, add connect/disconnect listeners:
navigator.serial.addEventListener target="_blank">navigator.serial.addEventListener("connect", portConnect);
navigator.serial.addEventListener("disconnect", portDisconnect);
// check for any ports that are available:
serial.getPorts();
// if there's no port chosen, choose one:
serial.on target="_blank">serial.on target="_blank">serial.on target="_blank">serial.on target="_blank">serial.on("noport", makePortButton);
// open whatever port is available:
serial.on("portavailable", openPort);
// handle serial errors:
serial.on("requesterror", portError);
// handle any incoming serial data:
serial.on("data", serialEvent);
serial.on("close", makePortButton);
}

function draw() {
// background(0);
// fill(255);
// text("sensor value: " + inData, 30, 50);

// graphData(inData);
}

// if there's no port selected,
// make a port select button appear:
function makePortButton() {
// create and position a port chooser button:
portButton = createButton("choose port");
portButton.position(10, 10);
// give the port button a mousepressed handler:
portButton.mousePressed(choosePort);
}

// make the port selector window appear:
function choosePort() {
if (portButton) portButton.show();
serial.requestPort();
}

// open the selected port, and make the port
// button invisible:
function openPort() {
// wait for the serial.open target="_blank">serial.open promise to return,
// then call the initiateSerial function
serial.open().then(initiateSerial);

// once the port opens, let the user know:
function initiateSerial() {
console.log target="_blank">console.log target="_blank">console.log target="_blank">console.log("port open");
}
// hide the port button once a port is chosen:
if (portButton) portButton.hide();
}

// pop up an alert if there's a port error:
function portError(err) {
alert("Serial port error: " + err);
}
// read any incoming data as a string
// (assumes a newline at the end of it):
function serialEvent() {
inData = Number(serial.read());
// console.log(inData);
}

// try to connect if a new serial port
// gets added (i.e. plugged in via USB):
function portConnect() {
console.log("port connected");
serial.getPorts();
}

// if a port is disconnected:
function portDisconnect() {
serial.close target="_blank">serial.close();
console.log("port disconnected");
}

function closePort() {
serial.close();
}

function graphData(newData) {
// map the range of the input to the window height:
var yPos = map(newData, 0, 255, 0, height);
// draw the line in a pretty color:
stroke(0xA8, 0xD9, 0xA7);
line(xPos, height, xPos, height - yPos);
// at the edge of the screen, go back to the beginning:
if (xPos >= width) {
xPos = 0;
// clear the screen by resetting the background:
background(0x08, 0x16, 0x40);
} else {
// increment the horizontal position for the next reading:
xPos++;
}
}
function keyPressed() {
if (key >= 0 && key <= 9) {
// if the user presses 0 through 9
outByte = byteas(key * 25); // map the key to a range from 0 to 225
serial.write target="_blank">serial.write(outByte); // send it out the serial port
}
if (key === "h" || key === "l") {
// if the user presses H or L
serial.write(key); // send it out the serial port
}
}

comment me here :)https://docs.google.com/spreadsheets/d/1-W06EclvrzTsQrbldnvYTIj56PC2BN_Xc2jTjxwCo6A/edit#gid=0

int mappedPot = map(potentiometer, 0, 1023, 0, 255);

Angie’s blog :')

Week 1: Getting familiar to ... :’)

And here comes my own switch! >w<

Week2: Inputs + Sensors

issue!

Week3: more analog input and outputs

Week4

Week 7

Codes for Arduino

For p5.js sketch