{"id":819,"date":"2022-12-17T06:14:51","date_gmt":"2022-12-17T06:14:51","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&#038;p=819"},"modified":"2022-12-17T17:12:37","modified_gmt":"2022-12-17T17:12:37","slug":"graafilised-naidikud","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/graafilised-naidikud\/","title":{"raw":"Graafilised n\u00e4idikud","rendered":"Graafilised n\u00e4idikud"},"content":{"raw":"<div class=\"textbox textbox--learning-objectives\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Peat\u00fckk annab \u00fclevaate<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>kuidas visualiseerida andmeid kasutades Javascripti.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h1>Javascripti kasutamine projektis<\/h1>\r\nJ\u00e4tkame oma veebilehe n\u00e4gusamaks muutmisega, selleks on palju v\u00f5imalusi, siinkohal kasutame selleks javacripti.\r\n\r\nTeeme uue projektikausta ja paneme sellele nimeks SensorsWeb ning lisame sinna sisse kohe kaustad \u2019static\u2019 ja \u2019templates\u2019\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">N\u00e4ide: SensorsWeb kausta teeme uue faili ja paneme talle nimeks \u2019appDHTWeb.py\u2019:<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nimport adafruit_dht\r\n\r\nimport board\r\n\r\nimport datetime\r\n\r\nfrom flask import Flask, render_template\r\n\r\napp = Flask(__name__)\r\n\r\ndhtDevice = adafruit_dht.DHT11(board.D4)\r\n\r\ndef getDHTdata():\r\n\r\nnow = datetime.datetime.now()\r\n\r\ntimeString = now.strftime(\"%Y-%m-%d %H:%M:%S\")\r\n\r\ntemperature = dhtDevice.temperature\r\n\r\nhumidity = dhtDevice.humidity\r\n\r\nif humidity is not None and temperature is not None:\r\n\r\nhum = humidity\r\n\r\ntemp = temperature\r\n\r\nreturn timeString, temp, hum\r\n\r\n@app.route(\"\/\")\r\n\r\ndef index():\r\n\r\ntime, temp, hum = getDHTdata()\r\n\r\ntemplateData = {\r\n\r\n'time' : time,\r\n\r\n'temp' : temp,\r\n\r\n'hum' : hum\r\n\r\n}\r\n\r\nreturn render_template('index.html', **templateData)\r\n\r\nif __name__ == \"__main__\":\r\n\r\napp.run(host='0.0.0.0', port=8080, debug=False)\r\n\r\n<\/div>\r\n<\/div>\r\nVarasemast koodist erineb see peamiselt sellev\u00f5rra, et andmete saamine andurilt on t\u00f5stetud eraldi funktsiooni \u2019getDHTdata()\u2019.\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">N\u00e4ide: kausta templates lisame uue faili index.html:<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\n&lt;!DOCTYPE html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;title&gt;Raspberry Pi ja andurid&lt;\/title&gt;\r\n\r\n&lt;link rel=\"stylesheet\" href='..\/static\/style.css'\/&gt;\r\n\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/&gt;\r\n\r\n&lt;style&gt;\r\n\r\nbody {\r\n\r\ntext-align: center;\r\n\r\n}\r\n\r\n#g1,\r\n\r\n#g2 {\r\n\r\nwidth: 200px;\r\n\r\nheight: 160px;\r\n\r\ndisplay: inline-block;\r\n\r\nmargin: 1em;\r\n\r\n}\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;Raspberry Pi andurite andmed&lt;\/h1&gt;\r\n\r\n&lt;div id=\"g1\"&gt;&lt;\/div&gt;\r\n\r\n&lt;div id=\"g2\"&gt;&lt;\/div&gt;\r\n\r\n&lt;hr&gt;\r\n\r\n&lt;h3&gt; Viimane lugemiaeg: {{ time }} ==&gt; &lt;a href=\"\/\"class=\"button\"&gt;V\u00e4rskenda&lt;\/a&gt;&lt;\/h3&gt;\r\n\r\n&lt;script src=\"..\/static\/raphael-2.1.4.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script src=\"..\/static\/justgage.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script&gt;\r\n\r\nvar g1, g2;\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {\r\n\r\ng1 = new JustGage({\r\n\r\nid: \"g1\",\r\n\r\nvalue: {{temp}},\r\n\r\nvalueFontColor: \"yellow\",\r\n\r\nmin: -10,\r\n\r\nmax: 50,\r\n\r\ntitle: \"Temperatuur\",\r\n\r\nlabel: \"Celcius\"\r\n\r\n});\r\n\r\ng2 = new JustGage({\r\n\r\nid: \"g2\",\r\n\r\nvalue: {{hum}},\r\n\r\nvalueFontColor: \"yellow\",\r\n\r\nmin: 0,\r\n\r\nmax: 100,\r\n\r\ntitle: \"Niiskustase\",\r\n\r\nlabel: \"%\"\r\n\r\n});\r\n\r\n});\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/div>\r\n<\/div>\r\nFaili teises pooles n\u00e4eme javascripti ja viiteid javaskripti moodulitele. Vajalikud javascripti moodulid saame alla laadida <a href=\"https:\/\/toorshia.github.io\/justgage\/\">GitHubist.<\/a> Allalaetavas faili on palju faile, sh. ka n\u00e4idiseid, kuid meid huvitavad kaks faili: \u2019justgage.js\u2019 ja \u2019raphael-2.1.4.min.js\u2019. Paigutame need oma kausta \u2019static\u2019.\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">N\u00e4ide: kausta \u2019static\u2019 lisame ka stiilifaili \u2019style.css\u2019:<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nbody{\r\n\r\nbackground: blue;\r\n\r\ncolor: yellow;\r\n\r\npadding:1%\r\n\r\n}\r\n\r\n.button {\r\n\r\nfont: bold 15px Arial;\r\n\r\ntext-decoration: none;\r\n\r\nbackground-color: #EEEEEE;\r\n\r\ncolor: #333333;\r\n\r\npadding: 2px 6px 2px 6px;\r\n\r\nborder-top: 1px solid #CCCCCC;\r\n\r\nborder-right: 1px solid #333333;\r\n\r\nborder-bottom: 1px solid #333333;\r\n\r\nborder-left: 1px solid #CCCCCC;\r\n\r\n}\r\n\r\nimg{\r\n\r\ndisplay: display: inline-block\r\n\r\n}\r\n\r\n<\/div>\r\n<\/div>\r\nK\u00e4ivitame koodi k\u00e4suga:\r\n\r\n<strong>python appDHTWeb.py<\/strong>\r\n\r\nKui k\u00f5ik toimib, siis v\u00f5iks avaneda oma ip-aadressi sisestamisel umbes selline pilt:\r\n\r\n<img class=\"alignnone wp-image-820 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13.png\" alt=\"\" width=\"545\" height=\"305\" \/>\r\n<h1>M\u00f5tlemise ja nuputus\u00fclesanne<\/h1>\r\nLeidke vastus mida teeb rida border-top: 1px solid #CCCCCC;?\r\nKasuta all olevat lisamaterjali vastamiseks.\r\n<h1>Lisalugemiseks<\/h1>\r\nKuidas saate veel oma lehe v\u00e4limust muuta saate lugeda:\r\n<ul>\r\n \t<li><a href=\"https:\/\/courses.cs.ut.ee\/MTAT.03.132\/2013_spring\/uploads\/Main\/CSS%20praktikumi%20juhend\">CSS juhend (T\u00dc)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/CSS21\/selector.html\">W3 CSS juhend<\/a><\/li>\r\n<\/ul>","rendered":"<div class=\"textbox textbox--learning-objectives\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Peat\u00fckk annab \u00fclevaate<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>kuidas visualiseerida andmeid kasutades Javascripti.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h1>Javascripti kasutamine projektis<\/h1>\n<p>J\u00e4tkame oma veebilehe n\u00e4gusamaks muutmisega, selleks on palju v\u00f5imalusi, siinkohal kasutame selleks javacripti.<\/p>\n<p>Teeme uue projektikausta ja paneme sellele nimeks SensorsWeb ning lisame sinna sisse kohe kaustad \u2019static\u2019 ja \u2019templates\u2019<\/p>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">N\u00e4ide: SensorsWeb kausta teeme uue faili ja paneme talle nimeks \u2019appDHTWeb.py\u2019:<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>import adafruit_dht<\/p>\n<p>import board<\/p>\n<p>import datetime<\/p>\n<p>from flask import Flask, render_template<\/p>\n<p>app = Flask(__name__)<\/p>\n<p>dhtDevice = adafruit_dht.DHT11(board.D4)<\/p>\n<p>def getDHTdata():<\/p>\n<p>now = datetime.datetime.now()<\/p>\n<p>timeString = now.strftime(&#8220;%Y-%m-%d %H:%M:%S&#8221;)<\/p>\n<p>temperature = dhtDevice.temperature<\/p>\n<p>humidity = dhtDevice.humidity<\/p>\n<p>if humidity is not None and temperature is not None:<\/p>\n<p>hum = humidity<\/p>\n<p>temp = temperature<\/p>\n<p>return timeString, temp, hum<\/p>\n<p>@app.route(&#8220;\/&#8221;)<\/p>\n<p>def index():<\/p>\n<p>time, temp, hum = getDHTdata()<\/p>\n<p>templateData = {<\/p>\n<p>&#8216;time&#8217; : time,<\/p>\n<p>&#8216;temp&#8217; : temp,<\/p>\n<p>&#8216;hum&#8217; : hum<\/p>\n<p>}<\/p>\n<p>return render_template(&#8217;index.html&#8217;, **templateData)<\/p>\n<p>if __name__ == &#8220;__main__&#8221;:<\/p>\n<p>app.run(host=&#8217;0.0.0.0&#8242;, port=8080, debug=False)<\/p>\n<\/div>\n<\/div>\n<p>Varasemast koodist erineb see peamiselt sellev\u00f5rra, et andmete saamine andurilt on t\u00f5stetud eraldi funktsiooni \u2019getDHTdata()\u2019.<\/p>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">N\u00e4ide: kausta templates lisame uue faili index.html:<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>&lt;!DOCTYPE html&gt;<\/p>\n<p>&lt;head&gt;<\/p>\n<p>&lt;title&gt;Raspberry Pi ja andurid&lt;\/title&gt;<\/p>\n<p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8217;..\/static\/style.css&#8217;\/&gt;<\/p>\n<p>&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=UTF-8&#8243; \/&gt;<\/p>\n<p>&lt;style&gt;<\/p>\n<p>body {<\/p>\n<p>text-align: center;<\/p>\n<p>}<\/p>\n<p>#g1,<\/p>\n<p>#g2 {<\/p>\n<p>width: 200px;<\/p>\n<p>height: 160px;<\/p>\n<p>display: inline-block;<\/p>\n<p>margin: 1em;<\/p>\n<p>}<\/p>\n<p>&lt;\/style&gt;<\/p>\n<p>&lt;\/head&gt;<\/p>\n<p>&lt;body&gt;<\/p>\n<p>&lt;h1&gt;Raspberry Pi andurite andmed&lt;\/h1&gt;<\/p>\n<p>&lt;div id=&#8221;g1&#8243;&gt;&lt;\/div&gt;<\/p>\n<p>&lt;div id=&#8221;g2&#8243;&gt;&lt;\/div&gt;<\/p>\n<p>&lt;hr&gt;<\/p>\n<p>&lt;h3&gt; Viimane lugemiaeg: {{ time }} ==&gt; &lt;a href=&#8221;\/&#8221;class=&#8221;button&#8221;&gt;V\u00e4rskenda&lt;\/a&gt;&lt;\/h3&gt;<\/p>\n<p>&lt;script src=&#8221;..\/static\/raphael-2.1.4.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script src=&#8221;..\/static\/justgage.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script&gt;<\/p>\n<p>var g1, g2;<\/p>\n<p>document.addEventListener(&#8220;DOMContentLoaded&#8221;, function(event) {<\/p>\n<p>g1 = new JustGage({<\/p>\n<p>id: &#8220;g1&#8221;,<\/p>\n<p>value: {{temp}},<\/p>\n<p>valueFontColor: &#8220;yellow&#8221;,<\/p>\n<p>min: -10,<\/p>\n<p>max: 50,<\/p>\n<p>title: &#8220;Temperatuur&#8221;,<\/p>\n<p>label: &#8220;Celcius&#8221;<\/p>\n<p>});<\/p>\n<p>g2 = new JustGage({<\/p>\n<p>id: &#8220;g2&#8221;,<\/p>\n<p>value: {{hum}},<\/p>\n<p>valueFontColor: &#8220;yellow&#8221;,<\/p>\n<p>min: 0,<\/p>\n<p>max: 100,<\/p>\n<p>title: &#8220;Niiskustase&#8221;,<\/p>\n<p>label: &#8220;%&#8221;<\/p>\n<p>});<\/p>\n<p>});<\/p>\n<p>&lt;\/script&gt;<\/p>\n<p>&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<\/div>\n<\/div>\n<p>Faili teises pooles n\u00e4eme javascripti ja viiteid javaskripti moodulitele. Vajalikud javascripti moodulid saame alla laadida <a href=\"https:\/\/toorshia.github.io\/justgage\/\">GitHubist.<\/a> Allalaetavas faili on palju faile, sh. ka n\u00e4idiseid, kuid meid huvitavad kaks faili: \u2019justgage.js\u2019 ja \u2019raphael-2.1.4.min.js\u2019. Paigutame need oma kausta \u2019static\u2019.<\/p>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">N\u00e4ide: kausta \u2019static\u2019 lisame ka stiilifaili \u2019style.css\u2019:<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>body{<\/p>\n<p>background: blue;<\/p>\n<p>color: yellow;<\/p>\n<p>padding:1%<\/p>\n<p>}<\/p>\n<p>.button {<\/p>\n<p>font: bold 15px Arial;<\/p>\n<p>text-decoration: none;<\/p>\n<p>background-color: #EEEEEE;<\/p>\n<p>color: #333333;<\/p>\n<p>padding: 2px 6px 2px 6px;<\/p>\n<p>border-top: 1px solid #CCCCCC;<\/p>\n<p>border-right: 1px solid #333333;<\/p>\n<p>border-bottom: 1px solid #333333;<\/p>\n<p>border-left: 1px solid #CCCCCC;<\/p>\n<p>}<\/p>\n<p>img{<\/p>\n<p>display: display: inline-block<\/p>\n<p>}<\/p>\n<\/div>\n<\/div>\n<p>K\u00e4ivitame koodi k\u00e4suga:<\/p>\n<p><strong>python appDHTWeb.py<\/strong><\/p>\n<p>Kui k\u00f5ik toimib, siis v\u00f5iks avaneda oma ip-aadressi sisestamisel umbes selline pilt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-820 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13.png\" alt=\"\" width=\"545\" height=\"305\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13.png 545w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13-300x168.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13-65x36.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13-225x126.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2022\/12\/13-350x196.png 350w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/p>\n<h1>M\u00f5tlemise ja nuputus\u00fclesanne<\/h1>\n<p>Leidke vastus mida teeb rida border-top: 1px solid #CCCCCC;?<br \/>\nKasuta all olevat lisamaterjali vastamiseks.<\/p>\n<h1>Lisalugemiseks<\/h1>\n<p>Kuidas saate veel oma lehe v\u00e4limust muuta saate lugeda:<\/p>\n<ul>\n<li><a href=\"https:\/\/courses.cs.ut.ee\/MTAT.03.132\/2013_spring\/uploads\/Main\/CSS%20praktikumi%20juhend\">CSS juhend (T\u00dc)<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/CSS21\/selector.html\">W3 CSS juhend<\/a><\/li>\n<\/ul>\n","protected":false},"author":6,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-819","chapter","type-chapter","status-publish","hentry"],"part":782,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":5,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/819\/revisions"}],"predecessor-version":[{"id":857,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/819\/revisions\/857"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/782"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/819\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=819"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=819"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=819"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}