diff --git a/node-red-node-wot/README.md b/node-red-node-wot/README.md index 4135a4e..719c6d1 100644 --- a/node-red-node-wot/README.md +++ b/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. diff --git a/node-red-node-wot/plugin-resources-src/node-wot-plugin-lib.ts b/node-red-node-wot/plugin-resources-src/node-wot-plugin-lib.ts index 007becb..c6d4068 100644 --- a/node-red-node-wot/plugin-resources-src/node-wot-plugin-lib.ts +++ b/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": [] } diff --git a/node-red-node-wot/plugin/node-wot-plugin.html b/node-red-node-wot/plugin/node-wot-plugin.html index da52292..3d628a9 100644 --- a/node-red-node-wot/plugin/node-wot-plugin.html +++ b/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(`
- - +
Please paste a Thing Description.
+
-
- -
-
`, +
`, { 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" }); } diff --git a/node-red-node-wot/screenshots/created-wot-client-flow.png b/node-red-node-wot/screenshots/created-wot-client-flow.png new file mode 100644 index 0000000..c20db14 Binary files /dev/null and b/node-red-node-wot/screenshots/created-wot-client-flow.png differ diff --git a/node-red-node-wot/screenshots/dashboard-tab.png b/node-red-node-wot/screenshots/dashboard-tab.png new file mode 100644 index 0000000..aa99e6f Binary files /dev/null and b/node-red-node-wot/screenshots/dashboard-tab.png differ diff --git a/node-red-node-wot/screenshots/dialog-for-create-wot-client-flow.png b/node-red-node-wot/screenshots/dialog-for-create-wot-client-flow.png new file mode 100644 index 0000000..32e0249 Binary files /dev/null and b/node-red-node-wot/screenshots/dialog-for-create-wot-client-flow.png differ diff --git a/node-red-node-wot/screenshots/menu-create-wot-client-flow.png b/node-red-node-wot/screenshots/menu-create-wot-client-flow.png new file mode 100644 index 0000000..54ec961 Binary files /dev/null and b/node-red-node-wot/screenshots/menu-create-wot-client-flow.png differ diff --git a/node-red-node-wot/screenshots/wot-client-screen.png b/node-red-node-wot/screenshots/wot-client-screen.png new file mode 100644 index 0000000..26af205 Binary files /dev/null and b/node-red-node-wot/screenshots/wot-client-screen.png differ