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

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 B

View File

@@ -0,0 +1,11 @@
{
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
"locale": "de",
"localizedText": {
"Define_Data_And_Schema": "Bitte definieren Sie das 'Data' und das 'DataSchema' Attribut wenn Sie nicht das 'DataSymbol' Attribut verwenden.",
"ColumnData_Name": "Name",
"ColumnData_Value": "Wert",
"ColumnData_Datatype": "Datentyp",
"ColumnData_PreparedValue": "Vorbereiteter Wert"
}
}

View File

@@ -0,0 +1,11 @@
{
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
"locale": "en",
"localizedText": {
"Define_Data_And_Schema": "Please define both the 'Data' and the 'DataSchema' attribute if you are not using the 'DataSymbol' attribute.",
"ColumnData_Name": "Name",
"ColumnData_Value": "Value",
"ColumnData_Datatype": "Datatype",
"ColumnData_PreparedValue": "Prepared Value"
}
}

View File

@@ -0,0 +1,327 @@
{
"$schema": "http://json-schema.org/draft-04/schema",
"definitions": {
"TcHmi.Controls.Beckhoff.TcHmiObjectBrowser": {
"$schema": "http://json-schema.org/draft-04/schema",
"type": "object",
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
"frameworkControlType": "TcHmiObjectBrowser",
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
},
"TcHmiObjectBrowser": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiObjectBrowser"
},
"TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.Index": {
"type": "array",
"title": "The hierarchical index of treeview data.",
"items": {
"type": "number"
}
},
"TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.DataSymbol": {
"allOf": [
{
"$ref": "tchmi:framework#/definitions/Symbol"
},
{
"frameworkSymbolSubType": {
"anyOf": [
{
"$ref": "tchmi:general#/definitions/Object"
},
{
"$ref": "tchmi:general#/definitions/Array"
}
]
}
}
]
},
"TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.ColumnName": {
"type": "string",
"enum": ["Name", "Value", "Datatype", "ValueDisplay"]
},
"TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.ColumnDefinitionList": {
"title": "ColumnDefinitionList",
"type": "array",
"items": {
"title": "ColumnDefinition",
"type": "object",
"engineeringColumns": ["columnData", "width", "widthUnit"],
"propertiesMeta": [
{
"name": "cellBackground",
"displayName": "Cell Background",
"category": "Colors",
"displayPriority": 10,
"description": "Background color of the cells in this column",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "textColor",
"displayName": "Text Color",
"category": "Colors",
"displayPriority": 11,
"description": "Text color of the cells in this column",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "columnData",
"displayName": "Column Data",
"category": "General",
"displayPriority": 10,
"description": "The data that will be displayed in the column.",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "width",
"displayName": "Width",
"category": "General",
"displayPriority": 11,
"description": "Width for this column",
"defaultValue": 100,
"defaultValueInternal": null
},
{
"name": "widthUnit",
"refTo": "width",
"displayName": "Width Unit",
"category": "General",
"displayPriority": 11,
"description": "Width unit for this column. px defines an absolute width, % is relative to the control width and factor can be used to divide the available space into fractions.",
"defaultValue": "px",
"defaultValueInternal": "px"
},
{
"name": "editable",
"displayName": "Editable",
"category": "General",
"displayPriority": 12,
"description": "Can this column be edited (text, number) or operated (button, checkbox)?",
"defaultValue": false,
"defaultValueInternal": false
},
{
"name": "minWidth",
"displayName": "Min Width",
"category": "General",
"displayPriority": 13,
"description": "Minimum width for this column",
"defaultValue": 100,
"defaultValueInternal": null
},
{
"name": "minWidthUnit",
"refTo": "minWidth",
"displayName": "Min Width Unit",
"category": "General",
"displayPriority": 13,
"description": "Minimum width unit for this column",
"defaultValue": "px",
"defaultValueInternal": "px"
},
{
"name": "resize",
"displayName": "Resize",
"category": "General",
"displayPriority": 14,
"description": "Can this column be resized? Columns that have factor as their widthUnit can never be resizeable.",
"defaultValue": false,
"defaultValueInternal": false
},
{
"name": "sortable",
"displayName": "Sortable",
"category": "General",
"displayPriority": 15,
"description": "Can this column be sortedby user interaction?",
"defaultValue": true,
"defaultValueInternal": true
},
{
"name": "horizontalAlignment",
"displayName": "Horizontal Alignment",
"category": "General",
"displayPriority": 16,
"description": "Horizontal alignment of this column",
"defaultValue": "Left",
"defaultValueInternal": "Left"
},
{
"name": "verticalAlignment",
"displayName": "Vertical Alignment",
"category": "General",
"displayPriority": 17,
"description": "Vertical alignment of this column",
"defaultValue": "Center",
"defaultValueInternal": "Center"
},
{
"name": "headerHorizontalAlignment",
"displayName": "Header Horizontal Alignment",
"category": "General",
"displayPriority": 18,
"description": "Horizontal alignment of the header of this column",
"defaultValue": "Center",
"defaultValueInternal": "Center"
},
{
"name": "headerVerticalAlignment",
"displayName": "Header Vertical Alignment",
"category": "General",
"displayPriority": 19,
"description": "Vertical alignment of the header of this column",
"defaultValue": "Center",
"defaultValueInternal": "Center"
},
{
"name": "format",
"displayName": "Format",
"category": "General",
"displayPriority": 20,
"description": "A reference of function which is called with each entry",
"allowedFunctions": {
"returnType": "tchmi:general#/definitions/String",
"requiredArguments": [
{
"type": "tchmi:general#/definitions/Any",
"description": "The value to format."
},
{
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TchmiTreeView.ValueMetaData",
"description": "Meta data of the value. Includes the json schema."
}
],
"requiredWaitMode": "Synchronous"
},
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "ignoreEscapeSequences",
"displayName": "Ignore Escape Sequences",
"category": "General",
"displayPriority": 21,
"description": "When set to true a backslash in a text will be shown verbatim in the HMI",
"defaultValue": false,
"defaultValueInternal": false
},
{
"name": "autoFocusOut",
"displayName": "Auto Focus Out",
"category": "General",
"displayPriority": 22,
"description": "When set to true the control will automatically lose focus when the user presses the enter or escape key",
"defaultValue": true,
"defaultValueInternal": true
},
{
"name": "autoSelectText",
"displayName": "Auto Select Text",
"category": "General",
"displayPriority": 23,
"description": "When set to true all text within the control will be selected when the control gains focus",
"defaultValue": false,
"defaultValueInternal": false
}
],
"properties": {
"cellBackground": {
"$ref": "tchmi:framework#/definitions/Color"
},
"textColor": {
"$ref": "tchmi:framework#/definitions/SolidColor"
},
"columnData": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.ColumnName"
},
"width": {
"allOf": [
{
"$ref": "#/definitions/PositiveNumber"
},
{
"$ref": "#/definitions/MeasurementValue"
}
]
},
"widthUnit": {
"$ref": "tchmi:framework#/definitions/MeasurementUnitOrFactor"
},
"resize": {
"type": "boolean"
},
"minWidth": {
"allOf": [
{
"$ref": "#/definitions/PositiveNumber"
},
{
"$ref": "#/definitions/MeasurementValue"
}
]
},
"minWidthUnit": {
"$ref": "tchmi:framework#/definitions/MeasurementUnit"
},
"editable": {
"type": "boolean"
},
"sortable": {
"type": "boolean"
},
"horizontalAlignment": {
"$ref": "tchmi:framework#/definitions/HorizontalAlignment"
},
"verticalAlignment": {
"$ref": "tchmi:framework#/definitions/VerticalAlignment"
},
"headerHorizontalAlignment": {
"$ref": "tchmi:framework#/definitions/HorizontalAlignment"
},
"headerVerticalAlignment": {
"$ref": "tchmi:framework#/definitions/VerticalAlignment"
},
"format": {
"$ref": "tchmi:framework#/definitions/Function"
},
"ignoreEscapeSequences": {
"type": "boolean"
},
"autoFocusOut": {
"type": "boolean"
},
"autoSelectText": {
"type": "boolean"
}
},
"required": [
"columnData",
"width",
"widthUnit",
"resize",
"minWidth",
"minWidthUnit",
"horizontalAlignment",
"verticalAlignment"
],
"additionalProperties": false
}
},
"TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.PathEventObject": {
"type": "object",
"properties": {
"path": {
"type": "string"
}
},
"additionalProperties": false
},
"TcHmiObjectBrowserPathEventObject": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiObjectBrowser.PathEventObject"
}
}
}

