SlideShare a Scribd company logo
1 of 40
Download to read offline
#FullStackCon 2019 1 http://purl.org/aframe-webthing
Philippe Coval
Fabien Benetou
Merging Realities
Using the Web to Bring the Internet of
Things to High End Augmented Reality
FullStack Conference
#FullStackCon, London UK <2019-07-10>
#FullStackCon 2019 2 http://purl.org/aframe-webthing
$ who are we ?
●
Philippe Coval <https://social.samsunginter.net/@rzr>
– Software engineer for Samsung Open Source Group
– Interest: Web of Things with “Privacy by Design”
●
Fabien Benetou <https://twitter.com/@utopiah>
– WebXR developer consulting for the European Parliament / UNICEF
– Mozilla Tech Speaker
●
Met In 2019 at FOSDEM and mutual inspiration
– Check @MozHacks
#FullStackCon 2019 3 http://purl.org/aframe-webthing
Agenda
1) AR and VR on the web
2) WebThings
3) Binding WebThings and XR
Samsung Open Source Group 4 https://fosdem.org/2018/schedule/event/tizen_rt/
“Simplicity
is the ultimate sophistication.”
~Leonardo da Vinci
#FullStackCon 2019 5 http://purl.org/aframe-webthing
From HTML to 2D
#FullStackCon 2019 6 http://purl.org/aframe-webthing
From 2D to 3D
#FullStackCon 2019 7 http://purl.org/aframe-webthing
Making space : coordinate systems
#FullStackCon 2019 8 http://purl.org/aframe-webthing
From a browser view to an immersive world
#FullStackCon 2019 9 http://purl.org/aframe-webthing
Always on the web
#FullStackCon 2019 10 http://purl.org/aframe-webthing
A view from nowhere?
#FullStackCon 2019 11 http://purl.org/aframe-webthing
Turning heads
#FullStackCon 2019 12 http://purl.org/aframe-webthing
Position but also rotation
#FullStackCon 2019 13 http://purl.org/aframe-webthing
Pose to move in space
#FullStackCon 2019 14 http://purl.org/aframe-webthing
Tracking : outside-in
#FullStackCon 2019 15 http://purl.org/aframe-webthing
Tracking : Inside-out
#FullStackCon 2019 16 http://purl.org/aframe-webthing
Interacting with objects
#FullStackCon 2019 17 http://purl.org/aframe-webthing
Beyond primitives : what's a mesh
#FullStackCon 2019 18 http://purl.org/aframe-webthing
Beyond static object : components
#FullStackCon 2019 19 http://purl.org/aframe-webthing
WebXR examples, AR focus
#FullStackCon 2019 20 http://purl.org/aframe-webthing
WebXR examples, VR focus
21
https://social.samsunginter.net/@rzrSamsung Open Source Group
#FullStackCon 2019 22 http://purl.org/aframe-webthing
Web of Thing aka WoT
●
W3C working group
– Standardization
●
Interaction with devices
– using Web technologies:
●
JSON, RESTful,
●
HTTP, WebSockets, CoAP…
●
Things description
– JSON-TD / JSON-LD
– Semantics: (iot.schema.org)
Simplified Thing Description
{
"name":"Switch",
"id":"urn:dev:wot:…:switch",
"base":"https://…/switch",
"properties": {
"on": {
"type":"boolean",
// ...
"href":"/on"
}
}
// …
"actions": // …
"events": // …
}…
Samsung Open Source Group 23 https://social.samsunginter.net/@rzr
Mozilla WebThing project
●
FLOSS Platform for IoT
– using Web
– with Privacy By Design
●
WebThing API and Schemas
– Can be implemented
– using native (C/C++), Python,
– JS (node.js or IoT.js)
●
Things gateway
– to connect, control (UI)
– and automate webthings
G
D
P
R
G
D
PR
A
rt. 25
A
rt.
25
Samsung Open Source Group 24 https://social.samsunginter.net/@rzr
Javascript the language of Web (of Twins)
●
IoT.js: an alternative runtime inspired by Node.js:
– Powered by JerryScript engine designed for micro-controllers
– Feature: Networking (HTTP, MQTT...) & IO (I2C, GPIO, ADC, PWM)
●
Things can be build using webthing-iotjs module:
– Standalone HTTP servers exposing Mozilla Things API:
●
RESTful architecture: read, update operations
– Devices can be connected to MozIoT webthing gateway
●
ACL (JWT), Remote access using pkgkite tunneling
– Or Web services (OpenData, Social Media etc)
Samsung Open Source Group 25 https://fosdem.org/2018/schedule/event/tizen_rt/
“The secret to getting ahead
is getting started.”
~Mark Twain
#FullStackCon 2019 26 http://purl.org/aframe-webthing
Example: A Robotic arm idea
●
From concept:
– Top level properties: Angles:
●
Torso [-180, +180]
●
Shoulder [0, +90]
●
Arm [0, +90]
●
Hand [0, +45]
●
To early specifications:
– Design Model CAD→ VR/AR
●
Simulation
●
→ Identify integration issues:
– (Location, constraints)
– Implement embedded system
●
Sourcing hardware
●
Controller / Controllee
●
Adjust and iterate
– Thing description+API stay up
#FullStackCon 2019 27 http://purl.org/aframe-webthing
WebThing to XR Integration
●
A-Frame components can be accessed from DOM API
●
So attributes can be updated from JS
– Bind Webthing from URL
●
Using HTTP polling (and/or WebSockets if supported)
– If shared through gateway (server):
●
Set URL + JWT token to requests (client app)
– authorization issued from WebUI (devel menu)
●
It works both way:
– Sensors: (Real to XR) & Actuators (XR to Real)
●
https://www.npmjs.com/package/aframe-webthing
Samsung Open Source Group 28 https://fosdem.org/2018/schedule/event/tizen_rt/
“Any sufficiently
advanced technology
is indistinguishable
from magic.”
~ Arthur C. Clarke
#FullStackCon 2019 29 http://purl.org/aframe-webthing
Digital Twins with WebThing-IoTjs (on STM32)
https://youtu.be/sUayRsjV1Ys
#FullStackCon 2019 30 http://purl.org/aframe-webthing
Live control in 3D using A-Frame on GearVR:
https://youtu.be/s3r8pQtzhAU#wotxr-20190320rzr
#FullStackCon 2019 31 http://purl.org/aframe-webthing
Lets build the Web of Twins ?
●
Digital twins
– Introduced by Dr M. Grieves
(2002)
●
Real time (or deferred) connectivity:
– Between the physical component
●
and its digital counterpart
●
“Devices as service” concept:
●
Applies to many industries:
– City, manufacturing, health,
transport…
●
Useful for:
– Re/Co/Design
– Monitoring, Quality tracking
– Impact analysis:
●
Dependency, process,
lifecycle, financial...
– Digital traces for analytic
– Simulation, AI/ML etc
– Improve decision making
#FullStackCon 2019 32 http://purl.org/aframe-webthing
Contributors welcome !
●
Open Source:
– https://github.com/rzr/aframe-webthing
– https://github.com/rzr/twins
– https://github.com/rzr/webthing-iotjs/wiki
– https://github.com/SamsungInternet/color-sensor-js
●
Infos:
– https://social.samsunginter.net/@rzr/102139995659879619
– https://hacks.mozilla.org/2019/03/connecting-real-things-to-virtual-worlds-using-web/
– https://skillsmatter.com/conferences/11213-fullstack-london-2019-the-conference-on-javascript-node-and-internet-of-things#program
#FullStackCon 2019 33 http://purl.org/aframe-webthing
Community rules @ #FullStackCon
#FullStackCon 2019 34 http://purl.org/aframe-webthing
Summary
●
3D in browser has never been so easy
– Using A-frame framework supported by browsers and devices
●
Ready for JavaScript developers
– Develop for low end microcontrollers using IoT.js
– And support WebThing API to be interacted from the web
●
Direct or connected to gateway (shared securely to apps)
●
Let’s develop the Web of Twins:
– built on FLOSS tools with privacy by design
#FullStackCon 2019 35 http://purl.org/aframe-webthing
Summary
1) AR and VR on the web ✓
#FullStackCon 2019 36 http://purl.org/aframe-webthing
Summary
1) AR and VR on the web ✓
2) WebThings connectivity ✓
#FullStackCon 2019 37 http://purl.org/aframe-webthing
Summary
1) AR and VR on the web ✓
2) WebThings connectivity ✓
3) Binding WebThings and XR ✓
#FullStackCon 2019 38 http://purl.org/aframe-webthing
39
https://social.samsunginter.net/@rzrSamsung Open Source Group
Q&A ?
(or Extras?)
Ask now or online:
●
https://social.samsunginter.net/@rzr
●
https://twitter.com/@utopiah
40
https://social.samsunginter.net/@rzrSamsung Open Source Group
Thanks !
Resources:
Flaticons CC,
PixBay.com
https://Social.SamsungInter.net/@rzr
https://twitter.com/@utopiah

