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,28 @@
|
||||
/** Context Menu */
|
||||
beckhoff-tchmi-context-menu-calculator {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator button {
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 5px;
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator hr {
|
||||
width: 60%;
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiCalculator",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "Calculator",
|
||||
"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 calculator control.",
|
||||
"defaultDesignerEvent": ".onValueChanged",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 350,
|
||||
"height": 400
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiCalculator/TcHmiCalculator.esm.js",
|
||||
"type": "EsModule",
|
||||
"description": "Contains all the main logic as ES module."
|
||||
},
|
||||
{
|
||||
"name": "./Lib/math.js",
|
||||
"type": "JavaScript",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "ContextMenu.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
}
|
||||
],
|
||||
"themes": {
|
||||
"Base": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": "Theme dependent style"
|
||||
},
|
||||
{
|
||||
"name": "Themes/Base/ContextMenu.css",
|
||||
"type": "Stylesheet",
|
||||
"description": "Theme dependent style"
|
||||
}
|
||||
]
|
||||
},
|
||||
"Base-Dark": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base-Dark/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": "Theme dependent style"
|
||||
},
|
||||
{
|
||||
"name": "Themes/Base-Dark/ContextMenu.css",
|
||||
"type": "Stylesheet",
|
||||
"description": "Theme dependent style"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"attributes": [
|
||||
{
|
||||
"name": "data-tchmi-result",
|
||||
"propertyName": "Result",
|
||||
"propertyGetterName": "getResult",
|
||||
"displayName": "Result",
|
||||
"visible": true,
|
||||
"type": "tchmi:general#/definitions/Number",
|
||||
"category": "Common",
|
||||
"description": "Result of the calculated term",
|
||||
"readOnly": true,
|
||||
"bindable": false,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-layout",
|
||||
"propertyName": "Layout",
|
||||
"propertySetterName": "setLayout",
|
||||
"propertyGetterName": "getLayout",
|
||||
"displayName": "Layout",
|
||||
"visible": true,
|
||||
"themeable": "Advanced",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCalculator.LayoutName",
|
||||
"category": "Common",
|
||||
"description": "The layout of the calculator.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": "Standard"
|
||||
}
|
||||
],
|
||||
"attributeCategories": [],
|
||||
"functions": [],
|
||||
"events": [
|
||||
{
|
||||
"name": ".onValueChanged",
|
||||
"displayName": ".onValueChanged",
|
||||
"visible": true,
|
||||
"displayPriority": 10,
|
||||
"category": "Control",
|
||||
"description": "The valuechanged event is fired when the result was changed. This event could be fired multiples times during a user interaction.",
|
||||
"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: 390 B |
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "de",
|
||||
"localizedText": {
|
||||
"CopyResult": "Ergebnis kopieren",
|
||||
"DeleteHistoryElement": "Eintrag löschen",
|
||||
"PasteClipboard": "Zwischenablage einfügen"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "en",
|
||||
"localizedText": {
|
||||
"CopyResult": "Copy result",
|
||||
"DeleteHistoryElement": "Delete entry",
|
||||
"PasteClipboard": "Paste clipboard"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiCalculator": {
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiCalculator",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmiCalculator": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCalculator"
|
||||
},
|
||||
"TcHmi.Controls.Beckhoff.TcHmiCalculator.LayoutName": {
|
||||
"type": "string",
|
||||
"enum": ["Standard", "Scientific"],
|
||||
"default": "Standard"
|
||||
}
|
||||
}
|
||||
}
|
||||
230
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiCalculator/Style.css
vendored
Normal file
230
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiCalculator/Style.css
vendored
Normal file
@@ -0,0 +1,230 @@
|
||||
/** Styles for all themes */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCalculator {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCalculator-template {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.calculator-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-bar-container {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
min-height: 28px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.full-display-container {
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 10px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.display-term-container {
|
||||
height: 25px;
|
||||
text-align: right;
|
||||
padding-top: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.display-result-term-container {
|
||||
height: 45px;
|
||||
text-align: right;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.display-term-span {
|
||||
font-size: 17px;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.display-result-term-input {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.keyboard-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.key-element {
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.key-span-element {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
inset: 4px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 17px;
|
||||
transition: font-size 0.1s ease-in-out;
|
||||
|
||||
&.key-span-element-rad-deg {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
&.key-span-element-smaller-font {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard-inner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.key-svg-element {
|
||||
stroke-width: 1.2px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.key-svg-path-element {
|
||||
}
|
||||
|
||||
.svg-scientific-icon-container {
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.svg-history-icon-container {
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.svg-history-copy-icon-container {
|
||||
position: relative;
|
||||
/*visibility: hidden;*/
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.svg-context-menu-span {
|
||||
font-size: 15px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.svg-history-delete-icon-container {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.svg-icon-container {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
border-radius: 10%;
|
||||
padding: 3px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.result-term-copy-icon-container {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.history-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 128px); /* 19px for the menu height and some as buffer */
|
||||
transition:
|
||||
top 0.3s cubic-bezier(0.33, 0, 0.2, 1),
|
||||
backdrop-filter 0.3s ease-in-out;
|
||||
position: absolute;
|
||||
top: 128px; /* 128px for the menu and display height */
|
||||
backdrop-filter: blur(2px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.hidden {
|
||||
top: 100%;
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.history-scroll-container {
|
||||
height: calc(100% - 25px);
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.history-menu-container {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.history-element {
|
||||
width: auto;
|
||||
height: 60px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
align-items: end;
|
||||
justify-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
background-color 0.1s ease-in-out,
|
||||
height 0.5s cubic-bezier(0.33, 0, 0.2, 1),
|
||||
padding 0.5s cubic-bezier(0.33, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.history-span-element {
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.history-span-element-term {
|
||||
word-spacing: 5px;
|
||||
}
|
||||
|
||||
.history-span-element-result {
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,391 @@
|
||||
// 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 global {
|
||||
namespace math {
|
||||
function evaluate(expression: string): number;
|
||||
}
|
||||
}
|
||||
|
||||
declare class TcHmiCalculator extends TcHmi.Controls.System.TcHmiControl {
|
||||
#private;
|
||||
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
|
||||
/** Reference to the current layout keys dom events destroy functions. */
|
||||
protected __destroyLayoutKeysDomEvents: TcHmi.DestroyFunction[];
|
||||
/** Reference to the menu keys dom events destroy functions. */
|
||||
protected __destroyMenuKeysDomEvents: TcHmi.DestroyFunction[];
|
||||
/** Reference to the history elements dom events destroy functions. */
|
||||
protected __destroyHistoryElementsDomEvents: TcHmi.DestroyFunction[];
|
||||
/** Internal reference to the attribute "data-tchmi-result" */
|
||||
protected __result: number | null | undefined;
|
||||
/** Internal reference to the attribute "data-tchmi-default-layout" */
|
||||
protected __layout: LayoutName | null | undefined;
|
||||
/** Reference to the root dom element of the current control template as HTMLElement. */
|
||||
protected __elementTemplateRoot: HTMLElement;
|
||||
/** Reference to the calculator container element. */
|
||||
protected __elementCalculatorContainer: HTMLElement;
|
||||
/** Reference to the calculator history container element. */
|
||||
protected __elementHistoryContainer: HTMLElement;
|
||||
/** Reference to the calculator history scroll container element. */
|
||||
protected __elementHistoryScrollContainer: HTMLElement;
|
||||
/** Reference to the calculator history menu container element. */
|
||||
protected __elementHistoryMenuContainer: HTMLElement;
|
||||
/** Reference to the calculator full display container element. */
|
||||
protected __elementFullDisplayContainer: HTMLElement;
|
||||
/** Reference to the calculator keyboard container element. */
|
||||
protected __elementKeyboardContainer: HTMLElement;
|
||||
/** Reference to the calculator display term container element. */
|
||||
protected __elementDisplayTermContainer: HTMLElement;
|
||||
/** Reference to the calculator display term input element. */
|
||||
protected __elementDisplayResultTermInput: HTMLInputElement;
|
||||
/** Reference to the calculator display result container element. */
|
||||
protected __elementDisplayResultTermContainer: HTMLElement;
|
||||
/** Reference to the calculator display result span element. */
|
||||
protected __elementDisplayTermSpan: HTMLSpanElement;
|
||||
/** Reference to the calculator menu bar container element. */
|
||||
protected __elementMenuBarContainer: HTMLElement;
|
||||
/** Reference to the calculator menu scientific icon element. */
|
||||
protected __elementScientificIcon: HTMLElement;
|
||||
/** Reference to the calculator menu history icon element. */
|
||||
protected __elementHistoryIcon: HTMLElement;
|
||||
/** Reference to the calculator delete history icon element. */
|
||||
protected __elementDeleteHistoryIcon: HTMLElement;
|
||||
/** Reference to the calculator copy icon container element. */
|
||||
protected __elementResultCopyIconContainer: HTMLElement;
|
||||
/** Reference to the calculator input context menu element. */
|
||||
protected __elementInputContextMenu: ContextMenu;
|
||||
/** The current layout object*/
|
||||
protected __layoutObject: Layout | undefined;
|
||||
/** Button elements of the current keyboard layout */
|
||||
protected __currentKeyboardButtons: WeakMap<Key, HTMLElement | SVGElement>;
|
||||
/** History elements of the calculator */
|
||||
protected __historyElements: HTMLElement[];
|
||||
/** Cache for history entries */
|
||||
protected __historyCache: HistoryEntry[];
|
||||
/** Display term buffer*/
|
||||
protected __displayTermBuffer: string[];
|
||||
/** Keep alive old value */
|
||||
protected __oldResult: string;
|
||||
/** Indicates if the last operation was an equation */
|
||||
protected __lastOperationWasEquation: boolean;
|
||||
/** Indicates if the calculator is in degrees mode */
|
||||
protected __isDeg: boolean;
|
||||
/** The current decimal separator*/
|
||||
protected __decimalSeparator: string;
|
||||
/** Localization */
|
||||
protected __localizedElements: Map<HTMLElement, {
|
||||
key: string;
|
||||
parameters?: any[];
|
||||
}>;
|
||||
protected __localizationReader: TcHmi.Locale.LocalizationReader | undefined;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* Add an element to be localized.
|
||||
* @param element The element.
|
||||
* @param key The localization key.
|
||||
* @param parameters Optional parameters to pass to tchmi_format_string.
|
||||
*/
|
||||
private __addLocalizedElement;
|
||||
/**
|
||||
* Remove a localized element.
|
||||
* @param element The element to remove.
|
||||
*/
|
||||
private __removeLocalizedElement;
|
||||
/**
|
||||
* Sets the result of the member variable result.
|
||||
* @param valueNew The new value for result
|
||||
*/
|
||||
private __setResult;
|
||||
/**
|
||||
* Returns the current value of the member variable result.
|
||||
* @returns the current value of the member variable result.
|
||||
*/
|
||||
getResult(): number | null | undefined;
|
||||
protected __openLayoutFileAsync(layout: Layout): void;
|
||||
/**
|
||||
* Adds event listeners to the current layout keys.
|
||||
* @returns
|
||||
*/
|
||||
protected __addEventsToCurrentLayoutKeys(): void;
|
||||
/**
|
||||
* EventHandler for the click event of the scientific layout key.
|
||||
*/
|
||||
protected __onScientificKeyClick(): void;
|
||||
/**
|
||||
* EventHandler for the onResized event.
|
||||
*/
|
||||
protected __onHistoryKeyClick(): void;
|
||||
/**
|
||||
* EventHandler for the click event of the delete all history icon.
|
||||
*/
|
||||
protected __onHistoryAllDeleteClick(): void;
|
||||
/**
|
||||
* EventHandler for the click event of the result copy icon.
|
||||
*/
|
||||
protected __onResultCopyClick(): void;
|
||||
/**
|
||||
* EventHandler for the click event of the display term span element.
|
||||
*/
|
||||
protected __onDisplayTermSpanClick(): void;
|
||||
/**
|
||||
* EventHandler for the paste event of the display result term input element.
|
||||
*/
|
||||
protected __onInputPaste(event: ClipboardEvent): void;
|
||||
/**
|
||||
* EventHandler for the click event of keyboard keys.
|
||||
*/
|
||||
protected __onKeyboardKeyClick(event: MouseEvent): void;
|
||||
/**
|
||||
* EventHandler for the pointerdown event of keyboard keys.
|
||||
*/
|
||||
protected __onKeyboardKeyPointerDown(event: MouseEvent): void;
|
||||
/**
|
||||
* EventHandler for the pointerup event of keyboard keys.
|
||||
*/
|
||||
protected __onKeyboardKeyPointerUp(event: MouseEvent): void;
|
||||
/**
|
||||
* EventHandler for the pointerleave event of keyboard keys.
|
||||
*/
|
||||
protected __onKeyboardKeyPointerLeave(event: MouseEvent): void;
|
||||
/**
|
||||
* EventHandler for the keydown event of the physical keyboard.
|
||||
* @param event The keyboard event
|
||||
*/
|
||||
protected __onKeyDown(event: KeyboardEvent): void;
|
||||
/**
|
||||
* sets the layout style (position, dimension, label) of the keys
|
||||
*/
|
||||
protected __setLayoutStyles(): void;
|
||||
/**
|
||||
* Serializes the key object to the display term and updates the display term buffer.
|
||||
* @param keyObj The key object to be serialized
|
||||
*/
|
||||
protected __serializeKeyToDisplay(keyObj: Key): void;
|
||||
/**
|
||||
* Adds term and calculated result to the history container.
|
||||
* @param historyEntry The history entry to be added, containing term and result.
|
||||
* @param comesFromCache If true, the history entry comes from cache and should not be saved again.
|
||||
*/
|
||||
protected __addToHistory(historyEntry: HistoryEntry, comesFromCache?: boolean): void;
|
||||
/**
|
||||
* Creates a context menu for the history element.
|
||||
* @param element The history element to create the context menu for.
|
||||
*/
|
||||
protected __createHistoryElementContextMenu(historyElement: HTMLDivElement): void;
|
||||
/**
|
||||
* Creates a context menu for the input element.
|
||||
* @param element The input element to create the context menu for.
|
||||
*/
|
||||
protected __createInputElementContextMenu(inputElement: HTMLInputElement): void;
|
||||
/**
|
||||
* EventHandler for the click event of a history element.
|
||||
* @param event The click event
|
||||
* @returns
|
||||
*/
|
||||
protected __onHistoryElementClick(event: Event): void;
|
||||
/**
|
||||
* EventHandler for the contextmenu event of a history element.
|
||||
* @param event The contextmenu event
|
||||
* @returns
|
||||
*/
|
||||
protected __onHistoryElementContextmenu(event: Event): void;
|
||||
/**
|
||||
* EventHandler for the pointerDown event.
|
||||
*/
|
||||
protected __onPointerDown(event: Event): void;
|
||||
/**
|
||||
* Repairs the display term buffer by iterating over the input value and replacing special characters with their corresponding values.
|
||||
*/
|
||||
protected __repairDisplayTermBuffer(): void;
|
||||
/**
|
||||
* EventHandler for the click event of the copy icon in the context menu of a history element.
|
||||
* @param historyElement The history element that was clicked.
|
||||
* @param contextMenu The context menu that was opened.
|
||||
* @returns
|
||||
*/
|
||||
protected __onHistoryElementCopyClick(historyElement: HTMLElement, contextMenu: ContextMenu): void;
|
||||
/**
|
||||
* EventHandler for the click event of the copy icon in the context menu of a input element.
|
||||
* @param inputElement The input element that was clicked.
|
||||
* @param contextMenu The context menu that was opened.
|
||||
* @returns
|
||||
*/
|
||||
protected __onInputElementCopyClick(inputElement: HTMLInputElement, contextMenu: ContextMenu): void;
|
||||
/**
|
||||
* EventHandler for the click event of the delete icon in the context menu of a history element.
|
||||
* @param historyElement The history element that was clicked.
|
||||
* @param contextMenu The context menu that was opened.
|
||||
*/
|
||||
protected __onHistoryElementDeleteClick(historyElement: HTMLElement, contextMenu: ContextMenu): void;
|
||||
/**
|
||||
* EventHandler for the click event of the paste icon in the context menu of a input element.
|
||||
* @param inputElement The input element that was clicked.
|
||||
* @param contextMenu The context menu that was opened.
|
||||
*/
|
||||
protected __onInputElementPasteClick(inputElement: HTMLInputElement, contextMenu: ContextMenu): void;
|
||||
/**
|
||||
* Deletes the history elements and their events.
|
||||
* @param elements The elements to be deleted. Can be a single HTMLElement or an array of HTMLElements.
|
||||
*/
|
||||
protected __deleteHistoryAndEvents(elements: HTMLElement | HTMLElement[]): void;
|
||||
protected __extractLastNumberFromBuffer(): string;
|
||||
/**
|
||||
* Writes the display term buffer to the display term input field.
|
||||
*/
|
||||
protected __writeBufferToDisplayTermInput(): void;
|
||||
/**
|
||||
* Parses the term and replaces special characters with their corresponding values.
|
||||
* @param term The term to be parsed
|
||||
* @returns The parsed term
|
||||
*/
|
||||
protected __parseTermToCalc(term: string): string;
|
||||
/**
|
||||
* Replaces (nested) mathematical expressions like log, ln, and square root with their corresponding function calls.
|
||||
* @param expr The expression to be modified
|
||||
* @returns The modified expression with log and ln replaced
|
||||
*/
|
||||
protected __replaceMathExpressions(expr: string): string;
|
||||
/**
|
||||
* Parses the term and replaces special characters with their corresponding values.
|
||||
* @param term The term to be parsed
|
||||
* @returns The parsed term
|
||||
*/
|
||||
protected __parseTermToDisplay(term: string): string;
|
||||
/**
|
||||
* Calculates the term and returns the result.
|
||||
* @param term The term to be calculated
|
||||
* @returns The result of the calculation
|
||||
*/
|
||||
protected __calculateTerm(term: string): {
|
||||
value: number;
|
||||
error: string | undefined;
|
||||
};
|
||||
/**
|
||||
* Opens a layout file and returns the layout object.
|
||||
* @param layoutFile The name of the layout file to be opened (without the .js extension)
|
||||
* @returns The layout object
|
||||
*/
|
||||
protected __openLayoutFile(layoutFile: LayoutName): Promise<Layout>;
|
||||
/**
|
||||
* Get last math operation
|
||||
* @param term The term to extract the last math operation from
|
||||
* @returns The last math operation as string
|
||||
*/
|
||||
protected __getLastMathOperation(term: string): string;
|
||||
/**
|
||||
* Merges single letter math functions in the buffer back into logical operators.
|
||||
*/
|
||||
protected __mergeMathFunctionsInBuffer(): void;
|
||||
protected __insertDeg(expr: string): string;
|
||||
/**
|
||||
* Sets the value of layout
|
||||
* @param valueNew The new value for layout
|
||||
* Possible Values: Standard, Scientific
|
||||
*/
|
||||
setLayout(valueNew: LayoutName | null): void;
|
||||
/**
|
||||
* Returns the current value of layout.
|
||||
* @returns The current value of layout.
|
||||
*/
|
||||
getLayout(): LayoutName | null | undefined;
|
||||
/**
|
||||
* Processes the current layout attribute value.
|
||||
*/
|
||||
__processLayout(): void;
|
||||
}
|
||||
type LayoutName = 'Scientific' | 'Standard';
|
||||
export interface Layout {
|
||||
name: string;
|
||||
keys: Key[];
|
||||
dimensions: Dimensions;
|
||||
}
|
||||
interface Key {
|
||||
geometry: Geometry;
|
||||
key: string;
|
||||
label: string | SvgLabelDefinition;
|
||||
}
|
||||
interface Geometry {
|
||||
/** Definition as percent of the full keyboard */
|
||||
top: number;
|
||||
/** Definition as percent of the full keyboard */
|
||||
left: number;
|
||||
/** Definition as percent of the full keyboard */
|
||||
width: number;
|
||||
/** Definition as percent of the full keyboard */
|
||||
height: number;
|
||||
}
|
||||
interface Dimensions {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
interface SvgLabelDefinition {
|
||||
type: string;
|
||||
svg: {
|
||||
dimensions: Dimensions;
|
||||
path: string;
|
||||
};
|
||||
}
|
||||
interface HistoryEntry {
|
||||
term: string;
|
||||
result: string;
|
||||
}
|
||||
export { TcHmiCalculator as Control };
|
||||
declare const _TcHmiCalculator: typeof TcHmiCalculator;
|
||||
type tTcHmiCalculator = TcHmiCalculator;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiCalculator: typeof _TcHmiCalculator;
|
||||
type TcHmiCalculator = tTcHmiCalculator;
|
||||
}
|
||||
}
|
||||
|
||||
export declare class ContextMenu extends HTMLElement {
|
||||
private __target;
|
||||
private __container;
|
||||
private __isShowing;
|
||||
private __contextMenuOnCb?;
|
||||
constructor(target: HTMLElement, container: HTMLElement);
|
||||
connectedCallback(): void;
|
||||
disconnectedCallback(): void;
|
||||
toggleMenuOn(): void;
|
||||
toggleMenuOff(): void;
|
||||
removeTargetContextMenuEventListener(): void;
|
||||
set contextMenuOnCb(cb: () => any | undefined);
|
||||
private __addEvents;
|
||||
private __removeEvents;
|
||||
private __onContextMenu;
|
||||
private __onClickAway;
|
||||
private __onEscape;
|
||||
private __positionMenu;
|
||||
}
|
||||
|
||||
|
||||
export declare const layout: Layout;
|
||||
|
||||
|
||||
export declare const layout: Layout;
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiCalculator-template tchmi-box" tabindex="0">
|
||||
<div class="calculator-container">
|
||||
<div class="full-display-container">
|
||||
<div class="menu-bar-container"></div>
|
||||
<div class="display-term-container">
|
||||
<span class="display-term-span"></span>
|
||||
</div>
|
||||
<div class="display-result-term-container">
|
||||
<div class="result-term-copy-icon-container svg-icon-container"></div>
|
||||
<input class="display-result-term-input" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-container"></div>
|
||||
</div>
|
||||
<div class="history-container hidden">
|
||||
<div class="history-scroll-container"></div>
|
||||
<div class="history-menu-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
/* Base-Dark Theme */
|
||||
beckhoff-tchmi-context-menu-calculator {
|
||||
background: #333;
|
||||
border: 1px solid #555;
|
||||
box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator hr {
|
||||
background: #333;
|
||||
border-top: 1px solid #666;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg id="Inhalt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><style>.cls-1{fill:#fff;fill-rule:evenodd;}</style></defs><path class="cls-1" d="M59.5,46.97l-9.95-10.29c-1.57-1.63-2.44-3.77-2.44-6.04v-11.15h1.96c.59,0,1.08-.48,1.08-1.08s-.48-1.08-1.08-1.08H30.78c-.59,0-1.08,.48-1.08,1.08s.48,1.08,1.08,1.08h2.1v11.12c0,2.28-.88,4.43-2.47,6.07l-10.04,10.28c-1.57,1.6-2.43,3.72-2.43,5.96v6.37c0,.84,.33,1.63,.92,2.23,.6,.59,1.39,.92,2.23,.92H58.75c.84,0,1.63-.33,2.23-.92,.59-.6,.92-1.39,.92-2.23v-6.39c0-2.23-.85-4.33-2.4-5.93Zm-27.65-8.89c1.96-2.01,3.04-4.66,3.04-7.46v-11.12h10.22v11.15c0,2.79,1.07,5.42,3,7.43l6.55,6.77H25.24l6.61-6.77Zm28.05,21.21c0,.31-.12,.6-.34,.81-.22,.22-.51,.34-.81,.34H21.1c-.31,0-.6-.12-.81-.34s-.34-.51-.34-.81v-6.37c0-1.71,.66-3.33,1.86-4.56l1.48-1.51H56.6l1.47,1.52c1.18,1.22,1.84,2.83,1.84,4.54v6.39Z"/><path class="cls-1" d="M19.04,37.48c.26,0,.51-.09,.71-.26l8.43-7.32c.45-.39,.5-1.07,.11-1.52-.03-.04-.07-.07-.11-.11l-8.43-7.32c-.45-.39-1.13-.34-1.52,.11-.17,.2-.26,.45-.26,.71v14.64c0,.59,.48,1.08,1.08,1.08Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,104 @@
|
||||
/** Styles for the theme: Base-Dark */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCalculator {
|
||||
--tchmi-background: var(--tchmi-background-color-1);
|
||||
--tchmi-background-transparent: rgba(27, 27, 31, 0.8);
|
||||
--tchmi-display-background: var(--tchmi-background-color-3);
|
||||
--tchmi-display-border: var(--tchmi-background-color-2);
|
||||
--tchmi-button-text-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-button-background: var(--tchmi-background-color-2);
|
||||
--tchmi-button-border: 1px solid var(--tchmi-foreground-color-2);
|
||||
--tchmi-icon-background-pressed: rgba(163, 176, 187, 0.2);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCalculator-template {
|
||||
.key-svg-element {
|
||||
stroke: var(--tchmi-button-text-color);
|
||||
|
||||
&:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.key-span-element {
|
||||
color: var(--tchmi-button-text-color);
|
||||
}
|
||||
|
||||
.key-element {
|
||||
background-color: var(--tchmi-button-background);
|
||||
border: var(--tchmi-button-border);
|
||||
|
||||
&.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);
|
||||
}
|
||||
|
||||
&.number:not(.down) {
|
||||
background: #353535;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar-container {
|
||||
background-color: var(--tchmi-display-background);
|
||||
border-top: 1px solid var(--tchmi-display-border);
|
||||
border-left: 1px solid var(--tchmi-display-border);
|
||||
border-right: 1px solid var(--tchmi-display-border);
|
||||
}
|
||||
|
||||
.full-display-container {
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
|
||||
.display-term-container {
|
||||
background-color: var(--tchmi-display-background);
|
||||
border-left: 1px solid var(--tchmi-display-border);
|
||||
border-right: 1px solid var(--tchmi-display-border);
|
||||
}
|
||||
|
||||
.display-result-term-input {
|
||||
background-color: var(--tchmi-display-background);
|
||||
color: #f2ffff;
|
||||
}
|
||||
|
||||
.display-result-term-container {
|
||||
background-color: var(--tchmi-display-background);
|
||||
border-bottom: 1px solid var(--tchmi-display-border);
|
||||
border-left: 1px solid var(--tchmi-display-border);
|
||||
border-right: 1px solid var(--tchmi-display-border);
|
||||
}
|
||||
|
||||
.keyboard-container {
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
|
||||
.svg-icon-container {
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.svg-scientific-icon-container {
|
||||
background-image: url('Images/activate-recipe.svg');
|
||||
|
||||
&.active {
|
||||
background-color: var(--tchmi-icon-background-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.svg-history-icon-container {
|
||||
&.active {
|
||||
background-color: var(--tchmi-icon-background-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.history-container {
|
||||
background-color: var(--tchmi-background-transparent);
|
||||
}
|
||||
|
||||
.history-element {
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* Base Theme */
|
||||
beckhoff-tchmi-context-menu-calculator {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator button:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
beckhoff-tchmi-context-menu-calculator hr {
|
||||
background: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Inhalt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<style>.cls-1{fill:#4c6374;fill-rule:evenodd;}</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M59.5,46.97l-9.95-10.29c-1.57-1.63-2.44-3.77-2.44-6.04v-11.15h1.96c.59,0,1.08-.48,1.08-1.08s-.48-1.08-1.08-1.08H30.78c-.59,0-1.08,.48-1.08,1.08s.48,1.08,1.08,1.08h2.1v11.12c0,2.28-.88,4.43-2.47,6.07l-10.04,10.28c-1.57,1.6-2.43,3.72-2.43,5.96v6.37c0,.84,.33,1.63,.92,2.23,.6,.59,1.39,.92,2.23,.92H58.75c.84,0,1.63-.33,2.23-.92,.59-.6,.92-1.39,.92-2.23v-6.39c0-2.23-.85-4.33-2.4-5.93Zm-27.65-8.89c1.96-2.01,3.04-4.66,3.04-7.46v-11.12h10.22v11.15c0,2.79,1.07,5.42,3,7.43l6.55,6.77H25.24l6.61-6.77Zm28.05,21.21c0,.31-.12,.6-.34,.81-.22,.22-.51,.34-.81,.34H21.1c-.31,0-.6-.12-.81-.34s-.34-.51-.34-.81v-6.37c0-1.71,.66-3.33,1.86-4.56l1.48-1.51H56.6l1.47,1.52c1.18,1.22,1.84,2.83,1.84,4.54v6.39Z"/>
|
||||
<path class="cls-1" d="M19.04,37.48c.26,0,.51-.09,.71-.26l8.43-7.32c.45-.39,.5-1.07,.11-1.52-.03-.04-.07-.07-.11-.11l-8.43-7.32c-.45-.39-1.13-.34-1.52,.11-.17,.2-.26,.45-.26,.71v14.64c0,.59,.48,1.08,1.08,1.08Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,104 @@
|
||||
/** Styles for the theme: Base */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCalculator {
|
||||
--tchmi-background: var(--tchmi-background-color-1);
|
||||
--tchmi-background-transparent: rgba(246, 247, 248, 0.8);
|
||||
--tchmi-display-background: var(--tchmi-background-color-4);
|
||||
--tchmi-display-border: var(--tchmi-background-color-2);
|
||||
--tchmi-button-text-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-button-background: var(--tchmi-background-color-2);
|
||||
--tchmi-button-border: 1px solid var(--tchmi-foreground-color-3);
|
||||
--tchmi-icon-background-pressed: rgba(192, 192, 197, 0.3);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiCalculator-template {
|
||||
.key-svg-element {
|
||||
stroke: var(--tchmi-button-text-color);
|
||||
|
||||
&:active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.key-span-element {
|
||||
color: var(--tchmi-button-text-color);
|
||||
}
|
||||
|
||||
.key-element {
|
||||
background-color: var(--tchmi-button-background);
|
||||
border: var(--tchmi-button-border);
|
||||
|
||||
&.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);
|
||||
}
|
||||
|
||||
&.number:not(.down) {
|
||||
background: rgb(205 201 201);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar-container {
|
||||
background-color: var(--tchmi-display-background);
|
||||
border-top: 1px solid var(--tchmi-display-border);
|
||||
border-left: 1px solid var(--tchmi-display-border);
|
||||
border-right: 1px solid var(--tchmi-display-border);
|
||||
}
|
||||
|
||||
.full-display-container {
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
|
||||
.display-term-container {
|
||||
background-color: var(--tchmi-display-background);
|
||||
border-left: 1px solid var(--tchmi-display-border);
|
||||
border-right: 1px solid var(--tchmi-display-border);
|
||||
}
|
||||
|
||||
.display-result-term-container {
|
||||
background-color: var(--tchmi-display-background);
|
||||
border-bottom: 1px solid var(--tchmi-display-border);
|
||||
border-left: 1px solid var(--tchmi-display-border);
|
||||
border-right: 1px solid var(--tchmi-display-border);
|
||||
}
|
||||
|
||||
.display-result-term-input {
|
||||
background-color: var(--tchmi-display-background);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.keyboard-container {
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
|
||||
.svg-icon-container {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.svg-scientific-icon-container {
|
||||
background-image: url('Images/activate-recipe.svg');
|
||||
|
||||
&.active {
|
||||
background-color: var(--tchmi-icon-background-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.svg-history-icon-container {
|
||||
&.active {
|
||||
background-color: var(--tchmi-icon-background-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.history-container {
|
||||
background-color: var(--tchmi-background-transparent);
|
||||
}
|
||||
|
||||
.history-element {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user