An introduction to the ThingStudio's world with a small practical demonstration LinkedIn reference: https://it.linkedin.com/in/daniele-oriana-08202410a Reference to Pervasive System course (Sapienza University of Rome): http://ichatz.me/index.php/Site/PervasiveSystems2016

1. ThingStudi
Daniele Oriana
Sapienza University of Rome - DIAG Department – Pervasive System
LinkedIn : https://it.linkedin.com/in/daniele-oriana-08202410a
GitHub : https://github.com/daniele-oriana

2. What is ThingStudio?
 Is a platform for creating and deploying real time user interface
for the Internet of Things (IoT) and other connective systems.
 Network of connected objects

3. Main features
HTML for UI interface.
Offered HTML dynamic widgets.
Private data.
Very fast (see the next slides for details).

4. Typical structure
 Security and privacy issues
 Latency because of the round trip
 Data transport is often proprietary

5. ThingStudio’s structure
 100% private and secure
 Ultra fast
 Only user interfaces stored

6. How it works and how use it
 MQTT standard based on pub/sub pattern.
 HTML Template allows the visualization of the data.
 Feed (with relative Topic) as reference point

7. Why MQTT Standard?
 It is a good choice for networks with problems
 The pub/sub pattern is ideal for the internet of things.

8. ThingStudio and IoT
Sensors and
monitoring
system
Your cloud service
ThingStudio
apps
A possible scenario

9. Interaction with ThingStudio (demo)
Our scenario
Java module
monitoring
CPU
HTML
Template
MQTT
Eclipse Paho project for
M2M and IoT

10. Java Code (Publisher side) - Part I
.
.
.
String topic = "/daniele/usage";
String content;
int qos = 2;
String broker = "tcp://mqtt.thingstud.io:1883";
String clientId = "JavaSample";
MemoryPersistence persistence = new MemoryPersistence();
.
.
.
MqttClient sampleClient = new MqttClient(broker, clientId, persistence);
MqttConnectOptions connOpts = new MqttConnectOptions();
connOpts.setCleanSession(true);
connOpts.setUserName("guest");
connOpts.setPassword("guest".toCharArray());
System.out.println("Connecting to broker: "+broker);
sampleClient.connect(connOpts);

11. Java Code (Publisher side) - Part II
while (true) {
for (Double d : getMetric()) {
d=d*100;
int z = d.intValue();
int res = 100-z;
content = String.valueOf(res);
System.out.println("Publishing message: " + content);
MqttMessage message = new MqttMessage(content.getBytes());
message.setQos(qos);
sampleClient.publish(topic, message);
System.out.println("Message published");
}
System.out.println();
Thread.sleep(1000);
} Sigar API and PAHO
Library

12. HTML Template (Subscriber side)
<div style="background-color:SlateBlue;">
<h1 align="center" style="color:Orange ;font-family:verdana;font-size:110%;background-
color:SlateBlue;"><b>TwoSeventyDial - CPU's Usage</b></h1>
<div style="height: 20px;background-color:SlateBlue;"></div>
<p style="color:Snow;background-color:SlateBlue;">This template shows the use of the
widget TwoSeventyDial using the data which come from the analysis of the CPU </p>
<div style="background-color:SlateBlue;height: 20px;"></div>
<ts-twoseventydial value="{{message "Usage"}}" calculations="{{minmax "Usage"}}"
legend="CPU's usage" Units="Percentage" maxValue="100" minValue="0" style="background-
color:SlateBlue;"></ts-twoseventydial>
<div style="height: 20px;"></div>
<p style="color:Snow;">Hit "Debug" below to view the live data being rendered by these
widgets.</p>
</div>

13. Running the app

14. Utilities
 You can find the demo’s app at this link and see the HTML template
in detail:
http://www.thingstud.io/app/pd3qFSR5DsznETX3j/screen/pBEJ
hBLnqRFJNAWvL
 Here you can find the Java module getting data from the CPU
(through Sigar API) and using Paho library:
https://github.com/daniele-oriana/ThingStudio.git

15. Do you need another help?
Use the forum!
Michael Karliner (Founder at ThingStudio)
will answer you.

16. That’s all!