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,274 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiDateTimePicker",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "Date Time 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 Date Selection.",
|
||||
"defaultDesignerEvent": ".onValueChanged",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 630,
|
||||
"height": 372
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiDateTimePicker/TcHmiDateTimePicker.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/DateTime",
|
||||
"category": "Common",
|
||||
"themeable": "Advanced",
|
||||
"description": "The date and time value defined as ISO time string.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-min-value",
|
||||
"propertyName": "MinValue",
|
||||
"propertySetterName": "setMinValue",
|
||||
"propertyGetterName": "getMinValue",
|
||||
"displayName": "Min Value",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/DateTime",
|
||||
"category": "Common",
|
||||
"themeable": "Advanced",
|
||||
"description": "The end date and time defined as ISO time string.",
|
||||
"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/DateTime",
|
||||
"category": "Common",
|
||||
"themeable": "Advanced",
|
||||
"description": "The end date and time defined as ISO time string.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": 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. Remember you can add a background image to interact with it more easily.",
|
||||
"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-ignore-invalid-values",
|
||||
"propertyName": "IgnoreInvalidValues",
|
||||
"propertySetterName": "setIgnoreInvalidValues",
|
||||
"propertyGetterName": "getIgnoreInvalidValues",
|
||||
"displayName": "Ignore Invalid Values",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 30,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Common",
|
||||
"description": "Whether an invalid value should be displayed or not. If not, invalid values are discarded.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"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
|
||||
}
|
||||
],
|
||||
"functions": [
|
||||
{
|
||||
"name": "openDateTimePicker",
|
||||
"displayName": "openDateTimePicker",
|
||||
"visible": true,
|
||||
"description": "Open the DateTimePicker and added to TopMostLayer.",
|
||||
"category": "Common",
|
||||
"params": [],
|
||||
"type": null,
|
||||
"heritable": true
|
||||
},
|
||||
{
|
||||
"name": "closeDateTimePicker",
|
||||
"displayName": "closeDateTimePicker",
|
||||
"visible": true,
|
||||
"description": "Close the DateTimePicker 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": []
|
||||
},
|
||||
{
|
||||
"name": ".onCancel",
|
||||
"displayName": ".onCancel",
|
||||
"visible": true,
|
||||
"displayPriority": 20,
|
||||
"category": "Control",
|
||||
"description": "The cancel event is fired if the DateTimePicker 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: 253 B |
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "de",
|
||||
"localizedText": {
|
||||
"Label_Text_Time": "Uhrzeit",
|
||||
"Button_Text_Ok": "OK",
|
||||
"Button_Text_Cancel": "Abbrechen",
|
||||
"Date_Format_Browser_Timezone": "{0} ({1} Browser-Zeitzone)",
|
||||
"Date_Format_Timezone": "{0} ({1} {2})",
|
||||
"Tooltip_LessThanMin_Text": "Der aktuelle Zeitpunkt liegt vor dem Startzeitpunkt: {0}",
|
||||
"Tooltip_GreaterThanMax_Text": "Der aktuelle Zeitpunkt liegt nach dem Endzeitpunkt: {0}"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "en",
|
||||
"localizedText": {
|
||||
"Label_Text_Time": "Time",
|
||||
"Button_Text_Ok": "OK",
|
||||
"Button_Text_Cancel": "Cancel",
|
||||
"Date_Format_Browser_Timezone": "{0} ({1} Browser timezone)",
|
||||
"Date_Format_Timezone": "{0} ({1} {2})",
|
||||
"Tooltip_LessThanMin_Text": "The currently selected time is before the start time: {0}",
|
||||
"Tooltip_GreaterThanMax_Text": "The currently selected time is after the end time: {0}"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiDateTimePicker": {
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiDateTimePicker",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmiDateTimePicker": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiDateTimePicker"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template,
|
||||
.tchmi-date-time-picker-template {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
|
||||
.tchmi-date-time-picker-template-overlay {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-selected-area-template,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-and-button-area-template,
|
||||
.tchmi-date-time-picker-selected-area-template,
|
||||
.tchmi-date-time-picker-calendar-template,
|
||||
.tchmi-date-time-picker-time-and-button-area-template {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-selected-area-template,
|
||||
.tchmi-date-time-picker-selected-area-template {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
min-width: 245px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-choice-area-template,
|
||||
.tchmi-date-time-picker-choice-area-template {
|
||||
position: relative;
|
||||
display: flex;
|
||||
float: left;
|
||||
clear: both;
|
||||
height: 300px;
|
||||
min-width: 245px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template,
|
||||
.tchmi-date-time-picker-calendar-template {
|
||||
text-align: center;
|
||||
clear: both;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-and-button-area-template,
|
||||
.tchmi-date-time-picker-time-and-button-area-template {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-rows: 150px auto 40px;
|
||||
flex-basis: 240px;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-button-area-template,
|
||||
.tchmi-date-time-picker-button-area-template {
|
||||
position: relative;
|
||||
grid-row: 3;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-button-template,
|
||||
.tchmi-date-time-picker-button-template {
|
||||
display: grid;
|
||||
grid-template-columns: auto 120px 120px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-action-button,
|
||||
.tchmi-date-time-picker-template-action-button {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-label,
|
||||
.tchmi-date-time-picker-template-label {
|
||||
position: relative;
|
||||
width: 20%;
|
||||
height: 30px;
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-value,
|
||||
.tchmi-date-time-picker-template-value {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-parent-date-template,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-parent-year-template,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-parent-time-template,
|
||||
.tchmi-date-time-picker-parent-date-template,
|
||||
.tchmi-date-time-picker-parent-year-template,
|
||||
.tchmi-date-time-picker-parent-time-template {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* calendar style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header,
|
||||
.tchmi-date-time-picker-calendar-template-header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header ul,
|
||||
.tchmi-date-time-picker-calendar-template-header ul {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header-month,
|
||||
.tchmi-date-time-picker-calendar-template-header-month {
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header-year,
|
||||
.tchmi-date-time-picker-calendar-template-header-year {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header ul li,
|
||||
.tchmi-date-time-picker-calendar-template-header ul li {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-prev,
|
||||
.tchmi-date-time-picker-calendar-template-prev {
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-next,
|
||||
.tchmi-date-time-picker-calendar-template-next {
|
||||
float: right;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker.read-only
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-prev,
|
||||
.tchmi-date-time-picker.read-only .tchmi-date-time-picker-calendar-template-prev,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker.read-only
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-next,
|
||||
.tchmi-date-time-picker.read-only .tchmi-date-time-picker-calendar-template-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays,
|
||||
.tchmi-date-time-picker-calendar-template-weekdays {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays li,
|
||||
.tchmi-date-time-picker-calendar-template-weekdays li {
|
||||
display: inline-block;
|
||||
width: 13.6%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days,
|
||||
.tchmi-date-time-picker-calendar-template-days {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days li,
|
||||
.tchmi-date-time-picker-calendar-template-days li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
width: 13.6%;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days .active,
|
||||
.tchmi-date-time-picker-calendar-template-days .active {
|
||||
}
|
||||
|
||||
/* year style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-year-template,
|
||||
.tchmi-date-time-picker-year-template {
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-year-template-year-element,
|
||||
.tchmi-date-time-picker-year-template-year-element {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* time style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-area-template,
|
||||
.tchmi-date-time-picker-time-area-template {
|
||||
width: 100%;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template,
|
||||
.tchmi-date-time-picker-time-template {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-time-label,
|
||||
.tchmi-date-time-picker-template-time-label {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-hour,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-minute,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-second,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-millisecond,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-colon,
|
||||
.tchmi-date-time-picker-time-template-hour,
|
||||
.tchmi-date-time-picker-time-template-minute,
|
||||
.tchmi-date-time-picker-time-template-second,
|
||||
.tchmi-date-time-picker-time-template-millisecond,
|
||||
.tchmi-date-time-picker-time-template-colon {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-colon,
|
||||
.tchmi-date-time-picker-time-template-colon {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-hour .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-minute .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-second .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-millisecond .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template
|
||||
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before:not(:empty),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template
|
||||
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after:not(:empty) {
|
||||
flex-basis: 35px;
|
||||
}
|
||||
|
||||
/** Show in View styles **/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display .tchmi-date-time-picker-template-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-choice-area-template,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display .tchmi-date-time-picker-choice-area-template {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-choice-area-template
|
||||
> div,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display .tchmi-date-time-picker-choice-area-template > div {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-selected-area-template,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display .tchmi-date-time-picker-selected-area-template {
|
||||
width: calc(100% - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-invalid-notification {
|
||||
position: absolute;
|
||||
width: 30px; /* is used for internal calc*/
|
||||
height: 30px; /* is used for internal calc*/
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
// 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 global {
|
||||
namespace Intl {
|
||||
interface Locale {
|
||||
/**
|
||||
* Browser support is sparse as of 2025-07.
|
||||
*/
|
||||
firstDay?: number;
|
||||
/**
|
||||
* Browser support is sparse as of 2025-07.
|
||||
*/
|
||||
minimalDays?: number;
|
||||
/**
|
||||
* Browser support is sparse as of 2025-07.
|
||||
*/
|
||||
getWeekInfo?: () => {
|
||||
weekend: number[];
|
||||
};
|
||||
/**
|
||||
* Support chromiums from 2022-2025
|
||||
*/
|
||||
weekInfo?: {
|
||||
weekend: number[];
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
declare class TcHmiDateTimePicker 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 __elementDTPTemplate: JQuery;
|
||||
/** Reference to the div with calendar in the control template as jquery object. */
|
||||
protected __elementCalendarTemplate: JQuery;
|
||||
/** Reference to the div with calendar in the control template as jquery object. */
|
||||
protected __elementTimeAndButtonTemplate: JQuery;
|
||||
/** Reference to the button template dom element of the current control as jquery object. */
|
||||
protected __elementButtonTemplate: HTMLElement;
|
||||
/** Reference to the div element used as error display (top most layer) as jquery object. */
|
||||
protected __elementInvalidNotification: HTMLElement;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-value" (iso timestamp string)
|
||||
*/
|
||||
protected __value: string | undefined;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-min-value" (iso timestamp string)
|
||||
*/
|
||||
protected __minValue: string | undefined;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-max-value" (iso timestamp string)
|
||||
*/
|
||||
protected __maxValue: string | undefined;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-direct-display"
|
||||
*/
|
||||
protected __directDisplay: boolean | undefined;
|
||||
/** Internal reference to the attribute 'data-tchmi-ignore-invalid-values' */
|
||||
protected __ignoreInvalidValues: boolean | undefined;
|
||||
/**
|
||||
* Internal reference to the attribute "data-tchmi-show-confirmation-buttons"
|
||||
*/
|
||||
protected __showConfirmationButtons: boolean | undefined;
|
||||
/**
|
||||
* ReadOnly state of the control.
|
||||
*/
|
||||
protected __isReadOnly: boolean | undefined;
|
||||
/** Stores the controls as System.TcHmiControl[] */
|
||||
protected __baseControls: {
|
||||
dateValueTextblock?: TcHmiTextblock;
|
||||
okButton?: TcHmiButton;
|
||||
cancelButton?: TcHmiButton;
|
||||
spinboxes: {
|
||||
hours?: TcHmiSpinboxInput;
|
||||
minutes?: TcHmiSpinboxInput;
|
||||
seconds?: TcHmiSpinboxInput;
|
||||
milliseconds?: TcHmiSpinboxInput;
|
||||
};
|
||||
};
|
||||
protected __localizationReader: TcHmi.Locale.LocalizationReader | undefined;
|
||||
/** Internal date-object */
|
||||
protected defaultDate: TcHmi.Localization.DateParts;
|
||||
/** Holds the data of the date of this.__value in parsed form in timezone of user. */
|
||||
protected __internalDateObject: TcHmi.Localization.DateParts;
|
||||
/** Holds the volatile data of the current editing in timezone of user. */
|
||||
protected __dateSelectionObject: TcHmi.Localization.DateParts;
|
||||
protected __internalMinDateObject: TcHmi.Localization.DateParts | null;
|
||||
protected __internalMaxDateObject: TcHmi.Localization.DateParts | null;
|
||||
/** Saved if the calendar is pressed */
|
||||
protected __isPressedCalendar: boolean;
|
||||
/** The interval timer for calendar interaction buttons */
|
||||
protected __intervalTimerCalendar: number;
|
||||
/** Millisecond offset to utc calculated from the current timeZone of the user */
|
||||
protected __utcOffset: number;
|
||||
/** Regex to validate a string after RFC 3339, the subset of ISO 8601 that is used in JsonSchema. See https://regexr.com/5cnhd for tests.*/
|
||||
protected readonly __REGEX_ISO_8601: RegExp;
|
||||
/** The interval timer for updateInvalidNotification */
|
||||
protected __updateInvalidNotificationTimer: 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;
|
||||
/**
|
||||
* Is called if onResized event of control has raised.
|
||||
*/
|
||||
protected __onResized(): void;
|
||||
/**
|
||||
* Update the invalid notification icon and adjusts OK button state.
|
||||
*/
|
||||
protected __updateInvalidNotification(): void;
|
||||
protected __updateUtcOffset(): void;
|
||||
/**
|
||||
* Return the currently configured UTC date.
|
||||
*/
|
||||
protected __getUtcDate(dateObject: TcHmi.Localization.DateParts): Date;
|
||||
/**
|
||||
* Compares two dates in the form of Date objects of ISO 8601 compatible strings. If strings are used, they can
|
||||
* be compared with nanosecond precision.
|
||||
* Returns -1 if the first date is earlier then the second, 1 if the second date is earlier and 0 if the dates
|
||||
* are equal.
|
||||
* @param a The first date to compare.
|
||||
* @param b The second date to compare.
|
||||
*/
|
||||
protected __compareDates(a: string | Date, b: string | Date): -1 | 0 | 1;
|
||||
/**
|
||||
* Returns an event handler for the mousedown event.
|
||||
*/
|
||||
protected __onMousedown(event: MouseEvent): void;
|
||||
/**
|
||||
* Returns an event handler for the mousedown event of the choice area element.
|
||||
*/
|
||||
protected __onMousedownCalendar(event: MouseEvent): void;
|
||||
protected __updateHeaderDate(process?: boolean): void;
|
||||
/**
|
||||
* Is called if onPressed event of buttons has raised.
|
||||
*/
|
||||
protected __onMouseup(event: MouseEvent): void;
|
||||
/**
|
||||
* Is called if onMouseDown event of buttons (ok and cancel) has raised.
|
||||
*/
|
||||
protected __onPressed(event: TcHmi.EventProvider.Event): void;
|
||||
/**
|
||||
* Is called if the onUserInteractionFinished event of a spinbox was raised.
|
||||
*/
|
||||
protected __generateUserInteractionFinishedHandler(spinbox: TcHmiSpinboxInput, action: (value: number) => void): (_event: TcHmi.EventProvider.Event) => void;
|
||||
/**
|
||||
* Is called if focusout event has raised.
|
||||
*/
|
||||
protected __onFocusOut(_event: FocusEvent): void;
|
||||
/**
|
||||
* Is called if keypress event has raised.
|
||||
*/
|
||||
protected __onKeyPress(event: KeyboardEvent): void;
|
||||
/**
|
||||
* Open the dateTimePicker (in TopMostLayer).
|
||||
*/
|
||||
openDateTimePicker(): void;
|
||||
/**
|
||||
* Close the dateTimePicker without changes (delete from TopMostLayer).
|
||||
*/
|
||||
closeDateTimePicker(): void;
|
||||
/**
|
||||
* Created a calendar for one year.
|
||||
*/
|
||||
protected createCalendar(year: number, month: number, day: number): DocumentFragment;
|
||||
/**
|
||||
* Create a spinbox control
|
||||
*/
|
||||
protected __createSpinbox(name: string, value: number, zeroPadding: number, maxValue: number): TcHmiSpinboxInput;
|
||||
/**
|
||||
* Create a separating element.
|
||||
*/
|
||||
protected __createDivider(character: string): HTMLDivElement;
|
||||
/**
|
||||
* Created a time picker.
|
||||
*/
|
||||
protected __createTime(hours: number, minutes: number, seconds: number, milliseconds: number): DocumentFragment;
|
||||
/**
|
||||
* Sets __internalValue and updates the textboxes.
|
||||
*/
|
||||
protected __setInternalValue(value: string | undefined): void;
|
||||
/**
|
||||
* Checks if dateSelection is in the value range and sets it to internalDateObject or not.
|
||||
*/
|
||||
protected __checkDateSelection(update?: boolean): void;
|
||||
/**
|
||||
* Checks if value is valid.
|
||||
*/
|
||||
isValid(value: string | Date): boolean;
|
||||
/**
|
||||
* 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 MinValue
|
||||
* @param valueNew The new value for MinValue
|
||||
*/
|
||||
setMinValue(valueNew: string | null): void;
|
||||
/**
|
||||
* Gets the value of MinValue
|
||||
*/
|
||||
getMinValue(): string | undefined;
|
||||
/**
|
||||
* Processes the value of MinValue
|
||||
*/
|
||||
protected __processMinValue(): void;
|
||||
/**
|
||||
* Sets the value of MaxValue
|
||||
* @param valueNew The new value for MaxValue
|
||||
*/
|
||||
setMaxValue(valueNew: string | null): void;
|
||||
/**
|
||||
* Gets the value of MaxValue
|
||||
*/
|
||||
getMaxValue(): string | undefined;
|
||||
/**
|
||||
* Processes the value of MaxValue
|
||||
*/
|
||||
protected __processMaxValue(): void;
|
||||
/**
|
||||
* Sets the ignoreInvalidValues attribute.
|
||||
* @param valueNew The new value for ignoreInvalidValues.
|
||||
*/
|
||||
setIgnoreInvalidValues(valueNew: boolean | null): void;
|
||||
/**
|
||||
* Returns the current value of ignoreInvalidValues.
|
||||
* @returns The current value of ignoreInvalidValues.
|
||||
*/
|
||||
getIgnoreInvalidValues(): boolean | undefined;
|
||||
/**
|
||||
* Processes the current value of attribute ignoreInvalidValues.
|
||||
*/
|
||||
protected __processIgnoreInvalidValues(): 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;
|
||||
}
|
||||
export { TcHmiDateTimePicker as Control };
|
||||
declare const _TcHmiDateTimePicker: typeof TcHmiDateTimePicker;
|
||||
type tTcHmiDateTimePicker = TcHmiDateTimePicker;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiDateTimePicker: typeof _TcHmiDateTimePicker;
|
||||
type TcHmiDateTimePicker = tTcHmiDateTimePicker;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template tchmi-date-time-picker-template tchmi-box"></div>
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="Inhalt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><style>.cls-2{fill:#fff;}</style></defs><title>icons_error_normal</title><path class="cls-2" d="M40,54.54a2.45,2.45,0,0,1-2.46-2.42,2.44,2.44,0,1,1,4.88,0A2.46,2.46,0,0,1,40,54.54ZM41.42,46c-.06.55-.17.52-.61.52H39.16c-.43,0-.55,0-.61-.52l-.64-11.27c0-.49,0-.53,0-.7a.48.48,0,0,1,.52-.5H41.5a.54.54,0,0,1,.58.52c0,.17,0,.13,0,.62Z"/></svg>
|
||||
|
After Width: | Height: | Size: 418 B |
@@ -0,0 +1,114 @@
|
||||
/** Styles for the theme: Base-Dark */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker,
|
||||
.tchmi-date-time-picker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
|
||||
.tchmi-date-time-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-label-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-header-background: var(--tchmi-highlight-color-1);
|
||||
--tchmi-header-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-weekdays-background: var(--tchmi-background-color-4);
|
||||
--tchmi-weekdays-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-weekend-background: var(--tchmi-background-color-4);
|
||||
--tchmi-days-background: var(--tchmi-background-color-3);
|
||||
--tchmi-days-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-days-background-active: var(--tchmi-highlight-color-1);
|
||||
--tchmi-days-color-active: var(--tchmi-foreground-color-1);
|
||||
--tchmi-color-disabled: var(--tchmi-foreground-color-4);
|
||||
}
|
||||
|
||||
.tchmi-system-topmostlayer-container .TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
|
||||
.tchmi-system-topmostlayer-container .tchmi-date-time-picker-template-overlay {
|
||||
box-shadow: var(--tchmi-popup-shadow);
|
||||
background: var(--tchmi-overlay-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-label,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-value,
|
||||
.tchmi-date-time-picker-template-label,
|
||||
.tchmi-date-time-picker-template-value {
|
||||
color: var(--tchmi-label-color);
|
||||
}
|
||||
|
||||
/* calendar style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header,
|
||||
.tchmi-date-time-picker-calendar-template-header {
|
||||
background: var(--tchmi-header-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header ul li,
|
||||
.tchmi-date-time-picker-calendar-template-header ul li {
|
||||
color: var(--tchmi-header-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays,
|
||||
.tchmi-date-time-picker-calendar-template-weekdays {
|
||||
background-color: var(--tchmi-weekdays-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays li,
|
||||
.tchmi-date-time-picker-calendar-template-weekdays li {
|
||||
color: var(--tchmi-weekdays-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekend-day-element,
|
||||
.tchmi-date-time-picker-calendar-template-weekend-day-element {
|
||||
background-color: var(--tchmi-weekend-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days,
|
||||
.tchmi-date-time-picker-calendar-template-days {
|
||||
background: var(--tchmi-days-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days li,
|
||||
.tchmi-date-time-picker-calendar-template-days li {
|
||||
color: var(--tchmi-days-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days .active,
|
||||
.tchmi-date-time-picker-calendar-template-days .active {
|
||||
background: var(--tchmi-days-background-active);
|
||||
color: var(--tchmi-days-color-active);
|
||||
}
|
||||
|
||||
/* time style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-label,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-textbox,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-colon,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-time-label,
|
||||
.tchmi-date-time-picker-time-template-label,
|
||||
.tchmi-date-time-picker-time-template-textbox,
|
||||
.tchmi-date-time-picker-time-template-colon,
|
||||
.tchmi-date-time-picker-template-time-label {
|
||||
color: var(--tchmi-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay .TcHmi_Controls_Beckhoff_TcHmiTextbox-template-border,
|
||||
.tchmi-date-time-picker-template-overlay .tchmi.textbox-template-border {
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
/** Direct Display styles*/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display.tchmi-date-time-picker {
|
||||
background: var(--tchmi-background);
|
||||
box-shadow: var(--tchmi-card-shadow);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-invalid-notification {
|
||||
background-image: url('Images/invalid-notification.svg');
|
||||
background-size: 200% 200%;
|
||||
background-color: var(--tchmi-error-color);
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template .tchmi-disabled {
|
||||
color: var(--tchmi-color-disabled);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-calendar {
|
||||
box-shadow: var(--tchmi-card-shadow);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="Inhalt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><style>.cls-2{fill:#fff;}</style></defs><title>icons_error_normal</title><path class="cls-2" d="M 40 49.5 C 38.7 49.5 37.6 48.5 37.5 47.1 C 37.5 45.8 38.6 44.7 40 44.7 C 41.3 44.7 42.4 45.8 42.4 47.1 C 42.4 48.4 41.3 49.5 40 49.5 Z M 41.4 41 c -0.1 0.5 -0.2 0.5 -0.6 0.5 H 39.2 c -0.4 0 -0.5 0 -0.6 -0.5 l -0.6 -11.3 c 0 -0.5 0 -0.5 0 -0.7 C 37.9 28.9 38 28.8 38.1 28.7 C 38.2 28.6 38.3 28.5 38.4 28.5 H 41.5 C 41.6 28.5 41.8 28.6 41.9 28.7 C 42 28.8 42.1 28.9 42.1 29.1 c 0 0.2 0 0.1 0 0.6 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 580 B |
@@ -0,0 +1,114 @@
|
||||
/** Styles for the theme: Base */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker,
|
||||
.tchmi-date-time-picker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
|
||||
.tchmi-date-time-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-label-color: var(--tchmi-highlight-color-1);
|
||||
--tchmi-header-background: var(--tchmi-highlight-color-1);
|
||||
--tchmi-header-color: var(--tchmi-foreground-color-2);
|
||||
--tchmi-weekdays-background: var(--tchmi-background-color-2);
|
||||
--tchmi-weekdays-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-weekend-background: var(--tchmi-background-color-2);
|
||||
--tchmi-days-background: var(--tchmi-background-color-3);
|
||||
--tchmi-days-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-days-background-active: var(--tchmi-highlight-color-1);
|
||||
--tchmi-days-color-active: var(--tchmi-foreground-color-2);
|
||||
--tchmi-color-disabled: var(--tchmi-foreground-color-3);
|
||||
}
|
||||
|
||||
.tchmi-system-topmostlayer-container .TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
|
||||
.tchmi-system-topmostlayer-container .tchmi-date-time-picker-template-overlay {
|
||||
box-shadow: var(--tchmi-popup-shadow);
|
||||
background: var(--tchmi-overlay-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-label,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-value,
|
||||
.tchmi-date-time-picker-template-label,
|
||||
.tchmi-date-time-picker-template-value {
|
||||
color: var(--tchmi-label-color);
|
||||
}
|
||||
|
||||
/* calendar style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header,
|
||||
.tchmi-date-time-picker-calendar-template-header {
|
||||
background: var(--tchmi-header-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header ul li,
|
||||
.tchmi-date-time-picker-calendar-template-header ul li {
|
||||
color: var(--tchmi-header-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays,
|
||||
.tchmi-date-time-picker-calendar-template-weekdays {
|
||||
background-color: var(--tchmi-weekdays-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays li,
|
||||
.tchmi-date-time-picker-calendar-template-weekdays li {
|
||||
color: var(--tchmi-weekdays-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekend-day-element,
|
||||
.tchmi-date-time-picker-calendar-template-weekend-day-element {
|
||||
background-color: var(--tchmi-weekend-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days,
|
||||
.tchmi-date-time-picker-calendar-template-days {
|
||||
background: var(--tchmi-days-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days li,
|
||||
.tchmi-date-time-picker-calendar-template-days li {
|
||||
color: var(--tchmi-days-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days .active,
|
||||
.tchmi-date-time-picker-calendar-template-days .active {
|
||||
background: var(--tchmi-days-background-active);
|
||||
color: var(--tchmi-days-color-active);
|
||||
}
|
||||
|
||||
/* time style */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-label,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-textbox,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-colon,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-time-label,
|
||||
.tchmi-date-time-picker-time-template-label,
|
||||
.tchmi-date-time-picker-time-template-textbox,
|
||||
.tchmi-date-time-picker-time-template-colon,
|
||||
.tchmi-date-time-picker-template-time-label {
|
||||
color: var(--tchmi-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay .TcHmi_Controls_Beckhoff_TcHmiTextbox-template-border,
|
||||
.tchmi-date-time-picker-template-overlay .textbox-template-border {
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
/** Direct Display styles*/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display.tchmi-date-time-picker {
|
||||
background: var(--tchmi-background);
|
||||
box-shadow: var(--tchmi-card-shadow);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-invalid-notification {
|
||||
background-image: url('Images/invalid-notification.svg');
|
||||
background-size: 200% 200%;
|
||||
background-color: var(--tchmi-error-color);
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template .tchmi-disabled {
|
||||
color: var(--tchmi-color-disabled);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-calendar {
|
||||
box-shadow: var(--tchmi-card-shadow);
|
||||
}
|
||||
Reference in New Issue
Block a user