Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Remote controlling Parrot AR Drone Josh Long @starbuxman Spring developer advocate
 
 Peter Lehto @peter_lehto Vaadin Expe...
Remote controlling Parrot AR Drone Josh Long @starbuxman Spring developer advocate
 
 Peter Lehto @peter_lehto Vaadin Expe...
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
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)
> 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; > ...
> [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > var foo = [0]; > foo == ...
> [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > var foo = ...
> [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > v...
> [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > v...
User Interface Components
User Interface Components
How does Vaadin work, really?
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.addMoveL...
JogDial jogDial = new JogDial(Size.MEDIUM); TextField x = new TextField(); TextField y = new TextField(); jogDial.addMoveL...
• Loader page • CSS Theme • Images • JavaScript
• Loader page • CSS Theme • Images • JavaScript 135k Compressed & reduced Thin client
• jogDialMoved(-0.5,0.5) 314 bytes

JogDial jogDial = new JogDial(Size.MEDIUM); TextField x = new TextField(); TextField y = new TextField(); jogDial.addMoveL...
• 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
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
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.RE...
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) { SpringAp...
@TouchKitUI @Theme("drone") public class DroneUI extends UI implements InitializingBean, DisposableBean { @Autowired priva...
@Override public void afterPropertiesSet() throws Exception { eventBus.subscribe(this); } @EventBusListenerMethod protecte...
<<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 Vaadi...
<<WIFI-HOTSPOT>> 192.168.1.1 AR Parrot Drone <<JVM>> <<Embedded-Jetty>> 192.168.1.2 <<Embedded-Jetty>> 192.168.1.2 Vaadi...
<<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>> Jog...
<<Widget>> Gauge <<Widget>> Gauge <<Widget>> Gauge <<Bean>> DroneTemplate <<Bean>> Drone <<VaadinUI>> DroneUI <<Widget>...
<<Widget>> Gauge <<Widget>> Gauge <<Widget>> Gauge <<DroneStateCall…>> UIEventProducer <<Bean>> DroneTemplate <<Bean>> D...
@Component class UIEventProducer implements DroneStateCallback { @Autowired @EventBusScope(EventScope.APPLICATION) private...
Getting started
Getting started
Eclipse Download Vaadin plugin from Marketplace
mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVers...
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-1...
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 kick...
Lessons learned today 1. Drones are super cool! 2. Vaadin is good for web apps, brings you great productivity 3. Boot kick...
slides slideshare.net/PeterLehto Josh Long @starbuxman Spring developer advocate
 
 Peter Lehto @peter_lehto Vaadin Expert...
slides slideshare.net/PeterLehto Josh Long @starbuxman Spring developer advocate
 
 Peter Lehto @peter_lehto Vaadin Expert...
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
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
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
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
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
Upcoming SlideShare
Loading in …5
×

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

1,896 views

Published on

Wouldn't it be crazy to fly a small drone or helicopter with your phone or tablet running nothing but a web browser? This session will tell you all about it!

Imagine a fully functional touch based user interface for remote controlling a small drone or a helicopter. This is doable with latest experimental integrations around drone controlling backend applications over WIFI with touch based control interface built with GWT or Vaadin. During the session such a system will be presented with full technology stack starting from GWT based frontend to the actual backend controller application.

A live drone will also be flown during the talk maintaining a safe distance from the audience.

Published in: Technology
no profile picture user

  • Be the first to comment

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

  1. 1. Remote controlling Parrot AR Drone Josh Long @starbuxman Spring developer advocate
 
 Peter Lehto @peter_lehto Vaadin Expert & trainer GWT, Vaadin, Spring Boot
  2. 2. Remote controlling Parrot AR Drone Josh Long @starbuxman Spring developer advocate
 
 Peter Lehto @peter_lehto Vaadin Expert & trainer GWT, Vaadin, Spring Boot
  3. 3. Vaadin & GWT Spring Boot Vaadin4Spring
  4. 4. QA How to get started? Drone
  5. 5. User interface framework for rich web applications
  6. 6. Developer Productivity Rich UX
  7. 7. UI Browser
  8. 8. UI Browser Widgets
  9. 9. Theme UI Browser Widgets
  10. 10. Theme UI Browser Backend Server Widgets
  11. 11. Theme UI Browser Backend Server Widgets Service (GWT-RPC)
  12. 12. Backend Server
  13. 13. UI Backend Server
  14. 14. Browser UI Backend Server Widgets Components
  15. 15. Theme Browser UI Backend Server Widgets Components
  16. 16. Theme UI Browser UI Backend Server Widgets Components Service (GWT-RPC)
  17. 17. > var foo = [0]; > foo == !foo;
  18. 18. > var foo = [0]; > foo == !foo; > true
  19. 19. > [] + []; > var foo = [0]; > foo == !foo; > true
  20. 20. > [] + []; > > var foo = [0]; > foo == !foo; > true
  21. 21. > [] + []; > > [] + {}; > var foo = [0]; > foo == !foo; > true
  22. 22. > [] + []; > > [] + {}; > [object Object] > var foo = [0]; > foo == !foo; > true
  23. 23. > [] + []; > > [] + {}; > [object Object] > {} + []; > var foo = [0]; > foo == !foo; > true
  24. 24. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > var foo = [0]; > foo == !foo; > true
  25. 25. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {};> var foo = [0]; > foo == !foo; > true
  26. 26. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > var foo = [0]; > foo == !foo; > true
  27. 27. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > var foo = [0]; > foo == !foo; > true
  28. 28. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > var foo = [0]; > foo == !foo; > true
  29. 29. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > var foo = [0]; > foo == !foo; > true
  30. 30. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
  31. 31. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
  32. 32. User Interface Components
  33. 33. User Interface Components
  34. 34. How does Vaadin work, really?
  35. 35. JogDial jogDial = new JogDial(Size.MEDIUM); TextField x = new TextField(); TextField y = new TextField();
  36. 36. 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()); });
  37. 37. 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);
  38. 38. • Loader page • CSS Theme • Images • JavaScript
  39. 39. • Loader page • CSS Theme • Images • JavaScript 135k Compressed & reduced Thin client
  40. 40. • jogDialMoved(-0.5,0.5) 314 bytes

  41. 41. 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);
  42. 42. • moveCap(-0.5,0.5) • x.value=-0.5 y.value=0.5 351 bytes
 • jogDialMoved(-0.5,0.5) 314
  43. 43. Single point of focus
  44. 44. Single point of focus A tool for getting started quickly
  45. 45. Single point of focus Non-functional requirements A tool for getting started quickly
  46. 46. Single point of focus Easily customizable Non-functional requirements A tool for getting started quickly
  47. 47. Maven POM hierarchy
  48. 48. Maven POM hierarchy Annotation based configuration
  49. 49. Maven POM hierarchy Dependencies as @Bean Annotation based configuration
  50. 50. Maven POM hierarchy Embedded web server Dependencies as @Bean Annotation based configuration
  51. 51. Vaadin4Spring
  52. 52. <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>
  53. 53. ze zeventiger oren. ds Goed, ik ben +
  54. 54. @VaadinUI / @TouchkitUI ze zeventiger oren. ds Goed, ik ben +
  55. 55. @VaadinUI / @TouchkitUI @UIScope ze zeventiger oren. ds Goed, ik ben +
  56. 56. @VaadinUI / @TouchkitUI @UIScope ze zeventiger oren. ds Goed, ik ben + Spring managed beans
  57. 57. @VaadinUI / @TouchkitUI @UIScope EventBus for loose coupling ze zeventiger oren. ds Goed, ik ben + Spring managed beans
  58. 58. @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(); } }
  59. 59. @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;
  60. 60. @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); } }
  61. 61. <<WIFI-HOTSPOT>> 192.168.1.1 AR Parrot Drone
  62. 62. <<WIFI-HOTSPOT>> 192.168.1.1 AR Parrot Drone <<JVM>> <<Embedded-Jetty>> 192.168.1.2
  63. 63. <<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
  64. 64. <<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
  65. 65. <<VaadinUI>> DroneUI
  66. 66. <<VaadinUI>> DroneUI <<Widget>> JogDial <<Widget>> JogDial
  67. 67. <<Widget>> Gauge <<Widget>> Gauge <<Widget>> Gauge <<VaadinUI>> DroneUI <<Widget>> JogDial <<Widget>> JogDial
  68. 68. <<Widget>> Gauge <<Widget>> Gauge <<Widget>> Gauge <<Bean>> Drone <<VaadinUI>> DroneUI <<Widget>> JogDial <<Widget>> JogDial
  69. 69. <<Widget>> Gauge <<Widget>> Gauge <<Widget>> Gauge <<Bean>> DroneTemplate <<Bean>> Drone <<VaadinUI>> DroneUI <<Widget>> JogDial <<Widget>> JogDial
  70. 70. <<Widget>> Gauge <<Widget>> Gauge <<Widget>> Gauge <<DroneStateCall…>> UIEventProducer <<Bean>> DroneTemplate <<Bean>> Drone <<VaadinUI>> DroneUI <<Widget>> JogDial <<Widget>> JogDial
  71. 71. @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())); } }
  72. 72. Getting started
  73. 73. Getting started
  74. 74. Eclipse Download Vaadin plugin from Marketplace
  75. 75. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVersion= 7.3.9 Maven
  76. 76. 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
  77. 77. Lessons learned today
  78. 78. Lessons learned today 1. Drones are super cool!
  79. 79. Lessons learned today 1. Drones are super cool! 2. Vaadin is good for web apps, brings you great productivity
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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

×