Browser-based App via QR Code

I made a browser-based app that can access the orientation data on my IPhone and displayed on the screen.

Try this web via a QR Code below.

‍

The most unique thing that a browser application has on a mobile device compared with the desktop side is that we can use its inner gyroscope data in the application. So I made a knob that can display the rotation of the phone on the screen.

‍

How to get access of device orientation

iOS 13 canceled the option of motion and orientation in the safari menu. To access the data, it has to ask request via code. Through this tutorial, you can ask permission via an alert. Code for the website please see HERE.

‍

How to change CSS pseudo-element

I used css pseudo-elements to make this "fancy" knob. Check out this doc that is well-explained the pseudo-elements. Because it's not a DOM, I cannot get this element and change its style by document.getElementbyId. But you can change the style through javascript code by manipulating the class of this dom.

Here's the code that showed the magic. When the knob is ON, remove the "green" class and add "blue" class and vice versa. The "green" class has the box-shadow style.

.green{

   box-shadow: inset 0 -3px 6px rgba(64, 191, 128, 0.1), 0 2px 12px rgba(64, 191, 128, 0.7);

}

‍

Display Screen Test

I only have the 1206A LCD display at home. I downloaded the liquidCrystal library and tested the basic display function. The pin connection diagram is in this post.