Improve styling

mskvortsov · Apr 11, 2024 · d905857 · d905857
1 parent 6b1e41f
commit d905857
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Meshtastic MQTT Monitor
+
+A pure JavaScript application (no server backend used) that shows raw packet
+data acquired from a specified MQTT server.
+
+Nodes should publish their packets in protobuf form by disabling JSON output
+in MQTT settings.
diff --git a/index.html b/index.html
@@ -2,9 +2,10 @@
 <html>
     <head>
         <meta charset="UTF-8"/>
-        <title>Meshtastic Monitor</title>
+        <title>Meshtastic MQTT Monitor</title>
         <link rel="icon" type="image/x-icon" href="https://meshtastic.org/design/web/favicon.ico">
         <link rel="stylesheet" href="meshmon.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.5.0/mqtt.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/protobufjs/7.2.6/protobuf.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
@@ -22,18 +23,29 @@
             </thead>
             <tbody id="tbody"></tbody>
             <tfoot>
-                <tr id="fit-row" style="visibility:collapse"></tr>
+                <tr id="fit-row"></tr>
                 <tr id="status-row" class="status-disconnected">
                     <td id="status-cell"></td>
                 </tr>
                 <tr>
                     <td id="connect-cell">
-                        <label for="mqtt-url">MQTT URL</label>
-                        <input id="mqtt-url" type="text"/>
-                        <label for="mqtt-topic">Topic</label>
-                        <input id="mqtt-topic" type="text"/>
-                        <button id="mqtt-connect">Connect</button>
-                        <button id="clear">Clear</button>
+                        <table class="bottom-table">
+                            <tr>
+                                <td class="left">
+                                    <label for="mqtt-url">MQTT URL</label>
+                                    <input id="mqtt-url" type="text" size="25"/>
+                                    <label for="mqtt-topic">Topic</label>
+                                    <input id="mqtt-topic" type="text" size="10"/>
+                                    <button id="mqtt-connect">Connect</button>
+                                    <button id="clear">Clear</button>
+                                </td>
+                                <td class="right">
+                                    <a href="https://github.com/mskvortsov/meshmon" target="_blank">
+                                        <span class="fa-brands fa-github-alt"></span>
+                                    </a>
+                                </td>
+                            </tr>
+                        </table>
                     </td>
                 </tr>
             </tfoot>

diff --git a/meshmon.css b/meshmon.css
@@ -5,7 +5,7 @@ body {
     font-family: sans-serif;
 }
 
-.main-table table, td {
+.main-table td {
     white-space: nowrap;
     padding-left: 8px;
     padding-right: 8px;
@@ -55,7 +55,7 @@ body {
     font-size: 80%;
 }
 #filter-expr-input {
-    width: 100%;
+    width: 99%;
 }
 .status-disconnected {
     background-color: #ea7a6c;
@@ -69,3 +69,29 @@ body {
 .filter-error {
     background-color: #4b2f36;
 }
+
+#fit-row {
+    visibility: collapse;
+}
+.right {
+    text-align: right;
+    margin-right: 1em;
+}
+.left {
+    text-align: left;
+    margin-left: 1em;
+}
+#connect-cell {
+    padding: 0;
+}
+.bottom-table {
+    padding: 0;
+    width: 100%;
+}
+.bottom-table td {
+    padding: 0;
+    border: 0;
+}
+.bottom-table a {
+    color: white;
+}
diff --git a/meshmon.js b/meshmon.js
@@ -3,7 +3,7 @@
 const protobufsUrl = 'https://raw.githubusercontent.com/meshtastic/protobufs/v2.3.4';
 
 const defaultMqttUrl = 'wss://mqtt.eclipseprojects.io/mqtt';
-const defaultMqttTopic = 'marsupial';
+const defaultMqttTopic = 'msh';
 const defaultKey = CryptoJS.enc.Base64.parse('1PG7OiApB1nwvP+rz05pAQ==');
 const defaultMaxPackets = 2048;
 
@@ -75,7 +75,7 @@ function decodeDefault(proto, name, payload) {
             return v;
         }
     };
-    return `${name}\n${JSON.stringify(info, replacer, 2)}`;
+    return `${name} ${JSON.stringify(info, replacer, 2)}`;
 };
 
 function decodeText(_proto, name, payload) {
@@ -251,8 +251,6 @@ function render(se) {
     }
 
     if (se.packet.decoded) {
-        decodedText += `Decoded `
-
         const port = se.packet.decoded.portnum;
         var decode = null;
         if (port in meshtastic.protos) {