MQTT_WebApp/index.html at master · cfeng-dev/MQTT_WebApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Setting character encoding for the document -->
        <meta charset="utf-8" />
        <!-- Title of the Web Page -->
        <title>MQTT Web App</title>
        <!-- Link to the external CSS stylesheet -->
        <link rel="stylesheet" href="style.css" />
        <!-- Link to MQTT library -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js" defer></script>
        <!-- Link to custom JavaScript for MQTT connection handling -->
        <script type="module" src="eventListener.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <header>
                <h1>MQTT Dashboard</h1>
            </header>
            <section>
                <form id="Connection-information-form">
                    <fieldset>
                        <legend>Connection Information</legend>
                        <label>
                            Hostname or IP address:
                            <input id="host" type="text" name="host" value="test.mosquitto.org" />
                        </label>
                        <label>
                            Port Number:
                            <input id="port" type="text" name="port" value="8080" />
                        </label>
                    </fieldset>
                    <br />
                    <fieldset>
                        <legend>Authentication</legend>
                        <label>
                            Username:
                            <input id="username" type="text" name="Username" placeholder="Username" />
                        </label>
                        <label>
                            Password:
                            <input id="password" type="password" name="Password" placeholder="Password" />
                        </label>
                    </fieldset>
                    <br />
                    <fieldset>
                        <legend>Subscription</legend>
                        <label>
                            Topic:
                            <input id="topic_s" type="text" name="topic_s" value="Sensor_KN/#" />
                        </label>
                    </fieldset>
                    <br />
                    <fieldset>
                        <legend>Publish</legend>
                        <label>
                            Topic:
                            <input id="topic_p" type="text" name="topic_p" placeholder="Topic for publishing" />
                        </label>
                        <label>
                            Message:
                            <input id="Message" type="text" name="message" placeholder="Message to publish" />
                        </label>
                    </fieldset>
                    <br />
                    <button type="button" id="connectButton">Connect</button>
                    <button type="button" id="disconnectButton">Disconnect</button>
                    <button type="button" id="checkConnectionButton">Check Connection Status</button>
                    <button type="button" id="publishButton">Publish Message</button>
                    <button type="button" id="clearButton">Clear Display</button>
                </form>
            </section>
            <!-- Section to display MQTT messages and logs -->
            <section id="messages"></section>
        </div>
    </body>
</html>