Skip to content

Host and link browser UI on website #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 27, 2025
Merged

Host and link browser UI on website #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7760301
refactor: copy files for generic UI
danielpeintner Jun 18, 2025
5947a39
refactor: change link to generic UI
danielpeintner Jun 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion services/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Playground is a tool to validate TDs and manipulate them for usage in other tool

Using the tools below, you can interact with different WoT Things over your browser.

* [Browserified node-wot](http://plugfest.thingweb.io/webui/): You can try interacting with different Things using this simple interface. Note that this is just a demo page to showcase the [browser bundle of node-wot](https://github.com/eclipse-thingweb/node-wot/tree/master/packages/browser-bundle).
* [Browserified node-wot](https://thingweb.io/webui/): You can try interacting with different Things using this simple interface. Note that this is just a demo page to showcase the [browser bundle of node-wot](https://github.com/eclipse-thingweb/node-wot/tree/master/packages/browser-bundle).
* [WoT-FXUI](https://github.com/danielpeintner/wot-fxui): JavaFX-based UI to interact with Things (runnable as Web application, local desktop application or as an Android/iOS app).

## Online Things for Testing
Expand Down
137 changes: 137 additions & 0 deletions static/webui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!doctype html>
<html>
<head>
<title>Browser Native 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" />
<link rel="stylesheet" href="styles.css" />

<!-- defer to not block rendering -->
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<!-- 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="index.js" defer></script>

<script>
// Set the default CSS theme and icon library globally
// JSONEditor.defaults.theme = 'foundation5';
JSONEditor.defaults.iconlib = "fontawesome4";
</script>
</head>
<body>
<div id="topbar" class="row">
<div class="medium-12 columns">
<h1>Browsified node-wot</h1>

<!-- Tabs for TD selection -->
<ul class="tabs" data-tab id="td-tabs">
<li class="tab-title active">
<a href="#tab-testthing" id="tab-link-testthing">Test Thing</a>
</li>
<li class="tab-title">
<a href="#tab-smartcoffee" id="tab-link-smartcoffee">Smart Coffee Machine</a>
</li>
<li class="tab-title">
<a href="#tab-counter" id="tab-link-counter">Counter</a>
</li>
<li class="tab-title">
<a href="#tab-custom" id="tab-link-custom">Custom</a>
</li>
</ul>
<div class="tabs-content">
<div class="content active" id="tab-testthing">
<p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
<p>
<strong>TD Description:</strong>
<span class="td-description">Loading...</span>
</p>
</div>
<div class="content" id="tab-smartcoffee">
<p>
Consumed TD at
<a href="" target="_blank" class="td-url"></a>
</p>
<p>
<strong>TD Description:</strong>
<span class="td-description">Loading...</span>
</p>
</div>
<div class="content" id="tab-counter">
<p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
<p>
<strong>TD Description:</strong>
<span class="td-description">Loading...</span>
</p>
</div>
<div class="content" id="tab-custom">
<div class="row">
<div class="medium-12 columns">
<input
id="td_addr"
type="url"
placeholder="Paste the TD URL to start consuming it"
style="width: 100%"
onkeydown="if(event.key==='Enter') document.getElementById('fetch').click()"
/>
</div>
</div>
<div class="row">
<div class="medium-12 columns" style="margin-top: 10px">
<button id="fetch" type="button" class="button">Consume</button>
</div>
</div>
<div id="custom-td-info" style="margin-top: 10px">
<p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
<p>
<strong>TD Description:</strong>
<span class="td-description">Enter a TD URL above to consume it.</span>
</p>
</div>
</div>
</div>

<!-- Error message container -->
<div id="error-container" class="row" style="display: none; margin-top: 10px">
<div class="medium-12 columns">
<div class="alert-box alert" id="error-message">
<span id="error-text"></span>
<a href="#" class="close" id="close-error">&times;</a>
</div>
</div>
</div>
</div>
</div>
<div id="interactions" class="row" style="display: none">
<div class="medium-4 columns">
<figure>
<figcaption><h4>Properties</h4></figcaption>
<ul id="properties" class="side-nav"></ul>
</figure>
</div>
<div class="medium-4 columns">
<figure>
<figcaption><h4>Actions</h4></figcaption>
<ul id="actions" class="side-nav"></ul>
</figure>
</div>
<div class="medium-4 columns">
<figure>
<figcaption><h4>Events</h4></figcaption>
<ul id="events" class="side-nav"></ul>
</figure>
</div>
</div>

<div class="row">
<div class="medium-6 columns small-offset-3">
<div id="editor_holder"></div>
</div>
</div>
</body>
</html>
Loading