Diagram Configuration

Create interactive facility diagrams with real-time data overlays for visual monitoring

The diagram builder allows you to create visual representations of your water treatment facility with live data overlays. Build process flow diagrams, equipment layouts, and system schematics that update in real-time.

Overview

Diagrams combine:

• Background images or colors
• Equipment icons and symbols
• Lines and connections
• Text labels
• Live variable data overlays
• Interactive tooltips

Creating a Diagram

1. Access Diagram Builder

   Navigate to the diagram configuration module and create a new diagram.

2. Set Background

   Configure the canvas background:

   • Solid color (backgroundColor)
   • Background image (backgroundImg)
3. Add Elements

   Use the sidebar tools to add:

   • Images (equipment, icons)
   • Lines (pipes, connections)
   • Polylines (complex paths)
   • Text labels
   • Variable displays
4. Configure Variables

   Assign InfluxDB variables to elements and configure display options.

5. Save Diagram

   Provide a title and save. The diagram becomes available for viewing.

Canvas Tools

The diagram builder provides multiple drawing and editing tools:

Navigation Tools

Pan · tool

Click and drag to move around the canvas. Useful for large diagrams.

Activation: Click pan icon or press and hold middle mouse button

Zoom · tool

Zoom in/out to view details or get overview.

Controls:

• Zoom In button (+)
• Zoom Out button (-)
• Mouse wheel scroll

Drawing Tools

Line · tool

Draw straight connections between two points.

Usage:

1. Select line tool
2. Click start point
3. Click end point
4. Configure line style (color, width)

Polyline · tool

Draw multi-segment paths for complex piping routes.

Usage:

1. Select polyline tool
2. Click each vertex point
3. Press Enter to finish or right-click
4. Press Escape to cancel

Text · tool

Add text labels to the diagram.

Features:

• Custom font size
• Color selection
• Bold/italic styling
• Editable after placement

Image · tool

Place equipment icons and symbols.

Available Images:

• Pumps and motors
• Tanks and vessels
• Valves and actuators
• Sensors and instruments
• Piping components

Variable · tool

Add floating variable displays that show live data.

Display Types:

• Numeric values
• Percentage bars
• Boolean indicators
• Binary bit status

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:25-118

Element Configuration

Image Elements

Images represent equipment and can display associated variable data.

const imageElement = {
  id: String(Date.now()),
  type: 'image',
  src: '/assets/img/Diagram/pump.png',
  x: 150,
  y: 150,
  width: 100,
  height: 100,
  draggable: true,
  dataInflux: {
    id: 42,                    // Variable ID
    name: "Pump_1_Flow",
    position: 'Centro',         // Top, Centro, Bottom
    show: true,
    maxValue: 100,             // For percentage displays
    booleanColors: {           // For boolean variables
      colorOn: '#00FF00',
      colorOff: '#FF0000'
    },
    binaryBit: 0               // For binary status displays
  }
}

Line Elements

Lines represent pipes, connections, or flows.

const lineElement = {
  id: String(Date.now()),
  type: 'line',
  points: [x1, y1, x2, y2],
  stroke: '#3b82f6',          // Color
  strokeWidth: 5,              // Width in pixels
  draggable: false
}

Line Style Options:

stroke · string · default: "#3b82f6"

Hexadecimal color code for the line

strokeWidth · number · default: 5

Line thickness in pixels (1-20 recommended)

Polyline Elements

Polylines create complex paths with multiple segments.

const polylineElement = {
  id: String(Date.now()),
  type: 'polyline',
  points: [x1, y1, x2, y2, x3, y3, ...],  // Multiple vertices
  stroke: '#3b82f6',
  strokeWidth: 5,
  draggable: false
}

Source Reference: /src/modules/DrawDiagram/hooks/useDrawingTools.js

Text Elements

Text elements provide labels and annotations.

const textElement = {
  id: String(Date.now()),
  type: 'text',
  text: 'Main Feed Pump',
  x: 100,
  y: 50,
  fontSize: 16,
  fill: '#000000',            // Text color
  fontStyle: 'normal',        // 'normal', 'bold', 'italic'
  draggable: true
}

Text Style Options:

fontSize · number · default: 16

Font size in pixels (8-72 recommended)

fill · string · default: "#000000"

Text color in hexadecimal

fontStyle · string · default: "normal"

Font style: normal, bold, or italic

Variable Data Overlay

Variables can be overlaid on diagram elements to show live values.

Position Options

Top

Display variable value above the element.

Best for: Tank levels, overhead indicators

Centro (Center)

Display variable value centered on the element.

Best for: Embedded displays, gauge overlays

Bottom

Display variable value below the element.

Best for: Labels, status indicators

Variable Display Types

Numeric Display

Shows the current numeric value with optional units.

dataInflux: {
  id: 42,
  name: "Flow_Rate",
  position: "Bottom",
  show: true
}

Displays: 45.2 L/min

Percentage Display

Shows value as a percentage of maximum.

dataInflux: {
  id: 15,
  name: "Tank_Level",
  position: "Centro",
  show: true,
  maxValue: 1000
}

Displays: 75% (if current value is 750)

Boolean Display

