SlideShare a Scribd company logo
Remote controlling
Parrot AR Drone
Josh Long
@starbuxman
Spring developer advocate



Peter Lehto
@peter_lehto
Vaadin Expert & trainer
GWT,
Vaadin,
Spring Boot
Remote controlling
Parrot AR Drone
Josh Long
@starbuxman
Spring developer advocate



Peter Lehto
@peter_lehto
Vaadin Expert & trainer
GWT,
Vaadin,
Spring Boot
Vaadin &
GWT
Spring Boot
Vaadin4Spring
QA
How to
get
started?
Drone
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
User interface
framework for rich
web applications
Developer
Productivity
Rich
UX
UI
Browser
UI
Browser
Widgets
Theme
UI
Browser
Widgets
Theme
UI
Browser
Backend
Server
Widgets
Theme
UI
Browser
Backend
Server
Widgets
Service (GWT-RPC)
Backend
Server
UI Backend
Server
Browser
UI Backend
Server
Widgets Components
Theme
Browser
UI Backend
Server
Widgets Components
Theme
UI
Browser
UI Backend
Server
Widgets Components
Service (GWT-RPC)
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
> var foo = [0];
> foo == !foo;
> var foo = [0];
> foo == !foo;
> true
> [] + [];
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true
> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true
User Interface
Components
User Interface
Components
How does Vaadin work, really?
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
JogDial jogDial = new JogDial(Size.MEDIUM);
TextField x = new TextField();
TextField y = new TextField();
JogDial jogDial = new JogDial(Size.MEDIUM);
TextField x = new TextField();
TextField y = new TextField();
jogDial.addMoveListener(e -> {
x.setValue(e.getX());
y.setValue(e.getY());
});
JogDial jogDial = new JogDial(Size.MEDIUM);
TextField x = new TextField();
TextField y = new TextField();
jogDial.addMoveListener(e -> {
x.setValue(e.getX());
y.setValue(e.getY());
});
layout.addComponents(x, y, jogDial);
• Loader page
• CSS Theme
• Images
• JavaScript
• Loader page
• CSS Theme
• Images
• JavaScript
135k
Compressed &
reduced
Thin client
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
• jogDialMoved(-0.5,0.5)
314 bytes

JogDial jogDial = new JogDial(Size.MEDIUM);
TextField x = new TextField();
TextField y = new TextField();
jogDial.addMoveListener(e -> {
x.setValue(e.getX());
y.setValue(e.getY());
});
layout.addComponents(x, y, jogDial);
• moveCap(-0.5,0.5)
• x.value=-0.5
y.value=0.5
351 bytes

• jogDialMoved(-0.5,0.5)
314
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Single point of focus
Single point of focus
A tool for getting started quickly
Single point of focus
Non-functional requirements
A tool for getting started quickly
Single point of focus
Easily customizable
Non-functional requirements
A tool for getting started quickly
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Maven POM hierarchy
Maven POM hierarchy
Annotation based configuration
Maven POM hierarchy
Dependencies as @Bean
Annotation based configuration
Maven POM hierarchy
Embedded web server
Dependencies as @Bean
Annotation based configuration
Vaadin4Spring
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.2.0.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.vaadin.spring</groupId>
<artifactId>spring-boot-vaadin</artifactId>
</dependency>
</dependencies>
ze zeventiger
oren.
ds
Goed, ik ben
+
@VaadinUI / @TouchkitUI
ze zeventiger
oren.
ds
Goed, ik ben
+
@VaadinUI / @TouchkitUI
@UIScope
ze zeventiger
oren.
ds
Goed, ik ben
+
@VaadinUI / @TouchkitUI
@UIScope
ze zeventiger
oren.
ds
Goed, ik ben
+
Spring managed beans
@VaadinUI / @TouchkitUI
@UIScope
EventBus for loose coupling
ze zeventiger
oren.
ds
Goed, ik ben
+
Spring managed beans
@SpringBootApplication
@EnableTouchKitServlet
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args).start();
}
@Bean
DroneTemplate provideTemplate(TaskExecutor taskExecutor,
DroneStateChangeCallback[] callbacks) throws UnknownHostException {
return new DroneTemplate(taskExecutor, callbacks);
}
@Bean
Drone provideDrone() {
return new Drone();
}
}
@TouchKitUI
@Theme("drone")
public class DroneUI extends UI implements InitializingBean, DisposableBean {
@Autowired
private DroneTemplate service;
@Autowired
private ControlPanel controlPanel;
@Autowired
private EventBus eventBus;
@Autowired
private DroneEmergencyDialog emergencyDialog;
@Override
public void afterPropertiesSet() throws Exception {
eventBus.subscribe(this);
}
@EventBusListenerMethod
protected void onEmergencyEvent(DroneEmergencyEvent event) {
this.access(() -> emergencyDialog.show(event.getEmergencyType(), this));
}
@EventBusListenerMethod
protected void onLowBatteryEvent(DroneLowBatteryEvent event) {
this.access(() -> emergencyDialog.show(Emergency.BATTERY, this));
}
@Override
public void destroy() throws Exception {
eventBus.unsubscribe(this);
}
}
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
<<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot

