xxxxxxxxxx
228
let slideNumber = -1; // Start with initial state for button
let chosenParking = null; // To store the chosen parking spot
let bgImg; // To hold the background image
let startButton, continueButton; // Buttons to start and continue presentation
function preload() {
bgImg = loadImage('parking_view.jpeg'); // Load the parking lot background image
}
function setup() {
let cnv = createCanvas(windowWidth, windowHeight);
cnv.style('display', 'block');
textSize(32);
textStyle(BOLD);
// Start button setup
startButton = createButton('Click here to start');
styleButton(startButton);
startButton.mousePressed(startPresentation);
startButton.position(width / 2 - startButton.width / 2, height / 2 + 20); // Adjust as needed
// Continue button setup, initially hidden
continueButton = createButton('Continue');
styleButton(continueButton);
continueButton.mousePressed(nextSlide);
continueButton.position(width / 2 - continueButton.width / 2, height / 2 + 80); // Adjust as needed
continueButton.hide(); // Hide until needed
}
// Be sure to include the styleButton function as you have defined it:
function styleButton(button) {
button.style('background-color', '#000000'); // Black background
button.style('color', '#32CD32'); // Vivid green color
button.style('font-size', '32px');
button.style('padding', '10px 20px');
button.style('border', 'none');
button.style('border-radius', '5px');
}
// The rest of your functions (draw, startPresentation, nextSlide, etc.) remain unchanged.
function draw() {
if (slideNumber === -1) {
background(bgImg); // Display the parking lot background
textAlign(CENTER, CENTER); // Align text to be centered both horizontally and vertically
// Setup the welcome text dimensions and position
let welcomeText = "Welcome to Parking Eli!";
let rectHeight = 100;
let rectWidth = textWidth(welcomeText) + 60; // Width based on text width
let rectX = (width - rectWidth) / 2;
let rectY = height / 2 - rectHeight * 2.5; // Position above the center
// Draw the rectangle for welcome text
fill(0); // Black fill for the rectangle
rect(rectX, rectY, rectWidth, rectHeight);
// Draw the welcome text
fill(50, 255, 50); // Green text color
text(welcomeText, width / 2, rectY + rectHeight / 2);
// Update start button position
startButton.position(width / 2.55 - startButton.width / 2, rectY + rectHeight + 310); // 20 pixels below the welcome text rectangle
} else {
displaySlides();
}
}
function displaySlides() {
background(bgImg); // Display the custom background
fill(0); // Black fill for the rectangle
let rectHeight = 150; // Increased height of the rectangle to cover more space downwards
let rectY = height * 0.3; // Keep top position constant
rect(10, rectY, width * 0.75, rectHeight); // Rectangle now longer downwards
fill(50, 255, 50); // Green text color
let message = getMessage();
text(message, 20, rectY + rectHeight / 2 - 70, width * 0.75 - 20, rectHeight); // Text slightly moved up within the rectangle
continueButton.show(); // Show continue button when slides are active
}
function styleButton(button) {
button.style('background-color', '#000000'); // Black background
button.style('color', '#32CD32'); // Vivid green color
button.style('font-size', '32px');
button.style('padding', '10px 20px');
button.style('border', 'none');
button.style('border-radius', '5px');
}
function startPresentation() {
if (!serialActive) {
// Attempt to set up serial directly in response to the button click
setUpSerial().then(() => {
console.log("Serial setup complete, starting presentation.");
fullscreen(true);
slideNumber = 0;
startButton.hide();
}).catch(error => {
console.error("Failed to set up serial:", error);
// Inform the user to retry or check permissions
alert("Failed to set up serial. Please ensure you allow serial access and try again.");
});
} else {
console.log("Serial already set up, starting presentation.");
fullscreen(true);
slideNumber = 0;
startButton.hide();
}
}
function getMessage() {
switch (slideNumber) {
case 0:
return "Press 'Continue' to open the gate!"; // Initial message to open the gate
case 1:
return "Let's start the drive! Please turn on the car by clicking the central switch."; // Message to start the car after gate opens
case 2:
return "Proceed to Parking Spot 2"; // Final slide message
}
}
function nextSlide() {
console.log(`Current slide before increment: ${slideNumber}`);
if (slideNumber === 0) {
console.log("Ready to open the gate.");
sendOpenGateCommand(); // Sends command to open the gate
} else {
slideNumber++; // Increment to move to the next slide for other cases
}
console.log(`Moved to slide: ${slideNumber}`);
if (slideNumber < 2) {
continueButton.show();
} else if (slideNumber === 2) {
continueButton.show();
} else {
slideNumber = 0; // Reset slide number
continueButton.hide(); // Hide continue button
console.log("Reset slides and hid continue button.");
}
}
function sendOpenGateCommand() {
console.log("Serial already active. Now sending 'OPEN' command.");
writeSerial('OPEN\n');
slideNumber++; // Increment after sending the command
}
function writeSerial(command) {
const encoder = new TextEncoder();
const writableStream = port.writable;
const writer = writableStream.getWriter();
writer.write(encoder.encode(command))
.then(() => {
console.log(`Command '${command.trim()}' sent successfully.`);
// Check for acknowledgment from the device here if possible
})
.catch(err => {
console.error(`Failed to send command: ${err}`);
})
.finally(() => {
writer.releaseLock();
});
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
startButton.position(width / 2 - startButton.width / 2, height / 2 + 50);
continueButton.position(width / 4 - 50, height - 100); // Adjusted continue button position
}
function readSerial(data) {
console.log(data); // Log the data received from the Arduino
// You can add more code here to handle the data as needed
}
async function setUpSerial() {
if (!serialActive && !port) { // Check if the port is not active and not already opened
try {
port = await navigator.serial.requestPort(); // Request a port
await port.open({ baudRate: 9600 }); // Try to open the port
serialActive = true; // Set flag to true after opening
setupReader(); // Setup reading mechanism
} catch (error) {
console.error('Serial port failed to open:', error);
}
} else {
console.log('Serial port already opened or active.');
}
}
function setupReader() {
const textDecoder = new TextDecoderStream();
port.readable.pipeTo(textDecoder.writable);
reader = textDecoder.readable.getReader();
readLoop();
}
async function readLoop() {
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
// Allow the serial port to be closed cleanly.
reader.releaseLock();
break;
}
if (value) {
readSerial(value); // Pass the data to readSerial
}
}
} catch (error) {
console.error('Error reading from serial port:', error);
}
}