Skip to content

Commit 9ced6fc

Browse files
relu91relu91
authored
Merge pull request #140 from danielpeintner/issue-139-prov
Host and link browser UI on website
2 parents 7dec240 + 5947a39 commit 9ced6fc

4 files changed

Lines changed: 571 additions & 1 deletion

File tree

‎services/introduction.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Playground is a tool to validate TDs and manipulate them for usage in other tool
1818

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

21-
* [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).
21+
* [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).
2222
* [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).
2323

2424
## Online Things for Testing

‎static/webui/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Browser Native node-wot tryout</title>
5+
<!-- Foundation CSS framework -->
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.3/css/foundation.min.css" />
7+
<!-- Font Awesome icons -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />
9+
<link rel="stylesheet" href="styles.css" />
10+
11+
<!-- defer to not block rendering -->
12+
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
13+
<!-- local vs cdn dependency -->
14+
<!-- <script src="../../packages/browser-bundle/dist/wot-bundle.min.js" defer></script> -->
15+
<script
16+
src="https://cdn.jsdelivr.net/npm/@node-wot/browser-bundle@latest/dist/wot-bundle.min.js"
17+
defer
18+
></script>
19+
<script src="index.js" defer></script>
20+
21+
<script>
22+
// Set the default CSS theme and icon library globally
23+
// JSONEditor.defaults.theme = 'foundation5';
24+
JSONEditor.defaults.iconlib = "fontawesome4";
25+
</script>
26+
</head>
27+
<body>
28+
<div id="topbar" class="row">
29+
<div class="medium-12 columns">
30+
<h1>Browsified node-wot</h1>
31+
32+
<!-- Tabs for TD selection -->
33+
<ul class="tabs" data-tab id="td-tabs">
34+
<li class="tab-title active">
35+
<a href="#tab-testthing" id="tab-link-testthing">Test Thing</a>
36+
</li>
37+
<li class="tab-title">
38+
<a href="#tab-smartcoffee" id="tab-link-smartcoffee">Smart Coffee Machine</a>
39+
</li>
40+
<li class="tab-title">
41+
<a href="#tab-counter" id="tab-link-counter">Counter</a>
42+
</li>
43+
<li class="tab-title">
44+
<a href="#tab-custom" id="tab-link-custom">Custom</a>
45+
</li>
46+
</ul>
47+
<div class="tabs-content">
48+
<div class="content active" id="tab-testthing">
49+
<p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
50+
<p>
51+
<strong>TD Description:</strong>
52+
<span class="td-description">Loading...</span>
53+
</p>
54+
</div>
55+
<div class="content" id="tab-smartcoffee">
56+
<p>
57+
Consumed TD at
58+
<a href="" target="_blank" class="td-url"></a>
59+
</p>
60+
<p>
61+
<strong>TD Description:</strong>
62+
<span class="td-description">Loading...</span>
63+
</p>
64+
</div>
65+
<div class="content" id="tab-counter">
66+
<p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
67+
<p>
68+
<strong>TD Description:</strong>
69+
<span class="td-description">Loading...</span>
70+
</p>
71+
</div>
72+
<div class="content" id="tab-custom">
73+
<div class="row">
74+
<div class="medium-12 columns">
75+
<input
76+
id="td_addr"
77+
type="url"
78+
placeholder="Paste the TD URL to start consuming it"
79+
style="width: 100%"
80+
onkeydown="if(event.key==='Enter') document.getElementById('fetch').click()"
81+
/>
82+
</div>
83+
</div>
84+
<div class="row">
85+
<div class="medium-12 columns" style="margin-top: 10px">
86+
<button id="fetch" type="button" class="button">Consume</button>
87+
</div>
88+
</div>
89+
<div id="custom-td-info" style="margin-top: 10px">
90+
<p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
91+
<p>
92+
<strong>TD Description:</strong>
93+
<span class="td-description">Enter a TD URL above to consume it.</span>
94+
</p>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<!-- Error message container -->
100+
<div id="error-container" class="row" style="display: none; margin-top: 10px">
101+
<div class="medium-12 columns">
102+
<div class="alert-box alert" id="error-message">
103+
<span id="error-text"></span>
104+
<a href="#" class="close" id="close-error">&times;</a>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
<div id="interactions" class="row" style="display: none">
111+
<div class="medium-4 columns">
112+
<figure>
113+
<figcaption><h4>Properties</h4></figcaption>
114+
<ul id="properties" class="side-nav"></ul>
115+
</figure>
116+
</div>
117+
<div class="medium-4 columns">
118+
<figure>
119+
<figcaption><h4>Actions</h4></figcaption>
120+
<ul id="actions" class="side-nav"></ul>
121+
</figure>
122+
</div>
123+
<div class="medium-4 columns">
124+
<figure>
125+
<figcaption><h4>Events</h4></figcaption>
126+
<ul id="events" class="side-nav"></ul>
127+
</figure>
128+
</div>
129+
</div>
130+
131+
<div class="row">
132+
<div class="medium-6 columns small-offset-3">
133+
<div id="editor_holder"></div>
134+
</div>
135+
</div>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)