More Related Content

Similar to aframe-webthing-20190710

The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)Samsung Open Source Group
 
Mobile and Social CPS including Augmented Reality
Mobile and Social CPS including Augmented RealityMobile and Social CPS including Augmented Reality
Mobile and Social CPS including Augmented RealityBob Marcus
 
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
Flutter Festival London 2022 - End to end IoT with Dart and FlutterFlutter Festival London 2022 - End to end IoT with Dart and Flutter
Flutter Festival London 2022 - End to end IoT with Dart and FlutterChris Swan
 
OSGeo: projects, incubation and infrastructure
OSGeo: projects, incubation and infrastructureOSGeo: projects, incubation and infrastructure
OSGeo: projects, incubation and infrastructureMarkus Neteler
 
Rtp bluemix meetup june 2016 anki and node red
Rtp bluemix meetup june 2016 anki and node redRtp bluemix meetup june 2016 anki and node red
Rtp bluemix meetup june 2016 anki and node redTom Boucher
 
Building the IoT - Coding Serbia 2015
Building the IoT - Coding Serbia 2015Building the IoT - Coding Serbia 2015
Building the IoT - Coding Serbia 2015Benjamin Cabé
 
IRJET- IOT Dune Buggy –Control it from Anywhere
IRJET- IOT Dune Buggy –Control it from AnywhereIRJET- IOT Dune Buggy –Control it from Anywhere
IRJET- IOT Dune Buggy –Control it from AnywhereIRJET Journal
 
