Code Source Compagnon d'eau
Sauter à la navigation
Sauter à la recherche
Sommaire
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="javascript/jquery-2.1.3.min.js"> </script>
<script type="text/javascript" src="javascript/javascript.js"> </script>
</head>
<body>
<div id="dev"></div>
<div id="main">
<img class="pkmn" src="images/Base-Goutte.jpg" id="image"/>
<div id="pkmninfo">
<span class="textsizeone">GOUTDO</span><br />
<span class="textsizetwo">Niveau 4</span><br />
<span class="textsizeone">STATUT</span><br />
<span class="textsizetwo" id="textsizetwo">En bonne sante</span>
</div>
<div id="xp">
<div id="xpbar"><div id="remainxp">
<div id="remainxp2"></div>
</div>
</div>
<spanclass="textsizethree" id="textsizethree">O litre</span>
</div>
<form name="tableau">
</form>
</div>
</body>
</html>
Dossier css
style.css
/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
@font-face {
font-family: "Retro Computer";
src: url('Retro Computer_DEMO.ttf');
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Fin du reset CSS */
body{
background: #00BAE3;
}
#main{
width: 270px;
margin: 25px auto;
}
.pkmn{
width: 240px;
height: 272px;
background: grey;
margin: 0 auto 25px;
display: block;
border-radius: 5px;
}
#pkmninfo{
float: left;
display: block;
margin-bottom: 20px;
}
#xp{
width: 160px;
height: 70px;
float: left;
text-align: center;
}
#xpbar{
width: 135px;
height: 15px;
/*background-color: #0088B7;*/
background: #fff;
margin: 0 auto 8px;
/*border: 1px solid black;*/
border-radius: 3px;
}
#remainxp{
width: 135px;
height: 15px;
background: #fff;
float: right;
border-radius: 3px;
}
#remainxp2{
width: 0px;
height: inherit;
background-color: #0088B7;
float: left;
border-radius: 3px;
}
.textsizeone{
font-size: 18px;
color: white;
font-family: 'Retro Computer';
}
.textsizetwo{
font-size: 10px;
color: white;
font-family: 'Retro Computer';
}
#textsizethree{
font-size: 18px;
color: white;
font-family: 'Retro Computer';
}
.actions{
background-color: white;
width: 188px;
height: 35px;
margin: 0 auto;
border: 1px solid transparent;
display: block;
font-family: 'Retro Computer';
font-size: 12px;
border-radius: 5px;
}
Dossier Image
Dossier qui contient les images et les animations.
Dossier javascript
javascript.js
imgGood = "images/Evolution-Good-OK.gif";
imgBad = "images/Evolution-Bad-OK.gif";
limit = 3;
function actualise() {
$.getJSON("http://arduino.local/data/get/conso", function(capt){
//capt = { "valeur": "86" }
$("#textsizethree").html(capt.value+" litre(s)");
$("#remainxp2").css("width",27 * capt.value);
var m=parseFloat(capt.value);
if (m < limit) {
document.getElementById('image').src=imgGood;
} else {
document.getElementById('image').src=imgBad;
$("#textsizetwo").html("Mauvaise Sante");
}
});
}
jQuery(document).ready(function(){
setInterval("actualise()", 18000);
});
+ La librairie jquery
Code Source pour Arduino
#include <Wire.h>
#include "rgb_lcd.h"
#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>
volatile int count = 0;
rgb_lcd lcd;
YunServer server;
int colorR = 0;
int colorG = 255;
int colorB = 0;
int vardigit = 0;
String valeur;
void setup()
{
Bridge.begin(); // démarre la connexion avec Linux NE PAS OUBLIER DE DESACTIVE LA CONNEXION WITH MDP
// sur le panneau d'administration
pinMode(7,INPUT);
digitalWrite(7,HIGH); // active la résistance de rappel du microcontroleur interne
attachInterrupt(4, inc, RISING);
// set up the LCD's number of columns and rows:
lcd.begin(16, 2);
server.listenOnLocalhost();
server.begin();
}
void loop()
{
//
YunClient client = server.accept();
lcd.setRGB(colorR, colorG, colorB);
if(count ==2 )
{
colorG =140;
colorR = 255;
}
if(count >2 )
{
colorG =0;
colorR = 255;
}
lcd.setCursor(0,1); // sur la colone 0 ligne 1
lcd.print(count); // afficher count
Bridge.put("conso",String(count));
delay(300);
}
void inc() // fonction interrupt
{
count = count + 1; //On incremente la variable
}
L'affichage LCD n'étant pas obligatoire, c'est un petit plus qui nous as permis de faire des tests intermédiaires.
