I have a question, so please, if you know how I can do this, tell me. I need to implement the following in Rust: Develop a graphical user interface application in the chosen programming language that simulates the operation of three stopwatches controlled by three threads, each performing incremental increases of one second, three seconds, and six seconds, respectively. Each stopwatch should feature four buttons (Start, Pause, Resume, Stop (kill the thread)), and a general button that pauses the progress of all three stopwatches for five seconds.
Here My codes: In this Order, HTML, JAVASCRIPT, RUST MAIN
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRONOMETROS</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.contenedor {
width: 200px;
height: 350px;
background-color: #1B72E4 ;
border: 2px solid #3777CB ;
text-align: center;
padding: 20px;
margin-right: 40px;
border-radius: 20px;
}
.resultado {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: white;
border: 2px solid lightgrey;
font-size: 35px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-bottom: 50px;
width: 200px;
height: 50px;
border-radius: 20px;
margin-top: 10px;
}
.botonInicio {
width: 100%;
padding: 10px 0;
margin-top: 10px;
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
letter-spacing: 2px;
}
.botonPausar {
width: 100%;
padding: 10px 0;
margin-top: 10px;
background-color: #EE7E21;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
letter-spacing: 1px;
}
.botonReiniciar {
width: 100%;
padding: 10px 0;
margin-top: 10px;
background-color:#F2D30A ;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-radius: 5px;
letter-spacing: 1px;
}
.botonDetener {
width: 100%;
padding: 10px 0;
margin-top: 10px;
background-color: #DD0A03 ;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
letter-spacing: 1px;
}
.botonDetenerTodos {
position: fixed;
width: 815px;
height: 50px;
bottom: 45px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
left: 50%;
transform: translateX(-53.1%);
background-color: #DD0A03 ;
text-align: center;
color:white;
letter-spacing: 2px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="contenedor">
<div id="crono1" class="resultado">5</div>
<div>
<button class="botonInicio" id="iniciar1" >INICIAR</button>
<button class="botonPausar" id="pausar1" >PAUSAR</button>
<button class="botonReiniciar" id="reiniciar1">REINICIAR</button>
<button class="botonDetener" id="detener1" >DETENER</button>
</div>
</div>
<div class="contenedor">
<div id="crono2" class="resultado">10</div>
<div>
<button class="botonInicio" id="iniciar2" >INICIAR</button>
<button class="botonPausar" id="pausar2" >PAUSAR</button>
<button class="botonReiniciar" id="reiniciar2">REINICIAR</button>
<button class="botonDetener" id="detener2" >DETENER</button>
</div>
</div>
<div class="contenedor">
<div id="crono3" class="resultado">5</div>
<div>
<button class="botonInicio" id="iniciar3">INICIAR</button>
<button class="botonPausar" id="pausar3">PAUSAR</button>
<button class="botonReiniciar" id="reiniciar3" >REINICIAR</button>
<button class="botonDetener" id="detener3" >DETENER</button>
</div>
</div>
<div>
<button class="botonDetenerTodos" id="DetenerTodos">DETENER TODOS LOS CRONOMETROS POR 5 SEGUNDOS</button>
</div>
<script src="./main.js"></script>
</body>
</html>
Java Script
const iniciar1 = document.querySelector('#iniciar1')
const iniciar2 = document.querySelector('#iniciar2')
const iniciar3 = document.querySelector('#iniciar3')
const pausar1 = document.querySelector('#pausar1')
const pausar2 = document.querySelector('#pausar2')
const pausar3 = document.querySelector('#pausar3')
const reiniciar1 = document.querySelector('#reiniciar1')
const reiniciar2 = document.querySelector('#reiniciar2')
const reiniciar3 = document.querySelector('#reiniciar3')
const detener1 = document.querySelector('#detener1')
const detener2 = document.querySelector('#detener2')
const detener3 = document.querySelector('#detener3')
const { invoke } = window.__TAURI__.tauri;
const detenerTodos = document.querySelector('#DetenerTodos')
iniciar1.addEventListener('click', () => {
invoke('enviarAccion', { accion: 'detener1' })
});
iniciar2.addEventListener('click', () => {
invoke('greet')
})
iniciar3.addEventListener('click', () => {
invoke('greet')
})
pausar1.addEventListener('click', () => {
invoke('greet')
})
pausar2.addEventListener('click', () => {
invoke('greet')
})
pausar3.addEventListener('click', () => {
invoke('greet')
})
reiniciar1.addEventListener('click', () => {
invoke('greet')
})
reiniciar2.addEventListener('click', () => {
invoke('greet')
})
reiniciar3.addEventListener('click', () => {
invoke('greet')
})
detener1.addEventListener('click', () => {
invoke('greet')
})
detener2.addEventListener('click', () => {
invoke('greet')
})
detener3.addEventListener('click', () => {
invoke('greet')
})
detenerTodos.addEventListener('click', () => {
invoke('greet')
})
let greetInputEl;
let greetMsgEl;
async function greet() {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
}
window.addEventListener("DOMContentLoaded", () => {
greetInputEl = document.querySelector("#greet-input");
greetMsgEl = document.querySelector("#greet-msg");
document.querySelector("#greet-form").addEventListener("submit", (e) => {
e.preventDefault();
greet();
});
});
RUST MAIN
use std::sync::mpsc;
use std::thread;
use std::time::Duration;
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn iniciar(accion: String) -> String{
println!("sirve:");
format!("{}",accion).into()
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![iniciar])
.run(tauri::generate_context!())
.expect("error while running tauri application");
let (_in1, r1) = mpsc::channel();
let mut activo_1 = false;
let mut contador1 = 0;
let mut mensaje1 = "";
thread::spawn(move || {
loop {
while activo_1 {
thread::sleep(Duration::new(1, 0));
contador1 += 1;
println!( "ads {}",contador1);
mensaje1 = r1.recv().unwrap();
if mensaje1 == "pausar" {
activo_1 = false;
}
if mensaje1 == "detener" {
activo_1 = false;
}
if mensaje1 == "reiniciar" {
contador1 = 0;
activo_1 = false;
}
}
mensaje1 = r1.recv().unwrap();
if mensaje1 == "iniciar" {
activo_1 = true;
}
if mensaje1 == "detener" {
break;
}
}
});
let (_in2, r3) = mpsc::channel();
let mut activo_3 = false;
let mut contador3 = 0;
let mut mensaje = "";
thread::spawn(move || {
loop {
while activo_3 {
thread::sleep(Duration::new(3, 0));
contador3 += 1;
mensaje = r3.recv().unwrap();
if mensaje == "pausar" {
activo_3 = false;
}
if mensaje == "detener" {
activo_3 = false;
}
if mensaje == "reiniciar" {
contador3 = 0;
activo_3 = false;
}
}
mensaje = r3.recv().unwrap();
if mensaje == "iniciar" {
activo_3 = true;
}
if mensaje == "detener" {
break;
}
}
});
let mut activo_6 = false;
let mut contador6 = 0;
let mut mensaje6 = "";
let (_in3, r6) = mpsc::channel();
thread::spawn(move || {
loop {
while activo_6 {
thread::sleep(Duration::new(6, 0));
contador6 += 1;
mensaje6 = r6.recv().unwrap();
if mensaje6 == "pausar" {
activo_6 = false;
}
if mensaje6 == "detener" {
activo_6 = false;
}
if mensaje6 == "reiniciar" {
contador6 = 0;
activo_6 = false;
}
}
mensaje6 = r6.recv().unwrap();
if mensaje6 == "iniciar" {
activo_6 = true;
}
if mensaje6 == "detener" {
break;
}
}
});
}
However, I’ve been using Tauri, and I need to pass a parameter to my main function to execute the threads in my graphical user interface application. Could you please advise on the best approach to use my buttons to activate the stopwatches in the main function? Specifically, I’ll need the listener to pass a String to the main function when a button is clicked
