Hi. I am very new to NodeRed, so thank you in advance for any support.
I am trying to build a data entry form using UI_Builder and have hit a brick wall, so I am just after a little advice. I have tried two methods with some success in each, so I would just like to know which method is correct and how I should proceed.
First attempt, using just the uibuilder node I modified the html code to create a data entry form, with all validation built in. this form is perfect and performs as expected, but I get no output from the node, Code at the bottom.
Second attempt: I have followed an online tutorial using the uib element with JSON and passing the values. I have got this to work, but I can figure out how to better customise the form, as it seems to be built into the element node.
Can anyone offer any advice how to progress, should I try to extract the data from my form or try to customise the working copy.
Thanks for the support.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGV Downtime Log</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
#agvFaultForm {
background: linear-gradient(to right, #09163F, #052F64, #270447);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
margin: auto;
box-sizing: border-box;
}
h2 {
text-align: center;
color: white;
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
word-spacing: 10px;
letter-spacing: 2px;
}
label {
display: block;
margin-bottom: 8px;
color: white;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: white;
color: #09163F;
font-size: 16px;
}
.form-row {
display: flex;
justify-content: space-between;
gap: 15px;
}
.form-row .form-column {
flex: 1;
}
.error-message {
color: red;
display: none;
}
input[type="submit"] {
background-color: #9F2D99;
color: white;
border: none;
cursor: pointer;
padding: 12px;
font-size: 18px;
text-transform: uppercase;
width: 100%;
border-radius: 4px;
}
input[type="submit"]:hover {
background-color: #D259CC;
}
</style>
</head>
<body>
<form id="agvFaultForm">
<h2>AGV DOWNTIME LOG</h2>
<!-- Row 1: Date & Time -->
<div class="form-row">
<div class="form-column">
<label for="date">Date:</label>
<input type="date" id="date" name="Date" required>
</div>
<div class="form-column">
<label for="time">Time:</label>
<input type="time" id="time" name="Time" required>
</div>
</div>
<!-- Row 2: AGV Number & Program Number -->
<div class="form-row">
<div class="form-column">
<label for="agvNumber">AGV Number (001-500):</label>
<input type="number" id="agvNumber" name="AGV_Number" required min="1" max="500">
<span class="error-message" id="agvError">AGV number must be between 1 and 500.</span>
</div>
<div class="form-column">
<label for="programNumber">Program Number (00-99):</label>
<input type="number" id="programNumber" name="Program_Number" required>
<span class="error-message" id="programError">Program number must be numeric.</span>
</div>
</div>
<!-- Row 3: Step & Junction -->
<div class="form-row">
<div class="form-column">
<label for="step">Step (001-999):</label>
<input type="number" id="step" name="Step" required>
</div>
<div class="form-column">
<label for="junction">Junction (000-999):</label>
<input type="number" id="junction" name="Junction">
</div>
</div>
<!-- Row 4: Zone & Station -->
<div class="form-row">
<div class="form-column">
<label for="zone">Zone (000-999):</label>
<input type="number" id="zone" name="Zone">
</div>
<div class="form-column">
<label for="station">Station (000-999):</label>
<input type="number" id="station" name="Station">
</div>
</div>
<!-- Row 5: Fault -->
<div>
<label for="fault">Fault:</label>
<select id="fault" name="Fault" required>
<option value="" disabled selected>Select Fault Type</option>
<option value="Off_Track">Off Track</option>
<option value="Step_Error">Step Error</option>
<option value="Low_Battery">Low Battery</option>
<option value="AGV_Facility">AGV Facility</option>
<option value="Trailer_Facility">Trailer Facility</option>
<option value="Traffic_Management">Traffic Management</option>
<option value="WiFi_Dropout">WiFi Dropout</option>
<option value="Auto_Charge_Facility">Auto Charge Facility</option>
<option value="No_Fault_ID">No Fault ID</option>
</select>
</div>
<!-- Row 6: Comment -->
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="Comment" rows="3"></textarea>
</div>
<!-- Row 7: MTTR & DT -->
<div class="form-row">
<div class="form-column">
<label for="mttr">MTTR:</label>
<input type="number" id="mttr" name="MTTR" required value="0">
</div>
<div class="form-column">
<label for="dt">DT:</label>
<input type="number" id="dt" name="DT" required value="0">
</div>
</div>
<!-- Row 8: Battery Voltage & User ID -->
<div class="form-row">
<div class="form-column">
<label for="battVoltage">Battery Voltage (18.0-25.9):</label>
<input type="number" step="0.1" id="battVoltage" name="BattVoltage" required min="18.0" max="25.9">
<span class="error-message" id="battVoltageError">Battery voltage must be between 18.0 and 25.9.</span>
</div>
<div class="form-column">
<label for="userID">User ID (UK#####):</label>
<input type="text" id="userID" name="userID" required value="UK">
<span class="error-message" id="userIDError">User ID must follow the format UK#####.</span>
</div>
</div>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
<script src="./uibuilderfe.min.js"></script> <!-- Include uibuilder front-end -->
<script>
// Initialize uibuilder
uibuilder.start();
// Set default date and time to current values
window.onload = function() {
let currentDate = new Date();
let date = currentDate.toISOString().split('T')[0];
let time = currentDate.toTimeString().split(':');
let formattedTime = `${time[0]}:${time[1]}`;
document.getElementById('date').value = date;
document.getElementById('time').value = formattedTime;
}
// Handle form submission
document.getElementById('agvFaultForm').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent default form submission
// Capture form data
let formData = {
Date: document.getElementById('date').value,
Time: document.getElementById('time').value,
AGV_Number: document.getElementById('agvNumber').value,
Program_Number: document.getElementById('programNumber').value,
Step: document.getElementById('step').value,
Junction: document.getElementById('junction').value,
Zone: document.getElementById('zone').value,
Station: document.getElementById('station').value,
BattVoltage: document.getElementById('battVoltage').value,
Comment: document.getElementById('comment').value,
MTTR: document.getElementById('mttr').value,
DT: document.getElementById('dt').value,
userID: document.getElementById('userID').value,
Fault: document.getElementById('fault').value
};
// Send the form data to Node-RED via uibuilder
uibuilder.send(formData);
});
</script>
</body>
</html>
