ECET 35901
Computer Based Data Acquisition Applications
Summer 2025
[Practical Assignment 5]
Microwave User Interface (UI)
Objectives:
• To test your learning from the previous assignment’s material.
• Create a more complex UI flow, a microwave model.
Hardware Requirements:
• Node-RED and/or Docker-installed Raspberry Pi 4 Model B, a PC, or a Desktop
The previous labs covered basic Node-RED concepts and the UI node library. This lab requires more complex use of Node-RED and the UI nodes. You must create a model microwave using the Node-RED code, and Node-RED UI that receives a time in minutes and seconds, and when a button is pressed, a numerical display will begin counting down. Once the countdown is over, the LED will turn yellow and display “your dish is ready.”The numerical display should show time in minutes and seconds remaining.
[Node-RED time keeping]
Once you have learned the essentials, we will learn how to create a simple user interface. You will need to utilize the Node-RED Dashboard node library. Make sure that you installed the “node-red-dashboard” libary in your Palette (fig.1). You first must create a flow using nodes and JavaScript functions to create a “clock” that can count down, and inject a payload when the countdown is over, as well as injecting the numerical time every second, to be displayed in the UI. You can achieve this any way you like but one method can utilize the inject timestamp node and configure it to repeat injections at 1 second intervals (see fig. 1). You must change the output from timestamp to your desired countdown time. This can be done with a switch node paired with a JavaScript function. You must then wire the countdown to your UI output elements, converting the variables accordingly. For example, numerical outputs only accept numerical inputs, and the LED output only accepts Boolean inputs.
Figure 1 Inject nod configuration
[UI input and output]
After creating the timekeeper, it is just a matter of retrieving the inputs from the UI and outputting the results to the UI. You can optionally create UI element groupings to make your UI look more organized, as well as adjusting the placement of UI label names. This is done by opening the configuration menu of a UI node, and next to group, click the edit icon, then name the group and then click update. See fig. 2.
Figure 2 Goup configuration
Your UI should look something similar to fig. 3 or fig. 4.
Figure 3 A sample UI - No groups
Figure 4A sample UI - with groups
Figure 5 Microwave flow
Observe fig. 5.: there are three inputs “Start Countdown”, “Min”, and “seconds. ” The Min and seconds inputs store the received inputs in their respective variables using the switch node (yellow nodes). These nodes convert the inputs to a variable that can be accessed anywhere in the current flow. These variables are then obtained by the “function 1” node (orange node), which takes all the received inputs and performs the operations. The microwave will perform the functionalities explained at the beginning of this guideline or below:
• Receives a time in minutes and seconds as inputs
• When a start button is pressed, a numerical display will begin counting down. The numerical display should show time in minutes and seconds remaining
• Once the countdown is over, the LED will turn yellow and display “your dish is ready. ”
Take the below JavaScript code as your reference in the “function 1” node. Figure out the blanks by yourself.
// Initialize countdown variables
var minutes = 0;
var seconds = 0;
var totalTime = 0;
var countdownInterval;
// Function to initialize countdown
function initializeCountdown() {
var minutes = Blank || 0;
var seconds = Blank || 0;
totalTime = Blank; // Total time in second
msg.payload = "";
uiTextSend(msg.payload);
node.send(msg);
// Set interval to update countdown every second
countdownInterval = setInterval(updateCountdown, 1000);
}
// Function to update countdown timer
function updateCountdown() {
var minutesRemaining = Blank;
var secondsRemaining = Blank;
// Update payload with countdown time
msg.payload = {
minutes: minutesRemaining,
seconds: secondsRemaining
};
// Send updated payload to output
node.send(msg);
// Update UI with remaining time
msg.payload = minutesRemaining + "m " + secondsRemaining + "s";
uiTextSend(msg.payload); // Update UI
// Decrement total time
Blank;
// Stop countdown if time is up
if (Blank) {
clearInterval(countdownInterval);
Blank; // Your message
Blank;// Update UI
node.send(msg);
}
}
// Initialize countdown when input is received
initializeCountdown();
// Function to send message to ui_text node
function uiTextSend(payload) {
// Send message to ui_text node
return {
payload: payload
};
}
[Submission]
Once you complete the dashboard microwave flow,
1) export it as a .JSON file and submit the file in the Brightspace assignment folder.
2) Make a short video (50sec ~1min) to demonstrate the functionality. Just provide the video link for me to check (do not upload the video to Brightspace directly) . Otherwise, some penalty will apply.