OSCON 2018 - Adaptive Web Components: Context matters!

Adaptive User Interface Demo

See also Adaptive Variants Demo

Story

Ever sat in one of the shaking cable cars in San Francisco and ordered a wrong pizza because the train is rattling along so the buttons get all mixed up?

Showcase

Vibration (movement) of a device makes UI elements increase size.

Demonstrates how context queries might be used to adapt UI to environmment conditions. Generic Sensor API is used to gather data (Accelerator) and adjust size of UI elements.

Phone

To test in Chrome follow the Launch Instructions for Generic Sensor API or use buttons in the top to simulsate Vibration Level change.

Laptop

Since no sensor API is available the Vibration Level might be simulated using the buttons in the top of the app.

Launch Demo

@DEV

Built with

• OpenUI5 framework (GitHub: https://github.com/SAP/openui5)
• Adaptive Web Components Framework
• Generic Sensor API

How to install

• Clone the repository.
• Ensure nodejs and npm are installed (see node.js)
• Ensure grunt installed. If not, execute

  npm install -g grunt-cli
  

• install and start the app itself:

  npm install
  npm install -g grunt-cli
  npm start
  

• open in browser: http://localhost:8082