How To Do Web-based visualisaties met mbCONNECT24 · 2019-07-02 · Afhankelijk van het type widget...

Juridische disclaimer: Deze handleiding is bedoeld voor het gebruik van de producten van MB connect line. Ander gebruik is niet toegestaan. 4S industrie B.V. is niet aansprakelijk voor fouten in of verkeerd gebruik van deze handleiding. Onder voorbehoud van technische veranderingen. 4S industrie B.V. heeft het recht deze handleiding te wijzigen.

How To Do

Web-based visualisaties met mbCONNECT24

Bouw uw eigen machine dashboard

Inhoud

1. Inleiding ............................................................................................................................................ 2

2. Workflow web-based visualisaties ..................................................................................................... 3

3. Aanmaken Network Component (PLC) & Tag Server .......................................................................... 4

3.1 Network Component; VIPA PLC ................................................................................................................................... 4

3.2 Tag Server ................................................................................................................................................................... 6

4. Tags aanmaken ................................................................................................................................. 8

5. Dashboards & Widgets .................................................................................................................... 11

5.1 Overzicht Widgets ..................................................................................................................................................... 11

5.2 Dashboard toevoegen ............................................................................................................................................... 12

5.3 Widget aanmaken rechtstreeks via Dashboard ......................................................................................................... 14

5.4 Widgets toevoegen aan het dashboard ..................................................................................................................... 17

5.5 Dashboard share (delen) ........................................................................................................................................... 19

5.6 Widgets handmatig toevoegen .................................................................................................................................. 22

6. Configuratie synchroniseren met de router ...................................................................................... 25

7. Dashboard bekijken ......................................................................................................................... 26

8. Scaling ............................................................................................................................................. 27

9. Voorbeelden ................................................................................................................................... 30

DATUM WIJZIGING BEWERKER

04.04.2016 Document gemaakt D. Stoelinga

13.04.2017 Revisie met portaalaanpassingen Handleiding omgezet voor het Nederlandse portaal

D. Stoelinga

04.06.2019 Aanpassing aan portaalversie 2.4.1 Workflow toegevoegd

D. Stoelinga


Pagina 2

1. Inleiding

1. Inleiding

In dit document wordt uitgelegd hoe web-based visualisaties gemaakt worden met remote service portaal mbCONNECT24. Met deze visualisaties wordt data getoond via Dashboards bestaande uit één of meerdere Widgets binnen het portaal. Deze kunnen bekeken worden via standaard webbrowser op smartphone, tablet of PC. Maar ook via de software mbDIALUP. We gaan er vanuit dat er al een project en router zijn gemaakt. Deze procedure is te vinden in de Opstarthandleiding mbCONNECT24. Configuratie van een router met standaardinstellingen.

Voorbeeld van een Dashboard.


Pagina 3

2. Workflow web-based visualisaties

2. Workflow web-based visualisaties

Basisconfiguratie

• Project aanmaken

• Routerconfiguratie met LAN in hetzelfde IP-bereik als de PLC

Netwerk-component

• Toevoegen netwerkcomponent (PLC)

• Tag Server aanmaken of controleren

Tags

• Tags aanmaken

Dashboard

• Dashboard aanmaken

• Widget maken en toevoegen aan dashboard

Dashboard share

• Share aanmaken voor dashboard

Synchronisatie

• Synchroniseer configuratie tussen router en remote service portaal mbCONNECT24

Dashboard bekijken

• Bekijk dashboard via mbDIALUP

• Direct URL of QR code en standaard webbrowser op PC, tablet of smartphone

Optioneel:Scaling

• Schaleer waarde op het remote service portaal mbCONNECT24


Pagina 4

3. Aanmaken Network Component (PLC) & Tag

Server 3. Aanmaken Network Component (PLC) & Tag Server

Allereerst maken we een Network Component aan. In ons voorbeeld is het een VIPA SLIO CPU, maar dit kunnen ook Siemens

PLC’s, Rockwell, Modbus-TCP driver of andere apparaten zijn.

3.1 Network Component; VIPA PLC

1. Klik op Administratie

2. En klik op desbetreffende Routernaam

We bevinden ons nu op de configuratiepagina van de router.

Klik hier op LAN.

Klik op en vervolgens op Nieuw netwerk component.

