Skip to main content

Refinery Studio

The OctoMesh Refinery Studio is the web-based interface for visualizing and interacting with your OctoMesh data. This section covers the visual design tools available in the Studio.

Visual Design Tools​

Symbol Designer​

Create reusable graphical symbols for your process diagrams and dashboards:

  • Design symbols using primitive shapes (rectangles, ellipses, lines, paths, text)
  • Define Transform Properties that control symbol appearance based on input values
  • Create dynamic visualizations with Bindings that connect properties to element attributes
  • Test your symbols with the Simulation panel
  • Organize symbols in Symbol Libraries

Common use cases:

  • Tank level indicators
  • Gauge displays
  • Status indicators
  • Equipment representations
  • Custom icons

Process Diagrams​

Build complete process visualizations by combining symbols and primitives:

  • Drag symbols from your libraries onto the canvas
  • Add primitive shapes for custom graphics
  • Create Connections between elements to show flow
  • Configure symbol instance properties
  • Connect to live OctoMesh data for real-time updates

Common use cases:

  • Production line overviews
  • P&ID diagrams
  • System architecture views
  • Equipment layouts
  • Process flow diagrams

MeshBoards​

Create customizable dashboards with various widget types:

  • Build grid-based layouts with configurable columns and row heights
  • Choose from multiple Widget Types: KPI, Gauge, Chart, Table, and more
  • Define Variables for dynamic, parameterized dashboards
  • Enable Time Filters for time-series data analysis
  • Use Well-Known Names for routing (e.g., 'cockpit' for the home dashboard)

Common use cases:

  • Monitoring dashboards
  • KPI displays
  • Real-time status overviews
  • Data analytics views
  • Executive summaries

Data Tools​

Query Builder​

Create and manage reusable queries for your OctoMesh data:

  • Build queries visually without writing GraphQL
  • Choose from Query Types: Simple Query, Aggregation, Grouped Aggregation
  • Select CK Types and configure columns to include
  • Add Filters with various operators (Equals, Like, In, RegEx, etc.)
  • Use Aggregation Functions: COUNT, MIN, MAX, AVG, SUM
  • Save queries for reuse in dashboards and reports

Common use cases:

  • Data exploration and browsing
  • Creating data sources for MeshBoard widgets
  • Building reports and summaries
  • Counting and aggregating entities
  • Filtering entities by criteria

System Administration​

Configurations​

Manage system settings for OctoMesh services:

  • Configure Tenant Settings for version tracking and migrations
  • Set Tenant Mode for environment and maintenance control
  • Define E-Mail Sender configurations for SMTP connectivity
  • Configure SAP Connections for enterprise integration

Common use cases:

  • Setting up email notifications
  • Configuring SAP system connections
  • Managing tenant operational modes
  • Tracking service migrations

Workflow Overview​

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│ Symbol Designer │ ──► │ Symbol Libraries │ ──► │ Process Diagrams│
└─────────────────┘     └──────────────────┘     └────────┬────────┘
   Create symbols         Organize & share                │
                                                          ▼
┌─────────────────┐                              ┌─────────────────┐
│  Query Builder  │ ─────────────────────────────│   MeshBoards    │
└─────────────────┘                              └─────────────────┘
   Create queries           Data sources           Build dashboards
  1. Create Symbols: Use the Symbol Designer to create reusable graphical components
  2. Organize in Libraries: Save symbols to libraries for easy access and sharing
  3. Build Diagrams: Combine symbols in Process Diagrams to create complete visualizations
  4. Create Queries: Use Query Builder to define reusable data queries
  5. Create Dashboards: Use MeshBoards to build monitoring dashboards with widgets
  6. Connect to Data: Bind symbol properties and widgets to OctoMesh runtime data for live updates

Key Concepts​

Primitives​

Basic SVG shapes that form the building blocks of symbols:

  • Rectangle, Ellipse, Polygon
  • Line, Polyline, Path
  • Text, Image

Symbols​

Reusable compositions of primitives with:

  • Transform Properties: Exposed parameters that control appearance
  • Bindings: Mappings from properties to element attributes
  • Animations: Dynamic visual effects

Transform Properties​

Parameters exposed by symbols that can be controlled at runtime:

  • Number: Numeric values (e.g., 0-100 for a level)
  • Color: Color values
  • Boolean: On/off states
  • String: Text values

Bindings​

Connect transform properties to element effects:

  • Fill Level (for tank visualizations)
  • Rotation (for gauges)
  • Color changes (for status indication)
  • Visibility (show/hide elements)
  • And many more...

Expressions​

Mathematical formulas that transform property values:

value           // Pass through
value * 3.6     // Scale (0-100 to 0-360)
lerp(value, 0, 100, 0, 360)  // Linear interpolation
lerpColor(value, 0, 100, "#00ff00", "#ff0000")  // Color gradient