View File

@@ -0,0 +1,27 @@
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser.TcHmi_Controls_Beckhoff_TcHmiTreeView.hidden {
display: none;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser .TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-template {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser .TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-button {
height: 100%;
width: 30px;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser
.TcHmi_Controls_Beckhoff_TcHmiTreeView-cell-disabled
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-button {
display: none;
}

View File

@@ -0,0 +1,889 @@
// 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 TcHmiObjectBrowser extends TcHmi.Controls.System.TcHmiControl {
#private;
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
protected __localizedElements: Map<HTMLElement, {
key: string;
parameters?: any[];
}>;
protected __localizationReader: TcHmi.Locale.LocalizationReader | undefined;
protected __treeView: TcHmiTreeView.Control;
/** Internal reference to the attribute "data-tchmi-data" */
protected __data: any | undefined;
protected __oldData: any | undefined;
protected __overriddenData: any | null | undefined;
protected __dataSchema: TcHmi.JsonSchema | undefined;
protected __overriddenDataSchema: TcHmi.JsonSchema | null | undefined;
/** Internal reference to the attribute "data-tchmi-data-symbol" */
protected __dataSymbol: TcHmi.Symbol<any[]> | undefined | null;
protected __dataSymbolExpressionWatchDestroyer: TcHmi.DestroyFunction | null;
protected __dataSymbolExpression: TcHmi.SymbolExpression | null;
protected __bindingMode: TcHmi.BindingMode;
protected __destroyDataSymbolWatch: TcHmi.DestroyFunction | null;
protected __dataHasChanged: boolean;
protected __columns: Column[] | undefined;
protected __subscriptionInfo: {
subscriptionId: number | null;
timing: {
isScrolling: boolean;
timeoutID: number | null;
lastRequestTime: number;
lastUpdateTime: number;
minTimeout: number;
responseLatencies: number[];
updateTimings: number[];
firstResponsePending: boolean;
};
};
protected __ignoreFirstLevel: boolean | undefined;
protected __firstLevelName: string | undefined;
/**
* ReadOnly state of the control.
*/
protected __isReadOnly: boolean | undefined;
protected __promisedData: any;
protected __promisedDataSchema: any;
private __updateDataAndSchemaTimoutId;
protected __selectedEditButton: HTMLElement | null;
/**
* A map to save the subscription data.
* 1 Symbolname
* 2 SubscriptionData
* Due to the fact that sub levels get an own command in the subscription
* the data of some levels can be missing in the server response if the data has not changed.
* In that case we can resort to the data stored here.
*/
protected __subscriptionData: Map<string, any>;
/**
* An array of the expanded subsymbols.
*/
protected __expandedElements: string[];
protected __elementLoadingSpinner: HTMLElement;
/** The destroy function for the updateTable event of the Treeview*/
protected __updateTreeviewDestroyFunction: TcHmi.DestroyFunction | null;
protected __lastReportedErrorDetail: TcHmi.IErrorDetails | undefined;
protected __initializedAttributes: string[];
protected __mouseUpDestroyer: TcHmi.DestroyFunction | null;
protected __mouseLeaveDestroyer: TcHmi.DestroyFunction | null;
protected __mouseEnterDestroyer: TcHmi.DestroyFunction | null;
protected __editorFactory: EditorFactory;
/**
* If raised, the control object exists in control cache and constructor of each inheritation level was called.
* Call attribute processor functions here to initialize default values!
* 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;
/**
* Add an element to be localized.
* @param element The element.
* @param key The localization key.
* @param parameters Optional parameters to pass to tchmi_format_string.
*/
__addLocalizedElement(element: HTMLElement, key: string, ...parameters: any[]): void;
/**
* Remove a localized element.
* @param element The element to remove.
*/
__removeLocalizedElement(element: HTMLElement): void;
/**
* Transforms the data into a homogene structure to be able to display the data with the TcHmiTreeView control
* @param data The data to be transformed.
* @param name The name of the current level
*/
protected __transformDataAndDataSchema(data: any, name: string, schema: TcHmi.JsonSchema, timedAsyncTask: TcHmi.TimedAsyncTask): Promise<ITransformationResult>;
/**
* Create edit button for objects and arrays.
*/
protected __createEditButton(description: string): HTMLDivElement;
/**
* Mousedown callback function for edit buttons.
*/
protected __onButtonMouseDown(event: MouseEvent): void;
/**
* Mouseleave callback function for edit buttons.
*/
protected __onButtonMouseLeave(event: MouseEvent): void;
/**
* Mouseenter callback function for edit buttons.
*/
protected __onButtonMouseEnter(event: MouseEvent): void;
/**
* Mouseup callback function for edit buttons.
*/
protected __onButtonMouseUp(event: MouseEvent): void;
/**
* Convert a base64 value based on its schema
*/
protected __convertFromBase64BySchemaId(data: string, id: string | undefined): string | bigint | null;
/**
* Convert a value into base64 by its schema.
*/
protected __convertToBase64BySchemaId(data: any, id: string | undefined): string | null;
/**
* Get the origninal schema by a hierarchical index
* @param schema
* @param index List of indices to address a data object in a nested array or object
*/
protected __originalIndexToDataSchema(schema: TcHmi.JsonSchema, index: number[]): TcHmi.JsonSchema;
/**
* Get the original data by a hierarchical index
* @param data
* @param index List of indices to address a data object in a nested array or object
*/
protected __originalIndexToData(data: any, index: number[]): any;
/**
* Write a value to a sub property of a nested array or object by a hierarchical index
* @param data
* @param index List of indices to address a data object in a nested array or object
*/
protected __writeDataByHierarchicalIndex(data: any, index: number[], valueNew: any): void;
/**
* Modify a value of the data and write it to the symbol if the dataSymbol is used
* @param valueNew
* @param index List of indices to address a data object in a nested array or object
*/
protected __modifyData(valueNew: any, index: number[]): void;
/**
* Get the name of sub symbol by the hierarchical index
* @param data
* @param index List of indices to address a data object in a nested array or object
*/
protected __originalIndexToSubSymbolName(data: any, index: number[]): string;
/**
* Get the hierarchical index by the name of the symbol
* @param data
* @param symbolName Name to address a data object in a nested array or object
*/
protected __symbolNameToOriginalIndex(data: any, symbolName: string): number[] | null;
/**
* A function to selected the parent element of the currently selected element.
*/
selectParentRow(): void;
/**
* A function to callapse every expanded element.
*/
collapseAll(): void;
/**
* Expand an element by its path.
* @param path The path of the element to expand in the original data.
*/
expandElement(path: string, expandParents: boolean): void;
/**
* Collapse an element by its hierarchical index.
* @param path The path of the element to expand in the original data.
*/
collapseElement(path: string): void;
/**
* Scroll to an element by its hierarchical index.
* @param path The path of the element to scroll to.
*/
scrollTo(path: string, expandParents: boolean): void;
/**
* Call through function to process the pending changes.
* @param writeResponseCallback The callback function handling the symbol write response.
**/
writePreparedValues(writeResponseCallback?: (data: TcHmi.IErrorDetails) => void): void;
/**
* Call through function to reset the pending changes.
**/
resetPreparedValues(): void;
/**
* Callback function for the onDataChanged event of the TreeView
* @param event
* @param args
*/
protected __onEdit(_event: TcHmi.EventProvider.Event, args: any): void;
/**
* Callback function for the onElementExpanded event of the TreeView
* @param event
* @param args
*/
protected __onElementExpanded(_event: TcHmi.EventProvider.Event, args: any): void;
/**
* Callback function for the onElementCollapsed event of the TreeView
* @param event
* @param args
*/
protected __onElementCollapsed(_event: TcHmi.EventProvider.Event, args: any): void;
/**
* Handles the onPropertyChanged event of the treeview.
*/
private __onTreeViewPropertyChanged;
/**
* Sets the value of the member variable "data" if the new value is not equal to the current value
* and calls the associated process function (processData) after that.
* @param valueNew The new value for data.
*/
setData(valueNew: any | null): void;
/**
* The private setter of the member variable "data".
* @param valueNew The new value for data.
*/
private __setData;
/**
* The watch callback for the data object resolver
*/
protected __onResolverForDataWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<any>): void;
/**
* Returns the current value of the member variable data.
* @returns the current value of the member variable data.
*/
getData(): any;
/**
* Processes the current value of data.
* UpdateTable is called with null and data (Array.<Object>) as parameter.
*/
protected __processData(): void;
/**
* Starts the loading spinner and register for the .onUpdateTable event of the treeview to remove the spinner and the event.
*/
protected __startLoadingSpinner(): void;
/**
* Sets the value of the member variable "DataSchema" if the new value is not equal to the current value
* and calls the associated process function (processDataSchema) after that.
* @param valueNew The new value for data.
*/
setDataSchema(valueNew: TcHmi.JsonSchema | null): void;
/**
* The private setter of the member variable "dataSchema".
* @param valueNew The new value for dataSchema.
*/
private __setDataSchema;
/**
* The watch callback for the DataSchema object resolver
*/
protected __onResolverForDataSchemaWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.JsonSchema>): void;
/**
* Returns the current value of the member variable dataSchema.
* @returns the current value of the member variable dataSchema.
*/
getDataSchema(): TcHmi.JsonSchema | undefined;
/**
* Processes the current value of dataSchema.
*/
protected __processDataSchema(): void;
/**
* Process the current data and its schema and pass it to the treeview control.
**/
protected __processDataAndDataSchema(): void;
/**
* The setter function for the "data symbol".
* @param valueNew The new datasymbol.
*/
setDataSymbol(valueNew: TcHmi.Symbol<any> | null): void;
/**
* @returns the dataSymbol.
*/
getDataSymbol(): TcHmi.Symbol<any[]> | null | undefined;
/**
* Processes the dataSymbol.
* @param unsubscribeOnly Should be set to true when this method is called from __detach. Prevents a new subscription being created after the existing subscription was unsubscribed.
*/
protected __processDataSymbol(unsubscribeOnly?: boolean): void;
/**
* Updates the data symbol paging parameters.
* @param force Forces the subscription update if set to true.
*/
protected __updateSubscription(force?: boolean): void;
/**
* Callback function for dataSymbol subscription.
* @param data The result object of the subscription.
*/
protected __onDataSymbol(data: TcHmi.Server.IResultObject<unknown, any>): void;
/**
* Callback function for dataSymbol watch.
*/
protected __onDataSymbolWatch(data: TcHmi.Symbol.IReadResultObject<any[]>): void;
/**
* Sets the value of the member variable "Columns" if the new value is not equal to the current value
* and calls the associated process function (processColumns) after that.
* @param valueNew The new value for Columns.
*/
setColumns(valueNew: Column[] | null): void;
/**
* The watch callback for the columns object resolver.
*/
protected __onResolverForColumnsWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<Column[]>): void;
/**
* Returns the current value of the member variable text.
* @returns the current value of the member variable text.
*/
getColumns(): Column[] | undefined;
/**
* Processes the current value of columns and forward it to the treeview control.
*/
protected __processColumns(): void;
/**
* Sets the value of IgnoreFirstLevel
* @param valueNew The new value for IgnoreFirstLevel
*/
setIgnoreFirstLevel(valueNew: boolean | null): void;
/**
* Gets the value of IgnoreFirstLevel
* @returns The current value of IgnoreFirstLevel
*/
getIgnoreFirstLevel(): boolean | undefined;
/**
* Processes IgnoreFirstLevel
*/
protected __processIgnoreFirstLevel(): void;
/**
* Sets the value of the member variable "FirstLevelName" if the new value is not equal to the current value
* and calls the associated process function (processFirstLevelName) after that.
* @param valueNew The new value for FirstLevelName.
*/
setFirstLevelName(valueNew: string | null): void;
/**
* Returns the current value of the member variable FirstLevelName.
*/
getFirstLevelName(): string | undefined;
/**
* Processes the current value of FirstLevelName.
*/
protected __processFirstLevelName(): void;
/**
* Returns the current value of dataHasChanged.
* @returns The current value of dataHasChanged.
*/
getDataHasChanged(): boolean;
/**
* Sets the value of indirectWrite
* @param valueNew The new value for indirectWrite
*/
setIndirectWrite(valueNew: boolean | null): void;
/**
* Gets the value of indirectWrite
* @returns The current value of indirectWrite
*/
getIndirectWrite(): boolean | undefined;
/**
* Set the value for the attribute filter in the treeview instance.
* @param valueNew
*/
setFilter(valueNew: TcHmi.Filter | null): void;
/**
* Get the filter attribute from the treeview instance
**/
getFilter(): TcHmi.Filter | null | undefined;
/**
* Set the value for the attribute sorting in the treeview instance.
* @param valueNew
*/
setSorting(valueNew: TcHmi.SortingInfo[] | null): void;
/**
* Get the Sorting attribute from the treeview instance
**/
getSorting(): TcHmi.SortingInfo[] | undefined;
/**
* Sets the value of the rowClassesProvider order attribute.
* @param value The new rowClassesProvider method.
*/
setRowClassesProvider(valueNew: TcHmi.IFunction<string[]> | null): void;
/**
* Gets the current rowClassesProvider method.
* @returns the current rowClassesProvider method.
*/
getRowClassesProvider(): TcHmi.IFunction<string[]> | undefined;
/**
* Sets the value of the member variable "headerHeight".
* @param valueNew The new value for headerHeight.
*/
setHeaderHeight(valueNew: number | null): void;
/**
* Returns the current value of the member variable headerHeight.
* @returns the current value of the member variable headerHeight.
*/
getHeaderHeight(): number | undefined;
/**
* Sets the value of the member variable "headerHeightUnit".
* @param valueNew The new value for headerHeightUnit.
*/
setHeaderHeightUnit(valueNew: TcHmi.DimensionUnit | null): void;
/**
* Returns the current value of the member variable headerHeightUnit.
* @returns the current value of the member variable headerHeightUnit.
*/
getHeaderHeightUnit(): TcHmi.DimensionUnit | undefined;
/**
* Sets the value of the member variable "headerCellPadding".
* @param valueNew The new value for headerCellPadding.
*/
setHeaderCellPadding(valueNew: TcHmi.FourSidedCss | null): void;
/**
* Returns the current value of the member variable headerCellPadding.
* @returns the current value of the member variable headerCellPadding.
*/
getHeaderCellPadding(): TcHmi.FourSidedCss | null | undefined;
/**
*
* Sets the value of the member variable "rowHeight".
* @param valueNew The new value for rowHeight.
*/
setRowHeight(valueNew: number | null): void;
/**
* Returns the current value of the member variable rowHeight.
* @returns the current value of the member variable rowHeight.
*/
getRowHeight(): number | undefined;
/**
* Sets the table-border-color attribute value and calls the associated process function (processBorderColor).
* @param valueNew The new attribute value.
*/
setTableBorderColor(valueNew: TcHmi.SolidColor | null): void;
/**
* Returns the current table-border-color value.
* @returns the current attribute value.
*/
getTableBorderColor(): TcHmi.SolidColor | null | undefined;
/**
* Sets the Grid-width attribute value and calls the associated process function (processBorderWidth).
* @param valueNew The new attribute value.
*/
setTableBorderWidth(valueNew: number | null): void;
/**
* Returns the current table-border-width value.
* @returns The current attribute value.
*/
getTableBorderWidth(): number | undefined;
/**
* Internal reference to the attribute "data-tchmi-table-border-type".
* @param valueNew The new BorderStyle of the table.
*/
setTableBorderStyle(valueNew: TcHmi.BorderStyle | null): void;
/**
* Returns the current table-border-style value.
* @returns The current attribute value.
*/
getTableBorderStyle(): TcHmi.BorderStyle | null | undefined;
/**
* Sets the value of showHeader
* @param valueNew The new value for showHeader
*/
setShowHeader(valueNew: boolean | null): void;
/**
* Gets the value of showHeader
* @returns The current value of showHeader
*/
getShowHeader(): boolean | undefined;
/**
* Sets the value of showRowNumbers
* @param valueNew The new value for showRowNumbers
*/
setShowRowNumbers(valueNew: boolean | null): void;
/**
* Gets the value of showRowNumbers
* @returns The current value of showRowNumbers
*/
getShowRowNumbers(): boolean | undefined;
/**
* Sets the value of rowNumbersResizable
* @param valueNew The new value for rowNumbersResizable
*/
setRowNumbersResizable(valueNew: boolean | null): void;
/**
* Gets the value of rowNumbersResizable
* @returns The current value of rowNumbersResizable
*/
getRowNumbersResizable(): boolean | undefined;
/**
* Sets the value of rowNumbersStartNumber
* @param valueNew The new value for rowNumbersStartNumber
*/
setRowNumbersStartNumber(valueNew: number | null): void;
/**
* Gets the value of rowNumbersStartNumber
* @returns The current value of rowNumbersStartNumber
*/
getRowNumbersStartNumber(): number | undefined;
/**
* Sets the value of rowNumbersWidth
* @param valueNew The new value for rowNumbersWidth
*/
setRowNumbersWidth(valueNew: number | null): void;
/**
* Gets the value of rowNumbersWidth
* @returns The current value of rowNumbersWidth
*/
getRowNumbersWidth(): number | undefined;
/**
* Sets the value of rowNumbersWidthUnit
* @param valueNew The new value for rowNumbersWidthUnit
*/
setRowNumbersWidthUnit(valueNew: TcHmi.DimensionUnit | null): void;
/**
* Gets the value of rowNumbersWidthUnit
* @returns The current value of rowNumbersWidthUnit
*/
getRowNumbersWidthUnit(): TcHmi.DimensionUnit | undefined;
/**
* Sets the value of rowNumbersHorizontalAlignment
* @param valueNew The new value for rowNumbersHorizontalAlignment
*/
setRowNumbersHorizontalAlignment(valueNew: TcHmi.HorizontalAlignment | null): void;
/**
* Gets the value of rowNumbersHorizontalAlignment
* @returns The current value of rowNumbersHorizontalAlignment
*/
getRowNumbersHorizontalAlignment(): TcHmi.HorizontalAlignment | undefined;
/**
* Sets the value of rowNumbersVerticalAlignment
* @param valueNew The new value for rowNumbersVerticalAlignment
*/
setRowNumbersVerticalAlignment(valueNew: TcHmi.VerticalAlignment | null): void;
/**
* Gets the value of rowNumbersVerticalAlignment
* @returns The current value of rowNumbersVerticalAlignment
*/
getRowNumbersVerticalAlignment(): TcHmi.VerticalAlignment | undefined;
/**
* Sets the value of the member variable "rowNumbersCellPadding" if the new value is not equal to the current value
* and calls the associated process function (processRowNumbersCellPadding) after that.
* @param valueNew The new value for rowNumbersCellPadding.
*/
setRowNumbersCellPadding(valueNew: TcHmi.FourSidedCss | null): void;
/**
* Returns the current value of the member variable rowNumbersCellPadding.
* @returns the current value of the member variable rowNumbersCellPadding.
*/
getRowNumbersCellPadding(): TcHmi.FourSidedCss | null | undefined;
/**
* Sets the value of the member variable "cellContentPadding".
* @param valueNew The new value for cellContentPadding.
*/
setCellContentPadding(valueNew: TcHmi.FourSidedCss | null): void;
/**
* Returns the current value of the member variable cellContentPadding.
* @returns the current value of the member variable cellContentPadding.
*/
getCellContentPadding(): TcHmi.FourSidedCss | null | undefined;
/**
* Sets the background value.
* @param valueNew The new value for the header background attribute as json string.
*/
setHeaderBackgroundColor(valueNew: TcHmi.Color | null): void;
/**
* Returns the current header background value.
* @returns The current value of the header background member variable as json in string format.
*/
getHeaderBackgroundColor(): TcHmi.Color | null | undefined;
/**
* Sets the text color.
* @param valueNew The new value for textFColor.
*/
setHeaderTextColor(valueNew: TcHmi.SolidColor | null): void;
/**
* Returns the current value of headertextColor.
* @returns The current value of headertextColor.
*/
getHeaderTextColor(): TcHmi.SolidColor | null | undefined;
/**
* Sets the text color.
* @param valueNew The new value for textFColor.
*/
setRowNumbersTextColor(valueNew: TcHmi.SolidColor | null): void;
/**
* Returns the current value of rowNumberstextColor.
* @returns the current value of rowNumberstextColor.
*/
getRowNumbersTextColor(): TcHmi.SolidColor | null | undefined;
/**
* Sets the row numbers background value.
* @param valueNew The new value for the row numbers background attribute.
*/
setRowNumbersBackgroundColor(valueNew: TcHmi.Color | null): void;
/**
* Returns the current row numbers background value.
* @returns The current value of the row numbers background member variable.
*/
getRowNumbersBackgroundColor(): TcHmi.Color | null | undefined;
/**
* Sets the header font family.
* @param valueNew The new value for headerFontFamily
*/
setHeaderFontFamily(valueNew: TcHmi.FontFamily | null): void;
/**
* Returns the current value of headerFontFamily.
* @returns The current value of headerFontFamily.
*/
getHeaderFontFamily(): string | null | undefined;
/**
* Sets the header font size and calls the associated process function.
* @param valueNew The new value for headerFontSize
*/
setHeaderFontSize(valueNew: number | null): void;
/**
* Returns the current value of headerFontSize.
* @returns The current value of headerFontSize.
*/
getHeaderFontSize(): number | undefined;
/**
* Sets the header font size unit.
* @param valueNew The new value for headerFontSizeUnit
*/
setHeaderFontSizeUnit(valueNew: TcHmi.FontSizeUnit | null): void;
/**
* Returns the current value of headerFontSizeUnit.
* @returns The current value of headerFontSizeUnit.
*/
getHeaderFontSizeUnit(): TcHmi.FontSizeUnit | undefined;
/**
* Sets the header font style.
* @param valueNew The new value for headerFontStyle
*/
setHeaderFontStyle(valueNew: TcHmi.FontStyle | null): void;
/**
* Returns the current value of headerFontStyle.
* @returns The current value of headerFontStyle.
*/
getHeaderFontStyle(): TcHmi.FontStyle | undefined;
/**
* Sets the header font family.
* @param valueNew The new value for headerFontWeight
*/
setHeaderFontWeight(valueNew: TcHmi.FontWeight | null): void;
/**
* Returns the current value of headerFontWeight.
* @returns The current value of headerFontWeight.
*/
getHeaderFontWeight(): TcHmi.FontWeight | undefined;
/**
* Sets the grid font family.
* @param valueNew The new value for gridFontFamily
*/
setGridFontFamily(valueNew: TcHmi.FontFamily | null): void;
/**
* Returns the current value of gridFontFamily.
* @returns The current value of gridFontFamily.
*/
getGridFontFamily(): string | null | undefined;
/**
* Sets the grid font size.
* @param valueNew The new value for gridFontSize
*/
setGridFontSize(valueNew: number | null): void;
/**
* Returns the current value of gridFontSize.
* @returns The current value of gridFontSize.
*/
getGridFontSize(): number | undefined;
/**
* Sets the grid font size unit.
* @param valueNew The new value for gridFontSizeUnit
*/
setGridFontSizeUnit(valueNew: TcHmi.FontSizeUnit | null): void;
/**
* Returns the current value of gridFontSizeUnit.
* @returns The current value of gridFontSizeUnit.
*/
getGridFontSizeUnit(): TcHmi.FontSizeUnit | undefined;
/**
* Sets the grid font style.
* @param valueNew The new value for gridFontStyle
*/
setGridFontStyle(valueNew: TcHmi.FontStyle | null): void;
/**
* Returns the current value of gridFontStyle.
* @returns The current value of gridFontStyle.
*/
getGridFontStyle(): TcHmi.FontStyle | undefined;
/**
* Sets the grid font family.
* @param valueNew The new value for gridFontWeight
*/
setGridFontWeight(valueNew: TcHmi.FontWeight | null): void;
/**
* Returns the current value of gridFontWeight.
* @returns The current value of gridFontWeight.
*/
getGridFontWeight(): TcHmi.FontWeight | undefined;
/**
* Sets the row numbers font family.
* @param valueNew The new value for rowNumbersFontFamily
*/
setRowNumbersFontFamily(valueNew: TcHmi.FontFamily | null): void;
/**
* Returns the current value of rowNumbersFontFamily.
* @returns The current value of rowNumbersFontFamily.
*/
getRowNumbersFontFamily(): string | null | undefined;
/**
* Sets the row numbers font size.
* @param valueNew The new value for rowNumbersFontSize
*/
setRowNumbersFontSize(valueNew: number | null): void;
/**
* Returns the current value of rowNumbersFontSize.
* @returns The current value of rowNumbersFontSize.
*/
getRowNumbersFontSize(): number | undefined;
/**
* Sets the row numbers font size unit.
* @param valueNew The new value for rowNumbersFontSizeUnit
*/
setRowNumbersFontSizeUnit(valueNew: TcHmi.FontSizeUnit | null): void;
/**
* Returns the current value of rowNumbersFontSizeUnit.
* @returns The current value of rowNumbersFontSizeUnit.
*/
getRowNumbersFontSizeUnit(): TcHmi.FontSizeUnit | undefined;
/**
* Sets the row numbers font style.
* @param valueNew The new value for rowNumbersFontStyle
*/
setRowNumbersFontStyle(valueNew: TcHmi.FontStyle | null): void;
/**
* Returns the current value of rowNumbersFontStyle.
* @returns The current value of rowNumbersFontStyle.
*/
getRowNumbersFontStyle(): TcHmi.FontStyle | undefined;
/**
* Sets the row numbers font family and calls the associated process function.
* @param valueNew The new value for rowNumbersFontWeight
*/
setRowNumbersFontWeight(valueNew: TcHmi.FontWeight | null): void;
/**
* Returns the current value of rowNumbersFontWeight.
* @returns The current value of rowNumbersFontWeight.
*/
getRowNumbersFontWeight(): TcHmi.FontWeight | undefined;
/**
* Sets the selected row by index.
* @param valueNew The new value for selectedPath
*/
setSelectedPath(valueNew: string | null): void;
/**
* Returns the current value of selectedPath.
* @returns The current value of selectedPath.
*/
getSelectedPath(): string | null;
/**
* Sets the selected column by index.
* @param valueNew The new value for selectedColumnIndex
*/
setSelectedColumn(valueNew: ColumnData | null): void;
/**
* Returns the current value of selectedColumnIndex.
* @returns The current value of selectedColumnIndex.
*/
getSelectedColumn(): ColumnData | null;
/**
* Returns the current value of selectedCellValue.
* @returns The current value of selectedCellValue.
*/
getSelectedCellValue(): any;
/**
* Returns the current value of selectedRowValue.
* @returns The current value of selectedRowValue.
*/
getSelectedRowValue(): any;
/**
* Sets the isReadOnly attribute and calls the associated process function (processIsReadOnly).
* @preserve (Part of the public API)
*/
setIsReadOnly(valueNew: boolean | null): void;
/**
* Returns the effective value of isReadOnly based on own and parent isReadOnly variable.
*/
getIsReadOnly(): boolean | undefined;
/**
* Process IsReadOnly.
*/
protected __processIsReadOnly(): void;
}
export interface ITransformedData {
name: string;
datatype: string;
value: any;
children?: ITransformedData[];
}
export interface ITransformationResult {
data: ITransformedData;
schema: TcHmi.JsonSchema;
}
export type ColumnData = 'Name' | 'Value' | 'Datatype' | 'ValueDisplay';
export interface Column {
/** Background color of the cells in this column */
cellBackground?: TcHmi.SolidColor | null;
/** Text color of the cells in this column */
textColor?: TcHmi.SolidColor | null;
/** Data displayed in the column*/
columnData: ColumnData;
/** Name of the Label for this column */
label: string;
/** Width for this column */
width: number;
/** Width unit for this column */
widthUnit: TcHmiDatagrid.DimensionUnitOrFactor;
/** Can this column be resized? */
resize?: boolean;
/** Minimum width for this column */
minWidth?: number;
/** Minimum width unit for this column */
minWidthUnit?: TcHmi.DimensionUnit;
/** Can this column be edited (text, number) or operated (button, checkbox)? */
editable?: boolean;
/** Can this column be sorted by user interaction? */
sortable?: boolean;
/** Horizontal alignment of this column */
horizontalAlignment?: TcHmi.HorizontalAlignment;
/** Vertical alignment of this column */
verticalAlignment?: TcHmi.VerticalAlignment;
/** A reference of function which is called with each entry */
format?: TcHmi.IFunction;
/**Horizontal alignment of this header */
headerHorizontalAlignment?: TcHmi.HorizontalAlignment;
/**Vertical alignment of this header */
headerVerticalAlignment?: TcHmi.VerticalAlignment;
/** When set to true a backslash in a text will be shown verbatim in the HMI. */
ignoreEscapeSequences?: boolean;
/** When set to true the control will automatically lose focus when the user presses the enter or escape key */
autoFocusOut?: boolean;
/** When set to true all text within the control will be selected when the control gains focus */
autoSelectText?: boolean;
}
export { TcHmiObjectBrowser as Control };
declare const _TcHmiObjectBrowser: typeof TcHmiObjectBrowser;
type tTcHmiObjectBrowser = TcHmiObjectBrowser;
type tITransformedData = ITransformedData;
type tITransformationResult = ITransformationResult;
type tColumnData = ColumnData;
type tColumn = Column;
declare global {
namespace TcHmi.Controls.Beckhoff {
const TcHmiObjectBrowser: typeof _TcHmiObjectBrowser;
type TcHmiObjectBrowser = tTcHmiObjectBrowser;
namespace TcHmiObjectBrowser {
type ITransformedData = tITransformedData;
type ITransformationResult = tITransformationResult;
type ColumnData = tColumnData;
type Column = tColumn;
}
}
}

