Search

Search something to see results

GitHub

Mobilizing

Mobilizing.js

Mobilizing.js is a set of software components dedicated to Web technologies divided into two parts:

  • a lightweight library offering ES6 modules for the use of embedded sensors on computers, smartphones and tablets;
  • a collective interactivity platform, built on top of soundworks

The Mobilizing.js library @mobilizing/library aims to speed up and simplify access to sensors embedded in mobile screens when creating interactive art and design projects.

The library is organized into packages:

  • io (input-output)
  • utils (utility modules to facilitate the use of certain io)

Modules are written in TypeScript and are exported in several formats to be used as desired:

  • as an HTML file loader;
  • as an ES6 module with a bundler;

The umd (Universal Module Definition) version can be used client-side (web browser) or Node.js-side. The following source codes demonstrate a traditional development application based on a hand-created HTML file.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf8">
        <link type="text/css" href="style.css" rel="stylesheet">
        <script src="vendors/Mobilizing.umd.js"></script>
        <script src="script.js" defer></script>
    </head>

    <body>
    </body>
</html>

html, body {
    margin: 0px;
    font-family: monospace;
}

/**
 * with the umd version of Mobilizing, a module object is loaded through the <script> tag in your HTML file. Check the result of the following log in your console to see it.
 */
console.log(Mobilizing);

//make a shortcut to a specific class in Moblizizing
const Pointers = Mobilizing.io.Pointers;

//create an instance of a Pointers management object
const pointers = new Pointers();
//stat it (this has to be done for every sensors type)
pointers.start();

let bodyInnerText = document.body.innerText;

//refer to the class documentation to learn all the aivailable events and their arguments
pointers.on("pointerdown", (pointer) => {
    writeEventToBody(pointer);
});

pointers.on("pointerup", (pointer) => {
    writeEventToBody(pointer);
});

pointers.on("pointermove", (pointer) => {
    writeEventToBody(pointer);
});

//shortcut function to write the events in the body
function writeEventToBody(pointer) {
    const date = `${new Date().toLocaleString('en-US', { hour12: false })}`;
    document.body.innerText += `${date}: ${pointer.pointerType}, id: ${pointer.pointerId}, x: ${pointer.clientX}, y: ${pointer.clientY}, event: ${pointer.srcEvent.type}\n`;
    
    //simple auto-scroll "console effect"
    window.scrollTo({top: document.body.scrollHeight});
}

//NB : Sensors can be stopped with pointers.stop()

From a terminal, begin with the command :

$ npm create vite@latest

To install Mobilizing as a dependency :

$ npm i @mobilizing/library

In your JavaScript files, you can now use Mobilizing to import the entire file or just the parts you need:

//to import every packages
import * as Mobilizing from "@mobilizing/library";
// then, to get something specific :
const orientation = new Mobilizing.io.DeviceOrientation();
const time = new Mobilizing.utils.Time();

//to import only orientation and device motion classes
import { DeviceOrientation, DeviceMotion } from "@mobilizing/library/io";
const orientation = new DeviceOrientation();

//only Time class from utils
import { Time } from "@mobilizing/library/utils";
const time = new Time();

See the Vite.js documentation for more information on organizing projects.

Mobilizing.js was developed as part of EnsadLab by Dominique Cunin and Oussama Mubarak, under LGPL license. It has received the following support:

  • between 2014 and 2018, the Cosima (“Collaborative Situated Media”) research project, supported by the French National Research Agency (ANR).
  • between 2019 and 2021, the “Chaire arts & sciences” from École Polytechnique, École des Arts Décoratifs - PSL and Fondation Daniel et Nina Carasso.
  • between 2022 and 2024, the Commission Permanente de Coopération Franco-Québécoise (CPCFQ), in collaboration with the SAT
  • Paris Sciences et Lettres university (PSL) as part of its 2024 “prematuration” call for projects.