JOHAN THELIN // NOV 11 2015 CHALMERS,...

33
11/11/2015 1 JOHAN THELIN // NOV 11 2015 – CHALMERS, GOTHENBURG

Transcript of JOHAN THELIN // NOV 11 2015 CHALMERS,...

Page 1: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20151

JOHAN THELIN // NOV 11 2015 – CHALMERS, GOTHENBURG

Page 2: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20152

Pelagicore At a Glance

• Founded in 2009

• We provide products and services for Open Source Infotainment

• Our customers are car makers and their suppliers

• We are passionate about – Open Source Infotainment Software & GENIVI– User Experience development using Qt & HTML– Connecting mobile experiences to the car– Vehicle integration and networking– Supporting great hardware

• Owned by employees and Fouriertransform

• Offices in Gothenburg, Sweden and Munich, Germany

• Approximately 45 employees and growing

Page 3: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20153

Stunning User Experiencesbridging the gap between designers and developers

• Software Architecture designed for UX performance

• Best Qt expertise in the automotive industry

• Agile processes and tools enabling your designers to work close to the developers

• Strong engagement with Silicon Vendors ensuring maximum performance

• Delivery experience from expert assignments to full software stack delivery to production projects

Page 4: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20154

Experience CHANGEHow we work – faster, cheaper, smarter

• We leverage Open Source Software the way it was intended

• We focus competence that represents a vertical slice through an Infotainment system – from pixel to silicon

• We deliver through agile processes – enabling engineering excellence

• We will not lock you in, our business model is transparent

• We work with a large eco-systems of partners to enable the best user experience for the end-customer

Page 5: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20155

In-Vehicle Infotainment

Page 6: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20156

• There is a difference between building a screen into a car and bringing a screen into the car

• Safety requirements

• Driver disruptions

• Driver workload management

• Driven by liability and legal requirements

Legal Challenges

Page 7: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20157 11/11/20157

Automotive Challenges

• Sudden loss of power

• Boot time requirements

• Aborted shutdown requirements

• FLASH wear

• Latency requirements

• Expected life of product

• Length of projects

• Size of projects

• Complex supplier relationships

• Purchasing processes

• …

Page 8: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20158

Open Source Stacks

• There are two major open source efforts in the IVI space– GENIVI– AGL (Automotive Grade Linux)

• GENIVI defines a standard automotive platform– Identifying existing components– Developing components to fill the gaps

• Both project build demonstrator platforms

Page 9: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/20159

The PELUX Stack

Base Operating System

CPU Adaptations ECU Adaptations

plx.

Resource

Access

Manager

GENIVI Services S S S S

plx.

Application

Manager

plx.SoftwareContainer

QtIVI

ApplicationSystem UI

Application Application Application

Page 10: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201510

Apps in Cars

• Remember MirrorLink?

• Who owns the data?

• Native applications – We see a large demand for this– Possible to add functions during the vehicle life-time– Matches the customer expectations

• Side effects– Partitioning the UI in exchangeable parts– Smaller updates

Page 11: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201511 11/11/201511

plx.ApplicationManagerQt Compositing using Wayland

• Modern, multi-process architecture

• Application Lifecycle Management

• Security model to protect integrity

• Hardware accelerated compositing using Wayland

• OpenGL and HTML applications can be seamlessly composited

• Elevates Qt from being a UI and application framework to being a fully-fledged automotive UI software platform

Application

Input Management

Notification infrastructure

Assembled views

Page 12: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201512 11/11/201512

Application SDKSoftware development kit

• Qt Creator based – supports Windows/OSX/Linux

• Integrated with your System UI and UI Components

• QmlLive – enables quick round-trip to target hardware

• QtEmulator – enables evaluation on desktop against simulated service APIs

• Reference UI – provides a starting point

Page 13: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201513

QmlLive

• Live reloader – simply save an see the changes

• Client / server – run it on your target

• Open source – grab it and improve it!

https://github.com/Pelagicore/qmllive

• Enables rapid UI prototyping

• Quickest turn around times around!

Page 14: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201514 11/11/2015 PELAGICORE CONFIDENTIAL14

Prototyping

Page 15: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201515

Prototyping

• Allow users to evaluate design proposals

• Feedback based on try-out– in contrast to read a descriptions

Page 16: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201516

Evolutionary Prototyping

• Build a structured prototype

• Constantly refine it

• Can become the product

…evolutionary prototyping acknowledges that we do not understand all the requirements and builds only those that are well understood.

Page 17: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201517

Elements of User Experience

Surface

•Images, Text

Skeleton

•Placement of Buttons, Tabs, Photos, …

Structure

•Navigation and Data Hierarchy

Scope

•Features and Functions

Strategy

•Business Benefits

Source: THE ELEMENTS OF USER EXPERIENCE, Jesse James Garrett

Page 18: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201518

UI Development

Wireframes Graphics Motion Prototype

StructureSkeleton

Surface Surface Tool

Page 19: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201519

HMI Stack

Motion

Home

Movies

Genres

Movie List

Music

Albums

Settings

Graphics

Wireframes

Page 20: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201520

Evolutionary Prototype

Interaction Design

GraphicsDesign

Development

Simulation

Simulated Backend

UI

Product

Real Backend

UI

revi

ew

inputfeedback

Page 21: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201521 11/11/2015 PELAGICORE CONFIDENTIAL21

Prototyping with QML

Page 22: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201522

Information Flow

UI Specification

Frontend

Backend

OS

Req

uir

em

ents

Acce

pta

nce

Te

st

Page 23: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201523

Backend

Frontend

Typical QML Based System

System UI

Controls

Application Views

QML Plugins Services

API

Page 24: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201524

Prototyping Environment

Frontend

User Interface Mocked Controls

QML Backend Simulation

API

Page 25: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201525

Practical Considerations

• Fast round trip time

• Simplified user interface

• Easy export of assets

• Easy access to data

• Verifiable on hardware

• Open to evolve

Page 26: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201526

Toolset

• Balsamiq – UI Wireframing

• PNG Express – Photoshop export

• Sketch – Vector Drawing (Mac only)

• Qt Creator – The IDE for Qt

• QmlLive – live code viewer

• JSON data via REST API

• Many QML techniques

Page 27: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201527 11/11/2015 PELAGICORE CONFIDENTIAL27

DEMOPrototyping with QML

Page 28: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201528

Pixy

Page 29: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201529

Demo

• Part 1 – Structure, Skeleton– Mocking a Wireframe UI

• Part 2 – Surface– Adding Graphics, Polishing

• Part 3 – Backend API– Enabling Data

Page 30: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201530

Conclusion

• Work close with Designers

• Inject yourself early in the creation pipeline

• Evolutionary Prototype becomes Product

• Clear separation between Frontend and Backend

• Prioritize communication

• Qt is often only one of many options for UI

Page 31: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201531

Neptune

Page 32: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201532

Let’s meet!

• Win a Raspberry Pi kit – develop your own embedded Uis with Qt QML– We will draw five winner on Friday the 13/11

http://goo.gl/forms/NTLywP2OTx

• We are looking for talent from pixel to silicon – career.pelagicore.com

• We host foss-gbg.se frequently – come visit tomorrow!

Page 33: JOHAN THELIN // NOV 11 2015 CHALMERS, GOTHENBURGcomplab.github.io/tech-talks-2015-11/thelin_pelagicore.pdf · Elements of User Experience Surface •Images, Text Skeleton •Placement

11/11/201533

[email protected] // www.pelagicore.com