View File

@@ -0,0 +1,24 @@
<div class="TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-template tchmi-box">
<div
id="{Id}_TcHmiTreeView"
data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiTreeView"
data-tchmi-height="100"
data-tchmi-height-unit="%"
data-tchmi-left="0"
data-tchmi-left-unit="px"
data-tchmi-top="0"
data-tchmi-top-unit="px"
data-tchmi-width="100"
data-tchmi-width-unit="%"
data-tchmi-hierarchical-data-property="children"
>
<script data-tchmi-target-attribute="data-tchmi-content-padding" type="application/json">
{
"top": 3,
"right": 3,
"bottom": 3,
"left": 3
}
</script>
</div>
</div>

View File

@@ -0,0 +1,83 @@
/** TcHmiObjectBrowser styles for theme: Base-Dark */
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser .TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-button {
font-size: 16px;
background: var(--tchmi-highlight-button-background);
color: var(--tchmi-highlight-button-text-color);
border: var(--tchmi-highlight-button-border);
box-shadow: var(--tchmi-highlight-button-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser .TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-button.down {
font-size: 16px;
background: var(--tchmi-highlight-button-background-pressed);
color: var(--tchmi-highlight-button-text-color-pressed);
border: var(--tchmi-highlight-button-border-pressed);
box-shadow: var(--tchmi-highlight-button-shadow-pressed);
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser {
--TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-color: var(--tchmi-foreground-color-2);
}
/**
Loading Spinner
Usage: <div class="TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-container"><div class="TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner"><div></div><div></div><div></div><div></div></div></div>
*/
@keyframes TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-container {
position: relative;
width: 100%;
height: 100%;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner {
display: inline-block;
width: 64px;
height: 64px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid var(--TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-color);
border-radius: 50%;
animation: TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-color) transparent transparent
transparent;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div:nth-child(3) {
animation-delay: -0.15s;
}

View File

@@ -0,0 +1,83 @@
/** TcHmiObjectBrowser styles for theme: Base */
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser .TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-button {
font-size: 16px;
background: var(--tchmi-highlight-button-background);
color: var(--tchmi-highlight-button-text-color);
border: var(--tchmi-highlight-button-border);
box-shadow: var(--tchmi-highlight-button-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser .TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-editor-button.down {
font-size: 16px;
background: var(--tchmi-highlight-button-background-pressed);
color: var(--tchmi-highlight-button-text-color-pressed);
border: var(--tchmi-highlight-button-border-pressed);
box-shadow: var(--tchmi-highlight-button-shadow-pressed);
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser {
--TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-color: var(--tchmi-foreground-color-1);
}
/**
Loading Spinner
Usage: <div class="TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-container"><div class="TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner"><div></div><div></div><div></div><div></div></div></div>
*/
@keyframes TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-container {
position: relative;
width: 100%;
height: 100%;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner {
display: inline-block;
width: 64px;
height: 64px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid var(--TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-color);
border-radius: 50%;
animation: TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner-color) transparent transparent
transparent;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.TcHmi_Controls_Beckhoff_TcHmiObjectBrowser-loading-spinner div:nth-child(3) {
animation-delay: -0.15s;
}