Merge pull request #926 from danielpeintner/issue-925

feat: Add td-tools package to browser bundle
eclipse-thingweb · Feb 16, 2023 · 9d9fdf6 · 9d9fdf6
2 parents d70dcc3 + acd450e
commit 9d9fdf6
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 0 deletions.
diff --git a/examples/browser/aid-tools.html b/examples/browser/aid-tools.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>TD-Tools node-wot tryout</title>
+        <!-- Foundation CSS framework -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.3/css/foundation.min.css" />
+        <!-- Font Awesome icons -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />
+
+        <!-- CodeMirror - normal stuff -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.min.css" />
+        <script
+            type="text/javascript"
+            src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.min.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/mode/javascript/javascript.min.js"
+        ></script>
+        <!-- CodeMirror - foldable -->
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/fold/foldgutter.min.css"
+        />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/fold/foldcode.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/fold/foldgutter.min.js"></script>
+        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/fold/brace-fold.min.js"></script>-->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/fold/xml-fold.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/fold/comment-fold.min.js"></script>
+        <!-- CodeMirror - formatting removed after version 2 ? -->
+        <script src="http://codemirror.net/2/lib/util/formatting.js"></script>
+
+        <!-- defer to not block rendering -->
+        <!-- local vs cdn dependency -->
+        <script src="../../packages/browser-bundle/dist/wot-bundle.min.js" defer></script>
+        <!-- <script
+            src="https://cdn.jsdelivr.net/npm/@node-wot/browser-bundle@latest/dist/wot-bundle.min.js"
+            defer
+        ></script> -->
+        <script src="aid-tools.js" defer></script>
+    </head>
+    <body>
+        <div id="topbar" class="row">
+            <div class="medium-12 columns">
+                <h1>AID Transformation to TD via node-wot Tools</h1>
+
+                <input id="fileInput" type="file" />
+                <!-- <input id="aid_addr" type="url" value="http://plugfest.thingweb.io/examples/aid/AID_v03.json" /> -->
+                <button id="transform" type="button">
+                    Transform AAS in JSON format to a WoT ThingDescription (TD)
+                </button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="medium-12 columns">
+                <textarea id="tdJSON" name="tdJSON" readonly="readonly">
+					Start transformation process
+				</textarea
+                >
+            </div>
+        </div>
+    </body>
+
+    <script type="text/javascript">
+        //<![CDATA[
+        var editorJSON = CodeMirror.fromTextArea(document.getElementById("tdJSON"), {
+            mode: "application/ld+json",
+            styleActiveLine: true,
+            foldGutter: true,
+            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+            lineNumbers: true,
+            lineWrapping: true,
+            readOnly: false,
+        });
+        //]]>
+    </script>
+</html>
diff --git a/examples/browser/aid-tools.js b/examples/browser/aid-tools.js
@@ -0,0 +1,42 @@
+/**
+ * In the browser, node-wot only works in client mode with limited support.
+ *
+ * After adding the following <script> tag to your HTML page:
+ * <script src="https://cdn.jsdelivr.net/npm/@node-wot/browser-bundle@latest/dist/wot-bundle.min.js" defer></script>
+ *
+ * you can access all node-wot functionality / supported packages through the "Wot" global object.
+ * Examples:
+ * var assetInterfaceDescriptionUtil = new Wot.Tools.AssetInterfaceDescriptionUtil();
+ * var servient = new Wot.Core.Servient();
+ * var client = new Wot.Http.HttpClient();
+ *
+ **/
+
+async function transform_to_td() {
+    let fileElement = document.getElementById("fileInput");
+
+    // check if user has selected a file
+    if (fileElement.files.length === 0) {
+        alert("Please choose a file");
+        return;
+    }
+
+    var fileReader = new FileReader();
+    fileReader.onload = function (fileLoadedEvent) {
+        var aidFromFileLoaded = fileLoadedEvent.target.result;
+        const template = { title: "AID-Conversion" };
+        let tdAID = assetInterfaceDescriptionUtil.transformAAS2TD(aidFromFileLoaded, JSON.stringify(template));
+        // let's pretty print the result
+        tdAID = JSON.stringify(JSON.parse(tdAID), null, 2);
+        // Note
+        document.getElementById("tdJSON").value = tdAID;
+        editorJSON.setValue(tdAID);
+    };
+    fileReader.readAsText(fileElement.files[0], "UTF-8");
+}
+
+var assetInterfaceDescriptionUtil = new Wot.Tools.AssetInterfaceDescriptionUtil();
+
+document.getElementById("transform").onclick = () => {
+    transform_to_td();
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/browser-bundle/index.js b/packages/browser-bundle/index.js
@@ -1,6 +1,7 @@
 "use strict";
 
 var Wot = {};
+Wot.Tools = require("@node-wot/td-tools");
 Wot.Core = require("@node-wot/core");
 Wot.Http = require("@node-wot/binding-http");
 Wot.WebSocket = require("@node-wot/binding-websockets");

diff --git a/packages/browser-bundle/package.json b/packages/browser-bundle/package.json
@@ -16,6 +16,7 @@
         "@node-wot/binding-http": "0.8.5",
         "@node-wot/binding-websockets": "0.8.5",
         "@node-wot/core": "0.8.5",
+        "@node-wot/td-tools": "0.8.5",
         "browserify": "^17.0.0",
         "readable-stream4": "npm:readable-stream@^4.0.0",
         "tinyify": "2.5.2",