remote controlling parrot ar drone with vaadin & spring boot @ gwt.create

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

User interface framework for rich

web applications

Developer

Productivity

Rich

UX

UI

Browser

UI

Browser

Widgets

Them

e UI

Browser

Widgets

Them

e UI

Browser

Backend

Server

Widgets

Them

e UI

Browser

Backend

Server

Widgets

Service (GWT-RPC)

Backend

Server

UI Backend

Server

Browser

UI Backend

Server

Widgets Components

Them

e

Browser

UI Backend

Server

Widgets Components

Them

e UI

Browser

UI Backend

Server

Widgets Components

Service (GWT-RPC)

> var foo = [0];> foo == !foo;

> var foo = [0];> foo == !foo;> true

> [] + [];


> [] + [];>


> [] + [];>

> [] + {};


> [] + [];>

> [] + {};> [object Object]


> [] + [];>


> {} + [];


> [] + [];>


> {} + [];> 0


> [] + [];>


> {} + [];> 0

> {} + {};> var foo = [0];> foo == !foo;> true

> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> [] + [];>


> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;


> [] + [];>


> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;> false


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;> number


User Interface Components

How does Vaadin work, really?

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

• jogDialMoved(-0.5,0.5)

314 bytes




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

Single point of focus


A tool for getting started quickly


Non-functional requirements



Easily customizable

Non-functional requirements


Maven POM hierarchy

Maven POM hierarchy

Annotation based configuration

Maven POM hierarchy

Dependencies as @Bean


Maven POM hierarchy

Embedded web server

Dependencies as @Bean


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>

slogan

Je zult maar letter wezen. Goed, ik ben niet ontevredet. Maar het valt niet mee in deze zeventiger jaren tot het vaderlandse alfabet te behoren. Foto-zetterijen wringen je steeds in steeds ingevikkelder. Je zult maar letter wezen. Goed, ik ben



Je zult maar letter wezen. Goed, ik ben niet ontevredet. Maar het valt niet mee in deze zeventiger jaren tot het vaderlandse alfabet te behoren. Foto-zetterijen wringen je steeds in steeds ingevikkelder. Je zult maar letter wezen. Goed, ik ben Je zult maar letter wezen. Goed, ik ben niet ontevredet. Maar het valt niet mee in deze zeventiger jaren tot het vaderlandse alfabet te behoren. Foto-zetterijen wringen je steeds in steeds ingevikkelder. Je zult maar letter wezen. Goed, ik ben

+

@VaadinUI / @TouchkitUI

slogan





+


@UIScope

slogan





+


@UIScope

slogan





+

Spring managed beans


@UIScope

EventBus for loose coupling

slogan





+

Spring managed beans

@SpringBootApplication@EnableTouchKitServletpublic 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); }}

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone

<<JVM>> <<Embedded-Jetty>>

192.168.1.2

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone


192.168.1.2<<Embedded-Jetty>>

192.168.1.2

Vaadin UISpringBoot

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone


192.168.1.2<<Embedded-Jetty>>

192.168.1.2

Vaadin UISpringBoot

<<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

@Componentclass 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())); }}

Getting started

EclipseDownload Vaadin plugin from Marketplace

mvn archetype:generate

-DarchetypeGroupId=

com.vaadin

-DarchetypeArtifactId=

vaadin-archetype-application

-DarchetypeVersion=

7.3.9

Maven

Download for Freevaadin.com/bookPDF, 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


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




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

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

http://slideshare.com/joonaslehtinen

remote controlling parrot ar drone with vaadin & spring boot @ gwt.create

Technology