OOCSI Things

OOCSI Things is a lightweight framework included with OOCSI-web for creating connected IoT prototypes using standard web technologies (HTML, JavaScript) and P5.js. It allows students and designers to quickly build “things” that run in a browser (especially on mobile devices) and interact with each other in a shared “Team Space”.

Concept

Each “Thing” is a single HTML file that defines its visual appearance and logic. The framework handles:

Connection: Automatically connects to the OOCSI server.
Team Space: Groups devices into a shared channel (Team), allowing them to discover and interact with each other without complex configuration.
UI: Provides a standard header showing the Team name, Thing name, connection status, and activity indicators.
P5.js Integration: Automatically initializes P5.js sketches if present.

Accessing Things

If you are running the OOCSI-web server, you can access the Things hub at:

https://<server-address>/things

From there, you can view the list of available Things or enter a specific Thing’s URL (e.g., /things/lampo).

Developing a Thing

A “Thing” uses the oocsiThings global object to register itself and manage data.

1. Basic Structure

<!DOCTYPE html>
<html>
<head>
    <title>My Thing</title>
    <!-- Include P5.js -->
    <script src="../p5.min.js"></script>
    <!-- Include OOCSI client -->
    <script src="../oocsi-web.min.js"></script>
    <!-- Include OOCSI Things library -->
    <script src="oocsi-things.js"></script>
</head>
<body>
    <script>
        function setup() {
            createCanvas(windowWidth, windowHeight);
            
            // Register the Thing
            // register(Name, Slug, InputVariables, OutputVariables)
            oocsiThings.register("My Thing", "mything", ["color"], ["touch"]);
        }

        function draw() {
            background(255);
            // Visualization logic
        }

        // Must define a global 'thing' function that is called after setup
        function thing() {
            // Logic to handle data
        }
    </script>
</body>
</html>

2. API Reference

`oocsiThings.register(name, slug, inVars, outVars)`

Initializes the Thing.

name: Human-readable name (e.g., “My Lamp”).
slug: Unique identifier for the code (e.g., “mylamp”).
inVars: Array of strings listing input variable names.
outVars: Array of strings listing output variable names.

`oocsiThings.data(name)`

Creates or retrieves an OOCSI variable that syncs with the network.

let myColor = oocsiThings.data("color");
// Read value
console.log(myColor());
// Set value (syncs to network)
myColor(100); 

`oocsiThings.connect(app, name, ownData)`

Links a variable from another Thing (app) to a local variable (ownData).

// When 'otherthing' updates 'btn', update my 'localState'
oocsiThings.connect("otherthing", "btn", "localState");

`oocsiThings.devices()`

Returns a list of currently active devices in the Team Space.

`oocsiThings.activity()`

Triggers a visual flash in the header to indicate activity (sending/receiving data).

`oocsiThings.requestDeviceMotion()`

Helper to request DeviceMotion permissions on iOS devices.

Examples

The OOCSI-web distribution comes with several example Things which you can access https://<server-address>/things

You can download the source code of any active Thing directly from the UI by clicking “Download Source” in the setup dialog.