Added minimal functionality for Robot teaching

- Added minimal HMI
- Added possibility to open and close all chamber doors
This commit is contained in:
2026-01-17 09:20:39 +01:00
parent 9f058db2a3
commit 2d11c43579
2274 changed files with 912690 additions and 162 deletions

View File

@@ -0,0 +1,528 @@
{
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
"apiVersion": 1,
"name": "TcHmiPieChart",
"namespace": "TcHmi.Controls.Beckhoff",
"displayName": "Pie Chart",
"version": {
"full": "14.4.1.0",
"major": 14,
"minor": 4,
"build": 1,
"revision": 0
},
"visible": true,
"themeable": "Standard",
"base": "TcHmi.Controls.System.TcHmiControl",
"description": "A Pie Chart.",
"defaultDesignerEvent": "",
"properties": {
"containerControl": false,
"geometry": {
"width": 600,
"height": 400
}
},
"icons": [
{
"name": "Icons/16x16.png",
"width": 16,
"height": 16
}
],
"template": "Template.html",
"dependencyFiles": [
{
"name": "Style.css",
"type": "Stylesheet",
"description": ""
},
{
"name": "../dist/TcHmiPieChart/TcHmiPieChart.esm.js",
"type": "EsModule",
"description": "Contains all the main logic as ES module."
}
],
"themes": {
"Base": {
"resources": [
{
"name": "Themes/Base/Defaults.theme",
"type": "ThemedValues",
"description": ""
},
{
"name": "Themes/Base/Style.css",
"type": "Stylesheet",
"description": ""
}
]
},
"Base-Dark": {
"resources": [
{
"name": "Themes/Base-Dark/Defaults.theme",
"type": "ThemedValues",
"description": ""
},
{
"name": "Themes/Base-Dark/Style.css",
"type": "Stylesheet",
"description": ""
}
]
}
},
"attributes": [
{
"name": "data-tchmi-sections-background-color",
"propertyName": "SectionsBackgroundColor",
"propertySetterName": "setSectionsBackgroundColor",
"propertyGetterName": "getSectionsBackgroundColor",
"displayName": "Sections Background Color",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/Color",
"category": "Colors",
"description": "The Background color of the graph and legend section.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"allowSymbolExpressionsInObject": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-pie-graph-data",
"propertyName": "PieGraphData",
"propertySetterName": "setPieGraphData",
"propertyGetterName": "getPieGraphData",
"displayName": "Pie Graph Data",
"visible": true,
"themeable": "Advanced",
"displayPriority": 10,
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiPieChart.ChartPieGraphDataDefinitionList",
"category": "Common",
"description": "The data to be displayed in the pie chart.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"allowSymbolExpressionsInObject": true,
"defaultValue": [
50,
20,
20,
10
],
"defaultValueInternal": null
},
{
"name": "data-tchmi-pie-graph-descriptions",
"propertyName": "PieGraphDescriptions",
"propertySetterName": "setPieGraphDescriptions",
"propertyGetterName": "getPieGraphDescriptions",
"displayName": "Pie Graph Descriptions",
"visible": true,
"themeable": "Standard",
"displayPriority": 10,
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiPieChart.ChartPieGraphDescriptionDefinitionList",
"category": "Common",
"description": "Description of the pie graph data. Defines the presentation in the graph and the legend.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"allowSymbolExpressionsInObject": true,
"defaultValue": [
{
"name": "data0",
"pieColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieColor1%/tr%",
"labelColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieLabelColor1%/tr%",
"showName": true,
"showUnit": false,
"showValueLabel": true,
"showPercentLabel": true
},
{
"name": "data1",
"pieColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieColor2%/tr%",
"labelColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieLabelColor2%/tr%",
"showName": true,
"showUnit": false,
"showValueLabel": false,
"showPercentLabel": true
},
{
"name": "data2",
"pieColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieColor3%/tr%",
"labelColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieLabelColor3%/tr%",
"showName": false,
"showUnit": false,
"showValueLabel": false,
"showPercentLabel": true
},
{
"name": "data3",
"pieColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieColor4%/tr%",
"labelColor": "%tr%Control::TcHmi.Controls.Beckhoff.TcHmiPieChart::DefaultPieLabelColor4%/tr%",
"showName": false,
"showUnit": false,
"showValueLabel": false,
"showPercentLabel": true
}
],
"defaultValueInternal": null
},
{
"name": "data-tchmi-show-legend",
"propertyName": "ShowLegend",
"propertySetterName": "setShowLegend",
"propertyGetterName": "getShowLegend",
"displayName": "Show Legend",
"visible": true,
"themeable": "Standard",
"displayPriority": 10,
"type": "tchmi:general#/definitions/Boolean",
"category": "Common",
"description": "Defines whether the legend is displayed or not.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": false
},
{
"name": "data-tchmi-legend-font-family",
"propertyName": "LegendFontFamily",
"propertySetterName": "setLegendFontFamily",
"propertyGetterName": "getLegendFontFamily",
"displayName": "Legend Font Family",
"visible": true,
"themeable": "Standard",
"displayPriority": 50,
"type": "tchmi:framework#/definitions/FontFamily",
"category": "Legend",
"description": "Defines the font family of the legend. Comma separated list of family name or keyword: 'serif', 'sans-serif', 'monospace'.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-legend-font-size",
"propertyName": "LegendFontSize",
"propertySetterName": "setLegendFontSize",
"propertyGetterName": "getLegendFontSize",
"displayName": "Legend Font Size",
"visible": true,
"themeable": "Standard",
"displayPriority": 50,
"type": "tchmi:framework#/definitions/MeasurementValue",
"category": "Legend",
"description": "Defines the font size of the legend.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": 12
},
{
"name": "data-tchmi-legend-font-size-unit",
"propertyName": "LegendFontSizeUnit",
"propertyGetterName": "getLegendFontSizeUnit",
"refTo": "LegendFontSize",
"displayName": "Legend Font Size Unit",
"visible": true,
"displayPriority": 50,
"type": "tchmi:framework#/definitions/PixelUnit",
"category": "Legend",
"description": "Is 'px'.",
"readOnly": true,
"bindable": false,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValueInternal": "px"
},
{
"name": "data-tchmi-legend-font-style",
"propertyName": "LegendFontStyle",
"propertySetterName": "setLegendFontStyle",
"propertyGetterName": "getLegendFontStyle",
"displayName": "Legend Font Style",
"visible": true,
"themeable": "Standard",
"displayPriority": 50,
"type": "tchmi:framework#/definitions/FontStyle",
"category": "Legend",
"description": "Defines the font style of the legend. 'Normal', 'Italic' (slanted with special glyphs), 'Oblique' (slanted normal glyphs) or 'Auto' for inherited.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "Auto"
},
{
"name": "data-tchmi-legend-font-weight",
"propertyName": "LegendFontWeight",
"propertySetterName": "setLegendFontWeight",
"propertyGetterName": "getLegendFontWeight",
"displayName": "Legend Font Weight",
"visible": true,
"themeable": "Standard",
"displayPriority": 50,
"type": "tchmi:framework#/definitions/FontWeight",
"category": "Legend",
"description": "Defines the font weight of the legened. 'Normal', 'Bold' (glyphs with more weight) or 'Auto' for inherited.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "Auto"
},
{
"name": "data-tchmi-label-unit",
"propertyName": "LabelUnit",
"propertySetterName": "setLabelUnit",
"propertyGetterName": "getLabelUnit",
"displayName": "Label Unit",
"visible": true,
"themeable": "Standard",
"displayPriority": 20,
"type": "tchmi:general#/definitions/String",
"category": "Label",
"description": "Sets the unit to be displayed on the unit label.\nThis is only used when PieGraphDescriptions has Value Label and Unit set.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-label-position",
"propertyName": "LabelPosition",
"propertySetterName": "setLabelPosition",
"propertyGetterName": "getLabelPosition",
"displayName": "Label Position",
"visible": true,
"themeable": "Standard",
"displayPriority": 20,
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiPieChart.LabelPosition",
"category": "Label",
"description": "The inside or outside position of labels.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "Inside"
},
{
"name": "data-tchmi-percent-label-decimal-places",
"propertyName": "PercentLabelDecimalPlaces",
"propertySetterName": "setPercentLabelDecimalPlaces",
"propertyGetterName": "getPercentLabelDecimalPlaces",
"displayName": "Percent Label Decimal Places",
"visible": true,
"themeable": "Standard",
"displayPriority": 20,
"type": "tchmi:general#/definitions/Number",
"category": "Label",
"description": "Defines the decimal digits displayed for the percent labels.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": 2,
"defaultValueInternal": null
},
{
"name": "data-tchmi-value-label-decimal-places",
"propertyName": "ValueLabelDecimalPlaces",
"propertySetterName": "setValueLabelDecimalPlaces",
"propertyGetterName": "getValueLabelDecimalPlaces",
"displayName": "Value Label Decimal Places",
"visible": true,
"themeable": "Standard",
"displayPriority": 20,
"type": "tchmi:general#/definitions/Number",
"category": "Label",
"description": "Defines the decimal digits displayed for the value labels.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-label-font-family",
"propertyName": "LabelFontFamily",
"propertySetterName": "setLabelFontFamily",
"propertyGetterName": "getLabelFontFamily",
"displayName": "Label Font Family",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/FontFamily",
"category": "Label",
"description": "Defines the font family of the pie labels. Comma separated list of family name or keyword: 'serif', 'sans-serif', 'monospace'.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-label-font-size",
"propertyName": "LabelFontSize",
"propertySetterName": "setLabelFontSize",
"propertyGetterName": "getLabelFontSize",
"displayName": "Label Font Size",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/MeasurementValue",
"category": "Label",
"description": "Defines the pie label font size.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": 12
},
{
"name": "data-tchmi-label-font-size-unit",
"propertyName": "LabelFontSizeUnit",
"propertyGetterName": "getLabelFontSizeUnit",
"refTo": "LabelFontSize",
"displayName": "Label Font Size Unit",
"visible": true,
"displayPriority": 60,
"type": "tchmi:framework#/definitions/PixelUnit",
"category": "Label",
"description": "Is 'px'.",
"readOnly": true,
"bindable": false,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValueInternal": "px"
},
{
"name": "data-tchmi-label-font-weight",
"propertyName": "LabelFontWeight",
"propertySetterName": "setLabelFontWeight",
"propertyGetterName": "getLabelFontWeight",
"displayName": "Label Font Weight",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/FontWeight",
"category": "Label",
"description": "Defines the font weight of the pie label. 'Normal', 'Bold' (glyphs with more weight) or 'Auto' for inherited.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "Auto"
}
],
"attributeCategories": [
{
"name": "Legend",
"displayPriority": 570,
"defaultCollapsed": true,
"description": "Attributes defining the legend of the chart."
},
{
"name": "Label",
"displayPriority": 570,
"defaultCollapsed": true,
"description": "Attributes defining the pie label of the chart."
}
],
"themedResources": [
{
"name": "DefaultGraphColor",
"displayName": "Default Graph Color",
"description": "Default Color for Graphs",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultLabelColor",
"displayName": "Default Label Color",
"description": "Default Color for Labels",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieColor1",
"displayName": "Default Pie Color 1",
"description": "Default Color for piece of the pie",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieColor2",
"displayName": "Default Pie Color 2",
"description": "Default Color for piece of the pie",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieColor3",
"displayName": "Default Pie Color 3",
"description": "Default Color for piece of the pie",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieColor4",
"displayName": "Default Pie Color 4",
"description": "Default Color for piece of the pie",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieLabelColor1",
"displayName": "Default Pie Label Color 1",
"description": "Default Color for Labels",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieLabelColor2",
"displayName": "Default Pie Label Color 2",
"description": "Default Color for Labels",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieLabelColor3",
"displayName": "Default Pie Label Color 3",
"description": "Default Color for Labels",
"type": "tchmi:framework#/definitions/SolidColor"
},
{
"name": "DefaultPieLabelColor4",
"displayName": "Default Pie Label Color 4",
"description": "Default Color for Labels",
"type": "tchmi:framework#/definitions/SolidColor"
}
],
"functions": [],
"events": [],
"dataTypes": [
{
"schema": "Schema/Types.Schema.json"
},
{
"schema": "../Schema/Types.Schema.json"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 680 B

View File

@@ -0,0 +1,129 @@
{
"$schema": "http://json-schema.org/draft-04/schema",
"definitions": {
"TcHmi.Controls.Beckhoff.TcHmiPieChart": {
"$schema": "http://json-schema.org/draft-04/schema",
"type": "object",
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
"frameworkControlType": "TcHmiPieChart",
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
},
"TcHmiPieChart": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiPieChart"
},
"TcHmi.Controls.Beckhoff.TcHmiPieChart.LabelPosition": {
"title": "LabelPosition",
"type": "string",
"enum": ["Outside", "Inside"],
"default": "Inside"
},
"TcHmi.Controls.Beckhoff.TcHmiPieChart.ChartPieGraphDescriptionDefinitionList": {
"title": "ChartPieGraphDescriptionDefinitionList",
"type": "array",
"items": {
"type": "object",
"engineeringColumns": ["name", "unit"],
"propertiesMeta": [
{
"name": "pieColor",
"displayName": "Pie Color",
"category": "Colors",
"displayPriority": 10,
"description": "Color for this piece of pie",
"defaultValue": {
"color": "#2775be"
},
"defaultValueInternal": null
},
{
"name": "labelColor",
"displayName": "Label Color",
"category": "Colors",
"displayPriority": 10,
"description": "Color for the label of piece of pie",
"defaultValue": {
"color": "#2775be"
},
"defaultValueInternal": null
},
{
"name": "name",
"category": "General",
"displayName": "Name",
"displayPriority": 10,
"description": "The name that is displayed.",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "showName",
"category": "General",
"displayName": "Show Name",
"displayPriority": 10,
"description": "Specifies whether the name should be displayed in the value label.",
"defaultValue": null,
"defaultValueInternal": false
},
{
"name": "showPercentLabel",
"category": "General",
"displayName": "Show Percent Label",
"displayPriority": 10,
"description": "Specifies whether the percentage label should be displayed.",
"defaultValue": null,
"defaultValueInternal": false
},
{
"name": "showValueLabel",
"category": "General",
"displayName": "Show Value Label",
"displayPriority": 10,
"description": "Specifies whether the value label should be displayed.",
"defaultValue": null,
"defaultValueInternal": true
},
{
"name": "showUnit",
"category": "General",
"displayName": "Show Unit",
"displayPriority": 10,
"description": "Specifies whether the unit should be displayed in the value label.",
"defaultValue": null,
"defaultValueInternal": false
}
],
"properties": {
"pieColor": {
"$ref": "tchmi:framework#/definitions/SolidColor"
},
"labelColor": {
"$ref": "tchmi:framework#/definitions/SolidColor"
},
"name": {
"type": "string"
},
"showName": {
"type": "boolean"
},
"showValueLabel": {
"type": "boolean"
},
"showUnit": {
"type": "boolean"
},
"showPercentLabel": {
"type": "boolean"
}
},
"additionalProperties": false
}
},
"TcHmi.Controls.Beckhoff.TcHmiPieChart.ChartPieGraphDataDefinitionList": {
"title": "ChartPieGraphDataDefinitionList",
"type": "array",
"items": {
"type": "number"
}
}
}
}

View File

@@ -0,0 +1,64 @@
/** Styles for all themes */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiPieChart {
/* Prevent overflow if the border radius is huge */
overflow: hidden;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template {
position: absolute;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto min-content;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-chart {
position: relative;
top: 0px;
margin: 5px;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend {
position: relative;
overflow: hidden;
white-space: nowrap;
margin: 5px;
margin-top: 0px;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-bottom {
bottom: 0px;
left: 0px;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-parent-element {
position: relative;
float: left;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox {
position: relative;
vertical-align: middle;
float: left;
margin: 3px;
width: 13px;
height: 13px;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox-color-element {
position: relative;
float: left;
height: 2px;
width: 10px;
margin-right: 5px;
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox-label {
position: relative;
float: left;
padding-right: 10px;
display: flex;
align-items: center;
}

View File

@@ -0,0 +1,360 @@
// Compatibility file for non-module typescript compiles without adjustments.
// Use the following line for modern code (needs adjustments to tsconfig.json#configOptions/paths)
// import { TcHmiControl } from "Beckhoff.TwinCAT.HMI.Framework/index.esm.js";
// ***************************************************************************
declare class TcHmiPieChart extends TcHmi.Controls.System.TcHmiControl {
#private;
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
/** member variables */
/** Reference to the root dom element of the current control template as jquery object. */
protected __elementTemplateRoot: JQuery;
/** Reference to the div element used as chart container as jquery object. */
protected __elementChart: JQuery;
/** Reference to the div element used as legend as jquery object. */
protected __elementLegend: JQuery;
/** PieChart element */
protected __pieChart: TcHmiCharting.PieChart | null;
/** Internal reference to the attribute 'data-tchmi-y-axis-width' */
protected __sectionsBackgroundColor: TcHmi.Color | null | undefined;
/** Internal reference to the attribute 'data-tchmi-pie-graph-descriptions' */
protected __pieGraphDescriptions: PieGraphDescription[] | null | undefined;
/** Only pieGraphColors that have been selected from __pieGraphDescriptionsInternal as an array of TcHmi.SolidColor or null */
protected __pieGraphDescriptionsSelected: PieGraphDescription[] | null | undefined;
/** Internal reference to the attribute 'data-tchmi-line-graph-data' */
protected __pieGraphData: number[] | null | undefined;
/** Only pieGraphData that have been selected from __pieGraphDataArray as an array of arrays with numbers or null */
protected __pieGraphDataSelected: number[] | null | undefined;
/** Internal reference to the attribute 'data-tchmi-legend-font-family' */
protected __legendFontFamily: TcHmi.FontFamily | undefined;
/** Internal reference to the attribute 'data-tchmi-legend-font-size' */
protected __legendFontSize: number | undefined;
/** Internal reference to the attribute 'data-tchmi-legend-font-style' */
protected __legendFontStyle: TcHmi.FontStyle | undefined;
/** Internal reference to the attribute 'data-tchmi-legend-font-weight' */
protected __legendFontWeight: TcHmi.FontWeight | undefined;
/** Internal variable for legend */
protected __showLegend: boolean | undefined;
/** Internal reference to the attribute 'data-tchmi-label-unit' */
protected __labelUnit: string | undefined;
/** Internal reference to the attribute 'data-tchmi-label-position' */
protected __labelPosition: 'Inside' | 'Outside' | undefined;
/** Internal reference to the attribute 'data-tchmi-percent-label-decimal-places' */
protected __percentLabelDecimalPlaces: number | undefined;
/** Internal reference to the attribute 'data-tchmi-value-label-decimal-places' */
protected __valueLabelDecimalPlaces: number | undefined;
/** Internal reference to the attribute 'data-tchmi-label-font-family' */
protected __labelFontFamily: TcHmi.FontFamily | undefined;
/** Internal reference to the attribute 'data-tchmi-label-font-size' */
protected __labelFontSize: number | undefined;
/** Internal reference to the attribute 'data-tchmi-label-font-weight' */
protected __labelFontWeight: TcHmi.FontWeight | undefined;
protected __storage: TcHmi.LocalStorage<{
activeLegendElements: number[];
}, {
activeLegendElements: number;
}> | undefined;
protected __activeLegendElements: number[] | undefined;
/**
* If raised, the control object exists in control cache and constructor of each inheritation level was called.
* This function is only to be used by the System. Other function calls are not intended.
*/
__previnit(): void;
/**
* If raised, all attributes have been set to it's default or dom values.
* This function is only to be used by the System. Other function calls are not intended.
*/
__init(): void;
/**
* Is called by the system after the control instance gets part of the current DOM.
* This function is only to be used by the System. Other function calls are not intended.
*/
__attach(): void;
/**
* Is called by the system after the control instance is no longer part of the current DOM.
* This function is only to be used by the System. Other function calls are not intended.
*/
__detach(): void;
/**
* Destroy the current control instance.
* Will be called automatically if system destroys control!
*/
destroy(): void;
/**
* Is raised if the control are resized.
*/
protected __rebuild(_event: TcHmi.EventProvider.Event, ctrl: TcHmi.Controls.System.TcHmiControl): void;
/**
* Is called initial and and if size changed.
*/
__drawPieChart(): void;
/**
* Created legend
*/
__createLegend(useOldElements?: boolean): void;
/**
* Returns the current value of the member variable legend.
*/
protected getCurrentGraphLength(): number;
/**
* Is raised if mouseDown on legend.
* @param e The event of mouseDown.
*/
protected __onCheckboxMouseDown(event: MouseEvent): void;
/**
* Is raised if touchstart on legend.
* @param e The event of touchstart.
*/
protected __onCheckboxTouchStart(event: TouchEvent): void;
/**
* Sets the background value and calls the associated process function.
* @param valueNew The new value for the background attribute as object.
*/
setSectionsBackgroundColor(valueNew: TcHmi.Color | null): void;
/**
* The watch callback for the sectionsBackgroundColor object resolver.
*/
protected __onResolverForSectionsBackgroundColorWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.Color>): void;
/**
* Returns the current background value.
*/
getSectionsBackgroundColor(): TcHmi.Color | null | undefined;
/**
* Processes the current border-color attribute.
*/
protected __processSectionsBackgroundColor(): void;
/**
* Sets the value of the member variable 'pieGraphDescriptions' if the new value is not equal to the current value
* and calls the associated process function (processpieGraphDescriptions) after that.
* @param valueNew The new value for pieGraphDescriptions.
*/
setPieGraphDescriptions(valueNew: PieGraphDescription[] | null): void;
/**
* The watch callback for the pieGraphDescriptions object resolver.
*/
protected __onResolverForPieGraphDescriptionsWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<PieGraphDescription[]>): void;
/**
* Returns the current value of the member variable pieGraphDescriptions.
*/
getPieGraphDescriptions(): PieGraphDescription[] | null | undefined;
/**
* Processes the current value of pieGraphDescriptions.
*/
protected __processPieGraphDescriptions(): void;
/**
* Sets the value of pieGraphData
* @param valueNew The new value for pieGraphData
*/
setPieGraphData(valueNew: number[] | number[][] | null): void;
/**
* The watch callback for the pieGraphData object resolver.
*/
protected __onResolverForPieGraphDataWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<number[]>): void;
/**
* Gets the value of pieGraphData
*/
getPieGraphData(): number[] | null | undefined;
/**
* Processes pieGraphData
*/
protected __processPieGraphData(): void;
/**
* Sets the value of showLegend
* @param valueNew The new value for showLegend
*/
setShowLegend(valueNew: boolean | null): void;
/**
* Gets the value of showLegend
* @returns The current value of showLegend
*/
getShowLegend(): boolean | undefined;
/**
* Processes showLegend
*/
protected __processShowLegend(): void;
/**
* Sets the value of legendFontFamily
* @param valueNew The new value for legendFontFamily
*/
setLegendFontFamily(valueNew: TcHmi.FontFamily | null): void;
/**
* Gets the value of legendFontFamily
* @returns The current value of legendFontFamily
*/
getLegendFontFamily(): string | undefined;
/**
* Processes legendFontFamily
*/
protected __processLegendFontFamily(): void;
/**
* Sets the value of legendFontSize
* @param valueNew The new value for legendFontSize
*/
setLegendFontSize(valueNew: number | null): void;
/**
* Gets the value of legendFontSize
* @returns The current value of legendFontSize
*/
getLegendFontSize(): number | undefined;
/**
* Processes legendFontSize
*/
protected __processLegendFontSize(): void;
/**
* Gets the value of legendFontSizeUnit
* @returns The current value of legendFontSizeUnit
*/
getLegendFontSizeUnit(): string;
/**
* Sets the legend font style and calls the associated process function.
* @param valueNew The new value for legendFontStyle
*/
setLegendFontStyle(valueNew: TcHmi.FontStyle | null): void;
/**
* Returns the current value of legendFontStyle.
* @returns The current value of legendFontStyle.
*/
getLegendFontStyle(): TcHmi.FontStyle | undefined;
/**
* Processes the current legendFontStyle.
*/
protected __processLegendFontStyle(): void;
/**
* Sets the value of legendFontWeight
* @param valueNew The new value for legendFontWeight
*/
setLegendFontWeight(valueNew: TcHmi.FontWeight | null): void;
/**
* Gets the value of legendFontWeight
* @returns The current value of legendFontWeight
*/
getLegendFontWeight(): TcHmi.FontWeight | undefined;
/**
* Processes legendFontWeight
*/
protected __processLegendFontWeight(): void;
/**
* Sets the value of LabelUnit
* @param valueNew The new value for LabelUnit
*/
setLabelUnit(valueNew: string | null): void;
/**
* Gets the value of LabelUnit
* @returns The current value of LabelUnit
*/
getLabelUnit(): string | undefined;
/**
* Processes LabelUnit
*/
protected __processLabelUnit(): void;
/**
* Sets the labelPosition attribute.
* @param valueNew The new value for labelPosition.
*/
setLabelPosition(valueNew: 'Inside' | 'Outside' | null): void;
/**
* Returns the current value of labelPosition.
*/
getLabelPosition(): "Inside" | "Outside" | undefined;
/**
* Processes the current value of attribute labelposition.
*/
protected __processLabelPosition(): void;
/**
* Sets the value of percentLabelDecimalPlaces
* @param valueNew The new value for percentLabelDecimalPlaces
*/
setPercentLabelDecimalPlaces(valueNew: number | null): void;
/**
* Gets the value of percentLabelDecimalPlaces
* @returns The current value of percentLabelDecimalPlaces
*/
getPercentLabelDecimalPlaces(): number | undefined;
/**
* Processes percentLabelDecimalPlaces
*/
protected __processPercentLabelDecimalPlaces(): void;
/**
* Sets the value of valueLabelDecimalPlaces
* @param valueNew The new value for valueLabelDecimalPlaces
*/
setValueLabelDecimalPlaces(valueNew: number | null): void;
/**
* Gets the value of valueLabelDecimalPlaces
* @returns The current value of valueLabelDecimalPlaces
*/
getValueLabelDecimalPlaces(): number | undefined;
/**
* Processes valueLabelDecimalPlaces
*/
protected __processValueLabelDecimalPlaces(): void;
/**
* Sets the value of LabelFontFamily
* @param valueNew The new value for LabelFontFamily
*/
setLabelFontFamily(valueNew: TcHmi.FontFamily | null): void;
/**
* Gets the value of LabelFontFamily
* @returns The current value of LabelFontFamily
*/
getLabelFontFamily(): string | undefined;
/**
* Processes LabelFontFamily
*/
protected __processLabelFontFamily(): void;
/**
* Sets the value of LabelFontSize
* @param valueNew The new value for LabelFontSize
*/
setLabelFontSize(valueNew: number | null): void;
/**
* Gets the value of LabelFontSize
* @returns The current value of LabelFontSize
*/
getLabelFontSize(): number | undefined;
/**
* Processes LabelFontSize
*/
protected __processLabelFontSize(): void;
/**
* Gets the value of LabelFontSizeUnit
* @returns The current value of LabelFontSizeUnit
*/
getLabelFontSizeUnit(): string;
/**
* Sets the value of LabelFontWeight
* @param valueNew The new value for LabelFontWeight
*/
setLabelFontWeight(valueNew: TcHmi.FontWeight | null): void;
/**
* Gets the value of LabelFontWeight
* @returns The current value of LabelFontWeight
*/
getLabelFontWeight(): TcHmi.FontWeight | undefined;
/**
* Processes LabelFontWeight
*/
protected __processLabelFontWeight(): void;
}
export interface PieGraphDescription {
pieColor?: TcHmi.SolidColor;
labelColor?: TcHmi.SolidColor;
name: string;
showName: boolean;
showPercentLabel: boolean;
showValueLabel: boolean;
showUnit?: boolean;
}
export { TcHmiPieChart as Control };
declare const _TcHmiPieChart: typeof TcHmiPieChart;
type tTcHmiPieChart = TcHmiPieChart;
type tPieGraphDescription = PieGraphDescription;
declare global {
namespace TcHmi.Controls.Beckhoff {
const TcHmiPieChart: typeof _TcHmiPieChart;
type TcHmiPieChart = tTcHmiPieChart;
namespace TcHmiPieChart {
type PieGraphDescription = tPieGraphDescription;
}
}
}

View File

@@ -0,0 +1,6 @@
<div class="TcHmi_Controls_Beckhoff_TcHmiPieChart-template tchmi-Pie-chart-template tchmi-box">
<div class="TcHmi_Controls_Beckhoff_TcHmiPieChart-template-chart"></div>
<div
class="TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-bottom"
></div>
</div>

View File

@@ -0,0 +1,40 @@
{
"$schema": "../../../../TcHmiFramework/Schema/ThemeDescription.Schema.json",
"controlTypeValues": {
"TcHmi.Controls.Beckhoff.TcHmiPieChart": {
"attributes": {},
"themedResources": {
"DefaultGraphColor": {
"color": "#2775be"
},
"DefaultLabelColor": {
"color": "#2775be"
},
"DefaultPieColor1": {
"color": "#0D4173"
},
"DefaultPieColor2": {
"color": "#008000"
},
"DefaultPieColor3": {
"color": "#9EAB13"
},
"DefaultPieColor4": {
"color": "#009940"
},
"DefaultPieLabelColor1": {
"color": "#FFFFFF"
},
"DefaultPieLabelColor2": {
"color": "#FFFFFF"
},
"DefaultPieLabelColor3": {
"color": "#FFFFFF"
},
"DefaultPieLabelColor4": {
"color": "#FFFFFF"
}
}
}
}
}

View File

@@ -0,0 +1,8 @@
<svg version="1.1"
baseProfile="full"
width="30" height="30"
xmlns="http://www.w3.org/2000/svg">
<path d="M 9 18 L 13 22 L 22 9" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" />
</svg>

After

Width:  |  Height:  |  Size: 225 B

View File

@@ -0,0 +1,35 @@
/** Styles for the theme: Base-Dark */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiPieChart {
--tchmi-background: var(--tchmi-background-color-1);
--tchmi-background-part: var(--tchmi-background-color-3);
--tchmi-color: var(--tchmi-foreground-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
--tchmi-checkbox-background: var(--tchmi-background-color-4);
--tchmi-checkbox-background-active: var(--tchmi-highlight-color-1);
background: var(--tchmi-background);
box-shadow: var(--tchmi-card-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-chart {
background: var(--tchmi-background-part);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend {
background: var(--tchmi-background-part);
color: var(--tchmi-color);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox {
appearance: none;
background: var(--tchmi-checkbox-background);
border: 1px solid var(--tchmi-border-color);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox:checked {
background:
url(Images/checkbox.svg) 13px 13px,
var(--tchmi-checkbox-background-active);
background-size: 15px 15px;
}

View File

@@ -0,0 +1,40 @@
{
"$schema": "../../../../TcHmiFramework/Schema/ThemeDescription.Schema.json",
"controlTypeValues": {
"TcHmi.Controls.Beckhoff.TcHmiPieChart": {
"attributes": {},
"themedResources": {
"DefaultGraphColor": {
"color": "#4794da"
},
"DefaultLabelColor": {
"color": "#4794da"
},
"DefaultPieColor1": {
"color": "#4794DA"
},
"DefaultPieColor2": {
"color": "#CBD932"
},
"DefaultPieColor3": {
"color": "#FFA500"
},
"DefaultPieColor4": {
"color": "#009940"
},
"DefaultPieLabelColor1": {
"color": "#000000"
},
"DefaultPieLabelColor2": {
"color": "#000000"
},
"DefaultPieLabelColor3": {
"color": "#000000"
},
"DefaultPieLabelColor4": {
"color": "#000000"
}
}
}
}
}

View File

@@ -0,0 +1,8 @@
<svg version="1.1"
baseProfile="full"
width="30" height="30"
xmlns="http://www.w3.org/2000/svg">
<path d="M 9 18 L 13 22 L 22 9" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" />
</svg>

After

Width:  |  Height:  |  Size: 225 B

View File

@@ -0,0 +1,35 @@
/** Styles for the theme: Base */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiPieChart {
--tchmi-background: var(--tchmi-background-color-1);
--tchmi-background-part: var(--tchmi-background-color-1);
--tchmi-color: var(--tchmi-highlight-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
--tchmi-checkbox-background: var(--tchmi-background-color-4);
--tchmi-checkbox-background-active: var(--tchmi-highlight-color-1);
background: var(--tchmi-background);
box-shadow: var(--tchmi-card-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-chart {
background: var(--tchmi-background-part);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend {
background: var(--tchmi-background-part);
color: var(--tchmi-color);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox {
appearance: none;
background: var(--tchmi-checkbox-background);
border: 1px solid var(--tchmi-border-color);
}
.TcHmi_Controls_Beckhoff_TcHmiPieChart-template-legend-checkbox:checked {
background:
url(Images/checkbox.svg) 13px 13px,
var(--tchmi-checkbox-background-active);
background-size: 15px 15px;
}