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

@peter_lehto Vaadin Expert & Trainer

What is Vaadin?

Integrating with

Spring Boot

How to get

started?

User interface framework for rich

web applications

htmljava

> [] + [];>

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

> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;> false

> typeof NaN;> number

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

Developer

Productivity

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

Compressed & reduced Thin client

• x=-0.5, y=0.5 • jogDial moved !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

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

Integration with

Single point of focus

Easily customizableNon-functional requirementsA tool for getting started quickly

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

Maven POM hierarchy

Dependencies as @BeanAnnotation based configuration

Embedded web server

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

@VaadinUI / @TouchkitUI

@EventBus for View/UI/App@UIScope

Spring managed beans

slogan

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

@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 {}

EventBus for loose coupling

Subscribe / UnsubscribeScoped events

UI.access Runnable for threads

slogan

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

slogan

<<WIFI-HOTSPOT>> 192.168.1.1 AR Parrot

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

192.168.1.2

192.168.1.2<<Embedded-Jetty>>

192.168.1.2 Vaadin UI

SpringBoot

192.168.1.2<<Embedded-Jetty>>

192.168.1.2 Vaadin UI

SpringBoot

<<Browser>> (192.168.1.3)

<<VaadinUI>> DroneUI

<<Widget>> JogDial<<Widget>>

JogDial

<<Widget>> Gauge

JogDial

<<Widget>> Gauge

<<Bean>> Drone

JogDial

<<Widget>> Gauge

<<Bean>> DroneTemplate

<<Bean>> Drone

JogDial

<<Widget>> Gauge

<<DroneStateCall…>> UIEventProducer

<<Bean>> DroneTemplate

<<Bean>> Drone

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

Klikkaa otsikkoa kolmesti ja kirjoita

teksti

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

github.com/vaadin/teleport

EclipseDownload Vaadin plugin from Marketplace

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

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

slogan

Questions, Comments?

@peter_lehto peter@vaadin.com

Vaadin Ltd

WebApp controlled Parrot AR Drone with Vaadin and Spring Boot

Software

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

STELLINGEN - lorentz.leidenuniv.nl · smp.ll variations of externally controlled variables. Associated with such a transition is a drastic change in the values of certain macroscopic

Clofazimine improves clinical outcomes in multidrug …T D ACCEPTED MANUSCRIPT 1 1 Clofazimine improves clinical outcomes in multidrug-resistant 2 tuberculosis: a randomized controlled

CONFERENCEinteraktiv.contilla.de/resources/1363693260/webapp/000/... · 2016. 10. 18. · Content-Marketing mit Premium-Texten Arne Stoschek, Geschäftsführer - Textprovider GmbH

What do Product / UX Designers do? - Jerica Huang•Widely used prototyping tools •Webapp •Easy to learn 59 WiCC x CUAppDev Tools Origami What is Product Design •More in depth

Steps webapp-design Muse

Prostaatkanker20130411 - Urologen voor U · Phase 3 multicenter, randomized, double-blind, placebo-controlled study conducted at ISI sites in 12 countries; USA, Europe, Australia,

Beste TUCKER Technologie: Bolzenschweißen mit ... - Emhart · Beste TUCKER Technologie: Bolzenschweißen mit DCE! Innovation mit Faszination: DCE – Digitally Controlled Energy.

KASHYA K. SHEI (Cal. BarNo. 173125) MICHAELS. DICKE (Cal. …media.oregonlive.com › business_impact › other › Complaint... · 2016-11-07 · 2. Jawed created and controlled

Brickset.comMâts de sižnaux, 4x ieds de mats einpaalmasten met voet £ 1.60/FF 17.00/fl. 5,75 4x 7863 Remote Controlled Point Motor Télécommande d'aiguilla e Afstandsbediening

User controlled privacy voor de SURFfederatie

Microbiota modulation counteracts Alzheimer’s disease ... › wp-content › uploads › ... · controlled room (21 ± 5 °C) and 60% humidity on 12 h light/dark inverted cycle

Parrot Mki9200 User Guide Nl

REB 15 AZ2 By professionals – for the demanding ......AZ2 By professionals – for the demanding: Electronically controlled battery backpack sprayer • 1 – 4.5 bar • 5.5 h

Printplaat Technologie - VERON...IPC Standards • IPC-2141A Design Guide for High Speed Controlled Impedance Circuit Boards • IPC-2221A Design Standard on Printed Board Design •

Parrot MKi9200 - Amazon S3...Als bij het eerste gebruik van uw Parrot MKi9200 de afstandsbediening niet lijkt te communiceren met het elektronicakastje, drukt u meerdere malen op de

Parrot UNIKA

INTRAVENOUS THROMBOLYSIS FOR ACUTE ISCHAEMIC … Maaike.pdf · Promoting acute thrombolysis for ischaemic stroke. Protocol for a cluster randomised controlled trial to assess the

UNILATERAL VERSUS SIMULTANEOUS BILATERAL COCHLEAR … · 2016. 3. 21. · proefschrift Unilateral versus simultaneous bilateral cochlear implantation in adults a randomized controlled

170519 CHESS-Flyer A4 FC - netbeheernederland.nl€¦ · CHESS (Controlled Hybrid Energy Systems Simulator) stelt de gebruiker in staat om op Simcity-achtige wijze een hybride energiesysteem

open abdominal aortic aneurysm repair {1} controlled trial ...