Informeer naar de mogelijkheden via [email protected] of 055 542 4228.

mailto:[email protected]


Pagina 5


Server Configureer nu Netwerk component

1. Kies het juiste Type

2. Geef het component een Naam

3. Vul het IP-adres van de PLC in

4. Sla het netwerk component op via Opslaan

Netwerk Component

Actief Activeer Netwerk Component.

Type Kies het type PLC.

Naam Vul een gewenste naam in voor de Netwerk Component.

IP IP-adres van de PLC.

Het Netwerk Component is nu aangemaakt.

De andere tabbladen zijn voor een uitgebreidere configuratie en zijn niet noodzakelijk voor een basisconfiguratie.

Meer informatie via: http://cc-

onlinehelp.com/en/#index/administrati/projects_1/devicesettin/interfaces/components/networkcompo/creatnewnetw/

creatnewnetw.html

http://cc-onlinehelp.com/en/#index/administrati/projects_1/devicesettin/interfaces/components/networkcompo/creatnewnetw/creatnewnetw.html




Pagina 6


Server 3.2 Tag Server

Bij het maken van het Netwerk Component is de Tag Server al aangemaakt.

Open de instellingen van de Tag Server door op de button te klikken.

Kies hier de gewenste Mnemonic en sla de wijzigingen op via Opslaan.

Tag Server

Actief Activeer Tag Server.

Type ISOTCP, niet aan te passen.

Naam Vul een gewenste naam in voor de Tag Server.

Poort Altijd bij VIPA/Siemens poort 102.

Slot Slot adres van de PLC.

Rack Rack adres van de PLC.

Protocol Altijd TCP; internet protocol.

Mnemonic Ongeacht de in het portaal gekozen taal kan hier gekozen worden voor de Mnemonic taal voor een datapunt voor de S7-besturingssystemen. Keuze uit Duits & Internationaal.


Pagina 7


Server Een voorbeeld van de Mnemonic instellingen, links Duits en rechts Internationaal.


Pagina 8

4. Tags aanmaken

4. Tags aanmaken

1. Open het netwerk component via Administratie > Routernaam > LAN (zie hoodfstuk 2)

2. En klik hier op het Network component (in dit voorbeeld PLC)

Klik op en kies voor Nieuwe tag.


Pagina 9

4. Tags aanmaken

Configureer een tag volgens de eigen specificaties.

1. Geef de tag een Naam

2. Kies de juiste Adresmask (details in tabel Tag omschrijving ISOTCP)

3. Geef een Adres op

4. Kies de juiste weergave van de tag bij Weergeven als

5. Sla de tag op via Opslaan

Tag

Actief Activeer tag.

Naam Naam van de tag.

Omschrijving Omschrijving bij de tag (optioneel).

Tag Server Selectieveld van beschikbare Tag Servers.

Adresmask Selectieveld van beschikbare adresformaten.

Adres Adres van tag (zie tabel Tag omschrijving ISOTCP).

Weergeven als Selectieveld beschikbare tag typen.

Scaling Selectieveld met de schaleringen die op dit moment al aanwezig zijn. Deze selectie bepaalt of de gelezen waarde geschaald wordt of niet. Zie hoofdstuk 7 voor meer informatie over “scaling”.

Leesbare tag Tag alleen lezen en kan gelogd worden.

Schrijfbare tag Tag is ook schrijfbaar

Andere opties bespreken we in dit document niet (zoals tabblad logging). Meer informatie via: http://cc-

onlinehelp.com/en/#index/administrati/projects_1/devicesettin/interfaces/components/networkcompo/creatnewnetw/

creatnewtag/tagintagserv.html

http://cc-onlinehelp.com/en/#index/administrati/projects_1/devicesettin/interfaces/components/networkcompo/creatnewnetw/creatnewtag/tagintagserv.html




Pagina 10

4. Tags aanmaken

Tag omschrijving ISOTCP

Adres Lengte Omschrijving Adres Lengte Omschrijving

DB[x].DBX[y].[z] Bit Databouwsteen Bit A[x].[y] Bit Uitgang Bit

DB[x].DBB[y] Byte Databouwsteen Byte AB[x] Byte Uitgang Byte

DB[x].DBW[y] Word Databouwsteen Word AW[x] Word Uitgang Word

