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,456 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiCheckbox",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "Checkbox",
|
||||
"version": {
|
||||
"full": "14.4.1.0",
|
||||
"major": 14,
|
||||
"minor": 4,
|
||||
"build": 1,
|
||||
"revision": 0
|
||||
},
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"base": "TcHmi.Controls.System.TcHmiControl",
|
||||
"description": "A simple Checkbox.",
|
||||
"defaultDesignerEvent": ".onToggleStateChanged",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 100,
|
||||
"height": 26
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiCheckbox/TcHmiCheckbox.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-background-color",
|
||||
"propertyName": "BackgroundColor",
|
||||
"propertySetterName": "setBackgroundColor",
|
||||
"propertyGetterName": "getBackgroundColor",
|
||||
"displayName": "Background Color",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 30,
|
||||
"type": "tchmi:framework#/definitions/Color",
|
||||
"category": "Colors",
|
||||
"description": "Definition of the background color of the checkbox itself (not the optional label).",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-toggle-group",
|
||||
"propertyName": "ToggleGroup",
|
||||
"propertySetterName": "setToggleGroup",
|
||||
"propertyGetterName": "getToggleGroup",
|
||||
"displayName": "Toggle Group",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 51,
|
||||
"type": "tchmi:general#/definitions/String",
|
||||
"category": "Common",
|
||||
"description": "Custom name for a toggle group. Only one Control in a toggleGroup is held active.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-toggle-state",
|
||||
"propertyName": "ToggleState",
|
||||
"propertySetterName": "setToggleState",
|
||||
"propertyGetterName": "getToggleState",
|
||||
"displayName": "Toggle State",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 20,
|
||||
"type": "tchmi:framework#/definitions/ToggleState",
|
||||
"category": "Common",
|
||||
"description": "Possible values are Normal, Active.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Normal"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-toggle-state-icon-color",
|
||||
"propertyName": "ToggleStateIconColor",
|
||||
"propertySetterName": "setToggleStateIconColor",
|
||||
"propertyGetterName": "getToggleStateIconColor",
|
||||
"displayName": "Toggle State Icon Color",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/SolidColor",
|
||||
"category": "Colors",
|
||||
"description": "Definition of the color of the icon inside the checkbox.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-state-symbol",
|
||||
"propertyName": "StateSymbol",
|
||||
"propertySetterName": "setStateSymbol",
|
||||
"propertyGetterName": "getStateSymbol",
|
||||
"displayName": "State Symbol",
|
||||
"visible": true,
|
||||
"themeable": "None",
|
||||
"displayPriority": 11,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCheckbox.StateSymbol",
|
||||
"category": "Common",
|
||||
"description": "A symbol of type tchmi:general#/definitions/Boolean which will be set to true if checkbox is checked and to false if checkbox is unchecked.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text",
|
||||
"propertyName": "Text",
|
||||
"propertySetterName": "setText",
|
||||
"propertyGetterName": "getText",
|
||||
"displayName": "Text",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/String",
|
||||
"category": "Common",
|
||||
"description": "Text that is shown next to the checkbox.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": "Label",
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"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-ignore-escape-sequences",
|
||||
"propertyName": "IgnoreEscapeSequences",
|
||||
"propertySetterName": "setIgnoreEscapeSequences",
|
||||
"propertyGetterName": "getIgnoreEscapeSequences",
|
||||
"displayName": "Ignore Escape Sequences",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 100,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Text",
|
||||
"description": "When set to true a backslash in a text will be shown verbatim in the HMI.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-position",
|
||||
"propertyName": "TextPosition",
|
||||
"propertySetterName": "setTextPosition",
|
||||
"propertyGetterName": "getTextPosition",
|
||||
"displayName": "Text Position",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 22,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCheckbox.TextPosition",
|
||||
"category": "Text",
|
||||
"description": "Where the text should be displayed.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Right"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-horizontal-alignment",
|
||||
"propertyName": "TextHorizontalAlignment",
|
||||
"propertySetterName": "setTextHorizontalAlignment",
|
||||
"propertyGetterName": "getTextHorizontalAlignment",
|
||||
"displayName": "Text Horizontal Alignment",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 30,
|
||||
"type": "tchmi:framework#/definitions/HorizontalAlignment",
|
||||
"category": "Text",
|
||||
"description": "Defines the horizontal alignment of the text.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Left"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-vertical-alignment",
|
||||
"propertyName": "TextVerticalAlignment",
|
||||
"propertySetterName": "setTextVerticalAlignment",
|
||||
"propertyGetterName": "getTextVerticalAlignment",
|
||||
"displayName": "Text Vertical Alignment",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 30,
|
||||
"type": "tchmi:framework#/definitions/VerticalAlignment",
|
||||
"category": "Text",
|
||||
"description": "Defines the vertical alignment of the text.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Center"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-font-family",
|
||||
"propertyName": "TextFontFamily",
|
||||
"propertySetterName": "setTextFontFamily",
|
||||
"propertyGetterName": "getTextFontFamily",
|
||||
"displayName": "Text Font Family",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 60,
|
||||
"type": "tchmi:framework#/definitions/FontFamily",
|
||||
"category": "Text",
|
||||
"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-text-font-size",
|
||||
"propertyName": "TextFontSize",
|
||||
"propertySetterName": "setTextFontSize",
|
||||
"propertyGetterName": "getTextFontSize",
|
||||
"displayName": "Text Font Size",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 30,
|
||||
"type": "tchmi:framework#/definitions/MeasurementValue",
|
||||
"category": "Text",
|
||||
"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-text-font-size-unit",
|
||||
"propertyName": "TextFontSizeUnit",
|
||||
"propertySetterName": "setTextFontSizeUnit",
|
||||
"propertyGetterName": "getTextFontSizeUnit",
|
||||
"refTo": "TextFontSize",
|
||||
"displayName": "Text Font Size Unit",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 30,
|
||||
"type": "tchmi:framework#/definitions/MeasurementUnit",
|
||||
"category": "Text",
|
||||
"description": "Could be 'px' or for relative sizing '%'.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "px"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-font-style",
|
||||
"propertyName": "TextFontStyle",
|
||||
"propertySetterName": "setTextFontStyle",
|
||||
"propertyGetterName": "getTextFontStyle",
|
||||
"displayName": "Text Font Style",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 60,
|
||||
"type": "tchmi:framework#/definitions/FontStyle",
|
||||
"category": "Text",
|
||||
"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-text-font-weight",
|
||||
"propertyName": "TextFontWeight",
|
||||
"propertySetterName": "setTextFontWeight",
|
||||
"propertyGetterName": "getTextFontWeight",
|
||||
"displayName": "Text Font Weight",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 60,
|
||||
"type": "tchmi:framework#/definitions/FontWeight",
|
||||
"category": "Text",
|
||||
"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-text-color",
|
||||
"propertyName": "TextColor",
|
||||
"propertySetterName": "setTextColor",
|
||||
"propertyGetterName": "getTextColor",
|
||||
"displayName": "Text Color",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/SolidColor",
|
||||
"category": "Colors",
|
||||
"description": "The color of the optional button text.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-background-color",
|
||||
"propertyName": "TextBackgroundColor",
|
||||
"propertySetterName": "setTextBackgroundColor",
|
||||
"propertyGetterName": "getTextBackgroundColor",
|
||||
"displayName": "Text Background Color",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/Color",
|
||||
"category": "Colors",
|
||||
"description": "The color of the optional button text.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
}
|
||||
],
|
||||
"attributeCategories": [
|
||||
{
|
||||
"name": "Text",
|
||||
"displayPriority": 500,
|
||||
"defaultCollapsed": true,
|
||||
"description": "Attributes defining the text of the control."
|
||||
}
|
||||
],
|
||||
"functions": [],
|
||||
"events": [
|
||||
{
|
||||
"name": ".onToggleStateChanged",
|
||||
"displayName": ".onToggleStateChanged",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The togglestatechanged event is fired when the state of the checkbox has changed.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onStateChanged",
|
||||
"displayName": ".onStateChanged",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The onStateChanged event is fired when the state of the checkbox has changed.",
|
||||
"heritable": true,
|
||||
"arguments": [
|
||||
{
|
||||
"type": "tchmi:framework#/definitions/TcHmiCheckboxStateChangedEventObject",
|
||||
"description": "The event object containing information about the state change."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"dataTypes": [
|
||||
{
|
||||
"schema": "Schema/Types.Schema.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 324 B |
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiCheckbox": {
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiCheckbox",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiCheckbox.StateSymbol": {
|
||||
"allOf": [
|
||||
{
|
||||
"$ref": "tchmi:framework#/definitions/Symbol"
|
||||
},
|
||||
{
|
||||
"frameworkSymbolSubType": {
|
||||
"$ref": "tchmi:general#/definitions/Boolean"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiCheckbox.TextPosition": {
|
||||
"type": "string",
|
||||
"enum": ["Left", "Right"]
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiCheckbox.StateChangedEventObject": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"control": {
|
||||
"$ref": "tchmi:framework#/definitions/Control"
|
||||
},
|
||||
"state": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"stateOld": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
},
|
||||
"TcHmiCheckbox": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCheckbox"
|
||||
},
|
||||
"TcHmiCheckboxStateSymbol": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCheckbox.StateSymbol"
|
||||
},
|
||||
"TcHmiCheckboxStateChangedEventObject": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCheckbox.StateChangedEventObject"
|
||||
}
|
||||
}
|
||||
}
|
||||
84
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiCheckbox/Style.css
vendored
Normal file
84
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiCheckbox/Style.css
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
/** Styles for all themes */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox,
|
||||
.tchmi-checkbox {
|
||||
--square-size: 24px; /* drop default height of 24px */
|
||||
display: grid;
|
||||
overflow: hidden; /* needed for hiding label in square controls */
|
||||
grid-template-columns: var(--square-size) minmax(0, 1fr);
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox-template {
|
||||
width: var(--square-size);
|
||||
height: var(--square-size);
|
||||
justify-self: start;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-size: 0; /* Set to 0, otherwise whitespace takes up space and pushes the checkmark out of the control */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-label {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
place-items: inherit;
|
||||
display: grid;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.text-left,
|
||||
.tchmi-checkbox.text-left {
|
||||
/* 2 columns: [ column1 (text): min 0, max all available space ] [ column2 (radiobutton): min square-size, max square-size + 5px ] */
|
||||
grid-template-columns: minmax(0, 1fr) minmax(var(--square-size), calc(var(--square-size) + 5px));
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.text-left .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox.text-left .tchmi-checkbox-template {
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* class TcHmi_Controls_Beckhoff_TcHmiCheckbox-active will be set/unset in the control */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox:not(.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active)
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-toggle-state-icon,
|
||||
.tchmi-checkbox:not(.tchmi-checkbox-active) .tchmi-checkbox-toggle-state-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The main use for this control is interaction. So mark when this is not allowed. */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after,
|
||||
.tchmi-checkbox.tchmi-control-operate-disallowed::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
width: var(--square-size);
|
||||
height: var(--square-size);
|
||||
z-index: 100;
|
||||
}
|
||||
/* Adjust size of overlay only */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-disabled::after,
|
||||
.tchmi-checkbox.tchmi-control-disabled::after {
|
||||
top: auto;
|
||||
left: 0;
|
||||
width: var(--square-size);
|
||||
height: var(--square-size);
|
||||
}
|
||||
|
||||
/* Moving overlay container to the other side with text on the left */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.text-left.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.text-left.TcHmi_Controls_System_TcHmiControl-disabled::after,
|
||||
.tchmi-checkbox.text-left.tchmi-control-operate-disallowed::after,
|
||||
.tchmi-checkbox.text-left.tchmi-control-disabled::after {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-operate-disallowed,
|
||||
.tchmi-checkbox.tchmi-control-operate-disallowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
// 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 TcHmiCheckbox extends TcHmi.Controls.System.TcHmiControl {
|
||||
#private;
|
||||
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
|
||||
protected __elementCheckbox: JQuery;
|
||||
protected __textDiv: HTMLDivElement | null;
|
||||
protected __toggleGroup: string | null | undefined;
|
||||
protected __toggleState: TcHmi.ToggleState | undefined;
|
||||
protected __stateSymbol: TcHmi.Symbol<boolean> | null | undefined;
|
||||
/**
|
||||
* Used to determine if this.__stateSymbol has ben initially read at least once before a write is processed to the symbol.
|
||||
* Because the state symbol state has a higher priority than internal or configured state.
|
||||
*/
|
||||
protected __stateSymbolInitialized: boolean;
|
||||
protected __toggleStateIconColor: TcHmi.SolidColor | null | undefined;
|
||||
protected __text: string | null | undefined;
|
||||
/** Internal reference to the attribute "data-tchmi-ignore-escape-sequences" */
|
||||
protected __ignoreEscapeSequences: boolean | undefined;
|
||||
protected __textPosition: TextPosition | undefined;
|
||||
protected __textHorizontalAlignment: TcHmi.HorizontalAlignment | undefined;
|
||||
protected __textVerticalAlignment: TcHmi.VerticalAlignment | undefined;
|
||||
protected __textFontFamily: TcHmi.FontFamily | null | undefined;
|
||||
protected __textFontSize: number | null | undefined;
|
||||
protected __textFontSizeUnit: TcHmi.FontSizeUnit | undefined;
|
||||
protected __textFontStyle: TcHmi.FontStyle | undefined;
|
||||
protected __textFontWeight: TcHmi.FontWeight | undefined;
|
||||
protected __textColor: TcHmi.SolidColor | null | undefined;
|
||||
protected __textBackgroundColor: TcHmi.Color | null | undefined;
|
||||
/**
|
||||
* ReadOnly state of the control.
|
||||
*/
|
||||
protected __isReadOnly: boolean | undefined;
|
||||
/** Destroy functions */
|
||||
protected __onToggleGroupToggledEventDestroyEvent: TcHmi.DestroyFunction | null;
|
||||
protected __destroyStateSymbolWatch: TcHmi.DestroyFunction | null;
|
||||
/** Helper */
|
||||
protected __state: boolean;
|
||||
protected __isActive: boolean;
|
||||
/**
|
||||
* If raised, the control object exists in control cache and constructor of each inheritation level was called.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__previnit(): void;
|
||||
/**
|
||||
* If raised, all attributes have been set to it's default or dom values.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__init(): void;
|
||||
/**
|
||||
* Is called by the system after the control instance gets part of the current DOM.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__attach(): void;
|
||||
/**
|
||||
* Is called by the system after the control instance is no longer part of the current DOM.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__detach(): void;
|
||||
/**
|
||||
* Destroy the current control instance.
|
||||
* Will be called automatically if system destroys control!
|
||||
*/
|
||||
destroy(): void;
|
||||
/**
|
||||
* Is raised if a member of 'toggleGroup' has raised the toggled event.
|
||||
*/
|
||||
protected __onToggleGroupToggled(_event: TcHmi.EventProvider.Event, data: {
|
||||
ActiveElementId: string;
|
||||
source: string;
|
||||
}): void;
|
||||
/**
|
||||
* Sets the toggleGroup attribute to a new value.
|
||||
* @param valueNew The new value for the toggleGroup attribute.
|
||||
*/
|
||||
setToggleGroup(valueNew: string | null): void;
|
||||
/**
|
||||
* Returns the current value of the toggleGroup attribute
|
||||
*/
|
||||
getToggleGroup(): string | null | undefined;
|
||||
/**
|
||||
* Processes the current value of the toggleGroup attribute.
|
||||
*/
|
||||
protected __processToggleGroup(): void;
|
||||
/**
|
||||
* Writes the given state to the state symbol, if it exists. Otherwise just sets the internal state variable.
|
||||
* @param state The state to write.
|
||||
* @param source What caused the state change. Could be 'userInteraction', the change of an 'attribute' or the state symbol, or the 'toggleGroup'.
|
||||
*/
|
||||
protected __writeState(state: boolean, source: string): Promise<boolean>;
|
||||
/**
|
||||
* Sets the internal state variable and raises state change events if state has changed.
|
||||
* @param state The new state of the control.
|
||||
* @param source What caused the state change. Could be 'userInteraction', the change of an 'attribute' or the state symbol, or the 'toggleGroup'.
|
||||
*/
|
||||
protected __setInternalState(state: boolean, source: string): void;
|
||||
/**
|
||||
* Writes the state symbol, or just sets the internal state variable, depending on the value of forwardStateSymbol.
|
||||
* @param state The new state.
|
||||
* @param forwardStateSymbol Whether to write the state symbol or just set the internal state variable.
|
||||
* @param source What caused the state change. Could be 'userInteraction', the change of an 'attribute' or the state symbol, or the 'toggleGroup'.
|
||||
*/
|
||||
protected __processState(state: boolean, forwardStateSymbol: boolean, source: string): void;
|
||||
/**
|
||||
* Sets whether the checkbox should be displayed in an active state.
|
||||
* @param valueNew The new active state.
|
||||
*/
|
||||
protected __setIsActive(valueNew: boolean): void;
|
||||
/**
|
||||
* Returns an event handler function for the onResized event.
|
||||
*/
|
||||
protected __onResized(): void;
|
||||
/**
|
||||
* Is raised when the onPressed event is fired from the base control.
|
||||
*/
|
||||
protected __onPressed(): void;
|
||||
/**
|
||||
* Sets the toggleState attribute to a new value.
|
||||
* @param valueNew The new value for the toggleState attribute.
|
||||
* @param forwardStateSymbol Does nothing, only exists for backwards compatibility purposes.
|
||||
* @param process Allows to disable underlying calls to processToggleState. Required if a StateSymbol change is reflected to the ToggleState.
|
||||
*/
|
||||
protected __setToggleState(valueNew: TcHmi.ToggleState | null, forwardStateSymbol: boolean, process: boolean): void;
|
||||
/**
|
||||
* Sets the toggleState attribute to a new value.
|
||||
* @param valueNew The new value for the toggleState attribute.
|
||||
*/
|
||||
setToggleState(valueNew: TcHmi.ToggleState | null): void;
|
||||
/**
|
||||
* Returns the current value of the toggleState attribute
|
||||
*/
|
||||
getToggleState(): TcHmi.ToggleState | undefined;
|
||||
/**
|
||||
* Processes the current value of the toggleState attribute.
|
||||
* @param forwardStateSymbol Does nothing, only exists for backwards compatibility purposes.
|
||||
*/
|
||||
protected __processToggleState(forwardStateSymbol?: boolean): void;
|
||||
/**
|
||||
* Sets the text color and calls the associated process function (processToggleStateIconColor).
|
||||
* @param valueNew The new value for toggleStateIconColor.
|
||||
*/
|
||||
setToggleStateIconColor(valueNew: TcHmi.SolidColor | null): void;
|
||||
/**
|
||||
* The watch callback for the toggleStateIconColor object resolver.
|
||||
*/
|
||||
protected __onResolverForToggleStateIconColorWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.SolidColor>): void;
|
||||
/**
|
||||
* Returns the current value of toggleStateIconColor.
|
||||
* @returns The current value of toggleStateIconColor.
|
||||
*/
|
||||
getToggleStateIconColor(): TcHmi.SolidColor | null | undefined;
|
||||
/**
|
||||
* Processes the current toggleStateIconColor attribute value.
|
||||
*/
|
||||
protected __processToggleStateIconColor(): void;
|
||||
protected __processStateSymbolResult(data: TcHmi.Symbol.IReadResultObject<boolean>): void;
|
||||
/**
|
||||
* The watch callback for the StateSymbol.
|
||||
* @param data Object containing the new value of the StateSymbol.
|
||||
*/
|
||||
protected __onStateSymbolWatch(data: TcHmi.Symbol.IReadResultObject<boolean>): void;
|
||||
/**
|
||||
* @param valueNew
|
||||
*/
|
||||
setStateSymbol(valueNew: TcHmi.Symbol | null): void;
|
||||
/**
|
||||
*/
|
||||
getStateSymbol(): TcHmi.Symbol<boolean> | null | undefined;
|
||||
/**
|
||||
* Sets the text attribute to a new value.
|
||||
* @param valueNew The new value for the text attribute.
|
||||
*/
|
||||
setText(valueNew: string | null): void;
|
||||
/**
|
||||
* Returns the current value of the text attribute
|
||||
*/
|
||||
getText(): string | null | undefined;
|
||||
/**
|
||||
* Processes the current value of the text attribute.
|
||||
*/
|
||||
protected __processText(): void;
|
||||
/**
|
||||
* Sets the value of the member variable IgnoreEscapeSequences.
|
||||
* @param valueNew The new value for IgnoreEscapeSequences
|
||||
*/
|
||||
setIgnoreEscapeSequences(valueNew: boolean | null | undefined): void;
|
||||
/**
|
||||
* Returns the current value of IgnoreEscapeSequences.
|
||||
* @returns The current value of IgnoreEscapeSequences.
|
||||
*/
|
||||
getIgnoreEscapeSequences(): boolean | undefined;
|
||||
/**
|
||||
* Sets the textPosition attribute to a new value.
|
||||
* @param valueNew The new value for the textPosition attribute.
|
||||
*/
|
||||
setTextPosition(valueNew: TextPosition | null): void;
|
||||
/**
|
||||
* Returns the current value of the textPosition attribute
|
||||
*/
|
||||
getTextPosition(): TextPosition | undefined;
|
||||
/**
|
||||
* Processes the current value of the textPosition attribute.
|
||||
*/
|
||||
protected __processTextPosition(): void;
|
||||
/**
|
||||
* Sets the textHorizontalAlignment attribute to a new value.
|
||||
* @param valueNew The new value for the textHorizontalAlignment attribute.
|
||||
*/
|
||||
setTextHorizontalAlignment(valueNew: TcHmi.HorizontalAlignment | null): void;
|
||||
/**
|
||||
* Returns the current value of the textHorizontalAlignment attribute
|
||||
*/
|
||||
getTextHorizontalAlignment(): TcHmi.HorizontalAlignment | undefined;
|
||||
/**
|
||||
* Processes the current value of the textHorizontalAlignment attribute.
|
||||
*/
|
||||
protected __processTextHorizontalAlignment(): void;
|
||||
/**
|
||||
* Sets the textVerticalAlignment attribute to a new value.
|
||||
* @param valueNew The new value for the textVerticalAlignment attribute.
|
||||
*/
|
||||
setTextVerticalAlignment(valueNew: TcHmi.VerticalAlignment | null): void;
|
||||
/**
|
||||
* Returns the current value of the textVerticalAlignment attribute
|
||||
*/
|
||||
getTextVerticalAlignment(): TcHmi.VerticalAlignment | undefined;
|
||||
/**
|
||||
* Processes the current value of the textVerticalAlignment attribute.
|
||||
*/
|
||||
protected __processTextVerticalAlignment(): void;
|
||||
/**
|
||||
* Sets the textFontFamily attribute to a new value.
|
||||
* @param valueNew The new value for the textFontFamily attribute.
|
||||
*/
|
||||
setTextFontFamily(valueNew: TcHmi.FontFamily | null): void;
|
||||
/**
|
||||
* Returns the current value of the textFontFamily attribute
|
||||
*/
|
||||
getTextFontFamily(): string | null | undefined;
|
||||
/**
|
||||
* Processes the current value of the textFontFamily attribute.
|
||||
*/
|
||||
protected __processTextFontFamily(): void;
|
||||
/**
|
||||
* Sets the textFontSize attribute to a new value.
|
||||
* @param valueNew The new value for the textFontSize attribute.
|
||||
*/
|
||||
setTextFontSize(valueNew: number | null): void;
|
||||
/**
|
||||
* Returns the current value of the textFontSize attribute
|
||||
*/
|
||||
getTextFontSize(): number | null | undefined;
|
||||
/**
|
||||
* Processes the current value of the textFontSize attribute.
|
||||
*/
|
||||
protected __processTextFontSize(): void;
|
||||
/**
|
||||
* Sets the textFontSizeUnit attribute to a new value.
|
||||
* @param valueNew The new value for the textFontSizeUnit attribute.
|
||||
*/
|
||||
setTextFontSizeUnit(valueNew: TcHmi.FontSizeUnit | null): void;
|
||||
/**
|
||||
* Returns the current value of the textFontSizeUnit attribute
|
||||
*/
|
||||
getTextFontSizeUnit(): TcHmi.FontSizeUnit | undefined;
|
||||
/**
|
||||
* Processes the current value of the textFontSizeUnit attribute.
|
||||
*/
|
||||
protected __processTextFontSizeUnit(): void;
|
||||
/**
|
||||
* Sets the textFontStyle attribute to a new value.
|
||||
* @param valueNew The new value for the textFontStyle attribute.
|
||||
*/
|
||||
setTextFontStyle(valueNew: TcHmi.FontStyle | null): void;
|
||||
/**
|
||||
* Returns the current value of the textFontStyle attribute
|
||||
*/
|
||||
getTextFontStyle(): TcHmi.FontStyle | undefined;
|
||||
/**
|
||||
* Processes the current value of the textFontStyle attribute.
|
||||
*/
|
||||
protected __processTextFontStyle(): void;
|
||||
/**
|
||||
* Sets the textFontWeight attribute to a new value.
|
||||
* @param valueNew The new value for the textFontWeight attribute.
|
||||
*/
|
||||
setTextFontWeight(valueNew: TcHmi.FontWeight | null): void;
|
||||
/**
|
||||
* Returns the current value of the textFontWeight attribute
|
||||
*/
|
||||
getTextFontWeight(): TcHmi.FontWeight | undefined;
|
||||
/**
|
||||
* Processes the current value of the textFontWeight attribute.
|
||||
*/
|
||||
protected __processTextFontWeight(): void;
|
||||
/**
|
||||
* Sets the text color and calls the associated process function (processTextColor).
|
||||
* @param valueNew The new value for textColor.
|
||||
*/
|
||||
setTextColor(valueNew: TcHmi.SolidColor | null): void;
|
||||
/**
|
||||
* The watch callback for the textColor object resolver.
|
||||
* @param data Object containing the new value for textColor
|
||||
*/
|
||||
protected __onResolverForTextColorWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.SolidColor>): void;
|
||||
/**
|
||||
* Returns the current value of textColor.
|
||||
* @returns The current value of textColor.
|
||||
*/
|
||||
getTextColor(): TcHmi.SolidColor | null | undefined;
|
||||
/**
|
||||
* Processes the current textColor attribute value.
|
||||
*/
|
||||
protected __processTextColor(): void;
|
||||
/**
|
||||
* Returns the current background value.
|
||||
* @preserve (Part of the public API)
|
||||
*/
|
||||
getTextBackgroundColor(): TcHmi.Color | null | undefined;
|
||||
/**
|
||||
* Sets the background value and calls the associated process function (processBackground).
|
||||
* @param valueNew
|
||||
* @preserve (Part of the public API)
|
||||
*/
|
||||
setTextBackgroundColor(valueNew: TcHmi.Color | null): void;
|
||||
/**
|
||||
* The watch callback for the TextBackgroundColor object resolver.
|
||||
*/
|
||||
protected __onResolverForTextBackgroundColorWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.Color>): void;
|
||||
/**
|
||||
* Processes the current border-color attribute.
|
||||
*/
|
||||
protected __processTextBackgroundColor(): void;
|
||||
/**
|
||||
* Before 1.12 BackgroundColor was the checkbox itself, as we had no label...
|
||||
* So we have to move the processed overall background config to the checkbox element
|
||||
*/
|
||||
protected __processAllBackground(): void;
|
||||
/**
|
||||
* Processes the current border-radius attribute.
|
||||
*/
|
||||
protected __processBorderRadius(): 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 type TextPosition = 'Left' | 'Right';
|
||||
export { TcHmiCheckbox as Control };
|
||||
declare const _TcHmiCheckbox: typeof TcHmiCheckbox;
|
||||
type tTcHmiCheckbox = TcHmiCheckbox;
|
||||
type tTextPosition = TextPosition;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiCheckbox: typeof _TcHmiCheckbox;
|
||||
type TcHmiCheckbox = tTcHmiCheckbox;
|
||||
namespace TcHmiCheckbox {
|
||||
type TextPosition = tTextPosition;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
class="TcHmi_Controls_Beckhoff_TcHmiCheckbox-template tchmi-checkbox-template"
|
||||
version="1.1"
|
||||
baseProfile="full"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 30 30"
|
||||
>
|
||||
<path
|
||||
class="TcHmi_Controls_Beckhoff_TcHmiCheckbox-toggle-state-icon tchmi-checkbox-toggle-state-icon"
|
||||
d="M 9 18 L 13 22 L 22 9"
|
||||
fill="none"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 433 B |
@@ -0,0 +1,55 @@
|
||||
/** Styles for the theme: Base-Dark */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox,
|
||||
.tchmi-checkbox {
|
||||
--tchmi-background: var(--tchmi-background-color-4);
|
||||
--tchmi-background-active: var(--tchmi-highlight-color-1);
|
||||
--tchmi-stroke-active: var(--tchmi-foreground-color-1);
|
||||
--tchmi-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-border-color: var(--tchmi-background-color-2);
|
||||
color: var(--tchmi-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox-template {
|
||||
background-color: var(--tchmi-background);
|
||||
border: 1px solid var(--tchmi-border-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-toggle-state-icon,
|
||||
.tchmi-checkbox-toggle-state-icon {
|
||||
stroke: transparent;
|
||||
}
|
||||
|
||||
/* class TcHmi_Controls_Beckhoff_TcHmiCheckbox-active will be set/unset in the control */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox.tchmi-checkbox-active .tchmi-checkbox-template {
|
||||
background-color: var(--tchmi-background-active);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-toggle-state-icon,
|
||||
.tchmi-checkbox.tchmi-checkbox-active .tchmi-checkbox-toggle-state-icon {
|
||||
stroke: var(--tchmi-stroke-active);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.read-only .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox.read-only .tchmi-checkbox-template {
|
||||
background: var(--tchmi-read-only-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after,
|
||||
.tchmi-checkbox.tchmi-control-operate-disallowed::after {
|
||||
background-color: var(--tchmi-disabled-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-operate-disallowed,
|
||||
.tchmi-checkbox.tchmi-control-operate-disallowed {
|
||||
color: var(--tchmi-disallowed-BeckhoffControl-textcolor);
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-disabled,
|
||||
.tchmi-checkbox.tchmi-control-disabled {
|
||||
color: var(--tchmi-disabled-BeckhoffControl-textcolor);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/** Styles for the theme: Base */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox,
|
||||
.tchmi-checkbox {
|
||||
--tchmi-background: var(--tchmi-background-color-4);
|
||||
--tchmi-stroke-active: var(--tchmi-highlight-color-1);
|
||||
--tchmi-color: var(--tchmi-foreground-color-4);
|
||||
--tchmi-border-color: var(--tchmi-background-color-2);
|
||||
color: var(--tchmi-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox-template {
|
||||
background-color: var(--tchmi-background);
|
||||
border: 1px solid var(--tchmi-border-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-toggle-state-icon,
|
||||
.tchmi-checkbox-toggle-state-icon {
|
||||
stroke: transparent;
|
||||
}
|
||||
|
||||
/* class TcHmi_Controls_Beckhoff_TcHmiCheckbox-active will be set/unset in the control */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-toggle-state-icon,
|
||||
.tchmi-checkbox.tchmi-checkbox-active .tchmi-checkbox-toggle-state-icon {
|
||||
stroke: var(--tchmi-stroke-active);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.read-only .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template,
|
||||
.tchmi-checkbox.read-only .tchmi-checkbox-template {
|
||||
background: var(--tchmi-read-only-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after,
|
||||
.tchmi-checkbox.tchmi-control-operate-disallowed::after {
|
||||
background-color: var(--tchmi-disabled-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-operate-disallowed,
|
||||
.tchmi-checkbox.tchmi-control-operate-disallowed {
|
||||
color: var(--tchmi-disallowed-BeckhoffControl-textcolor);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCheckbox.TcHmi_Controls_System_TcHmiControl-disabled,
|
||||
.tchmi-checkbox.tchmi-control-disabled {
|
||||
color: var(--tchmi-disabled-BeckhoffControl-textcolor);
|
||||
}
|
||||
Reference in New Issue
Block a user