parent
06e8cc2ab6
commit
fadc9520e4
@ -1,5 +0,0 @@
|
||||
#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
70
demo.js
@ -1,70 +0,0 @@
|
||||
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
35
index.html
@ -1,35 +0,0 @@
|
||||
<!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
33
index.php
@ -1,33 +0,0 @@
|
||||
<!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
2
mqttws31.min.js
vendored
File diff suppressed because one or more lines are too long
70
style.css
70
style.css
@ -1,70 +0,0 @@
|
||||
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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user