14. Interface and application programming¶
Hero Shot¶
Assignment :
individual assignment:
- write an application that interfaces a user with an input &/or output device that you made
group assignment:
- compare as many tool options as possible
Group assignment¶
You can find our group page here and this week group assignement here
I completed a part of the group assignment directly for my individual assignment.
Individual assignment¶
New start¶
For this week, I started by making a new board with XIAO ESP32S3 as my previous was not working anymore.
It works for some time but rapidly I had difficulties to upload programs, then the board systematically turned off after about 30s and finally I couldn’t upload anything.
Facing this, I decided to use my previous board from week 09.
Interface programming¶
I didn’t know where to start. I had a vague idea of an interface showing the two components of my final project inputs: the mood scale and the interaction acceptance scale.
I decided to tried Node-Red but I didn’t understand really why I was here for.
I make a try at Python and added the extension for VS code.
I took some online courses on openclassroom (in French).
I had some difficulties to get pip command working correctly but I finally could make it work using Shqush.io tutorial.
Soon enough, I figured that wasn’t what I needed for my project.
Being a little more familiar with html and css, I finally decided to make an html page. I also used chatGPT to help with the CSS adn to implement javascript programming little by little.
The first code only display a table of all the images needed for my project. I took the opportunity to rename all my images to facilitate programming. I used the rows for mood with units and columns for acceptance with tens. The addition of two set a position for a mixed smiley.
With help of chat GPT, I set a part to just define the inputs with displaying only one image of each scales and selecting it with buttons. I also add values for each images in the array.
After that, I implemented another part of script to add the values then make it display the mixed image that correspond. At first, the code added the images next to the previous one and needed to clear previous result.
<table>
<caption>
Mindset device
</caption>
<thead>
<tr>
<th scope="col">acceptance\mood</th>
<th scope="col"><img src="01_smiley.jpg" width="50" /></th>
<th scope="col"><img src="02_smiley.jpg" width="50"/></th>
<th scope="col"><img src="03_smiley.jpg" width="50"/></th>
<th scope="col"><img src="04_smiley.jpg" width="50"/></th>
<th scope="col"><img src="05_smiley.jpg" width="50"/></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><img src="10_smiley.jpg" width="50"/></th>
<td><img src="smiley_mix11.jpg" width="50"/></td>
<td><img src="smiley_mix12.jpg" width="50"/></td>
<td><img src="smiley_mix13.jpg" width="50"/></td>
<td><img src="smiley_mix14.jpg" width="50"/></td>
<td><img src="smiley_mix15.jpg" width="50"/></td>
</tr>
<tr>
<th scope="row"><img src="20_smiley.jpg" width="50" /></th>
<td><img src="smiley_mix21.jpg" width="50"/></td>
<td><img src="smiley_mix22.jpg" width="50"/></td>
<td><img src="smiley_mix23.jpg" width="50"/></td>
<td><img src="smiley_mix24.jpg" width="50"/></td>
<td><img src="smiley_mix25.jpg" width="50"/></td>
</tr>
<tr>
<th scope="row"><img src="30_smiley.jpg" width="50"/></th>
<td><img src="smiley_mix31.jpg" width="50"/></td>
<td><img src="smiley_mix32.jpg" width="50"/></td>
<td><img src="smiley_mix33.jpg" width="50"/></td>
<td><img src="smiley_mix34.jpg" width="50"/></td>
<td><img src="smiley_mix35.jpg" width="50"/></td>
</tr>
<tr>
<th scope="row"><img src="40_smiley.jpg" width="50"/></th>
<td><img src="smiley_mix41.jpg" width="50"/></td>
<td><img src="smiley_mix42.jpg" width="50"/></td>
<td><img src="smiley_mix43.jpg" width="50"/></td>
<td><img src="smiley_mix44.jpg" width="50"/></td>
<td><img src="smiley_mix45.jpg" width="50"/></td>
</tr>
<tr>
<th scope="row"><img src="50_smiley.jpg" width="50"/></th>
<td><img src="smiley_mix51.jpg" width="50"/></td>
<td><img src="smiley_mix52.jpg" width="50"/></td>
<td><img src="smiley_mix53.jpg" width="50"/></td>
<td><img src="smiley_mix54.jpg" width="50"/></td>
<td><img src="smiley_mix55.jpg" width="50"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Chosen mindset</th>
<td></td>
</tr>
</tfoot>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mindset Selector</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
max-height: 400px;
}
.btn-container {
text-align: center;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 10px; /* Add some spacing between buttons */
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<div id="image-container1">
<img src="03_smiley.jpg" alt="Image" data-value="3">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(1)">Previous</button>
<button class="btn" onclick="nextImage(1)">Next</button>
</div>
</div>
<div class="image-container">
<div id="image-container2">
<img src="30_smiley.jpg" alt="Image" data-value="30">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(2)">Previous</button>
<button class="btn" onclick="nextImage(2)">Next</button>
</div>
</div>
</div>
<script>
var currentIndex1 = 2; // Index for the first image array
var currentIndex2 = 2; // Index for the second image array
var images1 = ["01_smiley.jpg", "02_smiley.jpg", "03_smiley.jpg", "04_smiley.jpg", "05_smiley.jpg"];
var images2 = ["10_smiley.jpg", "20_smiley.jpg", "30_smiley.jpg", "40_smiley.jpg", "50_smiley.jpg"];
var values1 = [1, 2, 3, 4, 5];
var values2 = [10, 20, 30, 40, 50];
function previousImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === 0) {
return; // Do nothing if already at the first image
}
currentIndex1--;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === 0) {
return; // Do nothing if already at the first image
}
currentIndex2--;
updateImage(2);
}
}
function nextImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === images1.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex1++;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === images2.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex2++;
updateImage(2);
}
}
function updateImage(containerIndex) {
var displayedImage;
if (containerIndex === 1) {
displayedImage = document.getElementById("image-container1").getElementsByTagName("img")[0];
displayedImage.src = images1[currentIndex1];
displayedImage.dataset.value = values1[currentIndex1];
} else if (containerIndex === 2) {
displayedImage = document.getElementById("image-container2").getElementsByTagName("img")[0];
displayedImage.src = images2[currentIndex2];
displayedImage.dataset.value = values2[currentIndex2];
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mindset Selector</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
max-height: 400px;
}
.btn-container {
text-align: center;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 10px; /* Add some spacing between buttons */
}
#result-container {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<div id="image-container1">
<img src="03_smiley.jpg" alt="Image" data-value="3">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(1)">Previous</button>
<button class="btn" onclick="nextImage(1)">Next</button>
</div>
</div>
<div class="image-container">
<div id="image-container2">
<img src="30_smiley.jpg" alt="Image" data-value="30">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(2)">Previous</button>
<button class="btn" onclick="nextImage(2)">Next</button>
</div>
</div>
</div>
<div id="result-container">
<button class="btn" onclick="addValues()">Add Values</button>
<div id="result"></div>
</div>
<script>
var currentIndex1 = 2; // Index for the first image array
var currentIndex2 = 2; // Index for the second image array
var images1 = ["01_smiley.jpg", "02_smiley.jpg", "03_smiley.jpg", "04_smiley.jpg", "05_smiley.jpg"];
var images2 = ["10_smiley.jpg", "20_smiley.jpg", "30_smiley.jpg", "40_smiley.jpg", "50_smiley.jpg"];
var values1 = [1, 2, 3, 4, 5];
var values2 = [10, 20, 30, 40, 50];
var allImages = [
{ src: "smiley_mix11.jpg", value: 11 },
{ src: "smiley_mix12.jpg", value: 12 },
{ src: "smiley_mix13.jpg", value: 13 },
{ src: "smiley_mix14.jpg", value: 14 },
{ src: "smiley_mix15.jpg", value: 15 },
{ src: "smiley_mix21.jpg", value: 21 },
{ src: "smiley_mix22.jpg", value: 22 },
{ src: "smiley_mix23.jpg", value: 23 },
{ src: "smiley_mix24.jpg", value: 24 },
{ src: "smiley_mix25.jpg", value: 25 },
{ src: "smiley_mix31.jpg", value: 31 },
{ src: "smiley_mix32.jpg", value: 32 },
{ src: "smiley_mix33.jpg", value: 33 },
{ src: "smiley_mix34.jpg", value: 34 },
{ src: "smiley_mix35.jpg", value: 35 },
{ src: "smiley_mix41.jpg", value: 41 },
{ src: "smiley_mix42.jpg", value: 42 },
{ src: "smiley_mix43.jpg", value: 43 },
{ src: "smiley_mix44.jpg", value: 44 },
{ src: "smiley_mix45.jpg", value: 45 },
{ src: "smiley_mix51.jpg", value: 51 },
{ src: "smiley_mix52.jpg", value: 52 },
{ src: "smiley_mix53.jpg", value: 53 },
{ src: "smiley_mix54.jpg", value: 54 },
{ src: "smiley_mix55.jpg", value: 55 },
];
function previousImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === 0) {
return; // Do nothing if already at the first image
}
currentIndex1--;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === 0) {
return; // Do nothing if already at the first image
}
currentIndex2--;
updateImage(2);
}
}
function nextImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === images1.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex1++;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === images2.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex2++;
updateImage(2);
}
}
function updateImage(containerIndex) {
var displayedImage;
if (containerIndex === 1) {
displayedImage = document.getElementById("image-container1").getElementsByTagName("img")[0];
displayedImage.src = images1[currentIndex1];
displayedImage.dataset.value = values1[currentIndex1];
} else if (containerIndex === 2) {
displayedImage = document.getElementById("image-container2").getElementsByTagName("img")[0];
displayedImage.src = images2[currentIndex2];
displayedImage.dataset.value = values2[currentIndex2];
}
}
function addValues() {
var value1 = values1[currentIndex1];
var value2 = values2[currentIndex2];
var result = value1 + value2;
// Find the image object with the matching value
var resultImage = allImages.find(function(image) {
return image.value === result;
});
if (resultImage) {
var resultImageSrc = resultImage.src;
var resultImageValue = resultImage.value; // Get the personalized value
document.getElementById("result").innerText = "Result: " + result + " (" + resultImageValue + ")";
document.getElementById("result-container").innerHTML += "<img src='" + resultImageSrc + "' alt='Result Image'>";
} else {
document.getElementById("result").innerText = "Result: Invalid";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<title>Mindset Selector</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
max-height: 20%;
}
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
max-height: 100px;
}
.btn-container {
text-align: center;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 10px; /* Add some spacing between buttons */
}
#result-container {
text-align: center;
margin-top: 20px;
}
#result-button-container {
text-align: center;
margin-bottom: 20px;
}
#result-image {
max-width: 20%; /* Adjust the maximum width of the result image container */
margin: 0 auto; /* Center the result image horizontally */
}
#result-image img {
max-width: 100%; /* Ensure the result image fits within its container */
height: auto; /* Maintain aspect ratio */
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<h2>Mood</h2>
<div id="image-container1">
<img src="03_smiley.jpg" alt="Image" data-value="3">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(1)">Previous</button>
<button class="btn" onclick="nextImage(1)">Next</button>
</div>
</div>
<div class="image-container">
<h2>Interaction acceptance</h2>
<div id="image-container2">
<img src="30_smiley.jpg" alt="Image" data-value="30">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(2)">Previous</button>
<button class="btn" onclick="nextImage(2)">Next</button>
</div>
</div>
</div>
<div id="result-button-container">
<button class="btn" onclick="addValues()">Set</button>
</div>
<div id="result-container">
<h2>Mindset</h2>
<div id="result-text"></div>
<div id="result-image"></div>
</div>
<script>
var currentIndex1 = 2; // Index for the first image array
var currentIndex2 = 2; // Index for the second image array
var images1 = ["05_smiley.jpg", "04_smiley.jpg", "03_smiley.jpg","02_smiley.jpg", "01_smiley.jpg"];
var images2 = ["50_smiley.jpg", "40_smiley.jpg", "30_smiley.jpg", "20_smiley.jpg", "10_smiley.jpg"];
var values1 = [5, 4, 3, 2, 1];
var values2 = [50, 40, 30, 20, 10];
var allImages = [
{ src: "smiley_mix11.jpg", value: 11 },
{ src: "smiley_mix12.jpg", value: 12 },
{ src: "smiley_mix13.jpg", value: 13 },
{ src: "smiley_mix14.jpg", value: 14 },
{ src: "smiley_mix15.jpg", value: 15 },
{ src: "smiley_mix21.jpg", value: 21 },
{ src: "smiley_mix22.jpg", value: 22 },
{ src: "smiley_mix23.jpg", value: 23 },
{ src: "smiley_mix24.jpg", value: 24 },
{ src: "smiley_mix25.jpg", value: 25 },
{ src: "smiley_mix31.jpg", value: 31 },
{ src: "smiley_mix32.jpg", value: 32 },
{ src: "smiley_mix33.jpg", value: 33 },
{ src: "smiley_mix34.jpg", value: 34 },
{ src: "smiley_mix35.jpg", value: 35 },
{ src: "smiley_mix41.jpg", value: 41 },
{ src: "smiley_mix42.jpg", value: 42 },
{ src: "smiley_mix43.jpg", value: 43 },
{ src: "smiley_mix44.jpg", value: 44 },
{ src: "smiley_mix45.jpg", value: 45 },
{ src: "smiley_mix51.jpg", value: 51 },
{ src: "smiley_mix52.jpg", value: 52 },
{ src: "smiley_mix53.jpg", value: 53 },
{ src: "smiley_mix54.jpg", value: 54 },
{ src: "smiley_mix55.jpg", value: 55 },
];
function previousImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === 0) {
return; // Do nothing if already at the first image
}
currentIndex1--;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === 0) {
return; // Do nothing if already at the first image
}
currentIndex2--;
updateImage(2);
}
}
function nextImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === images1.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex1++;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === images2.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex2++;
updateImage(2);
}
}
function updateImage(containerIndex) {
var displayedImage;
if (containerIndex === 1) {
displayedImage = document.getElementById("image-container1").getElementsByTagName("img")[0];
displayedImage.src = images1[currentIndex1];
displayedImage.dataset.value = values1[currentIndex1];
} else if (containerIndex === 2) {
displayedImage = document.getElementById("image-container2").getElementsByTagName("img")[0];
displayedImage.src = images2[currentIndex2];
displayedImage.dataset.value = values2[currentIndex2];
}
}
function addValues() {
var value1 = values1[currentIndex1];
var value2 = values2[currentIndex2];
var result = value1 + value2;
// Find the image object with the matching value
var resultImage = allImages.find(function(image) {
return image.value === result;
});
if (resultImage) {
var resultImageSrc = resultImage.src;
var resultImageValue = resultImage.value; // Get the personalized value
// document.getElementById("result-text").innerText = "Result: " + result + " (" + resultImageValue + ")"; //
document.getElementById("result-image").innerHTML = "<img src='" + resultImageSrc + "' alt='Result Image'>";
} else {
document.getElementById("result-text").innerText = "Result: Invalid";
document.getElementById("result-image").innerHTML = ""; // Clear previous result image
}
}
</script>
</body>
</html>
Running script¶
Mood
Interaction acceptance
Mindset
Adding communication¶
As said previously my ESP32C3 and S3 boards was not working anymore so I had to find out how to make communication with RP2040. I thought that should be easy and having a quite precise idea of what information I wanted to get from the board, I didn’t worry to much about it the first days. But I find myself struggling with it despite being telled that this should be easy.
Wandering and wondering¶
Webserial should have been the best start but I felt quite confused by the WebSerial Library for Arduino and thought that was only for wireless communication with ESP chips.
I search for something with RP2040 compatibilty but didn’t find really relevant information. At some point, I get to WebUSB API then to tinyUSB Library that should be compatible with RP2040.
With an example of code to upload on my board, I could make a communication with an aimed website.
/*********************************************************************
Adafruit invests time and resources providing this open source code,
please support Adafruit and open-source hardware by purchasing
products from Adafruit!
MIT license, check LICENSE for more information
Copyright (c) 2019 Ha Thach for Adafruit Industries
All text above, and the splash screen below must be included in
any redistribution
*********************************************************************/
/* This sketch demonstrates WebUSB as web serial with browser with WebUSB support (e.g Chrome).
* After enumerated successfully, Browser will pop-up notification
* with URL to landing page, click on it to test
* - Click "Connect" and select device, When connected the on-board LED will litted up.
* - Any charters received from either webusb/Serial will be echo back to webusb and Serial
*
* Note:
* - The WebUSB landing page notification is currently disabled in Chrome
* on Windows due to Chromium issue 656702 (https://crbug.com/656702). You have to
* go to landing page (below) to test
*
* - On Windows 7 and prior: You need to use Zadig tool to manually bind the
* WebUSB interface with the WinUSB driver for Chrome to access. From windows 8 and 10, this
* is done automatically by firmware.
*/
#include "Adafruit_TinyUSB.h"
// USB WebUSB object
Adafruit_USBD_WebUSB usb_web;
// Landing Page: scheme (0: http, 1: https), url
// Page source can be found at https://github.com/hathach/tinyusb-webusb-page/tree/main/webusb-serial
WEBUSB_URL_DEF(landingPage, 1 /*https*/, "example.tinyusb.org/webusb-serial/index.html");
int led_pin = LED_BUILTIN;
// the setup function runs once when you press reset or power the board
void setup()
{
#if defined(ARDUINO_ARCH_MBED) && defined(ARDUINO_ARCH_RP2040)
// Manual begin() is required on core without built-in support for TinyUSB such as mbed rp2040
TinyUSB_Device_Init(0);
#endif
pinMode(led_pin, OUTPUT);
digitalWrite(led_pin, LOW);
usb_web.setLandingPage(&landingPage);
usb_web.setLineStateCallback(line_state_callback);
//usb_web.setStringDescriptor("TinyUSB WebUSB");
usb_web.begin();
Serial.begin(115200);
// wait until device mounted
while( !TinyUSBDevice.mounted() ) delay(1);
Serial.println("TinyUSB WebUSB Serial example");
}
// function to echo to both Serial and WebUSB
void echo_all(uint8_t buf[], uint32_t count)
{
if (usb_web.connected())
{
usb_web.write(buf, count);
usb_web.flush();
}
if ( Serial )
{
for(uint32_t i=0; i<count; i++)
{
Serial.write(buf[i]);
if ( buf[i] == '\r' ) Serial.write('\n');
}
Serial.flush();
}
}
void loop()
{
uint8_t buf[64];
uint32_t count;
// From Serial to both Serial & webUSB
if (Serial.available())
{
count = Serial.read(buf, 64);
echo_all(buf, count);
}
// from WebUSB to both Serial & webUSB
if (usb_web.available())
{
count = usb_web.read(buf, 64);
echo_all(buf, count);
}
}
void line_state_callback(bool connected)
{
digitalWrite(led_pin, connected);
if ( connected )
{
usb_web.println("WebUSB interface connected !!");
usb_web.flush();
}
}
But still, it wasn’t clear and the communication didn’t work everytime.
As Luc suggested, I checked out Neil’s examples using html. We found one using RP2040 with accelerometer.
I thought at first it was only for IMU devices but Luc insisted for me to try it. I checked the source code, copied part of it into my own but it didn’t work. Luc tried it on it side and succeed but his code didn’t work with my computer.
Chrome parameters¶
We checked Chrome parameters to be sure the problem didn’t come from it.
You have to be connected to chrome. Guest profile don’t have access to all the parmeters.
In the settings, Go to Privacy and security > Sites settings > Permissions (deploy Additional Permissions) > Serial Ports
Here make sure the “Sites can ask to connect to serial ports” is selected.
You can also check USB devices and HID devices for more options.
My parameters was okay, so the problem was something else. Luc adviced me to close all windows on my computer to be sure no other serial communication was opened. And his example finally worked !
IMU¶
Now that communication was working I could study the code to make it do what i wanted.
async function open_IMU() {
try {
// Requesting the serial port
const port = await navigator.serial.requestPort();
// Opening the serial port
await port.open({ baudRate: 115200, bufferSize: 1 });
// Getting the reader for the port
const reader = port.readable.getReader();
while (true) {
// Waiting for line end
let lineEnd = false;
let line = '';
while (!lineEnd) {
const { value, done } = await reader.read();
let chr = String.fromCharCode(value[0]);
line += chr;
if (chr === '\n' || done) lineEnd = true;
}
} catch (error) {
// Handling any errors that occur during the process
console.error("An error occurred:", error);
}
// Extracting container index (int)
const vars = line.split(',')
const containerIndex = parseInt(vars[0])
// Updating the container index value on the webpage
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
// Extracting container index (int)
const vars = line.split(',')
const containerIndex = parseFloat(vars[0])
// Updating the container index value on the webpage
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
// Extracting container index (string)
const vars = line.split(',');
const containerIndex = vars[0].trim().toString(); // Convert to string
// Updating the container index value on the webpage
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
if (line.trim() === "SW Button pushed") {
// If the button is pushed, call addValues
addValues();
}
Here’s the evolution of my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
<input type="button" value="open IMU" onclick="open_IMU()"> //modif Luc
<div id="container-index-value"></div>
</body>
<script>
async function open_IMU(cmd) {
//
// open port
//
port = await navigator.serial.requestPort();
await port.open({baudRate:115200,bufferSize:1});
var reader = port.readable.getReader();
while (true) {
//
// wait for line end
//
while (true) {
const {value,done} = await reader.read();
let chr = String.fromCharCode(value[0])
if (chr == '\n') break
}
//
// accumulate line
//
let line = ''
while (true) {
const {value,done} = await reader.read();
let chr = String.fromCharCode(value[0])
line += chr
if (chr == '\n') break
}
//
// convert to floats
//
vars = line.split(',')
//containerIndex = parseFloat(vars[0]) //modif Luc
containerIndex = parseInt(vars[0]) //modif Luc
//chatgpt
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMU Data and Mindset Selector</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
max-height: 20%;
}
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
max-height: 100px;
}
.btn-container {
text-align: center;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 10px; /* Add some spacing between buttons */
}
#result-container {
text-align: center;
margin-top: 20px;
}
#result-button-container {
text-align: center;
margin-bottom: 20px;
}
#result-image {
max-width: 20%; /* Adjust the maximum width of the result image container */
margin: 0 auto; /* Center the result image horizontally */
}
#result-image img {
max-width: 100%; /* Ensure the result image fits within its container */
height: auto; /* Maintain aspect ratio */
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<h2>Mood</h2>
<div id="image-container1">
<img src="03_smiley.jpg" alt="Image" data-value="3">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(1)">Previous</button>
<button class="btn" onclick="nextImage(1)">Next</button>
</div>
</div>
<div class="image-container">
<h2>Interaction acceptance</h2>
<div id="image-container2">
<img src="30_smiley.jpg" alt="Image" data-value="30">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(2)">Previous</button>
<button class="btn" onclick="nextImage(2)">Next</button>
</div>
</div>
</div>
<div id="result-button-container">
<button class="btn" onclick="addValues()">Set</button>
</div>
<div id="result-container">
<h2>Mindset</h2>
<div id="result-text"></div>
<div id="result-image"></div>
</div>
<!-- Button to trigger the open_IMU function -->
<input type="button" value="Open IMU" onclick="open_IMU()">
<!-- Container to display the container index value -->
<div id="container-index-value"></div>
<!-- JavaScript code -->
<script>
var currentIndex1 = 2; // Index for the first image array
var currentIndex2 = 2; // Index for the second image array
var images1 = ["05_smiley.jpg", "04_smiley.jpg", "03_smiley.jpg","02_smiley.jpg", "01_smiley.jpg"];
var images2 = ["50_smiley.jpg", "40_smiley.jpg", "30_smiley.jpg", "20_smiley.jpg", "10_smiley.jpg"];
var values1 = [5, 4, 3, 2, 1];
var values2 = [50, 40, 30, 20, 10];
var allImages = [
{ src: "smiley_mix11.jpg", value: 11 },
{ src: "smiley_mix12.jpg", value: 12 },
{ src: "smiley_mix13.jpg", value: 13 },
{ src: "smiley_mix14.jpg", value: 14 },
{ src: "smiley_mix15.jpg", value: 15 },
{ src: "smiley_mix21.jpg", value: 21 },
{ src: "smiley_mix22.jpg", value: 22 },
{ src: "smiley_mix23.jpg", value: 23 },
{ src: "smiley_mix24.jpg", value: 24 },
{ src: "smiley_mix25.jpg", value: 25 },
{ src: "smiley_mix31.jpg", value: 31 },
{ src: "smiley_mix32.jpg", value: 32 },
{ src: "smiley_mix33.jpg", value: 33 },
{ src: "smiley_mix34.jpg", value: 34 },
{ src: "smiley_mix35.jpg", value: 35 },
{ src: "smiley_mix41.jpg", value: 41 },
{ src: "smiley_mix42.jpg", value: 42 },
{ src: "smiley_mix43.jpg", value: 43 },
{ src: "smiley_mix44.jpg", value: 44 },
{ src: "smiley_mix45.jpg", value: 45 },
{ src: "smiley_mix51.jpg", value: 51 },
{ src: "smiley_mix52.jpg", value: 52 },
{ src: "smiley_mix53.jpg", value: 53 },
{ src: "smiley_mix54.jpg", value: 54 },
{ src: "smiley_mix55.jpg", value: 55 },
];
async function open_IMU() {
try {
// Requesting the serial port
const port = await navigator.serial.requestPort();
// Opening the serial port
await port.open({ baudRate: 115200, bufferSize: 1 });
// Getting the reader for the port
const reader = port.readable.getReader();
while (true) {
// Waiting for line end
let lineEnd = false;
let line = '';
while (!lineEnd) {
const { value, done } = await reader.read();
let chr = String.fromCharCode(value[0]);
line += chr;
if (chr === '\n' || done) lineEnd = true;
}
// Extracting container index
const vars = line.split(',');
const containerIndex = vars[0].trim().toString(); // Convert to string
// Updating the container index value on the webpage
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
}
} catch (error) {
// Handling any errors that occur during the process
console.error("An error occurred:", error);
}
}
function previousImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === 0) {
return; // Do nothing if already at the first image
}
currentIndex1--;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === 0) {
return; // Do nothing if already at the first image
}
currentIndex2--;
updateImage(2);
}
}
function nextImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === images1.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex1++;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === images2.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex2++;
updateImage(2);
}
}
function updateImage(containerIndex) {
var displayedImage;
if (containerIndex === 1) {
displayedImage = document.getElementById("image-container1").getElementsByTagName("img")[0];
displayedImage.src = images1[currentIndex1];
displayedImage.dataset.value = values1[currentIndex1];
} else if (containerIndex === 2) {
displayedImage = document.getElementById("image-container2").getElementsByTagName("img")[0];
displayedImage.src = images2[currentIndex2];
displayedImage.dataset.value = values2[currentIndex2];
}
}
function addValues() {
var value1 = values1[currentIndex1];
var value2 = values2[currentIndex2];
var result = value1 + value2;
// Find the image object with the matching value
var resultImage = allImages.find(function(image) {
return image.value === result;
});
if (resultImage) {
var resultImageSrc = resultImage.src;
var resultImageValue = resultImage.value; // Get the personalized value
// document.getElementById("result-text").innerText = "Result: " + result + " (" + resultImageValue + ")"; //
document.getElementById("result-image").innerHTML = "<img src='" + resultImageSrc + "' alt='Result Image'>";
} else {
document.getElementById("result-text").innerText = "Result: Invalid";
document.getElementById("result-image").innerHTML = ""; // Clear previous result image
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMU Data and Mindset Selector</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
max-height: 20%;
}
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
max-height: 100px;
}
.btn-container {
text-align: center;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 10px; /* Add some spacing between buttons */
}
#result-container {
text-align: center;
margin-top: 20px;
}
#result-button-container {
text-align: center;
margin-bottom: 20px;
}
#result-image {
max-width: 20%; /* Adjust the maximum width of the result image container */
margin: 0 auto; /* Center the result image horizontally */
}
#result-image img {
max-width: 100%; /* Ensure the result image fits within its container */
height: auto; /* Maintain aspect ratio */
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<h2>Mood</h2>
<div id="image-container1">
<img src="03_smiley.jpg" alt="Image" data-value="3">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(1)">Previous</button>
<button class="btn" onclick="nextImage(1)">Next</button>
</div>
</div>
<div class="image-container">
<h2>Interaction acceptance</h2>
<div id="image-container2">
<img src="30_smiley.jpg" alt="Image" data-value="30">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(2)">Previous</button>
<button class="btn" onclick="nextImage(2)">Next</button>
</div>
</div>
</div>
<div id="result-button-container">
<button class="btn" onclick="addValues()">Set</button>
</div>
<div id="result-container">
<h2>Mindset</h2>
<div id="result-text"></div>
<div id="result-image"></div>
</div>
<!-- Button to trigger the open_IMU function -->
<input type="button" value="Open IMU" onclick="open_IMU()">
<!-- Container to display the container index value -->
<div id="container-index-value"></div>
<!-- JavaScript code -->
<script>
var currentIndex1 = 2; // Index for the first image array
var currentIndex2 = 2; // Index for the second image array
var images1 = ["05_smiley.jpg", "04_smiley.jpg", "03_smiley.jpg","02_smiley.jpg", "01_smiley.jpg"];
var images2 = ["50_smiley.jpg", "40_smiley.jpg", "30_smiley.jpg", "20_smiley.jpg", "10_smiley.jpg"];
var values1 = [5, 4, 3, 2, 1];
var values2 = [50, 40, 30, 20, 10];
var allImages = [
{ src: "smiley_mix11.jpg", value: 11 },
{ src: "smiley_mix12.jpg", value: 12 },
{ src: "smiley_mix13.jpg", value: 13 },
{ src: "smiley_mix14.jpg", value: 14 },
{ src: "smiley_mix15.jpg", value: 15 },
{ src: "smiley_mix21.jpg", value: 21 },
{ src: "smiley_mix22.jpg", value: 22 },
{ src: "smiley_mix23.jpg", value: 23 },
{ src: "smiley_mix24.jpg", value: 24 },
{ src: "smiley_mix25.jpg", value: 25 },
{ src: "smiley_mix31.jpg", value: 31 },
{ src: "smiley_mix32.jpg", value: 32 },
{ src: "smiley_mix33.jpg", value: 33 },
{ src: "smiley_mix34.jpg", value: 34 },
{ src: "smiley_mix35.jpg", value: 35 },
{ src: "smiley_mix41.jpg", value: 41 },
{ src: "smiley_mix42.jpg", value: 42 },
{ src: "smiley_mix43.jpg", value: 43 },
{ src: "smiley_mix44.jpg", value: 44 },
{ src: "smiley_mix45.jpg", value: 45 },
{ src: "smiley_mix51.jpg", value: 51 },
{ src: "smiley_mix52.jpg", value: 52 },
{ src: "smiley_mix53.jpg", value: 53 },
{ src: "smiley_mix54.jpg", value: 54 },
{ src: "smiley_mix55.jpg", value: 55 },
];
async function open_IMU() {
try {
// Requesting the serial port
const port = await navigator.serial.requestPort();
// Opening the serial port
await port.open({ baudRate: 115200, bufferSize: 1 });
// Getting the reader for the port
const reader = port.readable.getReader();
while (true) {
// Waiting for line end
let lineEnd = false;
let line = '';
while (!lineEnd) {
const { value, done } = await reader.read();
let chr = String.fromCharCode(value[0]);
line += chr;
if (chr === '\n' || done) lineEnd = true;
}
if (line.trim() === "SW Button pushed") {
// If the button is pushed, call addValues
addValues();
}
// Extracting container index
const vars = line.split(',');
const containerIndex = vars[0].trim().toString(); // Convert to string
// Updating the container index value on the webpage
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
}
} catch (error) {
// Handling any errors that occur during the process
console.error("An error occurred:", error);
}
}
function previousImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === 0) {
return; // Do nothing if already at the first image
}
currentIndex1--;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === 0) {
return; // Do nothing if already at the first image
}
currentIndex2--;
updateImage(2);
}
}
function nextImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === images1.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex1++;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === images2.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex2++;
updateImage(2);
}
}
function updateImage(containerIndex) {
var displayedImage;
if (containerIndex === 1) {
displayedImage = document.getElementById("image-container1").getElementsByTagName("img")[0];
displayedImage.src = images1[currentIndex1];
displayedImage.dataset.value = values1[currentIndex1];
} else if (containerIndex === 2) {
displayedImage = document.getElementById("image-container2").getElementsByTagName("img")[0];
displayedImage.src = images2[currentIndex2];
displayedImage.dataset.value = values2[currentIndex2];
}
}
function addValues() {
var value1 = values1[currentIndex1];
var value2 = values2[currentIndex2];
var result = value1 + value2;
// Find the image object with the matching value
var resultImage = allImages.find(function(image) {
return image.value === result;
});
if (resultImage) {
var resultImageSrc = resultImage.src;
var resultImageValue = resultImage.value; // Get the personalized value
// document.getElementById("result-text").innerText = "Result: " + result + " (" + resultImageValue + ")"; //
document.getElementById("result-image").innerHTML = "<img src='" + resultImageSrc + "' alt='Result Image'>";
} else {
document.getElementById("result-text").innerText = "Result: Invalid";
document.getElementById("result-image").innerHTML = ""; // Clear previous result image
}
}
</script>
</body>
</html>
For making the button work, just add :
if (line.trim() === "SW Button pushed") {
addValues();
}
and then I add the rotary encoder :
if (line.trim() === "SW Button pushed") {
addValues();
} else if (line.trim() === "clockwise") {
// If the rotation is clockwise, call nextImage
nextImage(1);
} else if (line.trim() === "counter-clockwise") {
// If the rotation is counter-clockwise, call previousImage
previousImage(1);
}
I add to change the debounce for the CLK switch using milliseconds
Final Result¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMU Data and Mindset Selector</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
max-height: 20%;
}
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
max-height: 100px;
}
.btn-container {
text-align: center;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 10px; /* Add some spacing between buttons */
}
#result-container {
text-align: center;
margin-top: 20px;
}
#result-button-container {
text-align: center;
margin-bottom: 20px;
}
#result-image {
max-width: 20%; /* Adjust the maximum width of the result image container */
margin: 0 auto; /* Center the result image horizontally */
}
#result-image img {
max-width: 100%; /* Ensure the result image fits within its container */
height: auto; /* Maintain aspect ratio */
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<h2>Mood</h2>
<div id="image-container1">
<img src="03_smiley.jpg" alt="Image" data-value="3">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(1)">Previous</button>
<button class="btn" onclick="nextImage(1)">Next</button>
</div>
</div>
<div class="image-container">
<h2>Interaction acceptance</h2>
<div id="image-container2">
<img src="30_smiley.jpg" alt="Image" data-value="30">
</div>
<div class="btn-container">
<button class="btn" onclick="previousImage(2)">Previous</button>
<button class="btn" onclick="nextImage(2)">Next</button>
</div>
</div>
</div>
<div id="result-button-container">
<button class="btn" onclick="addValues()">Set</button>
</div>
<div id="result-container">
<h2>Mindset</h2>
<div id="result-text"></div>
<div id="result-image"></div>
</div>
<!-- Button to trigger the open_IMU function -->
<button class="btn" value="Open IMU" onclick="open_IMU()">Open IMU</button>
<!-- Container to display the container index value -->
<div id="container-index-value"></div>
<!-- JavaScript code -->
<script>
var currentIndex1 = 2; // Index for the first image array
var currentIndex2 = 2; // Index for the second image array
var images1 = ["05_smiley.jpg", "04_smiley.jpg", "03_smiley.jpg","02_smiley.jpg", "01_smiley.jpg"];
var images2 = ["50_smiley.jpg", "40_smiley.jpg", "30_smiley.jpg", "20_smiley.jpg", "10_smiley.jpg"];
var values1 = [5, 4, 3, 2, 1];
var values2 = [50, 40, 30, 20, 10];
var allImages = [
{ src: "smiley_mix11.jpg", value: 11 },
{ src: "smiley_mix12.jpg", value: 12 },
{ src: "smiley_mix13.jpg", value: 13 },
{ src: "smiley_mix14.jpg", value: 14 },
{ src: "smiley_mix15.jpg", value: 15 },
{ src: "smiley_mix21.jpg", value: 21 },
{ src: "smiley_mix22.jpg", value: 22 },
{ src: "smiley_mix23.jpg", value: 23 },
{ src: "smiley_mix24.jpg", value: 24 },
{ src: "smiley_mix25.jpg", value: 25 },
{ src: "smiley_mix31.jpg", value: 31 },
{ src: "smiley_mix32.jpg", value: 32 },
{ src: "smiley_mix33.jpg", value: 33 },
{ src: "smiley_mix34.jpg", value: 34 },
{ src: "smiley_mix35.jpg", value: 35 },
{ src: "smiley_mix41.jpg", value: 41 },
{ src: "smiley_mix42.jpg", value: 42 },
{ src: "smiley_mix43.jpg", value: 43 },
{ src: "smiley_mix44.jpg", value: 44 },
{ src: "smiley_mix45.jpg", value: 45 },
{ src: "smiley_mix51.jpg", value: 51 },
{ src: "smiley_mix52.jpg", value: 52 },
{ src: "smiley_mix53.jpg", value: 53 },
{ src: "smiley_mix54.jpg", value: 54 },
{ src: "smiley_mix55.jpg", value: 55 },
];
async function open_IMU() {
try {
// Requesting the serial port
const port = await navigator.serial.requestPort();
// Opening the serial port
await port.open({ baudRate: 115200, bufferSize: 1 });
// Getting the reader for the port
const reader = port.readable.getReader();
while (true) {
// Waiting for line end
let lineEnd = false;
let line = '';
while (!lineEnd) {
const { value, done } = await reader.read();
let chr = String.fromCharCode(value[0]);
line += chr;
if (chr === '\n' || done) lineEnd = true;
}
if (line.trim() === "SW Button pushed") {
// If the button is pushed, call addValues
addValues();
} else if (line.trim() === "clockwise") {
// If the rotation is clockwise, call nextImage
nextImage(1);
} else if (line.trim() === "counter-clockwise") {
// If the rotation is counter-clockwise, call previousImage
previousImage(1);
}
// Extracting container index
const vars = line.split(',');
const containerIndex = vars[0].trim().toString(); // Convert to string
// Updating the container index value on the webpage
document.getElementById("container-index-value").innerText = "Container Index: " + containerIndex;
}
} catch (error) {
// Handling any errors that occur during the process
console.error("An error occurred:", error);
}
}
function previousImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === 0) {
return; // Do nothing if already at the first image
}
currentIndex1--;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === 0) {
return; // Do nothing if already at the first image
}
currentIndex2--;
updateImage(2);
}
}
function nextImage(containerIndex) {
if (containerIndex === 1) {
if (currentIndex1 === images1.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex1++;
updateImage(1);
} else if (containerIndex === 2) {
if (currentIndex2 === images2.length - 1) {
return; // Do nothing if already at the last image
}
currentIndex2++;
updateImage(2);
}
}
function updateImage(containerIndex) {
var displayedImage;
if (containerIndex === 1) {
displayedImage = document.getElementById("image-container1").getElementsByTagName("img")[0];
displayedImage.src = images1[currentIndex1];
displayedImage.dataset.value = values1[currentIndex1];
} else if (containerIndex === 2) {
displayedImage = document.getElementById("image-container2").getElementsByTagName("img")[0];
displayedImage.src = images2[currentIndex2];
displayedImage.dataset.value = values2[currentIndex2];
}
}
function addValues() {
var value1 = values1[currentIndex1];
var value2 = values2[currentIndex2];
var result = value1 + value2;
// Find the image object with the matching value
var resultImage = allImages.find(function(image) {
return image.value === result;
});
if (resultImage) {
var resultImageSrc = resultImage.src;
var resultImageValue = resultImage.value; // Get the personalized value
// document.getElementById("result-text").innerText = "Result: " + result + " (" + resultImageValue + ")"; //
document.getElementById("result-image").innerHTML = "<img src='" + resultImageSrc + "' alt='Result Image'>";
} else {
document.getElementById("result-text").innerText = "Result: Invalid";
document.getElementById("result-image").innerHTML = ""; // Clear previous result image
}
}
</script>
</body>
</html>
#define pinCLK 1 // CLK pin connected to GPIO 1
#define pinDT 2 // DT pin connected to GPIO 2
#define pinSW 3 // SW pin connected to GPIO 3
int count = 0; // Var to know how many clicks occured (increment clockwise and decrement counter_clockwise)
int previousStateSW; // Var to memorize previous SW state to compare it with actual state
int previousStateCLK; // Var to memorize previous CL state to compare it with actual state
void setup() {
Serial.begin(9600);
pinMode(pinSW, INPUT_PULLUP); // INPUT_PULLUP to avoid 'floating'
pinMode(pinDT, INPUT);
pinMode(pinCLK, INPUT);
previousStateSW = digitalRead(pinSW); // initial value for SW
previousStateCLK = digitalRead(pinCLK); // initial value for CLK
delay(200); // delay to stabilize signal before the loop
}
void loop() {
int actualStateCLK = digitalRead(pinCLK); // reading CLK value
int actualStateDT = digitalRead(pinDT); // reading DT value
int actualStateSW = digitalRead(pinSW); // reading SW value
// *************************
// Push Button verification
// *************************
if(actualStateSW != previousStateSW) { // Checking if SW state has changed
previousStateSW = actualStateSW; // Save new state
if(actualStateSW == LOW)
Serial.println(F("SW Button pushed")); // Display State on serial monitor
else
Serial.println(F("SW Button released"));
delay(10); // Delay to avoid rebounce
}
// ***************************
// Rotary encoder verification
// ***************************
if (actualStateCLK != previousStateCLK) {
delayMicroseconds(200); // Debounce delay
if (digitalRead(pinCLK) == actualStateCLK) { // Check if the CLK signal has settled
previousStateCLK = actualStateCLK;
if(actualStateCLK == LOW) {
if(actualStateCLK != actualStateDT) { // comparing CLK and DT, if they're different, direction is counter-clockwise
count++; // decrement counter
Serial.println(F("clockwise")); // Display value on Serial Monitor
// Serial.println(count);
}
else { // when CLK and DT are similar, direction is clockwise
count--; // increment counter
Serial.println(F("counter-clockwise")); // Display value on Serial Monitor
// Serial.println(count);
}
}
}
}
}
I create an online version of the interface to test it.
I also wanted to try it on phone but Android Chrome does not allowed serial port communication
Class Archive¶
- html table of smiley
- html/css/js single input
- html/css/js double input + layout
- html/css/js script to add value and image display
- html/css/js complete (display order + layout)
- test tinyUSB communication
- test IMU extracted from Luc example
- test IMU with chatGPT modification (add const, string display and error message)
- html/css/js complete + IMU + call function
- Arduino KY040 code modified for debounce and data send
Impressions of the week¶
As stated in previous week impressions, I had the feeling that I didn’t learn enough about networking and communication and the backlash was quite harsch. I feel I learned more this week about communciations than about interfaces. I’m quite satisfied with what I ended up with but again, I’d like to find more time to control the other part of the program, make an interface for phone (even if my html is quite responsive) or display it on a output screen. In the end, I’ve made rather good progress on my project and that’as a pretty good point.
