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

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 B

View File

@@ -0,0 +1,154 @@
{
"$schema": "http://json-schema.org/draft-04/schema",
"definitions": {
"DropDownStyle": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.DropDownStyle"
},
"ListItem": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.ListItem"
},
"ListItemList": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.ListItemList"
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox": {
"$schema": "http://json-schema.org/draft-04/schema",
"type": "object",
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
"frameworkControlType": "TcHmiCombobox",
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox.DropDownStyle": {
"type": "string",
"enum": ["Classic", "Mobile"],
"default": "Classic"
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox.ImagePosition": {
"type": "string",
"enum": ["LeftOfText", "RightOfText"],
"default": "LeftOfText"
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox.ListItem": {
"title": "List Item",
"description": "List Item List",
"type": "object",
"engineeringColumns": ["id", "text", "value", "category"],
"propertiesMeta": [
{
"name": "id",
"displayName": "Id",
"category": "General",
"displayPriority": 10,
"description": "Numerical ID for this entry. Can be chosen freely, but must be unique.",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "text",
"displayName": "Text",
"category": "General",
"displayPriority": 10,
"description": "Text to show for this entry",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "value",
"displayName": "Value",
"category": "General",
"displayPriority": 10,
"description": "Value which is associated to this entry",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "category",
"displayName": "Category",
"category": "General",
"displayPriority": 10,
"description": "An optional category which will be displayed above the item as a label (like <optgroup> in HTML).\nConsecutive items that have the exact same category will all be displayed under one category.\nHowever, if two items have the same category, but are not back to back, the category will be displayed twice to preserve the original item order.\nFor example items with categories [A, A, B, A] will create the category A with two entries, one category B with a single entry and after that again the category A with a single entry.",
"defaultValue": null,
"defaultValueInternal": null
},
{
"name": "image",
"displayName": "Image",
"category": "General",
"displayPriority": 10,
"description": "An optional path to the image for this item.",
"defaultValue": null,
"defaultValueInternal": null
}
],
"properties": {
"id": {
"type": "number"
},
"text": {
"type": "string"
},
"value": {},
"category": {
"type": "string"
},
"image": {
"$ref": "tchmi:framework#/definitions/Path"
}
},
"additionalProperties": false,
"required": ["text"]
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox.SelectionChangedEventObject": {
"type": "object",
"properties": {
"id": {
"type": "number"
},
"text": {
"type": "string"
},
"value": {}
},
"additionalProperties": false
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox.ListItemList": {
"title": "ListItemList",
"description": "List Item List",
"engineeringDefaultDatatype": 0,
"anyOf": [
{
"type": "array",
"items": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.ListItem"
}
},
{
"type": "array"
},
{
"type": "object"
}
]
},
"TcHmiCombobox": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox"
},
"EnumDataSymbol": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.EnumDataSymbol"
},
"TcHmi.Controls.Beckhoff.TcHmiCombobox.EnumDataSymbol": {
"allOf": [
{
"$ref": "tchmi:framework#/definitions/Symbol"
},
{
"frameworkSymbolSubType": {
"$ref": "tchmi:general#/definitions/Object"
}
}
]
},
"TcHmiComboboxSelectionChangedEventObject": {
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiCombobox.SelectionChangedEventObject"
}
}
}

View File

