-
Notifications
You must be signed in to change notification settings - Fork 1
/
api.html
330 lines (329 loc) · 81 KB
/
api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>API | PixelIt Documentation</title>
<meta name="generator" content="VuePress 1.9.10">
<link rel="icon" href="/logo.png">
<meta name="description" content="PixelIt Documentation">
<meta name="theme-color" content="#3eaf7c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/assets/css/0.styles.07ffc887.css" as="style"><link rel="preload" href="/assets/js/app.a4248bcf.js" as="script"><link rel="preload" href="/assets/js/2.d22c4d6b.js" as="script"><link rel="preload" href="/assets/js/1.8d2a0d25.js" as="script"><link rel="preload" href="/assets/js/22.e741e0f9.js" as="script"><link rel="prefetch" href="/assets/js/10.9c2c6b9d.js"><link rel="prefetch" href="/assets/js/11.3e725779.js"><link rel="prefetch" href="/assets/js/12.e2c90177.js"><link rel="prefetch" href="/assets/js/13.40f3a3cc.js"><link rel="prefetch" href="/assets/js/14.cde38de4.js"><link rel="prefetch" href="/assets/js/15.c2689bce.js"><link rel="prefetch" href="/assets/js/16.ba234883.js"><link rel="prefetch" href="/assets/js/17.5971219c.js"><link rel="prefetch" href="/assets/js/18.2c671030.js"><link rel="prefetch" href="/assets/js/19.deb5b6cc.js"><link rel="prefetch" href="/assets/js/20.b3ae0a14.js"><link rel="prefetch" href="/assets/js/21.f33ad642.js"><link rel="prefetch" href="/assets/js/23.da58fca4.js"><link rel="prefetch" href="/assets/js/24.196e3de9.js"><link rel="prefetch" href="/assets/js/25.e7b37ae4.js"><link rel="prefetch" href="/assets/js/26.05455cd0.js"><link rel="prefetch" href="/assets/js/27.849205a5.js"><link rel="prefetch" href="/assets/js/28.0441e648.js"><link rel="prefetch" href="/assets/js/29.1c7ad277.js"><link rel="prefetch" href="/assets/js/3.b1c54be9.js"><link rel="prefetch" href="/assets/js/30.10d2ebb6.js"><link rel="prefetch" href="/assets/js/4.273f9f66.js"><link rel="prefetch" href="/assets/js/5.106b2784.js"><link rel="prefetch" href="/assets/js/6.3cf9b69d.js"><link rel="prefetch" href="/assets/js/7.c2107bac.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.e06e619e.js">
<link rel="stylesheet" href="/assets/css/0.styles.07ffc887.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="PixelIt Documentation" class="logo"> <span class="site-name can-hide">PixelIt Documentation</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/pixelit-project/Docs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/pixelit-project/Docs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/hardware.html" class="sidebar-link">Hardware</a></li><li><a href="/firmware.html" class="sidebar-link">Firmware</a></li><li><a href="/webinterface.html" class="sidebar-link">Webinterface</a></li><li><a href="/api.html" aria-current="page" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#interfaces" class="sidebar-link">Interfaces</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#rest" class="sidebar-link">REST</a></li><li class="sidebar-sub-header"><a href="/api.html#mqtt" class="sidebar-link">MQTT</a></li></ul></li><li class="sidebar-sub-header"><a href="/api.html#endpoints" class="sidebar-link">Endpoints</a></li><li class="sidebar-sub-header"><a href="/api.html#screen" class="sidebar-link">Screen</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#text" class="sidebar-link">Text</a></li><li class="sidebar-sub-header"><a href="/api.html#sleep-mode" class="sidebar-link">Sleep Mode</a></li><li class="sidebar-sub-header"><a href="/api.html#brightness" class="sidebar-link">Brightness</a></li><li class="sidebar-sub-header"><a href="/api.html#switch-animation" class="sidebar-link">Switch Animation</a></li><li class="sidebar-sub-header"><a href="/api.html#clock" class="sidebar-link">Clock</a></li><li class="sidebar-sub-header"><a href="/api.html#bitmap" class="sidebar-link">Bitmap</a></li><li class="sidebar-sub-header"><a href="/api.html#bitmaps" class="sidebar-link">Bitmaps</a></li><li class="sidebar-sub-header"><a href="/api.html#bitmap-animation" class="sidebar-link">Bitmap Animation</a></li><li class="sidebar-sub-header"><a href="/api.html#bar" class="sidebar-link">Bar</a></li><li class="sidebar-sub-header"><a href="/api.html#bars" class="sidebar-link">Bars</a></li><li class="sidebar-sub-header"><a href="/api.html#set-gpio" class="sidebar-link">Set GPIO</a></li><li class="sidebar-sub-header"><a href="/api.html#sound" class="sidebar-link">Sound</a></li></ul></li><li class="sidebar-sub-header"><a href="/api.html#brightness-2" class="sidebar-link">Brightness</a></li><li class="sidebar-sub-header"><a href="/api.html#buttons" class="sidebar-link">Buttons</a></li><li class="sidebar-sub-header"><a href="/api.html#lux-sensor" class="sidebar-link">Lux Sensor</a></li><li class="sidebar-sub-header"><a href="/api.html#sensor" class="sidebar-link">Sensor</a></li><li class="sidebar-sub-header"><a href="/api.html#state" class="sidebar-link">State</a></li><li class="sidebar-sub-header"><a href="/api.html#matrix-infomation" class="sidebar-link">Matrix Infomation</a></li><li class="sidebar-sub-header"><a href="/api.html#matrix-config" class="sidebar-link">Matrix Config</a></li><li class="sidebar-sub-header"><a href="/api.html#wifi-reset" class="sidebar-link">WiFi Reset</a></li><li class="sidebar-sub-header"><a href="/api.html#factory-reset" class="sidebar-link">Factory Reset</a></li></ul></li><li><a href="/tools.html" class="sidebar-link">Tools</a></li><li><a href="/nodered.html" class="sidebar-link">Node-RED</a></li><li><a href="/iobroker.html" class="sidebar-link">ioBroker</a></li><li><a href="/troubleshooting.html" class="sidebar-link">Troubleshooting</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" class="header-anchor">#</a> API</h1> <p>You can use the API via the HTTP REST Interface or MQTT. The HTTP API is available at <code>/api/</code> and the MQTT API at <code><MasterTopic>/</code>. You can use both APIs at the same time.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>If you use the <a href="/nodered.html">Node-RED</a> or <a href="/iobroker.html">ioBroker</a> integration, you don't need to use the API directly.</p></div> <h2 id="interfaces"><a href="#interfaces" class="header-anchor">#</a> Interfaces</h2> <h3 id="rest"><a href="#rest" class="header-anchor">#</a> REST</h3> <p>The port is <code>80</code>, The REST API is available at <code>/api/</code>. The following endpoints are available:</p> <h3 id="mqtt"><a href="#mqtt" class="header-anchor">#</a> MQTT</h3> <p>The default MasterTopic is <code>pixelit/</code>, but can be changed in the WebUI. The MasterTopic is used as a prefix for all MQTT topics. If enabled, the device also uses an additional topic with the name <code><MasterTopic>/<hostname></code>. When you use MQTT, you are able to use multiple PixelIts but with the additional topic you can also address a single PixelIt.</p> <p>With MQTT enabled, the device will also discoverable via <a href="https://www.home-assistant.io/integrations/mqtt/" target="_blank" rel="noopener noreferrer">Home Assistant<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>We recommend using MQTT.</p></div> <h2 id="endpoints"><a href="#endpoints" class="header-anchor">#</a> Endpoints</h2> <p>The following endpoints are available:</p> <table><thead><tr><th style="text-align:left;">Endpoint</th> <th style="text-align:left;">Description</th> <th>Details</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>screen</code></td> <td style="text-align:left;">Show screen on device</td> <td><a href="/api.html#screen">Details</a></td></tr> <tr><td style="text-align:left;"><code>brightness</code></td> <td style="text-align:left;">Get or set brightness</td> <td><a href="/api.html#brightness">Details</a></td></tr> <tr><td style="text-align:left;"><code>buttons</code></td> <td style="text-align:left;">Get button states</td> <td><a href="/api.html#buttons">Details</a></td></tr> <tr><td style="text-align:left;"><code>luxsensor</code></td> <td style="text-align:left;">Get lux sensor value</td> <td><a href="/api.html#lux-sensor">Details</a></td></tr> <tr><td style="text-align:left;"><code>sensor</code></td> <td style="text-align:left;">Get sensor values</td> <td><a href="/api.html#sensor">Details</a></td></tr> <tr><td style="text-align:left;"><code>state</code></td> <td style="text-align:left;">Get state (MQTT only)</td> <td><a href="/api.html#state">Details</a></td></tr> <tr><td style="text-align:left;"><code>matrixinfo</code></td> <td style="text-align:left;">Get matrix info</td> <td><a href="/api.html#matrix-infomation">Details</a></td></tr> <tr><td style="text-align:left;"><code>config</code></td> <td style="text-align:left;">Get or set config</td> <td><a href="/api.html#matrix-config">Details</a></td></tr> <tr><td style="text-align:left;"><code>wifireset</code></td> <td style="text-align:left;">WiFi reset</td> <td><a href="/api.html#matrix-config">Details</a></td></tr> <tr><td style="text-align:left;"><code>factoryreset</code></td> <td style="text-align:left;">Reset device to factory defaults</td> <td><a href="/api.html#matrix-config">Details</a></td></tr></tbody></table> <h2 id="screen"><a href="#screen" class="header-anchor">#</a> Screen</h2> <p>Most important endpoint is <code>/api/screen</code> or <code><MasterTopic>/setScreen</code>. This endpoint is used to display a single screen on Pixelit. The following elements are supported:</p> <div class="blue"><p class="title">HTTP Endpoint [POST]</p><p>/api/screen</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/setScreen</p></div><p>You <strong>must</strong> combine all elements in one call that are to be displayed as one screen.</p> <p>Example call:</p> <details class="custom-block details"><summary>Example call:</summary> <h4 id="calling-the-internal-clock-with-a-fade-animation"><a href="#calling-the-internal-clock-with-a-fade-animation" class="header-anchor">#</a> Calling the internal clock with a fade animation:</h4> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"switchAnimation"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"aktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"animation"</span><span class="token operator">:</span> <span class="token string">"fade"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"clock"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"show"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"switchAktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"withSeconds"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"switchSec"</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
<span class="token property">"hexColor"</span><span class="token operator">:</span> <span class="token string">"#1E00FF"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="call-fade-animation-image-and-text"><a href="#call-fade-animation-image-and-text" class="header-anchor">#</a> Call fade animation, image and text:</h4> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"switchAnimation"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"aktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"animation"</span><span class="token operator">:</span> <span class="token string">"fade"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"bitmap"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span>
<span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">693</span><span class="token punctuation">,</span> <span class="token number">1055</span><span class="token punctuation">,</span>
<span class="token number">1055</span><span class="token punctuation">,</span> <span class="token number">65535</span><span class="token punctuation">,</span> <span class="token number">44735</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">693</span><span class="token punctuation">,</span> <span class="token number">1055</span><span class="token punctuation">,</span> <span class="token number">65535</span><span class="token punctuation">,</span> <span class="token number">65535</span><span class="token punctuation">,</span> <span class="token number">44735</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">693</span><span class="token punctuation">,</span>
<span class="token number">1055</span><span class="token punctuation">,</span> <span class="token number">1055</span><span class="token punctuation">,</span> <span class="token number">65535</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">693</span><span class="token punctuation">,</span> <span class="token number">1055</span><span class="token punctuation">,</span> <span class="token number">21855</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"size"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"text"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"textString"</span><span class="token operator">:</span> <span class="token string">"59%"</span><span class="token punctuation">,</span>
<span class="token property">"bigFont"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"scrollText"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"scrollTextDelay"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"centerText"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"hexColor"</span><span class="token operator">:</span> <span class="token string">"#1E00FF"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></details> <h3 id="text"><a href="#text" class="header-anchor">#</a> Text</h3> <hr> <p>The following special characters are supported:
<code>€ ← ↑ → ↓ ★ ♥ ↧ 🚗 😀 📁 📄</code> <img src="/special_characters.png" alt=""></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"text"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"textString"</span><span class="token operator">:</span> <span class="token string">"Test It :D"</span><span class="token punctuation">,</span>
<span class="token property">"bigFont"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"scrollText"</span><span class="token operator">:</span> <span class="token string">"auto"</span><span class="token punctuation">,</span>
<span class="token property">"scrollTextDelay"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"centerText"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"color"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"r"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"g"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"b"</span><span class="token operator">:</span> <span class="token number">255</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"hexColor"</span><span class="token operator">:</span> <span class="token string">"#FFFFFF"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>textString</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"></td> <td style="text-align:left;"><strong>Required</strong>. Displayed Text</td></tr> <tr><td style="text-align:left;"><code>scrollText</code></td> <td style="text-align:left;"><code>Boolean / String</code></td> <td style="text-align:left;"><code>true / false / auto</code></td> <td style="text-align:left;"><strong>Required</strong> Big front</td></tr> <tr><td style="text-align:left;"><code>scrollTextDelay</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 9999</code></td> <td style="text-align:left;"><strong>Required (when scrollText is used)</strong></td></tr> <tr><td style="text-align:left;"><code>centerText</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>position</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"x":8, "y":1}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>color</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"r":255, "g":255, "b":255},</code></td> <td style="text-align:left;"><strong>Required</strong> (or hexColor)</td></tr> <tr><td style="text-align:left;"><code>hexColor</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>#FFFFFF</code></td> <td style="text-align:left;"><strong>since v0.3.2</strong> Alternatively to color</td></tr></tbody></table> <h3 id="sleep-mode"><a href="#sleep-mode" class="header-anchor">#</a> Sleep Mode</h3> <hr> <p><code>sleepMode</code> could be send as a key of a screen payload. When <code>sleepMode</code> is active, the device dimms down the matrix to <code>brightness: 0</code>.
Additionally while <code>sleepMode</code> is active the <code>/api/screen</code>-endpoint and <code><MasterTopic>/setScreen</code>-topic are not fully evaluated. Only when <code>sleepMode</code> previously or within the same message-body is set to <code>false</code> , the requested screen will be displayed.</p> <div class="custom-block warning"><p class="custom-block-title">Disclaimer</p> <p>Enabeling <code>sleepMode</code> does not enable power saving features on the MCU itself, like e.g. deep sleep functionality of an ESP8266.</p></div> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"sleepMode"</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>sleepMode</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;">When acitve <code>sleepMode</code> disables the rendering of new screens</td></tr></tbody></table> <h3 id="brightness"><a href="#brightness" class="header-anchor">#</a> Brightness</h3> <hr> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"brightness"</span><span class="token operator">:</span> <span class="token number">125</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>brightness</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>0 - 255</code></td> <td style="text-align:left;">Sets the brightness</td></tr></tbody></table> <h3 id="switch-animation"><a href="#switch-animation" class="header-anchor">#</a> Switch Animation</h3> <hr> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"switchAnimation"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"aktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"animation"</span><span class="token operator">:</span> <span class="token string">"fade"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="call-bitmapwipe-example"><a href="#call-bitmapwipe-example" class="header-anchor">#</a> Call bitmapWipe example</h4> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"switchAnimation"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"aktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"animation"</span><span class="token operator">:</span> <span class="token string">"fade"</span><span class="token punctuation">,</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>aktiv</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;"><code>animation</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>fade / coloredBarWipe / zigzagWipe / bitmapWipe / random</code></td> <td style="text-align:left;"><a href="/api.html#call-bitmapwipe-example">bitmapWipe call example</a></td></tr> <tr><td style="text-align:left;"><code>data</code></td> <td style="text-align:left;"><code>Integer Array</code></td> <td style="text-align:left;"><code>[0, 0, 0, 0, 0, 0]</code></td> <td style="text-align:left;"><strong>Required for bitmapWipe</strong></td></tr> <tr><td style="text-align:left;"><code>width</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 32</code></td> <td style="text-align:left;"><strong>Required for bitmapWipe</strong> height always needs to be 8</td></tr></tbody></table> <h3 id="clock"><a href="#clock" class="header-anchor">#</a> Clock</h3> <hr> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"clock"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"show"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"switchAktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"withSeconds"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"switchSec"</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token property">"drawWeekDays"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"color"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"r"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"g"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"b"</span><span class="token operator">:</span> <span class="token number">255</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"hexColor"</span><span class="token operator">:</span> <span class="token string">"#FFFFFF"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>show</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>switchAktiv</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;">Switch clock/date</td></tr> <tr><td style="text-align:left;"><code>switchSec</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 9999</code></td> <td style="text-align:left;"><strong>Required (when Switch clock/date is used)</strong> Switch clock/date in seconds</td></tr> <tr><td style="text-align:left;"><code>drawWeekDays</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;"><strong>since v1.1.0</strong> Draw weekdays</td></tr> <tr><td style="text-align:left;"><code>color</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"r":255, "g":255, "b":255},</code></td> <td style="text-align:left;">Color of Clock (or hexColor)</td></tr> <tr><td style="text-align:left;"><code>hexColor</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>#FFFFFF</code></td> <td style="text-align:left;"><strong>since v0.3.2</strong> Alternatively to color</td></tr></tbody></table> <h3 id="bitmap"><a href="#bitmap" class="header-anchor">#</a> Bitmap</h3> <hr> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"bitmap"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"size"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>data</code></td> <td style="text-align:left;"><code>Integer Array</code></td> <td style="text-align:left;"><code>[0, 0, 0, 0, 0, 0]</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>position</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"x":0, "y":0}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>size</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"width":8, "height":8}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr></tbody></table> <h3 id="bitmaps"><a href="#bitmaps" class="header-anchor">#</a> Bitmaps</h3> <hr> <p>How to display multiple bitmaps on one screen.</p> <div class="custom-block warning"><p class="custom-block-title">Limitations</p> <p>When displaying multiple bitmaps, animated bitmaps, scrolling or text are not supported!</p></div> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"bitmaps"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"size"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"size"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"size"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"size"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">8</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>data</code></td> <td style="text-align:left;"><code>Integer Array</code></td> <td style="text-align:left;"><code>[0, 0, 0, 0, 0, 0]</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>position</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"x":0, "y":0}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>size</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"width":8, "height":8}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr></tbody></table> <h3 id="bitmap-animation"><a href="#bitmap-animation" class="header-anchor">#</a> Bitmap Animation</h3> <hr> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"bitmapAnimation"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"animationDelay"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"rubberbanding"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"limitLoops"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>data</code></td> <td style="text-align:left;"><code>Array of Integer Arrays</code></td> <td style="text-align:left;"><code>[[0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0]]</code></td> <td style="text-align:left;"><strong>Required</strong> Only 8x8 BMPs are supported here!</td></tr> <tr><td style="text-align:left;"><code>animationDelay</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>0 - 99999</code></td> <td style="text-align:left;"><strong>Required</strong> Higher is a slower animation</td></tr> <tr><td style="text-align:left;"><code>rubberbanding</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;">Should the animation run back and forth</td></tr> <tr><td style="text-align:left;"><code>limitLoops</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>0-99</code></td> <td style="text-align:left;">Limiting the loops</td></tr> <tr><td style="text-align:left;"><code>position</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"x":0, "y":0}</code></td> <td style="text-align:left;">Postion</td></tr></tbody></table> <h3 id="bar"><a href="#bar" class="header-anchor">#</a> Bar</h3> <hr> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"bar"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"x2"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y2"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"color"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"r"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"g"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"b"</span><span class="token operator">:</span> <span class="token number">255</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"hexColor"</span><span class="token operator">:</span> <span class="token string">"#FFFFFF"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>position</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"x":0, "y":0,"x2":1, "y2":10}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>color</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"r":255, "g":255, "b":255},</code></td> <td style="text-align:left;">Color of Clock (or hexColor)</td></tr> <tr><td style="text-align:left;"><code>hexColor</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>#FFFFFF</code></td> <td style="text-align:left;"><strong>since v0.3.2</strong> Alternatively to color</td></tr></tbody></table> <h3 id="bars"><a href="#bars" class="header-anchor">#</a> Bars</h3> <hr> <p>Here you can pass an array of bars to draw several on one screen.</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"bars"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">"position"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"x"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"x2"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"y2"</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"color"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"r"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"g"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"b"</span><span class="token operator">:</span> <span class="token number">255</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"hexColor"</span><span class="token operator">:</span> <span class="token string">"#FFFFFF"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>position</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"x":0, "y":0,"x2":1, "y2":10}</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>color</code></td> <td style="text-align:left;"><code>JSON</code></td> <td style="text-align:left;"><code>{"r":255, "g":255, "b":255},</code></td> <td style="text-align:left;">Color of Clock (or hexColor)</td></tr> <tr><td style="text-align:left;"><code>hexColor</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>#FFFFFF</code></td> <td style="text-align:left;"><strong>since v0.3.2</strong> Alternatively to color</td></tr></tbody></table> <h3 id="set-gpio"><a href="#set-gpio" class="header-anchor">#</a> Set GPIO</h3> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"setGpio"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"gpio"</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
<span class="token property">"set"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"duration"</span><span class="token operator">:</span> <span class="token number">500</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>gpio</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>E.g. 14</code></td> <td style="text-align:left;"><strong>Required</strong> GPIO of the ESP</td></tr> <tr><td style="text-align:left;"><code>set</code></td> <td style="text-align:left;"><code>Boolean</code></td> <td style="text-align:left;"><code>true / false</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>duration</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 99999999</code></td> <td style="text-align:left;">Automatic fall back to false in milliseconds</td></tr></tbody></table> <h3 id="sound"><a href="#sound" class="header-anchor">#</a> Sound</h3> <hr> <h4 id="option-1"><a href="#option-1" class="header-anchor">#</a> Option 1</h4> <p>This option allows the use of multiple folders, but has the limitations, that the controls <strong>next</strong> and <strong>previous</strong> are omitted.</p> <p>The following folders structure must be provided: <code>sd:\01\001.mp3</code></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"sound"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"volume"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"control"</span><span class="token operator">:</span> <span class="token string">"play"</span><span class="token punctuation">,</span>
<span class="token property">"folder"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token property">"file"</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>volume</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>0 - 30</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>control</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>play / pause</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>folder</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 99</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>file</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 255</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr></tbody></table> <h4 id="option-2"><a href="#option-2" class="header-anchor">#</a> Option 2</h4> <p>This option also enables the controls <strong>next</strong> and <strong>previous</strong>, but the following order structure must be provided: <code>sd:\MP3\0001.mp3</code></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"sound"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"volume"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"control"</span><span class="token operator">:</span> <span class="token string">"play"</span><span class="token punctuation">,</span>
<span class="token property">"file"</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Parameter</th> <th style="text-align:left;">Type</th> <th style="text-align:left;">Values</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>volume</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>0 - 30</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>control</code></td> <td style="text-align:left;"><code>String</code></td> <td style="text-align:left;"><code>play / pause / next / previous</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr> <tr><td style="text-align:left;"><code>file</code></td> <td style="text-align:left;"><code>Integer</code></td> <td style="text-align:left;"><code>1 - 3000</code></td> <td style="text-align:left;"><strong>Required</strong></td></tr></tbody></table> <h2 id="brightness-2"><a href="#brightness-2" class="header-anchor">#</a> Brightness</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/brightness</p></div><p>This option can be used to query the current brightness. If u use MQTT, use <code><MasterTopic>/matrixinfo</code> to get the current brightness.</p> <p>The response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"brightness_255"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"brightness"</span><span class="token operator">:</span> <span class="token number">7</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="buttons"><a href="#buttons" class="header-anchor">#</a> Buttons</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/buttons</p></div><p>The HTTP response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"leftButton"</span><span class="token operator">:</span> <span class="token string">"false"</span><span class="token punctuation">,</span>
<span class="token property">"middleButton"</span><span class="token operator">:</span> <span class="token string">"true"</span><span class="token punctuation">,</span>
<span class="token property">"rightButton"</span><span class="token operator">:</span> <span class="token string">"false"</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="blue"><p class="title">MQTT Topic [SUBSCRIBE]</p><p><MasterTopic>/buttons/#<br>
<MasterTopic>/buttons/button0<br>
<MasterTopic>/buttons/button1<br>
<MasterTopic>/buttons/button2<br></p></div><p>The MQTT response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token string">"true/false"</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="lux-sensor"><a href="#lux-sensor" class="header-anchor">#</a> Lux Sensor</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/luxsensor</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/getLuxsensor</p></div><div class="blue"><p class="title">MQTT Topic [SUBSCRIBE]</p><p><MasterTopic>/luxsensor</p></div><p>The response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"lux"</span><span class="token operator">:</span> <span class="token number">107.0217</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="sensor"><a href="#sensor" class="header-anchor">#</a> Sensor</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/sensor</p></div><div class="blue"><p class="title">MQTT Topic [SUBSCRIBE]</p><p><MasterTopic>/sensor</p></div><p>The response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"humidity"</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
<span class="token property">"temperature"</span><span class="token operator">:</span> <span class="token number">21.5</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="state"><a href="#state" class="header-anchor">#</a> State</h2> <p>Its possible to get a disconnection (and connection) message via the MQTT LWT (Last Will and Testament) Feature.</p> <div class="blue"><p class="title">MQTT Topic [SUBSCRIBE]</p><p><MasterTopic>/state</p></div><div class="language- extra-class"><pre class="language-text"><code>disconnected (or connected)
</code></pre></div><h2 id="matrix-infomation"><a href="#matrix-infomation" class="header-anchor">#</a> Matrix Infomation</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/matrixinfo</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/getMatrixinfo</p></div><div class="blue"><p class="title">MQTT Topic [SUBSCRIBE]</p><p><MasterTopic>/matrixinfo</p></div><p>The response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"pixelitVersion"</span><span class="token operator">:</span> <span class="token string">"0.3.4"</span><span class="token punctuation">,</span>
<span class="token property">"note"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
<span class="token property">"hostname"</span><span class="token operator">:</span> <span class="token string">"PixelIt"</span><span class="token punctuation">,</span>
<span class="token property">"freeSketchSpace"</span><span class="token operator">:</span> <span class="token number">2695168</span><span class="token punctuation">,</span>
<span class="token property">"wifiRSSI"</span><span class="token operator">:</span> <span class="token number">-58</span><span class="token punctuation">,</span>
<span class="token property">"wifiQuality"</span><span class="token operator">:</span> <span class="token number">84</span><span class="token punctuation">,</span>
<span class="token property">"wifiSSID"</span><span class="token operator">:</span> <span class="token string">"WiFi"</span><span class="token punctuation">,</span>
<span class="token property">"ipAddress"</span><span class="token operator">:</span> <span class="token string">"192.168.0.137"</span><span class="token punctuation">,</span>
<span class="token property">"currentMatrixBrightness"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"freeHeap"</span><span class="token operator">:</span> <span class="token number">29976</span><span class="token punctuation">,</span>
<span class="token property">"sketchSize"</span><span class="token operator">:</span> <span class="token number">447424</span><span class="token punctuation">,</span>
<span class="token property">"chipID"</span><span class="token operator">:</span> <span class="token number">13668362</span><span class="token punctuation">,</span>
<span class="token property">"cpuFreqMHz"</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
<span class="token property">"sleepMode"</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="matrix-config"><a href="#matrix-config" class="header-anchor">#</a> Matrix Config</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/config</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/getConfig</p></div><div class="blue"><p class="title">MQTT Topic [SUBSCRIBE]</p><p><MasterTopic>/config</p></div><p>The response has the following structure:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"matrixBrightnessAutomatic"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"mbaDimMin"</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token property">"mbaDimMax"</span><span class="token operator">:</span> <span class="token number">255</span><span class="token punctuation">,</span>
<span class="token property">"mbaLuxMin"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token property">"mbaLuxMax"</span><span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
<span class="token property">"matrixBrightness"</span><span class="token operator">:</span> <span class="token number">127</span><span class="token punctuation">,</span>
<span class="token property">"matrixType"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token property">"note"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
<span class="token property">"hostname"</span><span class="token operator">:</span> <span class="token string">"PixelIt"</span><span class="token punctuation">,</span>
<span class="token property">"matrixTempCorrection"</span><span class="token operator">:</span> <span class="token string">"default"</span><span class="token punctuation">,</span>
<span class="token property">"ntpServer"</span><span class="token operator">:</span> <span class="token string">"de.pool.ntp.org"</span><span class="token punctuation">,</span>
<span class="token property">"clockTimeZone"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token property">"clockColor"</span><span class="token operator">:</span> <span class="token string">"#FFFFFF"</span><span class="token punctuation">,</span>
<span class="token property">"clockSwitchAktiv"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"clockSwitchSec"</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>
<span class="token property">"clockWithSeconds"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"scrollTextDefaultDelay"</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token property">"bootScreenAktiv"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"mqttAktiv"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"mqttUser"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
<span class="token property">"mqttPassword"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
<span class="token property">"mqttServer"</span><span class="token operator">:</span> <span class="token string">"0.0.0.0"</span><span class="token punctuation">,</span>
<span class="token property">"mqttMasterTopic"</span><span class="token operator">:</span> <span class="token string">"pixelit/"</span><span class="token punctuation">,</span>
<span class="token property">"mqttPort"</span><span class="token operator">:</span> <span class="token number">1883</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="blue"><p class="title">HTTP Endpoint [POST]</p><p>/api/config</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/setConfig</p></div><p>To set the configuration, the upper structure must be followed.</p> <h2 id="wifi-reset"><a href="#wifi-reset" class="header-anchor">#</a> WiFi Reset</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/wifireset</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/wifiReset</p></div><p>Erases the WiFi configuration and restarts the device. Device will be in AP mode after restart.</p> <h2 id="factory-reset"><a href="#factory-reset" class="header-anchor">#</a> Factory Reset</h2> <div class="blue"><p class="title">HTTP Endpoint [GET]</p><p>/api/factoryreset</p></div><div class="blue"><p class="title">MQTT Topic [PUBLISH]</p><p><MasterTopic>/factoryReset</p></div><p>Erases the WiFi configuration and all other settings and restarts the device. Device will be in AP mode after restart.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/pixelit-project/Docs/edit/master/src/api.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/webinterface.html" class="prev">
Webinterface
</a></span> <span class="next"><a href="/tools.html">
Tools
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.a4248bcf.js" defer></script><script src="/assets/js/2.d22c4d6b.js" defer></script><script src="/assets/js/1.8d2a0d25.js" defer></script><script src="/assets/js/22.e741e0f9.js" defer></script>
</body>
</html>