IRJET- IOT Dune Buggy –Control it from Anywhere
IRJET-  	  IOT Dune Buggy –Control it from AnywhereIRJET-  	  IOT Dune Buggy –Control it from Anywhere
IRJET- IOT Dune Buggy –Control it from AnywhereIRJET Journal
 
Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)
Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)
Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)Bhavin Chandarana
 
When Things will Speak "Web" (Lecture)
When Things will Speak "Web" (Lecture)When Things will Speak "Web" (Lecture)
When Things will Speak "Web" (Lecture)Dominique Guinard
 
Marketplace Innovation Report | Q4, 2015
Marketplace Innovation Report | Q4, 2015Marketplace Innovation Report | Q4, 2015
Marketplace Innovation Report | Q4, 2015Endava
 
IoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorialIoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorialSamsung Open Source Group
 
From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...
From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...
From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...William Liang
 
Gluing the IoT world with Java and LoRaWAN
Gluing the IoT world with Java and LoRaWANGluing the IoT world with Java and LoRaWAN
Gluing the IoT world with Java and LoRaWANPance Cavkovski
 

Similar to aframe-webthing-20190710 (20)

web-of-twins-20190604rzr
web-of-twins-20190604rzrweb-of-twins-20190604rzr
web-of-twins-20190604rzr
 
wotxr-20190320rzr
wotxr-20190320rzrwotxr-20190320rzr
wotxr-20190320rzr
 
The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)
 
mozilla-things-fosdem-2019
mozilla-things-fosdem-2019mozilla-things-fosdem-2019
mozilla-things-fosdem-2019
 
Mobile and Social CPS including Augmented Reality
Mobile and Social CPS including Augmented RealityMobile and Social CPS including Augmented Reality
Mobile and Social CPS including Augmented Reality
 
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
Flutter Festival London 2022 - End to end IoT with Dart and FlutterFlutter Festival London 2022 - End to end IoT with Dart and Flutter
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
 
La web de las Cosas
La web de las CosasLa web de las Cosas
La web de las Cosas
 
OSGeo: projects, incubation and infrastructure
OSGeo: projects, incubation and infrastructureOSGeo: projects, incubation and infrastructure
OSGeo: projects, incubation and infrastructure
 
Rtp bluemix meetup june 2016 anki and node red
Rtp bluemix meetup june 2016 anki and node redRtp bluemix meetup june 2016 anki and node red
Rtp bluemix meetup june 2016 anki and node red
 
Building the IoT - Coding Serbia 2015
Building the IoT - Coding Serbia 2015Building the IoT - Coding Serbia 2015
Building the IoT - Coding Serbia 2015
 
IRJET- IOT Dune Buggy –Control it from Anywhere
IRJET- IOT Dune Buggy –Control it from AnywhereIRJET- IOT Dune Buggy –Control it from Anywhere
IRJET- IOT Dune Buggy –Control it from Anywhere
 
