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,551 @@
{
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
"apiVersion": 1,
"name": "TcHmiTimespanInput",
"namespace": "TcHmi.Controls.Beckhoff",
"displayName": "Timespan Input",
"version": {
"full": "14.4.1.0",
"major": 14,
"minor": 4,
"build": 1,
"revision": 0
},
"visible": true,
"themeable": "Standard",
"base": "TcHmi.Controls.System.TcHmiControl",
"description": "An input control which only accepts ISO 8601 timespans.",
"defaultDesignerEvent": ".onValueChanged",
"properties": {
"containerControl": false,
"geometry": {
"width": 264,
"height": 26
}
},
"icons": [
{
"name": "Icons/16x16.png",
"width": 16,
"height": 16
}
],
"template": "Template.html",
"dependencyFiles": [
{
"name": "Style.css",
"type": "Stylesheet",
"description": ""
},
{
"name": "../dist/TcHmiTimespanInput/TcHmiTimespanInput.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-color",
"propertyName": "ValueColor",
"propertySetterName": "setValueColor",
"propertyGetterName": "getValueColor",
"displayName": "Value Color",
"visible": true,
"themeable": "Standard",
"displayPriority": 10,
"type": "tchmi:framework#/definitions/SolidColor",
"category": "Colors",
"description": "The color of the displayed value",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"allowSymbolExpressionsInObject": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-value",
"propertyName": "Value",
"propertySetterName": "setValue",
"propertyGetterName": "getValue",
"displayName": "Value",
"visible": true,
"themeable": "Standard",
"displayPriority": 10,
"type": "tchmi:general#/definitions/TimeSpan",
"category": "Common",
"description": "The timespan value defined as ISO timespan.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": "",
"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.TcHmiTimespanInput.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-value-horizontal-alignment",
"propertyName": "ValueHorizontalAlignment",
"propertySetterName": "setValueHorizontalAlignment",
"propertyGetterName": "getValueHorizontalAlignment",
"displayName": "Value Horizontal Alignment",
"visible": true,
"themeable": "Standard",
"displayPriority": 20,
"type": "tchmi:framework#/definitions/HorizontalAlignment",
"category": "Value",
"description": "The horizontal alignment of the displayed value",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-content-padding",
"propertyName": "ContentPadding",
"propertySetterName": "setContentPadding",
"propertyGetterName": "getContentPadding",
"displayName": "Content Padding",
"visible": true,
"themeable": "Standard",
"displayPriority": 55,
"type": "tchmi:framework#/definitions/Padding",
"category": "Value",
"description": "The distance of the value to the border.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"allowSymbolExpressionsInObject": true,
"defaultValue": {
"top": 3,
"right": 3,
"bottom": 3,
"left": 3
},
"defaultValueInternal": null
},
{
"name": "data-tchmi-value-font-family",
"propertyName": "ValueFontFamily",
"propertySetterName": "setValueFontFamily",
"propertyGetterName": "getValueFontFamily",
"displayName": "Value Font Family",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/FontFamily",
"category": "Value",
"description": "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-value-font-size",
"propertyName": "ValueFontSize",
"propertySetterName": "setValueFontSize",
"propertyGetterName": "getValueFontSize",
"displayName": "Value Font Size",
"visible": true,
"themeable": "Standard",
"displayPriority": 30,
"type": "tchmi:framework#/definitions/MeasurementValue",
"category": "Value",
"description": "The size of the font. Percent values are relative to the parent elements font size.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-value-font-size-unit",
"propertyName": "ValueFontSizeUnit",
"propertySetterName": "setValueFontSizeUnit",
"propertyGetterName": "getValueFontSizeUnit",
"refTo": "ValueFontSize",
"displayName": "Value Font Size Unit",
"visible": true,
"themeable": "Advanced",
"displayPriority": 30,
"type": "tchmi:framework#/definitions/MeasurementUnit",
"category": "Value",
"description": "Could be 'px' or for relative sizing '%'.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "px"
},
{
"name": "data-tchmi-value-font-style",
"propertyName": "ValueFontStyle",
"propertySetterName": "setValueFontStyle",
"propertyGetterName": "getValueFontStyle",
"displayName": "Value Font Style",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/FontStyle",
"category": "Value",
"description": "'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-value-font-weight",
"propertyName": "ValueFontWeight",
"propertySetterName": "setValueFontWeight",
"propertyGetterName": "getValueFontWeight",
"displayName": "Value Font Weight",
"visible": true,
"themeable": "Standard",
"displayPriority": 60,
"type": "tchmi:framework#/definitions/FontWeight",
"category": "Value",
"description": "'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-placeholder",
"propertyName": "Placeholder",
"propertySetterName": "setPlaceholder",
"propertyGetterName": "getPlaceholder",
"displayName": "Placeholder",
"visible": true,
"themeable": "Standard",
"displayPriority": 50,
"type": "tchmi:general#/definitions/String",
"category": "Value",
"description": "A placeholder text to display if the timespan input is empty.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "data-tchmi-auto-focus-out",
"propertyName": "AutoFocusOut",
"propertySetterName": "setAutoFocusOut",
"propertyGetterName": "getAutoFocusOut",
"displayName": "Auto Focus Out",
"visible": true,
"themeable": "Advanced",
"displayPriority": 45,
"type": "tchmi:general#/definitions/Boolean",
"category": "Common",
"description": "Whether the control should automatically lose focus when the user confirms or cancels his interaction via enter or escape.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": true,
"defaultValueInternal": false
},
{
"name": "data-tchmi-auto-select-text",
"propertyName": "AutoSelectText",
"propertySetterName": "setAutoSelectText",
"propertyGetterName": "getAutoSelectText",
"displayName": "Auto Select Text",
"visible": true,
"themeable": "Advanced",
"displayPriority": 50,
"type": "tchmi:general#/definitions/Boolean",
"category": "Common",
"description": "Whether a focusIn selects the whole text or not.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": false
},
{
"name": "data-tchmi-reset-to-last-valid-value",
"propertyName": "ResetToLastValidValue",
"propertySetterName": "setResetToLastValidValue",
"propertyGetterName": "getResetToLastValidValue",
"displayName": "Reset to Last Valid Value",
"visible": true,
"themeable": "Advanced",
"displayPriority": 45,
"type": "tchmi:general#/definitions/Boolean",
"category": "Common",
"description": "Whether the displayed text is reseted to the last valid value on focus out.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": true,
"defaultValueInternal": false
},
{
"name": "data-tchmi-input-processing-point",
"propertyName": "InputProcessingPoint",
"propertySetterName": "setInputProcessingPoint",
"propertyGetterName": "getInputProcessingPoint",
"displayName": "Input Processing Point",
"visible": true,
"themeable": "Advanced",
"displayPriority": 50,
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.InputProcessingPoint",
"category": "Common",
"description": "When to process the input made by the user. Either while the input is still happening (i.e. on every keystroke) or after the interaction has finished (i.e. the control loses focus).",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "InteractionFinished"
},
{
"name": "data-tchmi-button-Position",
"propertyName": "ButtonPosition",
"propertySetterName": "setButtonPosition",
"propertyGetterName": "getButtonPosition",
"displayName": "Button Position",
"visible": true,
"themeable": "Standard",
"displayPriority": 40,
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanInput.ButtonPosition",
"category": "Common",
"description": "Defines the position of the button",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "Right"
},
{
"name": "data-tchmi-direct-input-unit",
"propertyName": "DirectInputUnit",
"propertySetterName": "setDirectInputUnit",
"propertyGetterName": "getDirectInputUnit",
"displayName": "Direct Input Unit",
"visible": true,
"themeable": "Standard",
"displayPriority": 40,
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanInput.DirectInputUnit",
"category": "Common",
"description": "Defines the unit in which numeric input is possible in the textbox. If 'None' is selected only the ISO 8601 timespan format is accepted.",
"readOnly": false,
"bindable": true,
"defaultBindingMode": "OneWay",
"heritable": true,
"defaultValue": null,
"defaultValueInternal": "None"
},
{
"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
}
}
],
"attributeCategories": [
{
"name": "Value",
"displayPriority": 500,
"defaultCollapsed": true,
"description": "Attributes defining the value of the control."
}
],
"functions": [],
"events": [
{
"name": ".onFocusIn",
"displayName": ".onFocusIn",
"visible": true,
"displayPriority": 7,
"category": "Operator",
"description": "The focusin event is fired when an element is about to receive focus.",
"heritable": true,
"arguments": [
{
"type": "tchmi:framework#/definitions/DOMFocusEvent",
"description": "The FocusEvent object of the underlying focusin dom event."
}
]
},
{
"name": ".onFocusOut",
"displayName": ".onFocusOut",
"visible": true,
"displayPriority": 7,
"category": "Operator",
"description": "The focusout event is fired when an element is about to lose focus.",
"heritable": true,
"arguments": [
{
"type": "tchmi:framework#/definitions/DOMEvent",
"description": "The Event object of the underlying focusout dom event."
}
]
},
{
"name": ".onValueChanged",
"displayName": ".onValueChanged",
"visible": true,
"displayPriority": 10,
"category": "Control",
"description": "The valuechanged event is fired when the value was changed. This event could be fired multiples times while a user interaction.",
"heritable": true,
"arguments": [
{
"type": "tchmi:general#/definitions/TimeSpan",
"description": "The new value of the TimespanInput."
}
]
},
{
"name": ".onUserInteractionFinished",
"displayName": ".onUserInteractionFinished",
"visible": true,
"displayPriority": 5,
"category": "Operator",
"description": "The userinteractionfinished event is fired after leaving the timespan input.",
"heritable": true,
"arguments": []
},
{
"name": ".onUserInteractionCanceled",
"displayName": ".onUserInteractionCanceled",
"visible": true,
"displayPriority": 7,
"category": "Operator",
"description": "The userinteractioncanceled event is fired when the user presses the escape key, causing the value to reset to its previous value.",
"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

View File

@@ -0,0 +1,16 @@
{
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
"locale": "de",
"localizedText": {
"ValueFormat": "Ungültiger Wert. Der Wert muss dem ISO 8601-Standard entsprechen.",
"ValueFormatNumeric": "Ungültiger Wert. Der Wert muss eine positive Zahlt sein oder dem ISO 8601-Standard entsprechen.",
"ValueEmpty": "Es wurde kein Wert eingegeben.",
"Milliseconds": "ms",
"Seconds": "s",
"Minutes": "min",
"Hours": "h",
"Days": "d",
"Months": "mo",
"Years": "yr"
}
}

View File

@@ -0,0 +1,16 @@
{
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
"locale": "en",
"localizedText": {
"ValueFormat": "Wrong value format. The value must conform to the ISO 8601 standard.",
"ValueFormatNumeric": "Wrong value format. The value must be a positive number or conform to the ISO 8601 standard.",
"ValueEmpty": "No value entered.",
"Milliseconds": "ms",
"Seconds": "s",
"Minutes": "min",
"Hours": "h",
"Days": "d",
"Months": "mo",
"Years": "yr"
}
}

View File

@@ -0,0 +1,39 @@
{
"$schema": "http://json-schema.org/draft-04/schema",
"definitions": {
"TcHmi.Controls.Beckhoff.TcHmiTimespanInput": {
"$schema": "http://json-schema.org/draft-04/schema",
"type": "object",
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
"frameworkControlType": "TcHmiTimespanInput",
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
},
"TcHmiTimespanInput": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiTimespanInput"
},
"TcHmi.Controls.Beckhoff.TcHmiTimespanInput.ButtonPosition": {
"title": "DateTimeInputButtonPosition",
"type": "string",
"enum": ["Left", "Right"],
"default": "Right"
},
"TcHmi.Controls.Beckhoff.TcHmiTimespanInput.DirectInputUnit": {
"title": "DirectInputUnit",
"type": "string",
"enum": ["None", "Milliseconds", "Seconds", "Minutes", "Hours", "Days", "Months", "Years"],
"default": "None"
},
"TcHmi.Controls.Beckhoff.TcHmiTimespanInput.ValueSymbol": {
"allOf": [
{
"$ref": "tchmi:framework#/definitions/Symbol"
},
{
"frameworkSymbolSubType": {
"$ref": "tchmi:general#/definitions/String"
}
}
]
}
}
}

View File

@@ -0,0 +1,114 @@
/** Styles for all themes */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput {
/* Prevent overflow if the border radius is huge */
overflow: hidden;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: grid;
border-radius: inherit;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button {
grid-column: 2;
grid-row: 1;
width: 100%;
height: 100%;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input {
background: transparent;
grid-column: 1;
grid-row: 1;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
text-align: left;
white-space: pre;
overflow: hidden;
position: relative;
padding: 2px;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none;
cursor: text;
display: flex;
align-items: flex-start;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transition: padding 0.2s ease;
}
.left .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button {
grid-column: 1;
grid-row: 1;
}
.left .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input {
grid-column: 2;
grid-row: 1;
}
/* The main use for this control is interaction. So mark when this is not allowed. */
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 100;
cursor: not-allowed;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-invalid-notification {
position: absolute;
display: flex;
align-items: center;
height: 100%;
top: 0px;
right: 0px;
pointer-events: none;
padding: 2px;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input:not(:invalid)
+ .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-invalid-notification {
visibility: hidden;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template:not(.left)
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-invalid-notification {
right: 26px; /* same size as button (flex-basis: 26px;) */
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-unit {
position: absolute;
display: flex;
align-items: center;
width: fit-content;
height: 100%;
right: 0;
top: 0;
pointer-events: none;
padding: 0 3px;
font-weight: lighter;
}

View File

@@ -0,0 +1,524 @@
// 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 TcHmiTimespanInput extends TcHmi.Controls.System.TcHmiControl {
#private;
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
/** Reference to the root dom element of the current control template as html element. */
protected __elementTemplateRoot: HTMLElement;
/** Reference to the underlying html text textarea or input element as jquery object. */
protected __elementInput: HTMLInputElement;
/** Reference to the underlying button element as html element. */
protected __elementButton: HTMLElement;
/** Reference to the TimespanPicker*/
protected __timespanPicker: TcHmiTimespanPicker.Control;
protected __elementUnit: HTMLElement;
/** Defines whether the unit is currently being displayed */
protected __unitIsDisplayed: boolean;
/**
* Is set to true if the control is locked and to false if the control is unlocked.
* When the control is locked, calls to setValue are ignored.
*/
protected __locked: boolean;
/** Internal reference to the attribute "data-tchmi-value" */
protected __value: string | null | undefined;
/** Value at focusin time */
protected __oldValue: string | null | undefined;
/** Last input string which could be converted into a number */
protected __lastValidValue: string | undefined;
/** Last input string which could be converted into a number */
protected __lastInput: string | undefined;
/** Internal reference to the attribute "data-tchmi-text-horizontal-alignment */
protected __valueHorizontalAlignment: TcHmi.HorizontalAlignment | null | undefined;
/** Internal reference to the attribute "data-tchmi-content-padding" */
protected __contentPadding: TcHmi.FourSidedCss | null | undefined;
/** Internal reference to the attribute "data-tchmi-text-font-size" */
protected __valueFontSize: number | undefined;
/** Internal reference to the attribute "data-tchmi-text-font-size-unit" */
protected __valueFontSizeUnit: TcHmi.FontSizeUnit | undefined;
/** Internal reference to the attribute "data-tchmi-text-font-family" */
protected __valueFontFamily: TcHmi.FontFamily | null | undefined;
/** Internal reference to the attribute "data-tchmi-text-font-style" */
protected __valueFontStyle: TcHmi.FontStyle | undefined;
/** Internal reference to the attribute "data-tchmi-text-font-style" */
protected __valueFontWeight: TcHmi.FontWeight | undefined;
/** Internal reference to the attribute "data-tchmi-placeholder" */
protected __placeholder: string | null | undefined;
/** Internal reference to the attribute "data-tchmi-text-color" */
protected __valueColor: TcHmi.SolidColor | null | undefined;
/** Internal reference to the attribute "data-tchmi-auto-focus-out" */
protected __autoFocusOut: boolean | undefined;
/** Internal reference to the attribute "data-tchmi-auto-select-text" */
protected __autoSelectText: boolean | undefined;
/** Internal reference to the attribute "data-tchmi-reset-to-last-valid-value" */
protected __resetToLastValidValue: boolean | undefined;
protected __valueBuffer: TcHmi.Controls.Helpers.ValueBuffer<string | null> | undefined;
/** Internal reference to the attribute 'data-tchmi-button-position' */
protected __buttonPosition: 'Left' | 'Right' | undefined;
/** Internal reference to the attribute 'data-tchmi-direct-input-unit' */
protected __directInputUnit: InputUnit | null | undefined;
/**
* A maximum for the value in iso 8601 format
*/
protected __maxValue: string | undefined;
/**
* ReadOnly state of the control.
*/
protected __isReadOnly: boolean | undefined;
/** Interaction has started so we should raise event after it. */
protected __triggerUIFinishedOnBlur: boolean;
/** Localization */
protected __localizedInput: {
key: string;
parameters: any[];
};
/** Localization */
protected __localizedElements: Map<HTMLElement, {
key: string;
parameters?: any[];
}>;
protected __localizationReader: TcHmi.Locale.LocalizationReader | undefined;
/** Regex to validate an ISO 8601 duration. See https://regexr.com/5d2q2 for tests. */
private __REGEX_ISO_8601;
/** Regex to validate a positive number with optional decimal digits. A single "." is allowed. The "." can be the last or first character */
private __REGEX_POSITIVE_NUMBER;
/**
* 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;
/**
* 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.
*/
private __addLocalizedElement;
/**
* Remove a localized element.
* @param element The element to remove.
*/
private __removeLocalizedElement;
protected __validateInputForMaxValue(value: string, setMaxValue?: boolean): boolean;
/**
* Validates the value of the html input element. Input must conform to the ISO 8601 standard.
* Higlights the controls if value is out of range.
*/
protected __validateInput(): void;
/**
* Handle submit on keydown
*/
protected __onKeydown(event: KeyboardEvent): void;
/**
* Handle value change on "input" to support virtual keyboards on mobile devices
* which caches the value while editing (iOS for example)
* input is fired when the keys has changed text
*/
protected __onInput(event: Event): void;
/**
* Is raised if text is pasted into the underlying textarea element.
*/
protected __onPaste(event: Event): void;
/**
* Is raised if text is cut from the underlying textarea element.
*/
protected __onCut(event: Event): void;
/**
* Is raised if the underlying input element gets the focus.
*/
protected __onFocusIn(event: FocusEvent): void;
/**
* Is raised if the underlying input element has lost its focus.
*/
protected __onFocusOut(event: FocusEvent): void;
/**
* Performs the steps after a focusout event was received.
* @param event The focusout event.
*/
protected __performFocusOut(event: Event): void;
/**
* Convert a number value into a timespan value.
*/
protected __convertToTimespan(valueNew: number): string;
/**
* Is raised after successful interaction with a TcHmiKeyboard control with indirect input.
* @param event
*/
protected __onIndirectInputFinished(event: Event): void;
/**
* Is raised after canceled interaction with a TcHmiKeyboard control with indirect input.
* @param event
*/
protected __onIndirectInputCanceled(event: Event): void;
/**
* Is called when the button is clicked.
*/
protected __onClick(event: MouseEvent): void;
/**
* Is called if the value of the timespan picker control changed.
*/
protected __onValueChanged(_event: TcHmi.EventProvider.Event, data: string | null): void;
/**
* Is called if the input of the timespan picker control was canceled.
*/
protected __onCancel(_event: TcHmi.EventProvider.Event): void;
/**
* Is called if the input of the timespan picker control was canceled.
*/
protected __onConfirmed(_event: TcHmi.EventProvider.Event): void;
/**
* Is called valuesymbol of the timespan picker control changed.
*/
protected __onValueSymbolChanged(_event: TcHmi.EventProvider.Event, _data: string | null): void;
/**
* Change the localization of the input elements validity
* @param key The localization key.
* @param parameters Optional parameters to pass to tchmi_format_string.
*/
__setLocalizedInputValidity(key: string, ...parameters: any[]): void;
/**
* Sets the value of the member variable "value" if the new value is not equal to the current value
* or the current control instance is locked and calls the associated process function (processValue) after that.
* @param valueNew The new value for value.
*/
setValue(valueNew: string | null): void;
/**
* Sets the value of the member variable "value" regardless of lock.
* @param valueNew The new value for value
* @param writeToInput Whether to write the value back to the input element.
*/
protected __setValue(valueNew: string | null | undefined, writeToInput?: boolean): void;
/**
* Returns the current value of the member variable value.
* @returns the current value of the member variable value.
*/
getValue(): string | null | undefined;
/**
* Processes the current value of value and forwards it to the value attribute of the underlying input variable.
* The current value of value is only forwarded if it is no binding expression.
* @param writeToInput Whether to write the value back to the input element.
*/
protected __processValue(writeToInput?: boolean): 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;
/**
* @param valueNew
*/
setValueSymbol(valueNew: TcHmi.Symbol<string> | null): void;
/**
* Gets the valueSymbol
*/
getValueSymbol(): TcHmi.Symbol<string> | null | undefined;
protected __processValueSymbol(): void;
protected __processValueSymbolCurrentValue(): void;
/**
* Sets the text horizontal alignment and calls the associated process function (processValueHorizontalAlignment).
* @param valueNew The new value for textHorizontalAlignment.
*/
setValueHorizontalAlignment(valueNew: TcHmi.HorizontalAlignment | null): void;
/**
* Returns the current value of textHorizontalAlignment.
* @returns The current value of textHorizontalAlignment.
*/
getValueHorizontalAlignment(): TcHmi.HorizontalAlignment | null | undefined;
/**
* Processes the current textHorizontalAlignment attribute value.
*/
protected __processValueHorizontalAlignment(): void;
/**
* Sets the contentPadding value and calls the associated process function (processContentPadding) after it.
* @param valueNew The new value for the contentPadding attribute as object.
*/
setContentPadding(valueNew: TcHmi.FourSidedCss | null): void;
/**
* The watch callback for the contentPadding object resolver.
*/
protected __onResolverForContentPaddingWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.FourSidedCss>): void;
/**
* Returns the current contentPadding value.
* @returns The current value of the contentPadding member variable as json in string format.
*/
getContentPadding(): TcHmi.FourSidedCss | null | undefined;
/**
* Processes the current contentPadding attribute.
*/
protected __processContentPadding(): void;
/**
* Sets the font size and calls the associated process function (processValueFontSize).
* @param valueNew The new value for textFontSize.
*/
setValueFontSize(valueNew: number | null): void;
/**
* Returns the current value of textFontSize.
* @returns The current value of textFontSize.
*/
getValueFontSize(): number | undefined;
/**
* Processes the current textFontSize attribute value.
*/
protected __processValueFontSize(): void;
/**
* Sets the font size and calls the associated process function (processValueFontSizeUnit).
* @param valueNew The new value for textFontSize.
*/
setValueFontSizeUnit(valueNew: TcHmi.FontSizeUnit | null): void;
/**
* Returns the current value of textFontSizeUnit.
* @returns The current value of textFontSizeUnit.
*/
getValueFontSizeUnit(): TcHmi.FontSizeUnit | undefined;
/**
* Processes the current textFontSizeUnit attribute value.
*/
protected __processValueFontSizeUnit(): void;
/**
* Sets the font family and calls the associated process function (processValueFontFamily).
* @param valueNew The new value for textFontFamily.
*/
setValueFontFamily(valueNew: TcHmi.FontFamily | null): void;
/**
* Returns the current value of textFontFamily.
* @returns The current value of textFontFamily.
*/
getValueFontFamily(): string | null | undefined;
/**
* Processes the current textFontFamily attribute value.
*/
protected __processValueFontFamily(): void;
/**
* Sets the font style and calls the associated process function (processValueFontStyle).
* @param valueNew The new value for textFontStyle.
*/
setValueFontStyle(valueNew: TcHmi.FontStyle | null): void;
/**
* Returns the current value of textFontStyle.
* @returns The current value of textFontStyle.
*/
getValueFontStyle(): TcHmi.FontStyle | undefined;
/**
* Processes the current textFontStyle attribute value.
*/
protected __processValueFontStyle(): void;
/**
* Sets the font weight and calls the associated process function (processValueFontWeight).
* @param valueNew The new value for textFontWeight.
*/
setValueFontWeight(valueNew: TcHmi.FontWeight | null): void;
/**
* Returns the current value of textFontWeight.
* @returns The current value of textFontWeight.
*/
getValueFontWeight(): TcHmi.FontWeight | undefined;
/**
* Processes the current textFontWeight attribute value.
*/
protected __processValueFontWeight(): void;
/**
* Sets the placeholder value and calls the associated process function (processPlaceholder).
* @param valueNew The new value for placeholder.
*/
setPlaceholder(valueNew: string | null): void;
/**
* Returns the current value of placeholder.
* @returns The current value of placeholder.
*/
getPlaceholder(): string | null | undefined;
/**
* Processes the current placeholder attribute value.
*/
protected __processPlaceholder(): void;
/**
* Sets the text color and calls the associated process function (processValueColor).
* @param valueNew The new value for textColor.
*/
setValueColor(valueNew: TcHmi.SolidColor | null): void;
/**
* The watch callback for the textColor object resolver.
*/
protected __onResolverForValueColorWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.SolidColor>): void;
/**
* Returns the current value of textColor.
* @returns The current value of textColor.
*/
getValueColor(): TcHmi.SolidColor | null | undefined;
/**
* Processes the current textColor attribute value.
*/
protected __processValueColor(): void;
/**
* Sets the auto focus out attribute and calls the associated process function (processAutoFocusOut).
* @param valueNew The new value for autoFocusOut.
*/
setAutoFocusOut(valueNew: boolean | null): void;
/**
* Returns the current value of autoFocusOut.
* @returns The current value of autoFocusOut.
*/
getAutoFocusOut(): boolean | undefined;
/**
* Processes the current autoFocusOut attribute value.
*/
protected __processAutoFocusOut(): void;
/** Lock handling */
/**
* Lock the control. Calls to setValue will be ignored until control is unlocked.
*/
__lock(): void;
/**
* Unlocks the control.
*/
__unlock(): void;
/**
* Checks if the Control is deactivated and adjusts the visualization
*/
protected __processControlActivation(): void;
/**
* Processes the current isEnabled attribute value.
*/
__processIsEnabled(): void;
/**
* Processes the current AccessConfig attribute value.
*/
__processAccessConfig(): 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;
/**
* Sets the auto select text attribute and calls the associated process function (processAutoSelectText).
* @param valueNew The new value for autoSelectText.
*/
setAutoSelectText(valueNew: boolean | null): void;
/**
* Returns the current value of autoSelectText.
* @returns The current value of autoSelectText.
*/
getAutoSelectText(): boolean | undefined;
/**
* Sets the resetToLastValidValue attribute.
* @param valueNew The new value for resetToLastValidValue.
*/
setResetToLastValidValue(valueNew: boolean | null): void;
/**
* Returns the current value of resetToLastValidValue.
* @returns The current value of resetToLastValidValue.
*/
getResetToLastValidValue(): boolean | undefined;
/**
* Processes the current ResetToLastValidValue attribute value.
*/
__processResetToLastValidValue(): void;
/**
* Sets the inputProcessingPoint attribute.
* @param valueNew The new value for inputProcessingPoint.
*/
setInputProcessingPoint(valueNew: TcHmi.Controls.Helpers.InputProcessingPoint | keyof typeof TcHmi.Controls.Helpers.InputProcessingPoint | null): void;
/**
* Returns the current value of inputProcessingPoint.
* @returns The current value of inputProcessingPoint.
*/
getInputProcessingPoint(): TcHmi.Controls.Helpers.InputProcessingPoint | undefined;
/**
* Processes the current InputProcessingPoint attribute value.
*/
__processInputProcessingPoint(): void;
/**
* Sets the buttonPosition attribute.
* @param valueNew The new value for buttonPosition.
*/
setButtonPosition(valueNew: 'Left' | 'Right' | null): void;
/**
* Returns the current value of buttonPosition.
*/
getButtonPosition(): "Left" | "Right" | undefined;
/**
* Processes the current value of attribute buttonPosition.
*/
protected __processButtonPosition(): void;
/**
* Sets the directInputUnit attribute.
* @param valueNew The new value for directInputUnit.
*/
setDirectInputUnit(valueNew: InputUnit | null): void;
/**
* Returns the current value of directInputUnit.
*/
getDirectInputUnit(): InputUnit | null | undefined;
/**
* Processes the current value of attribute directInputUnit.
*/
protected __processDirectInputUnit(): 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: TcHmiTimespanPicker.TimeUnits | null): void;
/** Returns the current value of the member variable timeUnits. */
getTimeUnits(): void;
/**
* Displays the unit
*/
protected __showUnit(): void;
/**
* Removes the unit
*/
protected __removeUnit(): void;
/**
* Sets the focus to the html input element.
*/
focus(): void;
}
export type InputUnit = 'None' | 'Milliseconds' | 'Seconds' | 'Minutes' | 'Hours' | 'Days' | 'Months' | 'Years';
export { TcHmiTimespanInput as Control };
declare const _TcHmiTimespanInput: typeof TcHmiTimespanInput;
type tTcHmiTimespanInput = TcHmiTimespanInput;
type tInputUnit = InputUnit;
declare global {
namespace TcHmi.Controls.Beckhoff {
const TcHmiTimespanInput: typeof _TcHmiTimespanInput;
type TcHmiTimespanInput = tTcHmiTimespanInput;
namespace TcHmiTimespanInput {
type InputUnit = tInputUnit;
}
}
}

View File

@@ -0,0 +1,7 @@
<div class="TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template tchmi-box">
<input class="TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input tchmi-box" spellcheck="false" />
<label class="TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-invalid-notification tchmi-box">!</label>
<div id="{Id}_TcHmiTimespanPicker" data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiTimespanPicker"></div>
<div class="TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button tchmi-box"></div>
<div class="TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-unit tchmi-box"></div>
</div>

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="time-picker-bg-less" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon-status" transform="translate(5.000000, 5.000000)" fill="#ffffff">
<path d="M6.39997453,1.6 C6.44802978,1.6 6.50008963,1.58801822 6.54814488,1.5720425 C6.75237968,1.49216395 6.85249478,1.2565222 6.7724027,1.05283188 C6.69191016,0.849141561 6.45964313,0.745299437 6.25580879,0.829171922 C6.04756939,0.909050479 5.94745429,1.1406983 6.02754637,1.34438862 C6.09121957,1.50414573 6.23979038,1.6 6.39997453,1.6" id="Fill-1"></path>
<path d="M8.79979915,0.8 C8.81185016,0.8 8.82791817,0.8 8.84398618,0.795992162 C9.06492132,0.771945136 9.22198612,0.57556109 9.19748241,0.355130017 C9.17378209,0.134698944 8.97654726,-0.0216067259 8.75601382,0.00244030019 C8.53507868,0.0264873263 8.37801388,0.222871373 8.40251759,0.443302446 C8.4226026,0.647702168 8.59493202,0.8 8.79979915,0.8" id="Fill-3"></path>
<path d="M5.19986206,2 C5.26795682,2 5.33204601,1.98005871 5.3961352,1.94815264 C5.58880334,1.84046967 5.6568981,1.59718592 5.54834703,1.40574953 C5.44059708,1.21431314 5.19986206,1.14252449 5.00398947,1.25020746 C4.81132133,1.35789043 4.74322657,1.60117418 4.85137708,1.79261057 C4.92387798,1.92422309 5.05966695,2 5.19986206,2" id="Fill-5"></path>
<path d="M7.59950751,1.2 C7.63148946,1.2 7.66307163,1.19599667 7.69505358,1.18799001 C7.91093173,1.1359467 8.04285727,0.919766808 7.98728863,0.703586917 C7.93531797,0.491410358 7.71943982,0.359300425 7.50356167,0.411343732 C7.29128149,0.463387039 7.15935595,0.683570261 7.21132662,0.89574682 C7.25929954,1.07990006 7.41960905,1.2 7.59950751,1.2" id="Fill-7"></path>
<path d="M4.00001347,2.8 C4.08410047,2.8 4.16818746,2.77198504 4.24026203,2.71995725 C4.41644431,2.58788671 4.4524816,2.33575203 4.32034489,2.15965798 C4.18820818,1.98356392 3.93594719,1.94754468 3.7593645,2.07961523 C3.58358263,2.21168577 3.54754535,2.4598183 3.67968206,2.63991449 C3.7593645,2.74397007 3.87988919,2.8 4.00001347,2.8" id="Fill-9"></path>
<path d="M3.1988246,3.6 C3.29877582,3.6 3.4031249,3.5600509 3.47868802,3.4841476 C3.63900979,3.33234101 3.63900979,3.08066166 3.48708393,2.92086525 C3.33076021,2.76106883 3.07888313,2.76106883 2.91896117,2.91287542 C2.76303727,3.06867693 2.75903922,3.32035628 2.91496313,3.48015269 C2.99092606,3.5600509 3.09487533,3.6 3.1988246,3.6" id="Fill-11"></path>
<path d="M10,0 C9.96691402,0 9.93808196,0.0122887865 9.90688661,0.0189058254 C9.90357801,0.0189058254 9.90074207,0.0170152428 9.89696082,0.0170152428 C9.6355816,0.0170152428 9.42430401,0.228287841 9.42430401,0.489660877 L9.42430401,3.32553468 C9.42430401,3.58643507 9.6355816,3.79818031 9.89696082,3.79818031 C10.15834,3.79818031 10.3696176,3.58643507 10.3696176,3.32553468 L10.3696176,0.964197093 C15.1902444,1.16034503 19.0546864,5.13198629 19.0546864,10.0002363 C19.0546864,14.9927922 14.9926738,19.0547087 10,19.0547087 C5.00732618,19.0547087 0.945313608,14.9927922 0.945313608,10.0002363 C0.945313608,7.91492379 1.6708418,5.87971169 2.98860897,4.26940801 C3.15451151,4.06758833 3.12426147,3.76982158 2.92243702,3.6043956 C2.71966725,3.43896963 2.42236612,3.46874631 2.2574089,3.67103864 C2.21676041,3.72066643 2.18225646,3.77407539 2.14302595,3.82417582 C2.13499078,3.83079286 2.12459233,3.83315609 2.11702982,3.84024578 C2.07212743,3.88561976 2.03762348,3.93808342 2.0144633,3.99527354 C0.717493028,5.71995746 0,7.83268345 0,10.0002363 C0,15.5141203 4.48598573,20 10,20 C15.5140143,20 20,15.5141203 20,10.0002363 C20,4.48587971 15.5140143,0 10,0" id="Fill-13"></path>
<path d="M2.90318539,4.57504985 C2.73948566,4.77532009 2.77432555,5.06624383 2.98097856,5.22488746 L9.59339779,10.3000961 C9.67930435,10.3662362 9.78430127,10.4 9.88977544,10.4 C9.96470505,10.4 10.0396347,10.3833494 10.1093144,10.348198 L14.5425705,8.12533708 C14.7764272,8.00785754 14.8675836,7.72895926 14.7463599,7.50232549 C14.6256135,7.27522922 14.338781,7.18550075 14.1034925,7.30390533 L9.94418293,9.38939844 L3.57373386,4.49965943 C3.36708085,4.34147832 3.06688513,4.37524212 2.90318539,4.57504985" id="Fill-16"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="time-picker-bg-less" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon-status" transform="translate(5.000000, 5.000000)" fill="#ffffff">
<path d="M6.39997453,1.6 C6.44802978,1.6 6.50008963,1.58801822 6.54814488,1.5720425 C6.75237968,1.49216395 6.85249478,1.2565222 6.7724027,1.05283188 C6.69191016,0.849141561 6.45964313,0.745299437 6.25580879,0.829171922 C6.04756939,0.909050479 5.94745429,1.1406983 6.02754637,1.34438862 C6.09121957,1.50414573 6.23979038,1.6 6.39997453,1.6" id="Fill-1"></path>
<path d="M8.79979915,0.8 C8.81185016,0.8 8.82791817,0.8 8.84398618,0.795992162 C9.06492132,0.771945136 9.22198612,0.57556109 9.19748241,0.355130017 C9.17378209,0.134698944 8.97654726,-0.0216067259 8.75601382,0.00244030019 C8.53507868,0.0264873263 8.37801388,0.222871373 8.40251759,0.443302446 C8.4226026,0.647702168 8.59493202,0.8 8.79979915,0.8" id="Fill-3"></path>
<path d="M5.19986206,2 C5.26795682,2 5.33204601,1.98005871 5.3961352,1.94815264 C5.58880334,1.84046967 5.6568981,1.59718592 5.54834703,1.40574953 C5.44059708,1.21431314 5.19986206,1.14252449 5.00398947,1.25020746 C4.81132133,1.35789043 4.74322657,1.60117418 4.85137708,1.79261057 C4.92387798,1.92422309 5.05966695,2 5.19986206,2" id="Fill-5"></path>
<path d="M7.59950751,1.2 C7.63148946,1.2 7.66307163,1.19599667 7.69505358,1.18799001 C7.91093173,1.1359467 8.04285727,0.919766808 7.98728863,0.703586917 C7.93531797,0.491410358 7.71943982,0.359300425 7.50356167,0.411343732 C7.29128149,0.463387039 7.15935595,0.683570261 7.21132662,0.89574682 C7.25929954,1.07990006 7.41960905,1.2 7.59950751,1.2" id="Fill-7"></path>
<path d="M4.00001347,2.8 C4.08410047,2.8 4.16818746,2.77198504 4.24026203,2.71995725 C4.41644431,2.58788671 4.4524816,2.33575203 4.32034489,2.15965798 C4.18820818,1.98356392 3.93594719,1.94754468 3.7593645,2.07961523 C3.58358263,2.21168577 3.54754535,2.4598183 3.67968206,2.63991449 C3.7593645,2.74397007 3.87988919,2.8 4.00001347,2.8" id="Fill-9"></path>
<path d="M3.1988246,3.6 C3.29877582,3.6 3.4031249,3.5600509 3.47868802,3.4841476 C3.63900979,3.33234101 3.63900979,3.08066166 3.48708393,2.92086525 C3.33076021,2.76106883 3.07888313,2.76106883 2.91896117,2.91287542 C2.76303727,3.06867693 2.75903922,3.32035628 2.91496313,3.48015269 C2.99092606,3.5600509 3.09487533,3.6 3.1988246,3.6" id="Fill-11"></path>
<path d="M10,0 C9.96691402,0 9.93808196,0.0122887865 9.90688661,0.0189058254 C9.90357801,0.0189058254 9.90074207,0.0170152428 9.89696082,0.0170152428 C9.6355816,0.0170152428 9.42430401,0.228287841 9.42430401,0.489660877 L9.42430401,3.32553468 C9.42430401,3.58643507 9.6355816,3.79818031 9.89696082,3.79818031 C10.15834,3.79818031 10.3696176,3.58643507 10.3696176,3.32553468 L10.3696176,0.964197093 C15.1902444,1.16034503 19.0546864,5.13198629 19.0546864,10.0002363 C19.0546864,14.9927922 14.9926738,19.0547087 10,19.0547087 C5.00732618,19.0547087 0.945313608,14.9927922 0.945313608,10.0002363 C0.945313608,7.91492379 1.6708418,5.87971169 2.98860897,4.26940801 C3.15451151,4.06758833 3.12426147,3.76982158 2.92243702,3.6043956 C2.71966725,3.43896963 2.42236612,3.46874631 2.2574089,3.67103864 C2.21676041,3.72066643 2.18225646,3.77407539 2.14302595,3.82417582 C2.13499078,3.83079286 2.12459233,3.83315609 2.11702982,3.84024578 C2.07212743,3.88561976 2.03762348,3.93808342 2.0144633,3.99527354 C0.717493028,5.71995746 0,7.83268345 0,10.0002363 C0,15.5141203 4.48598573,20 10,20 C15.5140143,20 20,15.5141203 20,10.0002363 C20,4.48587971 15.5140143,0 10,0" id="Fill-13"></path>
<path d="M2.90318539,4.57504985 C2.73948566,4.77532009 2.77432555,5.06624383 2.98097856,5.22488746 L9.59339779,10.3000961 C9.67930435,10.3662362 9.78430127,10.4 9.88977544,10.4 C9.96470505,10.4 10.0396347,10.3833494 10.1093144,10.348198 L14.5425705,8.12533708 C14.7764272,8.00785754 14.8675836,7.72895926 14.7463599,7.50232549 C14.6256135,7.27522922 14.338781,7.18550075 14.1034925,7.30390533 L9.94418293,9.38939844 L3.57373386,4.49965943 C3.36708085,4.34147832 3.06688513,4.37524212 2.90318539,4.57504985" id="Fill-16"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,68 @@
/** Styles for the theme: Base-Dark */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput {
--tchmi-background: var(--tchmi-background-color-4);
--tchmi-background-invalid: var(--tchmi-invalid-color);
--tchmi-color: var(--tchmi-foreground-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
--tchmi-error-color: var(--tchmi-error-color);
--tchmi-unit-color: var(--tchmi-foreground-color-4);
background-color: var(--tchmi-background);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template {
grid-template-columns: auto 26px;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template.left {
grid-template-columns: 26px auto;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input {
-webkit-appearance: none; /* Important to have visible box-shadow on input elements in iOS/Safari. */
appearance: none;
color: var(--tchmi-color);
border: 1px solid var(--tchmi-border-color);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button {
font-size: var(--tchmi-button-font-size);
background: url(Images/timespanpicker_normal.svg), var(--tchmi-highlight-button-background);
background-repeat: no-repeat;
background-position: center;
color: var(--tchmi-highlight-button-text-color);
border: var(--tchmi-highlight-button-border);
box-shadow: var(--tchmi-highlight-button-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button:active {
background: url(Images/timespanpicker_pressed.svg), var(--tchmi-highlight-button-background-pressed);
background-repeat: no-repeat;
background-position: center;
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_TcHmiTimespanInput-template-input:is(:focus, .tchmi-focus, .tchmi-keyboard-user-input) {
background: rgba(76, 99, 116, 0.05);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input:invalid {
background: var(--tchmi-background-invalid);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-invalid-notification {
color: var(--tchmi-error-color);
font-weight: bold;
font-size: 15px;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput.read-only {
background: var(--tchmi-read-only-color);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-unit {
color: var(--tchmi-unit-color);
}

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="time-picker-bg-less" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon-status" transform="translate(5.000000, 5.000000)" fill="#ffffff">
<path d="M6.39997453,1.6 C6.44802978,1.6 6.50008963,1.58801822 6.54814488,1.5720425 C6.75237968,1.49216395 6.85249478,1.2565222 6.7724027,1.05283188 C6.69191016,0.849141561 6.45964313,0.745299437 6.25580879,0.829171922 C6.04756939,0.909050479 5.94745429,1.1406983 6.02754637,1.34438862 C6.09121957,1.50414573 6.23979038,1.6 6.39997453,1.6" id="Fill-1"></path>
<path d="M8.79979915,0.8 C8.81185016,0.8 8.82791817,0.8 8.84398618,0.795992162 C9.06492132,0.771945136 9.22198612,0.57556109 9.19748241,0.355130017 C9.17378209,0.134698944 8.97654726,-0.0216067259 8.75601382,0.00244030019 C8.53507868,0.0264873263 8.37801388,0.222871373 8.40251759,0.443302446 C8.4226026,0.647702168 8.59493202,0.8 8.79979915,0.8" id="Fill-3"></path>
<path d="M5.19986206,2 C5.26795682,2 5.33204601,1.98005871 5.3961352,1.94815264 C5.58880334,1.84046967 5.6568981,1.59718592 5.54834703,1.40574953 C5.44059708,1.21431314 5.19986206,1.14252449 5.00398947,1.25020746 C4.81132133,1.35789043 4.74322657,1.60117418 4.85137708,1.79261057 C4.92387798,1.92422309 5.05966695,2 5.19986206,2" id="Fill-5"></path>
<path d="M7.59950751,1.2 C7.63148946,1.2 7.66307163,1.19599667 7.69505358,1.18799001 C7.91093173,1.1359467 8.04285727,0.919766808 7.98728863,0.703586917 C7.93531797,0.491410358 7.71943982,0.359300425 7.50356167,0.411343732 C7.29128149,0.463387039 7.15935595,0.683570261 7.21132662,0.89574682 C7.25929954,1.07990006 7.41960905,1.2 7.59950751,1.2" id="Fill-7"></path>
<path d="M4.00001347,2.8 C4.08410047,2.8 4.16818746,2.77198504 4.24026203,2.71995725 C4.41644431,2.58788671 4.4524816,2.33575203 4.32034489,2.15965798 C4.18820818,1.98356392 3.93594719,1.94754468 3.7593645,2.07961523 C3.58358263,2.21168577 3.54754535,2.4598183 3.67968206,2.63991449 C3.7593645,2.74397007 3.87988919,2.8 4.00001347,2.8" id="Fill-9"></path>
<path d="M3.1988246,3.6 C3.29877582,3.6 3.4031249,3.5600509 3.47868802,3.4841476 C3.63900979,3.33234101 3.63900979,3.08066166 3.48708393,2.92086525 C3.33076021,2.76106883 3.07888313,2.76106883 2.91896117,2.91287542 C2.76303727,3.06867693 2.75903922,3.32035628 2.91496313,3.48015269 C2.99092606,3.5600509 3.09487533,3.6 3.1988246,3.6" id="Fill-11"></path>
<path d="M10,0 C9.96691402,0 9.93808196,0.0122887865 9.90688661,0.0189058254 C9.90357801,0.0189058254 9.90074207,0.0170152428 9.89696082,0.0170152428 C9.6355816,0.0170152428 9.42430401,0.228287841 9.42430401,0.489660877 L9.42430401,3.32553468 C9.42430401,3.58643507 9.6355816,3.79818031 9.89696082,3.79818031 C10.15834,3.79818031 10.3696176,3.58643507 10.3696176,3.32553468 L10.3696176,0.964197093 C15.1902444,1.16034503 19.0546864,5.13198629 19.0546864,10.0002363 C19.0546864,14.9927922 14.9926738,19.0547087 10,19.0547087 C5.00732618,19.0547087 0.945313608,14.9927922 0.945313608,10.0002363 C0.945313608,7.91492379 1.6708418,5.87971169 2.98860897,4.26940801 C3.15451151,4.06758833 3.12426147,3.76982158 2.92243702,3.6043956 C2.71966725,3.43896963 2.42236612,3.46874631 2.2574089,3.67103864 C2.21676041,3.72066643 2.18225646,3.77407539 2.14302595,3.82417582 C2.13499078,3.83079286 2.12459233,3.83315609 2.11702982,3.84024578 C2.07212743,3.88561976 2.03762348,3.93808342 2.0144633,3.99527354 C0.717493028,5.71995746 0,7.83268345 0,10.0002363 C0,15.5141203 4.48598573,20 10,20 C15.5140143,20 20,15.5141203 20,10.0002363 C20,4.48587971 15.5140143,0 10,0" id="Fill-13"></path>
<path d="M2.90318539,4.57504985 C2.73948566,4.77532009 2.77432555,5.06624383 2.98097856,5.22488746 L9.59339779,10.3000961 C9.67930435,10.3662362 9.78430127,10.4 9.88977544,10.4 C9.96470505,10.4 10.0396347,10.3833494 10.1093144,10.348198 L14.5425705,8.12533708 C14.7764272,8.00785754 14.8675836,7.72895926 14.7463599,7.50232549 C14.6256135,7.27522922 14.338781,7.18550075 14.1034925,7.30390533 L9.94418293,9.38939844 L3.57373386,4.49965943 C3.36708085,4.34147832 3.06688513,4.37524212 2.90318539,4.57504985" id="Fill-16"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="time-picker-bg-less" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon-status" transform="translate(5.000000, 5.000000)" fill="#ffffff">
<path d="M6.39997453,1.6 C6.44802978,1.6 6.50008963,1.58801822 6.54814488,1.5720425 C6.75237968,1.49216395 6.85249478,1.2565222 6.7724027,1.05283188 C6.69191016,0.849141561 6.45964313,0.745299437 6.25580879,0.829171922 C6.04756939,0.909050479 5.94745429,1.1406983 6.02754637,1.34438862 C6.09121957,1.50414573 6.23979038,1.6 6.39997453,1.6" id="Fill-1"></path>
<path d="M8.79979915,0.8 C8.81185016,0.8 8.82791817,0.8 8.84398618,0.795992162 C9.06492132,0.771945136 9.22198612,0.57556109 9.19748241,0.355130017 C9.17378209,0.134698944 8.97654726,-0.0216067259 8.75601382,0.00244030019 C8.53507868,0.0264873263 8.37801388,0.222871373 8.40251759,0.443302446 C8.4226026,0.647702168 8.59493202,0.8 8.79979915,0.8" id="Fill-3"></path>
<path d="M5.19986206,2 C5.26795682,2 5.33204601,1.98005871 5.3961352,1.94815264 C5.58880334,1.84046967 5.6568981,1.59718592 5.54834703,1.40574953 C5.44059708,1.21431314 5.19986206,1.14252449 5.00398947,1.25020746 C4.81132133,1.35789043 4.74322657,1.60117418 4.85137708,1.79261057 C4.92387798,1.92422309 5.05966695,2 5.19986206,2" id="Fill-5"></path>
<path d="M7.59950751,1.2 C7.63148946,1.2 7.66307163,1.19599667 7.69505358,1.18799001 C7.91093173,1.1359467 8.04285727,0.919766808 7.98728863,0.703586917 C7.93531797,0.491410358 7.71943982,0.359300425 7.50356167,0.411343732 C7.29128149,0.463387039 7.15935595,0.683570261 7.21132662,0.89574682 C7.25929954,1.07990006 7.41960905,1.2 7.59950751,1.2" id="Fill-7"></path>
<path d="M4.00001347,2.8 C4.08410047,2.8 4.16818746,2.77198504 4.24026203,2.71995725 C4.41644431,2.58788671 4.4524816,2.33575203 4.32034489,2.15965798 C4.18820818,1.98356392 3.93594719,1.94754468 3.7593645,2.07961523 C3.58358263,2.21168577 3.54754535,2.4598183 3.67968206,2.63991449 C3.7593645,2.74397007 3.87988919,2.8 4.00001347,2.8" id="Fill-9"></path>
<path d="M3.1988246,3.6 C3.29877582,3.6 3.4031249,3.5600509 3.47868802,3.4841476 C3.63900979,3.33234101 3.63900979,3.08066166 3.48708393,2.92086525 C3.33076021,2.76106883 3.07888313,2.76106883 2.91896117,2.91287542 C2.76303727,3.06867693 2.75903922,3.32035628 2.91496313,3.48015269 C2.99092606,3.5600509 3.09487533,3.6 3.1988246,3.6" id="Fill-11"></path>
<path d="M10,0 C9.96691402,0 9.93808196,0.0122887865 9.90688661,0.0189058254 C9.90357801,0.0189058254 9.90074207,0.0170152428 9.89696082,0.0170152428 C9.6355816,0.0170152428 9.42430401,0.228287841 9.42430401,0.489660877 L9.42430401,3.32553468 C9.42430401,3.58643507 9.6355816,3.79818031 9.89696082,3.79818031 C10.15834,3.79818031 10.3696176,3.58643507 10.3696176,3.32553468 L10.3696176,0.964197093 C15.1902444,1.16034503 19.0546864,5.13198629 19.0546864,10.0002363 C19.0546864,14.9927922 14.9926738,19.0547087 10,19.0547087 C5.00732618,19.0547087 0.945313608,14.9927922 0.945313608,10.0002363 C0.945313608,7.91492379 1.6708418,5.87971169 2.98860897,4.26940801 C3.15451151,4.06758833 3.12426147,3.76982158 2.92243702,3.6043956 C2.71966725,3.43896963 2.42236612,3.46874631 2.2574089,3.67103864 C2.21676041,3.72066643 2.18225646,3.77407539 2.14302595,3.82417582 C2.13499078,3.83079286 2.12459233,3.83315609 2.11702982,3.84024578 C2.07212743,3.88561976 2.03762348,3.93808342 2.0144633,3.99527354 C0.717493028,5.71995746 0,7.83268345 0,10.0002363 C0,15.5141203 4.48598573,20 10,20 C15.5140143,20 20,15.5141203 20,10.0002363 C20,4.48587971 15.5140143,0 10,0" id="Fill-13"></path>
<path d="M2.90318539,4.57504985 C2.73948566,4.77532009 2.77432555,5.06624383 2.98097856,5.22488746 L9.59339779,10.3000961 C9.67930435,10.3662362 9.78430127,10.4 9.88977544,10.4 C9.96470505,10.4 10.0396347,10.3833494 10.1093144,10.348198 L14.5425705,8.12533708 C14.7764272,8.00785754 14.8675836,7.72895926 14.7463599,7.50232549 C14.6256135,7.27522922 14.338781,7.18550075 14.1034925,7.30390533 L9.94418293,9.38939844 L3.57373386,4.49965943 C3.36708085,4.34147832 3.06688513,4.37524212 2.90318539,4.57504985" id="Fill-16"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,67 @@
/** Styles for the theme: Base */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput {
--tchmi-background: var(--tchmi-background-color-4);
--tchmi-background-invalid: var(--tchmi-invalid-color);
--tchmi-color: var(--tchmi-foreground-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
--tchmi-unit-color: var(--tchmi-foreground-color-5);
background-color: var(--tchmi-background);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template {
grid-template-columns: auto 26px;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template.left {
grid-template-columns: 26px auto;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input {
-webkit-appearance: none; /* Important to have visible box-shadow on input elements in iOS/Safari. */
appearance: none;
color: var(--tchmi-color);
border: 1px solid var(--tchmi-border-color);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button {
font-size: var(--tchmi-button-font-size);
background: url(Images/timespanpicker_normal.svg), var(--tchmi-highlight-button-background);
background-repeat: no-repeat;
background-position: center;
color: var(--tchmi-highlight-button-text-color);
border: var(--tchmi-highlight-button-border);
box-shadow: var(--tchmi-highlight-button-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput .TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-button:active {
background: url(Images/timespanpicker_pressed.svg), var(--tchmi-highlight-button-background-pressed);
background-repeat: no-repeat;
background-position: center;
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_TcHmiTimespanInput-template-input:is(:focus, .tchmi-focus, .tchmi-keyboard-user-input) {
background: rgba(76, 99, 116, 0.05);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input:invalid {
background: var(--tchmi-background-invalid);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-invalid-notification {
color: var(--tchmi-error-color);
font-weight: bold;
font-size: 15px;
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput.read-only {
background: var(--tchmi-read-only-color);
}
.TcHmi_Controls_Beckhoff_TcHmiTimespanInput-template-input-unit {
color: var(--tchmi-unit-color);
}