Skip to content

Commit 0fad9d5

Browse files
David-PLCDavid-PLC
committed
general update
1 parent 92bfa86 commit 0fad9d5

File tree

8 files changed

+11164
-11111
lines changed

8 files changed

+11164
-11111
lines changed

‎README.md‎

Lines changed: 71 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,79 @@
1-
# CWC-Select-element
1+
<h1 align="center" style="margin-top: 0px;">Select element CWC made for WinCC Unified</h1>
22

3-
Custom Web Control made for WinCC Unified
3+
<p align="center" style="margin-bottom: 0px !important;">
4+
<img width="200" src="docs/icon.png" alt="Icon" align="center">
5+
</p>
46

5-
### 1. CONTENT
67

7-
HTML select element
8+
### **1. CONTENT**
89

9-
### 2. INTERFACE
10+
HTML sleect element
1011

11-
- **rows** : List of elemnent to show in the drop down list (i.e. "[["element1"],["element2"],["element3"]]")
12+
### **2. INTERFACE**
1213

13-
- **current** : Element shown by default once the obcject is loaded (i.e. "element2") !! This will not trigger any events !!
14+
- **rows** : Array of element to show in the drop-down list
15+
16+
```js
17+
// Example
18+
rows: [["element1"], ["element2"], ["element3"], ["element4"]]
19+
```
20+
21+
- **current** : Name of the element to be shown as default (leave empty to disable)
22+
23+
```js
24+
// Example
25+
current: "element1"
26+
```
27+
28+
### **3. EVENTS**
29+
30+
- **ev_selectElement** : This event is triggerd every time an user interact with the dop down element, as a result in the "rowId" object
31+
```json
32+
// Example
33+
rowId : "element2"
34+
```
35+
36+
### **4. USAGE**
37+
38+
- OFFLINE MODE
39+
- You can test the behavior of the chart with custom data by setting "production" to false
40+
- Now you can change all the data from "WebCC.Properties"
41+
42+
```js
43+
var production = false;
44+
//...
45+
WebCC.Properties = {
46+
current: "element1",
47+
rows: [
48+
["element1"],
49+
["element2"],
50+
["element3"],
51+
["element4"]
52+
]
53+
};
54+
```
55+
56+
- ONLINE MODE (WinCC Unfied)
57+
- Set "production" to true
58+
```js
59+
var production = true;
60+
```
61+
- To import the custom web control the hierarchy of folders and files must be compressed in ZIP format.
62+
- The name of the ZIP must be the GUID used the "manifest.json" file surrounded by curly brackets
63+
64+
```json
65+
type": "guid://1B4B9F13-ADBF-49FD-B759-F04DF3647C93",
66+
```
67+
- {1B4B9F13-ADBF-49FD-B759-F04DF3647C93}.zip
68+
- If you want this custom web control available for all your project, copy this file in the folder :
69+
- C:\Program Files\Siemens\Automation\Portal V17\Data\Hmi\CustomControls
70+
- replace "Porla V17" with your Tia version.
71+
- If you want to use this custom web control only in one project copy this file in the folder :
72+
73+
- \path_to_tia_project\UserFiles
74+
75+
76+
- Refresh "My controls" to update the files in TIA Portal
77+
- Now you can place the custom web control in the Screen.
1478

15-
- **fontSize** : Size of the font for the element
16-
### 3. EVENTS
1779

18-
- **ev_selectElement** : This event is triggered every time the user change the selected item, as a result in the "rowId" you will find the selected item

control/icon.png renamed to docs/icon.png

File renamed without changes.

‎{1B4B9F13-ADBF-49FD-B759-F04DF3647C93}/control/icon.png‎

6.37 KB
Loading

control/index.html renamed to {1B4B9F13-ADBF-49FD-B759-F04DF3647C93}/control/index.html

