Coumpler Guide

Table of Contents

System Architecture Overview

[
  {
    "id": "item_1767459742427_xuxwr",
    "type": "header",
    "col": 0, "row": 0, "w": 6, "h": 8,
    "props": {
      "text": "My First Dashboard",
      "align": "center",
      "bg": "#6366f1",
      "color": "#ffffff"
    }
  },
  {
    "id": "item_1767459745410_at884",
    "type": "Status",
    "props": {
      "isOn": "true",
    }
  }
]

Global Item Structure

Every element in the project JSON array follows this wrapper structure.

{
  "id": "item_unique_id",  // Unique ID
  "type": "header",      // Component Type
  "col": 0,              // X Position (0-5)
  "row": 0,              // Y Position
  "w": 6,                // Width (1-6)
  "h": 8,                // Height
  "props": { ... }       // Properties go here
}

H Header

Large text element for titles.

JSON Example

"props": {
  "text": "Dashboard",
  "color": "#ffffff",
  "bg": "#6366f1",
  "size": "24px",
  "align": "center"
}

¶ Text

Standard body text.

JSON Example

"props": {
  "text": "System operating normally.",
  "color": "#a1a1aa",
  "size": "14px",
  "align": "left"
}

I Text Field

Single-line input.

JSON Example

"props": {
  "text": "Username",
  "placeholder": "Enter ID...",
  "updateTrigger": "change"
}

T Text Box

Multi-line input.

JSON Example

"props": {
  "text": "Feedback",
  "placeholder": "Type your comments here...",
  "updateTrigger": "button"
}

☑ Check Box

Single toggle boolean.

JSON Example

"props": {
  "text": "I agree to terms",
  "align": "left",
  "updateTrigger": "change"
}

⚏ Check Group

Multiple selection list.

JSON Example

"props": {
  "text": "Select Days",
  "options": "Mon, Tue, Wed, Thu, Fri",
  "updateTrigger": "change"
}

○ Radio Group

Single selection from list.

JSON Example

"props": {
  "text": "Priority Level",
  "options": "Low, Medium, High",
  "updateTrigger": "change"
}

▼ Drop-down

Compact single selection.

JSON Example

"props": {
  "text": "Destination",
  // "London" is the default because it is first
  "options": "London, New York, Tokyo",
  "updateTrigger": "change"
}

S Switch

Modern toggle.

JSON Example

"props": {
  "text": "Main Power",
  "color": "#ef4444",
  "updateTrigger": "change"
}

⎯○⎯ Slider

Range selector.

JSON Example

"props": {
  "text": "Volume",
  "min": 0,
  "max": 100,
  "value": 50,
  "color": "#3b82f6",
  "updateTrigger": "change"
}

💡 LED

Status light indicator.

JSON Example

"props": {
  "text": "Server Status",
  "colorOn": "#22c55e",
  "colorOff": "#333333",
  "isOn": true
}

⏲ Gauge

Speedometer style display.

JSON Example

"props": {
  "text": "Temperature",
  "value": 72,
  "min": 0,
  "max": 100,
  "unit": "°F",
  "color": "#ef4444"
}

📈 Line Graph

Historical data chart.

JSON Example

"props": {
  "text": "Monthly Sales",
  "data": "120, 150, 180, 90, 200",
  "xLabels": "Jan, Feb, Mar, Apr, May",
  "color": "#f59e0b",
  "bgColor": "#18181b",
  "grid": true
}

🗺️ Map

Geographical display.

JSON Example

"props": {
  "text": "HQ Location",
  "lat": "37.7749",
  "long": "-122.4194",
  "zoom": "0.05"
}

🖼️ Image

Static image.

JSON Example

"props": {
  "src": "https://via.placeholder.com/600x400"
}

📷 Video / Webcam

HLS Stream or Video File.

JSON Example

"props": {
  "url": "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
  "autoplay": true,
  "muted": true,
  "controls": false
}

🌐 Web View

Embed external site.

JSON Example

"props": {
  "address": "https://www.google.com/maps",
  "scrollable": true
}

ℹ️ Info Display

System widgets.

JSON Example

"props": {
  "mode": "datetime",
  "color": "#ffffff",
  "size": "16px",
  "align": "right"
}

💬 Popup

Modal dialog. Invisible element.

JSON Example

"props": {
  "title": "Critical Error",
  "message": "Connection lost to sensor A4.",
  "type": "error",
  "button": "Retry",
  "show": false
}

⚡ Button

Action trigger.

JSON Example

"props": {
  "text": "Save Settings",
  "color": "#ffffff",
  "bg": "#22c55e",
  "linkedIds": "input_user, switch_power"
}

🔌 Agent Script

To enable sending data from the phone back to your server, use the Agent Script.

When you interact with the app, it sends a POST request. This PHP script receives it and updates your JSON file.

Example `coumpler_relay.php` Code:

<?php
// Allow access from anywhere (CORS)
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");

$jsonFile = 'data.json';
$input = json_decode(file_get_contents('php://input'), true);

if (isset($input['id']) && isset($input['value'])) {
    if(!file_exists($jsonFile)) file_put_contents($jsonFile, '{}');
    
    $data = json_decode(file_get_contents($jsonFile), true);
    $data[$input['id']] = $input['value']; // Update the specific key
    
    file_put_contents($jsonFile, json_encode($data));
    echo json_encode(["status" => "success"]);
}
?>