intel / generic-sensor-demos Goto Github PK

License: Other

HTML 64.27% JavaScript 35.71% CSS 0.02%

generic-sensor-demos's Introduction

Demos for Generic Sensor API

This repository contains applications that demonstrate how to use the Generic Sensor API.

The Generic Sensor API is a set of interfaces which expose sensor devices to the web platform. The API consists of the base Sensor interface and a set of concrete sensor classes built on top, such as Accelerometer, LinearAccelerationSensor, Gyroscope, AbsoluteOrientationSensor and RelativeOrientationSensor.

The Generic Sensor API is very simple and easy-to-use! The Sensor interface has start() and stop() methods to control sensor state and several event handlers for receiving notifications about sensor activation, errors and newly available readings. The concrete sensor classes usually add their specific reading attributes to the base class.

Launch instructions

The demo apps work with Chrome 63 or later. If you have an older version of Chrome, please enable the chrome://flags/#enable-generic-sensor flag, before running the demos.

If the demo is using environmental sensors, such as, Magnetometer or AmbientLightSensor, please also enable chrome://flags/#enable-generic-sensor-extra-classes flag.

You could run demos from GitHub Pages for this repository.

Demos description

Punchmeter (code)

Punchmeter is a simple application that calculates user's punch speed using LinearAcceleration sensor. To try it the user should make a punch holding mobile device in his/her hand.

Orientation phone (code)

This simple demo illustrates how an absolute orientation sensor can be used to modify rotation quaternion of a 3D model. The model is a three.js Object3D class instance that has quaternion property.

360 degree beach panorama demo (code)

The demo presents a 360 degree panorama view of a beach with an added sound effect. The user can look around the scene by moving their device. The demo uses the orientation sensor to enable the user to look around.

360 degree video demo (code)

This demo presents a 360 degree video that the user can look around by moving their device. The user can also play the video in both forward and reverse by holding the device and walking forward and backward, respectively. The demo uses the orientation sensor to enable the user to look around and the accelerometer for walking detection to enable the user to control video playback by walking.

Ambient Map demo (code)

This web application demonstrates how Ambient light sensor can be used to control style of a map widget. When ambient illuminance level is less than 10 lumen, night mode style will be used.

Note: this demo requires chrome://flags/#enable-generic-sensor-extra-classes flag set.

Sensor Info demo (code)

This web application presents information about device sensors and their reading values.

Note: this demo requires chrome://flags/#enable-generic-sensor-extra-classes flag set.

VR Button demo (code)

This web application demonstrates how Magnetometer sensor can be used to provide user input for WebVR content. If you have VR enclosure with magnet button, you can interact with objects in the scene by sliding button down.

Note: this demo requires chrome://flags/#enable-generic-sensor-extra-classes flag set.

Sensor tester (code)

This web application allows to test functionality of the sensors, correctness of their models in correspondence with respective specification.

Note: this demo requires chrome://flags/#enable-generic-sensor-extra-classes flag set.

Development environment

If you would like to modify the existing code and experiment with the sensors API your code must be hosted on a web server that supports HTTPS. The simplest way is to fork this repository and enable GitHub Pages for your fork. Alternatevely, you can serve your web application locally, for this, we recommend to use Web Server for Chrome. If you are developing for mobile devices,set up port forwarding for your local server, and you are good to go!

Reporting a security issue

See Intel's Security Center for information on how to report a potential security issue or vulnerability.

generic-sensor-demos's People

Contributors

Stargazers

Watchers

Forkers

bleederi alexshalamov pozdnyakov anssiko christywl orenshalev honry kenchris xiuqijix keesverstoep co851002 xuq htschan toomuchome headvroom luco2018 sureshnarayan developermili dstefano iledan27 allandis rakuco sizhe1 sneaky-ninja vcchy vikasdc maatumo ruofeidu gogoend ronhere jackvargo boonzaai jm457 pandinosaurus bjorn-eiderback alfeugds tianlunhu ariesw chengchaozz vedsatyam cofuente ivapie alberthink hackthings benjirez amorphid sh-happens nishanksisodiya amirhyoussefi adriancampos ravise5 lasmd sonnysboy rleepfeil veacks coz1 cooper-mj ymiyatake3 sudokud dexiang dianmuz unmesh-shukla xsparc yashk398 imagineengine denjansen ranykm cmumford amlana-p modjular anderskromann sagar60 ssshammi enough7 isabella232 joemarshall samkit1999 reillyeon darktears brandonwaring yttiktak davidesforza lizacheung lipeng201986 drowningtoast roeku bjornwinther1996 shotgunxq yoannmourot fducom rorygamble eddiejamsession

