Stories
Slash Boxes
Comments

SoylentNews is people

Submission Preview

Link to Story

A First Look at PyScript: Python in the Web Browser – Real Python

Accepted submission by upstart at 2024-08-16 08:26:49
News

upstart [soylentnews.org] writes:

████ # This file was generated bot-o-matically! Edit at your own risk. ████

A First Look at PyScript: Python in the Web Browser – Real Python [realpython.com]:

Sensor API

Web browsers running on mobile devices like tablets or smartphones expose the Sensor API [mozilla.org], which gives JavaScript programmers access to the device’s accelerometer, ambient light sensor, gyroscope, or magnetometer if it’s equipped with one. Additionally, some sensors can be emulated in software by combining the signals from multiple physical sensors, reducing noise. A gravity sensor is a good example.

You can check out a live demo [github.io] illustrating the use of the gravity sensor in PyScript. Make sure to open the link on a mobile device. As soon as you change the orientation of your phone or tablet, you’ll see one of these messages displayed on the screen:

  • Horizontal counterclockwise
  • Horizontal clockwise
  • Vertical upright
  • Vertical upside down
  • Screen up
  • Screen down
  • Tilted

In case your device doesn’t come with a gravity sensor or you’re accessing the site over an unencrypted connection, you’ll get notified about that through a pop-up window. Alternatively, you might just see a blank screen.

Note: Make sure to host your HTML file through the secure HTTPS protocol [realpython.com] to use the Sensor API. Web browsers will block this JavaScript API for content served over plain HTTP. You can check out how to publish your PyScript application for more details on that.

To hook into a sensor on your device, you’re going to need to write a bit of a JavaScript glue code because PyScript doesn’t currently export the Pyodide instance that it creates into the JavaScript’s global namespace. If it did, then you could grab one and access the Python proxy objects in JavaScript with slightly less hassle. For now, you’ll go the other way around by calling a JavaScript function from Python.

Create a new index.html file and keep adding content to it. First, define a script tag in your HTML web page and fill it in with the following JavaScript code:

Copied!

The function takes a callback, which will be a JavaScript proxy for your Python function. It then checks if your browser supports the GravitySensor [mozilla.org] interface and creates a new sensor instance with a sampling frequency of sixty times per second. A single sensor reading is a three-dimensional vector representing the direction and magnitude of gravity.

Next up, implement and register the Python callback in the browser using PyScript:

Copied!

Assuming there’s a span element somewhere on your page, you find its reference using a CSS selector and then write a formatted string with the three components of the gravity vector into it after taking a sensor reading. Note the need for wrapping your Python callback in a JavaScript proxy before registering it as a listener.

Note: Testing a web page on a mobile device becomes difficult because you don’t have access to the usual web development tools and the console. To help yourself, you can enable USB debugging [android.com] on your Android device and take advantage of remote debugging [chrome.com] in Google Chrome. This feature isn’t supported for iOS devices.

Knowing the direction of the gravity vector will tell you something about your phone’s orientation, which can be useful when you want to take a level picture or to detect when you picked up the device from the desk, for example. The magnitude of the gravity vector is the Earth’s acceleration, which you might use as a rough estimate of altitude.

To make this example more interesting, go ahead and use NumPy to detect various orientations of the device:

Copied!

You add the py-env declaration to fetch NumPy into your PyScript environment. Then, you import the library at the top of your existing py-script tag and make the callback delegate the processing to a helper function. The new orientation() function normalizes and rounds your gravity vector to compare it against a few unit vectors along the axes in the device coordinate system [github.io].

If your device doesn’t support the gravity sensor, then try to identify other sensors that work, then think of an idea for another application and adapt the code shown in this example accordingly. You can share your cool idea in the comments section below!

more-than-2-weeks-development dept.

See also:

Original Submission