@opcua/for-node-red 3.7.1 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +2 -1
  2. package/all.js +1 -1
  3. package/config-panel/assets/index-Cbauh_EP.css +1 -0
  4. package/config-panel/assets/index-Dbq8sVaJ.js +49 -0
  5. package/config-panel/index.html +2 -2
  6. package/examples/coffee-machine-2.json +3393 -0
  7. package/examples/explore_coffee_machine.json +1 -1
  8. package/examples/job_manager.json +1 -1
  9. package/examples/monitored-items.json +630 -0
  10. package/examples/svg_watertank.html +17 -0
  11. package/examples/tank.jsx +33 -0
  12. package/package.json +1 -1
  13. package/source/OpcUa-Client2-Browse/OpcUa-Client2-Browse.css +1 -1
  14. package/source/OpcUa-Client2-Browse/OpcUa-Client2-Browse.html +55 -9
  15. package/source/OpcUa-Client2-Call/OpcUa-Client2-Call.css +1 -1
  16. package/source/OpcUa-Client2-Call/OpcUa-Client2-Call.html +31 -5
  17. package/source/OpcUa-Client2-Explore/OpcUa-Client2-Explore.css +1 -1
  18. package/source/OpcUa-Client2-Explore/OpcUa-Client2-Explore.html +4 -4
  19. package/source/OpcUa-Client2-ExtensionObject/OpcUa-Client2-ExtensionObject.css +1 -1
  20. package/source/OpcUa-Client2-ExtensionObject/OpcUa-Client2-ExtensionObject.html +10 -4
  21. package/source/OpcUa-Client2-HistoryRead/OpcUa-Client2-HistoryRead.css +1 -1
  22. package/source/OpcUa-Client2-HistoryRead/OpcUa-Client2-HistoryRead.html +169 -92
  23. package/source/OpcUa-Client2-Monitor/OpcUa-Client2-Monitor.css +1 -1
  24. package/source/OpcUa-Client2-Monitor/OpcUa-Client2-Monitor.html +199 -38
  25. package/source/OpcUa-Client2-MonitorEvent/OpcUa-Client2-MonitorEvent.css +1 -1
  26. package/source/OpcUa-Client2-MonitorEvent/OpcUa-Client2-MonitorEvent.html +61 -13
  27. package/source/OpcUa-Client2-Read/OpcUa-Client2-Read.css +1 -1
  28. package/source/OpcUa-Client2-Read/OpcUa-Client2-Read.html +4 -4
  29. package/source/OpcUa-Client2-Write/OpcUa-Client2-Write.css +1 -1
  30. package/source/OpcUa-Client2-Write/OpcUa-Client2-Write.html +4 -4
  31. package/source/OpcUa-Endpoint2/OpcUa-Endpoint2.html +2 -2
  32. package/config-panel/assets/index-2UIiGW7e.js +0 -40
  33. package/config-panel/assets/index-D642mSgA.css +0 -1