Drone
<<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot

Drone

<<JVM>>
<<Embedded-Jetty>>
192.168.1.2
<<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot

Drone

<<JVM>>
<<Embedded-Jetty>>
192.168.1.2
<<Embedded-Jetty>>
192.168.1.2
Vaadin UI

SpringBoot
<<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot

Drone

<<JVM>>
<<Embedded-Jetty>>
192.168.1.2
<<Embedded-Jetty>>
192.168.1.2
Vaadin UI

SpringBoot

<<Browser>>
(192.168.1.3)
User
<<VaadinUI>>
DroneUI
<<VaadinUI>>
DroneUI

<<Widget>>
JogDial
<<Widget>>
JogDial
<<Widget>>
Gauge
<<Widget>>
Gauge
<<Widget>>
Gauge
<<VaadinUI>>
DroneUI

<<Widget>>
JogDial
<<Widget>>
JogDial
<<Widget>>
Gauge
<<Widget>>
Gauge
<<Widget>>
Gauge
<<Bean>>
Drone

<<VaadinUI>>
DroneUI

<<Widget>>
JogDial
<<Widget>>
JogDial
<<Widget>>
Gauge
<<Widget>>
Gauge
<<Widget>>
Gauge
<<Bean>>
DroneTemplate

<<Bean>>
Drone

<<VaadinUI>>
DroneUI

<<Widget>>
JogDial
<<Widget>>
JogDial
<<Widget>>
Gauge
<<Widget>>
Gauge
<<Widget>>
Gauge
<<DroneStateCall…>>
UIEventProducer

<<Bean>>
DroneTemplate

<<Bean>>
Drone

<<VaadinUI>>
DroneUI

<<Widget>>
JogDial
<<Widget>>
JogDial
@Component
class UIEventProducer implements DroneStateCallback {
@Autowired
@EventBusScope(EventScope.APPLICATION)
private EventBus eventBus;
@Override
public void onDroneStateChanged(DroneState latestState) {
if (latestState.isEmergency()) {
eventBus.publish(this, new DroneEmergencyEvent());
}
if (latestState.isBatteryTooLow()) {
eventBus.publish(this, new DroneLowBatteryEvent());
}
eventBus.publish(this,
new DroneBatteryEvent(this, latestState.getBattery()));
eventBus.publish(this,
new DroneThetaEvent(this, latestState.getTheta()));
eventBus.publish(this,
new DroneAltitudeEvent(this, latestState.getAltitude()));
}
}
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Getting
started
Getting
started
Eclipse
Download Vaadin
plugin from
Marketplace
mvn
archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-
application
-DarchetypeVersion=
7.3.9
Maven
Download for Free
vaadin.com/book
PDF, ePub, HTML
9 789529 319701
ISBN 978-952-93-1970-1
9 789529 319701
ISBN 978-952-93-1970-1
Vol 1
288 pages
Vol 2
434 pages
Lessons learned today
Lessons learned today
1. Drones are super cool!
Lessons learned today
1. Drones are super cool!
2. Vaadin is good for web apps, brings you great productivity
Lessons learned today
1. Drones are super cool!
2. Vaadin is good for web apps, brings you great productivity
3. Boot kickstarts development and helps you all the way
Lessons learned today
1. Drones are super cool!
2. Vaadin is good for web apps, brings you great productivity
3. Boot kickstarts development and helps you all the way
4. If we catch you making web pages with Vaadin & Boot
we’ll carry you behind the sauna*
*a not-so-fun Finnish tradition
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
slides
slideshare.net/PeterLehto
Josh Long
@starbuxman
Spring developer advocate



Peter Lehto
@peter_lehto
Vaadin Expert & trainer
vaadin.com/demo
start.spring.io
github.com/peholmst/vaadin4spring
github.com/vaadin/teleport
slides
slideshare.net/PeterLehto
Josh Long
@starbuxman
Spring developer advocate



Peter Lehto
@peter_lehto
Vaadin Expert & trainer
vaadin.com/demo
start.spring.io
github.com/peholmst/vaadin4spring
github.com/vaadin/teleport

More Related Content

PDF
Remote controlling Parrot AR Drone with Spring Boot & Vaadin (JavaCro15)
PDF
JavaCro'15 - Remote controlling Parrot AR Drone with Spring Boot and Vaadin -...
PDF
Tips and tricks for building api heavy ruby on rails applications
PDF
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
PDF
Symfony: Your Next Microframework (SymfonyCon 2015)
PPTX
Python Code Camp for Professionals 1/4
PDF
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
PPTX
Maintainable JavaScript 2012
Remote controlling Parrot AR Drone with Spring Boot & Vaadin (JavaCro15)
JavaCro'15 - Remote controlling Parrot AR Drone with Spring Boot and Vaadin -...
Tips and tricks for building api heavy ruby on rails applications
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
Symfony: Your Next Microframework (SymfonyCon 2015)
Python Code Camp for Professionals 1/4
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Maintainable JavaScript 2012

What's hot (20)