DB[x].DBD[y] Double Word Databouwsteen Double Word

AD[x] Double Word Uitgang Double Word

M[x].[y] Bit Flag Bit PE[x].[y] Bit Periferie Bit

MB[x] Byte Flag Byte PEB[x] Byte Periferie Byte

MW[x] Word Flag Word PEW[x] Word Periferie Word

MD[x] Double Word Flag Double Word PED[x] Double Word Periferie Double Word

E[x] Bit Ingang Bit T[x] Timer (4 bytes) Timer

EB[x] Byte Ingang Byte Z[x] Counter (4 bytes) Counter

EW[x] Word Ingang Word

ED[x] Double Word Ingang Double Word

De eerste Tag is nu aangemaakt. Maak nu ook eventuele andere tags aan.


Pagina 11

5. Dashboards & Widgets


5.1 Overzicht Widgets

Een Dashboard bestaat uit één of meerdere Widgets. Afhankelijk van het type widget kan deze naast gelezen, ook geschreven

worden (afhankelijk van de instellingen van de Tag). Sommige widgets kunnen ook meer dan 1 tag bevatten.

Meer informatie in onderstaand overzicht.

Beschikbare widgets

Type Korte omschrijving Schrijfbare widget Tag waarde Display waarde

Tekst

Weergave tekst - - -

Afbeelding

Weergave afbeeldingen - - -

LED

Weergave van data points als pictogram. Vrije keuze van kleuren met kleurverandering met veranderende waarden.

Ja 1 Tag Alleen live waarden

Apparaatlijst

Overzicht van alle apparaten in het project in lijst- of mapweergave.

- - -

Gauge (meter)

Weergave van tag waarden in een gauge (pointer meter). Circulaire sector en hoekpositie kan vrij worden gekozen met een onderverdeling in verschillende gekleurde sectoren

- 1 Tag Alleen live waarden

Grafiek

Weergave van verschillende tag waarden in:

Kolomgrafiek

Lijngrafiek

Vlakgrafiek (gebied)

Spline

Steplijn

- Meerdere tags Live en logwaarden

Waarden

Weergave van verschillende tag waarden in een tabel. Ja Meerdere tags Alleen live waarden

Linear Gauge

Parallelle weergave van de tag waarden van verschillende tags op een lineaire schaal (verticaal of horizontaal). Verschillende gekleurde sectoren met verschillende soorten wijzers zijn hier mogelijk.

- Meerdere tags Alleen live waarden

Webcam

Weergave live streams van webcam - - -

Button

Weergave van datapuntwaarde met mogelijkheid tot aanpassing van deze waarde.


Schakelaar

Weergave van datapuntwaarde inclusief schakelen tussen 2 posities (1/0 of AAN/UIT)


Pie chart Weergave van waarde in een taartdiagram of donut vorm.

- Meerdere tags Alleen live waarden


Pagina 12


5.2 Dashboard toevoegen

We gaan in dit document een Dashboard maken op Projectniveau.

1. Klik op (Administratie)

2. Klik vervolgens op het desbetreffende project

Klik in het submenu op Visualisaties.

Klik op en kies voor Nieuw dashboard.

Een dashboard kan ook op routerniveau gemaakt worden. Het voordeel van projectniveau is dat tags uit meerdere

routers (binnen het project) op hetzelfde dashboard getoond kunnen worden.

Om een dashboard op routerniveau te maken wordt niet het project, maar het apparaat geopend.


Pagina 13


1. Geef het dashboard een Naam

2. Kies de gewenste Layout

3. Sla het dashboard op via Opslaan

Het dashboard is aangemaakt en wordt geopenden door op de Naam (in dit voorbeeld Web-based visualisaties) van het

dashboard te klikken.

Bij Layout is keuze uit een Vrije layout hierbij kan een widget vrij geplaatst worden en kunnen de afmetingen zelf bepaald

worden. Wordt er gekozen voor 1, 2, 3, 4, 6 of 12 kolommen dan worden widgets alleen per kolom geplaatst en worden

de afmetingen automatisch bepaald. Voor een goede weergave op verschillende apparaten (laptop, tablet, smartphone)

raden we, aan om de optie via Kolommen te gebruiken. Deze is ook responsive voor de verschillende apparaten.