Lines changed: 119 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,120 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Comi-Combobox</title>
8-
<link rel="icon" href="icon.png" />
9-
<script src="lib/jquery-3.6.0.js"></script>
10-
<script src="webcc.min.js"></script>
11-
<script src="unified.interface.js"></script>
12-
13-
<script>
14-
var production = true;
15-
16-
function init(result) {
17-
if (result) {
18-
unifiedInterfaceInit();
19-
selectInit(WebCC.Properties);
20-
} else {
21-
console.log('Comi-Combobox: Init without result.');
22-
}
23-
}
24-
25-
window.onload = function () {
26-
////////////////////////////////////////////////////////////////////////////////
27-
// DEMO
28-
if (!production) {
29-
WebCC.Properties = {
30-
31-
current: "",
32-
rows: [
33-
["element1"],
34-
["element2"],
35-
["element3"],
36-
["element4"]
37-
],
38-
fontSize : 30
39-
};
40-
init(true);
41-
}
42-
////////////////////////////////////////////////////////////////////////////////
43-
// PRODUCTION
44-
if (production) {
45-
WebCC.start(init, UnifiedInterface.HostListener, _extensions, _timeout);
46-
}
47-
}
48-
</script>
49-
<style>
50-
select {
51-
height: 30px;
52-
min-width: 200px;
53-
width: 100%;
54-
border-radius: 5px;
55-
font-family: 'Montserrat';
56-
font-size: 15pt;
57-
}
58-
</style>
59-
</head>
60-
61-
<body>
62-
<select id="dave-select" onchange="selectOption()">
63-
64-
</select>
65-
66-
67-
<script>
68-
var $sel = $('#dave-select');
69-
70-
var selectInit = function (props) {
71-
72-
// load and parse rows
73-
if (props.hasOwnProperty('rows') && props.rows != null) {
74-
if (typeof props.rows === 'string') {
75-
propsRows = JSON.parse(props.rows);
76-
} else if (Array.isArray(props.rows)) {
77-
propsRows = props.rows;
78-
} else {
79-
console.log('Comi-Select: WRONG FORMAT: rows');
80-
}
81-
} else {
82-
return;
83-
}
84-
85-
// clear select
86-
$sel.empty();
87-
88-
// populate rows
89-
if (propsRows.length > 0) {
90-
let $optionEmpty = $('<option>');
91-
92-
$optionEmpty.val('');
93-
$optionEmpty.text('');
94-
$sel.append($optionEmpty);
95-
96-
for (let i = 0; i < propsRows.length; i++) {
97-
let $option = $('<option>');
98-
99-
$option.val(propsRows[i]);
100-
$option.text(propsRows[i]);
101-
102-
103-
if (props.current == propsRows[i]) {
104-
$option.prop("selected", true)
105-
}
106-
$sel.append($option);
107-
}
108-
}
109-
110-
111-
}
112-
function selectOption() {
113-
var $sel = $('#dave-select');
114-
var value = $sel.val();
115-
fireEvent("ev_selectElement", $sel.val())
116-
}
117-
118-
// fire event to winCC
119-
function fireEvent(ev, args) {
120-
if (WebCC && WebCC.Events) {
121-
WebCC.Events.fire(ev, JSON.stringify(args));
122-
}
123-
}
124-
</script>
125-
126-
</body>
127-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Select</title>
8+
<link rel="icon" href="icon.png" />
9+
<script src="lib/jquery-3.6.0.js"></script>
10+
<script src="webcc.min.js"></script>
11+
<script src="unified.interface.js"></script>
12+
13+
<script>
14+
var production = true;
15+
16+
function init(result) {
17+
if (result) {
18+
unifiedInterfaceInit();
19+
selectInit(WebCC.Properties);
20+
} else {
21+
console.log('Select: Init without result.');
22+
}
23+
}
24+
25+
window.onload = function () {
26+
if (!production) {
27+
WebCC.Properties = {
28+
current: "element1",
29+
rows: [
30+
["element1"],
31+
["element2"],
32+
["element3"],
33+
["element4"]
34+
]
35+
};
36+
init(true);
37+
}
38+
if (production) {
39+
WebCC.start(init, UnifiedInterface.HostListener, _extensions, _timeout);
40+
}
41+
}
42+
</script>
43+
<style>
44+
select {
45+
height: 30px;
46+
min-width: 200px;
47+
width: 100%;
48+
border-radius: 5px;
49+
font-family: 'Montserrat';
50+
font-size: 15pt;
51+
}
52+
</style>
53+
</head>
54+
55+
<body>
56+
<select id="dave-select" onchange="selectOption()">
57+
58+
</select>
59+
60+
61+
<script>
62+
var $sel = $('#dave-select');
63+
64+
var selectInit = function (props) {
65+
66+
// load and parse rows
67+
if (props.hasOwnProperty('rows') && props.rows != null) {
68+
if (typeof props.rows === 'string') {
69+
propsRows = JSON.parse(props.rows);
70+
} else if (Array.isArray(props.rows)) {
71+
propsRows = props.rows;
72+
} else {
73+
console.log('Select: WRONG FORMAT: rows');
74+
}
75+
} else {
76+
return;
77+
}
78+
79+
// clear select
80+
$sel.empty();
81+
82+
// populate rows
83+
if (propsRows.length > 0) {
84+
let $optionEmpty = $('<option>');
85+
$optionEmpty.val('');
86+
$optionEmpty.text('');
87+
$sel.append($optionEmpty);
88+
89+
for (let i = 0; i < propsRows.length; i++) {
90+
let $option = $('<option>');
91+
92+
$option.val(propsRows[i]);
93+
$option.text(propsRows[i]);
94+
95+
96+
if (props.current == propsRows[i]) {
97+
$option.prop("selected", true)
98+
}
99+
$sel.append($option);
100+
}
101+
}
102+
103+
}
104+
function selectOption() {
105+
var $sel = $('#dave-select');
106+
var value = $sel.val();
107+
fireEvent("ev_selectElement", $sel.val())
108+
}
109+
110+
// fire event to winCC
111+
function fireEvent(ev, args) {
112+
if (WebCC && WebCC.Events) {
113+
WebCC.Events.fire(ev, JSON.stringify(args));
114+
}
115+
}
116+
</script>
117+
118+
</body>
119+
128120
</html>

0 commit comments

Comments
 (0)