Color-coded indicator for on/off states.

dataInflux: {
  id: 23,
  name: "Pump_Status",
  position: "Top",
  show: true,
  booleanColors: {
    colorOn: '#00FF00',
    colorOff: '#FF0000'
  }
}

Displays: Green dot (ON) or Red dot (OFF)

Binary Bit Display

Shows status of a specific bit in a binary variable.

dataInflux: {
  id: 30,
  name: "Status_Register",
  position: "Centro",
  show: true,
  binaryBit: 3        // Monitor bit 3
}

Use Case: Monitoring individual flags in a status word

Source Reference: /src/modules/DrawDiagram/hooks/useTooltipManager.js:116

Diagram Metadata

Each diagram stores metadata for configuration:

const diagramMetadata = {
  id: null,                    // Set after first save
  title: 'Main Treatment Process',
  backgroundColor: '#ffffff',   // Canvas background color
  backgroundImg: ''            // Optional background image URL
}

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:50-55

Saving and Loading Diagrams

Save Diagram

const diagramToSave = {
  elements: elementsToSave,
  circles: [],                  // Circle markers (if any)
  diagramMetadata: {
    title: 'Process Diagram',
    backgroundColor: '#ffffff',
    backgroundImg: ''
  },
  deleted: {                    // Track deleted items for updates
    lines: [],
    texts: [],
    images: [],
    polylines: []
  }
}

await saveDiagramKonva(diagramToSave)

Element ID Handling:

const elementsToSave = elements.map(el => {
  const element = { ...el }
  // Remove IDs for new elements
  if (!diagramMetadata.id || newElementsIds.includes(el.id)) {
    delete element.id
  }
  return element
})

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:192-250

Load Diagram

await uploadCanvaDb(diagramId, {
  setCircles,
  setDiagramMetadata,
  setTool
})

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:372-387

Keyboard Shortcuts

Key	Action
Escape	Cancel current tool/operation
Delete	Delete selected element
Enter	Finish polyline drawing
Right-click	Cancel line/polyline or finish polyline

Implementation:

const handleKeyDown = (e) => {
  if (e.key === 'Escape') {
    setTool('')
    setTextPosition(null)
    if (isDrawingPolyline) {
      setIsDrawingPolyline(false)
      setPolylinePoints([])
    }
  }
  if (e.key === 'Enter' && isDrawingPolyline) {
    finishPolyline()
  }
  if (e.key === 'Delete' && selectedId) {
    handleDeleteElement(selectedId)
  }
}

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:287-317

Element Layering

Control the stacking order of diagram elements:

Bring to Front

Move selected element to the top layer.

Use Case: Make important elements visible above pipes/lines

Send to Back

Move selected element to the bottom layer.

Use Case: Push background elements behind foreground items

Controls: Available in the top navbar when an element is selected

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:76-77

Canvas Controls

Zoom Controls

const handleZoomIn = () => {
  const scaleBy = 1.05
  setStageScale((prev) => prev * scaleBy)
}

const handleZoomOut = () => {
  const scaleBy = 1.05
  setStageScale((prev) => prev / scaleBy)
}

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:266-274

Undo Function

Remove the most recently added element:

const handleUndo = () => {
  if (elements.length === 0) {
    Swal.fire({
      icon: 'info',
      title: 'Nada para deshacer',
      text: 'No hay elementos en el diagrama.'
    })
    return
  }
  setElements((prev) => prev.slice(0, -1))
}

Undo only removes the last element. There is no redo functionality. Save frequently to preserve your work.

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:252-264

Best Practices

Diagram Organization

• Create separate diagrams for different process areas
• Use consistent icon styles across diagrams
• Group related equipment visually
• Maintain clear flow direction (left-to-right or top-to-bottom)

Line Routing

• Use polylines for complex piping routes
• Avoid crossing lines when possible
• Use different colors for different media (water, chemicals, air)
• Keep line widths proportional to actual pipe sizes

Variable Display

• Show only critical variables on overview diagrams
• Position displays to avoid overlap
• Use consistent positioning (e.g., all flow rates at bottom)
• Consider percentage displays for capacity metrics

Performance

• Limit diagrams to 50-100 elements for optimal performance
• Use background images sparingly (large files slow rendering)
• Create detail diagrams for complex areas rather than one massive diagram

Troubleshooting

Elements Not Appearing

Possible Causes:

1. Element positioned outside visible canvas area
2. Element behind other elements (layer order)
3. Element color matches background

Solutions:

• Use pan and zoom to search
• Check element layer order
• Select element from element list

Variable Data Not Updating

Checklist:

1. Variable exists and has data
2. Variable ID correctly assigned to element
3. Display position configured
4. show property is true

Debug: Check browser console for data fetch errors

Cannot Select Element

Causes:

1. Element not draggable (lines, polylines)
2. Another tool is active
3. Element behind non-draggable element

Solutions:

• Press Escape to cancel active tool
• Use layer controls to bring element forward
• Click element edge/corner for better selection

Diagrams are rendered using Konva.js, a high-performance HTML5 canvas library. All drawing operations are hardware-accelerated for smooth interaction even with complex diagrams.