Wiki source code of Demo for Smart Office, Factory

Version 17.1 by Hera Guo on 2024/11/04 17:12
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]]
98
99 detail:
100
101 [[image:1730709424998-915.png]]
102
103 devid:
104
105 [[image:1730709442773-502.png]]
106
107 State:
108
109 [[image:1730709461297-207.png]]
110
111 Alarm:
112
113 [[image:1730709479828-595.png]]
114
115 Dragino&GXHL,Ltd:
116
117 [[image:1730709511861-439.png]]
118
119 Selected Supermarket:
120
121 [[image:1730709527720-418.png]]
122
123 Supermarkets:
124
125 [[image:1730709542597-321.png]]
126
127 Supermarket Devices:
128
129 [[image:1730709555797-383.png]]
130
131
132 === 4.1.2.Page Configuration ===
133
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
142 Map:
143
144 Data:
145
146 [[image:1730710271230-716.png]]
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
150 [[image:1730710850458-781.png]]
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
165 [[image:1730710875401-848.png]]
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
182 [[image:1730710990334-601.png]]
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
194 [[image:1730710395303-672.png]]
195
196 Asset List:
197
198
199 [[image:1730710693066-349.png]]
200
201 == 4.2 Alarm configuration details ==
202
203 == 4.3 Rule chain configuration details ==
204
205 = 5. =