IRJET- IOT Dune Buggy –Control it from Anywhere
IRJET-  	  IOT Dune Buggy –Control it from AnywhereIRJET-  	  IOT Dune Buggy –Control it from Anywhere
IRJET- IOT Dune Buggy –Control it from Anywhere
 
Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)
Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)
Smart Cities Part 1: Introduction (Slides for Talk on IoT, Pune Meetup)
 
When Things will Speak "Web" (Lecture)
When Things will Speak "Web" (Lecture)When Things will Speak "Web" (Lecture)
When Things will Speak "Web" (Lecture)
 
Marketplace Innovation Report | Q4, 2015
Marketplace Innovation Report | Q4, 2015Marketplace Innovation Report | Q4, 2015
Marketplace Innovation Report | Q4, 2015
 
IoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorialIoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorial
 
From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...
From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...
From Embedded to IoT and From Cloud to Edge & AIoT -- A computer technology t...
 
Gluing the IoT world with Java and LoRaWAN
Gluing the IoT world with Java and LoRaWANGluing the IoT world with Java and LoRaWAN
Gluing the IoT world with Java and LoRaWAN
 
IoT-javascript-2019-fosdem
IoT-javascript-2019-fosdemIoT-javascript-2019-fosdem
IoT-javascript-2019-fosdem
 
fogcomputing
fogcomputingfogcomputing
fogcomputing
 

More from Phil www.rzr.online.fr (16)

Iot privacy-soscon-2019
Iot privacy-soscon-2019Iot privacy-soscon-2019
Iot privacy-soscon-2019
 
up-down-stream-flows-20190411rzr
up-down-stream-flows-20190411rzrup-down-stream-flows-20190411rzr
up-down-stream-flows-20190411rzr
 
tizen-rt-javascript-20181011
tizen-rt-javascript-20181011tizen-rt-javascript-20181011
tizen-rt-javascript-20181011
 
osvehicle-connected-20160429
osvehicle-connected-20160429osvehicle-connected-20160429
osvehicle-connected-20160429
 
tdc2015-strategy-devel-20150916
tdc2015-strategy-devel-20150916tdc2015-strategy-devel-20150916
tdc2015-strategy-devel-20150916
 
tizen-maintain-20150413rzr
tizen-maintain-20150413rzrtizen-maintain-20150413rzr
tizen-maintain-20150413rzr
 
Iotivity atmel-20150328rzr
Iotivity atmel-20150328rzrIotivity atmel-20150328rzr
Iotivity atmel-20150328rzr
 
Tizen store-z1-20150228rzr
Tizen store-z1-20150228rzrTizen store-z1-20150228rzr
Tizen store-z1-20150228rzr
 
FOSDEM2015: Porting Tizen:Common to open source hardware devices
FOSDEM2015: Porting Tizen:Common to open source hardware devicesFOSDEM2015: Porting Tizen:Common to open source hardware devices
FOSDEM2015: Porting Tizen:Common to open source hardware devices
 
tizen-oshw-tds14sh
tizen-oshw-tds14shtizen-oshw-tds14sh
tizen-oshw-tds14sh
 
Tizen platform-dev-tds14sh
Tizen platform-dev-tds14shTizen platform-dev-tds14sh
Tizen platform-dev-tds14sh
 
Tdc2014 tizen common_20140603
Tdc2014 tizen common_20140603Tdc2014 tizen common_20140603
Tdc2014 tizen common_20140603
 
tizen-upstream-coop-tdc2014-pcoval
tizen-upstream-coop-tdc2014-pcovaltizen-upstream-coop-tdc2014-pcoval
tizen-upstream-coop-tdc2014-pcoval
 
Tizen contrib-fosdem-20140201
Tizen contrib-fosdem-20140201Tizen contrib-fosdem-20140201
Tizen contrib-fosdem-20140201
 
Tizen sdk-solutionslinux-20130529
Tizen sdk-solutionslinux-20130529Tizen sdk-solutionslinux-20130529
Tizen sdk-solutionslinux-20130529
 
Tizen architecture-solutionslinux-20130529
Tizen architecture-solutionslinux-20130529Tizen architecture-solutionslinux-20130529
Tizen architecture-solutionslinux-20130529
 

Recently uploaded

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesSanjay Willie
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 

