intel / generic-sensor-demos Goto Github PK

View Code? Open in Web Editor NEW

185.0 14.0 92.0 54.91 MB

License: Other

HTML 64.27% JavaScript 35.71% CSS 0.02%

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

browsers support

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

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

Add preview images to readme.md for 360 demos

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

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?

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.

Add icons for 360 PWA demos

Sensor.start() is not a function

I put the same code into my ES6 file using React ,After I initialize the Sensor Object ,then when I use sensor.start(),it will print 'sensor.start is not a function',by the way ,is that means I lose some important Module?or anything else?

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.

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>

Review distributed Generic Sensor polyfill

Assigned to @rakuco

sensor-tester: Don't display test contents if sensor is not supported by the device/browser

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

[sensor-info] Display sensor errors

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

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>

Some files are missing

Orientation lock is not reset during navigation between pages

Introduced by 8ae7f07

@kaixinjxq @rakuco please take a look.

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.

ambient-map demo: missing API key

The API key that was in the code had long expired, and #104 removed it to stop embedding keys in the source code.

The demo is currently broken as is, and there should be a way for another key to be specified (or the demo should be reworked altogether).

Add fallback mechanisms for demos when device doesn't support GenericSensor API

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.