{"id":1240,"date":"2016-04-17T11:33:10","date_gmt":"2016-04-17T10:33:10","guid":{"rendered":"http:\/\/iot.fkainka.de\/?p=1240"},"modified":"2016-04-17T11:39:39","modified_gmt":"2016-04-17T10:39:39","slug":"ausgelagerte-webseiten-fuer-den-nanoesp","status":"publish","type":"post","link":"https:\/\/iot.fkainka.de\/en\/ausgelagerte-webseiten-fuer-den-nanoesp","title":{"rendered":"Ausgelagerte Webseiten f\u00fcr den NanoESP"},"content":{"rendered":"

<\/p>\n

Gerade im Kontext des Adventskalenders oder den anderen Lernpaketen habe ich einige HTML-Seiten f\u00fcr den NanoESP entworfen. Allerdings hat mich dabei immer gest\u00f6rt, dass zum einen der Speicherplatz ziemlich gering ist\u00a0zum anderen\u00a0die \u00dcbertragung etwas langsam sein kann, vor allem, wenn die Seite oft neu geladen\u00a0werden muss. Deswegen habe ich mir eine neue Methode \u00fcberlegt, bei der die dazustellenden Webseite auf einem anderen\u00a0Webserver liegt und beim Verbinden mit dem TCP-Server des Boards\u00a0einfach nachgeladen wird. Der Nachteil ist hier vor allem, dass der Client mit dem Internet verbunden sein\u00a0muss. Das bedeutet auch, das ein privates Netzwerk mit dem NanoESP als AccesPoint nicht m\u00f6glich ist. Die Vorteile sind aber komplexere Seiten und schnellere Ladezeiten sowie eine insgesamt Entlastung des Boards. Im Folgenden Stelle ich das System anhand des RGB-LED-Beispiels<\/a> vor.<\/p>\n

Zun\u00e4chst das\u00a0Arduino-Programm<\/h3>\n<\/p>\n

Hinweis<\/strong>: Arduino-Programm downloaden und mit Arduino ab Version 1.6.5 auf den Controller uploaden.<\/p>\n

Hier\u00a0\u00e4ndert sich gar nicht soviel. Auf dem Board l\u00e4uft immer noch ein TCP-Server der beim Aufruf der IP einen HTML-Text verschickt. Dieser ist diesmal aber sehr viel kleiner und besteht im Grund nur aus folgenden Zeilen:<\/p>\n

<html><script src=“http:\/\/temp.fkainka.de\/RGB2.js“><\/script><script type=“text\/javascript“>draw());<\/script><\/html><\/strong><\/p>\n

Mit anderen Worten wird nichts anderes gemacht, als die JavaScript-Datei :<\/p>\n

http:\/\/temp.fkainka.de\/RGB2.js<\/a><\/p>\n

nachzuladen und anschlie\u00dfend die Funktion draw() aufzurufen. Diese Funktion\u00a0macht nun die ganze Arbeit.<\/p>\n

function draw(rgb){ \u00a0 document.write(‚ <\/em><\/p>\n

<HEAD> <link rel=“icon“ href=“data:;base64,iVBORw0KGgo=“> <meta name=“viewport“ content=“width=device-width, initial-scale=2.0, user-scalable=yes“> <title> RGB LED <\/title> <\/HEAD> <BODY bgcolor=“#FFFF99″ text=“#000000″> <FONT size=“6″ FACE=“Verdana“> Select Color <\/FONT> <HR> <BR> <FONT size=“3″ FACE=“Verdana“> Change the Color<BR> of the RGB-LED <BR> <BR> <form method=“GET“> <input type=“color“ name=“rgb“ value=“#‘<\/em><\/p>\n

+rgb+<\/em><\/p>\n

‚“ onchange=“this.form.submit()“><BR> <\/form> <BR> <HR> <\/font> ‚)<\/em><\/p>\n

; }<\/em><\/p>\n

In draw()\u00a0wird nun mit der JavaScript Funktion document.write() der sonst aus der ColorPicker.html-Seite bekannte Inhalt in den Browser geschrieben. Dadurch baut sich die bekannte Seite im Browser auf und das auch mit der gleichen Funktionalit\u00e4t die beim \u00dcbertragen vom Board direkt zustande gekommen w\u00e4re. Das erm\u00f6glicht es uns nun im Grunde, noch viel gr\u00f6\u00dfere und komplexere Seite mit eigenen JavaScripts und gro\u00dfer Funktionalit\u00e4t nachzuladen, ohne den NanoESP gro\u00df zu belasten.<\/p>\n

Einen weiten Vorteil gibt es bei dieser Seite auch noch, denn die Seite stellt nun auch dar, welche Farbe gerade gew\u00e4hlt wurde.\u00a0Dazu wird in sp\u00e4teren Aufrufen der draw()-Funktion der\u00a0Parameter rgb \u00fcbergeben, der in der document.write()-Funktion als Value von ColorPicker eingef\u00fcgt wird. Der richtige Hex-Code wird einfach aus den immer noch in der URL-Verschl\u00fcsselten Daten \u00fcbernommen. Ein weitere Vorteil dieser Version also.<\/p>\n

 <\/p>\n

Der Beitrag Ausgelagerte Webseiten f\u00fcr den NanoESP<\/a> erschien zuerst auf Elektronik Dachbude<\/a>.<\/p>\n

Source: http:\/\/fkainka.de\/tag\/Pretzelboard\/<\/p>","protected":false},"excerpt":{"rendered":"

Gerade im Kontext des Adventskalenders oder den anderen Lernpaketen habe ich einige HTML-Seiten f\u00fcr den NanoESP entworfen. Allerdings hat mich dabei immer gest\u00f6rt, dass zum einen der Speicherplatz ziemlich gering ist\u00a0zum anderen\u00a0die \u00dcbertragung etwas langsam sein kann, vor allem, wenn…
Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":1245,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[105],"tags":[106],"jetpack_publicize_connections":[],"yoast_head":"\nAusgelagerte Webseiten f\u00fcr den NanoESP - Internet of Things with the NanoESP<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ausgelagerte Webseiten f\u00fcr den NanoESP - Internet of Things with the NanoESP\" \/>\n<meta property=\"og:description\" content=\"Gerade im Kontext des Adventskalenders oder den anderen Lernpaketen habe ich einige HTML-Seiten f\u00fcr den NanoESP entworfen. Allerdings hat mich dabei immer gest\u00f6rt, dass zum einen der Speicherplatz ziemlich gering ist\u00a0zum anderen\u00a0die \u00dcbertragung etwas langsam sein kann, vor allem, wenn...Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp\" \/>\n<meta property=\"og:site_name\" content=\"Internet of Things with the NanoESP\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-17T10:33:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-17T10:39:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/iot.fkainka.de\/wp-content\/uploads\/2016\/03\/RGB11.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"358\" \/>\n\t<meta property=\"og:image:height\" content=\"347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabian Kainka\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabian Kainka\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp\",\"url\":\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp\",\"name\":\"Ausgelagerte Webseiten f\u00fcr den NanoESP - Internet of Things with the NanoESP\",\"isPartOf\":{\"@id\":\"https:\/\/iot.fkainka.de\/#website\"},\"datePublished\":\"2016-04-17T10:33:10+00:00\",\"dateModified\":\"2016-04-17T10:39:39+00:00\",\"author\":{\"@id\":\"https:\/\/iot.fkainka.de\/#\/schema\/person\/3ba31e3673596c4399ba204edff5697c\"},\"breadcrumb\":{\"@id\":\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/iot.fkainka.de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ausgelagerte Webseiten f\u00fcr den NanoESP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/iot.fkainka.de\/#website\",\"url\":\"https:\/\/iot.fkainka.de\/\",\"name\":\"Internet of Things with the NanoESP\",\"description\":\"The webpage for the Arduino compatible WiFi-Board\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/iot.fkainka.de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/iot.fkainka.de\/#\/schema\/person\/3ba31e3673596c4399ba204edff5697c\",\"name\":\"Fabian Kainka\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/iot.fkainka.de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=identicon&r=g\",\"caption\":\"Fabian Kainka\"},\"url\":\"https:\/\/iot.fkainka.de\/en\/author\/fabian-kainka\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ausgelagerte Webseiten f\u00fcr den NanoESP - Internet of Things with the NanoESP","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp","og_locale":"en_US","og_type":"article","og_title":"Ausgelagerte Webseiten f\u00fcr den NanoESP - Internet of Things with the NanoESP","og_description":"Gerade im Kontext des Adventskalenders oder den anderen Lernpaketen habe ich einige HTML-Seiten f\u00fcr den NanoESP entworfen. Allerdings hat mich dabei immer gest\u00f6rt, dass zum einen der Speicherplatz ziemlich gering ist\u00a0zum anderen\u00a0die \u00dcbertragung etwas langsam sein kann, vor allem, wenn...Read more","og_url":"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp","og_site_name":"Internet of Things with the NanoESP","article_published_time":"2016-04-17T10:33:10+00:00","article_modified_time":"2016-04-17T10:39:39+00:00","og_image":[{"width":358,"height":347,"url":"https:\/\/iot.fkainka.de\/wp-content\/uploads\/2016\/03\/RGB11.jpg","type":"image\/jpeg"}],"author":"Fabian Kainka","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fabian Kainka","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp","url":"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp","name":"Ausgelagerte Webseiten f\u00fcr den NanoESP - Internet of Things with the NanoESP","isPartOf":{"@id":"https:\/\/iot.fkainka.de\/#website"},"datePublished":"2016-04-17T10:33:10+00:00","dateModified":"2016-04-17T10:39:39+00:00","author":{"@id":"https:\/\/iot.fkainka.de\/#\/schema\/person\/3ba31e3673596c4399ba204edff5697c"},"breadcrumb":{"@id":"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/iot.fkainka.de\/ausgelagerte-webseiten-fuer-den-nanoesp#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/iot.fkainka.de\/"},{"@type":"ListItem","position":2,"name":"Ausgelagerte Webseiten f\u00fcr den NanoESP"}]},{"@type":"WebSite","@id":"https:\/\/iot.fkainka.de\/#website","url":"https:\/\/iot.fkainka.de\/","name":"Internet of Things with the NanoESP","description":"The webpage for the Arduino compatible WiFi-Board","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iot.fkainka.de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/iot.fkainka.de\/#\/schema\/person\/3ba31e3673596c4399ba204edff5697c","name":"Fabian Kainka","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/iot.fkainka.de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=identicon&r=g","caption":"Fabian Kainka"},"url":"https:\/\/iot.fkainka.de\/en\/author\/fabian-kainka"}]}},"jetpack_featured_media_url":"https:\/\/iot.fkainka.de\/wp-content\/uploads\/2016\/03\/RGB11.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6McI0-k0","_links":{"self":[{"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/posts\/1240"}],"collection":[{"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/comments?post=1240"}],"version-history":[{"count":4,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/posts\/1240\/revisions"}],"predecessor-version":[{"id":1249,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/posts\/1240\/revisions\/1249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/media\/1245"}],"wp:attachment":[{"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/media?parent=1240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/categories?post=1240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iot.fkainka.de\/en\/wp-json\/wp\/v2\/tags?post=1240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}