Stap 2: De GUI
sudo mkdir /home/pi/webMaak de /home/pi/web/index.php bestand met deze inhoud
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css" /> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/attendance.js"></script> </head> <body> <div class="container"> <div class="clock"> <div id="Date"></div> <ul> <li id="hours"></li> <li id="point">:</li> <li id="min"></li> <li id="point">:</li> <li id="sec"></li> </ul> </div> <div class="tags"> <div id="Message">Wait..</div> </div> </div> </body> </html>
Dit is het hoofdbestand, de animaties worden gerealiseerd met jquery
Maak het bestand /home/pi/web/js/attendance.js met deze inhoud
function updateDisplay() { var jqxhr = $.get("message.php", function(data){ $('#Message').html(data); }); } $(document).ready(function() { // Create two variable with the names of the months and days in an array var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] // Create a newDate() object var newDate = new Date(); // Extract the current date from Date object newDate.setDate(newDate.getDate()); // Output the day, date, month and year $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()); setInterval( function() { // Create a newDate() object and extract the seconds of the current time var seconds = new Date().getSeconds(); // Add a leading zero to seconds value $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000); setInterval( function() { // Create a newDate() object and extract the minutes of the current time var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); },1000); setInterval( function() { // Create a newDate() object and extract the hours of the current time var hours = new Date().getHours(); // Add a leading zero to the hours value $("#hours").html(( hours < 10 ? "0" : "" ) + hours); }, 1000); setInterval(function(){updateDisplay()}, 500); }); Maak het bestand /home/pi/web/css/style.css met deze inhoud
body{ background:#333333; font:bold 12px Arial, Helvetica, sans-serif; margin:0; padding:0; min-width:90%; color:#bbbbbb; } a { text-decoration:none; color:#00c6ff; } h1 { font: 4em normal Arial, Helvetica, sans-serif; padding: 20px; margin: 0; text-align:center; } h1 small{ font: 0.2em normal Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em; display: block; } h2 { font-weight:700; color:#bbb; font-size:20px; } h2, p { margin-bottom:10px; } .container { width: 90%; margin: 0 auto; overflow: hidden; } .clock { width: 80%; margin: 0 auto; padding: 30px; border: 1px solid #333; color: #fff; background: #0066FF; } .tags { width: 80%; margin: 0 auto; padding: 30px; border: 1px solid #333; color: #fff; background: #0066FF; } #Date { font-size: 36px; text-align: center; } #Message { font-size: 36px; text-align: center; } ul { width: 800px; margin: 0 auto; padding: 0px; list-style: none; text-align: center; } ul li { display: inline; font-size: 10em; text-align: center; } #point { position: relative; -moz-animation: mymove 1s ease infinite; -webkit-animation: mymove 1s ease infinite; padding-left: 10px; padding-right: 10px; } /* Simple Animation */ mymove { 0% {opacity: 1.0; text-shadow: 0 0 20px #00c6ff; } 50% { opacity: 0; text-shadow: none; } 100% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; } } mymove { 0% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; } 50% { opacity: 0; text-shadow: none; } 100% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; }; } Maak het bestand /home/pi/web/message.php met de follow-inhoud, gebruiken we dit in de volgende stap
<?php if (isset($_POST['direction'])) { $str_in=$_POST['direction']; $file = fopen("message.txt","w")or die("Unable to write file !"); $str_in = mb_convert_encoding($str_in, 'HTML-ENTITIES', "UTF-8"); fwrite($file,$str_in); fclose($file); } $myfile = fopen("message.txt", "r") or die("Unable to open file!"); $read=fread($myfile,filesize("message.txt")); fclose($myfile); echo $read; ?> Maak een bestand /home/pi/web/message.txt, we zullen dit gebruiken voor het tijdelijk opslaan van het bericht om te laten zien
Maak een link naar de webserver
sudo ln -s /home/pi/web /var/www
Als u opnieuw opstarten, Raspberry start in de weergavemodus en geeft de huidige datum en tijd
