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,400 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiUserGuidance",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "User Guidance",
|
||||
"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 tab navigation control.",
|
||||
"defaultDesignerEvent": "",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 500,
|
||||
"height": 600
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiUserGuidance/TcHmiUserGuidance.esm.js",
|
||||
"type": "EsModule",
|
||||
"description": "Contains all the main logic as ES module."
|
||||
}
|
||||
],
|
||||
"themes": {
|
||||
"Base": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": "Theme dependent style"
|
||||
}
|
||||
]
|
||||
},
|
||||
"Base-Dark": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base-Dark/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": "Theme dependent style"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"attributes": [
|
||||
{
|
||||
"name": "data-tchmi-pages",
|
||||
"propertyName": "Pages",
|
||||
"propertySetterName": "setPages",
|
||||
"propertyGetterName": "getPages",
|
||||
"displayName": "Pages",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiUserGuidance.PageList",
|
||||
"category": "Common",
|
||||
"description": "A list of pages to be displayed in the control.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": [
|
||||
{
|
||||
"name": "page1",
|
||||
"displayName": "Page 1",
|
||||
"horizontalAlignment": "Left",
|
||||
"verticalAlignment": "Center"
|
||||
},
|
||||
{
|
||||
"name": "page2",
|
||||
"displayName": "Page 2",
|
||||
"horizontalAlignment": "Left",
|
||||
"verticalAlignment": "Center"
|
||||
},
|
||||
{
|
||||
"name": "page3",
|
||||
"displayName": "Page 3",
|
||||
"horizontalAlignment": "Left",
|
||||
"verticalAlignment": "Center"
|
||||
}
|
||||
],
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-progress-bar-alignment",
|
||||
"propertyName": "ProgressBarAlignment",
|
||||
"propertySetterName": "setProgressBarAlignment",
|
||||
"propertyGetterName": "getProgressBarAlignment",
|
||||
"displayName": "Progress Bar Alignment",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 11,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiUserGuidance.ProgressBarAlignment",
|
||||
"category": "Common",
|
||||
"description": "The alignment of the progress bar.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Left"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-active-page-name",
|
||||
"propertyName": "ActivePageName",
|
||||
"propertyGetterName": "getActivePageName",
|
||||
"displayName": "Active Page Name",
|
||||
"visible": true,
|
||||
"displayPriority": 12,
|
||||
"type": "tchmi:general#/definitions/String",
|
||||
"category": "Common",
|
||||
"description": "The name of the active page.",
|
||||
"readOnly": true,
|
||||
"bindable": false,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true
|
||||
},
|
||||
{
|
||||
"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 progress bar 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 progress bar text.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-text-padding",
|
||||
"propertyName": "TextPadding",
|
||||
"propertySetterName": "setTextPadding",
|
||||
"propertyGetterName": "getTextPadding",
|
||||
"displayName": "Text Padding",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 55,
|
||||
"type": "tchmi:framework#/definitions/Padding",
|
||||
"category": "Text",
|
||||
"description": "The distance of the text to the border in the progress bar.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"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 progress bar 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-guidance-finished",
|
||||
"propertyName": "GuidanceFinished",
|
||||
"propertyGetterName": "getGuidanceFinished",
|
||||
"displayName": "Guidance Finished",
|
||||
"visible": true,
|
||||
"displayPriority": 60,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Common",
|
||||
"description": "Is true when the user guidance process is finished.",
|
||||
"readOnly": true,
|
||||
"bindable": false,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true
|
||||
}
|
||||
],
|
||||
"attributeCategories": [
|
||||
{
|
||||
"name": "Text",
|
||||
"displayPriority": 500,
|
||||
"defaultCollapsed": true,
|
||||
"description": "Attributes defining the text of the control."
|
||||
}
|
||||
],
|
||||
"functions": [
|
||||
{
|
||||
"name": "restartUserGuidance",
|
||||
"displayName": "restartUserGuidance",
|
||||
"visible": true,
|
||||
"description": "Restarts the user guidance process.",
|
||||
"category": "Common",
|
||||
"heritable": true,
|
||||
"type": null,
|
||||
"params": [
|
||||
{
|
||||
"name": "force",
|
||||
"displayName": "Force",
|
||||
"description": "Force the restart even if the process is not finshed yet.",
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"bindable": true,
|
||||
"visible": true
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": ".onNextButtonPress",
|
||||
"displayName": ".onNextButtonPress",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The onNextButtonPress event is fired when the 'next' button is pressed.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onFinishButtonPress",
|
||||
"displayName": ".onFinishButtonPress",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The onFinishButtonPress event is fired when the 'Finish' button is pressed.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onBackButtonPress",
|
||||
"displayName": ".onBackButtonPress",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The onBackButtonPress event is fired when the 'back' button is pressed.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onCancelButtonPress",
|
||||
"displayName": ".onCancelButtonPress",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The onCancelButtonPress event is fired when the 'cancel' button is pressed.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
},
|
||||
{
|
||||
"name": ".onFinished",
|
||||
"displayName": ".onFinished",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The onFinished event is fired when the user guidance process is finished.",
|
||||
"heritable": true,
|
||||
"arguments": []
|
||||
}
|
||||
],
|
||||
"languages": {
|
||||
"en": "Lang/Language.en.json",
|
||||
"de": "Lang/Language.de.json"
|
||||
},
|
||||
"dataTypes": [
|
||||
{
|
||||
"schema": "Schema/Types.Schema.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "de",
|
||||
"localizedText": {
|
||||
"Cancel": "Abbrechen",
|
||||
"Next": "Weiter >",
|
||||
"Finish": "Fertigstellen",
|
||||
"Back": "< Zurück",
|
||||
"UserGuidanceFinished": "Die Benutzerführung ist beendet!"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "en",
|
||||
"localizedText": {
|
||||
"Cancel": "Cancel",
|
||||
"Next": "Next >",
|
||||
"Finish": "Finish",
|
||||
"Back": "< Previous",
|
||||
"UserGuidanceFinished": "The user guidance is finished!"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiUserGuidance": {
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiUserGuidance",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiUserGuidance.UserControlInterop": {
|
||||
"type": "object",
|
||||
"title": "User Control Interop",
|
||||
"description": "The User Control Interop object used by the User Guidance control. \nA User Control with a parameter of this type can enable the 'Next' button of the User Guidance control.",
|
||||
"properties": {
|
||||
"confirmNext": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"frameworkMetaType": "TcHmi.Controls.Beckhoff.TcHmiUserGuidance.UserControlInterop",
|
||||
"additionalProperties": false
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiUserGuidance.Page": {
|
||||
"type": "object",
|
||||
"title": "Page",
|
||||
"description": "A single page",
|
||||
"engineeringColumns": ["name"],
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string"
|
||||
},
|
||||
"displayName": {
|
||||
"type": "string"
|
||||
},
|
||||
"targetFile": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.System.TcHmiPopup.TargetFile"
|
||||
},
|
||||
"scrolling": {
|
||||
"$ref": "tchmi:framework#/definitions/ScrollMode"
|
||||
},
|
||||
"hidden": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"horizontalAlignment": {
|
||||
"$ref": "tchmi:framework#/definitions/HorizontalAlignment"
|
||||
},
|
||||
"verticalAlignment": {
|
||||
"$ref": "tchmi:framework#/definitions/VerticalAlignment"
|
||||
}
|
||||
},
|
||||
"propertiesMeta": [
|
||||
{
|
||||
"name": "name",
|
||||
"displayName": "Name",
|
||||
"category": "General",
|
||||
"displayPriority": 10,
|
||||
"description": "Name of the Page. Please select a unique name for each page!",
|
||||
"defaultValue": "newPage",
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "displayName",
|
||||
"displayName": "Display Name",
|
||||
"category": "General",
|
||||
"displayPriority": 10,
|
||||
"description": "Name of the Page that will be displayed in the progress bar.",
|
||||
"defaultValue": "New Page",
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "targetFile",
|
||||
"displayName": "Target File",
|
||||
"category": "General",
|
||||
"displayPriority": 11,
|
||||
"description": "The content or usercontrol to show.",
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "scrolling",
|
||||
"displayName": "Scrolling",
|
||||
"category": "General",
|
||||
"displayPriority": 16,
|
||||
"description": "Defines whether a content is scrollable. Possible values are No, Yes, Auto. Does not affect user controls.",
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Auto"
|
||||
},
|
||||
{
|
||||
"name": "hidden",
|
||||
"displayName": "Hidden",
|
||||
"category": "General",
|
||||
"displayPriority": 17,
|
||||
"description": "Defines whether the page is hidden or not.",
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": false
|
||||
},
|
||||
{
|
||||
"name": "horizontalAlignment",
|
||||
"displayName": "Horizontal Alignment",
|
||||
"category": "General",
|
||||
"displayPriority": 20,
|
||||
"description": "Horizontal alignment of the text in the progress bar.",
|
||||
"defaultValue": "Left",
|
||||
"defaultValueInternal": "Left"
|
||||
},
|
||||
{
|
||||
"name": "verticalAlignment",
|
||||
"displayName": "Vertical Alignment",
|
||||
"category": "General",
|
||||
"displayPriority": 21,
|
||||
"description": "Vertical alignment of the text in the progress bar.",
|
||||
"defaultValue": "Center",
|
||||
"defaultValueInternal": "Center"
|
||||
}
|
||||
],
|
||||
"additionalProperties": false,
|
||||
"required": ["name"]
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiUserGuidance.ProgressBarAlignment": {
|
||||
"type": "string",
|
||||
"enum": ["Top", "Bottom", "Right", "Left"]
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiUserGuidance.PageList": {
|
||||
"type": "array",
|
||||
"title": "Pages",
|
||||
"description": "A list of pages",
|
||||
"items": {
|
||||
"$ref": "#/definitions/TcHmi.Controls.Beckhoff.TcHmiUserGuidance.Page"
|
||||
}
|
||||
},
|
||||
"TcHmiUserGuidance": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiUserGuidance"
|
||||
}
|
||||
}
|
||||
}
|
||||
135
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiUserGuidance/Style.css
vendored
Normal file
135
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiUserGuidance/Style.css
vendored
Normal file
@@ -0,0 +1,135 @@
|
||||
/** Styles for all themes */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--tchmi-background-color-3);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-content-tabs {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-row-start: 2;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
background: var(--tchmi-background-color-3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-buttons {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template .user-guidance-button {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template
|
||||
.user-guidance-button.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-button-previous,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template
|
||||
.user-guidance-button.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-button-next {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template
|
||||
.user-guidance-button.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-button-cancel {
|
||||
margin-left: 10px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance > div > tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-contents,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance > div > tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-contents {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance > div > tchmi-content-tabs[tab-alignment='Top'] > tchmi-tab-contents,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance > div > tchmi-content-tabs[tab-alignment='Bottom'] > tchmi-tab-contents {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance .page-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
border-radius: 100%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance .page-icon span {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tchmi-user-guidance-tab-link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tchmi-user-guidance-tab-link .page-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tchmi-user-guidance-tab-link > .tab-name {
|
||||
max-width: calc(100% - 40px);
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance
|
||||
> div
|
||||
> tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:not([active]):not(:last-child)::after,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance
|
||||
> div
|
||||
> tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-links-overflow:not([active]):not(:last-child)::after {
|
||||
border-right: 0px !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance > div > tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance > div > tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links {
|
||||
min-width: min(200px, 30%) !important;
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
// 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 TcHmiUserGuidance extends TcHmi.Controls.System.TcHmiControl {
|
||||
#private;
|
||||
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
|
||||
protected __destroyParamChange: Map<string, TcHmi.DestroyFunction>;
|
||||
/** Reference to the root dom element of the current control template as HTMLElement. */
|
||||
protected __elementTemplateRoot: HTMLElement;
|
||||
/** Reference to the content tabs dom element of the control */
|
||||
protected __elementContentTabs: ContentTabs;
|
||||
/** Reference to the message element */
|
||||
protected __elementMessage: HTMLElement;
|
||||
/**The Next button*/
|
||||
protected __buttonNext: TcHmiButton;
|
||||
/**The Back button*/
|
||||
protected __buttonBack: TcHmiButton;
|
||||
/**The Cancel button*/
|
||||
protected __buttonCancel: TcHmiButton;
|
||||
/** Path to the Circles indicating the page status */
|
||||
protected __iconPath: string;
|
||||
/** Lists of pages and pages metadata to be displayed in the control */
|
||||
protected __pages: Page[] | null | undefined;
|
||||
protected __pagesMap: WeakMap<Page, PageMetadata>;
|
||||
protected __oldPages: Page[] | null | undefined;
|
||||
protected __oldPagesMap: WeakMap<Page, PageMetadata>;
|
||||
/** Marks if there is completely new data for the pages attribute */
|
||||
protected __newPagesData: boolean;
|
||||
/** Cache the file host attributes to be able to pass symbols to the file host */
|
||||
protected __fileHostAttributesCache: Map<string, string | TcHmi.Dictionary<any> | undefined>;
|
||||
/** The name of the active page */
|
||||
protected __activePageName: string | undefined;
|
||||
/** The alignment of the progress bar */
|
||||
protected __progressBarAlignment: ContentTabs.TabAlignment | null | undefined;
|
||||
/** The horizontal alignment of the text */
|
||||
protected __textHorizontalAlignment: TcHmi.HorizontalAlignment | null | undefined;
|
||||
/** The vertical alignment of the text */
|
||||
protected __textVerticalAlignment: TcHmi.VerticalAlignment | null | undefined;
|
||||
/** The font size of the text */
|
||||
protected __textFontSize: number | undefined;
|
||||
/** The font size unit of text */
|
||||
protected __textFontSizeUnit: TcHmi.FontSizeUnit | undefined;
|
||||
/** The font family of the text */
|
||||
protected __textFontFamily: TcHmi.FontFamily | null | undefined;
|
||||
/** The font style of the text */
|
||||
protected __textFontStyle: TcHmi.FontStyle | undefined;
|
||||
/** The font weight of the text */
|
||||
protected __textFontWeight: TcHmi.FontWeight | undefined;
|
||||
/** The padding of the text */
|
||||
protected __textPadding: TcHmi.FourSidedCss | null | undefined;
|
||||
/** Visibility of the Control */
|
||||
protected __guidanceFinished: boolean;
|
||||
/** Number of pages shown in control */
|
||||
protected __maximumNumberOfPages: number;
|
||||
protected __elementSVG: HTMLElement;
|
||||
/** Localization */
|
||||
protected __localizedElements: Map<HTMLElement, {
|
||||
key: string;
|
||||
parameters?: any[];
|
||||
}>;
|
||||
protected __localizationReader: TcHmi.Locale.LocalizationReader | undefined;
|
||||
protected __asyncWorkData: IControlSpecificData;
|
||||
/**
|
||||
* 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;
|
||||
protected __doAsyncWork(timestamp?: number): void;
|
||||
/**
|
||||
* Event watching the Parameters of UserControls
|
||||
* Changes button states if necessary
|
||||
*/
|
||||
protected __onParamChange(page: Page): (event: TcHmi.EventProvider.Event, data: any) => void;
|
||||
/**
|
||||
* EventHandler for the onResized event.
|
||||
*/
|
||||
protected __onResized(): void;
|
||||
/**
|
||||
* Determine maximum number of pages displayed due to the size of the content pages.
|
||||
*/
|
||||
protected __updateMaximumNumberOfPages(): void;
|
||||
/**
|
||||
* Enable buttons and set correct localization to them.
|
||||
*/
|
||||
protected __updateButtons(activePageIndex: number): void;
|
||||
/**
|
||||
* Event for the Next Button.
|
||||
*/
|
||||
protected __openNextPage(event: TcHmi.EventProvider.Event): void;
|
||||
/**
|
||||
* Event for the Back Button.
|
||||
*/
|
||||
protected __openPreviousPage(event: TcHmi.EventProvider.Event): void;
|
||||
/**
|
||||
* Event for pressing the Cancel Button.
|
||||
*/
|
||||
protected __onButtonCancel(event: TcHmi.EventProvider.Event): void;
|
||||
/**
|
||||
* Reloads the lines connecting the Status Icons of each page
|
||||
*/
|
||||
protected __updatePageLines(): void;
|
||||
/**
|
||||
* Builds the file host instance based on TargetFile and TargetFileHostAttributes for a single page
|
||||
* and appends it to the pages contentElement.
|
||||
*/
|
||||
protected __buildFileHost(page: Page): void;
|
||||
/** Append the target file host of a specific page to its contentElement */
|
||||
protected __attachTargetFileHost(page: Page): void;
|
||||
/** Detach target file host */
|
||||
protected __detachTargetFileHost(page: Page): void;
|
||||
/**
|
||||
* Build the link element for a single page.
|
||||
* @param page
|
||||
*/
|
||||
protected __buildLink(page: Page): void;
|
||||
/**
|
||||
* Build the icon element for a page if the icon data is given.
|
||||
*/
|
||||
protected __buildIcon(page: Page): void;
|
||||
/**
|
||||
* Remove pages from the control and destroy the file host.
|
||||
* @param pages
|
||||
*/
|
||||
protected __removePages(pages: Page[] | null | undefined, destroy?: boolean): void;
|
||||
/**
|
||||
* Reset the current progress of the control.
|
||||
*/
|
||||
protected __reset(): void;
|
||||
/**
|
||||
* Sets the content value and calls the associated process function (processPages).
|
||||
* @param valueNew The new value for the pages attribute.
|
||||
*/
|
||||
setPages(valueNew: Page[] | null): void;
|
||||
/**
|
||||
* The watch callback for the pages object resolver.
|
||||
*/
|
||||
protected __onResolverForPagesWatchCallback: (data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<Page[]>) => void;
|
||||
/**
|
||||
* Returns the current value of the pages attribute.
|
||||
*/
|
||||
getPages(): Page[] | null | undefined;
|
||||
/**
|
||||
* Processes the pages.
|
||||
*/
|
||||
protected __processPages(direction?: number): void;
|
||||
protected __selectDisplayedPages(activePageIndex: number, pages: Page[]): void;
|
||||
/**
|
||||
* Returns an object with proportion values.
|
||||
*/
|
||||
protected __getProportions(oldIconBCR: DOMRect, IconBCR: DOMRect, oldNameBCR: DOMRect, nameBCR: DOMRect, currentBCR: DOMRect): {
|
||||
oldIconBCRWidth: number;
|
||||
oldIconBCRHeight: number;
|
||||
oldIconBCRLeft: number;
|
||||
oldIconBCRRight: number;
|
||||
oldIconBCRTop: number;
|
||||
oldIconBCRBottom: number;
|
||||
IconBCRWidth: number;
|
||||
IconBCRHeight: number;
|
||||
IconBCRLeft: number;
|
||||
IconBCRRight: number;
|
||||
IconBCRTop: number;
|
||||
IconBCRBottom: number;
|
||||
oldNameBCRWidth: number;
|
||||
oldNameBCRHeight: number;
|
||||
oldNameBCRLeft: number;
|
||||
oldNameBCRRight: number;
|
||||
oldNameBCRTop: number;
|
||||
oldNameBCRBottom: number;
|
||||
nameBCRWidth: number;
|
||||
nameBCRHeight: number;
|
||||
nameBCRLeft: number;
|
||||
nameBCRRight: number;
|
||||
nameBCRTop: number;
|
||||
nameBCRBottom: number;
|
||||
currentBCRWidth: number;
|
||||
currentBCRHeight: number;
|
||||
currentBCRLeft: number;
|
||||
currentBCRRight: number;
|
||||
currentBCRTop: number;
|
||||
currentBCRBottom: number;
|
||||
};
|
||||
protected drawSVG(target: SVGLineElement, oldIconBCR: DOMRect, IconBCR: DOMRect, oldNameBCR: DOMRect, nameBCR: DOMRect): void;
|
||||
/**
|
||||
* Sets the PageAlignment attribute.
|
||||
* @param valueNew The new value for PageAlignment.
|
||||
*/
|
||||
setProgressBarAlignment(valueNew: ContentTabs.TabAlignment | null): void;
|
||||
/**
|
||||
* Returns the current value of ProgressBarAlignment.
|
||||
*/
|
||||
getProgressBarAlignment(): ContentTabs.TabAlignment | null | undefined;
|
||||
/**
|
||||
* Processes the current value of attribute ProgressBarAlignment.
|
||||
*/
|
||||
protected __processProgressBarAlignment(): void;
|
||||
/**
|
||||
* Returns the current value of ActivePageName.
|
||||
*/
|
||||
getActivePageName(): string | undefined;
|
||||
/**
|
||||
* Processes the current border-radius attribute.
|
||||
*/
|
||||
protected __processBorderRadius(): void;
|
||||
/**
|
||||
* Sets the textHorizontalAlignment value and calls the associated process function (processTextHorizontalAlignment).
|
||||
* @param valueNew The new value for textHorizontalAlignment.
|
||||
*/
|
||||
setTextHorizontalAlignment(valueNew: TcHmi.HorizontalAlignment | null): void;
|
||||
/**
|
||||
* Returns the current value of horizontalTextAligment.
|
||||
*/
|
||||
getTextHorizontalAlignment(): TcHmi.HorizontalAlignment | null | undefined;
|
||||
/**
|
||||
* Processes the current textHorizontalAlignment attribute value.
|
||||
*/
|
||||
protected __processTextHorizontalAlignment(): void;
|
||||
/**
|
||||
* Sets the textVerticalAlignment value and calls the associated process function (processTextVerticalAlignment).
|
||||
* @param valueNew The new value for textVerticalAlignment.
|
||||
*/
|
||||
setTextVerticalAlignment(valueNew: TcHmi.VerticalAlignment | null): void;
|
||||
/**
|
||||
* Returns the current value of textVerticalAlignment.
|
||||
*/
|
||||
getTextVerticalAlignment(): TcHmi.VerticalAlignment | null | undefined;
|
||||
/**
|
||||
* Processes the current textVerticalAlignment attribute value.
|
||||
*/
|
||||
protected __processTextVerticalAlignment(): void;
|
||||
/**
|
||||
* Sets the font size and calls the associated process function (processTextFontSize).
|
||||
* @param valueNew The new value for textFontSize.
|
||||
*/
|
||||
setTextFontSize(valueNew: number | null): void;
|
||||
/**
|
||||
* Returns the current value of textFontSize.
|
||||
*/
|
||||
getTextFontSize(): number | undefined;
|
||||
/**
|
||||
* Processes the current textFontSize attribute value.
|
||||
*/
|
||||
protected __processTextFontSize(): void;
|
||||
/**
|
||||
* Sets the font size and calls the associated process function (processTextFontSizeUnit).
|
||||
* @param valueNew The new value for textFontSizeUnit.
|
||||
*/
|
||||
setTextFontSizeUnit(valueNew: TcHmi.FontSizeUnit | null): void;
|
||||
/**
|
||||
* Returns the current value of textFontSizeUnit.
|
||||
*/
|
||||
getTextFontSizeUnit(): TcHmi.FontSizeUnit | undefined;
|
||||
/**
|
||||
* Processes the current textFontSizeUnit attribute value.
|
||||
*/
|
||||
protected __processTextFontSizeUnit(): void;
|
||||
/**
|
||||
* Sets the font family and calls the associated process function (processTextFontFamily).
|
||||
* @param valueNew The new value for textFontFamily.
|
||||
*/
|
||||
setTextFontFamily(valueNew: TcHmi.FontFamily | null): void;
|
||||
/**
|
||||
* Returns the current value of textFontFamily.
|
||||
*/
|
||||
getTextFontFamily(): string | null | undefined;
|
||||
/**
|
||||
* Processes the current textFontFamily attribute value.
|
||||
*/
|
||||
protected __processTextFontFamily(): void;
|
||||
/**
|
||||
* Sets the font style and calls the associated process function (processTextFontStyle).
|
||||
* @param valueNew The new value for textFontStyle.
|
||||
*/
|
||||
setTextFontStyle(valueNew: TcHmi.FontStyle | null): void;
|
||||
/**
|
||||
* Returns the current value of textFontStyle.
|
||||
*/
|
||||
getTextFontStyle(): TcHmi.FontStyle | undefined;
|
||||
/**
|
||||
* Processes the current textFontStyle attribute value.
|
||||
*/
|
||||
protected __processTextFontStyle(): void;
|
||||
/**
|
||||
* Sets the font weight and calls the associated process function (processTextFontWeight).
|
||||
* @param valueNew The new value for textFontWeight.
|
||||
*/
|
||||
setTextFontWeight(valueNew: TcHmi.FontWeight | null): void;
|
||||
/**
|
||||
* Returns the current value of textFontWeight.
|
||||
*/
|
||||
getTextFontWeight(): TcHmi.FontWeight | undefined;
|
||||
/**
|
||||
* Processes the current textFontWeight attribute value.
|
||||
*/
|
||||
protected __processTextFontWeight(): void;
|
||||
/**
|
||||
* Sets the value of the member variable "textPadding" if the new value is not equal to the current value
|
||||
* and calls the associated process function (processTextPadding) after that.
|
||||
* @param valueNew The new value for textPadding.
|
||||
*/
|
||||
setTextPadding(valueNew: TcHmi.FourSidedCss | null): void;
|
||||
/**
|
||||
* The watch callback for the textPadding object resolver.
|
||||
*/
|
||||
protected __onResolverForTextPaddingWatchCallback: (data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.FourSidedCss>) => void;
|
||||
/**
|
||||
* Returns the current value of the member variable textPadding.
|
||||
*/
|
||||
getTextPadding(): TcHmi.FourSidedCss | null | undefined;
|
||||
/**
|
||||
* Processes the current value of textPadding and forwards it to the target span element in template html.
|
||||
* The current value of textPadding is only forwarded if it is no binding expression.
|
||||
*/
|
||||
protected __processTextPadding(): void;
|
||||
/**
|
||||
* Sets if the guidance finished.
|
||||
*/
|
||||
protected __setGuidanceFinished(newValue: boolean): void;
|
||||
/**
|
||||
* Returns the value for user guidance finished.
|
||||
*/
|
||||
getGuidanceFinished(): boolean;
|
||||
/**
|
||||
* Restarts the user guidance process.
|
||||
*/
|
||||
restartUserGuidance(force?: boolean): void;
|
||||
}
|
||||
export interface IControlSpecificData extends TcHmi.Controls.System.TcHmiControl.IControlSpecificData {
|
||||
'Controls.Beckhoff.TcHmiUserGuidance.triggerUpdatePageLines': boolean;
|
||||
'Controls.Beckhoff.TcHmiUserGuidance.triggerUpdateMaximumNumberOfPages': boolean;
|
||||
}
|
||||
export interface Page {
|
||||
name: string;
|
||||
displayName: string;
|
||||
targetFile: TargetFile;
|
||||
scrolling?: 'No' | 'Yes' | 'Auto';
|
||||
hidden?: boolean;
|
||||
horizontalAlignment?: TcHmi.HorizontalAlignment;
|
||||
verticalAlignment?: TcHmi.VerticalAlignment;
|
||||
}
|
||||
export interface PageMetadata {
|
||||
fileHost?: TcHmi.Controls.System.TcHmiRegion | TcHmi.Controls.System.TcHmiUserControlHost;
|
||||
displayed?: boolean;
|
||||
linkElement?: HTMLElement;
|
||||
contentElement?: HTMLElement;
|
||||
icon?: PageIcon;
|
||||
iconElement?: HTMLElement;
|
||||
/**
|
||||
* Pages with Content files always allow proceeding to the next page.
|
||||
* Pages with usercontrols only allow proceeding to the next page if the usercontrol has a parameter controlling it.
|
||||
*/
|
||||
allowProceedToNextPage: boolean;
|
||||
nameElement: HTMLElement;
|
||||
}
|
||||
export type TargetFile = TcHmi.Controls.System.TcHmiPopup.TargetFile;
|
||||
export type PageIcon = 'Active' | 'Approved' | 'Done' | 'Default';
|
||||
export { TcHmiUserGuidance as Control };
|
||||
declare const _TcHmiUserGuidance: typeof TcHmiUserGuidance;
|
||||
type tTcHmiUserGuidance = TcHmiUserGuidance;
|
||||
type tIControlSpecificData = IControlSpecificData;
|
||||
type tPage = Page;
|
||||
type tPageMetadata = PageMetadata;
|
||||
type tTargetFile = TargetFile;
|
||||
type tPageIcon = PageIcon;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiUserGuidance: typeof _TcHmiUserGuidance;
|
||||
type TcHmiUserGuidance = tTcHmiUserGuidance;
|
||||
namespace TcHmiUserGuidance {
|
||||
type IControlSpecificData = tIControlSpecificData;
|
||||
type Page = tPage;
|
||||
type PageMetadata = tPageMetadata;
|
||||
type TargetFile = tTargetFile;
|
||||
type PageIcon = tPageIcon;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template tchmi-box">
|
||||
<svg class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-svg"></svg>
|
||||
<tchmi-content-tabs class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-content-tabs">
|
||||
<tchmi-tab-links> </tchmi-tab-links>
|
||||
<tchmi-tab-contents> </tchmi-tab-contents>
|
||||
</tchmi-content-tabs>
|
||||
<div
|
||||
class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-message"
|
||||
data-tchmi-localized-content-key="UserGuidanceFinished"
|
||||
style="display: none"
|
||||
></div>
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-buttons">
|
||||
<div
|
||||
id="{Id}_ButtonCancel"
|
||||
data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiButton"
|
||||
data-tchmi-text="%l%Control::TcHmi.Controls.Beckhoff.TcHmiUserGuidance::Cancel%/l%"
|
||||
class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-button-cancel"
|
||||
></div>
|
||||
<div
|
||||
id="{Id}_ButtonPrevious"
|
||||
data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiButton"
|
||||
data-tchmi-text="%l%Control::TcHmi.Controls.Beckhoff.TcHmiUserGuidance::Back%/l%"
|
||||
class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-button-previous"
|
||||
></div>
|
||||
<div
|
||||
id="{Id}_ButtonNext"
|
||||
data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiButton"
|
||||
data-tchmi-text="%l%Control::TcHmi.Controls.Beckhoff.TcHmiUserGuidance::Next%/l%"
|
||||
class="TcHmi_Controls_Beckhoff_TcHmiUserGuidance-button-next"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,108 @@
|
||||
/** Styles for the theme: Base-Dark */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance {
|
||||
--tchmi-page-background: var(--tchmi-background-color-3);
|
||||
--tchmi-message-background: var(--tchmi-background-color-1);
|
||||
--tchmi-message-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-page-line-color: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-icon-done-color: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-background: var(--tchmi-background-color-3);
|
||||
--tchmi-page-number-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-page-number-border: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-active-background: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-active-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-page-number-active-border: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-approved-background: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-approved-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-page-number-approved-border: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-done-background: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-done-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-page-number-done-border: var(--tchmi-ready-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-svg line {
|
||||
stroke: var(--tchmi-page-line-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-svg line.done {
|
||||
stroke: var(--tchmi-page-icon-done-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance .page-icon {
|
||||
background: var(--tchmi-page-number-background);
|
||||
color: var(--tchmi-page-number-color);
|
||||
border-color: var(--tchmi-page-number-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-tab-link .page-icon.active {
|
||||
background: radial-gradient(
|
||||
var(--tchmi-page-number-active-background) 55%,
|
||||
var(--tchmi-page-number-background) 60%
|
||||
);
|
||||
color: var(--tchmi-page-number-active-color);
|
||||
border-color: var(--tchmi-page-number-active-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-tab-link .page-icon.approved {
|
||||
background: radial-gradient(
|
||||
var(--tchmi-page-number-approved-background) 55%,
|
||||
var(--tchmi-page-number-background) 60%
|
||||
);
|
||||
color: var(--tchmi-page-number-approved-color);
|
||||
border-color: var(--tchmi-page-number-approved-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-tab-link .page-icon.done {
|
||||
background: var(--tchmi-page-number-done-background);
|
||||
color: var(--tchmi-page-number-done-color);
|
||||
border-color: var(--tchmi-page-number-done-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-message {
|
||||
background: var(--tchmi-message-background);
|
||||
color: var(--tchmi-message-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-content-tabs > tchmi-tab-links > tchmi-tab-link {
|
||||
background: var(--tchmi-page-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-NextButton,
|
||||
.tchmi-button {
|
||||
font-size: var(--tchmi-button-font-size);
|
||||
background: var(--tchmi-button-background);
|
||||
color: var(--tchmi-button-text-color);
|
||||
border: var(--tchmi-button-border);
|
||||
box-shadow: var(--tchmi-button-shadow);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-NextButton,
|
||||
.tchmi-button.down {
|
||||
background: var(--tchmi-button-background-pressed);
|
||||
color: var(--tchmi-button-text-color-pressed);
|
||||
border: var(--tchmi-button-border-pressed);
|
||||
box-shadow: var(--tchmi-button-shadow-pressed);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-BackButton,
|
||||
.tchmi-button {
|
||||
font-size: var(--tchmi-button-font-size);
|
||||
background: var(--tchmi-button-background);
|
||||
color: var(--tchmi-button-text-color);
|
||||
border: var(--tchmi-button-border);
|
||||
box-shadow: var(--tchmi-button-shadow);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-BackButton,
|
||||
.tchmi-button.down {
|
||||
background: var(--tchmi-button-background-pressed);
|
||||
color: var(--tchmi-button-text-color-pressed);
|
||||
border: var(--tchmi-button-border-pressed);
|
||||
box-shadow: var(--tchmi-button-shadow-pressed);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template
|
||||
> tchmi-content-tabs
|
||||
> tchmi-tab-links
|
||||
> tchmi-tab-link:not([disabled])[active] {
|
||||
background: var(--tchmi-page-background);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/** Styles for the theme: Base */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance {
|
||||
--tchmi-page-background: var(--tchmi-background-color-3);
|
||||
--tchmi-message-background: var(--tchmi-background-color-1);
|
||||
--tchmi-message-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-page-line-color: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-icon-done-color: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-background: var(--tchmi-background-color-3);
|
||||
--tchmi-page-number-color: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-border: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-active-background: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-active-color: var(--tchmi-foreground-color-2);
|
||||
--tchmi-page-number-active-border: var(--tchmi-highlight-color-1);
|
||||
--tchmi-page-number-approved-background: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-approved-color: var(--tchmi-foreground-color-2);
|
||||
--tchmi-page-number-approved-border: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-done-background: var(--tchmi-ready-color);
|
||||
--tchmi-page-number-done-color: var(--tchmi-foreground-color-2);
|
||||
--tchmi-page-number-done-border: var(--tchmi-ready-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-svg line {
|
||||
stroke: var(--tchmi-page-line-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template-svg line.done {
|
||||
stroke: var(--tchmi-page-icon-done-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance .page-icon {
|
||||
background: var(--tchmi-page-number-background);
|
||||
color: var(--tchmi-page-number-color);
|
||||
border-color: var(--tchmi-page-number-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-tab-link .page-icon.active {
|
||||
background: radial-gradient(
|
||||
var(--tchmi-page-number-active-background) 55%,
|
||||
var(--tchmi-page-number-background) 60%
|
||||
);
|
||||
color: var(--tchmi-page-number-active-color);
|
||||
border-color: var(--tchmi-page-number-active-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-tab-link .page-icon.approved {
|
||||
background: radial-gradient(
|
||||
var(--tchmi-page-number-approved-background) 55%,
|
||||
var(--tchmi-page-number-background) 60%
|
||||
);
|
||||
color: var(--tchmi-page-number-approved-color);
|
||||
border-color: var(--tchmi-page-number-approved-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-tab-link .page-icon.done {
|
||||
background: var(--tchmi-page-number-done-background);
|
||||
color: var(--tchmi-page-number-done-color);
|
||||
border-color: var(--tchmi-page-number-done-border);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-message {
|
||||
background: var(--tchmi-message-background);
|
||||
color: var(--tchmi-message-color);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance tchmi-content-tabs > tchmi-tab-links > tchmi-tab-link {
|
||||
background: var(--tchmi-page-background);
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-NextButton,
|
||||
.tchmi-button {
|
||||
font-size: var(--tchmi-button-font-size);
|
||||
background: var(--tchmi-button-background);
|
||||
color: var(--tchmi-button-text-color);
|
||||
border: var(--tchmi-button-border);
|
||||
box-shadow: var(--tchmi-button-shadow);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-NextButton,
|
||||
.tchmi-button.down {
|
||||
background: var(--tchmi-button-background-pressed);
|
||||
color: var(--tchmi-button-text-color-pressed);
|
||||
border: var(--tchmi-button-border-pressed);
|
||||
box-shadow: var(--tchmi-button-shadow-pressed);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-BackButton,
|
||||
.tchmi-button {
|
||||
font-size: var(--tchmi-button-font-size);
|
||||
background: var(--tchmi-button-background);
|
||||
color: var(--tchmi-button-text-color);
|
||||
border: var(--tchmi-button-border);
|
||||
box-shadow: var(--tchmi-button-shadow);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-Template-BackButton,
|
||||
.tchmi-button.down {
|
||||
background: var(--tchmi-button-background-pressed);
|
||||
color: var(--tchmi-button-text-color-pressed);
|
||||
border: var(--tchmi-button-border-pressed);
|
||||
box-shadow: var(--tchmi-button-shadow-pressed);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiUserGuidance-template
|
||||
> tchmi-content-tabs
|
||||
> tchmi-tab-links
|
||||
> tchmi-tab-link:not([disabled])[active] {
|
||||
background: var(--tchmi-page-background);
|
||||
}
|
||||
Reference in New Issue
Block a user