Tid & närvaro System med hallon och Phidgets (2 / 3 steg)

Steg 2: GUI

sudo mkdir /home/pi/web skapa filen /home/pi/web/index.php med innehåll

<! DOCTYPE html >
< html >
< head >
< meta namn = "vyport" content = "bredd = enhet-bredd, initial-skala = 1" >
< länka 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 = "behållare" >
< div class = "klocka" >
< div id = "Datum" >< / div >
< ul >
< li-id = "timmar" >< /li >
< li-id = "punkt" >: < /li >
< li-id = "min" >< /li >
< li-id = "punkt" >: < /li >
< li-id = "SEK" >< /li >
< /ul >
< / div >
< div class = "Taggar" >
< div id = "Meddelande" > vänta... < / div >
< / div >
< / div >
< / body >
< / html >

Detta är den huvudsakliga arkivera, animationer realiseras med jquery

Skapa filen /home/pi/web/js/attendance.js med detta innehåll

funktion updateDisplay() {
var jqxhr = $ta ("message.php", function(data) {
$('#Message').html(data);
});
}

$(document).ready(function() {
Skapa två variabel med namn på månader och dagar i en matris
var monthNames = ["Januari", "Februari", "Mars", "April", "kan", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
var dayNames = ["Söndag", "Monday", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag"]

Skapa ett newDate()-objekt
var hänsyn = nya Date();
Extrahera det aktuella datumet från Date-objekt
newDate.setDate(newDate.getDate());
Dag, datum, månad och år-utgång
$(' #Date').html(dayNames[newDate.getDay()] + "" + newDate.getDate() + "" + monthNames[newDate.getMonth()] + "" + newDate.getFullYear());

setInterval (function() {
Skapa ett newDate() objekt och extrahera sekunder av den aktuella tiden
var sekunder = nya Date().getSeconds();
Lägga till en inledande nolla till sekunder värde
$("#sec").html ((sekunder < 10? "0": "") + sekunder);
}, 1000);

setInterval (function() {
Skapa ett newDate() objekt och extrahera protokollet från den aktuella tiden
var minuter = nya Date().getMinutes();
Lägga till en inledande nolla till minuter värde
$("#min").html ((minuter < 10? "0": "") + minuter);
}, 1000);

setInterval (function() {
Skapa ett newDate() objekt och extrahera de nuvarande timmarna
var timmar = nya Date().getHours();
Lägga till en inledande nolla timmar värde
$("#hours").html ((timmar < 10? "0": "") + timmar);
}, 1000);

setInterval(function(){updateDisplay()}, 500);

});

Skapa filen /home/pi/web/css/style.css med detta innehåll

kroppen {
bakgrund: #333333;
typsnitt: fet 12px Arial, Helvetica, sans-serif;
marginal: 0;
padding: 0;
min-bredd: 90%.
färg: #bbbbbb;
}

en {
text-decoration: none;
färg: #00c6ff;
}

H1 {
teckensnitt: 4em normal Arial, Helvetica, sans-serif;
stoppning: 20px; marginal: 0;
text-align: center;
}

H1 små {
teckensnitt: 0.2em normal Arial, Helvetica, sans-serif;
text-transform: versaler; Letter-spacing: 0.2em; line-height: 5em;
Visa: blockera;
}

H2 {
teckensnitt-vikt: 700;
färg: #bbb;
font-size: 20px;
}

H2, p {
marginal-botten: 10px;
}
.container {
bredd: 90%.
marginal: 0 auto;
overflow: hidden;
}

.Clock {
bredd: 80%.
marginal: 0 auto;
stoppning: 30px;
Border: 1px solid #333;
färg: #fff;
bakgrund: #0066FF;
}

.Tags {
bredd: 80%.
marginal: 0 auto;
stoppning: 30px;
Border: 1px solid #333;
färg: #fff;
bakgrund: #0066FF;
}

#Date {
font-size: 36px;
text-align: center;
}
#Message {
font-size: 36px;
text-align: center;
}
UL {
bredd: 800px;
marginal: 0 auto;
padding: 0px;
lista-style: none;
text-align: center;
}

ul li {
Visa: inline;
font-size: 10em;
text-align: center;
}

#point {
position: släkting;
-moz-animering: mymove 1s lätthet oändliga;
-webkit-animering: mymove 1s lätthet oändliga;
Cellutfyllnad till vänster: 10px;
Cellutfyllnad till höger: 10px;
}

/ * Enkel Animation * /
mymove {
0% {opacitet: 1,0;
text-shadow: 0 0 20px #00c6ff;
}

50% {
opacitet: 0;
text-shadow: none;
}

100% {
opacitet: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
}

mymove {
0% {
opacitet: 1.0;
text-shadow: 0 0 20px #00c6ff;
}

50% {
opacitet: 0;
text-shadow: none;
}

100% {
opacitet: 1.0;
text-shadow: 0 0 20px #00c6ff;
};
}

Skapa filen /home/pi/web/message.php med följande innehåll, vi använder detta i nästa steg

<? php
om (isset($_POST['direction']))
{
$str_in = $_POST ["riktning"];
$file = fopen ("message.txt","w") eller die ("kan inte skriva filen!");
$str_in = mb_convert_encoding ($str_in, ' HTML-enheter, "UTF-8");
fwrite($File,$str_in);
fclose($File);
}
$myfile = fopen ("message.txt", "r") eller die ("kan inte öppna filen!");
$read=fread($myfile,filesize("message.txt"));
fclose($myfile);
ECHO $read;
? >

Skapa en fil /home/pi/web/message.txt, vi kommer att använda detta för att tillfälligt lagra meddelandet för att Visa

Göra en länk till webbservern

sudo ln -s /home/pi/web/var/www

Om du startar om, hallon startar i visningsläget och visas aktuellt datum och tid