PDF
Great Developers Steal
PDF
Building Cloud Castles
PPTX
สปริงเฟรมเวิร์ค4.1
PDF
With a Mighty Hammer
PDF
Building Cloud Castles - LRUG
PDF
Rails 3: Dashing to the Finish
PDF
Fake My Party
PDF
Keeping the frontend under control with Symfony and Webpack
PDF
Incremental Type Safety in React Apollo
PDF
Containers & Dependency in Ember.js
PDF
A Little Backbone For Your App
KEY
Socket applications
PDF
async/await in Swift
KEY
Writing your Third Plugin
KEY
jQuery Plugin Creation
PDF
OSCON Google App Engine Codelab - July 2010
PDF
The report of JavaOne2011 about groovy
PDF
Celix universal OSGi
ODP
Pimp My Web Page
PDF
HTML5: where flash isn't needed anymore
Great Developers Steal
Building Cloud Castles
สปริงเฟรมเวิร์ค4.1
With a Mighty Hammer
Building Cloud Castles - LRUG
Rails 3: Dashing to the Finish
Fake My Party
Keeping the frontend under control with Symfony and Webpack
Incremental Type Safety in React Apollo
Containers & Dependency in Ember.js
A Little Backbone For Your App
Socket applications
async/await in Swift
Writing your Third Plugin
jQuery Plugin Creation
OSCON Google App Engine Codelab - July 2010
The report of JavaOne2011 about groovy
Celix universal OSGi
Pimp My Web Page
HTML5: where flash isn't needed anymore
Ad

Viewers also liked (13)

PDF
WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
PDF
JavaEE with Vaadin - Workshop
PDF
Techlunch - Dependency Injection with Vaadin
PDF
GWT integration with Vaadin
PDF
Vaadin 7 - Java Enterprise Edition integration
PDF
Vaadin with Java EE 7
PDF
Building impressive layout systems with vaadin
PDF
Binding business data to vaadin components
PDF
Vaadin 8 with Spring Frameworks AutoConfiguration
PDF
Vaadin 8 with Spring Framework
PDF
Vaadin 8 - Data Binding with Binder
PDF
Comparing GWT Transport Mechanisms
PDF
Improving the HTML Table
WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
JavaEE with Vaadin - Workshop
Techlunch - Dependency Injection with Vaadin
GWT integration with Vaadin
Vaadin 7 - Java Enterprise Edition integration
Vaadin with Java EE 7
Building impressive layout systems with vaadin
Binding business data to vaadin components
Vaadin 8 with Spring Frameworks AutoConfiguration
Vaadin 8 with Spring Framework
Vaadin 8 - Data Binding with Binder
Comparing GWT Transport Mechanisms
Improving the HTML Table
Ad

Similar to Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create (20)

PDF
Vaadin 7
PDF
PDF
Vaadin 7
PDF
Vaadin 7 Today and Tomorrow
PDF
Vaadin today and tomorrow
PDF
Vaadin7 modern-web-apps-in-java
PDF
Workshop: Building Vaadin add-ons
PDF
Vaadin 7 CN
PDF
PDF
Lecture: Vaadin Overview
PDF
Hybrid applications
PDF
Vaadin 7
PDF
Rc085 010d-vaadin7
PDF
Vaadin 7 by Joonas Lehtinen
PDF
Vaadin & Web Components
PDF
Vaadin 7.2
PDF
Migration from vaadin 6 to vaadin 7 devoxx france 2013
PDF
Vaadin codemotion 2014
PDF
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
PDF
Vaadin Components
Vaadin 7
Vaadin 7
Vaadin 7 Today and Tomorrow
Vaadin today and tomorrow
Vaadin7 modern-web-apps-in-java
Workshop: Building Vaadin add-ons
Vaadin 7 CN
Lecture: Vaadin Overview
Hybrid applications
Vaadin 7
Rc085 010d-vaadin7
Vaadin 7 by Joonas Lehtinen
Vaadin & Web Components
Vaadin 7.2
Migration from vaadin 6 to vaadin 7 devoxx france 2013
Vaadin codemotion 2014
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin Components

Recently uploaded (20)

PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Machine learning based COVID-19 study performance prediction
PPTX
MYSQL Presentation for SQL database connectivity
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
Tartificialntelligence_presentation.pptx
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Empathic Computing: Creating Shared Understanding
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
Big Data Technologies - Introduction.pptx
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PDF
Electronic commerce courselecture one. Pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
Machine learning based COVID-19 study performance prediction
MYSQL Presentation for SQL database connectivity
The Rise and Fall of 3GPP – Time for a Sabbatical?
Unlocking AI with Model Context Protocol (MCP)
Tartificialntelligence_presentation.pptx
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Mobile App Security Testing_ A Comprehensive Guide.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Empathic Computing: Creating Shared Understanding
Programs and apps: productivity, graphics, security and other tools
Big Data Technologies - Introduction.pptx
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Digital-Transformation-Roadmap-for-Companies.pptx
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Spectral efficient network and resource selection model in 5G networks
Assigned Numbers - 2025 - Bluetooth® Document
Electronic commerce courselecture one. Pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf

Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create