Command demo: get_key_info (#403)

arx-research · Sep 12, 2024 · 007a801 · 007a801
1 parent b37a89b
commit 007a801
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/core/src.ts/web/examples/get_key_info.html b/core/src.ts/web/examples/get_key_info.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <!--
+    LibHaLo - Programmatically interact with HaLo tags from the web browser, mobile application or the desktop.
+    Copyright by Arx Research, Inc., a Delaware corporation
+    License: MIT
+    -->
+        <title>LibHaLo Demo</title>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+        <script type="text/javascript">
+            // ensure the library is always fully reloaded
+            document.write('<script src="../dist/libhalo.js?_v=' + (
+            Math.random() + '') + '"></scr' + 'ipt>');
+        </script>
+    </head>
+    <body>
+        <div class="container">
+            <h1>LibHaLo Demo</h1>
+            <p class="text-muted">
+                Get information about the specific key slot.
+            </p>
+            <div class="mb-3">
+                <label class="form-label">Target key slot</label>
+                <input type="text" class="form-control" id="keyNo" value="1" placeHolder="e.g. 2">
+            </div>
+
+            <button class="btn btn-primary" onclick="btnClicked()">Target key slot</button>
+            <p id="noArgsError" class="text-danger mt-3" style="display:none">Please provide target key slot</p>
+
+            <pre id="statusText" style="word-break: break-all; white-space: pre-wrap;"></pre>
+
+            <script type="text/javascript">
+                function log(data) {
+                    console.log(data);
+                    document
+                        .getElementById('statusText')
+                        .innerText += '\n' + data;
+                }
+
+                async function btnClicked() {
+                    // Extract keyNo from input field
+                    const keyNo = document
+                        .getElementById('keyNo')
+                        .value;
+
+                    // Handle displaying/hiding the noArgsError message
+                    if (!keyNo) {
+                        document
+                            .getElementById('noArgsError')
+                            .style
+                            .display = 'block';
+                        return;
+                    } else {
+                        document
+                            .getElementById('noArgsError')
+                            .style
+                            .display = 'none';
+                    }
+
+                    // Prepare payload
+                    const cmd = {
+                        name: "get_key_info",
+                        keyNo
+                    };
+
+                    try {
+                        log("Executing command: " + JSON.stringify(cmd));
+                        let result = await execHaloCmdWeb(cmd);
+                        log(JSON.stringify(result));
+                    } catch (e) {
+                        log(JSON.stringify(e));
+                    }
+                }
+            </script>
+        </div>
+    </body>
+</html>
diff --git a/core/src.ts/web/examples/index.html b/core/src.ts/web/examples/index.html
@@ -26,6 +26,7 @@ <h1>LibHaLo Demos</h1>
     <li><a href="graffiti.html">graffiti.html - Graffiti (overridable text slot) demo</a></li>
     <li><a href="key_backup.html">key_backup.html - Key backup demo</a></li>
     <li><a href="get_data_struct.html">get_data_struct.html - Retrieve data demo</a></li>
+    <li><a href="get_key_info.html">get_key_info.html - Key slot information demo</a></li>
   </ul>
 </div>
 </body>