adelorenzo/edge_form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Adolfo Delorenzo 2022-12-20 18:38:32 -06:00
parent f05f9635e0
commit 06e8cc2ab6
7 changed files with 216 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Dockerfile Normal file
View File

@ -0,0 +1,5 @@
#FROM alastairhm/alpine-lighttpd-php:latest
FROM caddy/caddy
#COPY --chown=www-data index.html demo.js style.css mqttws31.min.js /var/www/localhost/htdocs/
COPY index.html demo.js style.css mqttws31.min.js usr/share/caddy/
# COPY --chown=www-data name.txt /var/www/

70
demo.js Normal file
View File

@ -0,0 +1,70 @@
function startConnect(){
clientID = "clientID - "+parseInt(Math.random() * 100);
host = document.getElementById("host").value;
port = document.getElementById("port").value;
userId = document.getElementById("username").value;
passwordId = document.getElementById("password").value;
document.getElementById("messages").innerHTML += "<span> Connecting to " + host + "on port " +port+"</span><br>";
document.getElementById("messages").innerHTML += "<span> Using the client Id " + clientID +" </span><br>";
client = new Paho.MQTT.Client(host,Number(port),clientID);
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({
onSuccess: onConnect
// userName: userId,
// passwordId: passwordId
});
}
function onConnect(){
topic = document.getElementById("topic_s").value;
document.getElementById("messages").innerHTML += "<span> Subscribing to topic "+topic + "</span><br>";
client.subscribe(topic);
}
function onConnectionLost(responseObject){
document.getElementById("messages").innerHTML += "<span> ERROR: Connection is lost.</span><br>";
if(responseObject !=0){
document.getElementById("messages").innerHTML += "<span> ERROR:"+ responseObject.errorMessage +"</span><br>";
}
}
function onMessageArrived(message){
console.log("OnMessageArrived: "+message.payloadString);
document.getElementById("messages").innerHTML += "<span> Topic:"+message.destinationName+"| Message : "+message.payloadString + "</span><br>";
}
function startDisconnect(){
client.disconnect();
document.getElementById("messages").innerHTML += "<span> Disconnected. </span><br>";
}
function publishMessage(){
msg = document.getElementById("Message").value;
topic = document.getElementById("topic_p").value;
Message = new Paho.MQTT.Message(msg);
Message.destinationName = topic;
client.send(Message);
document.getElementById("messages").innerHTML += "<span> Message to topic "+topic+" is sent </span><br>";
}

35
index.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>High Voltages - MQTT</title>
<link rel="stylesheet" href="style.css">
<script src="mqttws31.min.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<h1 id="Main_heading"> <b>High Voltages MQTT Dashboard</b></h1><br><br>
<form id="connection-information-form">
<b>Hostname or IP Address and Port Number:</b>
<input id="host" type="text" name="host" placeholder="broker address">
<input id="port" type="text" name="port" value="8080"><br>
<b>Username and Password:</b>
<input id="username" type="text" name="Username" placeholder="Username"><br>
<input id="password" type="password" name="password" placeholder="password"><br>
<b>Subscription topic:</b>
<input id="topic_s" type="text" name="topic_s" value="#"><br><br>
<input type="button" onclick="startConnect()" value="Connect">
<input type="button" onclick="startDisconnect()" value="Disconnect"> <br>
<br><b>Publish Topic and Message:</b>
<input id="topic_p" type="text" name="topic_p" placeholder="Publish topic">
<input id="Message" type="text" name="message" placehilder="Message">
<input type="button" onclick="publishMessage()" value="Publish">
</form>
<div id="messages"></div>
</div>
</body>
</html>

33
index.php Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Name form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<br><br>
<center>
<form method="post" action="index.php">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</center>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_POST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
// echo $name;
echo "<p align=center>Name submitted</p>";
}
}
$myfile = fopen("/var/www/name.txt", "a") or die("Unable to open file!");
fwrite($myfile, "\n". $name);
fclose($myfile);
?>
</body>
</html>

2
mqttws31.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
name.txt Normal file
View File

@ -0,0 +1 @@
Adolfo Delorenzo

70
style.css Normal file
View File

@ -0,0 +1,70 @@
body {
font-family: "Open Sans", sans-serif;
}
.wrapper {
margin-left: auto;
margin-right: auto;
width: 60%;
padding-right: 10px;
padding-left: 10px;
}
input {
width : 150px;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type=text] {
width:100%;
padding: 12px 12px;
height: 10px;
margin: 8px 0;
}
input[type=password] {
width:100%;
padding: 12px 12px;
height: 10px;
margin: 4px 2px;
}
input[type=button] {
background-color: gray;
border: none;
color: black;
text-decoration: none;
font-weight: bold;
height: 20px;
margin: 4px 2px;
cursor: pointer;
}
input[type=text]:focus {
background-color: lightblue;
}
input[type=button]:hover {
background-color: #686868;
}
#Main_heading{
text-align: center;
}
#messages {
margin-top: 12px;
margin-bottom: 12px;
padding: 12px;
width:100%;
display: inline-block;
border:1px solid black;
max-height: 250px;
min-height: 250px;
overflow: scroll;
}
#messages span {
overflow-y: scroll;
overflow: scroll;
}