add plugin description to README and made minor cosmetic changes

node-red-node-wot/README.md

@@ -142,4 +142,25 @@ Currently, the supported binding types are HTTP, CoAP, and MQTT. As shown in the
 
 Also, it is unclear how to define the flow when the data type is null.
 
+## Create WoT Client Flow Automaticaly
 
+Provides the ability to automatically create client flows for WoT that can be used from a web browser.
+
+Please install the `@flowfuse/node-red-dashboard` node beforehand.
+Nodes are installed by clicking on the menu icon in the upper right corner and then clicking on Manage palette.
+
+The procedure for creating a client flow and using it from a web browser is as follows.
+
+1. Click on `Create WoT client flow` that appears when you click on the menu icon in the upper right corner.  
+![Menu Cleate WoT Client Flow](screenshots/menu-create-wot-client-flow.png)
+1. When the dialog screen for entering the Thing Description appears, copy and paste the Thing Description and click the `OK` button.
+![Dialog for Create WoT Client Flow](screenshots/dialog-for-create-wot-client-flow.png)
+1. When the new flow screen appears, place the created flow.
+![Created WoT Client Flow](screenshots/created-wot-client-flow.png)
+1. Press the `Deploy` button to execute the created flow.
+1. Display the `Dashboard 2.0` tab and press the `Open Dashboard` button.
+![Dashboard tab](screenshots/dashboard-tab.png)
+1. The WoT client screen will appear in your web browser.
+![WoT Client Screen](screenshots/wot-client-screen.png)
+
+Feel free to modify the created flow to create a client screen of your choice.

node-red-node-wot/plugin-resources-src/node-wot-plugin-lib.ts

@@ -42,7 +42,6 @@ const Y_GAP = 50
 const UIBASE_ID_INDEX = 3
 
 export const createClientFlowUsingDashboard = (tdString: string, existedNodes: any) => {
-    console.log("*** createClientFlowUsingDashboard", tdString, existedNodes)
     let existedUiBaseId
     for (let node of existedNodes) {
         if (node.type === "ui-base" && node.name === "things-dashboard") {
@@ -185,7 +184,6 @@ const replaceParamsAndIds = (
         flowStr = replaceAll(flowStr, `<%y${y}%>`, offsetY)
         offsetY += Y_GAP
     }
-    console.log("*** flowStr", flowStr)
     let flow = JSON.parse(flowStr)
     return { flow, offsetY }
 }
@@ -520,7 +518,7 @@ const PROPERTY_READ_TEMP = `[
         "property": "<%propertyName%>",
         "uriVariables": "{}",
         "observe": true,
-        "x": 380,
+        "x": 480,
         "y": <%y0%>,
         "wires": [
             [
@@ -541,7 +539,7 @@ const PROPERTY_READ_TEMP = `[
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 580,
+        "x": 780,
         "y": <%y0%>,
         "wires": [
             [
@@ -566,7 +564,7 @@ const PROPERTY_READ_TEMP = `[
         "fontSize": 16,
         "color": "#717171",
         "className": "",
-        "x": 780,
+        "x": 1080,
         "y": <%y0%>,
         "wires": []
     }
@@ -611,7 +609,7 @@ const PROPERTY_READ_CHART_TEMP = `[
         "width": 12,
         "height": 6,
         "className": "",
-        "x": 580,
+        "x": 780,
         "y": <%y0%>,
         "wires": [
             []
@@ -659,7 +657,7 @@ const PROPERTY_WRITE_TEMP = `[
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 380,
+        "x": 480,
         "y": <%y0%>,
         "wires": [
             [
@@ -676,7 +674,7 @@ const PROPERTY_WRITE_TEMP = `[
         "thing": "<%common-genid(1)%>",
         "property": "<%propertyName%>",
         "uriVariables": "{}",
-        "x": 580,
+        "x": 780,
         "y": <%y0%>,
         "wires": []
     }
@@ -766,7 +764,7 @@ const ACTION_TEMP = `[
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 380,
+        "x": 480,
         "y": <%y2%>,
         "wires": [
             [
@@ -783,7 +781,7 @@ const ACTION_TEMP = `[
         "thing": "<%common-genid(1)%>",
         "action": "<%actionName%>",
         "uriVariables": "{}",
-        "x": 580,
+        "x": 780,
         "y": <%y2%>,
         "wires": [
             [
@@ -803,7 +801,7 @@ const ACTION_TEMP = `[
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 780,
+        "x": 1080,
         "y": <%y2%>,
         "wires": [
             [
@@ -828,7 +826,7 @@ const ACTION_TEMP = `[
         "fontSize": 16,
         "color": "#717171",
         "className": "",
-        "x": 980,
+        "x": 1380,
         "y": <%y2%>,
         "wires": []
     }
@@ -908,7 +906,7 @@ const EVENT_TEMP = `[
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 380,
+        "x": 480,
         "y": <%y2%>,
         "wires": [
             [
@@ -929,7 +927,7 @@ const EVENT_TEMP = `[
         "maxrows": "10",
         "autocols": true,
         "columns": [],
-        "x": 580,
+        "x": 780,
         "y": <%y2%>,
         "wires": []
     },
@@ -949,7 +947,7 @@ const EVENT_TEMP = `[
         "raw": false,
         "className": "",
         "name": "",
-        "x": 380,
+        "x": 480,
         "y": <%y3%>,
         "wires": []
     }

node-red-node-wot/plugin/node-wot-plugin.html

@@ -4,18 +4,15 @@
     RED.plugins.registerPlugin("create-wot-client-flow", {
         type: "create-client-flow",
         onadd: function() {
+         const plugin = this
           RED.actions.add("create-wot-client-flow:selected", function() {
-            console.log("***** create-wot-client-flow:selected")
             const tdInputNotification = RED.notify(`
                 <div>
                 <div class="form-row">
-                    <label for="td-string">Please paste a Thing description.</label>
-                    <textarea id="td-string" placeholder="thing description" style="width:100%;"></textarea>
+                    <div>Please paste a Thing Description.</div>
+                    <textarea id="td-string" placeholder="Thing Description" style="width:100%;" rows="8"></textarea>
                 </div>
-                <div class="form-row">
-                    <span id="error-display-area" style="color:red"></span>
-                </div>
-                <div>`,
+                </div>`,
                 {
                     modal: true,
                     fixed: true,
@@ -25,7 +22,6 @@
                             text: "Cancel",
                             click: function(e) {
                                 const existedNodes = RED.nodes.createCompleteNodeSet({ credentials: false })
-                                console.log("*** existedNodes", existedNodes)
                                 tdInputNotification.close();
                             }
                         },
@@ -37,10 +33,9 @@
                                     const tdString = $("#td-string").val()
                                     const existedNodes = RED.nodes.createCompleteNodeSet({ credentials: false })
                                     createClientFlowUsingDashboard(tdString, existedNodes)
-                                    console.log("*************** OK")
                                     tdInputNotification.close();
                                 } catch(err) {
-                                    $("#error-display-area").text(err.toString())
+                                    RED.notify(err.toString(), {type:"error", timeout:5000, modal:true})
                                     console.error("error: ", err)
                                 }
                             }
@@ -50,7 +45,7 @@
             });
             RED.menu.addItem("red-ui-header-button-sidemenu", {
                 id: "menu-item-create-wot-client-flow",
-                label: "create wot client flow from wot td",
+                label: "Create WoT client flow",
                 onselect: "create-wot-client-flow:selected"
             });
         }