{"id":1747,"date":"2024-09-03T08:00:00","date_gmt":"2024-09-03T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=1747"},"modified":"2025-06-23T09:28:32","modified_gmt":"2025-06-23T07:28:32","slug":"arduino-led-interface-1","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2024\/09\/03\/arduino-led-interface-1\/","title":{"rendered":"Arduino LED Interface 1"},"content":{"rendered":"\n<p><br>Wenn es zwischen Arduino Gruppe Peine und Webdesign Gruppe Peine zu einem Crossover kommt, dann entsteht ein LED Interface und dieser Artikel zeigt die ersten Schritte\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Vorbereitungen:<\/strong><\/p>\n\n\n\n<p>Ziel dieses Projektes ist es, eine LED \u00fcber eine Webseite einzuschalten und auszuschalten. In einem ersten Schritt bereiten wir jetzt die Serverumgebung vor und installieren den Apache Webserver.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sudo apt install apache2<\/li>\n<\/ul>\n\n\n\n<p>Nun werden die Zugriffsrechte angepasst.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sudo chown -cR BENUTZER:GRUPPE \/var\/www<\/li>\n<\/ul>\n\n\n\n<p>Unter der Adresse \u201clocalhost\u201c sollte nun auch schon die Apache Serverumgebung verf\u00fcgbar sein. Allerdings fehlt jetzt noch PHP und deshalb geht es direkt mit der PHP Installation weiter.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sudo apt install php<\/li>\n<\/ul>\n\n\n\n<p>Weitere Details zum Apache und PHP gibt es in den Workshops <a href=\"https:\/\/www.fuhselab.de\/index.php\/2023\/08\/07\/apache-webserver-1\/\">Apache 1<\/a> bis <a href=\"https:\/\/www.fuhselab.de\/index.php\/2023\/08\/11\/apache-webserver-5\/\">Apache 5<\/a> und dem <a href=\"https:\/\/www.fuhselab.de\/index.php\/2023\/09\/27\/php-workshop-1\/\">PHP <\/a><a href=\"https:\/\/www.fuhselab.de\/index.php\/2023\/09\/27\/php-workshop-1\/\">Workshop 1<\/a>.<\/p>\n\n\n\n<p><strong>Apache und PHP Check:<\/strong><\/p>\n\n\n\n<p>Innerhalb der Serverumgebung (\/var\/www\/html\/) erstellen wir nun eine kleine Datei mit dem Namen \u201ctest.php\u201c und folgendem Inhalt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nphpinfo();\n?&gt;<\/code><\/pre>\n\n\n\n<p>Wenn wir diese Seite nun innerhalb der lokalen Serverumgebung aufrufen, sollten wir einige Infos zur installierten PHP Version bekommen. Der Check sollte also erfolgreich verlaufen sein.<\/p>\n\n\n\n<p><strong>Das Webdesign f\u00fcr das Arduino LED Interface:<\/strong><\/p>\n\n\n\n<p>Innerhalb der lokalen Serverumgebung erstellen wir nun den Ordner \u201c01_Interface\u201c und in diesen Ordner \u201ckopieren\u201c wir das Layout f\u00fcr <a href=\"https:\/\/www.fuhselab.de\/index.php\/2024\/01\/29\/flex-2-version-2\/\">Flex 2 Version 2<\/a>.<\/p>\n\n\n\n<p><strong>Der HTML Quelltext f\u00fcr die index-Datei:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt; \n&lt;html lang=\"de\"&gt;\n\n&lt;head&gt; \n   &lt;title&gt;Arduino LED Interface&lt;\/title&gt;\n   &lt;link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/&gt;\n   &lt;meta charset=\"UTF-8\"&gt;\n&lt;\/head&gt; \n\n&lt;body&gt;\n\n&lt;div id=\"wrapper\"&gt;\n\n&lt;header&gt;\n&lt;\/header&gt;\n&lt;nav&gt;\n&lt;ul&gt;\n   &lt;li&gt;&lt;a href=\"index.html\"&gt;Gesamt\u00fcbersicht&lt;\/a&gt;&lt;\/li&gt;\n   &lt;li&gt;&lt;a href=\"index.html\"&gt;Startseite&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/nav&gt; \n\n&lt;main&gt;\n\n&lt;article&gt;\n&lt;h1&gt;Arduino LED Interface:&lt;\/h1&gt;\n&lt;p&gt;\nArtikeltext einf\u00fcgen...\n&lt;\/p&gt;\n&lt;\/article&gt;\n&lt;br \/&gt;\n\n&lt;\/main&gt; \n\n&lt;footer&gt; \n&lt;\/footer&gt;\n\n&lt;\/div&gt; \n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Das LED Interface sollte unter der Adresse \u201clocalhost\/01_Interface\/index.html\u201c bereits erreichbar sein. Allerdings werden wir sp\u00e4ter noch die Dateiendung in \u201cphp\u201c \u00e4ndern. Im n\u00e4chsten Schritt erstellen wir die CSS Dateien f\u00fcr unser LED Interface.<\/p>\n\n\n\n<p><strong>Die CSS Dateien f\u00fcr das LED Interface:<\/strong><\/p>\n\n\n\n<p>Wir erstellen den Ordner \u201c01_CSS\u201c (in: \/var\/www\/html\/01_Interface\/) und darin erstellen wir folgende einfache Textdateien\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>01_zentrale.css<\/li>\n\n\n\n<li>02_fundament.css<\/li>\n\n\n\n<li>03_body.css<\/li>\n\n\n\n<li>04_wrapper.css<\/li>\n\n\n\n<li>05_kopfbereich.css<\/li>\n\n\n\n<li>06_navibereich.css<\/li>\n\n\n\n<li>07_textbereich.css<\/li>\n\n\n\n<li>08_artikel.css<\/li>\n<\/ul>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n* {\npadding: 0;\nmargin: 0;\n}\n\nhtml {\nheight: 101%;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c03_body.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\nbody {\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c04_wrapper.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n#wrapper {\nmargin: 5px;\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c05_kopfbereich.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\nheader {\nheight: 80px;\nbackground-image: url(..\/cpm-header01.jpg);\nbackground-repeat: no-repeat;\n\nbackground-color: steelblue;\ncolor: white;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\npadding-top: 5px;\npadding-right: 5px;\npadding-bottom: 5px;\npadding-left: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c06_navibereich.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\nnav {\nposition: absolute;\ntop: 97px;\nleft: 5px;\nwidth: 210px;\nbackground-color: steelblue;\ncolor: white;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c07_textbereich.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\nmain {\nbackground-color: steelblue;\ncolor: white;\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 241px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\nfont-family: Arial;\nfont-size: smaller;\n}\n\nmain a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\nmain a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c08_artikel.css\u201c<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\narticle {\noverflow: hidden;\ncolor: black;\nbackground-color: lightsteelblue;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\n}\n\n.bildlinks {\nfloat: left;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nmargin-left: 0px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n}\n\n.bildrechts {\nfloat: right;\nmargin-top: 5px;\nmargin-left: 15px;\nmargin-bottom: 5px;\nborder-style: solid;\nborder-width: 1px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p>Damit ist der erste Teil beendet und n\u00e4chste Woche geht es mit dem Arduino LED Interface weiter\u2026<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn es zwischen Arduino Gruppe Peine und Webdesign Gruppe Peine zu einem Crossover kommt, dann entsteht ein LED Interface und dieser Artikel zeigt die ersten Schritte\u2026<\/p>\n","protected":false},"author":1,"featured_media":48,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[22],"class_list":["post-1747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino","tag-arduino-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=1747"}],"version-history":[{"count":3,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1747\/revisions"}],"predecessor-version":[{"id":2836,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1747\/revisions\/2836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/48"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=1747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=1747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}