Wiki source code of Demo for Smart Office, Factory

Version 18.1 by Hera Guo on 2024/11/04 17:42
Hide last authors
Hera Guo 11.1 1 **Table of Contents:**
2
3 {{toc/}}
4
5
6
7
Chxy 2.1 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
Chxy 4.1 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"]]
Chxy 5.1 19
20
21 The rest of this chapter will provide the introduction for how to set up similiar solution.
22
23
Hera Guo 15.1 24 = 2.Basic configuration instructions =
Chxy 5.1 25
Hera Guo 14.1 26 When you start a complex IoT project, you first need to learn some basic configuration methods for ThingsEye.
Chxy 5.1 27
Hera Guo 14.1 28 Here are some instructions you need to know：
Chxy 5.1 29
Hera Guo 14.1 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]]
Chxy 5.1 31
Hera Guo 15.1 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/]]
Chxy 5.1 33
Hera Guo 14.1 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/]]
Chxy 5.1 35
Hera Guo 15.1 36 = 3.overview =
Chxy 5.1 37
Hera Guo 15.1 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
Hera Guo 16.1 93 === 4.1.1.Data source (Entity aliases) ===
94
95 Asset map:
96
Hera Guo 18.1 97 [[image:1730709409941-536.png||height="729" width="1440"]]
Hera Guo 16.1 98
99 detail:
100
Hera Guo 18.1 101 [[image:1730709424998-915.png||height="729" width="1436"]]
Hera Guo 16.1 102
103 devid:
104
Hera Guo 18.1 105 [[image:1730709442773-502.png||height="738" width="1434"]]
Hera Guo 16.1 106
107 State:
108
Hera Guo 18.1 109 [[image:1730709461297-207.png||height="706" width="1434"]]
Hera Guo 16.1 110
111 Alarm:
112
Hera Guo 18.1 113 [[image:1730709479828-595.png||height="696" width="1435"]]
Hera Guo 16.1 114
115 Dragino&GXHL,Ltd:
116
Hera Guo 18.1 117 [[image:1730709511861-439.png||height="714" width="1435"]]
Hera Guo 16.1 118
119 Selected Supermarket:
120
Hera Guo 18.1 121 [[image:1730709527720-418.png||height="751" width="1433"]]
Hera Guo 16.1 122
123 Supermarkets:
124
Hera Guo 18.1 125 [[image:1730709542597-321.png||height="734" width="1435"]]
Hera Guo 16.1 126
127 Supermarket Devices:
128
Hera Guo 18.1 129 [[image:1730709555797-383.png||height="726" width="1434"]]
Hera Guo 16.1 130
131
132 === 4.1.2.Page Configuration ===
133
Hera Guo 15.1 134 1、Configure the interface of the third layer Davies.
135
136
137 2、Configure the interface of the second layer asset
138
139
140 3、Configure the first layer menu interface
141
Hera Guo 17.1 142 Map:
Hera Guo 15.1 143
Hera Guo 17.1 144 Data:
145
Hera Guo 18.1 146 [[image:1730710271230-716.png||height="729" width="1427"]]
Hera Guo 17.1 147
148 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
149
Hera Guo 18.1 150 [[image:1730710850458-781.png||height="770" width="1429"]]
Hera Guo 17.1 151
152 Select supermarket:
153
154 {{code language="none"}}
155 var params = widgetContext.stateController.getStateParams();
156 var selectedSupermarket = params['selectedSupermarket'];
157 if (selectedSupermarket && selectedSupermarket.entityId.id === entityId.id) {
158 params['selectedSupermarket'] = null;
159 } else {
160 params['selectedSupermarket'] = { entityId: entityId, entityName: entityName, entityLabel: entityLabel };
161 }
162 widgetContext.stateController.updateState(null, params);
163 {{/code}}
164
Hera Guo 18.1 165 [[image:1730710875401-848.png||height="767" width="1429"]]
Hera Guo 17.1 166
167 Supermarket_detail:
168
169 {{code language="none"}}
170 var params = JSON.parse(JSON.stringify(widgetContext.stateController.getStateParams()));
171 params['selectedSupermarket'] = {
172 entityId: entityId,
173 entityName: entityName,
174 entityLabel: entityLabel,
175 };
176 params['targetEntityParamName'] = 'selectedSupermarket';
177 params['selectedDevice'] = null;
178
179 widgetContext.stateController.openState('svgmap', params);
180 {{/code}}
181
Hera Guo 18.1 182 [[image:1730710990334-601.png||height="772" width="1433"]]
Hera Guo 17.1 183
184 * In this demo, exclusive map icons were set as follows:
185
186 {{code language="none"}}
187 var res = {
188 url: images[0],
189 size: 66
190 };
191 return res;
192 {{/code}}
193
Hera Guo 18.1 194 [[image:1730710395303-672.png||height="771" width="1438"]]
Hera Guo 17.1 195
196 Asset List:
197
198
Hera Guo 18.1 199 [[image:1730710693066-349.png||height="772" width="1439"]]
Hera Guo 17.1 200
Hera Guo 18.1 201 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
202
203 [[image:1730712335338-750.png||height="751" width="1423"]]
204
205 [[image:1730712473941-913.png||height="781" width="1422"]]
206
207 All Alarms:
208
209 [[image:1730712539209-554.png||height="764" width="1424"]]
210
Hera Guo 15.1 211 == 4.2 Alarm configuration details ==
212
213 == 4.3 Rule chain configuration details ==
214
Hera Guo 14.1 215 = 5. =