generic-sensor-demos's Issues

Track the points raised by @kenchris in #80

Use proper drawer icon color

https://github.com/intel/generic-sensor-demos/blob/master/sensor-tester/src/sensor-tester.js#L12

This is just black inlined svg, not aligned with the theme colors.

Add preview images to readme.md for 360 demos

Review distributed Generic Sensor polyfill

Assigned to @rakuco

Migrate all demos to at least Polymer 3.0

HTML imports and the like are being removed from Chrome in 2019 Q1 and these are not good demos using deprecated web tech.

I would also recommend moving to LitElement directly but using Polymer 3.0 components until the mwc-elements are ready.

browsers support

Looks like the latest Firefox, Chrome, and Safari doesn`t support generic sensors API?

Ambient Map: The background style doesn't change

Load the page first, when the illuminance less than 10, the map should uses night mode otherwise day mode. But after my PR(#81), the background doesn't change while the illuminance is changed. (It can be initially in night mode).
My google map api-key doesn't work, so I can't debug very well. The root cause may relate to following two changes against previous code.
Diff codes:
Before:

if (this.isNightMode)
  this.$.mapElement.map.set('styles', this.nightStyles);
else
  this.$.mapElement.map.set('styles', []);

After:

this.mapElement = this.shadowRoot.querySelector('#mapElement');
this.mapElement.set('styles', this.isNightMode ? this.nightStyles : []);

Before:
styles is a property.

After:
styles is a attribute.

@kenchris, do you have any idea?

Auto-publish after new commits

See #94, for example. It would be good to set up a GitHub Workflow to automatically build and publish a new version of the demos when a commit is merged.

[sensor-info] Display sensor errors

The Sensor.onerror event handler should display the sensor error message.

Live examples available?

Hi,
I am looking for motion actuation implementation examples to use in the implementation phase of WCAG Guideline https://www.w3.org/TR/WCAG21/#x2-6-additional-sensor-inputs especially the Success Criterion https://www.w3.org/TR/WCAG21/#x2-6-1-motion-actuation

In particular, we are looking for examples that use motion actuation in web apps but also offer alternative modes of accessing content - take, fr example a 360 degree panorama that you can either explore my turning around yourself while holding the device, or by moving the panorama stepwise (or via a scripted pannung on long press) with arrow buttons. This would be important for people with motion impairment who use mounted devices or cannot handle the device.
Are you aware of live websites that use generic sensor inputs? While we are most interested in those that would meet the Success Criterion, others would also be interesting.

Not working on raspberry

I tried to run the demos from Raspberry. First, my Android phone takes almost forever before connecting to the server on Raspberry, second, the log console of the mobile browser says the web page cannot be found and finally, when the page of the demo is loaded on mobile Chrome, no sensor appears to be supported (not even the accelerometer, which I can access by simpler APIs than this demo). Thanks for any idea.

npm package?

How to import this module into ES6?

How to Set Flags in Android'WebView with Java or Kotlin??

Orientation lock is not reset during navigation between pages

Introduced by 8ae7f07

@kaixinjxq @rakuco please take a look.

sensor-tester: orientation locking does not always work

Spun off #66. Some screen locking combinations in tests such as "Accelerometer with screen coordinates" don't work: for example, locking to 180 degrees then 90 while originally in portrait mode causes the latter to fail and reset the orientation locking mechanism.

There's also additional information in #66 written by @kenchris.

We need to figure out if we're doing something wrong or whether we're hitting one or more Chromium bugs.

How can I use it in Angular 6?

I would like to know how can I add accelerometer in angular project. I am using angular version 6.

Regards

Add link from Readme.md to github pages

To https://intel.github.io/generic-sensor-demos/, so that it would be possible to try demos immediately without forking

Use new mwc- elements

Quite easy to move to

diff --git a/sensor-tester/src/sensor-tests-page.html b/sensor-tester/src/sensor-tests-page.html
index c928791..e0214ba 100644
--- a/sensor-tester/src/sensor-tests-page.html
+++ b/sensor-tester/src/sensor-tests-page.html
@@ -6,6 +6,10 @@
 <link rel="import" href="../bower_components/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../bower_components/paper-styles/color.html">
 
+<script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
+<script type="module" src="../node_modules/@material/mwc-formfield/mwc-formfield.js"></script>
+<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
+
 <dom-module id="sensor-tests-page">
   <template>
     <style>
@@ -113,11 +117,20 @@
 
     <div class$="[[referenceframe]]">
       <div>If device supports screen.orientation.lock(), rotate web page to different angles with the following buttons before running the tests.</div>
-      <paper-button on-click="lockOrientation" class="LOCK" data-args="portrait-primary">0˚</paper-button>
-      <paper-button on-click="lockOrientation" class="LOCK" data-args="landscape-primary">90˚</paper-button>
-      <paper-button on-click="lockOrientation" class="LOCK" data-args="portrait-secondary">180˚</paper-button>
-      <paper-button on-click="lockOrientation" class="LOCK" data-args="landscape-secondary">270˚</paper-button>
-      <paper-button on-click="lockOrientation" class="LOCK" data-args="RESET">RESET</paper-button>
+
+      <mwc-formfield label="0˚">
+        <mwc-radio id="o.1" name="o" on-click="lockOrientation" data-args="portrait-primary" checked></mwc-radio>
+      </mwc-formfield>
+      <mwc-formfield label="90˚">
+        <mwc-radio id="o.2" name="o" on-click="lockOrientation" data-args="landscape-primary" checked></mwc-radio>
+      </mwc-formfield>
+      <mwc-formfield label="180˚">
+        <mwc-radio id="o.3" name="o" on-click="lockOrientation" data-args="portrait-secondary" checked></mwc-radio>
+      </mwc-formfield>
+      <mwc-formfield label="270˚">
+        <mwc-radio id="o.4" name="o" on-click="lockOrientation" data-args="landscape-secondary" checked></mwc-radio>
+      </mwc-formfield>
+      <mwc-button on-click="lockOrientation" class="LOCK" data-args="RESET">RESET</mwc-button>
     </div>

Move to LitElement to simplify the code

I have tested the below and it works fine. You can move piece by piece.

diff --git a/sensor-tester/src/create-page.js b/sensor-tester/src/create-page.js
new file mode 100644
index 0000000..727783c
--- /dev/null
+++ b/sensor-tester/src/create-page.js
@@ -0,0 +1,16 @@
+import {LitElement, html, property} from '@polymer/lit-element';
+
+export const createPage = (options) => {
+  return class extends LitElement {
+    render() {
+      return html`
+        <sensor-tests-page
+          tests=${options.src}
+          sensortype=${options.sensorType}
+          referenceframe=${options.sensorType || "screen"}
+          frequency=${options.frequency || 90}>
+        </sensor-tests-page>
+      `;
+    }
+  }
+}
\ No newline at end of file
diff --git a/sensor-tester/src/sensor-tester.html b/sensor-tester/src/sensor-tester.html
index 07257b3..ab04c2e 100644
--- a/sensor-tester/src/sensor-tester.html
+++ b/sensor-tester/src/sensor-tester.html
@@ -13,7 +13,6 @@
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 
 <link rel="lazy-import" href="accelerometer-page.html">
-<link rel="lazy-import" href="accelerometer-screen-page.html">
 <link rel="lazy-import" href="linearaccelerationsensor-page.html">
 <link rel="lazy-import" href="linearaccelerationsensor-screen-page.html">
 <link rel="lazy-import" href="gyroscope-page.html">
@@ -22,6 +21,15 @@
 <link rel="lazy-import" href="ambientlightsensor-page.html">
 <link rel="lazy-import" href="magnetometer-page.html">
 
+<script type="module">
+  import { createPage } from "create-page.js"
+
+  customElements.define('accelerometer-screen-page', createPage({
+    src: "src/tests/accelerometer-screen.json",
+    sensorType: "Accelerometer"
+  }));
+</script>
+
 <dom-module id="sensor-tester">
   <template>
     <style>

intel / generic-sensor-demos Goto Github PK

generic-sensor-demos's Introduction

Demos for Generic Sensor API

Launch instructions

Demos description

Punchmeter (code)

Orientation phone (code)

360 degree beach panorama demo (code)

360 degree video demo (code)

Ambient Map demo (code)

Sensor Info demo (code)

VR Button demo (code)

Sensor tester (code)

Development environment

Reporting a security issue

generic-sensor-demos's People

Contributors

Stargazers

Watchers

Forkers

generic-sensor-demos's Issues

Recommend Projects

Recommend Topics

Recommend Org