aframe-webthing-20190710

  • 1. #FullStackCon 2019 1 http://purl.org/aframe-webthing Philippe Coval Fabien Benetou Merging Realities Using the Web to Bring the Internet of Things to High End Augmented Reality FullStack Conference #FullStackCon, London UK <2019-07-10>
  • 2. #FullStackCon 2019 2 http://purl.org/aframe-webthing $ who are we ? ● Philippe Coval <https://social.samsunginter.net/@rzr> – Software engineer for Samsung Open Source Group – Interest: Web of Things with “Privacy by Design” ● Fabien Benetou <https://twitter.com/@utopiah> – WebXR developer consulting for the European Parliament / UNICEF – Mozilla Tech Speaker ● Met In 2019 at FOSDEM and mutual inspiration – Check @MozHacks
  • 3. #FullStackCon 2019 3 http://purl.org/aframe-webthing Agenda 1) AR and VR on the web 2) WebThings 3) Binding WebThings and XR
  • 4. Samsung Open Source Group 4 https://fosdem.org/2018/schedule/event/tizen_rt/ “Simplicity is the ultimate sophistication.” ~Leonardo da Vinci
  • 5. #FullStackCon 2019 5 http://purl.org/aframe-webthing From HTML to 2D
  • 6. #FullStackCon 2019 6 http://purl.org/aframe-webthing From 2D to 3D
  • 7. #FullStackCon 2019 7 http://purl.org/aframe-webthing Making space : coordinate systems
  • 8. #FullStackCon 2019 8 http://purl.org/aframe-webthing From a browser view to an immersive world
  • 9. #FullStackCon 2019 9 http://purl.org/aframe-webthing Always on the web
  • 10. #FullStackCon 2019 10 http://purl.org/aframe-webthing A view from nowhere?
  • 11. #FullStackCon 2019 11 http://purl.org/aframe-webthing Turning heads
  • 12. #FullStackCon 2019 12 http://purl.org/aframe-webthing Position but also rotation
  • 13. #FullStackCon 2019 13 http://purl.org/aframe-webthing Pose to move in space
  • 14. #FullStackCon 2019 14 http://purl.org/aframe-webthing Tracking : outside-in
  • 15. #FullStackCon 2019 15 http://purl.org/aframe-webthing Tracking : Inside-out
  • 16. #FullStackCon 2019 16 http://purl.org/aframe-webthing Interacting with objects
  • 17. #FullStackCon 2019 17 http://purl.org/aframe-webthing Beyond primitives : what's a mesh
  • 18. #FullStackCon 2019 18 http://purl.org/aframe-webthing Beyond static object : components
  • 19. #FullStackCon 2019 19 http://purl.org/aframe-webthing WebXR examples, AR focus
  • 20. #FullStackCon 2019 20 http://purl.org/aframe-webthing WebXR examples, VR focus
  • 22. #FullStackCon 2019 22 http://purl.org/aframe-webthing Web of Thing aka WoT ● W3C working group – Standardization ● Interaction with devices – using Web technologies: ● JSON, RESTful, ● HTTP, WebSockets, CoAP… ● Things description – JSON-TD / JSON-LD – Semantics: (iot.schema.org) Simplified Thing Description { "name":"Switch", "id":"urn:dev:wot:…:switch", "base":"https://…/switch", "properties": { "on": { "type":"boolean", // ... "href":"/on" } } // … "actions": // … "events": // … }…
  • 23. Samsung Open Source Group 23 https://social.samsunginter.net/@rzr Mozilla WebThing project ● FLOSS Platform for IoT – using Web – with Privacy By Design ● WebThing API and Schemas – Can be implemented – using native (C/C++), Python, – JS (node.js or IoT.js) ● Things gateway – to connect, control (UI) – and automate webthings G D P R G D PR A rt. 25 A rt. 25
  • 24. Samsung Open Source Group 24 https://social.samsunginter.net/@rzr Javascript the language of Web (of Twins) ● IoT.js: an alternative runtime inspired by Node.js: – Powered by JerryScript engine designed for micro-controllers – Feature: Networking (HTTP, MQTT...) & IO (I2C, GPIO, ADC, PWM) ● Things can be build using webthing-iotjs module: – Standalone HTTP servers exposing Mozilla Things API: ● RESTful architecture: read, update operations – Devices can be connected to MozIoT webthing gateway ● ACL (JWT), Remote access using pkgkite tunneling – Or Web services (OpenData, Social Media etc)
  • 25. Samsung Open Source Group 25 https://fosdem.org/2018/schedule/event/tizen_rt/ “The secret to getting ahead is getting started.” ~Mark Twain
  • 26. #FullStackCon 2019 26 http://purl.org/aframe-webthing Example: A Robotic arm idea ● From concept: – Top level properties: Angles: ● Torso [-180, +180] ● Shoulder [0, +90] ● Arm [0, +90] ● Hand [0, +45] ● To early specifications: – Design Model CAD→ VR/AR ● Simulation ● → Identify integration issues: – (Location, constraints) – Implement embedded system ● Sourcing hardware ● Controller / Controllee ● Adjust and iterate – Thing description+API stay up
  • 27. #FullStackCon 2019 27 http://purl.org/aframe-webthing WebThing to XR Integration ● A-Frame components can be accessed from DOM API ● So attributes can be updated from JS – Bind Webthing from URL ● Using HTTP polling (and/or WebSockets if supported) – If shared through gateway (server): ● Set URL + JWT token to requests (client app) – authorization issued from WebUI (devel menu) ● It works both way: – Sensors: (Real to XR) & Actuators (XR to Real) ● https://www.npmjs.com/package/aframe-webthing
  • 28. Samsung Open Source Group 28 https://fosdem.org/2018/schedule/event/tizen_rt/ “Any sufficiently advanced technology is indistinguishable from magic.” ~ Arthur C. Clarke
  • 29. #FullStackCon 2019 29 http://purl.org/aframe-webthing Digital Twins with WebThing-IoTjs (on STM32) https://youtu.be/sUayRsjV1Ys
  • 30. #FullStackCon 2019 30 http://purl.org/aframe-webthing Live control in 3D using A-Frame on GearVR: https://youtu.be/s3r8pQtzhAU#wotxr-20190320rzr
  • 31. #FullStackCon 2019 31 http://purl.org/aframe-webthing Lets build the Web of Twins ? ● Digital twins – Introduced by Dr M. Grieves (2002) ● Real time (or deferred) connectivity: – Between the physical component ● and its digital counterpart ● “Devices as service” concept: ● Applies to many industries: – City, manufacturing, health, transport… ● Useful for: – Re/Co/Design – Monitoring, Quality tracking – Impact analysis: ● Dependency, process, lifecycle, financial... – Digital traces for analytic – Simulation, AI/ML etc – Improve decision making
  • 32. #FullStackCon 2019 32 http://purl.org/aframe-webthing Contributors welcome ! ● Open Source: – https://github.com/rzr/aframe-webthing – https://github.com/rzr/twins – https://github.com/rzr/webthing-iotjs/wiki – https://github.com/SamsungInternet/color-sensor-js ● Infos: – https://social.samsunginter.net/@rzr/102139995659879619 – https://hacks.mozilla.org/2019/03/connecting-real-things-to-virtual-worlds-using-web/ – https://skillsmatter.com/conferences/11213-fullstack-london-2019-the-conference-on-javascript-node-and-internet-of-things#program
  • 33. #FullStackCon 2019 33 http://purl.org/aframe-webthing Community rules @ #FullStackCon
  • 34. #FullStackCon 2019 34 http://purl.org/aframe-webthing Summary ● 3D in browser has never been so easy – Using A-frame framework supported by browsers and devices ● Ready for JavaScript developers – Develop for low end microcontrollers using IoT.js – And support WebThing API to be interacted from the web ● Direct or connected to gateway (shared securely to apps) ● Let’s develop the Web of Twins: – built on FLOSS tools with privacy by design
  • 35. #FullStackCon 2019 35 http://purl.org/aframe-webthing Summary 1) AR and VR on the web ✓
  • 36. #FullStackCon 2019 36 http://purl.org/aframe-webthing Summary 1) AR and VR on the web ✓ 2) WebThings connectivity ✓
  • 37. #FullStackCon 2019 37 http://purl.org/aframe-webthing Summary 1) AR and VR on the web ✓ 2) WebThings connectivity ✓ 3) Binding WebThings and XR ✓
  • 38. #FullStackCon 2019 38 http://purl.org/aframe-webthing
  • 39. 39 https://social.samsunginter.net/@rzrSamsung Open Source Group Q&A ? (or Extras?) Ask now or online: ● https://social.samsunginter.net/@rzr ● https://twitter.com/@utopiah
  • 40. 40 https://social.samsunginter.net/@rzrSamsung Open Source Group Thanks ! Resources: Flaticons CC, PixBay.com https://Social.SamsungInter.net/@rzr https://twitter.com/@utopiah