Skip to content

Instantly share code, notes, and snippets.

@easylogic
Last active February 5, 2024 04:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save easylogic/26eba2fa02b1042761c1f32437e0d0a4 to your computer and use it in GitHub Desktop.
Save easylogic/26eba2fa02b1042761c1f32437e0d0a4 to your computer and use it in GitHub Desktop.
model sample
{
"type": "FRAME",
"name": "Comprehensive Machine Health Sensors Dashboard",
"x": 0,
"y": 0,
"width": 1920,
"height": 1080,
"minWidth": 1600,
"maxWidth": 2560,
"minHeight": 900,
"maxHeight": 1440,
"fills": [{"type": "SOLID", "color": "#FFFFFF"}],
"rotation": 0,
"cornerRadius": 0,
"layoutMode": "VERTICAL",
"itemSpacing": 20,
"constraints": {
"horizontal": "SCALE",
"vertical": "SCALE"
},
"children": [
{
"type": "FRAME",
"name": "Sensor Data Visualization",
"x": 0,
"y": 0,
"width": 1920,
"height": 960,
"minWidth": 1600,
"maxWidth": 2560,
"minHeight": 720,
"maxHeight": 1440,
"fills": [{"type": "SOLID", "color": "#FFFFFF"}],
"rotation": 0,
"cornerRadius": 0,
"layoutMode": "VERTICAL",
"itemSpacing": 20,
"constraints": {
"horizontal": "SCALE",
"vertical": "SCALE"
},
"children": [
{
"type": "FRAME",
"name": "Vibration Sensor with Sparkline",
"x": 0,
"y": 0,
"width": 1920,
"height": 120,
"minWidth": 1600,
"maxWidth": 2560,
"minHeight": 80,
"maxHeight": 160,
"fills": [{"type": "SOLID", "color": "#FFFFFF"}],
"rotation": 0,
"cornerRadius": 0,
"layoutMode": "VERTICAL",
"itemSpacing": 20,
"constraints": {
"horizontal": "SCALE",
"vertical": "SCALE"
},
"children": [
{
"type": "CHART",
"name": "Vibration Sparkline Chart",
"x": 0,
"y": 0,
"width": 1920,
"height": 80,
"minWidth": 1600,
"maxWidth": 2560,
"minHeight": 60,
"maxHeight": 120,
"chartType": "Sparkline",
"data": "vibrationSensor.trendData",
"rotation": 0,
"cornerRadius": 0,
"constraints": {
"horizontal": "SCALE",
"vertical": "SCALE"
}
}
]
},
{
"type": "FRAME",
"name": "Temperature Sensor with Gauge",
"x": 0,
"y": 0,
"width": 1920,
"height": 120,
"minWidth": 1600,
"maxWidth": 2560,
"minHeight": 80,
"maxHeight": 160,
"fills": [{"type": "SOLID", "color": "#FFFFFF"}],
"rotation": 0,
"cornerRadius": 0,
"layoutMode": "VERTICAL",
"itemSpacing": 20,
"constraints": {
"horizontal": "SCALE",
"vertical": "SCALE"
},
"children": [
{
"type": "CHART",
"name": "Temperature Gauge Chart",
"x": 0,
"y": 0,
"width": 1920,
"height": 80,
"minWidth": 1600,
"maxWidth": 2560,
"minHeight": 60,
"maxHeight": 120,
"chartType": "Gauge",
"data": "temperatureSensor.currentValue",
"rotation": 0,
"cornerRadius": 0,
"constraints": {
"horizontal": "SCALE",
"vertical": "SCALE"
}
}
]
},
]
}
]
}
{
"type": "FRAME",
"name": "Comprehensive Machine Health Sensors Dashboard",
"children": [
{
"type": "FRAME",
"name": "Sensor Data Visualization",
"children": [
{
"type": "FRAME",
"name": "Vibration Sensor with Sparkline",
"children": [
{
"type": "CHART",
"name": "Vibration Sparkline Chart",
"chartType": "Sparkline",
"data": "vibrationSensor.trendData"
}
]
},
{
"type": "FRAME",
"name": "Temperature Sensor with Gauge",
"children": [
{
"type": "CHART",
"name": "Temperature Gauge Chart",
"chartType": "Gauge",
"data": "temperatureSensor.currentValue"
}
]
},
{
"type": "FRAME",
"name": "Oil Pressure Sensor with Stacked Bar",
"children": [
{
"type": "CHART",
"name": "Oil Pressure Stacked Bar Chart",
"chartType": "StackedBar",
"data": "oilPressureSensor.historyData"
}
]
},
{
"type": "FRAME",
"name": "Wear Particle Sensor with Treemap",
"children": [
{
"type": "CHART",
"name": "Wear Particle Treemap",
"chartType": "Treemap",
"data": "wearParticleSensor.distribution"
}
]
},
{
"type": "FRAME",
"name": "Coolant Level Sensor with Multi-Axis Chart",
"children": [
{
"type": "CHART",
"name": "Coolant Level Multi-Axis Chart",
"chartType": "MultiAxis",
"data": "coolantLevelSensor.multiAxisData"
}
]
},
{
"type": "FRAME",
"name": "General Sensor Data with Heatmap",
"children": [
{
"type": "CHART",
"name": "Sensor Data Heatmap",
"chartType": "Heatmap",
"data": "generalSensor.heatmapData"
}
]
},
{
"type": "FRAME",
"name": "Sensor Correlation with Scatter Plot",
"children": [
{
"type": "CHART",
"name": "Sensor Correlation Scatter Plot",
"chartType": "Scatter",
"data": "sensorCorrelation.data"
}
]
},
{
"type": "FRAME",
"name": "Performance Metrics with Radar Chart",
"children": [
{
"type": "CHART",
"name": "Performance Radar Chart",
"chartType": "Radar",
"data": "performanceMetrics.data"
}
]
}
]
}
],
"layoutMode": "VERTICAL",
"itemSpacing": 20
}
@easylogic
Copy link
Author

