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,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 |
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiCheckbox-template">
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiToggleSwitch-toggle-state-indicator"></div>
|
||||
</div>
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user