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…
Vorbereitungen:
Ziel dieses Projektes ist es, eine LED über eine Webseite einzuschalten und auszuschalten. In einem ersten Schritt bereiten wir jetzt die Serverumgebung vor und installieren den Apache Webserver.
- sudo apt install apache2
Nun werden die Zugriffsrechte angepasst.
- sudo chown -cR BENUTZER:GRUPPE /var/www
Unter der Adresse “localhost“ sollte nun auch schon die Apache Serverumgebung verfügbar sein. Allerdings fehlt jetzt noch PHP und deshalb geht es direkt mit der PHP Installation weiter.
- sudo apt install php
Weitere Details zum Apache und PHP gibt es in den Workshops Apache 1 bis Apache 5 und dem PHP Workshop 1.
Apache und PHP Check:
Innerhalb der Serverumgebung (/var/www/html/) erstellen wir nun eine kleine Datei mit dem Namen “test.php“ und folgendem Inhalt:
<?php
phpinfo();
?>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.
Das Webdesign für das Arduino LED Interface:
Innerhalb der lokalen Serverumgebung erstellen wir nun den Ordner “01_Interface“ und in diesen Ordner “kopieren“ wir das Layout für Flex 2 Version 2.
Der HTML Quelltext für die index-Datei:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Arduino LED Interface</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul>
<li><a href="index.html">Gesamtübersicht</a></li>
<li><a href="index.html">Startseite</a></li>
</ul>
</nav>
<main>
<article>
<h1>Arduino LED Interface:</h1>
<p>
Artikeltext einfügen...
</p>
</article>
<br />
</main>
<footer>
</footer>
</div>
</body>
</html>
Das LED Interface sollte unter der Adresse “localhost/01_Interface/index.html“ bereits erreichbar sein. Allerdings werden wir später noch die Dateiendung in “php“ ändern. Im nächsten Schritt erstellen wir die CSS Dateien für unser LED Interface.
Die CSS Dateien für das LED Interface:
Wir erstellen den Ordner “01_CSS“ (in: /var/www/html/01_Interface/) und darin erstellen wir folgende einfache Textdateien…
- 01_zentrale.css
- 02_fundament.css
- 03_body.css
- 04_wrapper.css
- 05_kopfbereich.css
- 06_navibereich.css
- 07_textbereich.css
- 08_artikel.css
Der CSS-Code für die Datei “02_fundament.css“:
@media all {
* {
padding: 0;
margin: 0;
}
html {
height: 101%;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “03_body.css“:
@media all {
body {
background-color: white;
color: black;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “04_wrapper.css“:
@media all {
#wrapper {
margin: 5px;
background-color: white;
color: black;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “05_kopfbereich.css“:
@media all {
header {
height: 80px;
background-image: url(../cpm-header01.jpg);
background-repeat: no-repeat;
background-color: steelblue;
color: white;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “06_navibereich.css“:
@media all {
nav {
position: absolute;
top: 97px;
left: 5px;
width: 210px;
background-color: steelblue;
color: white;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-family: Arial;
font-size: smaller;
}
nav li {
display: block;
list-style-type: none;
padding: 3px;
}
nav a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav a:hover {
background-color: red;
color: black;
display: block;
text-decoration: none;
}
nav a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “07_textbereich.css“:
@media all {
main {
background-color: steelblue;
color: white;
margin-top: 3px;
margin-right: 5px;
margin-bottom:5px;
margin-left: 241px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
font-family: Arial;
font-size: smaller;
}
main a:link {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:visited {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:hover {
color: black;
background-color: white;
text-decoration: underline;
}
main a:focus {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:active {
color: white;
background-color: steelblue;
text-decoration: underline;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “08_artikel.css“
@media all {
article {
overflow: hidden;
color: black;
background-color: lightsteelblue;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.clearingtext {
clear: both;
background-color: lightsteelblue;
}
.bildlinks {
float: left;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
}
.bildrechts {
float: right;
margin-top: 5px;
margin-left: 15px;
margin-bottom: 5px;
border-style: solid;
border-width: 1px;
}
} /* Ende von @media nicht löschen*/Damit ist der erste Teil beendet und nächste Woche geht es mit dem Arduino LED Interface weiter…
Arduino Gruppe Peine:
Wer sich für Mikrocontroller Programmierung interessiert ist in der Arduino Gruppe Peine genau richtig. Auch Raspberry Fans und Nutzer anderer Mikrocontroller sind willkommen.
Die Arduino Gruppe Peine trifft sich Dienstags von 18:00 Uhr bis 21:00 Uhr. Die Teilnehmerzahl ist begrenzt und deshalb bitte vorher per Kontaktformular oder Mail an info@fuhselab.de melden. Der Veranstaltungsort wird kurzfristig festgelegt und den Teilnehmerinnen und Teilnehmern per E-Mail mitgeteilt.
Das Angebot “Arduino Gruppe Peine“ kann für einen Jahresbeitrag von 60,- Euro genutzt werden. Für einen Beitrag von 20,- Euro pro Teilnehmer können die Workshops genutzt werden. Materialkosten werden projektabhängig zusätzlich erhoben.
Weitere interessante Webartikel zum Thema Arduino gibt es auf der Fuhselab Webseite und in der Artikelübersicht 2022 und der Artikelübersicht 2023.