Wiki source code of Demo for Smart Office, Factory

Version 19.1 by Hera Guo on 2024/11/05 09:51
Show last authors
1 **Table of Contents:**
2
3 {{toc/}}
4
5
6
7
8 = 1. About this demo =
9
10 This demo is to show the installation for various sensors in Dragino Office, Dragino Facotry & ThingsEye Office. It covers various types of sensors such as Temperature, Humidity, CO2, Water Flow, Vibration & many many.
11
12 User can check this [[Public Share Link>>https://thingseye.io/dashboard/d17f70f0-6b5f-11ef-a329-6fb88c149adb?publicId=33180810-5c40-11ef-a329-6fb88c149adb ]] and see the dash board for this demo. The dash board keeps updating, while the main structure will keep the same. It has **Three Level DashBoard **as decribe below.
13
14 * **First Level - Overview for all branches**: This dashboard shows all branches overview status and location.
15 * **Second Level - Branch Level**: This dashboard shows all sensors installation and status in the selected branch.
16 * **Third Level - Sensor Level**: This dashboard shows the detail reading for a specify sensor
17
18 [[image:Level1.png||height="133" width="298"]] [[image:Arrow.png||height="27" width="51"]] [[image:Level2.png||height="134" width="264"]][[image:Arrow.png||height="27" width="51"]] [[image:2024-09-26 23-47-06.png||height="130" width="256"]]
19
20
21 The rest of this chapter will provide the introduction for how to set up similiar solution.
22
23
24 = 2.Basic configuration instructions =
25
26 When you start a complex IoT project, you first need to learn some basic configuration methods for ThingsEye.
27
28 Here are some instructions you need to know：
29
30 Dashboard creation and some basic configurations:[[https:~~/~~/wiki.thingseye.io/xwiki/bin/view/Main/How%20to%20import%20and%20use%20the%20dashboard%3F/#H3.2.2.1CreatA0alarm>>https://wiki.thingseye.io/xwiki/bin/view/Main/How%20to%20import%20and%20use%20the%20dashboard%3F/#H3.2.2.1CreatA0alarm]]
31
32 Rule chain creation:[[https:~~/~~/wiki.thingseye.io/xwiki/bin/view/Main/Basic%20configuration%20of%20rule%20chains>>https://wiki.thingseye.io/xwiki/bin/view/Main/Basic%20configuration%20of%20rule%20chains/]]
33
34 Devices connected to thingseye：[[https:~~/~~/wiki.thingseye.io/xwiki/bin/view/Main/How%20to%20connect%20my%20devices%20to%20ThingsEye%3F/>>https://wiki.thingseye.io/xwiki/bin/view/Main/How%20to%20connect%20my%20devices%20to%20ThingsEye%3F/]]
35
36 = 3.overview =
37
38 == 3.1 MHierarchical architectureore features ==
39
40 Before we start a project, we first need to understand the organizational structure of the project. Only with a clear outline can our project construction process be smoother
41
42 **Assets：**Dragino Office  、Dragino Factory
43
44 **Devices：**
45
46 Dragino Factory：temperature and humidity measurement×7、Gateway×1
47
48 Dragino Office：temperature and humidity measurement×2、Air quality measurement×4
49
50 == 3.2 Dashboard architecture ==
51
52 In this demo, the dashboard is divided into three layers, namely: home page, asset, and device.
53
54 **home page:**It includes three parts: map, asset list, and all alarm. From this interface, you can see how many factories, offices, and so on there are
55
56 **asset:**It includes three parts: asset map, device list, and asset alarm. From this interface, you can see how many sensors are deployed in the office or project, where they are located, and their alarm status
57
58 **device:**This section displays the specific information collected by the device, and different types of sensors have different display interfaces
59
60 [[image:1730699212334-960.png]]
61
62 First floor：
63
64 [[image:1730702565889-204.png||height="771" width="1445"]]
65
66 Second floor：
67
68 [[image:1730702622551-808.png||height="756" width="1450"]]
69
70 Third floor：
71
72 [[image:1730702656725-496.png||height="775" width="1455"]]
73
74 [[image:1730702814435-805.png||height="797" width="1458"]]
75
76
77 [[image:1730702688377-367.png||height="770" width="1462"]]
78
79 * How many types of devices do you need, how many layers of third level dashboards you need to create.
80
81 == 3.3 Alarm rules ==
82
83 High Temperature、Low Temperature、High humidity、Low humidity、Low voltage、Device Disconnected
84
85 [[image:1730699566023-958.png]]
86
87 = 4.configuration details =
88
89 After understanding the architecture and layering of the complete project, we can start configuring it
90
91 == 4.1 Dashboard configuration details ==
92
93 === 4.1.1.Data source (Entity aliases) ===
94
95 Asset map:
96
97 [[image:1730709409941-536.png||height="729" width="1440"]]
98
99 detail:
100
101 [[image:1730709424998-915.png||height="729" width="1436"]]
102
103 devid:
104
105 [[image:1730709442773-502.png||height="738" width="1434"]]
106
107 State:
108
109 [[image:1730709461297-207.png||height="706" width="1434"]]
110
111 Alarm:
112
113 [[image:1730709479828-595.png||height="696" width="1435"]]
114
115 Dragino&GXHL,Ltd:
116
117 [[image:1730709511861-439.png||height="714" width="1435"]]
118
119 Selected Supermarket:
120
121 [[image:1730709527720-418.png||height="751" width="1433"]]
122
123 Supermarkets:
124
125 [[image:1730709542597-321.png||height="734" width="1435"]]
126
127 Supermarket Devices:
128
129 [[image:1730709555797-383.png||height="726" width="1434"]]
130
131
132 === 4.1.2.Page Configuration ===
133
134 ==== 4.1.2.1、Configure the interface of the third layer Davies. ====
135
136
137 ==== 4.1.2.2、Configure the interface of the second layer asset ====
138
139 **Equipment distribution diagram：**
140
141 **Data：**
142
143 [[image:1730770392454-317.png||height="745" width="1439"]]
144
145 Tooltip function：
146
147 {{code language="none"}}
148 var msg = data
149 if(msg.Label=="gateway" && msg.type == "gateway"){
150 var stauts
151 if (msg.gatewaystauts=="true"){
152 stauts = "Connect"
153 }
154 else{
155 stauts = "Disconnected"
156 }
157 var str = "<b>"+msg.entityName+"</b><br/><b>"+stauts+"</b><br/>"
158 return str
159 }
160 else if(msg.type=="gxhl01" && msg.Label!="gateway"){
161 var str = "<b>"+msg.entityName+"</b><br/><b>"+msg.Label+"</b><br/><b>Bat:</b>"+msg.BatV+"V<br/><b>Temperature:</b>"+ msg.TempC_SHT+ "°C<br/><b>Humidity:</b>"+msg.Hum_SHT+"%"
162 return str
163 }
164 else{
165 var str = "<b>"+msg.entityName+"</b><br/><b>"+msg.Label+"</b><br/><b>Bat:</b>"+msg.BatV+"V<br/><b>Temperature:</b>"+ msg.temperature+ "°C<br/><b>Humidity:"+msg.humidity+"%"+"</b><br/>"+
166 "<b>Co2:"+msg.co2+"</b></br><b>Air_Pressure:"+msg.air_pressure
167
168 return str
169 }
170 {{/code}}
171
172 ==== Marker image function： ====
173
174 {{code language="none"}}
175 var res
176 var msg = data
177 if(msg.Label=="gateway" && msg.type=="gateway"){
178 if (msg.gatewaystauts == "true"){
179 res = {
180 url: images[3],
181 size: 40
182 }
183 }
184 else{
185 res = {
186 url: images[2],
187 size: 40
188 }
189 }}
190 else if(msg.Label!="gateway" && msg.type=="gxhl01" ){
191 if (msg.active=="false"){
192 res = {
193 url: images[1],
194 size: 40
195 }}
196 else{
197 res = {
198 url: images[0],
199 size: 40
200 }
201 }
202 }
203 else if(msg.type=="LWL02"){
204 if (msg.WATER_LEAK_STATUS=="0"){
205 res = {
206 url: images[6],
207 size: 40
208 }}
209 else{
210 res = {
211 url: images[7],
212 size: 40
213 }
214 }
215 }
216 else if(msg.type=="LDS02"){
217 if (msg.DOOR_OPEN_STATUS=="0"){
218 res = {
219 url: images[5],
220 size: 40
221 }}
222 else{
223 res = {
224 url: images[8],
225 size: 40
226 }
227 }
228 }
229 else if(msg.type=="LDS12"){
230 res = {
231 url: images[10],
232 size: 40
233 }}
234 else if(msg.type=="SE01"){
235 res = {
236 url: images[9],
237 size: 40
238 }}
239 else if(msg.type=="PB01"){
240 res = {
241 url: images[11],
242 size: 40
243 }}
244 else if(msg.type=="S31b"){
245 res = {
246 url: images[12],
247 size: 40
248 }}
249 else if(msg.type=="LHT65N"){
250 res = {
251 url: images[13],
252 size: 40
253 }}
254 else{
255 res = {
256 url: images[4],
257 size: 40
258 }
259 }
260 return res;
261 {{/code}}
262
263 ==== [[image:1730770875793-351.png]] ====
264
265 ==== Actions ====
266
267 {{code language="none"}}
268 var entitySubType;
269 var $injector = widgetContext.$scope.$injector;
270 $injector.get(widgetContext.servicesMap.get('entityService')).getEntity(entityId.entityType, entityId.id)
271 .subscribe(function(data) {
272 entitySubType = data.type;
273 console.log(entitySubType)
274 if (entitySubType == 'gateway') {
275 openDashboardStates('gateway_detail');
276 } else if (entitySubType == 'gxhl01') {
277 openDashboardStates('detail');
278 }
279 else if(entitySubType == 'AQS01-dragino-office'){
280 openDashboardStates("aqs01_detail")
281 }
282 else if (entitySubType == 'LDS12') {
283 openDashboardStates('lds12_detail');
284 }
285 else if (entitySubType == 'LDS02') {
286 openDashboardStates('lds02_detail');
287 }
288 else if (entitySubType == 'SE01') {
289 openDashboardStates('se01_detail');
290 }
291 else if (entitySubType == 'PB01') {
292 openDashboardStates('pb01_detail');
293 }
294 else if (entitySubType == 'LWL02') {
295 openDashboardStates('lwl02_detail');
296 }
297 else if (entitySubType == 'LPS8N') {
298 openDashboardStates('lps8n_detail');
299 }
300 else if (entitySubType == 'LHT65N') {
301 openDashboardStates('lht65n_detail');
302 }
303 else if (entitySubType == 'S31b') {
304 openDashboardStates('s31b_detail');
305 }
306 });
307
308 function openDashboardStates(statedId) {
309 var stateParams = widgetContext.stateController.getStateParams();
310 var params = {
311 entityId: entityId,
312 entityName: entityName
313 };
314
315 if (stateParams.city) {
316 params.city = stateParams.city;
317 }
318
319 widgetContext.stateController.openState(statedId, params, false);
320 }
321
322 {{/code}}
323
324 [[image:1730771103096-522.png]]
325
326 Device List
327
328 Data：
329
330 [[image:1730771199343-553.png]]
331
332 Actions：
333
334 [[image:1730771228766-212.png]]
335
336 ==== Edit device： ====
337
338 {{code language="none"}}
339 let $injector = widgetContext.$scope.$injector;
340 let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
341 let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
342 let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
343
344 openEditDeviceDialog();
345
346 function openEditDeviceDialog() {
347 customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();
348 }
349
350 function EditDeviceDialogController(instance) {
351 let vm = instance;
352
353 vm.device = null;
354 vm.attributes = {};
355
356 vm.editDeviceFormGroup = vm.fb.group({
357 deviceName: ['', [vm.validators.required]],
358 deviceType: ['', [vm.validators.required]],
359 deviceLabel: [''],
360 attributes: vm.fb.group({
361 latitude: [null],
362 longitude: [null]
363 })
364 });
365
366 vm.cancel = function() {
367 vm.dialogRef.close(null);
368 };
369
370 vm.save = function() {
371 vm.editDeviceFormGroup.markAsPristine();
372 if (vm.editDeviceFormGroup.get('deviceType').value !== vm.device.type) {
373 delete vm.device.deviceProfileId;
374 }
375 vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,
376 vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,
377 vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value
378 deviceService.saveDevice(vm.device).subscribe(
379 function () {
380 saveAttributes().subscribe(
381 function () {
382 widgetContext.updateAliases();
383 vm.dialogRef.close(null);
384 }
385 );
386 }
387 );
388 };
389
390 getEntityInfo();
391
392 function getEntityInfo() {
393 deviceService.getDevice(entityId.id).subscribe(
394 function (device) {
395 attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',
396 ['latitude', 'longitude']).subscribe(
397 function (attributes) {
398 for (let i = 0; i < attributes.length; i++) {
399 vm.attributes[attributes[i].key] = attributes[i].value;
400 }
401 vm.device = device;
402 vm.editDeviceFormGroup.patchValue(
403 {
404 deviceName: vm.device.name,
405 deviceType: vm.device.type,
406 deviceLabel: vm.device.label,
407 attributes: {
408 latitude: vm.attributes.latitude,
409 longitude: vm.attributes.longitude
410 }
411 }, {emitEvent: false}
412 );
413 }
414 );
415 }
416 );
417 }
418
419 function saveAttributes() {
420 let attributes = vm.editDeviceFormGroup.get('attributes').value;
421 let attributesArray = [];
422 for (let key in attributes) {
423 attributesArray.push({key: key, value: attributes[key]});
424 }
425 if (attributesArray.length > 0) {
426 return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);
427 } else {
428 return widgetContext.rxjs.of([]);
429 }
430 }
431 }
432 {{/code}}
433
434 ==== [[image:1730771256045-238.png]] ====
435
436 Delete device：
437
438 {{code language="none"}}
439 let $injector = widgetContext.$scope.$injector;
440 let dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));
441 let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
442
443 openDeleteDeviceDialog();
444
445 function openDeleteDeviceDialog() {
446 let title = "Are you sure you want to delete the device " + entityName + "?";
447 let content = "Be careful, after the confirmation, the device and all related data will become unrecoverable!";
448 dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(
449 function (result) {
450 if (result) {
451 deleteDevice();
452 }
453 }
454 );
455 }
456
457 function deleteDevice() {
458 deviceService.deleteDevice(entityId.id).subscribe(
459 function () {
460 widgetContext.updateAliases();
461 }
462 );
463 }
464
465 {{/code}}
466
467 [[image:1730771318657-502.png]]
468
469 jump
470
471 {{code language="none"}}
472 console.log(entityName)
473 var entitySubType;
474 var $injector = widgetContext.$scope.$injector;
475 //console.log($injector)
476 $injector.get(widgetContext.servicesMap.get('entityService')).getEntity(entityId.entityType, entityId.id)
477 .subscribe(function(data) {
478 console.log(data)
479 entitySubType = data.type;
480 console.log(entitySubType)
481 if (entitySubType == 'AQS01-dragino-office') {
482 openDashboardStates('aqs01_detail');
483 }else if (entitySubType == 'gateway') {
484 openDashboardStates('gateway_detail');
485 } else if (entitySubType == 'gxhl01') {
486 openDashboardStates('detail');
487
488 } else if (entitySubType == 'tank-type1') {
489 openDashboardStates('test1');
490 }
491 else if (entitySubType == 'LDS12') {
492 openDashboardStates('lds12_detail');
493 }
494 else if (entitySubType == 'LDS02') {
495 openDashboardStates('lds02_detail');
496 }
497 else if (entitySubType == 'SE01') {
498 openDashboardStates('se01_detail');
499 }
500 else if (entitySubType == 'PB01') {
501 openDashboardStates('pb01_detail');
502 }
503 else if (entitySubType == 'LWL02') {
504 openDashboardStates('lwl02_detail');
505 }
506 else if (entitySubType == 'LPS8N') {
507 openDashboardStates('lps8n_detail');
508 }
509 else if (entitySubType == 'LHT65N') {
510 openDashboardStates('lht65n_detail');
511 }
512 else if (entitySubType == 'S31b') {
513 openDashboardStates('s31b_detail');
514 }
515 });
516
517 function openDashboardStates(statedId) {
518 var stateParams = widgetContext.stateController.getStateParams();
519 //console.log(stateParams)
520 var params = {
521 entityId: entityId,
522 entityName: entityName
523 };
524 widgetContext.stateController.updateState(statedId, params, false);
525 }
526 {{/code}}
527
528 ==== [[image:1730771386258-676.png]] ====
529
530 Add device：
531
532 {{code language="none"}}
533 let $injector = widgetContext.$scope.$injector;
534 let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
535 let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
536 let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
537
538 openAddDeviceDialog();
539
540 function openAddDeviceDialog() {
541 customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();
542 }
543
544 function AddDeviceDialogController(instance) {
545 let vm = instance;
546
547 vm.addDeviceFormGroup = vm.fb.group({
548 deviceName: ['', [vm.validators.required]],
549 deviceType: ['', [vm.validators.required]],
550 deviceLabel: [''],
551 attributes: vm.fb.group({
552 latitude: [null],
553 longitude: [null]
554 })
555 });
556
557 vm.cancel = function() {
558 vm.dialogRef.close(null);
559 };
560
561 vm.save = function() {
562 vm.addDeviceFormGroup.markAsPristine();
563 let device = {
564 name: vm.addDeviceFormGroup.get('deviceName').value,
565 type: vm.addDeviceFormGroup.get('deviceType').value,
566 label: vm.addDeviceFormGroup.get('deviceLabel').value
567 };
568 deviceService.saveDevice(device).subscribe(
569 function (device) {
570 saveAttributes(device.id).subscribe(
571 function () {
572 widgetContext.updateAliases();
573 vm.dialogRef.close(null);
574 }
575 );
576 }
577 );
578 };
579
580 function saveAttributes(entityId) {
581 let attributes = vm.addDeviceFormGroup.get('attributes').value;
582 let attributesArray = [];
583 for (let key in attributes) {
584 attributesArray.push({key: key, value: attributes[key]});
585 }
586 if (attributesArray.length > 0) {
587 return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
588 } else {
589 return widgetContext.rxjs.of([]);
590 }
591 }
592 }
593 {{/code}}
594
595 ==== [[image:1730771441589-122.png]] ====
596
597 ==== Asset Alarm： ====
598
599 Data：
600
601 [[image:1730771504586-433.png]]
602
603 ==== 4.1.2.3、Configure the first layer menu interface ====
604
605 **Map:**
606
607 Data:
608
609 [[image:1730710271230-716.png||height="729" width="1427"]]
610
611 Actions:The map interface has two actions, among which Select supermarket can refresh the device list and related alarms on the right side to enter the location, and Supermarket_detail can jump to the second level physical interface to view the details of the location based on the selected location
612
613 [[image:1730710850458-781.png||height="770" width="1429"]]
614
615 Select supermarket:
616
617 {{code language="none"}}
618 var params = widgetContext.stateController.getStateParams();
619 var selectedSupermarket = params['selectedSupermarket'];
620 if (selectedSupermarket && selectedSupermarket.entityId.id === entityId.id) {
621 params['selectedSupermarket'] = null;
622 } else {
623 params['selectedSupermarket'] = { entityId: entityId, entityName: entityName, entityLabel: entityLabel };
624 }
625 widgetContext.stateController.updateState(null, params);
626 {{/code}}
627
628 [[image:1730710875401-848.png||height="767" width="1429"]]
629
630 Supermarket_detail:
631
632 {{code language="none"}}
633 var params = JSON.parse(JSON.stringify(widgetContext.stateController.getStateParams()));
634 params['selectedSupermarket'] = {
635 entityId: entityId,
636 entityName: entityName,
637 entityLabel: entityLabel,
638 };
639 params['targetEntityParamName'] = 'selectedSupermarket';
640 params['selectedDevice'] = null;
641
642 widgetContext.stateController.openState('svgmap', params);
643 {{/code}}
644
645 [[image:1730710990334-601.png||height="772" width="1433"]]
646
647 * In this demo, exclusive map icons were set as follows:
648
649 {{code language="none"}}
650 var res = {
651 url: images[0],
652 size: 66
653 };
654 return res;
655 {{/code}}
656
657 [[image:1730710395303-672.png||height="771" width="1438"]]
658
659 Asset List:
660
661
662 [[image:1730710693066-349.png||height="772" width="1439"]]
663
664 Actions:The Assets List interface has an action, which is the same as the Supermarket_details in the Map. You can jump to the second level entity interface to view the details of the selected location based on its location
665
666 [[image:1730712335338-750.png||height="751" width="1423"]]
667
668 [[image:1730712473941-913.png||height="781" width="1422"]]
669
670 All Alarms:
671
672 [[image:1730712539209-554.png||height="764" width="1424"]]
673
674 == 4.2 Alarm configuration details ==
675
676 == 4.3 Rule chain configuration details ==
677
678 = 5. =