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