Protobject for JavaScript

Welcome to the documentation for Protobject Framework, a system designed for building physical, distributed, and interactive Web applications. With Protobject Framework, you can use HTML5, CSS, and JavaScript to create interactive components across multiple devices, enabling the development of complex distributed systems.

Getting Started Example Projects

Getting Started

To use the Protobject Framework in an HTML page, include the following scripts just below the <body> tag:

<script src="https://app.protobject.com/framework/p.js"></script>
<script src="config.js"></script>

The config.js file is used to configure your interactive application. Below is an example that defines a simple prototype, where a button controls a lamp by turning it on and off.

Example `config.js`

Protobject.setProduction(true)
Protobject.initialize(
[
  { 
    name: "Button",
    page: "button.html",
    debug: "local",
  },
  { 
    name: "Lamp",
    page: "index.html",
    main: true,
    debug: "master",
  }
]);

Example `index.html` (Lamp Page)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lamp</title>
  </head>
  <body>

    <script src="https://app.protobject.com/framework/p.js"></script>
    <script src="config.js"></script>
    
    <h1 style="font-family:sans-serif; text-align:center; margin-top:20px">This is the lamp</h1>
    <script>
      // This file, index.html, defines a lamp.
      // An instance of the lamp is created with the specified dimensions and position.
      const lamp = new Protobject.Lamp({
        width: "calc(100% - 160px)", // Lamp width
        height: "calc(100% - 160px)", // Lamp height
        top: "80px", // Position from the top
        left: "80px", // Position from the left
        zIndex: 5,
        borderRadius: "20px"
      });

      // Event triggered when a message is received.
      // If the received message is 'true', the lamp turns on with red light.
      // If the message is 'false', the lamp turns off.
      Protobject.Core.onReceived(function (message) {
        if (message) {
          lamp.setColor({ r: 0, g: 255, b: 0 }); // Green light (RGB: 0, 255, 0)
        } else {
          lamp.setColor({ r: 0, g: 0, b: 0 }); // Off (RGB: 0, 0, 0)
        }
      });
    </script>
  </body>
  <style>
    #ProtobjectPlusButton {
      width: 80px !important;
    }

    #ProtobjectPlusButton:after {
      content: " Connect";
    }
  </style>
</html>

Example `button.html` (Button Page)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button</title>
  </head>
  <body>
    <script src="https://app.protobject.com/framework/p.js"></script>
    <script src="config.js"></script>
    <h1 style="font-family:sans-serif; text-align:center; margin-top:20px">This is the button</h1>
    <script>
      // A button is created with the following configurations:
      const button = new Protobject.Button({
        text: "Click Me", // Text displayed on the button
        style: {
          backgroundColor: "blue", // Button background color
          color: "white", // Text color
          padding: "10px 20px", // Internal spacing of the button (top-bottom, left-right)
          width: "calc(100% - 160px)", // Lamp width
          height: "calc(100% - 160px)", // Lamp height
          top: "80px", // Position from the top
          left: "80px", // Position from the left
          borderRadius: "20px",
        },
      });

      // An action is defined for when the button is pressed.
      // It displays a message in the console and sends the value 'true' to the "index.html" file.
      button.onPressed(() => {
        Protobject.Core.send(true).to("index.html"); // Send message to the file
      });

      // An action is defined for when the button is released.
      // It displays a message in the console and sends the value 'false' to the "index.html" file.
      button.onRelease(() => {
        Protobject.Core.send(false).to("index.html"); // Send message to the file
      });
    </script>
  </body>
</html>

Edit on Glitch Watch the Video

Glitch is an excellent platform for developing with the Protobject Framework.
It allows quick prototyping, easy collaboration, and real-time updates.
Alternatively, you can use any static web hosting service.

How It Works

A plus icon (+) appears on the lamp page to allow the button page to connect (e.g., scanning the QR code with a smartphone or sharing the link via Telegram).
The main page (index.html) displays a lamp.
The secondary page (button.html) provides a button interface.
When the button is pressed, it sends a true message to index.html, turning the lamp red.
When the button is released, it sends a false message, turning the lamp off.

Communication Between Devices

Protobject applications consist of one main page and multiple secondary pages, which may run on different devices such as smartphones, tablets, or PCs.

Devices can communicate by sending and receiving messages using the Protobject Core API.

Example of message transmission:

Protobject.Core.send(true).to("index.html");

This sends true to index.html, triggering the lamp to turn on.
The index.html page listens for incoming messages using Protobject.Core.onReceived and updates the lamp accordingly.

This mechanism allows seamless interaction between different components in the system.

Available Components

In addition to buttons and lamps, the Protobject Framework offers a variety of interactive components.