{
  "version": "1.0.0",
  "name": "Enhanced_SCADA_System_UI_Model",
  "children": [
    {
      "type": "PAGE",
      "name": "SCADA Dashboard",
      "children": [
        {
          "type": "FRAME",
          "name": "Header",
          "x": 0,
          "y": 0,
          "width": 1920,
          "height": 150,
          "rotation": 0,
          "cornerRadius": 0,
          "fills": [{"type": "SOLID", "color": "#EDEDED"}],
          "layoutMode": "HORIZONTAL",
          "itemSpacing": 10,
          "paddingTop": 20,
          "paddingRight": 20,
          "paddingBottom": 20,
          "paddingLeft": 20
        },
        {
          "type": "FRAME",
          "name": "Main Content",
          "x": 0,
          "y": 170,
          "width": 1920,
          "height": 810,
          "rotation": 0,
          "cornerRadius": 0,
          "fills": [{"type": "SOLID", "color": "#FFFFFF"}],
          "layoutMode": "VERTICAL",
          "itemSpacing": 20,
          "children": [
            {
              "type": "FRAME",
              "name": "Sensor Readings",
              "x": 0,
              "y": 0,
              "width": 1920,
              "height": 400,
              "rotation": 0,
              "cornerRadius": 10,
              "fills": [{"type": "SOLID", "color": "#F8F8F8"}],
              "layoutMode": "HORIZONTAL",
              "itemSpacing": 20,
              "paddingTop": 20,
              "paddingRight": 20,
              "paddingBottom": 20,
              "paddingLeft": 20,
              "children": [
                {
                  "type": "RECTANGLE",
                  "name": "Temperature Sensor",
                  "x": 0,
                  "y": 0,
                  "width": 300,
                  "height": 360,
                  "rotation": 0,
                  "cornerRadius": 10,
                  "fills": [{"type": "SOLID", "color": "#FFCDD2"}]
                },
                {
                  "type": "RECTANGLE",
                  "name": "Pressure Sensor",
                  "x": 320,
                  "y": 0,
                  "width": 300,
                  "height": 360,
                  "rotation": 0,
                  "cornerRadius": 10,
                  "fills": [{"type": "SOLID", "color": "#BBDEFB"}]
                }
              ]
            },
            {
              "type": "FRAME",
              "name": "Control Panel",
              "x": 0,
              "y": 420,
              "width": 1920,
              "height": 380,
              "rotation": 0,
              "cornerRadius": 10,
              "fills": [{"type": "SOLID", "color": "#E8F5E9"}],
              "layoutMode": "HORIZONTAL",
              "itemSpacing": 20,
              "paddingTop": 20,
              "paddingRight": 20,
              "paddingBottom": 20,
              "paddingLeft": 20,
              "children": [
                {
                  "type": "RECTANGLE",
                  "name": "Pump Control",
                  "x": 0,
                  "y": 0,
                  "width": 300,
                  "height": 340,
                  "rotation": 0,
                  "cornerRadius": 10,
                  "fills": [{"type": "SOLID", "color": "#C8E6C9"}]
                }
              ]
            }
          ]
        },
        {
          "type": "FRAME",
          "name": "Footer",
          "x": 0,
          "y": 990,
          "width": 1920,
          "height": 90,
          "rotation": 0,
          "cornerRadius": 0,
          "fills": [{"type": "SOLID", "color": "#F0F0F0"}],
          "layoutMode": "HORIZONTAL",
          "itemSpacing": 10,
          "paddingTop": 10,
          "paddingRight": 10,
          "paddingBottom": 10,
          "paddingLeft": 10
        }
      ]
    }
  ]
}

