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,151 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiLoadingSpinner",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "Loading Spinner",
|
||||
"version": {
|
||||
"full": "14.4.1.0",
|
||||
"major": 14,
|
||||
"minor": 4,
|
||||
"build": 1,
|
||||
"revision": 0
|
||||
},
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"description": "Shows a Loading Spinner.",
|
||||
"base": "TcHmi.Controls.System.TcHmiControl",
|
||||
"defaultDesignerEvent": ".onPressed",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 50,
|
||||
"height": 50
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiLoadingSpinner/TcHmiLoadingSpinner.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-visibility",
|
||||
"propertyName": "Visibility",
|
||||
"propertySetterName": "setVisibility",
|
||||
"propertyGetterName": "getVisibility",
|
||||
"displayName": "Visibility",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/Visibility",
|
||||
"category": "Common",
|
||||
"description": "The visibility property can be used to hide (still receives pointer events) or collapse (does not use space or receive pointer events) an element and its childrens. Hidden still uses space in fluid calculations, collapsed is ignored there.\nCollapsed controls are skipped in layouting so it is much faster then opacity=0",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Visible"
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-color",
|
||||
"propertyName": "Color",
|
||||
"propertySetterName": "setColor",
|
||||
"propertyGetterName": "getColor",
|
||||
"displayName": "Color",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/SolidColor",
|
||||
"category": "Colors",
|
||||
"description": "Definition of the color of the spinner",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"allowSymbolExpressionsInObject": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-stroke-thickness",
|
||||
"propertyName": "StrokeThickness",
|
||||
"propertySetterName": "setStrokeThickness",
|
||||
"propertyGetterName": "getStrokeThickness",
|
||||
"displayName": "Stroke Thickness",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/MeasurementValue",
|
||||
"category": "Common",
|
||||
"description": "Specifies the stroke thickness of the spinner.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": 6
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-stroke-thickness-unit",
|
||||
"propertyName": "StrokeThicknessUnit",
|
||||
"propertyGetterName": "getStrokeThicknessUnit",
|
||||
"refTo": "StrokeThickness",
|
||||
"displayName": "Stroke Thickness Unit",
|
||||
"visible": true,
|
||||
"displayPriority": 50,
|
||||
"type": "tchmi:framework#/definitions/PixelUnit",
|
||||
"category": "Common",
|
||||
"description": "Is 'px'.",
|
||||
"readOnly": true,
|
||||
"bindable": false,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValueInternal": "px"
|
||||
}
|
||||
],
|
||||
"themedResources": [],
|
||||
"functions": [],
|
||||
"events": [],
|
||||
"dataTypes": [
|
||||
{
|
||||
"schema": "Schema/Types.Schema.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 505 B |
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiLoadingSpinner": {
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiLoadingSpinner",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmiLoadingSpinner": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiLoadingSpinner"
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiLoadingSpinner.SpinnerVelocity": {
|
||||
"title": "SpinnerVelocity",
|
||||
"type": "string",
|
||||
"enum": ["Slow", "Normal", "Fast"],
|
||||
"default": "Normal"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/** Styles for all themes */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0.5px; /* 0.5px top and 0.5px bottom */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner {
|
||||
height: calc(100% - 1px); /* 100% - 1px for not cutting off the edges */
|
||||
width: calc(100% - 1px); /* 100% - 1px for not cutting off the edges */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div {
|
||||
border: 6px solid black;
|
||||
border-radius: 50%;
|
||||
border-color: var(--TcHmi_Controls_Beckhoff_TcHmiTreeview-loading-spinner-color) transparent transparent transparent;
|
||||
/*centering*/
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
body:not(.tchmi-body-designer) .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div {
|
||||
animation: TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
}
|
||||
|
||||
body .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(1) {
|
||||
animation-delay: -0.45s; /* add "body" to selector, otherwise it would be overwritten by the tchmi-body-designer selector */
|
||||
}
|
||||
|
||||
body .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(2) {
|
||||
animation-delay: -0.3s; /* add "body" to selector, otherwise it would be overwritten by the tchmi-body-designer selector */
|
||||
}
|
||||
|
||||
body .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(3) {
|
||||
animation-delay: -0.15s; /* add "body" to selector, otherwise it would be overwritten by the tchmi-body-designer selector */
|
||||
}
|
||||
|
||||
body.tchmi-body-designer .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(1) {
|
||||
transform: rotate(85deg);
|
||||
}
|
||||
|
||||
body.tchmi-body-designer .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(2) {
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
body.tchmi-body-designer .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(3) {
|
||||
transform: rotate(220deg);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
// 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 TcHmiLoadingSpinner extends TcHmi.Controls.System.TcHmiControl {
|
||||
#private;
|
||||
protected __elementTemplateRoot: HTMLElement;
|
||||
/** The Loading spinner HTML element */
|
||||
protected __elementLoadingSpinner: HTMLElement;
|
||||
protected __loadingSpinnerDivs: NodeListOf<HTMLDivElement>;
|
||||
/** Internal reference to the attribute data-tchmi-color. */
|
||||
protected __spinnerColor: TcHmi.SolidColor | null | undefined;
|
||||
/** Internal reference to the attribute data-tchmi-stroke-thickness. */
|
||||
protected __strokeThickness: number | null | undefined;
|
||||
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;
|
||||
/**
|
||||
* Sets the spinner color and calls the associated process function (processColor).
|
||||
* @param valueNew The new value for spinnerColor.
|
||||
*/
|
||||
setColor(valueNew: TcHmi.SolidColor | null): void;
|
||||
/**
|
||||
* The watch callback for the spinnerColor object resolver.
|
||||
*/
|
||||
protected __onResolverForSpinnerColorWatchCallback(data: TcHmi.Symbol.ObjectResolver.IWatchResultObject<TcHmi.SolidColor>): void;
|
||||
/**
|
||||
* Returns the current value of spinnerColor.
|
||||
* @returns The current value of spinnerColor.
|
||||
*/
|
||||
getColor(): TcHmi.SolidColor | null | undefined;
|
||||
/**
|
||||
* Processes the current color attribute value.
|
||||
*/
|
||||
protected __processColor(): void;
|
||||
/**
|
||||
* Sets the value of the stroke thickness attribute.
|
||||
* @param valueNew
|
||||
* @preserve (Part of the public API)
|
||||
*/
|
||||
setStrokeThickness(valueNew: number | null): void;
|
||||
/**
|
||||
* Gets the value of the stroke thickness attribute.
|
||||
* @param valueNew
|
||||
* @preserve (Part of the public API)
|
||||
*/
|
||||
getStrokeThickness(): number | null | undefined;
|
||||
/**
|
||||
* Processes the current stroke thickness and stroke thickness unit value.
|
||||
*/
|
||||
protected __processStrokeThickness(): void;
|
||||
/**
|
||||
* Gets the value of the stroke thickness unit attribute.
|
||||
* @param valueNew
|
||||
* @preserve (Part of the public API)
|
||||
*/
|
||||
getStrokeThicknessUnit(): string;
|
||||
}
|
||||
export { TcHmiLoadingSpinner as Control };
|
||||
declare const _TcHmiLoadingSpinner: typeof TcHmiLoadingSpinner;
|
||||
type tTcHmiLoadingSpinner = TcHmiLoadingSpinner;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiLoadingSpinner: typeof _TcHmiLoadingSpinner;
|
||||
type TcHmiLoadingSpinner = tTcHmiLoadingSpinner;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-template tchmi-loading-spinner-template tchmi-box"></div>
|
||||
@@ -0,0 +1,6 @@
|
||||
/** Styles for base-dark theme */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner {
|
||||
--TcHmi_Controls_Beckhoff_TcHmiTreeview-loading-spinner-color: var(--tchmi-foreground-color-2);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/** Styles for base theme */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner {
|
||||
--TcHmi_Controls_Beckhoff_TcHmiTreeview-loading-spinner-color: var(--tchmi-foreground-color-1);
|
||||
}
|
||||
Reference in New Issue
Block a user