@@ -0,0 +1,166 @@
/** Styles for all themes */
.TcHmi_Controls_Beckhoff_TcHmiCombobox,
.tchmi-combobox,
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown,
.tchmi-template-dropdown {
--tchmi-button-width: 26px;
--tchmi-padding: 3px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template,
.tchmi-combobox-template {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: transparent;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-focus-border,
.tchmi-combobox-template-focus-border {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
/*--------------------------------------------Button--------------------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button,
.tchmi-combobox-template-button {
height: 100%;
width: var(--tchmi-button-width);
position: absolute;
top: 0;
right: 0;
background-size: 100%;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
/*--------------------------------------------select--------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox-template-select {
top: 0px;
left: 0px;
height: 100%;
width: calc(100% - var(--tchmi-button-width));
white-space: nowrap;
overflow: hidden;
cursor: default;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
display: flex;
align-items: center;
text-align: left;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select-content,
.tchmi-combobox-template-select-content {
padding: var(--tchmi-padding);
top: 0;
right: 0;
bottom: 0;
left: var(--tchmi-padding); /*2px left 'padding'*/
width: 100%; /* needed for text-align from the parent */
border: none;
outline: none;
resize: none;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: hidden;
}
/*-----------------------table--------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown,
.tchmi-combobox-template .tchmi-combobox-template-dropdown {
display: none;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown,
.tchmi-combobox-template-dropdown {
position: absolute;
overflow: auto;
display: flex;
flex-direction: column;
min-height: 20px; /* empty source data should give click feedback */
min-width: 10px; /* empty source data should give click feedback */
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element,
.tchmi-combobox-template-dropdown-element {
white-space: nowrap;
cursor: default;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
display: flex;
align-items: center;
flex-shrink: 0;
max-height: var(--tchmi-data-height);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-category {
max-height: var(--tchmi-data-height);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-text,
.tchmi-combobox-template-dropdown-text {
white-space: pre;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
flex: 1;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-dropdown-image {
/** tchmi-data-height will be the attribute via the setter */
height: calc(var(--tchmi-data-height) - (2 * var(--tchmi-padding)));
max-height: calc(var(--tchmi-data-height) - (2 * var(--tchmi-padding)));
padding: var(--tchmi-padding);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-input,
.tchmi-combobox-template-input {
background: transparent;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
text-align: inherit;
white-space: pre;
overflow-x: hidden;
overflow-y: hidden;
padding: var(--tchmi-padding);
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: var(--tchmi-padding);
border: none;
outline: none;
resize: none;
box-sizing: border-box;
}
/* The main use for this control is interaction. So mark when this is not allowed. */
.TcHmi_Controls_Beckhoff_TcHmiCombobox.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after,
.tchmi-combobox.tchmi-control-operate-disallowed::after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 100;
cursor: not-allowed;
}

View File

@@ -0,0 +1,34 @@
<div class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template tchmi-combobox-template tchmi-box">
<div class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select tchmi-combobox-template-select tchmi-box">
<span
class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select-content tchmi-combobox-template-select-content"
></span>
</div>
<svg
class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button tchmi-combobox-template-button tchmi-box"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="30px"
height="100%"
viewBox="0 0 30 30"
enable-background="new 0 0 30 30"
xml:space="preserve"
>
<polyline
class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button-arrow tchmi-combobox-template-button-arrow"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
points="22.865,12.5 15,20.366 7.135,12.5"
/>
</svg>
<div
class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template-focus-border tchmi-combobox-template-focus-border tchmi-box tchmi-no-pointer-events"
></div>
<div
class="TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown tchmi-combobox-template-dropdown tchmi-box"
></div>
</div>

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="hintergrund">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.2446" y1="32.7456" x2="4.7542" y2="-2.7448" gradientTransform="matrix(-1 0 0 -1 30 30)">
<stop offset="0.5" style="stop-color:#377AB7"/>
<stop offset="0.9998" style="stop-color:#114676"/>
</linearGradient>
<rect x="0" y="0" fill="url(#SVGID_1_)" width="30" height="30"/>
</g>
</g>
<g id="pfade">
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="23.015,11.847
14.958,19.905 6.902,11.847 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="hintergrund">
</g>
<g id="pfade">
<g>
<g>
<rect x="-0.001" fill="#FFFFFF" width="30" height="30"/>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-0.001" y="0" width="30" height="30">
<feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" color-interpolation-filters="sRGB" result="source"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="-0.001" y="0" width="30" height="30" id="SVGID_1_">
<g filter="url(#Adobe_OpacityMaskFilter)">
<image overflow="visible" width="142" height="142" xlink:href="data:image/jpeg;base64,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
aLRaLRaLRaLQqIsnUzT8RmJG+i6n9J//2Q==" transform="matrix(0.24 0 0 0.24 -2.001 -2)">
</image>
</g>
</mask>
<g opacity="0.4" mask="url(#SVGID_1_)">
<rect x="-0.001" width="30" height="30"/>
</g>
</g>
<polyline fill="none" stroke="#6E7B8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="23.056,11.847
15,19.905 6.944,11.847 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="bg">
</g>
<g id="ico">
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.865,12.5
15,20.366 7.135,12.5 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 646 B

View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="bg">
</g>
<g id="ico">
<polyline fill="none" stroke="#5D7485" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.866,12.5
15.001,20.366 7.135,12.5 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 650 B

View File

@@ -0,0 +1,132 @@
/** Styles for the theme: Base-Dark */
/*--------------------------------------------Button--------------------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox,
.tchmi-combobox {
--tchmi-background: var(--tchmi-background-color-4);
--tchmi-background-active: var(--tchmi-background-color-3);
--tchmi-stroke: var(--tchmi-foreground-color-1);
--tchmi-color: var(--tchmi-foreground-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
--tchmi-button-width: 26px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button,
.tchmi-combobox-template-button {
font-size: var(--tchmi-button-font-size);
background: var(--tchmi-highlight-button-background);
color: var(--tchmi-highlight-button-text-color);
border: var(--tchmi-highlight-button-border);
box-shadow: var(--tchmi-highlight-button-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button polyline,
.tchmi-combobox-template-button polyline {
stroke: currentColor;
fill: none;
}
/* class active will be set/unset in the control */
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button,
.tchmi-combobox-template.active .tchmi-combobox-template-button {
background: var(--tchmi-highlight-button-background-pressed);
color: var(--tchmi-highlight-button-text-color-pressed);
border: var(--tchmi-highlight-button-border-pressed);
box-shadow: var(--tchmi-highlight-button-shadow-pressed);
}
/*--------------------------------------------select--------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox-template-select {
background: var(--tchmi-background);
border: 1px solid var(--tchmi-border-color);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox-template.active .tchmi-combobox-template-select {
background: var(--tchmi-background-active);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select-content,
.tchmi-combobox-template-select-content {
color: var(--tchmi-color);
font-family: inherit;
}
/* class active will be set/unset in the control */
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select-content,
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-input,
.tchmi-combobox-template.active .tchmi-combobox-template-select-content,
.tchmi-combobox-template.active .tchmi-combobox-template-input {
color: var(--tchmi-color);
}
/*-----------------------table--------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown,
.tchmi-combobox-template-dropdown {
--tchmi-dropdown-background: var(--tchmi-background-color-3);
--tchmi-dropdown-element-background-selected: var(--tchmi-background-color-2);
--tchmi-dropdown-element-background-hover: var(--tchmi-highlight-color-1);
--tchmi-dropdown-color: var(--tchmi-foreground-color-1);
--tchmi-dropdown-color-hover: var(--tchmi-foreground-color-1);
--tchmi-dropdown-category-color: var(--tchmi-foreground-color-4);
box-shadow: var(--tchmi-dropdown-shadow);
background: var(--tchmi-dropdown-background);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown.above-control,
.tchmi-combobox-template-dropdown.above-control {
box-shadow: var(--tchmi-dropdown-shadow-above);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown.drop-down-style-mobile,
.tchmi-combobox-template-dropdown.drop-down-style-mobile {
box-shadow: var(--tchmi-popup-shadow);
max-width: 80%;
max-height: 80%;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element,
.tchmi-combobox-template-dropdown-element {
color: var(--tchmi-dropdown-color);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element.selected,
.tchmi-combobox-template-dropdown-element.selected {
background: var(--tchmi-dropdown-element-background-selected);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element.hover,
.tchmi-combobox-template-dropdown-element.hover {
background: var(--tchmi-dropdown-element-background-hover);
color: var(--tchmi-dropdown-color-hover);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-input,
.tchmi-combobox-template-input {
color: var(--tchmi-color);
background-color: transparent;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element-in-category {
padding-left: 30px;
padding-right: 30px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-category {
color: var(--tchmi-dropdown-category-color);
font-weight: bold;
font-style: italic;
padding-left: 15px;
padding-right: 15px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox.read-only .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-focus-border::after {
background-color: var(--tchmi-disabled-color);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox.read-only .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox.read-only .tchmi-combobox-template-select {
background: var(--tchmi-read-only-color);
}

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="hintergrund">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.2446" y1="32.7456" x2="4.7542" y2="-2.7448" gradientTransform="matrix(-1 0 0 -1 30 30)">
<stop offset="0.5" style="stop-color:#4994DA"/>
<stop offset="0.9998" style="stop-color:#4162B0"/>
</linearGradient>
<rect x="0" y="0" fill="url(#SVGID_1_)" width="30" height="30"/>
</g>
</g>
<g id="pfade">
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="23.015,11.847
14.958,19.905 6.902,11.847 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="hintergrund">
</g>
<g id="pfade">
<g>
<g>
<rect x="-0.001" fill="#FFFFFF" width="30" height="30"/>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-0.001" y="0" width="30" height="30">
<feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" color-interpolation-filters="sRGB" result="source"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="-0.001" y="0" width="30" height="30" id="SVGID_1_">
<g filter="url(#Adobe_OpacityMaskFilter)">
<image overflow="visible" width="142" height="142" xlink:href="data:image/jpeg;base64,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
aLRaLRaLRaLQqIsnUzT8RmJG+i6n9J//2Q==" transform="matrix(0.24 0 0 0.24 -2.001 -2)">
</image>
</g>
</mask>
<g opacity="0.4" mask="url(#SVGID_1_)">
<rect x="-0.001" width="30" height="30"/>
</g>
</g>
<polyline fill="none" stroke="#6E7B8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="23.056,11.847
15,19.905 6.944,11.847 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="bg">
</g>
<g id="ico">
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.865,12.5
15,20.366 7.135,12.5 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 646 B

View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g id="bg">
</g>
<g id="ico">
<polyline fill="none" stroke="#5D7485" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.866,12.5
15.001,20.366 7.135,12.5 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 650 B

View File

@@ -0,0 +1,132 @@
/** Styles for the theme: Base */
/*--------------------------------------------Button--------------------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox,
.tchmi-combobox {
--tchmi-background: var(--tchmi-background-color-4);
--tchmi-background-active: var(--tchmi-background-color-3);
--tchmi-stroke: var(--tchmi-foreground-color-2);
--tchmi-color: var(--tchmi-foreground-color-1);
--tchmi-border-color: var(--tchmi-background-color-2);
--tchmi-button-width: 26px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button,
.tchmi-combobox-template-button {
font-size: var(--tchmi-button-font-size);
background: var(--tchmi-highlight-button-background);
color: var(--tchmi-highlight-button-text-color);
border: var(--tchmi-highlight-button-border);
box-shadow: var(--tchmi-highlight-button-shadow);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button polyline,
.tchmi-combobox-template-button polyline {
stroke: currentColor;
fill: none;
}
/* class active will be set/unset in the control */
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-button,
.tchmi-combobox-template.active .tchmi-combobox-template-button {
background: var(--tchmi-highlight-button-background-pressed);
color: var(--tchmi-highlight-button-text-color-pressed);
border: var(--tchmi-highlight-button-border-pressed);
box-shadow: var(--tchmi-highlight-button-shadow-pressed);
}
/*--------------------------------------------select--------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox-template-select {
background: var(--tchmi-background);
border: 1px solid var(--tchmi-border-color);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox-template.active .tchmi-combobox-template-select {
background: var(--tchmi-background-active);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select-content,
.tchmi-combobox-template-select-content {
color: var(--tchmi-color);
font-family: inherit;
}
/* class active will be set/unset in the control */
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select-content,
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template.active .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-input,
.tchmi-combobox-template.active .tchmi-combobox-template-select-content,
.tchmi-combobox-template.active .tchmi-combobox-template-input {
color: var(--tchmi-color);
}
/*-----------------------table--------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown,
.tchmi-combobox-template-dropdown {
--tchmi-dropdown-background: var(--tchmi-background-color-4);
--tchmi-dropdown-element-background-selected: var(--tchmi-background-color-3);
--tchmi-dropdown-element-background-hover: var(--tchmi-highlight-color-1);
--tchmi-dropdown-color: var(--tchmi-foreground-color-1);
--tchmi-dropdown-color-hover: var(--tchmi-foreground-color-2);
--tchmi-dropdown-category-color: var(--tchmi-foreground-color-4);
box-shadow: var(--tchmi-dropdown-shadow);
background: var(--tchmi-dropdown-background);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown.above-control,
.tchmi-combobox-template-dropdown.above-control {
box-shadow: var(--tchmi-dropdown-shadow-above);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown.drop-down-style-mobile,
.tchmi-combobox-template-dropdown.drop-down-style-mobile {
box-shadow: var(--tchmi-popup-shadow);
max-width: 80%;
max-height: 80%;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element,
.tchmi-combobox-template-dropdown-element {
color: var(--tchmi-dropdown-color);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element.selected,
.tchmi-combobox-template-dropdown-element.selected {
background: var(--tchmi-dropdown-element-background-selected);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element.hover,
.tchmi-combobox-template-dropdown-element.hover {
background: var(--tchmi-dropdown-element-background-hover);
color: var(--tchmi-dropdown-color-hover);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-input,
.tchmi-combobox-template-input {
color: var(--tchmi-color);
background-color: transparent;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-element-in-category {
padding-left: 30px;
padding-right: 30px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox-template-dropdown-category {
color: var(--tchmi-dropdown-category-color);
font-weight: bold;
font-style: italic;
padding-left: 15px;
padding-right: 15px;
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox.read-only .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-focus-border::after {
background-color: var(--tchmi-disabled-color);
}
.TcHmi_Controls_Beckhoff_TcHmiCombobox.read-only .TcHmi_Controls_Beckhoff_TcHmiCombobox-template-select,
.tchmi-combobox.read-only .tchmi-combobox-template-select {
background: var(--tchmi-read-only-color);
}