Skip to content

Commit

Permalink
general update
Browse files Browse the repository at this point in the history
  • Loading branch information
@David-PLC
David-PLC committed Apr 26, 2023
1 parent 92bfa86 commit 0fad9d5
Show file tree
Hide file tree
Showing 8 changed files with 11,164 additions and 11,111 deletions.
81 changes: 71 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,79 @@
# CWC-Select-element
<h1 align="center" style="margin-top: 0px;">Select element CWC made for WinCC Unified</h1>

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

### 1. CONTENT

HTML select element
### **1. CONTENT**

### 2. INTERFACE
HTML sleect element

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

- **current** : Element shown by default once the obcject is loaded (i.e. "element2") !! This will not trigger any events !!
- **rows** : Array of element to show in the drop-down list

```js
// Example
rows: [["element1"], ["element2"], ["element3"], ["element4"]]
```

- **current** : Name of the element to be shown as default (leave empty to disable)

```js
// Example
current: "element1"
```

### **3. EVENTS**

- **ev_selectElement** : This event is triggerd every time an user interact with the dop down element, as a result in the "rowId" object
```json
// Example
rowId : "element2"
```

### **4. USAGE**

- OFFLINE MODE
- You can test the behavior of the chart with custom data by setting "production" to false
- Now you can change all the data from "WebCC.Properties"

```js
var production = false;
//...
WebCC.Properties = {
current: "element1",
rows: [
["element1"],
["element2"],
["element3"],
["element4"]
]
};
```

- ONLINE MODE (WinCC Unfied)
- Set "production" to true
```js
var production = true;
```
- To import the custom web control the hierarchy of folders and files must be compressed in ZIP format.
- The name of the ZIP must be the GUID used the "manifest.json" file surrounded by curly brackets

```json
type": "guid://1B4B9F13-ADBF-49FD-B759-F04DF3647C93",
```
- {1B4B9F13-ADBF-49FD-B759-F04DF3647C93}.zip
- If you want this custom web control available for all your project, copy this file in the folder :
- C:\Program Files\Siemens\Automation\Portal V17\Data\Hmi\CustomControls
- replace "Porla V17" with your Tia version.
- If you want to use this custom web control only in one project copy this file in the folder :

- \path_to_tia_project\UserFiles


- Refresh "My controls" to update the files in TIA Portal
- Now you can place the custom web control in the Screen.

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

- **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
0 control/icon.png → docs/icon.png
View file
File renamed without changes
Binary file added {1B4B9F13-ADBF-49FD-B759-F04DF3647C93}/control/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
246 changes: 119 additions & 127 deletions control/index.html → ...9FD-B759-F04DF3647C93}/control/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,128 +1,120 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comi-Combobox</title>
<link rel="icon" href="icon.png" />
<script src="lib/jquery-3.6.0.js"></script>
<script src="webcc.min.js"></script>
<script src="unified.interface.js"></script>

<script>
var production = true;

function init(result) {
if (result) {
unifiedInterfaceInit();
selectInit(WebCC.Properties);
} else {
console.log('Comi-Combobox: Init without result.');
}
}

window.onload = function () {
////////////////////////////////////////////////////////////////////////////////
// DEMO
if (!production) {
WebCC.Properties = {

current: "",
rows: [
["element1"],
["element2"],
["element3"],
["element4"]
],
fontSize : 30
};
init(true);
}
////////////////////////////////////////////////////////////////////////////////
// PRODUCTION
if (production) {
WebCC.start(init, UnifiedInterface.HostListener, _extensions, _timeout);
}
}
</script>
<style>
select {
height: 30px;
min-width: 200px;
width: 100%;
border-radius: 5px;
font-family: 'Montserrat';
font-size: 15pt;
}
</style>
</head>

<body>
<select id="dave-select" onchange="selectOption()">

</select>


<script>
var $sel = $('#dave-select');

var selectInit = function (props) {

// load and parse rows
if (props.hasOwnProperty('rows') && props.rows != null) {
if (typeof props.rows === 'string') {
propsRows = JSON.parse(props.rows);
} else if (Array.isArray(props.rows)) {
propsRows = props.rows;
} else {
console.log('Comi-Select: WRONG FORMAT: rows');
}
} else {
return;
}

// clear select
$sel.empty();

// populate rows
if (propsRows.length > 0) {
let $optionEmpty = $('<option>');

$optionEmpty.val('');
$optionEmpty.text('');
$sel.append($optionEmpty);

for (let i = 0; i < propsRows.length; i++) {
let $option = $('<option>');

$option.val(propsRows[i]);
$option.text(propsRows[i]);


if (props.current == propsRows[i]) {
$option.prop("selected", true)
}
$sel.append($option);
}
}


}
function selectOption() {
var $sel = $('#dave-select');
var value = $sel.val();
fireEvent("ev_selectElement", $sel.val())
}

// fire event to winCC
function fireEvent(ev, args) {
if (WebCC && WebCC.Events) {
WebCC.Events.fire(ev, JSON.stringify(args));
}
}
</script>

</body>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select</title>
<link rel="icon" href="icon.png" />
<script src="lib/jquery-3.6.0.js"></script>
<script src="webcc.min.js"></script>
<script src="unified.interface.js"></script>

<script>
var production = true;

function init(result) {
if (result) {
unifiedInterfaceInit();
selectInit(WebCC.Properties);
} else {
console.log('Select: Init without result.');
}
}

window.onload = function () {
if (!production) {
WebCC.Properties = {
current: "element1",
rows: [
["element1"],
["element2"],
["element3"],
["element4"]
]
};
init(true);
}
if (production) {
WebCC.start(init, UnifiedInterface.HostListener, _extensions, _timeout);
}
}
</script>
<style>
select {
height: 30px;
min-width: 200px;
width: 100%;
border-radius: 5px;
font-family: 'Montserrat';
font-size: 15pt;
}
</style>
</head>

<body>
<select id="dave-select" onchange="selectOption()">

</select>


<script>
var $sel = $('#dave-select');

var selectInit = function (props) {

// load and parse rows
if (props.hasOwnProperty('rows') && props.rows != null) {
if (typeof props.rows === 'string') {
propsRows = JSON.parse(props.rows);
} else if (Array.isArray(props.rows)) {
propsRows = props.rows;
} else {
console.log('Select: WRONG FORMAT: rows');
}
} else {
return;
}

// clear select
$sel.empty();

// populate rows
if (propsRows.length > 0) {
let $optionEmpty = $('<option>');
$optionEmpty.val('');
$optionEmpty.text('');
$sel.append($optionEmpty);

for (let i = 0; i < propsRows.length; i++) {
let $option = $('<option>');

$option.val(propsRows[i]);
$option.text(propsRows[i]);


if (props.current == propsRows[i]) {
$option.prop("selected", true)
}
$sel.append($option);
}
}

}
function selectOption() {
var $sel = $('#dave-select');
var value = $sel.val();
fireEvent("ev_selectElement", $sel.val())
}

// fire event to winCC
function fireEvent(ev, args) {
if (WebCC && WebCC.Events) {
WebCC.Events.fire(ev, JSON.stringify(args));
}
}
</script>

</body>

</html>
Loading

0 comments on commit 0fad9d5

Please sign in to comment.