aboutsummaryrefslogtreecommitdiff
path: root/public/simple-iot-application.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/simple-iot-application.html')
-rw-r--r--public/simple-iot-application.html340
1 files changed, 340 insertions, 0 deletions
diff --git a/public/simple-iot-application.html b/public/simple-iot-application.html
new file mode 100644
index 0000000..d5fcbe8
--- /dev/null
+++ b/public/simple-iot-application.html
@@ -0,0 +1,340 @@
1<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="ie=edge"><meta name=theme-color content=#ffffff><meta name=google-site-verification content=EwUGW1WlCkRIQuyQ9AE1-bLitWthw-eVMZFTAMZVZaA><title>Simple IOT application supported by real-time monitoring and data</title><meta name=author content="Mitja Felicijan"><meta name=description content="Develop simple IOT application with Arduino MKR1000 and Python"><meta name=og:url content=https://mitjafelicijan.com/simple-iot-application><meta name=og:type content=website><meta name=og:title content="Simple IOT application supported by real-time monitoring and data"><meta name=og:description content="Develop simple IOT application with Arduino MKR1000 and Python"><meta name=og:image content="https://mitjafelicijan.com/assets/avatar.gif?ver=1550436635"><meta name=twitter:card content=summary><meta name=twitter:site content=@mitjafelicijan><meta name=twitter:title content="Simple IOT application supported by real-time monitoring and data"><meta name=twitter:description content="Develop simple IOT application with Arduino MKR1000 and Python"><meta name=twitter:image content="https://mitjafelicijan.com/assets/avatar.gif?ver=1550436635"><style>@charset "utf-8";@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900 rel="stylesheet">');@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700,900 rel="stylesheet">');*{box-sizing:border-box;-moz-osx-font-smoothing:grayscale!important;text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important}body{font-family:Heebo,sans-serif;font-size:18px;line-height:170%}a{color:inherit;text-decoration:underline;text-decoration-color:#f0f;text-decoration-style:wavy;border:2px dotted transparent;display:inline-block}a:active{border-color:#000}ol a{text-decoration:none}ol a:hover{text-decoration:underline}h1{line-height:140%;font-weight:900;font-size:250%}h2,h3,h4,h5{margin-top:50px}img{max-width:100%;margin:0 auto;display:block}.wrapper{max-width:750px;margin:0 auto}blockquote{margin:50px 0 50px 50px}.pubdate{font-size:80%;color:#666}code,pre{font-family:'Source Code Pro',monospace!important;font-weight:500}pre{font-size:80%;margin:20px;background:#eee}p>code{background:#302e2e;padding:1px .95rem 2px;border-radius:1em;font-size:70%;font-weight:600;color:#fff;display:inline;-webkit-box-decoration-break:clone;cursor:crosshair}p>code:hover{background:#f0f}ol{list-style:none;counter-reset:li}ol li{counter-increment:li}ol li::before{content:counter(li) ".";color:#ccc;font-weight:500;display:inline-block;width:1em;margin-left:-1.5em;margin-right:.9em;text-align:right}ol li a{text-decoration:none}table{width:100%;border-collapse:collapse;border-spacing:0;font-size:90%;text-align:left;margin-top:50px;margin-bottom:50px}td,th{border-bottom:2px solid #888;padding:10px}th{font-size:130%}tr:last-child td{border-width:0}.footnotes p{padding:0;display:inline-block;margin:0}.footnotes-sep{border:0}::selection{background:#ff0;color:#000}::-moz-selection{background:#ff0;color:#000}pre::-webkit-scrollbar{width:5px;height:8px;background-color:transparent}pre::-webkit-scrollbar-thumb{background:#ddd}menu{display:grid;grid-template-columns:1fr 1fr;font-size:80%;padding:0;padding-top:10px}menu a.logo{background:#000;color:#fff;font-weight:800;text-decoration:none;padding:3px 15px}menu a.logo:hover{background:#f0f;color:#fff}menu nav{text-align:right;margin-top:3px}menu nav a{padding-top:8px;margin-left:25px}menu nav a svg{width:20px;height:20px}footer{padding-top:50px;padding-bottom:50px;font-weight:500;font-size:80%}footer>*{text-decoration:none;margin-right:20px;color:#333}@media only screen and (max-width:800px){body{font-size:16px}.wrapper{padding:10px 20px!important}h1{font-size:200%}}.article-list a{text-decoration:none}.article-list a h2{margin-bottom:5px}code[class*=language-],pre[class*=language-]{color:#000;font-family:monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}</style></head><body><main class=wrapper><menu><div><a href=/ class=logo>mitja felicijan</a></div><nav><a href=//github.com/mitjafelicijan><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px viewBox="0 0 92 92"style="enable-background:new 0 0 92 92;"xml:space=preserve><g><path style=fill:#030104; d="M61.896,52.548c-3.59,0-6.502,4.026-6.502,8.996c0,4.971,2.912,8.999,6.502,8.999
2 c3.588,0,6.498-4.028,6.498-8.999C68.395,56.574,65.484,52.548,61.896,52.548z M84.527,29.132c0.74-1.826,0.777-12.201-3.17-22.132
3 c0,0-9.057,0.993-22.76,10.396c-2.872-0.793-7.736-1.19-12.597-1.19s-9.723,0.396-12.598,1.189C19.699,7.993,10.645,7,10.645,7
4 c-3.948,9.931-3.913,20.306-3.172,22.132C2.834,34.169,0,40.218,0,48.483c0,35.932,29.809,36.508,37.334,36.508
5 c1.703,0,5.088,0.004,8.666,0.009c3.578-0.005,6.965-0.009,8.666-0.009C62.191,84.991,92,84.415,92,48.483
6 C92,40.218,89.166,34.169,84.527,29.132z M46.141,80.574H45.86c-18.859,0-33.545-2.252-33.545-20.58
7 c0-4.389,1.549-8.465,5.229-11.847c6.141-5.636,16.527-2.651,28.316-2.651c0.045,0,0.093-0.001,0.141-0.003
8 c0.049,0.002,0.096,0.003,0.141,0.003c11.789,0,22.178-2.984,28.316,2.651c3.68,3.382,5.229,7.458,5.229,11.847
9 C79.686,78.322,65,80.574,46.141,80.574z M30.104,52.548c-3.588,0-6.498,4.026-6.498,8.996c0,4.971,2.91,8.999,6.498,8.999
10 c3.592,0,6.502-4.028,6.502-8.999C36.605,56.574,33.695,52.548,30.104,52.548z"/></g></svg> </a><a href=//twitter.com/mitjafelicijan><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px viewBox="0 0 612 612"style="enable-background:new 0 0 612 612;"xml:space=preserve><g><path style=fill:#010002; d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411
11 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513
12 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101
13 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104
14 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194
15 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485
16 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/></g></svg></a></nav></menu><article><header><h1>Simple IOT application supported by real-time monitoring and data</h1><p class=pubdate>Published on <time pubdate=2017-08-11>August 11, 2017</time> by Mitja Felicijan</p></header><p><strong>Table of contents</strong></p><ol><li><a href=#initial-thoughts>Initial thoughts</a></li><li><a href=#simple-python-api>Simple Python API</a><ol><li><a href=#basic-web-application>Basic web application</a></li><li><a href=#web-application-security>Web application security</a></li><li><a href=#simple-api-for-writing-data-points>Simple API for writing data-points</a></li></ol></li><li><a href=#sending-data-to-api-with-arduino-mkr1000>Sending data to API with Arduino MKR1000</a></li><li><a href=#data-visualization>Data visualization</a></li><li><a href=#conclusion>Conclusion</a></li></ol><h2 id=initial-thoughts>Initial thoughts</h2><p>I have been developing these kind of application for the better part of my last 5 years and people keep asking me how to approach developing such application and I will give a try explaining it here.</p><p>IOT applications are really no different than any other kind of applications. We have data that needs to be collected and visualized in some form of tables or charts. The main difference here is that most of the times these data is collected by some kind of device foreign to developer that mainly operates in web domain. But fear not, it’s not that different than writing some JavaScript.</p><p>There are many devices able to transmit data via wireless or wired network by default but for the sake of example we will be using commonly known Arduino with wireless module already on the board → <a href=https://store.arduino.cc/arduino-mkr1000>Arduino MKR1000</a>.</p><p>In order to make this little project as accessible to others as possible I will try to make it as inexpensive as possible. And by this I mean that I will avoid using hosted virtual servers and will be using my own laptop as a server. But you must buy Arduino MKR1000 to follow steps below. But if you would want to deploy this software I would suggest using <a href=https://www.digitalocean.com>DigitalOcean</a> → smallest VPS is only per month making this one of the most affordable option out there. Please notice that this software will not run on stock web hosting that only supports LAMP (Linux, Apache, MySQL, and PHP).</p><p><em>But before we begin please take notice that this is strictly experimental code and not well optimized and there are much better ways in handling some aspects of the application but that requires much deeper knowledge of technology that is not needed for an example like this.</em></p><p><strong>Development steps</strong></p><ol><li>Simple Python API that will receive and store incoming data.</li><li>Prototype C++ code that will read “sensor data” and transmit it to API.</li><li>Data visualization with charts → extends Python web application.</li></ol><p>Step 1. and 3. will share the same web application. One route will be dedicated to API and another to serving HTML with chart.</p><p>Schema below represents what we will try to achieve and how different parts correlates to each other.</p><p><img src=/files/simple-iot-application-overview.svg alt=Overview></p><h2 id=simple-python-api>Simple Python API</h2><p>I have always been a fan of simplicity so we will be using <a href=https://bottlepy.org/docs/dev/ >Bottle: Python Web Framework</a>. It is a single file web framework that seriously simplifies working with routes, templating and has built-in web server that satisfies our need in this case.</p><p>First we need to install bottle package. This can be done by downloading <code>bottle.py</code> and placing it in the root of your application or by using pip software <code>pip install bottle --user</code>.</p><p>If you are using Linux or MacOS then Python is already installed. If you will try to test this on Windows please install <a href=https://www.python.org/downloads/windows/ >Python for Windows</a>. There may be some problems with path when you will try to launch <code>python webapp.py</code> so please take care of this before you continue.</p><h3 id=basic-web-application>Basic web application</h3><p>Most basic bottle application is quite simple. Paste code below in <code>webapp.py</code> file and save.</p><pre class=language-python><code class=language-python><span class="token comment"># -*- coding: utf-8 -*-</span>
17
18<span class="token keyword">import</span> bottle
19
20<span class="token comment"># initializing bottle app</span>
21app <span class="token operator">=</span> bottle<span class="token punctuation">.</span>Bottle<span class="token punctuation">(</span><span class="token punctuation">)</span>
22
23<span class="token comment"># triggered when / is accessed from browser</span>
24<span class="token comment"># only accepts GET → no POST allowed</span>
25@app<span class="token punctuation">.</span>route<span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">,</span> method<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"GET"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
26<span class="token keyword">def</span> <span class="token function">route_default</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
27 <span class="token keyword">return</span> <span class="token string">"howdy from python"</span>
28
29<span class="token comment"># starting server on http://0.0.0.0:5000</span>
30<span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">"__main__"</span><span class="token punctuation">:</span>
31 bottle<span class="token punctuation">.</span>run<span class="token punctuation">(</span>
32 app <span class="token operator">=</span> app<span class="token punctuation">,</span>
33 host <span class="token operator">=</span> <span class="token string">"0.0.0.0"</span><span class="token punctuation">,</span>
34 port <span class="token operator">=</span> <span class="token number">5000</span><span class="token punctuation">,</span>
35 debug <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
36 reloader <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
37 catchall <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
38 <span class="token punctuation">)</span>
39</code></pre><p>To run this simple application you should open command prompt or terminal on your machine and go to the folder containing your file and type <code>python webapp.py</code>. If everything goes ok then open your web browser and point it to <code>http://0.0.0.0:5000</code>.</p><p>If you would like change the port of your application (like port 80) and not use root to run your app this will present a problem. The TCP/IP port numbers below 1024 are privileged ports → this is a security feature. So in order of simplicity and security use a port number above 1024 like I have used port 5000.</p><p>If this fails at any time please fix it before you continue, because nothing below will work otherwise.</p><blockquote><p>We use 0.0.0.0 as default host so that this app is available over your local network. If you find your local ip <code>ifconfig</code> and try accessing this site with your phone (if on same network/router as your machine) this should work as well (example of such ip <code>http://192.168.1.15:5000</code>). This is a must have because Arduino will be accessing this application to send it’s data.</p></blockquote><h3 id=web-application-security>Web application security</h3><p>There is a lot to be said about security and is a topic of many books. Of course all this can not be written here but to just establish some basic security → you should always use SSL with your application. Some fantastic free certificates are available by <a href=https://letsencrypt.org>Let’s Encrypt - Free SSL/TLS Certificates</a>. With SSL certificate installed you should then make use of HTTP headers and send your “API key” via a header. If your key is send via header then this key is encrypted by SSL and send encrypted over the network. Never send your api keys by GET parameter like <code>http://example.com/?api_key=somekeyvalue</code>. The problem that this kind of sending presents is that this key is visible in logs and by network sniffers.</p><p>There is a fantastic article describing some aspects about security: <a href=https://www.keycdn.com/blog/web-application-security-best-practices/ >11 Web Application Security Best Practices</a>. Please check it out.</p><h3 id=simple-api-for-writing-data-points>Simple API for writing data-points</h3><p>We will now be using boilerplate code from example above and extend it to be able to write data received by API to local storage. For example use I will use SQLite3 because it plays well with Python and can store quite large amount of data. I have been using it to collect gigabytes of data in a single database without any corruption or problems → your experience may vary.</p><p>To avoid learning SQLite I will be using <a href=https://dataset.readthedocs.io/en/latest/index.html>Dataset: databases for lazy people</a>. This package abstracts SQL and simplifies writing and reading data from database. You should install this package with pip software <code>pip install dataset --user</code>.</p><p>Because API will use POST method I will be testing if code works correctly by using <a href=https://chrome.google.com/webstore/detail/restlet-client-rest-api-t/aejoelaoggembcahagimdiliamlcdmfm>Restlet Client for Google Chrome</a>. This software also allows you to set headers → for basic security with API_KEY.</p><p>To quickly generate passwords or API keys I usually use this nifty website <a href=https://randomkeygen.com/ >RandomKeygen</a>.</p><p>Copy and paste code below over your previous code in file <code>webapp.py</code>.</p><pre class=language-python><code class=language-python><span class="token comment"># -*- coding: utf-8 -*-</span>
40
41<span class="token keyword">import</span> time
42<span class="token keyword">import</span> bottle
43<span class="token keyword">import</span> random
44<span class="token keyword">import</span> dataset
45
46<span class="token comment"># initializing bottle app</span>
47app <span class="token operator">=</span> bottle<span class="token punctuation">.</span>Bottle<span class="token punctuation">(</span><span class="token punctuation">)</span>
48
49<span class="token comment"># connects to sqlite database</span>
50<span class="token comment"># check_same_thread=False allows using it in multi-threaded mode</span>
51app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"dsn"</span><span class="token punctuation">]</span> <span class="token operator">=</span> dataset<span class="token punctuation">.</span>connect<span class="token punctuation">(</span><span class="token string">"sqlite:///data.db?check_same_thread=False"</span><span class="token punctuation">)</span>
52
53<span class="token comment"># api key that will be used in Arduino code</span>
54app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"api_key"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"JtF2aUE5SGHfVJBCG5SH"</span>
55
56<span class="token comment"># triggered when /api is accessed from browser</span>
57<span class="token comment"># only accepts POST → no GET allowed</span>
58@app<span class="token punctuation">.</span>route<span class="token punctuation">(</span><span class="token string">"/api"</span><span class="token punctuation">,</span> method<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"POST"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
59<span class="token keyword">def</span> <span class="token function">route_default</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
60 status <span class="token operator">=</span> <span class="token number">400</span>
61 ts <span class="token operator">=</span> <span class="token builtin">int</span><span class="token punctuation">(</span>time<span class="token punctuation">.</span>time<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment"># current timestamp</span>
62 value <span class="token operator">=</span> bottle<span class="token punctuation">.</span>request<span class="token punctuation">.</span>body<span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># data from device</span>
63 api_key <span class="token operator">=</span> bottle<span class="token punctuation">.</span>request<span class="token punctuation">.</span>get_header<span class="token punctuation">(</span><span class="token string">"Api_Key"</span><span class="token punctuation">)</span> <span class="token comment"># api key from header</span>
64
65 <span class="token comment"># outputs to console received data for debug reason</span>
66 <span class="token keyword">print</span> <span class="token string">">>> {} :: {}"</span><span class="token punctuation">.</span><span class="token builtin">format</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> api_key<span class="token punctuation">)</span>
67
68 <span class="token comment"># if api_key is correct and value is present</span>
69 <span class="token comment"># then writes attribute to point table</span>
70 <span class="token keyword">if</span> api_key <span class="token operator">==</span> app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"api_key"</span><span class="token punctuation">]</span> <span class="token operator">and</span> value<span class="token punctuation">:</span>
71 app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"dsn"</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"point"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>insert<span class="token punctuation">(</span><span class="token builtin">dict</span><span class="token punctuation">(</span>ts<span class="token operator">=</span>ts<span class="token punctuation">,</span> value<span class="token operator">=</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
72 status <span class="token operator">=</span> <span class="token number">200</span>
73
74 <span class="token comment"># we only need to return status</span>
75 <span class="token keyword">return</span> bottle<span class="token punctuation">.</span>HTTPResponse<span class="token punctuation">(</span>status<span class="token operator">=</span>status<span class="token punctuation">,</span> body<span class="token operator">=</span><span class="token string">""</span><span class="token punctuation">)</span>
76
77<span class="token comment"># starting server on http://0.0.0.0:5000</span>
78<span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">"__main__"</span><span class="token punctuation">:</span>
79 bottle<span class="token punctuation">.</span>run<span class="token punctuation">(</span>
80 app <span class="token operator">=</span> app<span class="token punctuation">,</span>
81 host <span class="token operator">=</span> <span class="token string">"0.0.0.0"</span><span class="token punctuation">,</span>
82 port <span class="token operator">=</span> <span class="token number">5000</span><span class="token punctuation">,</span>
83 debug <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
84 reloader <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
85 catchall <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
86 <span class="token punctuation">)</span>
87</code></pre><p>To run this simply go to folder containing python file and run <code>python webapp.py</code> from terminal. If everything goes ok you should have simple API available via POST method on /api route.</p><p>After testing the service with Restlet Client you should be able to view your data in a database file <code>data.db</code>.</p><p><img src=/files/iot-rest-example.png alt="REST settings example"></p><p>You can also check the contents of new database file by using desktop client for SQLite → <a href=http://sqlitebrowser.org/ >DB Browser for SQLite</a>.</p><p><img src=/files/iot-sqlite-db.png alt="SQLite database example"></p><p>Table structure is as simple as it can be. We have ts (timestamp) and value (value from Arduino). As you can see timestamp is generated on API side. If you would happen to have atomic clock on Arduino it would be then better to generate and send timestamp with the value. This would be particularity useful if we would be collecting sensor data at a higher frequency and then sending this data in bulk to API.</p><blockquote><p>If you will deploy this app with uWSGI and multi-threaded, use DSN (Data Source Name) url with <code>?check_same_thread=False</code>.</p></blockquote><p>Ok, now that we have some sort of a working API with some basic security so unwanted people can not post data to your database can we proceed further and try to program Arduino to send data to API.</p><h2 id=sending-data-to-api-with-arduino-mkr1000>Sending data to API with Arduino MKR1000</h2><p>First of all you should have MKR1000 module and microUSB cable to proceed. If you have ever done any work with Arduino you should know that you also need <a href=https://www.arduino.cc/en/Main/Software>Arduino IDE</a>. On provided link you should be able to download and install IDE. Once that task is completed and you have successfully run blink example you should proceed to the next step.</p><p>In order to use wireless capabilities of MKR1000 you need to first install <a href=https://www.arduino.cc/en/Reference/WiFi101>WiFi101 library</a> in Arduino IDE. Please check before you install, you may already have it installed.</p><p>Code below is a working example that sends data to API. Before you try to test your code make sure you have run Python web application. Then change settings for wifi, api endpoint and api_key. If by some reason code bellow doesn’t work for you please leave a comment and I’ll try to help.</p><p>Once you have opened IDE and copied this code try to compile and upload it. Then open “Serial monitor” to see if any output is presented by Arduino.</p><pre class=language-c><code class=language-c><span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;WiFi101.h></span></span>
88
89<span class="token comment">// wifi settings</span>
90<span class="token keyword">char</span> ssid<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"ssid-name"</span><span class="token punctuation">;</span>
91<span class="token keyword">char</span> pass<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"ssid-password"</span><span class="token punctuation">;</span>
92
93<span class="token comment">// api server enpoint</span>
94<span class="token keyword">char</span> server<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"192.168.6.22"</span><span class="token punctuation">;</span>
95<span class="token keyword">int</span> port <span class="token operator">=</span> <span class="token number">5000</span><span class="token punctuation">;</span>
96
97<span class="token comment">// api key that must be the same as the one in Python code</span>
98String api_key <span class="token operator">=</span> <span class="token string">"JtF2aUE5SGHfVJBCG5SH"</span><span class="token punctuation">;</span>
99
100<span class="token comment">// frequency data is sent in ms - every 5 seconds</span>
101<span class="token keyword">int</span> timeout <span class="token operator">=</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">;</span>
102
103<span class="token keyword">int</span> status <span class="token operator">=</span> WL_IDLE_STATUS<span class="token punctuation">;</span>
104
105<span class="token keyword">void</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
106
107 <span class="token comment">// initialize serial and wait for port to open:</span>
108 Serial<span class="token punctuation">.</span><span class="token function">begin</span><span class="token punctuation">(</span><span class="token number">9600</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
109 <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
110
111 <span class="token comment">// check for the presence of the shield</span>
112 <span class="token keyword">if</span> <span class="token punctuation">(</span>WiFi<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> WL_NO_SHIELD<span class="token punctuation">)</span> <span class="token punctuation">{</span>
113 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"WiFi shield not present"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
114 <span class="token keyword">while</span> <span class="token punctuation">(</span>true<span class="token punctuation">)</span><span class="token punctuation">;</span>
115 <span class="token punctuation">}</span>
116
117 <span class="token comment">// attempt to connect to wifi network</span>
118 <span class="token keyword">while</span> <span class="token punctuation">(</span>status <span class="token operator">!=</span> WL_CONNECTED<span class="token punctuation">)</span> <span class="token punctuation">{</span>
119 Serial<span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span><span class="token string">"Attempting to connect to SSID: "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
120 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span>ssid<span class="token punctuation">)</span><span class="token punctuation">;</span>
121 status <span class="token operator">=</span> WiFi<span class="token punctuation">.</span><span class="token function">begin</span><span class="token punctuation">(</span>ssid<span class="token punctuation">,</span> pass<span class="token punctuation">)</span><span class="token punctuation">;</span>
122 <span class="token comment">// wait 10 seconds for connection</span>
123 <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
124 <span class="token punctuation">}</span>
125
126 <span class="token comment">// output wifi status to serial monitor</span>
127 Serial<span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span><span class="token string">"SSID: "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
128 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span>WiFi<span class="token punctuation">.</span><span class="token function">SSID</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
129
130 IPAddress ip <span class="token operator">=</span> WiFi<span class="token punctuation">.</span><span class="token function">localIP</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
131 Serial<span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span><span class="token string">"IP Address: "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
132 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span>ip<span class="token punctuation">)</span><span class="token punctuation">;</span>
133
134 <span class="token keyword">long</span> rssi <span class="token operator">=</span> WiFi<span class="token punctuation">.</span><span class="token function">RSSI</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
135 Serial<span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span><span class="token string">"signal strength (RSSI):"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
136 Serial<span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span>rssi<span class="token punctuation">)</span><span class="token punctuation">;</span>
137 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">" dBm"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
138<span class="token punctuation">}</span>
139
140<span class="token keyword">void</span> <span class="token function">loop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
141
142 WiFiClient client<span class="token punctuation">;</span>
143
144 <span class="token keyword">if</span> <span class="token punctuation">(</span>client<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span>server<span class="token punctuation">,</span> port<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
145
146 <span class="token comment">// I use random number generator for this example</span>
147 <span class="token comment">// but you can use analog or digital inputs from arduino</span>
148 String content <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
149
150 client<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"POST /api HTTP/1.1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
151 client<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"Connection: close"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
152 client<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"Api-Key: "</span> <span class="token operator">+</span> api_key<span class="token punctuation">)</span><span class="token punctuation">;</span>
153 client<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"Content-Length: "</span> <span class="token operator">+</span> <span class="token function">String</span><span class="token punctuation">(</span>content<span class="token punctuation">.</span><span class="token function">length</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
154 client<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
155 client<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>
156
157 <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
158 client<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
159 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"Data sent successfully ..."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
160
161 <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
162 Serial<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"Problem sending data ..."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
163 <span class="token punctuation">}</span>
164
165 <span class="token comment">// waits for x seconds and continue looping</span>
166 <span class="token function">delay</span><span class="token punctuation">(</span>timeout<span class="token punctuation">)</span><span class="token punctuation">;</span>
167
168<span class="token punctuation">}</span>
169</code></pre><p>As seen from example you can notice that Arduino is generating random integer between [ 0 … 1000 ]. You can easily replace this with a temperature sensor or any other kind of sensor.</p><p>Now that we have API under the hood and Arduino is sending demo data we can now focus on data visualization.</p><h2 id=data-visualization>Data visualization</h2><p>Before we continue we should examine our project folder structure. Currently we only have two files in our project:</p><p><em>simple-iot-app/</em></p><ul><li><em>webapp.py</em></li><li><em>data.db</em></li></ul><p>We will now add HTML template that will contain CSS and JavaScript code inline for the simplicity reason. And for the bottle framework to be able to scan root application folder for templates we will add <code>bottle.TEMPLATE_PATH.insert(0, &quot;./&quot;)</code> in <code>webapp.py</code>. By default bottle framework uses <code>views/</code> subfolder to store templates. This is not the ideal situation and if you will use bottle to develop web applications you should use native behavior and store templates in it’s predefined folder. But for the sake of example we will over-ride this. Be careful to fully replace your code with new code that is provided below. Avoid partially replacing code in file :) Also new code for reading data-points is provided in Python example below.</p><p>First we add new route to our web application. It should be trigger when browser hits root of application <code>http://0.0.0.0:5000/</code>. This route will do nothing more than render <code>frontend.html</code> template. This is done by <code>return bottle.template(&quot;frontend.html&quot;)</code>. Check code below to further examine how exactly this is done.</p><p>Now we will expand <code>/api</code> route and use different methods to write or read data-points. For writing data-point we will use POST method and for reading points we will use GET method. GET method will return JSON object with latest readings and historical data.</p><p>There is a fantastic JavaScript library for plotting time-series charts called <a href=https://www.metricsgraphicsjs.org>MetricsGraphics.js</a> that is based on <a href=https://d3js.org/ >D3.js</a> library for visualizing data.</p><p>Data schema required by MetricsGraphics.js → to achieve this we need to transform data from database into this format:</p><pre class=language-json><code class=language-json><span class="token punctuation">[</span>
170 <span class="token punctuation">{</span>
171 <span class="token property">"date"</span><span class="token operator">:</span> <span class="token string">"2017-08-11 01:07:20"</span><span class="token punctuation">,</span>
172 <span class="token property">"value"</span><span class="token operator">:</span> <span class="token number">933</span>
173 <span class="token punctuation">}</span><span class="token punctuation">,</span>
174 <span class="token punctuation">{</span>
175 <span class="token property">"date"</span><span class="token operator">:</span> <span class="token string">"2017-08-11 01:07:30"</span><span class="token punctuation">,</span>
176 <span class="token property">"value"</span><span class="token operator">:</span> <span class="token number">743</span>
177 <span class="token punctuation">}</span>
178<span class="token punctuation">]</span>
179</code></pre><p>Web application is now complete and we only need <code>frontend.html</code> that we will develop now. If you would try to start web app now and go to root app this will return error because we don’t have frontend.html yet.</p><pre class=language-python><code class=language-python><span class="token comment"># -*- coding: utf-8 -*-</span>
180
181<span class="token keyword">import</span> time
182<span class="token keyword">import</span> bottle
183<span class="token keyword">import</span> json
184<span class="token keyword">import</span> datetime
185<span class="token keyword">import</span> random
186<span class="token keyword">import</span> dataset
187
188<span class="token comment"># initializing bottle app</span>
189app <span class="token operator">=</span> bottle<span class="token punctuation">.</span>Bottle<span class="token punctuation">(</span><span class="token punctuation">)</span>
190
191<span class="token comment"># adds root directory as template folder</span>
192bottle<span class="token punctuation">.</span>TEMPLATE_PATH<span class="token punctuation">.</span>insert<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">"./"</span><span class="token punctuation">)</span>
193
194<span class="token comment"># connects to sqlite database</span>
195<span class="token comment"># check_same_thread=False allows using it in multi-threaded mode</span>
196app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"db"</span><span class="token punctuation">]</span> <span class="token operator">=</span> dataset<span class="token punctuation">.</span>connect<span class="token punctuation">(</span><span class="token string">"sqlite:///data.db?check_same_thread=False"</span><span class="token punctuation">)</span>
197
198<span class="token comment"># api key that will be used in Arduino code</span>
199app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"api_key"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"JtF2aUE5SGHfVJBCG5SH"</span>
200
201<span class="token comment"># triggered when / is accessed from browser</span>
202<span class="token comment"># only accepts GET → no POST allowed</span>
203@app<span class="token punctuation">.</span>route<span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">,</span> method<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"GET"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
204<span class="token keyword">def</span> <span class="token function">route_default</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
205 <span class="token keyword">return</span> bottle<span class="token punctuation">.</span>template<span class="token punctuation">(</span><span class="token string">"frontend.html"</span><span class="token punctuation">)</span>
206
207<span class="token comment"># triggered when /api is accessed from browser</span>
208<span class="token comment"># accepts POST and GET</span>
209@app<span class="token punctuation">.</span>route<span class="token punctuation">(</span><span class="token string">"/api"</span><span class="token punctuation">,</span> method<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"GET"</span><span class="token punctuation">,</span> <span class="token string">"POST"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
210<span class="token keyword">def</span> <span class="token function">route_default</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
211
212 <span class="token comment"># if method is POST then we write datapoint</span>
213 <span class="token keyword">if</span> bottle<span class="token punctuation">.</span>request<span class="token punctuation">.</span>method <span class="token operator">==</span> <span class="token string">"POST"</span><span class="token punctuation">:</span>
214 status <span class="token operator">=</span> <span class="token number">400</span>
215 ts <span class="token operator">=</span> <span class="token builtin">int</span><span class="token punctuation">(</span>time<span class="token punctuation">.</span>time<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment"># current timestamp</span>
216 value <span class="token operator">=</span> bottle<span class="token punctuation">.</span>request<span class="token punctuation">.</span>body<span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># data from device</span>
217 api_key <span class="token operator">=</span> bottle<span class="token punctuation">.</span>request<span class="token punctuation">.</span>get_header<span class="token punctuation">(</span><span class="token string">"Api-Key"</span><span class="token punctuation">)</span> <span class="token comment"># api key from header</span>
218
219 <span class="token comment"># outputs to console recieved data for debug reason</span>
220 <span class="token keyword">print</span> <span class="token string">">>> {} :: {}"</span><span class="token punctuation">.</span><span class="token builtin">format</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> api_key<span class="token punctuation">)</span>
221
222 <span class="token comment"># if api_key is correct and value is present</span>
223 <span class="token comment"># then writes attribute to point table</span>
224 <span class="token keyword">if</span> api_key <span class="token operator">==</span> app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"api_key"</span><span class="token punctuation">]</span> <span class="token operator">and</span> value<span class="token punctuation">:</span>
225 app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"db"</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"point"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>insert<span class="token punctuation">(</span><span class="token builtin">dict</span><span class="token punctuation">(</span>ts<span class="token operator">=</span>ts<span class="token punctuation">,</span> value<span class="token operator">=</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
226 status <span class="token operator">=</span> <span class="token number">200</span>
227
228 <span class="token comment"># we only need to return status</span>
229 <span class="token keyword">return</span> bottle<span class="token punctuation">.</span>HTTPResponse<span class="token punctuation">(</span>status<span class="token operator">=</span>status<span class="token punctuation">,</span> body<span class="token operator">=</span><span class="token string">""</span><span class="token punctuation">)</span>
230
231 <span class="token comment"># if method is GET then we read datapoint</span>
232 <span class="token keyword">else</span><span class="token punctuation">:</span>
233 response <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
234 datapoints <span class="token operator">=</span> app<span class="token punctuation">.</span>config<span class="token punctuation">[</span><span class="token string">"db"</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"point"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token builtin">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
235
236 <span class="token keyword">for</span> point <span class="token keyword">in</span> datapoints<span class="token punctuation">:</span>
237 response<span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">{</span>
238 <span class="token string">"date"</span><span class="token punctuation">:</span> datetime<span class="token punctuation">.</span>datetime<span class="token punctuation">.</span>fromtimestamp<span class="token punctuation">(</span><span class="token builtin">int</span><span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token string">"ts"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>strftime<span class="token punctuation">(</span><span class="token string">"%Y-%m-%d %H:%M:%S"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
239 <span class="token string">"value"</span><span class="token punctuation">:</span> point<span class="token punctuation">[</span><span class="token string">"value"</span><span class="token punctuation">]</span>
240 <span class="token punctuation">}</span><span class="token punctuation">)</span>
241
242 bottle<span class="token punctuation">.</span>response<span class="token punctuation">.</span>content_type <span class="token operator">=</span> <span class="token string">"application/json"</span>
243 <span class="token keyword">return</span> json<span class="token punctuation">.</span>dumps<span class="token punctuation">(</span>response<span class="token punctuation">)</span>
244
245<span class="token comment"># starting server on http://0.0.0.0:5000</span>
246<span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">"__main__"</span><span class="token punctuation">:</span>
247 bottle<span class="token punctuation">.</span>run<span class="token punctuation">(</span>
248 app <span class="token operator">=</span> app<span class="token punctuation">,</span>
249 host <span class="token operator">=</span> <span class="token string">"0.0.0.0"</span><span class="token punctuation">,</span>
250 port <span class="token operator">=</span> <span class="token number">5000</span><span class="token punctuation">,</span>
251 debug <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
252 reloader <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
253 catchall <span class="token operator">=</span> <span class="token boolean">True</span><span class="token punctuation">,</span>
254 <span class="token punctuation">)</span>
255</code></pre><p>And now finally we can implement <code>frontend.html</code>. Create file with this name and copy code below. When you are done you can start web application. Steps for this part are listed below the code.</p><pre class=language-html><code class=language-html><span class="token doctype">&lt;!DOCTYPE html></span>
256<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
257
258 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
259 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
260 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Simple IOT application<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
261 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
262
263 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
264
265 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Simple IOT application<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
266
267 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chart-placeholder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
268 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
269 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
270
271 <span class="token comment">&lt;!-- application main script --></span>
272 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
273 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
274 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.11.0/metricsgraphics.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
275 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
276 <span class="token keyword">function</span> <span class="token function">fetch_and_render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
277 d3<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token string">"/api"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
278 data <span class="token operator">=</span> <span class="token constant">MG</span><span class="token punctuation">.</span>convert<span class="token punctuation">.</span><span class="token function">date</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token string">"date"</span><span class="token punctuation">,</span> <span class="token string">"%Y-%m-%d %H:%M:%S"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
279 <span class="token constant">MG</span><span class="token punctuation">.</span><span class="token function">data_graphic</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
280 data<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
281 chart_type<span class="token punctuation">:</span> <span class="token string">"line"</span><span class="token punctuation">,</span>
282 full_width<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
283 height<span class="token punctuation">:</span> <span class="token number">270</span><span class="token punctuation">,</span>
284 target<span class="token punctuation">:</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"chart"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
285 x_accessor<span class="token punctuation">:</span> <span class="token string">"date"</span><span class="token punctuation">,</span>
286 y_accessor<span class="token punctuation">:</span> <span class="token string">"value"</span>
287 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
288 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
289 <span class="token punctuation">}</span>
290 window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
291 <span class="token comment">// initial call for rendering</span>
292 <span class="token function">fetch_and_render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
293
294 <span class="token comment">// updates chart every 5 seconds</span>
295 <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
296 <span class="token function">fetch_and_render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
297 <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
298 <span class="token punctuation">}</span>
299 </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
300
301 <span class="token comment">&lt;!-- application styles --></span>
302 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
303 <span class="token selector">body</span> <span class="token punctuation">{</span>
304 <span class="token property">font</span><span class="token punctuation">:</span> 13px sans-serif<span class="token punctuation">;</span>
305 <span class="token property">padding</span><span class="token punctuation">:</span> 20px 50px<span class="token punctuation">;</span>
306 <span class="token punctuation">}</span>
307 <span class="token selector">.chart-placeholder</span> <span class="token punctuation">{</span>
308 <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #ccc<span class="token punctuation">;</span>
309 <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
310 <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
311 <span class="token punctuation">}</span>
312 <span class="token comment">/* chart styles */</span>
313 <span class="token selector">.mg-line1-color</span> <span class="token punctuation">{</span>
314 <span class="token property">stroke</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
315 <span class="token property">stroke-width</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
316 <span class="token punctuation">}</span>
317 <span class="token selector">.mg-main-area, .mg-main-line</span> <span class="token punctuation">{</span>
318 <span class="token property">fill</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
319 <span class="token punctuation">}</span>
320 <span class="token selector">.mg-x-axis line, .mg-y-axis line</span> <span class="token punctuation">{</span>
321 <span class="token property">stroke</span><span class="token punctuation">:</span> #b3b2b2<span class="token punctuation">;</span>
322 <span class="token property">stroke-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
323 <span class="token punctuation">}</span>
324 </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
325
326 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
327
328<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
329</code></pre><p>Now the folder structure should look like:</p><p><em>simple-iot-app/</em></p><ul><li><em>webapp.py</em></li><li><em>data.db</em></li><li><em>frontend.html</em></li></ul><p>Ok, lets now start application and start feeding it data.</p><ol><li><code>python webapp.py</code></li><li>connect Arduino MKR1000 to power source</li><li>open browser and go to <code>http://0.0.0.0:5000</code></li></ol><p>If everything goes well you should be seeing new data-points rendered on chart every 5 seconds.</p><p>If you navigate to <code>http://0.0.0.0:5000</code> you should see rendered chart as shown on picture below.</p><p><img src=/files/iot-app-output.png alt="Application output"></p><p>Complete application with all the code is available for <a href=/files/simple-iot-application.zip>download</a>.</p><h2 id=conclusion>Conclusion</h2><p>I hope this clarifies some aspects of IOT application development. Of course this is a minimal example and is far from what can be done in real life with some further dive into other technologies.</p><p>If you would like to continue exploring IOT world here are some interesting resources for you to examine:</p><ul><li><a href=https://www.allaboutcircuits.com/projects/reading-sensors-with-an-arduino/ >Reading Sensors with an Arduino</a></li><li><a href=http://www.hivemq.com/blog/how-to-get-started-with-mqtt>MQTT 101 – How to Get Started with the lightweight IoT Protocol</a></li><li><a href=https://www.html5rocks.com/en/tutorials/eventsource/basics/ >Stream Updates with Server-Sent Events</a></li><li><a href=http://www.tutorialspoint.com/internet_of_things/ >Internet of Things (IoT) Tutorials</a></li></ul><p>Any comment or additional ideas are welcomed in comments below.)</p></article><script>var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,a=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,a.util.encode(e.content),e.alias):"Array"===a.util.type(e)?e.map(a.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e,t){var r=a.util.type(e);switch(t=t||{},r){case"Object":if(t[a.util.objId(e)])return t[a.util.objId(e)];var s={};for(var i in t[a.util.objId(e)]=s,e)e.hasOwnProperty(i)&&(s[i]=a.util.clone(e[i],t));return s;case"Array":if(t[a.util.objId(e)])return t[a.util.objId(e)];s=[];return t[a.util.objId(e)]=s,e.forEach(function(e,r){s[r]=a.util.clone(e,t)}),s}return e}},languages:{extend:function(e,t){var r=a.util.clone(a.languages[e]);for(var s in t)r[s]=t[s];return r},insertBefore:function(e,t,r,s){var i=(s=s||a.languages)[e],n={};for(var o in i)if(i.hasOwnProperty(o)){if(o==t)for(var l in r)r.hasOwnProperty(l)&&(n[l]=r[l]);r.hasOwnProperty(o)||(n[o]=i[o])}var c=s[e];return s[e]=n,a.languages.DFS(a.languages,function(t,a){a===c&&t!=e&&(this[t]=n)}),n},DFS:function(e,t,r,s){for(var i in s=s||{},e)e.hasOwnProperty(i)&&(t.call(e,i,e[i],r||i),"Object"!==a.util.type(e[i])||s[a.util.objId(e[i])]?"Array"!==a.util.type(e[i])||s[a.util.objId(e[i])]||(s[a.util.objId(e[i])]=!0,a.languages.DFS(e[i],t,i,s)):(s[a.util.objId(e[i])]=!0,a.languages.DFS(e[i],t,null,s)))}},plugins:{},highlightAll:function(e,t){a.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,r){var s={callback:r,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",s);for(var i,n=s.elements||e.querySelectorAll(s.selector),o=0;i=n[o++];)a.highlightElement(i,!0===t,s.callback)},highlightElement:function(t,r,s){for(var i,n,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(i=(o.className.match(e)||[,""])[1].toLowerCase(),n=a.languages[i]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+i,t.parentNode&&(o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+i));var l={element:t,language:i,grammar:n,code:t.textContent},c=function(e){l.highlightedCode=e,a.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,a.hooks.run("after-highlight",l),a.hooks.run("complete",l),s&&s.call(l.element)};if(a.hooks.run("before-sanity-check",l),l.code)if(a.hooks.run("before-highlight",l),l.grammar)if(r&&_self.Worker){var u=new Worker(a.filename);u.onmessage=function(e){c(e.data)},u.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else c(a.highlight(l.code,l.grammar,l.language));else c(a.util.encode(l.code));else a.hooks.run("complete",l)},highlight:function(e,t,s){var i={code:e,grammar:t,language:s};return a.hooks.run("before-tokenize",i),i.tokens=a.tokenize(i.code,i.grammar),a.hooks.run("after-tokenize",i),r.stringify(a.util.encode(i.tokens),i.language)},matchGrammar:function(e,t,r,s,i,n,o){var l=a.Token;for(var c in r)if(r.hasOwnProperty(c)&&r[c]){if(c==o)return;var u=r[c];u="Array"===a.util.type(u)?u:[u];for(var p=0;p<u.length;++p){var d=u[p],g=d.inside,_=!!d.lookbehind,m=!!d.greedy,f=0,h=d.alias;if(m&&!d.pattern.global){var b=d.pattern.toString().match(/[imuy]*$/)[0];d.pattern=RegExp(d.pattern.source,b+"g")}d=d.pattern||d;for(var y=s,k=i;y<t.length;k+=t[y].length,++y){var x=t[y];if(t.length>e.length)return;if(!(x instanceof l)){if(m&&y!=t.length-1){if(d.lastIndex=k,!(z=d.exec(e)))break;for(var v=z.index+(_?z[1].length:0),w=z.index+z[0].length,F=y,P=k,A=t.length;F<A&&(P<w||!t[F].type&&!t[F-1].greedy);++F)v>=(P+=t[F].length)&&(++y,k=P);if(t[y]instanceof l)continue;S=F-y,x=e.slice(k,P),z.index-=k}else{d.lastIndex=0;var z=d.exec(x),S=1}if(z){_&&(f=z[1]?z[1].length:0);w=(v=z.index+f)+(z=z[0].slice(f)).length;var $=x.slice(0,v),j=x.slice(w),E=[y,S];$&&(++y,k+=$.length,E.push($));var N=new l(c,g?a.tokenize(z,g):z,h,z,m);if(E.push(N),j&&E.push(j),Array.prototype.splice.apply(t,E),1!=S&&a.matchGrammar(e,t,r,y,k,!0,c),n)break}else if(n)break}}}}},tokenize:function(e,t){var r=[e],s=t.rest;if(s){for(var i in s)t[i]=s[i];delete t.rest}return a.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=a.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=a.hooks.all[e];if(r&&r.length)for(var s,i=0;s=r[i++];)s(t)}}},r=a.Token=function(e,t,a,r,s){this.type=e,this.content=t,this.alias=a,this.length=0|(r||"").length,this.greedy=!!s};if(r.stringify=function(e,t,s){if("string"==typeof e)return e;if("Array"===a.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,s),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:s};if(e.alias){var n="Array"===a.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,n)}a.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+"</"+i.tag+">"},!_self.document)return _self.addEventListener?(a.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,s=t.code,i=t.immediateClose;_self.postMessage(a.highlight(s,a.languages[r],r)),i&&_self.close()},!1),_self.Prism):_self.Prism;var s=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return s&&(a.filename=s.src,a.manual||s.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(a.highlightAll):window.setTimeout(a.highlightAll,16):document.addEventListener("DOMContentLoaded",a.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},/\b(?:as|async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/],number:/\b(?:(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+)n?|\d+n|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,function:/[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\(|\.(?:apply|bind|call)\()/,operator:/-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(e){e=e||document;var t={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(e.querySelectorAll("pre[data-src]")).forEach(function(e){if(!e.hasAttribute("data-src-loaded")){for(var a,r=e.getAttribute("data-src"),s=e,i=/\blang(?:uage)?-([\w-]+)\b/i;s&&!i.test(s.className);)s=s.parentNode;if(s&&(a=(e.className.match(i)||[,""])[1]),!a){var n=(r.match(/\.(\w+)$/)||[,""])[1];a=t[n]||n}var o=document.createElement("code");o.className="language-"+a,e.textContent="",o.textContent="Loading…",e.appendChild(o);var l=new XMLHttpRequest;l.open("GET",r,!0),l.onreadystatechange=function(){4==l.readyState&&(l.status<400&&l.responseText?(o.textContent=l.responseText,Prism.highlightElement(o),e.setAttribute("data-src-loaded","")):l.status>=400?o.textContent="✖ Error "+l.status+" while fetching file: "+l.statusText:o.textContent="✖ Error: File does not exist or is empty")},l.send(null)}}),Prism.plugins.toolbar&&Prism.plugins.toolbar.registerButton("download-file",function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-src")&&t.hasAttribute("data-download-link")){var a=t.getAttribute("data-src"),r=document.createElement("a");return r.textContent=t.getAttribute("data-download-link-label")||"Download",r.setAttribute("download",""),r.href=a,r}})},document.addEventListener("DOMContentLoaded",function(){self.Prism.fileHighlight()})),function(){if("undefined"!=typeof self&&self.Prism&&self.document){var e=/\n(?!$)/g,t=function(t){var r=a(t)["white-space"];if("pre-wrap"===r||"pre-line"===r){var s=t.querySelector("code"),i=t.querySelector(".line-numbers-rows"),n=t.querySelector(".line-numbers-sizer"),o=s.textContent.split(e);n||((n=document.createElement("span")).className="line-numbers-sizer",s.appendChild(n)),n.style.display="block",o.forEach(function(e,t){n.textContent=e||"\n";var a=n.getBoundingClientRect().height;i.children[t].style.height=a+"px"}),n.textContent="",n.style.display="none"}},a=function(e){return e?window.getComputedStyle?getComputedStyle(e):e.currentStyle||null:null};window.addEventListener("resize",function(){Array.prototype.forEach.call(document.querySelectorAll("pre.line-numbers"),t)}),Prism.hooks.add("complete",function(a){if(a.code){var r=a.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(r&&/pre/i.test(r.nodeName)&&(s.test(r.className)||s.test(a.element.className))&&!a.element.querySelector(".line-numbers-rows")){s.test(a.element.className)&&(a.element.className=a.element.className.replace(s," ")),s.test(r.className)||(r.className+=" line-numbers");var i,n=a.code.match(e),o=n?n.length+1:1,l=new Array(o+1);l=l.join("<span></span>"),(i=document.createElement("span")).setAttribute("aria-hidden","true"),i.className="line-numbers-rows",i.innerHTML=l,r.hasAttribute("data-start")&&(r.style.counterReset="linenumber "+(parseInt(r.getAttribute("data-start"),10)-1)),a.element.appendChild(i),t(r),Prism.hooks.run("line-numbers",a)}}}),Prism.hooks.add("line-numbers",function(e){e.plugins=e.plugins||{},e.plugins.lineNumbers=!0}),Prism.plugins.lineNumbers={getLine:function(e,t){if("PRE"===e.tagName&&e.classList.contains("line-numbers")){var a=e.querySelector(".line-numbers-rows"),r=parseInt(e.getAttribute("data-start"),10)||1,s=r+(a.children.length-1);t<r&&(t=r),t>s&&(t=s);var i=t-r;return a.children[i]}}}}}(),function(e){var t={variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\([^)]+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},/\$(?:[\w#?*!@]+|\{[^}]+\})/i]};e.languages.bash={shebang:{pattern:/^#!\s*\/bin\/bash|^#!\s*\/bin\/sh/,alias:"important"},comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},string:[{pattern:/((?:^|[^<])<<\s*)["']?(\w+?)["']?\s*\r?\n(?:[\s\S])*?\r?\n\2/,lookbehind:!0,greedy:!0,inside:t},{pattern:/(["'])(?:\\[\s\S]|\$\([^)]+\)|`[^`]+`|(?!\1)[^\\])*\1/,greedy:!0,inside:t}],variable:t.variable,function:{pattern:/(^|[\s;|&])(?:alias|apropos|apt-get|aptitude|aspell|awk|basename|bash|bc|bg|builtin|bzip2|cal|cat|cd|cfdisk|chgrp|chmod|chown|chroot|chkconfig|cksum|clear|cmp|comm|command|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|enable|env|ethtool|eval|exec|expand|expect|export|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|getopts|git|grep|groupadd|groupdel|groupmod|groups|gzip|hash|head|help|hg|history|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|jobs|join|kill|killall|less|link|ln|locate|logname|logout|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|make|man|mkdir|mkfifo|mkisofs|mknod|more|most|mount|mtools|mtr|mv|mmv|nano|netstat|nice|nl|nohup|notify-send|npm|nslookup|open|op|passwd|paste|pathchk|ping|pkill|popd|pr|printcap|printenv|printf|ps|pushd|pv|pwd|quota|quotacheck|quotactl|ram|rar|rcp|read|readarray|readonly|reboot|rename|renice|remsync|rev|rm|rmdir|rsync|screen|scp|sdiff|sed|seq|service|sftp|shift|shopt|shutdown|sleep|slocate|sort|source|split|ssh|stat|strace|su|sudo|sum|suspend|sync|tail|tar|tee|test|time|timeout|times|touch|top|traceroute|trap|tr|tsort|tty|type|ulimit|umask|umount|unalias|uname|unexpand|uniq|units|unrar|unshar|uptime|useradd|userdel|usermod|users|uuencode|uudecode|v|vdir|vi|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yes|zip)(?=$|[\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&])(?:let|:|\.|if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)(?=$|[\s;|&])/,lookbehind:!0},boolean:{pattern:/(^|[\s;|&])(?:true|false)(?=$|[\s;|&])/,lookbehind:!0},operator:/&&?|\|\|?|==?|!=?|<<<?|>>|<=?|>=?|=~/,punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];]/};var a=t.variable[1].inside;a.string=e.languages.bash.string,a.function=e.languages.bash.function,a.keyword=e.languages.bash.keyword,a.boolean=e.languages.bash.boolean,a.operator=e.languages.bash.operator,a.punctuation=e.languages.bash.punctuation,e.languages.shell=e.languages.bash}(Prism),Prism.languages.c=Prism.languages.extend("clike",{keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while)\b/,operator:/-[>-]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/]/,number:/(?:\b0x[\da-f]+|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?)[ful]*/i}),Prism.languages.insertBefore("c","string",{macro:{pattern:/(^\s*)#\s*[a-z]+(?:[^\r\n\\]|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,alias:"property",inside:{string:{pattern:/(#\s*include\s*)(?:<.+?>|("|')(?:\\?.)+?\2)/,lookbehind:!0},directive:{pattern:/(#\s*)\b(?:define|defined|elif|else|endif|error|ifdef|ifndef|if|import|include|line|pragma|undef|using)\b/,lookbehind:!0,alias:"keyword"}}},constant:/\b(?:__FILE__|__LINE__|__DATE__|__TIME__|__TIMESTAMP__|__func__|EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|stdin|stdout|stderr)\b/}),delete Prism.languages.c["class-name"],delete Prism.languages.c.boolean,Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.go=Prism.languages.extend("clike",{keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,builtin:/\b(?:bool|byte|complex(?:64|128)|error|float(?:32|64)|rune|string|u?int(?:8|16|32|64)?|uintptr|append|cap|close|complex|copy|delete|imag|len|make|new|panic|print(?:ln)?|real|recover)\b/,boolean:/\b(?:_|iota|nil|true|false)\b/,operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,number:/(?:\b0x[a-f\d]+|(?:\b\d+\.?\d*|\B\.\d+)(?:e[-+]?\d+)?)i?/i,string:{pattern:/(["'`])(\\[\s\S]|(?!\1)[^\\])*\1/,greedy:!0}}),delete Prism.languages.go["class-name"],Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}}),Prism.languages.javascript["template-string"].inside.interpolation.inside.rest=Prism.languages.javascript,Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript,Prism.languages.json={property:/"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,string:{pattern:/"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,greedy:!0},number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,punctuation:/[{}[\]);,]/,operator:/:/g,boolean:/\b(?:true|false)\b/i,null:/\bnull\b/i},Prism.languages.jsonp=Prism.languages.json,Prism.languages.nginx=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},keyword:/\b(?:CONTENT_|DOCUMENT_|GATEWAY_|HTTP_|HTTPS|if_not_empty|PATH_|QUERY_|REDIRECT_|REMOTE_|REQUEST_|SCGI|SCRIPT_|SERVER_|http|events|accept_mutex|accept_mutex_delay|access_log|add_after_body|add_before_body|add_header|addition_types|aio|alias|allow|ancient_browser|ancient_browser_value|auth|auth_basic|auth_basic_user_file|auth_http|auth_http_header|auth_http_timeout|autoindex|autoindex_exact_size|autoindex_localtime|break|charset|charset_map|charset_types|chunked_transfer_encoding|client_body_buffer_size|client_body_in_file_only|client_body_in_single_buffer|client_body_temp_path|client_body_timeout|client_header_buffer_size|client_header_timeout|client_max_body_size|connection_pool_size|create_full_put_path|daemon|dav_access|dav_methods|debug_connection|debug_points|default_type|deny|devpoll_changes|devpoll_events|directio|directio_alignment|disable_symlinks|empty_gif|env|epoll_events|error_log|error_page|expires|fastcgi_buffer_size|fastcgi_buffers|fastcgi_busy_buffers_size|fastcgi_cache|fastcgi_cache_bypass|fastcgi_cache_key|fastcgi_cache_lock|fastcgi_cache_lock_timeout|fastcgi_cache_methods|fastcgi_cache_min_uses|fastcgi_cache_path|fastcgi_cache_purge|fastcgi_cache_use_stale|fastcgi_cache_valid|fastcgi_connect_timeout|fastcgi_hide_header|fastcgi_ignore_client_abort|fastcgi_ignore_headers|fastcgi_index|fastcgi_intercept_errors|fastcgi_keep_conn|fastcgi_max_temp_file_size|fastcgi_next_upstream|fastcgi_no_cache|fastcgi_param|fastcgi_pass|fastcgi_pass_header|fastcgi_read_timeout|fastcgi_redirect_errors|fastcgi_send_timeout|fastcgi_split_path_info|fastcgi_store|fastcgi_store_access|fastcgi_temp_file_write_size|fastcgi_temp_path|flv|geo|geoip_city|geoip_country|google_perftools_profiles|gzip|gzip_buffers|gzip_comp_level|gzip_disable|gzip_http_version|gzip_min_length|gzip_proxied|gzip_static|gzip_types|gzip_vary|if|if_modified_since|ignore_invalid_headers|image_filter|image_filter_buffer|image_filter_jpeg_quality|image_filter_sharpen|image_filter_transparency|imap_capabilities|imap_client_buffer|include|index|internal|ip_hash|keepalive|keepalive_disable|keepalive_requests|keepalive_timeout|kqueue_changes|kqueue_events|large_client_header_buffers|limit_conn|limit_conn_log_level|limit_conn_zone|limit_except|limit_rate|limit_rate_after|limit_req|limit_req_log_level|limit_req_zone|limit_zone|lingering_close|lingering_time|lingering_timeout|listen|location|lock_file|log_format|log_format_combined|log_not_found|log_subrequest|map|map_hash_bucket_size|map_hash_max_size|master_process|max_ranges|memcached_buffer_size|memcached_connect_timeout|memcached_next_upstream|memcached_pass|memcached_read_timeout|memcached_send_timeout|merge_slashes|min_delete_depth|modern_browser|modern_browser_value|mp4|mp4_buffer_size|mp4_max_buffer_size|msie_padding|msie_refresh|multi_accept|open_file_cache|open_file_cache_errors|open_file_cache_min_uses|open_file_cache_valid|open_log_file_cache|optimize_server_names|override_charset|pcre_jit|perl|perl_modules|perl_require|perl_set|pid|pop3_auth|pop3_capabilities|port_in_redirect|post_action|postpone_output|protocol|proxy|proxy_buffer|proxy_buffer_size|proxy_buffering|proxy_buffers|proxy_busy_buffers_size|proxy_cache|proxy_cache_bypass|proxy_cache_key|proxy_cache_lock|proxy_cache_lock_timeout|proxy_cache_methods|proxy_cache_min_uses|proxy_cache_path|proxy_cache_use_stale|proxy_cache_valid|proxy_connect_timeout|proxy_cookie_domain|proxy_cookie_path|proxy_headers_hash_bucket_size|proxy_headers_hash_max_size|proxy_hide_header|proxy_http_version|proxy_ignore_client_abort|proxy_ignore_headers|proxy_intercept_errors|proxy_max_temp_file_size|proxy_method|proxy_next_upstream|proxy_no_cache|proxy_pass|proxy_pass_error_message|proxy_pass_header|proxy_pass_request_body|proxy_pass_request_headers|proxy_read_timeout|proxy_redirect|proxy_redirect_errors|proxy_send_lowat|proxy_send_timeout|proxy_set_body|proxy_set_header|proxy_ssl_session_reuse|proxy_store|proxy_store_access|proxy_temp_file_write_size|proxy_temp_path|proxy_timeout|proxy_upstream_fail_timeout|proxy_upstream_max_fails|random_index|read_ahead|real_ip_header|recursive_error_pages|request_pool_size|reset_timedout_connection|resolver|resolver_timeout|return|rewrite|root|rtsig_overflow_events|rtsig_overflow_test|rtsig_overflow_threshold|rtsig_signo|satisfy|satisfy_any|secure_link_secret|send_lowat|send_timeout|sendfile|sendfile_max_chunk|server|server_name|server_name_in_redirect|server_names_hash_bucket_size|server_names_hash_max_size|server_tokens|set|set_real_ip_from|smtp_auth|smtp_capabilities|so_keepalive|source_charset|split_clients|ssi|ssi_silent_errors|ssi_types|ssi_value_length|ssl|ssl_certificate|ssl_certificate_key|ssl_ciphers|ssl_client_certificate|ssl_crl|ssl_dhparam|ssl_engine|ssl_prefer_server_ciphers|ssl_protocols|ssl_session_cache|ssl_session_timeout|ssl_verify_client|ssl_verify_depth|starttls|stub_status|sub_filter|sub_filter_once|sub_filter_types|tcp_nodelay|tcp_nopush|timeout|timer_resolution|try_files|types|types_hash_bucket_size|types_hash_max_size|underscores_in_headers|uninitialized_variable_warn|upstream|use|user|userid|userid_domain|userid_expires|userid_name|userid_p3p|userid_path|userid_service|valid_referers|variables_hash_bucket_size|variables_hash_max_size|worker_connections|worker_cpu_affinity|worker_priority|worker_processes|worker_rlimit_core|worker_rlimit_nofile|worker_rlimit_sigpending|working_directory|xclient|xml_entities|xslt_entities|xslt_stylesheet|xslt_types)\b/i}),Prism.languages.insertBefore("nginx","keyword",{variable:/\$[a-z_]+/i}),Prism.languages.pascal={comment:[/\(\*[\s\S]+?\*\)/,/\{[\s\S]+?\}/,/\/\/.*/],string:{pattern:/(?:'(?:''|[^'\r\n])*'|#[&$%]?[a-f\d]+)+|\^[a-z]/i,greedy:!0},keyword:[{pattern:/(^|[^&])\b(?:absolute|array|asm|begin|case|const|constructor|destructor|do|downto|else|end|file|for|function|goto|if|implementation|inherited|inline|interface|label|nil|object|of|operator|packed|procedure|program|record|reintroduce|repeat|self|set|string|then|to|type|unit|until|uses|var|while|with)\b/i,lookbehind:!0},{pattern:/(^|[^&])\b(?:dispose|exit|false|new|true)\b/i,lookbehind:!0},{pattern:/(^|[^&])\b(?:class|dispinterface|except|exports|finalization|finally|initialization|inline|library|on|out|packed|property|raise|resourcestring|threadvar|try)\b/i,lookbehind:!0},{pattern:/(^|[^&])\b(?:absolute|abstract|alias|assembler|bitpacked|break|cdecl|continue|cppdecl|cvar|default|deprecated|dynamic|enumerator|experimental|export|external|far|far16|forward|generic|helper|implements|index|interrupt|iochecks|local|message|name|near|nodefault|noreturn|nostackframe|oldfpccall|otherwise|overload|override|pascal|platform|private|protected|public|published|read|register|reintroduce|result|safecall|saveregisters|softfloat|specialize|static|stdcall|stored|strict|unaligned|unimplemented|varargs|virtual|write)\b/i,lookbehind:!0}],number:[/(?:[&%]\d+|\$[a-f\d]+)/i,/\b\d+(?:\.\d+)?(?:e[+-]?\d+)?/i],operator:[/\.\.|\*\*|:=|<[<=>]?|>[>=]?|[+\-*\/]=?|[@^=]/i,{pattern:/(^|[^&])\b(?:and|as|div|exclude|in|include|is|mod|not|or|shl|shr|xor)\b/,lookbehind:!0}],punctuation:/\(\.|\.\)|[()\[\]:;,.]/},Prism.languages.objectpascal=Prism.languages.pascal,Prism.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},"triple-quoted-string":{pattern:/("""|''')[\s\S]+?\1/,greedy:!0,alias:"string"},string:{pattern:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},keyword:/\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|nonlocal|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:True|False|None)\b/,number:/(?:\b(?=\d)|\B(?=\.))(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,punctuation:/[{}[\];(),.:]/},document.querySelectorAll("table").forEach(function(e){if(!e.classList.contains("rouge-table")){let t=e.parentNode,a=document.createElement("div");a.classList.add("responsive-table"),t.replaceChild(a,e),a.appendChild(e)}});let links=document.links;for(let e=0,t=links.length;e<t;e++)links[e].hostname!=window.location.hostname&&(links[e].target="_blank",links[e].setAttribute("rel","noopener nofollow"));</script><link rel=stylesheet href="test.css?ver=1550436635"><footer><span>© 2012-2019</span> <a href=/curriculum-vitae>Curriculum Vitae</a> <a href=//github.com/mitjafelicijan target=_blank rel="noopener nofollow">Github</a> <a href=//twitter.com/mitjafelicijan target=_blank rel="noopener nofollow">Twitter</a></footer><script type=text/x-mathjax-config>MathJax.Hub.Config({
330 TeX: {
331 equationNumbers: {
332 autoNumber: "AMS"
333 }
334 },
335 tex2jax: {
336 inlineMath: [ ['$','$'], ['\\(', '\\)'] ],
337 displayMath: [ ['$$','$$'] ],
338 processEscapes: true,
339 }
340 });</script><script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"async></script></main></body></html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 05:21:27 +0000