@easylogic
Copy link
Author

{
  "version": "1.0.0",
  "name": "Enhanced_SCADA_System_UI_Model_WithDataFields",
  "children": [
    {
      "type": "PAGE",
      "name": "SCADA Dashboard",
      "children": [
        {
          "type": "FRAME",
          "name": "Header",
          "x": 0,
          "y": 0,
          "width": 1920,
          "height": 150,
          "rotation": 0,
          "cornerRadius": 0,
          "fills": [{"type": "SOLID", "color": "#EDEDED"}],
          "layoutMode": "HORIZONTAL",
          "itemSpacing": 10,
          "paddingTop": 20,
          "paddingRight": 20,
          "paddingBottom": 20,
          "paddingLeft": 20,
          "data": {
            "title": "SCADA System Dashboard"
          }
        },
        {
          "type": "FRAME",
          "name": "Main Content",
          "x": 0,
          "y": 170,
          "width": 1920,
          "height": 810,
          "rotation": 0,
          "cornerRadius": 0,
          "fills": [{"type": "SOLID", "color": "#FFFFFF"}],
          "layoutMode": "VERTICAL",
          "itemSpacing": 20,
          "children": [
            {
              "type": "FRAME",
              "name": "Sensor Readings",
              "x": 0,
              "y": 0,
              "width": 1920,
              "height": 400,
              "rotation": 0,
              "cornerRadius": 10,
              "fills": [{"type": "SOLID", "color": "#F8F8F8"}],
              "layoutMode": "HORIZONTAL",
              "itemSpacing": 20,
              "paddingTop": 20,
              "paddingRight": 20,
              "paddingBottom": 20,
              "paddingLeft": 20,
              "data": {
                "sensors": [
                  {
                    "name": "Temperature Sensor",
                    "value": "25°C"
                  },
                  {
                    "name": "Pressure Sensor",
                    "value": "30 PSI"
                  }
                ]
              }
            },
            {
              "type": "FRAME",
              "name": "Control Panel",
              "x": 0,
              "y": 420,
              "width": 1920,
              "height": 380,
              "rotation": 0,
              "cornerRadius": 10,
              "fills": [{"type": "SOLID", "color": "#E8F5E9"}],
              "layoutMode": "HORIZONTAL",
              "itemSpacing": 20,
              "paddingTop": 20,
              "paddingRight": 20,
              "paddingBottom": 20,
              "paddingLeft": 20,
              "data": {
                "pumpStatus": "Running"
              }
            }
          ]
        },
        {
          "type": "FRAME",
          "name": "Footer",
          "x": 0,
          "y": 990,
          "width": 1920,
          "height": 90,
          "rotation": 0,
          "cornerRadius": 0,
          "fills": [{"type": "SOLID", "color": "#F0F0F0"}],
          "layoutMode": "HORIZONTAL",
          "itemSpacing": 10,
          "paddingTop": 10,
          "paddingRight": 10,
          "paddingBottom": 10,
          "paddingLeft": 10,
          "data": {
            "footerText": "Copyright © 2024 SCADA Systems Inc."
          }
        }
      ]
    }
  ]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment