Diagrams

Overview

Diagrams in Centinela provide visual representations of water treatment systems using Konva.js canvas rendering. They support interactive elements like lines, images, text, and polylines, all capable of displaying real-time variable data.

Diagram Elements

Images: Equipment icons, valves, pumps, tanks
Lines: Pipes, connections between components
Polylines: Complex pipe routing
Text: Labels and real-time value displays

List All Diagrams

Retrieve all configured diagrams:

cURL

curl -X GET "https://masagua.cooptech.com.ar/api/getDiagrams" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json"

Response:

{
  "data": [
    {
      "id": 1,
      "title": "Planta de Tratamiento - Vista Principal",
      "status": 1,
      "backgroundColor": "#f0f9ff",
      "backgroundImg": ""
    },
    {
      "id": 2,
      "title": "Sistema de Filtración",
      "status": 1,
      "backgroundColor": "#ffffff",
      "backgroundImg": "https://example.com/planta-fondo.jpg"
    }
  ]
}

integer

Unique diagram identifier

title

string

Diagram name/title

status

integer

Active status (1 = active, 0 = inactive)

backgroundColor

string

Canvas background color (hex format)

backgroundImg

string

Background image URL (optional)

Get Diagram Details

Retrieve complete diagram configuration including all elements:

cURL

curl -X GET "https://masagua.cooptech.com.ar/api/getObjectCanva?id=1" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json"

Response:

{
  "data": [
    {
      "id": 1,
      "title": "Planta de Tratamiento - Vista Principal",
      "backgroundColor": "#f0f9ff",
      "backgroundImg": "",
      "status": 1,
      "images": [
        {
          "id": 1,
          "name": "Tanque Principal",
          "src": "https://storage.example.com/images/tank.svg",
          "left": 150,
          "top": 200,
          "width": 80,
          "height": 100,
          "angle": 0,
          "status": 1,
          "variables": [
            {
              "id_influxvars": 15,
              "show_var": true,
              "position_var": "Bottom",
              "max_value_var": 100,
              "boolean_colors": {
                "true": "#22c55e",
                "false": "#ef4444"
              },
              "variable": {
                "id": 15,
                "name": "Nivel Tanque",
                "unit": "%",
                "type": "last",
                "calc": false,
                "binary_compressed": false,
                "varsInflux": { /* ... */ }
              }
            }
          ]
        }
      ],
      "lines": [
        {
          "id": 1,
          "id_influxvars": 12,
          "points": {
            "start": { "left": 100, "top": 150 },
            "end": { "left": 200, "top": 150 }
          },
          "stroke": "#3b82f6",
          "strokeWidth": 4,
          "animation": 1,
          "invertAnimation": false,
          "status": 1,
          "variable": {
            "id": 12,
            "name": "Caudal Principal",
            "unit": "m³/h",
            "varsInflux": { /* ... */ },
            "position": "Center",
            "show_var": true
          }
        }
      ],
      "polylines": [
        {
          "id": 1,
          "id_influxvars": 18,
          "points": [
            { "left": 100, "top": 100 },
            { "left": 150, "top": 150 },
            { "left": 200, "top": 100 }
          ],
          "stroke": "#059669",
          "strokeWidth": 3,
          "animation": 1,
          "invertAnimation": false,
          "status": 1,
          "variable": { /* ... */ }
        }
      ],
      "texts": [
        {
          "id": 1,
          "text": "Entrada Principal",
          "left": 120,
          "top": 80,
          "sizeText": 16,
          "colorText": "#1f2937",
          "status": 1,
          "id_influxvars": null
        }
      ]
    }
  ]
}

Save Diagram

Create or update a diagram with all its elements:

cURL

curl -X POST "https://masagua.cooptech.com.ar/api/saveDiagram" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '{
    "diagram": {
      "id": 1,
      "title": "Sistema Principal",
      "status": 1,
      "backgroundColor": "#f0f9ff",
      "backgroundImg": ""
    },
    "images": [
      {
        "id": 1,
        "name": "Bomba 1",
        "src": "https://storage.example.com/pump.svg",
        "left": 100,
        "top": 200,
        "width": 60,
        "height": 60,
        "angle": 0,
        "status": 1,
        "variables": {
          "Estado Bomba 1": {
            "id_variable": 25,
            "show": true,
            "position": "Bottom",
            "max_value": null,
            "boolean_colors": {
              "true": "#22c55e",
              "false": "#ef4444"
            }
          }
        }
      }
    ],
    "lines": [
      {
        "id": 1,
        "id_influxvars": 12,
        "points": {
          "start": { "left": 160, "top": 200 },
          "end": { "left": 300, "top": 200 }
        },
        "stroke": "#3b82f6",
        "strokeWidth": 4,
        "animation": 1,
        "invertAnimation": false,
        "status": 1
      }
    ],
    "polylines": [],
    "texts": [
      {
        "id": 1,
        "text": "Línea Principal",
        "left": 220,
        "top": 180,
        "sizeText": 14,
        "colorText": "#1f2937",
        "status": 1,
        "id_influxvars": null
      }
    ],
    "deleted": {
      "images": [],
      "lines": [],
      "polylines": [],
      "texts": []
    }
  }'

Diagram Object

diagram.id

integer

Diagram ID (omit for new diagrams)

diagram.title

string

required

Diagram title

diagram.status

integer

required

Status (1 = active)

diagram.backgroundColor

string

Canvas background color

diagram.backgroundImg

string

Background image URL

Image Elements

images[].id

integer

Image ID (omit for new images)

images[].name

string

Image name

images[].src

string

required

Image source URL

images[].left

number

required

X coordinate

images[].top

number

required

Y coordinate

images[].width

number

required

Image width in pixels

images[].height

number

required

Image height in pixels

images[].angle

number

Rotation angle in degrees

images[].variables

object

Associated variables configuration

Line Elements

lines[].points

object

required

Start and end points: {start: {left, top}, end: {left, top}}

lines[].stroke

string

required

Line color (hex)

lines[].strokeWidth

number

required

Line width in pixels

lines[].animation

integer

Enable animation (1 = yes, 0 = no)

lines[].invertAnimation

boolean

Reverse animation direction

lines[].id_influxvars

integer

Associated variable ID (optional)

Polyline Elements

polylines[].points

array

required

Array of points: [{left, top}, {left, top}, ...]

polylines[].stroke

string

required

Line color

polylines[].strokeWidth

number

required

Line width

Text Elements

texts[].text

string

required

Text content

texts[].left

number

required

X coordinate

texts[].top

number

required

Y coordinate

texts[].sizeText

number

Font size

texts[].colorText

string

Text color

texts[].id_influxvars

integer

Variable ID to display value (optional)

Deleted Elements

deleted

object

Arrays of element IDs to delete: {images: [1,2], lines: [3], ...}

Change Diagram Status

Activate or deactivate a diagram:

cURL

curl -X PUT "https://masagua.cooptech.com.ar/api/changeStatusDiagram" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '{
    "id": 1,
    "status": 1
  }'

integer

required

Diagram ID

status

integer

required

Current status (will be toggled)

Get Real-Time Variable Data

Fetch current values for diagram variables:

cURL

curl -X POST "https://masagua.cooptech.com.ar/api/multipleDataInflux" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '[
    {
      "dataInflux": {
        "id": 15,
        "name": "Nivel Tanque",
        "unit": "%",
        "varsInflux": { /* ... */ }
      }
    }
  ]'

Response:

{
  "data": {
    "15": 75.5
  }
}

Variable Display Options

Position

Where to display the variable value relative to the element:

Top - Above the element
Bottom - Below the element
Left - Left of the element
Right - Right of the element
Center - Centered on the element

Boolean Colors

For boolean variables, specify colors for each state:

{
  "boolean_colors": {
    "true": "#22c55e",
    "false": "#ef4444"
  }
}

Percentage Display

For variables with a maximum value, enable percentage calculation:

{
  "max_value_var": 100,
  "calculatePercentage": true
}

Binary Compressed Variables

Display specific bits from compressed variables:

{
  "binary_compressed": true,
  "id_bit": 2,
  "bit_name": "Bomba 2"
}

Animation

Lines and polylines support animated flow visualization:

animation

integer

Enable animation (1 = enabled)

invertAnimation

boolean

Reverse flow direction (useful for return lines)

Example: Complete Diagram

{
  "diagram": {
    "title": "Sistema de Bombeo",
    "status": 1,
    "backgroundColor": "#f0f9ff",
    "backgroundImg": ""
  },
  "images": [
    {
      "name": "Tanque Entrada",
      "src": "https://storage.example.com/tank.svg",
      "left": 50,
      "top": 100,
      "width": 80,
      "height": 100,
      "angle": 0,
      "status": 1,
      "variables": {
        "Nivel Tanque Entrada": {
          "id_variable": 10,
          "show": true,
          "position": "Bottom",
          "max_value": 100,
          "boolean_colors": {}
        }
      }
    },
    {
      "name": "Bomba Principal",
      "src": "https://storage.example.com/pump.svg",
      "left": 200,
      "top": 120,
      "width": 60,
      "height": 60,
      "angle": 0,
      "status": 1,
      "variables": {
        "Estado Bomba": {
          "id_variable": 25,
          "show": true,
          "position": "Right",
          "max_value": null,
          "boolean_colors": {
            "true": "#22c55e",
            "false": "#ef4444"
          }
        }
      }
    }
  ],
  "lines": [
    {
      "id_influxvars": 12,
      "points": {
        "start": { "left": 130, "top": 150 },
        "end": { "left": 200, "top": 150 }
      },
      "stroke": "#3b82f6",
      "strokeWidth": 6,
      "animation": 1,
      "invertAnimation": false,
      "status": 1
    }
  ],
  "texts": [
    {
      "text": "Línea de Impulsión",
      "left": 140,
      "top": 130,
      "sizeText": 14,
      "colorText": "#1f2937",
      "status": 1,
      "id_influxvars": null
    }
  ],
  "polylines": [],
  "deleted": {
    "images": [],
    "lines": [],
    "polylines": [],
    "texts": []
  }
}

Best Practices

Use consistent coordinate systems for alignment
Group related elements logically
Keep variable associations clear
Use animation sparingly for performance
Set appropriate polling intervals for real-time updates

Large diagrams with many animated elements may impact performance. Consider splitting into multiple diagrams or disabling animations for non-critical elements.

Overview

Diagram Elements

List All Diagrams

Get Diagram Details

Save Diagram

Diagram Object

Image Elements

Line Elements

Polyline Elements

Text Elements

Deleted Elements

Change Diagram Status

Get Real-Time Variable Data

Variable Display Options

Position

Boolean Colors

Percentage Display

Binary Compressed Variables

Animation

Example: Complete Diagram

Best Practices

Next Steps

Variables

Charts

​Overview

​Diagram Elements

​List All Diagrams

​Get Diagram Details

​Save Diagram

​Diagram Object

​Image Elements

​Line Elements

​Polyline Elements

​Text Elements

​Deleted Elements

​Change Diagram Status

​Get Real-Time Variable Data

​Variable Display Options

​Position

​Boolean Colors

​Percentage Display

​Binary Compressed Variables

​Animation

​Example: Complete Diagram

​Best Practices

​Next Steps

Variables

Charts

Overview

Diagram Elements

List All Diagrams

Get Diagram Details

Save Diagram

Diagram Object

Image Elements

Line Elements

Polyline Elements

Text Elements

Deleted Elements

Change Diagram Status

Get Real-Time Variable Data

Variable Display Options

Position

Boolean Colors

Percentage Display

Binary Compressed Variables

Animation

Example: Complete Diagram

Best Practices

Next Steps