Added minimal functionality for Robot teaching
- Added minimal HMI - Added possibility to open and close all chamber doors
This commit is contained in:
@@ -0,0 +1,304 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiTimespanPicker",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "Timespan Picker",
|
||||
"version": {
|
||||
"full": "14.4.1.0",
|
||||
"major": 14,
|
||||
"minor": 4,
|
||||
"build": 1,
|
||||
"revision": 0
|
||||
},
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"base": "TcHmi.Controls.System.TcHmiControl",
|
||||
"description": "Control for Time Span Selection.",
|
||||
"defaultDesignerEvent": ".onValueChanged",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 540,
|
||||
"height": 220
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiTimespanPicker/TcHmiTimespanPicker.esm.js",
|
||||
"type": "EsModule",
|
||||
"description": "Contains all the main logic as ES module."
|
||||
}
|
||||
],
|
||||
"themes": {
|
||||
"Base": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"Base-Dark": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base-Dark/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"attributes": [
|
||||
{
|
||||
"name": "data-tchmi-value",
|
||||
"propertyName": "Value",
|
||||
"propertySetterName": "setValue",
|
||||
"propertyGetterName": "getValue",
|
||||
"displayName": "Value",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/TimeSpan",
|
||||
"category": "Common",
|
||||
"description": "The timespan value defined as ISO timespan.",
|
||||
"themeable": "Advanced",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-max-value",
|
||||
"propertyName": "MaxValue",
|
||||
"propertySetterName": "setMaxValue",
|
||||
"propertyGetterName": "getMaxValue",
|
||||
"displayName": "Max Value",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/TimeSpan",
|
||||
"category": "Common",
|
||||
"description": "The max value defined as ISO timespan.",
|
||||
"themeable": "Advanced",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-value-symbol",
|
||||
"propertyName": "ValueSymbol",
|
||||
"propertySetterName": "setValueSymbol",
|
||||
"propertyGetterName": "getValueSymbol",
|
||||
"displayName": "Value Symbol",
|
||||
"visible": true,
|
||||
"themeable": "None",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanPicker.ValueSymbol",
|
||||
"category": "Common",
|
||||
"description": "A symbol which represents a time variable from the server. This attribute overwrites an existing Value attribute.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowEarlySymbolReferenceInjection": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-direct-display",
|
||||
"propertyName": "DirectDisplay",
|
||||
"propertySetterName": "setDirectDisplay",
|
||||
"propertyGetterName": "getDirectDisplay",
|
||||
"displayName": "Direct Display",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Common",
|
||||
"themeable": "Advanced",
|
||||
"description": "Wether the control is directly displayed in the view or used as a popup. \nThe popup can be opened by a function provided by the control or by clicking on the empty control in the view.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-show-confirmation-buttons",
|
||||
"propertyName": "ShowConfirmationButtons",
|
||||
"propertySetterName": "setShowConfirmationButtons",
|
||||
"propertyGetterName": "getShowConfirmationButtons",
|
||||
"displayName": "Show Confirmation Buttons",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Common",
|
||||
"themeable": "Advanced",
|
||||
"description": "Wether the control provides an OK and a cancel button to confirm the interaction. This property does not affect the popup.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": false,
|
||||
"defaultValueInternal": true
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-is-read-only",
|
||||
"propertyName": "IsReadOnly",
|
||||
"propertySetterName": "setIsReadOnly",
|
||||
"propertyGetterName": "getIsReadOnly",
|
||||
"displayName": "Is Read Only",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 52,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Common",
|
||||
"description": "Controls whose primary purpose is data input can be set to read-only to only display data without allowing modification.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-time-units",
|
||||
"propertyName": "TimeUnits",
|
||||
"propertySetterName": "setTimeUnits",
|
||||
"propertyGetterName": "getTimeUnits",
|
||||
"displayName": "Time Units",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 60,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanPicker.TimeUnits",
|
||||
"category": "Common",
|
||||
"description": "Defines for each field whether it should be displayed.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": {
|
||||
"days": true,
|
||||
"hours": true,
|
||||
"milliseconds": true,
|
||||
"minutes": true,
|
||||
"months": true,
|
||||
"seconds": true,
|
||||
"years": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"functions": [
|
||||
{
|
||||
"name": "openTimespanPicker",
|
||||
"displayName": "openTimespanPicker",
|
||||
"visible": true,
|
||||
"description": "Open the TimespanPicker and added to TopMostLayer.",
|
||||
"category": "Common",
|
||||
"params": [],
|
||||
"type": null,
|
||||
"heritable": true
|
||||
},
|
||||
{
|
||||
"name": "closeTimespanPicker",
|
||||
"displayName": "closeTimespanPicker",
|
||||
"visible": true,
|
||||
"description": "Close the TimespanPicker and remove from TopMostLayer.",
|
||||
"category": "Common",
|
||||
"params": [],
|
||||
"type": null,
|
||||
"heritable": true
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": ".onValueChanged",
|
||||
"displayName": ".onValueChanged",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The valuechanged event is fired when the value was changed.",
|
||||
"heritable": true,
|
||||
"arguments": [
|
||||
{
|
||||
"type": "tchmi:general#/definitions/TimeSpan",
|
||||
"description": "The new value of the TimespanPicker."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": ".onValueSymbolChanged",
|
||||
"displayName": ".onValueSymbolChanged",
|
||||
"visible": true,
|
||||
"displayPriority": 15,
|
||||
"category": "Control",
|
||||
"description": "The valuechanged event is fired when the symbol value was changed.",
|
||||
"heritable": true,
|
||||
"arguments": [
|
||||
{
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanPicker.ValueSymbol",
|
||||
"description": "The new value symbol of the TimespanPicker."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": ".onCancel",
|
||||
"displayName": ".onCancel",
|
||||
"visible": true,
|
||||
"displayPriority": 20,
|
||||
"category": "Control",
|
||||
"description": "The cancel event is fired if the TimespanPicker has canceled (with cancel button or click next to the topmostlayer). The changes are discarded.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onConfirmed",
|
||||
"displayName": ".onConfirmed",
|
||||
"visible": true,
|
||||
"displayPriority": 30,
|
||||
"category": "Control",
|
||||
"description": "The confirmed event is fired if the confirm button was clicked.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onUserInteractionFinished",
|
||||
"displayName": ".onUserInteractionFinished",
|
||||
"visible": true,
|
||||
"displayPriority": 5,
|
||||
"category": "Operator",
|
||||
"description": "The userinteractionfinished event is fired when the controls looses focus through clicking on another element or pressing the enter key (in direct diplay mode without confirmation buttons), one of the confirmation buttons was clicked or the space next to the topmostlayer was clicked.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
}
|
||||
],
|
||||
"dataTypes": [
|
||||
{
|
||||
"schema": "Schema/Types.Schema.json"
|
||||
}
|
||||
],
|
||||
"languages": {
|
||||
"en": "Lang/Language.en.json",
|
||||
"de": "Lang/Language.de.json"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 566 B |
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "de",
|
||||
"localizedText": {
|
||||
"Label_Text_Years": "Jahre",
|
||||
"Label_Text_Months": "Monate",
|
||||
"Label_Text_Days": "Tage",
|
||||
"Label_Text_Hours": "Stunden",
|
||||
"Label_Text_Minutes": "Minuten",
|
||||
"Label_Text_Seconds": "Sekunden",
|
||||
"Label_Text_Milliseconds": "Millisekunden",
|
||||
"Button_Text_Ok": "OK",
|
||||
"Button_Text_Cancel": "Abbrechen"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "en",
|
||||
"localizedText": {
|
||||
"Label_Text_Years": "Years",
|
||||
"Label_Text_Months": "Months",
|
||||
"Label_Text_Days": "Days",
|
||||
"Label_Text_Hours": "Hours",
|
||||
"Label_Text_Minutes": "Minutes",
|
||||
"Label_Text_Seconds": "Seconds",
|
||||
"Label_Text_Milliseconds": "Milliseconds",
|
||||
"Button_Text_Ok": "OK",
|
||||
"Button_Text_Cancel": "Cancel"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiTimespanPicker": {
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiTimespanPicker",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmiTimespanPicker": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanPicker"
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiTimespanPicker.ValueSymbol": {
|
||||
"allOf": [
|
||||
{
|
||||
"$ref": "tchmi:framework#/definitions/Symbol"
|
||||
},
|
||||
{
|
||||
"frameworkSymbolSubType": {
|
||||
"$ref": "tchmi:general#/definitions/String"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiTimespanPicker.TimeUnits": {
|
||||
"title": "TimeUnits",
|
||||
"type": "object",
|
||||
"propertiesMeta": [
|
||||
{
|
||||
"name": "years",
|
||||
"category": "General",
|
||||
"displayName": "Years",
|
||||
"displayPriority": 10,
|
||||
"description": "Defines whether the year should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "months",
|
||||
"category": "General",
|
||||
"displayName": "Months",
|
||||
"displayPriority": 15,
|
||||
"description": "Defines whether the month should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "days",
|
||||
"category": "General",
|
||||
"displayName": "Days",
|
||||
"displayPriority": 20,
|
||||
"description": "Defines whether the day should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "hours",
|
||||
"category": "General",
|
||||
"displayName": "Hours",
|
||||
"displayPriority": 25,
|
||||
"description": "Defines whether the hour should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "minutes",
|
||||
"category": "General",
|
||||
"displayName": "Minutes",
|
||||
"displayPriority": 30,
|
||||
"description": "Defines whether the minute should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "seconds",
|
||||
"category": "General",
|
||||
"displayName": "Seconds",
|
||||
"displayPriority": 35,
|
||||
"description": "Defines whether the second should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "milliseconds",
|
||||
"category": "General",
|
||||
"displayName": "Milliseconds",
|
||||
"displayPriority": 40,
|
||||
"description": "Defines whether the millisecond should be displayed.",
|
||||
"defaultValue": true,
|
||||
"defaultValueInternal": false
|
||||
}
|
||||
],
|
||||
"properties": {
|
||||
"years": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"months": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"days": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"hours": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"minutes": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"seconds": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"milliseconds": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false,
|
||||
"required": ["years", "months", "days", "hours", "minutes", "seconds", "milliseconds"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template,
|
||||
.tchmi-timespan-picker-template {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.tchmi-timespan-picker-template-overlay {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-first-block,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-second-block,
|
||||
.tchmi-timespan-picker-template-first-block,
|
||||
.tchmi-timespan-picker-template-second-block {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-label,
|
||||
.tchmi-timespan-picker-template-label {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area,
|
||||
.tchmi-timespan-picker-template-editable-area {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area
|
||||
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before:not(:empty),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area
|
||||
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after:not(:empty) {
|
||||
flex-basis: 35px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-millisecond-template,
|
||||
.tchmi-timespan-picker-millisecond-template {
|
||||
margin: 10px 5px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-action-button,
|
||||
.tchmi-timespan-picker-template-action-button {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
float: right;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/** Show in View styles **/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display .tchmi-timespan-picker-template-overlay {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker .TcHmi_Controls_Beckhoff_TcHmiTextblock,
|
||||
.tchmi-timespan-picker .tchmi-textblock,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTextblock
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTextblock-template-text-container,
|
||||
.tchmi-timespan-picker .tchmi-textblock .tchmi-textblock-template-text-container {
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -0,0 +1,318 @@
|
||||
// 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 TcHmiTimespanPicker 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: HTMLElement;
|
||||
/** Reference to the root dom element of the current control template as jquery object. */
|
||||
protected __elementTSTemplate: JQuery;
|
||||
/** Reference to the first timespan block as jquery object. */
|
||||
protected __elementTSFirstBlockTemplate: JQuery;
|
||||
/** Reference to the second timespan block as jquery object. */
|
||||
protected __elementTSSecondBlockTemplate: JQuery;
|
||||
/** Reference to the button template dom element of the current control as jquery object. */
|
||||
protected __elementButtonTemplate: HTMLElement;
|
||||
/** Reference to the button template dom element of the current control as jquery object. */
|
||||
protected __templates: {
|
||||
year: JQuery;
|
||||
month: JQuery;
|
||||
day: JQuery;
|
||||
hour: JQuery;
|
||||
minute: JQuery;
|
||||
second: JQuery;
|
||||
millisecond: JQuery;
|
||||
};
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-value"
|
||||
*/
|
||||
protected __value: string | undefined;
|
||||
/**
|
||||
* A maximum for the value in iso 8601 format
|
||||
*/
|
||||
protected __maxValue: string | undefined;
|
||||
/** Internal reference to the attribute 'data-tchmi-value-symbol' */
|
||||
protected __valueSymbol: TcHmi.Symbol<string> | undefined | null;
|
||||
protected __valueSymbolCurrentValue: string | undefined | null;
|
||||
protected __valueSymbolSchema: TcHmi.JsonSchema | undefined | null;
|
||||
protected __maxValueSymbol: string | undefined;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-direct-display"
|
||||
*/
|
||||
protected __directDisplay: boolean | undefined;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-show-confirmation-buttons"
|
||||
*/
|
||||
protected __showConfirmationButtons: boolean | undefined;
|
||||
/** Internal reference to the attribute "data-tchmi-time-units" */
|
||||
protected __timeUnits: TimeUnits | null | undefined;
|
||||
/**
|
||||
* ReadOnly state of the control.
|
||||
*/
|
||||
protected __isReadOnly: boolean | undefined;
|
||||
/** Regex to validate an ISO 8601 duration. See https://regexr.com/5d2q2 for tests. */
|
||||
protected __REGEX_ISO_8601: RegExp;
|
||||
/** Stores the controls as System.TcHmiControl[] */
|
||||
protected __baseControls: {
|
||||
cancelButton?: TcHmiButton;
|
||||
okButton?: TcHmiButton;
|
||||
spinboxes: {
|
||||
year?: TcHmiSpinboxInput;
|
||||
month?: TcHmiSpinboxInput;
|
||||
day?: TcHmiSpinboxInput;
|
||||
hour?: TcHmiSpinboxInput;
|
||||
minute?: TcHmiSpinboxInput;
|
||||
second?: TcHmiSpinboxInput;
|
||||
millisecond?: TcHmiSpinboxInput;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* Created a documentFragment with controls (textbox, button, textbox and a second button).
|
||||
* @param name The name of the region.
|
||||
* @returns The documentFragment with controls.
|
||||
*/
|
||||
private __addControls;
|
||||
/**
|
||||
* Convert milliseconds to iso 8601 string
|
||||
* @param milliSec Milliseconds
|
||||
*/
|
||||
protected __timespanObjectToIso(timespanObject: {
|
||||
years: number;
|
||||
months: number;
|
||||
days: number;
|
||||
hours: number;
|
||||
minutes: number;
|
||||
seconds: number;
|
||||
milliseconds: number;
|
||||
}): string;
|
||||
/**
|
||||
* updates the value of the control if the control is directly displayed in the view and the confirmation buttons are hidden.
|
||||
*/
|
||||
protected __updateValue(): void;
|
||||
/**
|
||||
* Convert iso 8601 string to milliseconds
|
||||
* @param t Iso 8601 string
|
||||
*/
|
||||
isoToTimespanObject(timespan: string): {
|
||||
years: number;
|
||||
months: number;
|
||||
days: number;
|
||||
hours: number;
|
||||
minutes: number;
|
||||
seconds: number;
|
||||
milliseconds: number;
|
||||
};
|
||||
/**
|
||||
* Convert timespan object to milliseconds
|
||||
*/
|
||||
convertToMilliseconds(obj: {
|
||||
years: number;
|
||||
months: number;
|
||||
days: number;
|
||||
hours: number;
|
||||
minutes: number;
|
||||
seconds: number;
|
||||
milliseconds: number;
|
||||
}): number;
|
||||
/**
|
||||
* Returns an event handler for the mousedown event.
|
||||
*/
|
||||
protected __onMousedown(event: MouseEvent): void;
|
||||
/**
|
||||
* Is called if focusout event has raised.
|
||||
*/
|
||||
private __onFocusOut;
|
||||
/**
|
||||
* Is called if keypress event has raised.
|
||||
*/
|
||||
private __onKeyPress;
|
||||
/**
|
||||
* Open the timespanPicker (in TopMostLayer).
|
||||
*/
|
||||
openTimespanPicker(): void;
|
||||
/**
|
||||
* Close the timespanPicker without changes (delete from TopMostLayer).
|
||||
*/
|
||||
closeTimespanPicker(): void;
|
||||
/**
|
||||
* Return the currently configured timespan object.
|
||||
*/
|
||||
protected __getTimespanObject(): {
|
||||
years: number;
|
||||
months: number;
|
||||
days: number;
|
||||
hours: number;
|
||||
minutes: number;
|
||||
seconds: number;
|
||||
milliseconds: number;
|
||||
};
|
||||
/**
|
||||
* Is called if onPressed event of buttons has raised.
|
||||
*/
|
||||
private __onPressed;
|
||||
/**
|
||||
* Is called if onUserInteractionFinished event of SpinboxInput has raised.
|
||||
*/
|
||||
private __onUserInteractionFinished;
|
||||
/**
|
||||
* Is called if onPropertyChanged event for property IsValid of SpinboxInput has raised.
|
||||
*/
|
||||
private __onIsValidChanged;
|
||||
private __setIsEnabledOfOkButton;
|
||||
/**
|
||||
* Sets the value of value
|
||||
* @param valueNew The new value for value
|
||||
*/
|
||||
setValue(valueNew: string | null): void;
|
||||
protected __setValue(valueNew: string | null, process?: boolean): void;
|
||||
/**
|
||||
* Gets the value of value
|
||||
*/
|
||||
getValue(): string | undefined;
|
||||
/**
|
||||
* Processes value
|
||||
*/
|
||||
protected __processValue(): void;
|
||||
/**
|
||||
* Sets the value of DirectDisplay
|
||||
* @param valueNew The new value for DirectDisplay
|
||||
*/
|
||||
setDirectDisplay(valueNew: boolean | null): void;
|
||||
/**
|
||||
* Gets the value of DirectDisplay
|
||||
*/
|
||||
getDirectDisplay(): boolean | undefined;
|
||||
/**
|
||||
* Process the value of DirectDisplay
|
||||
*/
|
||||
protected __processDirectDisplay(): void;
|
||||
/**
|
||||
* Sets the value of ShowConfirmationButtons
|
||||
* @param valueNew The new value for ShowConfirmationButtons
|
||||
*/
|
||||
setShowConfirmationButtons(valueNew: boolean | null): void;
|
||||
/**
|
||||
* Gets the value of ShowConfirmationButtons
|
||||
*/
|
||||
getShowConfirmationButtons(): boolean | undefined;
|
||||
/**
|
||||
* Process the value of ShowConfirmationButtons
|
||||
*/
|
||||
protected __processShowConfirmationButtons(): void;
|
||||
/**
|
||||
* Processes the current enabled state.
|
||||
*/
|
||||
__processIsEnabled(): void;
|
||||
/**
|
||||
* 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;
|
||||
setMaxValue(valueNew: string | null): void;
|
||||
/**
|
||||
* Sets the value of maxValue
|
||||
*/
|
||||
protected __setMaxValue(valueNew: string | null): void;
|
||||
/**
|
||||
* Gets the value of maxValue
|
||||
*/
|
||||
getMaxValue(): string | undefined;
|
||||
/**
|
||||
* Process formatMaximum
|
||||
*/
|
||||
protected __processMaxValue(): void;
|
||||
/**
|
||||
* Sets the value of the member variable 'timeUnits' if the new value is not equal to the current value
|
||||
* and calls the associated process function (processTimeUnits) after that.
|
||||
* @param valueNew The new value for timeUnits.
|
||||
*/
|
||||
setTimeUnits(valueNew: TimeUnits | null): void;
|
||||
/** The watch callback for the timeUnits object resolver. */
|
||||
protected __onResolverForTimeUnitsWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TimeUnits>): void;
|
||||
/** Returns the current value of the member variable timeUnits. */
|
||||
getTimeUnits(): TimeUnits | null | undefined;
|
||||
/** Processes the current value of timeUnits. */
|
||||
protected __processTimeUnits(): void;
|
||||
/**
|
||||
* @param valueNew
|
||||
*/
|
||||
setValueSymbol(valueNew: TcHmi.Symbol<string> | null): void;
|
||||
/**
|
||||
* Gets the valueSymbol
|
||||
*/
|
||||
getValueSymbol(): TcHmi.Symbol<string> | null | undefined;
|
||||
/**
|
||||
* Gets the valueSymbolCurrentValue
|
||||
*/
|
||||
getValueSymbolCurrentValue(): string | null | undefined;
|
||||
protected __destroyValueSymbolWatch: TcHmi.DestroyFunction | null;
|
||||
protected __onValueSymbolWatch(data: TcHmi.Symbol.IReadResultObject<string>): void;
|
||||
protected __processValueSymbol(): void;
|
||||
protected __processValueSymbolCurrentValue(): void;
|
||||
protected __processMaxSymbolValue(): void;
|
||||
getMaxValueSymbol(): string | undefined;
|
||||
protected __isMaxReached(): boolean;
|
||||
protected __reuseValue(): void;
|
||||
protected __setSpinboxesMax(): void;
|
||||
}
|
||||
export interface TimeUnits {
|
||||
years: boolean;
|
||||
months: boolean;
|
||||
days: boolean;
|
||||
hours: boolean;
|
||||
minutes: boolean;
|
||||
seconds: boolean;
|
||||
milliseconds: boolean;
|
||||
}
|
||||
export { TcHmiTimespanPicker as Control };
|
||||
declare const _TcHmiTimespanPicker: typeof TcHmiTimespanPicker;
|
||||
type tTcHmiTimespanPicker = TcHmiTimespanPicker;
|
||||
type tTimeUnits = TimeUnits;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiTimespanPicker: typeof _TcHmiTimespanPicker;
|
||||
type TcHmiTimespanPicker = tTcHmiTimespanPicker;
|
||||
namespace TcHmiTimespanPicker {
|
||||
type TimeUnits = tTimeUnits;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template tchmi-timespan-picker-template tchmi-box"></div>
|
||||
@@ -0,0 +1,40 @@
|
||||
/** Styles for the theme: Base-Dark */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker,
|
||||
.tchmi-timespan-picker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.tchmi-timespan-picker-template-overlay {
|
||||
--tchmi-overlay-background: var(--tchmi-background-color-1);
|
||||
--tchmi-background: var(--tchmi-background-color-1);
|
||||
--tchmi-color: var(--tchmi-foreground-color-1);
|
||||
}
|
||||
|
||||
.tchmi-system-topmostlayer-container .TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.tchmi-system-topmostlayer-container .tchmi-timespan-picker-template-overlay {
|
||||
box-shadow: var(--tchmi-popup-shadow);
|
||||
background: var(--tchmi-overlay-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-label,
|
||||
.tchmi-timespan-picker-template-label {
|
||||
color: var(--tchmi-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay .TcHmi_Controls_Beckhoff_TcHmiTextbox-template-border,
|
||||
.tchmi-timespan-picker-template-overlay .tchmi-textbox-template-border {
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
/** Show in View styles **/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display .tchmi-timespan-picker-template-overlay {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display.tchmi-timespan-picker {
|
||||
background: var(--tchmi-background);
|
||||
box-shadow: var(--tchmi-card-shadow);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
/** Styles for the theme: Base */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker,
|
||||
.tchmi-timespan-picker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.tchmi-timespan-picker-template-overlay {
|
||||
--tchmi-overlay-background: var(--tchmi-background-color-4);
|
||||
--tchmi-background: var(--tchmi-background-color-1);
|
||||
--tchmi-color: var(--tchmi-highlight-color-1);
|
||||
}
|
||||
|
||||
.tchmi-system-topmostlayer-container .TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.tchmi-system-topmostlayer-container .tchmi-timespan-picker-template-overlay {
|
||||
box-shadow: var(--tchmi-popup-shadow);
|
||||
background: var(--tchmi-overlay-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-label,
|
||||
.tchmi-timespan-picker-template-label {
|
||||
color: var(--tchmi-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay .TcHmi_Controls_Beckhoff_TcHmiTextbox-template-border,
|
||||
.tchmi-timespan-picker-template-overlay .tchmi-textbox-template-border {
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
/** Show in View styles **/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display .tchmi-timespan-picker-template-overlay {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display.tchmi-timespan-picker {
|
||||
background: var(--tchmi-background);
|
||||
box-shadow: var(--tchmi-card-shadow);
|
||||
}
|
||||
Reference in New Issue
Block a user