From 0df86f72567ba6eec5f9ff5dbd5a4a291b3ed887 Mon Sep 17 00:00:00 2001 From: Manu Dev Date: Fri, 23 May 2025 04:48:38 +0530 Subject: [PATCH 1/6] feat: enhance browser examples with improved interaction handling and styling --- examples/browser/index.html | 61 ---------- examples/browser/index.js | 131 ++++++++++++++++++--- examples/browser/smart-coffee-machine.html | 4 +- examples/browser/styles.css | 98 +++++++++++++++ 4 files changed, 217 insertions(+), 77 deletions(-) create mode 100644 examples/browser/styles.css diff --git a/examples/browser/index.html b/examples/browser/index.html index b75ba9525..e69de29bb 100644 --- a/examples/browser/index.html +++ b/examples/browser/index.html @@ -1,61 +0,0 @@ - - - - Browser Native node-wot tryout - - - - - - - - - - - - - - - -
-
-

Browsified node-wot

- - -
-
- - -
-
-
-
-
- - diff --git a/examples/browser/index.js b/examples/browser/index.js index 882385ea5..94e846330 100644 --- a/examples/browser/index.js +++ b/examples/browser/index.js @@ -13,19 +13,38 @@ **/ function get_td(addr) { - servient.start().then((thingFactory) => { - helpers - .fetch(addr) - .then((td) => { - thingFactory.consume(td).then((thing) => { - removeInteractions(); - showInteractions(thing); + // Clear all loaded content before loading new TD + const interactions = document.getElementById("interactions"); + if (interactions) { + interactions.style.display = "none"; + } + + servient + .start() + .then((thingFactory) => { + helpers + .fetch(addr) + .then((td) => { + thingFactory + .consume(td) + .then((thing) => { + removeInteractions(); + showInteractions(thing); + }) + .catch((err) => { + window.alert("Failed to consume TD: " + err); + clearAllInteractions(); + }); + }) + .catch((err) => { + window.alert("Failed to fetch TD: " + err); + clearAllInteractions(); }); - }) - .catch((error) => { - window.alert("Could not fetch TD.\n" + error); - }); - }); + }) + .catch((err) => { + window.alert("Failed to start servient: " + err); + clearAllInteractions(); + }); } function showInteractions(thing) { @@ -166,6 +185,90 @@ function removeSchemaEditor() { var servient = new WoT.Core.Servient(); servient.addClientFactory(new WoT.Http.HttpClientFactory()); var helpers = new WoT.Core.Helpers(servient); -document.getElementById("fetch").onclick = () => { - get_td(document.getElementById("td_addr").value); + +// Tab and auto-consume +const TD_URLS = { + counter: "http://plugfest.thingweb.io/counter", + testthing: "http://plugfest.thingweb.io/http-data-schema-thing", + smartcoffee: "http://plugfest.thingweb.io/http-advanced-coffee-machine", }; + +document.addEventListener("DOMContentLoaded", function () { + const tabLinks = [ + { id: "tab-link-custom", tab: "tab-custom" }, + { id: "tab-link-counter", tab: "tab-counter" }, + { id: "tab-link-testthing", tab: "tab-testthing" }, + { id: "tab-link-smartcoffee", tab: "tab-smartcoffee" }, + ]; + const tabContents = tabLinks.map((t) => document.getElementById(t.tab)); + const tdInput = document.getElementById("td_addr"); + const fetchBtn = document.getElementById("fetch"); + + // Clear all interactions and editor + function clearAllInteractions() { + // Hide interactions section + const interactions = document.getElementById("interactions"); + if (interactions) { + interactions.style.display = "none"; + } + // Clear properties, actions, and events lists + ["properties", "actions", "events"].forEach((id) => { + const element = document.getElementById(id); + if (element) element.innerHTML = ""; + }); + // Clear the editor + removeSchemaEditor(); + } + + tabLinks.forEach(({ id, tab }) => { + const link = document.getElementById(id); + if (link) { + link.addEventListener("click", function (e) { + e.preventDefault(); + // Clear any existing content first + clearAllInteractions(); + + // Switch active tab + document.querySelectorAll("#td-tabs .tab-title").forEach((li) => li.classList.remove("active")); + link.parentElement.classList.add("active"); + document.querySelectorAll(".tabs-content .content").forEach((c) => c.classList.remove("active")); + document.getElementById(tab).classList.add("active"); + + // Auto-fill and consume logic + if (tab === "tab-counter") { + tdInput.value = TD_URLS.counter; + get_td(TD_URLS.counter); + } else if (tab === "tab-testthing") { + tdInput.value = TD_URLS.testthing; + get_td(TD_URLS.testthing); + } else if (tab === "tab-smartcoffee") { + tdInput.value = TD_URLS.smartcoffee; + get_td(TD_URLS.smartcoffee); + } + }); + } + }); + + // Dropdown handle + const exampleSelect = document.getElementById("exampleUrls"); + if (exampleSelect) { + exampleSelect.addEventListener("change", function () { + if (this.value) { + tdInput.value = this.value; + // Auto-click + if (fetchBtn) fetchBtn.click(); + } + }); + } + + if (fetchBtn) { + fetchBtn.onclick = () => { + if (tdInput.value) { + get_td(tdInput.value); + } else { + window.alert("Please enter a valid URL or select an example."); + } + }; + } + document.getElementById("tab-link-custom").click(); +}); diff --git a/examples/browser/smart-coffee-machine.html b/examples/browser/smart-coffee-machine.html index c5490597f..6073873ab 100644 --- a/examples/browser/smart-coffee-machine.html +++ b/examples/browser/smart-coffee-machine.html @@ -56,8 +56,8 @@

Smart Coffee Machine

The Thing Description for the coffee machine is available at - http://plugfest.thingweb.io:8083/smart-coffee-machinehttp://plugfest.thingweb.io/http-advanced-coffee-machine.

diff --git a/examples/browser/styles.css b/examples/browser/styles.css new file mode 100644 index 000000000..7d8606d14 --- /dev/null +++ b/examples/browser/styles.css @@ -0,0 +1,98 @@ +/* Base styles */ +body { + padding: 20px; + background: #f5f5f5; + font-family: Arial, sans-serif; +} + +/* Top bar */ +#topbar { + background: white; + padding: 15px; + margin-bottom: 20px; + border: 1px solid #ddd; +} + +/* Tabs */ +.tabs { + margin: 0 0 10px 0; + padding: 0; + list-style: none; + border-bottom: 1px solid #ddd; +} + +.tabs li { + display: inline-block; + margin-right: 5px; +} + +.tabs a { + display: block; + padding: 8px 12px; + text-decoration: none; + color: #333; + background: #f0f0f0; + border: 1px solid #ddd; + border-bottom: none; +} + +.tabs .active a { + background: white; + border-bottom: 1px solid white; + margin-bottom: -1px; +} + +/* Tab content */ +.tabs-content { + background: white; + padding: 15px; + border: 1px solid #ddd; + border-top: none; +} + +/* Form elements */ +#td_addr, +#exampleUrls { + width: 100%; + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ddd; +} + +#fetch { + background: #0066cc; + color: white; + border: none; + padding: 8px 16px; + cursor: pointer; +} + +/* Interactions */ +#interactions { + margin-top: 20px; + background: white; + padding: 15px; + border: 1px solid #ddd; +} + +#interactions h4 { + margin-top: 0; + padding-bottom: 8px; + border-bottom: 1px solid #eee; +} + +/* Navigation */ +.side-nav { + margin: 0; + padding: 0; + list-style: none; +} + +.side-nav li { + padding: 8px 0; + border-bottom: 1px solid #f0f0f0; +} + +.side-nav li:last-child { + border-bottom: none; +} From a1521f85467a652c3b77a847dd48225ab890a540 Mon Sep 17 00:00:00 2001 From: Manu Dev Date: Fri, 23 May 2025 05:21:44 +0530 Subject: [PATCH 2/6] restoring mistake deletion --- examples/browser/index.html | 110 ++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) diff --git a/examples/browser/index.html b/examples/browser/index.html index e69de29bb..040b1dda9 100644 --- a/examples/browser/index.html +++ b/examples/browser/index.html @@ -0,0 +1,110 @@ + + + + Browser Native node-wot tryout + + + + + + + + + + + + + + +
+
+

Browsified node-wot

+ + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+

Counter TD will be loaded and consumed automatically.

+
+
+

Test Thing TD will be loaded and consumed automatically.

+
+
+

Smart Coffee Machine TD will be loaded and consumed automatically.

+
+
+
+
+ + +
+
+
+
+
+ + From ad3d49e9bfc6b0195a144687182e55ae3838ed77 Mon Sep 17 00:00:00 2001 From: Manu Dev Date: Fri, 23 May 2025 05:27:35 +0530 Subject: [PATCH 3/6] fix formattng --- examples/browser/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/browser/index.html b/examples/browser/index.html index 040b1dda9..a2032d687 100644 --- a/examples/browser/index.html +++ b/examples/browser/index.html @@ -2,7 +2,10 @@ Browser Native node-wot tryout + + + Date: Mon, 2 Jun 2025 17:18:56 +0530 Subject: [PATCH 4/6] refactor: moved custom tabs to end. added desciption and td error is showed on the page instead of window --- examples/browser/index.html | 87 +++++++++++++-------- examples/browser/index.js | 146 ++++++++++++++++++++++++++++-------- 2 files changed, 168 insertions(+), 65 deletions(-) diff --git a/examples/browser/index.html b/examples/browser/index.html index a2032d687..a94588839 100644 --- a/examples/browser/index.html +++ b/examples/browser/index.html @@ -6,20 +6,16 @@ - - - + --> + >