Meer informatie over de andere opties via: http://cc-

onlinehelp.com/en/#index/administrati/projects_1/devicesettin/visualizatio/dashboards/createnewdas.html

http://cc-onlinehelp.com/en/#index/administrati/projects_1/devicesettin/visualizatio/dashboards/createnewdas.html

http://cc-onlinehelp.com/en/#index/administrati/projects_1/devicesettin/visualizatio/dashboards/createnewdas.html


Pagina 14


5.3 Widget aanmaken rechtstreeks via Dashboard

Open het dashboard door op de naam (Web-based visualisaties) van het dashboard te klikken

Klik op en kies voor Bewerk Dashboard Layout.

Klik op en Nieuwe widget.

1. Kies het gewenste Type widget

2. Geef het widget een Naam

3. Open het tabblad Instellingen

De afbeelding kan afwijken. Dit is afhankelijk van het gekozen type widget.


Pagina 15


1. Pas de instellingen naar wens aan

2. Open het tabblad Tags

Klik op om een tag te selecteren.


Pagina 16


Selecteer de gewenste Tag

Nadat de juiste tag is gekozen kies dan voor Opslaan en afsluiten.

Indien nodig is er de mogelijkheid om andere widgets toe te voegen.

Hier is keuze uit alle tags van alle apparaten binnen het project. Maar ook staan de systeemtags van de router in de lijst

(digitale ingangen (DIN1-DIN4), interne LED’s van de router (FC1-FC4), VPN_STATE, WAN_STATE, LAN_STATE etc.).

Afhankelijk van het type widget kunnen er meerdere tags geselecteerd worden.


Pagina 17


5.4 Widgets toevoegen aan het dashboard

We bevinden ons nog steeds in de layout instellingen van het dashboard (zie hoofdstuk 4.3).

Kies voor en Widget toevoegen.

Klik op de routernaam (+ Inbedrijfstellen mbNET).

Nu worden alle beschikbare widgets getoond.

1. Door nu op te klikken kunnen de widgets aan het dashboard toegevoegd worden

2. Kies nu voor Sluiten


Pagina 18


De widgets zijn nu toegevoegd aan het dashboard.

Door in de header van de widget te klikken en te slepen kan de widget naar de gewenste kolom gesleept worden.

Voor het opslaan van het dashboard klik op en daarna op om het dashboard af te sluiten.

Het dashboard is nu gereed.

Er staat nog het symbool bij de widgets. De configuratie dient nog gesynchroniseert te worden tussen het

mbCONNECT24 remote service portaal en de router. Zie hiervoor hoofdstuk 5.


Pagina 19


5.5 Dashboard share (delen)

Om het dashboard via een unieke URL of QR-code te bekijken via een standaard webbrowser op smartphone, tablet of PC wordt

het dashboard gedeeld. Hiervoor openen we het dashboard:

1. Kies voor Administratie

2. Klik op de Projectnaam

3. Kies vervolgens voor Visualisaties

Kies nu het gewenste dashboard (Web-based visualisaties).

Klik nu op om en kies voor Nieuwe Share.


Pagina 20


Geef het dashboard een Naam en open het tabblad Toegang.

Share

Actief Activeer share.

Naam Naam van de share.

Omschrijving Omschrijving bij de share (optioneel).

Log toegang Selectievakje voor het activeren/deactiveren van toegangsregistratie.

Automatisch actualiseren Interval voor het automatisch verversen van de gegevens van het dashboard (minimaal 30 seconden).

Tijdbegrenzen Tijdslimiet in datumformaat wanneer de share geldig is.

Toegang beperken Kwantitatieve beperking van de share.

Het is mogelijk om alleen bepaalde IP-adressen toegang (whitelist) te geven of om bepaalde IP-adressen te blokkeren (blacklist).


Pagina 21


Op het laatste tabblad URL is de link en QR-code te zien. Door het scannen van deze QR-code of de link te openen in een

webbrowser wordt het dashboard weergegeven.

Klik op Opslaan om de Share op te slaan.

Na op Opslaan te hebben geklikt ontvangt de gebruiker die de share heeft aangemaakt per omgaande een e-mail met de

link van de share. Met Send Mail kan het ook handmatig gedaan worden.


Pagina 22


