Code Source Compagnon d'eau : Différence entre versions

De Learning Lab Environnements Connectés
Sauter à la navigation Sauter à la recherche
m
m
 
(4 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 4 : Ligne 4 :
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
 
<html>
−
    <head>
+
    <head>
 
         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 
         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
Ligne 12 : Ligne 12 :
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 +
 
     <div id="dev"></div>
 
     <div id="dev"></div>
 
         <div id="main">
 
         <div id="main">
Ligne 19 : Ligne 20 :
 
                     <span class="textsizetwo">Niveau 4</span><br />
 
                     <span class="textsizetwo">Niveau 4</span><br />
 
                     <span class="textsizeone">STATUT</span><br />
 
                     <span class="textsizeone">STATUT</span><br />
−
                     <span class="textsizetwo">En bonne sante</span>
+
                     <span class="textsizetwo" id="textsizetwo">En bonne sante</span>
 
                 </div>
 
                 </div>
 
             <div id="xp">
 
             <div id="xp">
−
                 <div id="xpbar"><div id="remainxp"></div></div>
+
                 <div id="xpbar"><div id="remainxp">
−
             <span class="textsizetwo">800/1250 XP</span>
+
<div id="remainxp2"></div>
 +
</div>
 +
</div>
 +
             <spanclass="textsizethree" id="textsizethree">O litre</span>
 
             </div>
 
             </div>
 
             <form name="tableau">
 
             <form name="tableau">
Ligne 126 : Ligne 130 :
 
     width: 135px;
 
     width: 135px;
 
     height: 15px;
 
     height: 15px;
−
     background-color: #0088B7;
+
     /*background-color: #0088B7;*/
 +
    background: #fff;
 
     margin: 0 auto 8px;
 
     margin: 0 auto 8px;
−
     border: 1px solid black;
+
     /*border: 1px solid black;*/
−
     border-radius: 2px;
+
     border-radius: 3px;
 
}
 
}
  
 
#remainxp{
 
#remainxp{
−
     width: 20px;
+
     width: 135px;
−
     height: inherit;
+
     height: 15px;
 
     background: #fff;
 
     background: #fff;
 
     float: right;
 
     float: right;
 +
    border-radius: 3px;
 +
}
 +
#remainxp2{
 +
    width: 0px;
 +
    height: inherit;
 +
    background-color: #0088B7;
 +
    float: left;
 +
    border-radius: 3px;
 
}
 
}
  
Ligne 146 : Ligne 159 :
 
.textsizetwo{
 
.textsizetwo{
 
     font-size: 10px;
 
     font-size: 10px;
 +
    color: white;
 +
    font-family: 'Retro Computer';
 +
}
 +
#textsizethree{
 +
    font-size: 18px;
 
     color: white;
 
     color: white;
 
     font-family: 'Retro Computer';
 
     font-family: 'Retro Computer';
Ligne 176 : Ligne 194 :
 
$.getJSON("http://arduino.local/data/get/conso", function(capt){
 
$.getJSON("http://arduino.local/data/get/conso", function(capt){
 
//capt = {  "valeur": "86" }  
 
//capt = {  "valeur": "86" }  
−
$("#dev").html(capt.value);
+
$("#textsizethree").html(capt.value+" litre(s)");
 +
 +
$("#remainxp2").css("width",27 * capt.value);
 +
 
     var m=parseFloat(capt.value);  
 
     var m=parseFloat(capt.value);  
 
if (m < limit) {  
 
if (m < limit) {  
 
   document.getElementById('image').src=imgGood;
 
   document.getElementById('image').src=imgGood;
 +
 
   } else  {
 
   } else  {
 
   document.getElementById('image').src=imgBad;
 
   document.getElementById('image').src=imgBad;
 +
$("#textsizetwo").html("Mauvaise Sante");
 +
 
   }
 
   }
 
   });
 
   });
Ligne 192 : Ligne 216 :
 
   
 
   
 
});
 
});
 +
 
</pre>
 
</pre>
  
Ligne 272 : Ligne 297 :
  
 
L'affichage LCD n'étant pas obligatoire, c'est un petit plus qui nous as permis de faire des tests intermédiaires.
 
L'affichage LCD n'étant pas obligatoire, c'est un petit plus qui nous as permis de faire des tests intermédiaires.
 +
 +
[[Catégorie:Arduino]]
 +
[[Catégorie:Arduino Yùn]]

Version actuelle datée du 27 avril 2016 à 16:31

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.

Récupérée de « https://bacasable.arpitania.eu//index.php?title=Code_Source_Compagnon_d%27eau&oldid=7454 »