WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

54
WebApp controlled Parrot AR Drone with Vaadin and Spring Boot @ peter_lehto Vaadin Expert & Trainer

description

EclipseCon 2014 presentation about using Vaadin and SpringBoot to remote control Parrot AR Drone over a web application.

Transcript of WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Page 1: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

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

WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@peter_lehto Vaadin Expert & Trainer

Page 2: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

What is Vaadin?

Integrating with

Spring Boot

Page 3: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

QA

How to get

started?

Drone

Page 4: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 5: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

User interface framework for rich

web applications

Page 6: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 7: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

htmljava

Page 8: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

> [] + [];>

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

> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;> false

> typeof NaN;> number

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

Page 9: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Developer

Productivity

Rich

UX

Page 10: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

User Interface Components

Page 11: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

How does Vaadin work, really?

Page 12: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

JogDial jogDial = new JogDial(Size.MEDIUM);!TextField x = new TextField();TextField y = new TextField();

Page 13: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 14: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 15: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

• Loader page • CSS Theme • Images • JavaScript

135k

Compressed & reduced Thin client

Page 16: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 17: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

• x=-0.5, y=0.5 • jogDial moved !314 bytes

Page 18: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 19: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

• moveCap(-0.5,0.5) • x.value=-0.5

y.value=0.5 !351 bytes

• x=-0.5, y=0.5• jogDial moved!314

Page 20: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Integration with

Page 21: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 22: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Single point of focus

Easily customizableNon-functional requirementsA tool for getting started quickly

Page 23: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 24: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<parent>! <groupId>org.springframework.boot</groupId>! <artifactId>spring-boot-starter-parent</artifactId>! <version>1.1.8.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>

Page 25: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Maven POM hierarchy

Dependencies as @BeanAnnotation based configuration

Embedded web server

Page 26: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@Configuration@ComponentScan@EnableAutoConfiguration@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(); }}

Page 27: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@VaadinUI / @TouchkitUI

@EventBus for View/UI/App@UIScope

Spring managed beans

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

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

Page 28: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@TouchKitUI@Theme("drone")public class DroneUI extends UI implements InitializingBean, DisposableBean { @Autowired private DroneTemplate service;! @Autowired private ControlPanel controlPanel;! @Autowired private GaugePanel gaugePanel;! …}

Page 29: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@Target({java.lang.annotation.ElementType.TYPE})@Retention(java.lang.annotation.RetentionPolicy.RUNTIME)@Documented@VaadinComponent@UIScopepublic @interface TouchKitUI { String path() default "";}

Page 30: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@Target({java.lang.annotation.ElementType.TYPE})@Retention(java.lang.annotation.RetentionPolicy.RUNTIME)@Documented@VaadinComponent@UIScopepublic @interface TouchKitUI { String path() default "";}

@Target(ElementType.TYPE)@Retention(RetentionPolicy.RUNTIME)@Documented@Import({TouchKitServletConfiguration.class, PingServletConfiguration.class})public @interface EnableTouchKitServlet {}

Page 31: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

EventBus for loose coupling

Subscribe / UnsubscribeScoped events

UI.access Runnable for threads

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

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

Page 32: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

@TouchKitUI@Theme("drone")public class DroneUI extends UI implements InitializingBean, DisposableBean { … @Autowired private DroneEmergencyDialog emergencyDialog;! @Autowired private EventBus eventBus;! @Override public void afterPropertiesSet() throws Exception { eventBus.subscribe(this); }! @EventBusListenerMethod protected void onEmergencyEvent(DroneEmergencyEvent event) { this.access(() -> emergencyDialog.show(this)); }}

Page 33: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

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

Page 34: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<WIFI-HOTSPOT>> 192.168.1.1 AR Parrot

Drone

Page 35: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<WIFI-HOTSPOT>> 192.168.1.1 AR Parrot

Drone

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

192.168.1.2

Page 36: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 37: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 38: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<VaadinUI>> DroneUI

Page 39: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<VaadinUI>> DroneUI

<<Widget>> JogDial<<Widget>>

JogDial

Page 40: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<Widget>> Gauge

<<Widget>> Gauge

<<Widget>> Gauge

<<VaadinUI>> DroneUI

<<Widget>> JogDial<<Widget>>

JogDial

Page 41: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<Widget>> Gauge

<<Widget>> Gauge

<<Widget>> Gauge

<<Bean>> Drone

<<VaadinUI>> DroneUI

<<Widget>> JogDial<<Widget>>

JogDial

Page 42: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<Widget>> Gauge

<<Widget>> Gauge

<<Widget>> Gauge

<<Bean>> DroneTemplate

<<Bean>> Drone

<<VaadinUI>> DroneUI

<<Widget>> JogDial<<Widget>>

JogDial

Page 43: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

<<Widget>> Gauge

<<Widget>> Gauge

<<Widget>> Gauge

<<DroneStateCall…>> UIEventProducer

<<Bean>> DroneTemplate

<<Bean>> Drone

<<VaadinUI>> DroneUI

<<Widget>> JogDial<<Widget>>

JogDial

Page 44: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 45: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 46: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 47: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Getting started

Page 48: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Klikkaa otsikkoa kolmesti ja kirjoita

teksti

vaadin.com/demostart.spring.iogithub.com/peholmst/vaadin4spring

github.com/vaadin/teleport

Page 49: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

EclipseDownload Vaadin plugin from Marketplace

Page 50: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.3

Maven

Page 51: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

Page 52: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Lessons learned today

1. Finns smile, always 2. Vaadin is good for web apps, brings you great productivity 3. Boot kickstarts development and helps you all the way 4. If I catch you building your home pages with Vaadin + Boot

I’ll take you behind the sauna (a not-so-fun Finnish tradition)

Page 53: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot
Page 54: WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

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

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

Questions, Comments?

@peter_lehto [email protected]

Vaadin Ltd