TelemetryDashboard: add tool tip for connection menu

ArduPilot · Oct 24, 2024 · a1ffebd · a1ffebd
1 parent fb6ae85
commit a1ffebd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/TelemetryDashboard/TelemetryDashboard.js b/TelemetryDashboard/TelemetryDashboard.js
@@ -30,6 +30,12 @@ function setup_connect(button_svg, button_color) {
     })
     button_svg.onclick = () => { tip.show() }
 
+    // Connection tool tip
+    tippy(tip_div.querySelector('img[id="TT"]'), {
+        appendTo: () => document.body,
+        theme: 'light-border', // differentiate from the interactive tip were in already
+    })
+
     // Close button
     tip_div.querySelector(`svg[id="Close"]`).onclick = () => {
         tip.hide()

diff --git a/TelemetryDashboard/index.html b/TelemetryDashboard/index.html
@@ -167,7 +167,11 @@ <h6>Dashboard settings</h6>
                 <svg id="Close" style="cursor:pointer; max-width:80%; max-height:80%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path style="fill:white" d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/></svg>
             </div>
             <div id="form" style="border-radius:4px; padding:5px; background-color:white; color:#000; flex:1">
-                <label for="target_url">Server address:</label>
+                <label for="target_url">Server address</label>&nbsp
+                <img id="TT" src="../images/question-circle.svg" style="width: 1em;"
+                data-tippy-allowHTML="true"
+                data-tippy-content='Connection address for WebSocket server forwarding raw binary MAVLink, latest PyMAVLink can be used eg: <a href="https://github.com/IamPete1/pymavlink/blob/WebSocket_forwarding_example/examples/mavtcpsniff.py">TCP to WebSocket</a>. 
+                This is read only, MAVLink commands are not sent (including stream rate requests).'/>
                 <br>
                 <input id="target_url" type="url" placeholder="ws://127.0.0.1:5863" required="true" pattern="^(ws|wss)://.*">
                 <br>