5.6 Widgets handmatig toevoegen

Widgets kunnen ook “buiten” het dashboard om handmatig worden toegevoegd aan de lijst met widgets.

1. Kies Administratie

2. Klik vervolgens op de Projectnaam

3. Kies vervolgens voor Visualisaties

Kies voor en vervolgens Nieuw widget.

Maak nu de widget verder naar wens af (zie hoofdstuk 4.3 voor meer informatie).

Na het opslaan staat de widget in de Widget lijst.


Pagina 23


Open het dashboard en kies en Bewerk Dashboard layout.

Kies en Widget toevoegen.

Klik op de routernaam (+ Inbedrijfstellen mbNET).


Pagina 24


1. Voeg de desbetreffende widget toe door op te klikken

2. Sluit het venster via Sluiten

Verplaats nu de widget naar de gewenste locatie.

Sla de wijziging op via en sluit daarna het dashboard via .


Pagina 25

6. Configuratie synchroniseren met de router

6. Configuratie synchroniseren met de router

De configuratie is nu gereed. De volgende stap is het synchroniseren van de configuratie tussen het remote service portaal

mbCONNECT24 en de router.

1. Open het menu Administratie door op te klikken

2. Klik nu op om de configuratie te synchroniseren met de router

Klik nu op Synchroniseer.

In het portaal wordt het symbool oranje, de configuratie is gereed voor synchronisatie.

De configuratie wordt gesynchroniseerd en de router start vervolgens opnieuw met de nieuwe configuratie.

De router start hierna automatisch op met de nieuwe instellingen.

We gaan ervan uit dat de router al online is op het portaal. Voor het laden van een configuratie in een router verwijzen

we naar de Opstarthandleiding mbCONNECT24.

De afbeelding kan afwijken en is afhankelijk van de instellingen van het account op het portaal.

Meer informatie over het synchroniseren in de helpfunctie van het portaal.


Pagina 26

7. Dashboard bekijken

7. Dashboard bekijken

Het dashboard bekijk is mogelijk door de link te openen in een webbrowser. Dit heet een mbWEB2go sessie.

Of door de QR code te scannen met een smartphone of tablet.

Zie hoofdstuk 4.5 (Dashboard share (delen)) voor meer informatie.

Met een webbrowser kunnen waarden alleen maar gelezen worden. Het schrijven van een tag is uit veiligheidsoogpunt

niet mogelijk met webbrowser.


Pagina 27

8. Scaling

8. Scaling

Een scaling is te maken in een router, maar ook in een project. Voordeel van een scaling op projectniveau is dat dezelfde scaling

ook gebruikt kan worden in Tag Servers en widgets van andere routers binnen hetzelfde project. In dit voorbeeld maken we een

scaling op projectniveau.

1. Kies Administratie

2. Klik op de Projectnaam

Kies nu Scaling.

Klik op om een nieuwe scaling toe te voegen.


Pagina 28

8. Scaling

1. Geef de scaling een Naam

2. Configureer het type invoer en type voor uitvoer (afhankelijk van scaling)

1. Open tabblad Schaal waarden

2. Configureer de invoerwaarden

3. En de uitvoerwaarden

In dit voorbeeld schaleren we het analoge signaal van een temperatuursensor. Deze is aagesloten op een 0-10V ingang

op een Siemens/VIPA PLC. Het genereert een decimale waarde van 0-27648. Deze schaleren we naar een waarde tussen

de 0 en 50°C. (0 dec. = 0 °C / 27648 dec. = 50 °C)


Pagina 29

8. Scaling

Als laatste kan de uitgangswaarde geconfigureerd worden. Via Opslaan kan de scaling opgeslagen worden.

Als we nu een nieuwe of bestaande tag openen dan kan deze scaling gekozen worden. De waarde van de tag wordt hierna

geschaleerd weergegeven. In dit voorbeeld als °C waarde.


Pagina 30

9. Voorbeelden

9. Voorbeelden

Hierbij nog enkele voorbeelden van dashboards:

How To Do Web-based visualisaties met mbCONNECT24 · 2019-07-02 · Afhankelijk van het type widget...

Documents

Transcript of How To Do Web-based visualisaties met mbCONNECT24 · 2019-07-02 · Afhankelijk van het type widget...