Remote controlling Parrot AR Drone with Spring Boot & Vaadin (JavaCro15)
1 like1,601 views
The document outlines the integration of the Vaadin framework with Spring Boot for building web applications that control Parrot AR drones. It emphasizes the advantages of using Vaadin for creating server-driven UIs in Java, while detailing components, architecture, and development practices. The author shares insights on productivity, the drone app's structure, and lessons learned during the integration process.
![> var foo = [0];
> foo == !foo;](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-9-320.jpg)
![> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-10-320.jpg)
![> [] + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-11-320.jpg)
![> [] + [];
>
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-12-320.jpg)
![> [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-13-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-14-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-15-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-16-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-17-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-18-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-19-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-20-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-21-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-22-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-23-320.jpg)
![@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();
}
}](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-106-320.jpg)
![@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();
}
}](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-107-320.jpg)
![@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();
}
}](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-108-320.jpg)
![@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();
}
}](https://image.slidesharecdn.com/javacro-vaadin-spring-drone-150512211802-lva1-app6891/85/Remote-controlling-Parrot-AR-Drone-with-Spring-Boot-Vaadin-JavaCro15-109-320.jpg)
Remote controlling Parrot AR Drone with Spring Boot & Vaadin (JavaCro15)
- 1. Remote controlling Parrot AR Drone with Spring Boot & Vaadin Peter Lehto @peter_lehto expert & trainer
- 4. Server driven UI framework with GWT based thin client
- 6. WHY?
- 9. > var foo = [0]; > foo == !foo;
- 10. > var foo = [0]; > foo == !foo; > true
- 11. > [] + []; > var foo = [0]; > foo == !foo; > true
- 12. > [] + []; > > var foo = [0]; > foo == !foo; > true
- 13. > [] + []; > > [] + {}; > var foo = [0]; > foo == !foo; > true
- 14. > [] + []; > > [] + {}; > [object Object] > var foo = [0]; > foo == !foo; > true
- 15. > [] + []; > > [] + {}; > [object Object] > {} + []; > var foo = [0]; > foo == !foo; > true
- 16. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > var foo = [0]; > foo == !foo; > true
- 17. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {};> var foo = [0]; > foo == !foo; > true
- 18. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > var foo = [0]; > foo == !foo; > true
- 19. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > var foo = [0]; > foo == !foo; > true
- 20. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > var foo = [0]; > foo == !foo; > true
- 21. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > var foo = [0]; > foo == !foo; > true
- 22. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 23. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 24. HOW?
- 25. Backend Server
- 29. Theme Browser UI Backend Server Widgets Components Shared State⨠RPC
- 31. GWT
- 32. GWT Write client-side part with Java
- 33. GWT Write client-side part with Java Java -> JavaScript optimizing compiler
- 34. GWT Write client-side part with Java Java -> JavaScript optimizing compiler JavaScript generated DOM
- 35. GWT Write client-side part with Java Java -> JavaScript optimizing compiler JavaScript generated DOM Browser specific Widgetset
- 36. GWT Write client-side part with Java Java -> JavaScript optimizing compiler JavaScript generated DOM Browser specific Widgetset No browser differences
- 37. GWT Write client-side part with Java Java -> JavaScript optimizing compiler JavaScript generated DOM Browser specific Widgetset No browser differences No browser plugins
- 38. GWT Write client-side part with Java Java -> JavaScript optimizing compiler JavaScript generated DOM Browser specific Widgetset No browser differences No browser plugins Lookβnβfeel with CSS theme
- 41. Vaadin
- 42. Vaadin Server-side = runs in JVM
- 43. Vaadin Server-side = runs in JVM Component based development model
- 44. Vaadin Server-side = runs in JVM Component based development model Events for interaction
- 45. Vaadin Server-side = runs in JVM Component based development model Events for interaction Transparent communication
- 46. Vaadin Server-side = runs in JVM Component based development model Events for interaction Transparent communication Secure
- 47. Vaadin Server-side = runs in JVM Component based development model Events for interaction Transparent communication Secure No need for JavaScript / HTML
- 48. Vaadin Server-side = runs in JVM Component based development model Events for interaction Transparent communication Secure No need for JavaScript / HTML Precompiled Widgetset
- 49. Vaadin Server-side = runs in JVM Component based development model Events for interaction Transparent communication Secure No need for JavaScript / HTML Precompiled Widgetset
- 54. How does Vaadin work, really?
- 56. JogDial jogDial = new JogDial(Size.MEDIUM); TextField x = new TextField(); TextField y = new TextField();
- 57. 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()); });
- 58. 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);
- 59. β’ Loader page β’ CSS Theme β’ Images β’ JavaScript
- 60. β’ Loader page β’ CSS Theme β’ Images β’ JavaScript 135k Compressed & reduced Thin client
- 64. 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);
- 65. ⒠moveCap(-0.5,0.5) ⒠x.value=-0.5 y.value=0.5 351 bytes⨠⒠jogDialMoved(-0.5,0.5) 314
- 68. Spring Framework Dependency injection Beans Spring MVC web applications and RESTful web services Data access, messaging and more.
- 70. Spring Data
- 72. Spring Data Spring Boot And much moreβ¦
- 77. Single point of focus
- 78. Single point of focus A tool for getting started quickly
- 79. Single point of focus A tool for getting started quickly Easily customizable
- 82. Maven POM hierarchy Annotation based configuration
- 83. Maven POM hierarchy Annotation based configuration Embedded web server
- 84. Spring Demo Approx 5 minutes.
- 88. ze zeventiger oren. ds Goed, ik ben +
- 89. UI and Views as Spring managed beans ze zeventiger oren. ds Goed, ik ben +
- 90. UI and Views as Spring managed beans @SpringUI / @SpringView ze zeventiger oren. ds Goed, ik ben +
- 91. UI and Views as Spring managed beans @SpringUI / @SpringView Scopes ze zeventiger oren. ds Goed, ik ben +
- 92. UI and Views as Spring managed beans @SpringUI / @SpringView Scopes @UIScope ze zeventiger oren. ds Goed, ik ben +
- 93. UI and Views as Spring managed beans @SpringUI / @SpringView Scopes @UIScope @ViewScope ze zeventiger oren. ds Goed, ik ben +
- 94. UI and Views as Spring managed beans @SpringUI / @SpringView Scopes @UIScope @ViewScope @VaadinSessionScope ze zeventiger oren. ds Goed, ik ben +
- 95. ze zeventiger oren. ds Goed, ik ben +
- 96. Access control ze zeventiger oren. ds Goed, ik ben +
- 98. Access control ViewAccessControl ViewInstanceAccessControl⨠ze zeventiger oren. ds Goed, ik ben +
- 99. Access control ViewAccessControl ViewInstanceAccessControlβ¨ Allows mixing Spring MVC and Vaadin to same βnamespaceβ ze zeventiger oren. ds Goed, ik ben +
- 100. Access control ViewAccessControl ViewInstanceAccessControlβ¨ Allows mixing Spring MVC and Vaadin to same βnamespaceβ Automatic with Spring Boot ze zeventiger oren. ds Goed, ik ben +
- 101. ze zeventiger oren. ds Goed, ik ben +
- 102. Vaadin Spring Boot addon performs autoconfiguration ze zeventiger oren. ds Goed, ik ben +
- 103. Vaadin Spring Boot addon performs autoconfiguration VaadinServletConfigurationProperties ze zeventiger oren. ds Goed, ik ben +
- 104. Vaadin Spring Integration Demo Approx 10 minutes.
- 106. @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(); } }
- 107. @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(); } }
- 108. @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(); } }
- 109. @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(); } }
- 110. @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;
- 111. @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;
- 112. @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;
- 113. @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;
- 114. @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); } }
- 115. @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); } }
- 120. <<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>> (localhost / 192.168.1.3) User
- 121. <<VaadinUI>> DroneUI
- 127. @Component class UIEventProducer implements DroneStateCallback { @Autowired @EventBusScope(EventScope.APPLICATION) private EventBus eventBus;
- 128. @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 DroneThetaEvent(this,β¨ latestState.getTheta())); eventBus.publish(this, new DroneAltitudeEvent(this,β¨ latestState.getAltitude())); } }
- 131. Getting started
- 132. Getting started
- 136. 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
- 138. Lessons learned today 1. Drones are super cool!
- 139. Lessons learned today 1. Drones are super cool! 2. Vaadin is good for web apps, brings you great productivity
- 140. 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
- 141. 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. Ofο¬cial Vaadin Spring integration is already in Beta
- 142. 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. Ofο¬cial Vaadin Spring integration is already in Beta 5. βVaadin4Springβ will provide additional features
- 143. Thank you! Peter Lehto @peter_lehto expert & trainer