@@ -2,7 +2,7 @@
2
2
  {
3
3
  "id": "f7bedd7b98ba03b1",
4
4
  "type": "tab",
5
- "label": "Flow 6",
5
+ "label": "OPCUA CoffeeMachine Example ",
6
6
  "disabled": false,
7
7
  "info": "",
8
8
  "env": []
@@ -2,7 +2,7 @@
2
2
  {
3
3
  "id": "44b167d3.5d3188",
4
4
  "type": "tab",
5
- "label": "Flow 1",
5
+ "label": "JobManager OPCUA Machinery Example",
6
6
  "disabled": false,
7
7
  "info": ""
8
8
  },
@@ -0,0 +1,630 @@
1
+ [
2
+ {
3
+ "id": "36a805baecdc408b",
4
+ "type": "tab",
5
+ "label": "Example of OCPUA Monitored Items Usage",
6
+ "disabled": false,
7
+ "info": "",
8
+ "env": []
9
+ },
10
+ {
11
+ "id": "91c517c753b485df",
12
+ "type": "group",
13
+ "z": "36a805baecdc408b",
14
+ "style": {
15
+ "stroke": "#999999",
16
+ "stroke-opacity": "1",
17
+ "fill": "none",
18
+ "fill-opacity": "1",
19
+ "label": true,
20
+ "label-position": "nw",
21
+ "color": "#a4a4a4"
22
+ },
23
+ "nodes": [
24
+ "692a3e832f8d73f3",
25
+ "729c0770b8668a01",
26
+ "235817d0681cb1f0",
27
+ "c79603e9f6e52325"
28
+ ],
29
+ "x": 394,
30
+ "y": 119,
31
+ "w": 272,
32
+ "h": 202
33
+ },
34
+ {
35
+ "id": "741b65d8481f5e74",
36
+ "type": "group",
37
+ "z": "36a805baecdc408b",
38
+ "style": {
39
+ "stroke": "#999999",
40
+ "stroke-opacity": "1",
41
+ "fill": "none",
42
+ "fill-opacity": "1",
43
+ "label": true,
44
+ "label-position": "nw",
45
+ "color": "#a4a4a4"
46
+ },
47
+ "nodes": [
48
+ "6c8d92ba6862e570",
49
+ "5c825ecdc5079375",
50
+ "a3fa3717bee04a27",
51
+ "e73bbc0b6af22697"
52
+ ],
53
+ "x": 294,
54
+ "y": 339,
55
+ "w": 372,
56
+ "h": 202
57
+ },
58
+ {
59
+ "id": "9e506175332e9a72",
60
+ "type": "group",
61
+ "z": "36a805baecdc408b",
62
+ "style": {
63
+ "stroke": "#999999",
64
+ "stroke-opacity": "1",
65
+ "fill": "none",
66
+ "fill-opacity": "1",
67
+ "label": true,
68
+ "label-position": "nw",
69
+ "color": "#a4a4a4"
70
+ },
71
+ "nodes": [
72
+ "b9a121cbf8d6f9ac",
73
+ "195b0f8e6bfa7c49",
74
+ "486fc8da5ce6ca72"
75
+ ],
76
+ "x": 14,
77
+ "y": 579,
78
+ "w": 672,
79
+ "h": 162
80
+ },
81
+ {
82
+ "id": "6e8ab51329336f7f",
83
+ "type": "group",
84
+ "z": "36a805baecdc408b",
85
+ "style": {
86
+ "stroke": "#999999",
87
+ "stroke-opacity": "1",
88
+ "fill": "none",
89
+ "fill-opacity": "1",
90
+ "label": true,
91
+ "label-position": "nw",
92
+ "color": "#a4a4a4"
93
+ },
94
+ "nodes": [
95
+ "01c9759d4d2bb186",
96
+ "0f45e89772bc5c97",
97
+ "7cf27feea7854733"
98
+ ],
99
+ "x": 274,
100
+ "y": 759,
101
+ "w": 412,
102
+ "h": 142
103
+ },
104
+ {
105
+ "id": "6e160b1ecd74e600",
106
+ "type": "debug",
107
+ "z": "36a805baecdc408b",
108
+ "name": "debug msg",
109
+ "active": false,
110
+ "tosidebar": true,
111
+ "console": false,
112
+ "tostatus": false,
113
+ "complete": "true",
114
+ "targetType": "full",
115
+ "statusVal": "",
116
+ "statusType": "auto",
117
+ "x": 1250,
118
+ "y": 380,
119
+ "wires": []
120
+ },
121
+ {
122
+ "id": "05c367842aa2cd90",
123
+ "type": "OpcUa-Client2-Monitor",
124
+ "z": "36a805baecdc408b",
125
+ "inputs": 1,
126
+ "output": 2,
127
+ "name": "",
128
+ "endpoint": "c80889511cc51fe9",
129
+ "subscription": "s0",
130
+ "startImmediately": false,
131
+ "nodeId": "ns=0;i=2258",
132
+ "samplingInterval": 1000,
133
+ "discardOldest": true,
134
+ "queueSize": 10,
135
+ "x": 1020,
136
+ "y": 440,
137
+ "wires": [
138
+ [
139
+ "6e160b1ecd74e600",
140
+ "1281dd7e87b80429"
141
+ ]
142
+ ]
143
+ },
144
+ {
145
+ "id": "692a3e832f8d73f3",
146
+ "type": "inject",
147
+ "z": "36a805baecdc408b",
148
+ "g": "91c517c753b485df",
149
+ "name": "",
150
+ "props": [
151
+ {
152
+ "p": "payload"
153
+ }
154
+ ],
155
+ "repeat": "",
156
+ "crontab": "",
157
+ "once": false,
158
+ "onceDelay": 0.1,
159
+ "topic": "",
160
+ "payload": "ns=1;s=Matrix",
161
+ "payloadType": "str",
162
+ "x": 570,
163
+ "y": 200,
164
+ "wires": [
165
+ [
166
+ "05c367842aa2cd90"
167
+ ]
168
+ ]
169
+ },
170
+ {
171
+ "id": "729c0770b8668a01",
172
+ "type": "inject",
173
+ "z": "36a805baecdc408b",
174
+ "g": "91c517c753b485df",
175
+ "name": "",
176
+ "props": [
177
+ {
178
+ "p": "payload"
179
+ }
180
+ ],
181
+ "repeat": "",
182
+ "crontab": "",
183
+ "once": false,
184
+ "onceDelay": 0.1,
185
+ "topic": "",
186
+ "payload": "ns=1;s=BadNode",
187
+ "payloadType": "str",
188
+ "x": 560,
189
+ "y": 240,
190
+ "wires": [
191
+ [
192
+ "05c367842aa2cd90"
193
+ ]
194
+ ]
195
+ },
196
+ {
197
+ "id": "235817d0681cb1f0",
198
+ "type": "inject",
199
+ "z": "36a805baecdc408b",
200
+ "g": "91c517c753b485df",
201
+ "name": "",
202
+ "props": [
203
+ {
204
+ "p": "payload"
205
+ }
206
+ ],
207
+ "repeat": "",
208
+ "crontab": "",
209
+ "once": false,
210
+ "onceDelay": 0.1,
211
+ "topic": "",
212
+ "payload": "ns=1;s=Temperature",
213
+ "payloadType": "str",
214
+ "x": 550,
215
+ "y": 280,
216
+ "wires": [
217
+ [
218
+ "05c367842aa2cd90"
219
+ ]
220
+ ]
221
+ },
222
+ {
223
+ "id": "c79603e9f6e52325",
224
+ "type": "comment",
225
+ "z": "36a805baecdc408b",
226
+ "g": "91c517c753b485df",
227
+ "name": "using payload: <nodeId>",
228
+ "info": "",
229
+ "x": 530,
230
+ "y": 160,
231
+ "wires": []
232
+ },
233
+ {
234
+ "id": "6c8d92ba6862e570",
235
+ "type": "inject",
236
+ "z": "36a805baecdc408b",
237
+ "g": "741b65d8481f5e74",
238
+ "name": "inject { nodeId: ns=1;s=Temperature } ",
239
+ "props": [
240
+ {
241
+ "p": "payload"
242
+ }
243
+ ],
244
+ "repeat": "",
245
+ "crontab": "",
246
+ "once": false,
247
+ "onceDelay": 0.1,
248
+ "topic": "",
249
+ "payload": "{\"nodeId\":\"ns=1;s=Temperature\"}",
250
+ "payloadType": "json",
251
+ "x": 490,
252
+ "y": 420,
253
+ "wires": [
254
+ [
255
+ "05c367842aa2cd90"
256
+ ]
257
+ ]
258
+ },
259
+ {
260
+ "id": "e73bbc0b6af22697",
261
+ "type": "comment",
262
+ "z": "36a805baecdc408b",
263
+ "g": "741b65d8481f5e74",
264
+ "name": "using payload: { nodeId: <nodeId> }",
265
+ "info": "",
266
+ "x": 500,
267
+ "y": 380,
268
+ "wires": []
269
+ },
270
+ {
271
+ "id": "5c825ecdc5079375",
272
+ "type": "inject",
273
+ "z": "36a805baecdc408b",
274
+ "g": "741b65d8481f5e74",
275
+ "name": "inject { nodeId: ns=1;s=BadNode } ",
276
+ "props": [
277
+ {
278
+ "p": "payload"
279
+ }
280
+ ],
281
+ "repeat": "",
282
+ "crontab": "",
283
+ "once": false,
284
+ "onceDelay": 0.1,
285
+ "topic": "",
286
+ "payload": "{\"nodeId\":\"ns=1;s=BadNode\"}",
287
+ "payloadType": "json",
288
+ "x": 500,
289
+ "y": 460,
290
+ "wires": [
291
+ [
292
+ "05c367842aa2cd90"
293
+ ]
294
+ ]
295
+ },
296
+ {
297
+ "id": "a3fa3717bee04a27",
298
+ "type": "inject",
299
+ "z": "36a805baecdc408b",
300
+ "g": "741b65d8481f5e74",
301
+ "name": "inject { nodeId: <empty> } ",
302
+ "props": [
303
+ {
304
+ "p": "payload"
305
+ }
306
+ ],
307
+ "repeat": "",
308
+ "crontab": "",
309
+ "once": false,
310
+ "onceDelay": 0.1,
311
+ "topic": "",
312
+ "payload": "{\"nodeId\":\"\"}",
313
+ "payloadType": "json",
314
+ "x": 530,
315
+ "y": 500,
316
+ "wires": [
317
+ [
318
+ "05c367842aa2cd90"
319
+ ]
320
+ ]
321
+ },
322
+ {
323
+ "id": "41a6dd0f6196bb4b",
324
+ "type": "inject",
325
+ "z": "36a805baecdc408b",
326
+ "name": "msg.action: \"Stop\"",
327
+ "props": [
328
+ {
329
+ "p": "action",
330
+ "v": "stop",
331
+ "vt": "str"
332
+ }
333
+ ],
334
+ "repeat": "",
335
+ "crontab": "",
336
+ "once": false,
337
+ "onceDelay": 0.1,
338
+ "topic": "",
339
+ "x": 570,
340
+ "y": 80,
341
+ "wires": [
342
+ [
343
+ "05c367842aa2cd90"
344
+ ]
345
+ ]
346
+ },
347
+ {
348
+ "id": "1281dd7e87b80429",
349
+ "type": "debug",
350
+ "z": "36a805baecdc408b",
351
+ "name": "debug payload",
352
+ "active": true,
353
+ "tosidebar": true,
354
+ "console": false,
355
+ "tostatus": false,
356
+ "complete": "payload",
357
+ "targetType": "msg",
358
+ "statusVal": "",
359
+ "statusType": "auto",
360
+ "x": 1260,
361
+ "y": 500,
362
+ "wires": []
363
+ },
364
+ {
365
+ "id": "195b0f8e6bfa7c49",
366
+ "type": "inject",
367
+ "z": "36a805baecdc408b",
368
+ "g": "9e506175332e9a72",
369
+ "name": "payload: { \"Temperature\": \"ns=1;s=Temperature\"}",
370
+ "props": [
371
+ {
372
+ "p": "payload"
373
+ },
374
+ {
375
+ "p": "topic",
376
+ "vt": "str"
377
+ }
378
+ ],
379
+ "repeat": "",
380
+ "crontab": "",
381
+ "once": false,
382
+ "onceDelay": 0.1,
383
+ "topic": "",
384
+ "payload": "{ \"Temperature\": \"ns=1;s=Temperature\"}",
385
+ "payloadType": "json",
386
+ "x": 480,
387
+ "y": 660,
388
+ "wires": [
389
+ [
390
+ "05c367842aa2cd90"
391
+ ]
392
+ ]
393
+ },
394
+ {
395
+ "id": "486fc8da5ce6ca72",
396
+ "type": "inject",
397
+ "z": "36a805baecdc408b",
398
+ "g": "9e506175332e9a72",
399
+ "name": "payload:{ \"Temperature\": \"ns=1;s=Temperature\" , \"Status\": { \"CurrentTime\": \"i=2258\"} }",
400
+ "props": [
401
+ {
402
+ "p": "payload"
403
+ },
404
+ {
405
+ "p": "topic",
406
+ "vt": "str"
407
+ }
408
+ ],
409
+ "repeat": "",
410
+ "crontab": "",
411
+ "once": false,
412
+ "onceDelay": 0.1,
413
+ "topic": "",
414
+ "payload": "{ \"Temperature\": \"ns=1;s=Temperature\" , \"Status\": { \"CurrentTime\": \"i=2258\"} }",
415
+ "payloadType": "json",
416
+ "x": 360,
417
+ "y": 700,
418
+ "wires": [
419
+ [
420
+ "05c367842aa2cd90"
421
+ ]
422
+ ]
423
+ },
424
+ {
425
+ "id": "b9a121cbf8d6f9ac",
426
+ "type": "comment",
427
+ "z": "36a805baecdc408b",
428
+ "g": "9e506175332e9a72",
429
+ "name": "using payload: { a: <nodeId> , { b: { c: <nodeId>} }}",
430
+ "info": "",
431
+ "x": 470,
432
+ "y": 620,
433
+ "wires": []
434
+ },
435
+ {
436
+ "id": "01c9759d4d2bb186",
437
+ "type": "OpcUa-Client2-Explore",
438
+ "z": "36a805baecdc408b",
439
+ "g": "6e8ab51329336f7f",
440
+ "inputs": 1,
441
+ "output": 4,
442
+ "name": "Explore RFID Object",
443
+ "endpoint": "c80889511cc51fe9",
444
+ "nodeId": "/di:DeviceSet/ns1:RFIDScanner",
445
+ "outputType": "BrowsePath",
446
+ "excludeEmpty": true,
447
+ "followOrganizes": true,
448
+ "x": 570,
449
+ "y": 860,
450
+ "wires": [
451
+ [
452
+ "05c367842aa2cd90",
453
+ "89c3794be219609f"
454
+ ]
455
+ ]
456
+ },
457
+ {
458
+ "id": "0f45e89772bc5c97",
459
+ "type": "inject",
460
+ "z": "36a805baecdc408b",
461
+ "g": "6e8ab51329336f7f",
462
+ "name": "Go",
463
+ "props": [],
464
+ "repeat": "",
465
+ "crontab": "",
466
+ "once": false,
467
+ "onceDelay": 0.1,
468
+ "topic": "",
469
+ "x": 390,
470
+ "y": 860,
471
+ "wires": [
472
+ [
473
+ "01c9759d4d2bb186"
474
+ ]
475
+ ]
476
+ },
477
+ {
478
+ "id": "89c3794be219609f",
479
+ "type": "debug",
480
+ "z": "36a805baecdc408b",
481
+ "name": "debug 2",
482
+ "active": true,
483
+ "tosidebar": true,
484
+ "console": false,
485
+ "tostatus": false,
486
+ "complete": "false",
487
+ "statusVal": "",
488
+ "statusType": "auto",
489
+ "x": 1240,
490
+ "y": 860,
491
+ "wires": []
492
+ },
493
+ {
494
+ "id": "7cf27feea7854733",
495
+ "type": "comment",
496
+ "z": "36a805baecdc408b",
497
+ "g": "6e8ab51329336f7f",
498
+ "name": "using payload: <result of explore >",
499
+ "info": "",
500
+ "x": 440,
501
+ "y": 800,
502
+ "wires": []
503
+ },
504
+ {
505
+ "id": "c80889511cc51fe9",
506
+ "type": "OpcUa-Endpoint2",
507
+ "name": "",
508
+ "endpoint": "opc.tcp://opcuademo.sterfive.com:26543/UA/SampleServer",
509
+ "securityMode": "None",
510
+ "securityPolicy": "None",
511
+ "userIdentityType": "Anonymous",
512
+ "pkiName": "",
513
+ "useTransport": false,
514
+ "maxChunkCount": 1,
515
+ "maxMessageSize": 8192,
516
+ "receiveBufferSize": 8192,
517
+ "sendBufferSize": 8192,
518
+ "subscriptions": [
519
+ {
520
+ "id": "s0",
521
+ "name": "Default Subscription",
522
+ "isDefault": true,
523
+ "parameters": {
524
+ "publishingEnabled": true,
525
+ "requestedLifetimeCount": "1000",
526
+ "requestedMaxKeepAliveCount": "10",
527
+ "requestedPublishingInterval": "1000",
528
+ "maxNotificationsPerPublish": "0",
529
+ "priority": "100"
530
+ }
531
+ },
532
+ {
533
+ "id": "s1",
534
+ "name": "Slow Subscription",
535
+ "isDefault": true,
536
+ "parameters": {
537
+ "publishingEnabled": true,
538
+ "requestedLifetimeCount": "100",
539
+ "requestedMaxKeepAliveCount": "3",
540
+ "requestedPublishingInterval": "5000",
541
+ "maxNotificationsPerPublish": "100",
542
+ "priority": "10"
543
+ }
544
+ },
545
+ {
546
+ "id": "s2",
547
+ "name": "Fast Subscription",
548
+ "isDefault": true,
549
+ "parameters": {
550
+ "publishingEnabled": true,
551
+ "requestedLifetimeCount": "4000",
552
+ "requestedMaxKeepAliveCount": "50",
553
+ "requestedPublishingInterval": "250",
554
+ "maxNotificationsPerPublish": "100",
555
+ "priority": "200"
556
+ }
557
+ }
558
+ ],
559
+ "namespaceAliases": [
560
+ {
561
+ "namespaceUri": "http://opcfoundation.org/UA/",
562
+ "alias": "ua"
563
+ },
564
+ {
565
+ "namespaceUri": "urn:opcuademo.sterfive.com:NodeOPCUA-Server-for-CTT",
566
+ "alias": "ns1"
567
+ },
568
+ {
569
+ "namespaceUri": "http://opcfoundation.org/UA/DI/",
570
+ "alias": "di"
571
+ },
572
+ {
573
+ "namespaceUri": "http://opcfoundation.org/UA/ADI/",
574
+ "alias": "adi"
575
+ },
576
+ {
577
+ "namespaceUri": "http://opcfoundation.org/UA/AutoID/",
578
+ "alias": "autoId"
579
+ },
580
+ {
581
+ "namespaceUri": "http://opcfoundation.org/UA/MachineVision",
582
+ "alias": "machineVision"
583
+ },
584
+ {
585
+ "namespaceUri": "http://opcfoundation.org/UA/Robotics/",
586
+ "alias": "robotics"
587
+ },
588
+ {
589
+ "namespaceUri": "http://opcfoundation.org/UA/CommercialKitchenEquipment/",
590
+ "alias": "commercialKitchenEquipment"
591
+ },
592
+ {
593
+ "namespaceUri": "http://opcfoundation.org/UA/ISA95-JOBCONTROL_V2/",
594
+ "alias": "isa95JobControl"
595
+ },
596
+ {
597
+ "namespaceUri": "http://opcfoundation.org/UA/Dictionary/IRDI",
598
+ "alias": "irdi"
599
+ },
600
+ {
601
+ "namespaceUri": "http://opcfoundation.org/UA/IA/",
602
+ "alias": "ia"
603
+ },
604
+ {
605
+ "namespaceUri": "http://opcfoundation.org/UA/Machinery/",
606
+ "alias": "machinery"
607
+ },
608
+ {
609
+ "namespaceUri": "http://opcfoundation.org/UA/Machinery/Jobs/",
610
+ "alias": "machineryJobs"
611
+ },
612
+ {
613
+ "namespaceUri": "http://opcfoundation.org/UA/MachineTool/",
614
+ "alias": "machineTool"
615
+ },
616
+ {
617
+ "namespaceUri": "http://opcfoundation.org/UA/PackML/",
618
+ "alias": "packML"
619
+ },
620
+ {
621
+ "namespaceUri": "urn://node-opcua-simulator",
622
+ "alias": "ns2"
623
+ },
624
+ {
625
+ "namespaceUri": "http://sterfive.com/UA/CoffeeMachine/",
626
+ "alias": "ns3"
627
+ }
628
+ ]
629
+ }
630
+ ]
@@ -0,0 +1,17 @@
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.0">
7
+ <title>Vue SVG Example</title>
8
+ <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
10
+ </head>
11
+
12
+ <body>
13
+ <div id="app"></div>
14
+ <script type="text/babel" src="Tank.jsx"></script>
15
+ </body>
16
+
17
+ </html>
@@ -0,0 +1,33 @@
1
+ <template>
2
+ <svg class="my-tank" width="300px" height=" 300px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
3
+
4
+ <defs>
5
+ <ref id="paramHeight" param="100" default="100" />
6
+ </defs>
7
+ const { createApp, ref } = Vue
8
+ <path id="liquid" style="fill:#0008ff;fill-opacity:0.8;"
9
+ :d="m 15,{d+50} c 0,-6 16,-10 36,-10 18,0 34,4 34,10 l 0,31 C 82,{d+86} 69,{d+90} 52,{d+90} 36,{d+90} 18,{d+87} 15,{d+81} z" />
10
+
11
+ </svg>
12
+ </template>
13
+ <script>
14
+ export default {
15
+ name: 'MyTank',
16
+ props: {
17
+ height: {
18
+ type: Number,
19
+ default: 0,
20
+ }
21
+ },
22
+ computed: {
23
+ d: ()=>{
24
+ return 50 - this.height;
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style scoped>
30
+ .my-tank {
31
+ /* Scoped CSS here */
32
+ }
33
+ </style>