Added minimal functionality for Robot teaching

- Added minimal HMI
- Added possibility to open and close all chamber doors
This commit is contained in:
2026-01-17 09:20:39 +01:00
parent 9f058db2a3
commit 2d11c43579
2274 changed files with 912690 additions and 162 deletions

View File

@@ -0,0 +1,75 @@
{
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
"apiVersion": 1,
"name": "TcHmiToggleSwitch",
"namespace": "TcHmi.Controls.Beckhoff",
"displayName": "Toggle Switch",
"version": {
"full": "14.4.1.0",
"major": 14,
"minor": 4,
"build": 1,
"revision": 0
},
"visible": true,
"themeable": "Standard",
"base": "TcHmi.Controls.Beckhoff.TcHmiCheckbox",
"description": "A simple Toggle Switch.",
"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/TcHmiToggleSwitch/TcHmiToggleSwitch.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": [],
"attributeCategories": [],
"functions": [],
"events": [],
"dataTypes": [
{
"schema": "Schema/Types.Schema.json"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 B

View File

@@ -0,0 +1,15 @@
{
"$schema": "http://json-schema.org/draft-04/schema",
"definitions": {
"TcHmi.Controls.Beckhoff.TcHmiToggleSwitch": {
"$schema": "http://json-schema.org/draft-04/schema",
"type": "object",
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
"frameworkControlType": "TcHmiToggleSwitch",
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
},
"TcHmiToggleSwitch": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiToggleSwitch"
}
}
}

View File

@@ -0,0 +1,32 @@
/** Styles for all themes */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch {
grid-template-columns: calc(var(--square-size) * 2) minmax(0, 1fr);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.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) * 2, calc(var(--square-size) * 2 + 5px));
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
position: relative;
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after {
content: '';
position: absolute;
top: auto;
left: 0;
height: var(--square-size);
width: calc(var(--square-size) * 2);
border-radius: calc(var(--square-size) / 2);
z-index: 100;
}
/* Adjust size of overlay only */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_System_TcHmiControl-disabled::after {
height: var(--square-size);
width: calc(var(--square-size) * 2);
border-radius: calc(var(--square-size) / 2);
}

View File

@@ -0,0 +1,51 @@
// 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 TcHmiToggleSwitch extends TcHmi.Controls.Beckhoff.TcHmiCheckbox {
#private;
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
/**
* 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;
/**
* Returns an event handler function for the onResized event.
*/
protected __onResized(): void;
/**
* Processes the current toggleStateIconColor attribute value.
*/
protected __processToggleStateIconColor(): void;
}
export { TcHmiToggleSwitch as Control };
declare const _TcHmiToggleSwitch: typeof TcHmiToggleSwitch;
type tTcHmiToggleSwitch = TcHmiToggleSwitch;
declare global {
namespace TcHmi.Controls.Beckhoff {
const TcHmiToggleSwitch: typeof _TcHmiToggleSwitch;
type TcHmiToggleSwitch = tTcHmiToggleSwitch;
}
}

View File

@@ -0,0 +1,3 @@
<div class="TcHmi_Controls_Beckhoff_TcHmiCheckbox-template">
<div class="TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator"></div>
</div>

View File

@@ -0,0 +1,50 @@
/** Styles for the theme: Base-Dark */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch {
--tchmi-background: var(--tchmi-background-color-4);
--tchmi-indicator: var(--tchmi-foreground-color-4);
--tchmi-indicator-active: var(--tchmi-foreground-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
background-color: var(--tchmi-background);
border-radius: calc(var(--square-size) / 2);
height: var(--square-size);
width: calc(var(--square-size) + var(--square-size));
border: 1px solid var(--tchmi-border-color);
transition: background-color 0.25s ease;
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
background-color: var(--tchmi-indicator);
--indicator-ratio: 0.618;
--indicator-size: calc((var(--square-size) - 2px) * var(--indicator-ratio));
--indicator-margin: calc((var(--square-size) - 2px) * (1 - var(--indicator-ratio)) / 2);
border-radius: 50%;
height: var(--indicator-size);
width: var(--indicator-size);
top: var(--indicator-margin);
left: var(--indicator-margin);
transition:
left 0.25s ease,
background-color 0.25s ease;
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
left: calc(var(--square-size) + var(--indicator-margin));
background: var(--tchmi-indicator-active);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.read-only .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
background: var(--tchmi-read-only-color);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after {
background-color: var(--tchmi-disabled-color);
}

View File

@@ -0,0 +1,50 @@
/** Styles for the theme: Base */
/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch {
--tchmi-background: var(--tchmi-background-color-4);
--tchmi-indicator: var(--tchmi-foreground-color-3);
--tchmi-indicator-active: var(--tchmi-highlight-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
background-color: var(--tchmi-background);
border-radius: calc(var(--square-size) / 2);
height: var(--square-size);
width: calc(var(--square-size) + var(--square-size));
border: 1px solid var(--tchmi-border-color);
transition: background-color 0.25s ease;
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
background: var(--tchmi-indicator);
--indicator-ratio: 0.618;
--indicator-size: calc((var(--square-size) - 2px) * var(--indicator-ratio));
--indicator-margin: calc((var(--square-size) - 2px) * (1 - var(--indicator-ratio)) / 2);
border-radius: 50%;
height: var(--indicator-size);
width: var(--indicator-size);
top: var(--indicator-margin);
left: var(--indicator-margin);
transition:
left 0.25s ease,
background-color 0.25s ease;
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_Beckhoff_TcHmiCheckbox-active
.TcHmi_Controls_Beckhoff_TcHmiCheckbox-template
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator {
left: calc(var(--square-size) + var(--indicator-margin));
background: var(--tchmi-indicator-active);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.read-only .TcHmi_Controls_Beckhoff_TcHmiCheckbox-template {
background: var(--tchmi-read-only-color);
}
.TcHmi_Controls_Beckhoff_TcHmiToggleSwitch.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after {
background-color: var(--tchmi-disabled-color);
}