Sari la conținut
ELFORUM - Forumul electronistilor

Problema aliniere in pagina

loleksibolek

De loleksibolek
în Software PC

Postări Recomandate

loleksibolek Proficient

loleksibolek

Postat
Postat

  Daca cineva se pricepe la Html si CSS si poate sa ma ajute cu alinierea afisarii temperaturilor pe o pagina ...raman dator.Pagina arata acum asa:

http://i63.tinypic.com/2gwdzr5.jpg

http://i64.tinypic.com/2gskcj5.jpg

 

 

As vrea ca temperaturile sa fie aranjate de la stanga la dreapta gen:

 

Temp 1             Temp2                Temp 3         Temp 4

xxx*c                xxx*c                 xxx*c            xxx*c

si daca se pot distanta si casutele de sus intre ele.Codul e pentru un arduino dar ma intereseaza doar partea de asezare in pagina .Sunt bata in domeniul asta si am tot incercat dar nu-mi iese asa ca nu criticati prea mult:)).Aici e codul:

 

 
 
 client.println(F("<!DOCTYPE HTML>"));
  client.println(F("<head>"));
  client.println(F("<title>Home Automation Control</title>"));
  client.println(F("<head>"));
 
  client.println(F("<style type='text/css'>"));
  client.println(F("p {word-spacing:30px;}"));
  client.println(F(".label {font-size: 30px; text-align:left;}"));
  client.println(F("button {width: 230px; height: 70px; font-size: 20px; -webkit-appearance: none; background-color:#00FFFF;} "));
  client.println(F(".label1 {font-size: 30px; text-align:left;}"));
  client.println(F("button1 {width: 230px; height: 70px; font-size: 30px; -webkit-appearance: none; background-color:#FFFF00;} "));
  client.println(F(".label2 {font-size: 30px; text-align:left;}"));
  client.println(F("button2 {width: 230px; height: 70px; font-size: 30px; -webkit-appearance: none; background-color:#FF99FF;} "));
  client.println(F("h1 {color: red;width: 160px; height: 70px; font-size: 20px; }"));
  client.println(F("h2 {color: #660033 ;width: 160px; height: 70px; font-size: 20px; }"));
  client.println(F("h3 {color: #0033FF ;width: 300px; height: 150px; font-size: 45px; }"));
  client.println(F("</style>"));
 
 
  client.println(F("<script type='text/javascript'>"));
 
 
 
 
 
  client.println(F("function OnButtonClicked(parm) { window.location.href="X?" + parm; }"));
 
  client.println(F("</script>"));
 
  client.println(F("</head>"));
 
  client.println(F("<body style="background-color: #FDF5E6">"));
 
  client.println(F("<div class="label;label1;label2">"));
 
 
 
  // future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed
  /*
  if (digitalRead(DOOR_OPEN_INPUT) == HIGH)
  client.println("Door is Open"); 
  else  
  client.println("Door is Closed"); 
  client.println("<br>");
  */
 
  // door open / close button
   
                 
   client.println(F("<body>"));  
  client.println(F("<br/><br/><br/>"));
 
  if (digitalRead(5)==LOW)
  {
  client.println(F("<button onclick="OnButtonClicked('1');"><h2>OPRIT</button1></h2><br/><br/>"));
  }
 
 
  if (digitalRead(5)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('2');"><h1>PORNIT</h1></button2><br/><br/>"));
  }
 
  if (digitalRead(6)==LOW)
  {
  client.println(F("<button onclick="OnButtonClicked('3');"><h2>OPRIT</button1></h2><br/><br/><br/>"));
  }
  if (digitalRead(6)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('4');"><h1>PORNIT</button2></h1><br/><br/>"));
  } 
  if (digitalRead(7)==LOW)
  {
  client.println(F("<button onclick="OnButtonClicked('5');"><h2>OPRIT</button1></h2><br><br/><br/>"));
  }
  if (digitalRead(7)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('6');"><h1>PORNIT</button2></h1><br><br/><br/>"));
  } 
  if (digitalRead(8)==LOW)
  { 
  client.println(F("<button onclick="OnButtonClicked('7');"><h2>OPRIT</button1></h2><br/><br/><br/>"));
  }
  if (digitalRead(8)==HIGH){
 
  client.println(F("<button onclick="OnButtonClicked('8');"><h1>PORNIT</button2></h1><br/><br/>"));
  }
  client.println(F("</div>"));
 
 
 
   client.println(F("<div>"));
    client.println(F("<br/><br/>"));
if (digitalRead(2)==LOW)
  {
  client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1><br/><br/>"));
  }if (digitalRead(2)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2><br/><br/>"));
  }
  if (digitalRead(3)==LOW)
  {
  client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1><br/><br/>"));
  }
  if (digitalRead(3)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2><br/><br/>"));
  }
 
 
if (digitalRead(4)==LOW)
  { 
  client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1><br/><br/>"));
  }
  if (digitalRead(4)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2><br/><br/>"));
  }
  if (digitalRead(4)==LOW)
  { 
  client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1><br/><br/>"));
  }
  if (digitalRead(4)==HIGH){
  client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2><br/><br/>"));
  }
 client.println(F("</div>"));  
 client.println(F("<div>"));
  client.println(F("<br/><br/>"));  
 
 
   
   Serial.println();
Serial.print("Requesting temperature...");
sensors.requestTemperatures(); // Send the command to get temperatures
Serial.println("DONE");
client.println("<p>");
Serial.print("Device 1 (index 0) = ");
Serial.print(sensors.getTempCByIndex(0));
client.println("<li>");
client.println("<h1>Temperatura sufragerie</h1>");
client.println("<h3>");
client.println(sensors.getTempCByIndex(0));
client.println("*C");
Serial.println(" Degrees C");
client.println("</h3>");
Serial.print("Device 1 (index 0) = ");
Serial.print(sensors.getTempFByIndex(0));
Serial.println(" Degrees F");
 
 
Serial.print("Device 2 (index 1) = ");
Serial.print(sensors.getTempCByIndex(1));
client.println("<li>");
client.println("<h1>Temperatura bucatarie</h1>");
client.println("<h3>");
client.println(sensors.getTempCByIndex(1));
client.println("*C");
client.println("</h3>");
Serial.println(" Degrees C");
Serial.print("Device 2 (index 1) = ");
Serial.print(sensors.getTempFByIndex(1));
Serial.println(" Degrees F");
 
 
 
 
Serial.print("Device 3 (index 2) = ");
Serial.print(sensors.getTempCByIndex(2));
client.println("<li>");
client.println("<h1>Temperatura dormitor</h1>");
client.println("<h3>");
client.println(sensors.getTempCByIndex(2));
client.println("*C");
client.println("</h3>");
Serial.println(" Degrees C");
Serial.print("Device 2 (index 1) = ");
Serial.print(sensors.getTempFByIndex(2));
Serial.println(" Degrees F");
 
Serial.print("Device 4 (index 3) = ");
Serial.print(sensors.getTempCByIndex(3));
client.println("<li>");
client.println("<h1>Temperatura exterior</h1>");
client.println("<h3>");
client.println(sensors.getTempCByIndex(3));
client.println("*C");
client.println("</h3>");
Serial.println(" Degrees C");
Serial.print("Device 2 (index 3) = ");
Serial.print(sensors.getTempFByIndex(1));
Serial.println(" Degrees F");
client.println("</p>");
 
client.println(F("</div>")); 
client.println(F("</body>")); 
client.println(F("</html>")); 
}
 
 
 
 
Multumesc.
 
Link spre comentariu
  • Răspunsuri 2
  • Creat
  • Ultimul Răspuns

Top autori în acest subiect

  • loleksibolek

    2

  • belasajgo

    1

Zile populare

Top autori în acest subiect

Zile populare

belasajgo Mentor

belasajgo

Postat
Postat

Pentru distanta dintre casutele de sus am folosit margin: 5px; sus la style.

 

Pentru alinierea temperaturilor am folosit o tabela:

<table>

  <tr>

    <th>Denumire 1</th>

    <th>Denumire 2</th>

    ...

  </tr>

  <tr>

    <td>Valoare 1</td>

    <td>Valoare 2</td>

    ...

  </tr>

</table>

 

La tabela se poate modifica grosimea si culoarea chenarului in caz ca este nevoie.

 

Nu am testat codul, l-am editat in Notepad, deci poate contine greseli!

client.println(F("<!DOCTYPE HTML>"));client.println(F("<head>"));client.println(F("<title>Home Automation Control</title>"));client.println(F("<head>"));client.println(F("<style type='text/css'>"));client.println(F("p {word-spacing:30px;}"));client.println(F(".label {font-size: 30px; text-align:left;}"));client.println(F("button {width: 230px; height: 70px; font-size: 20px; margin: 5px; -webkit-appearance: none; background-color:#00FFFF;} "));client.println(F(".label1 {font-size: 30px; text-align:left;}"));client.println(F("button1 {width: 230px; height: 70px; font-size: 30px; margin: 5px; -webkit-appearance: none; background-color:#FFFF00;} "));client.println(F(".label2 {font-size: 30px; text-align:left;}"));client.println(F("button2 {width: 230px; height: 70px; font-size: 30px; margin: 5px; -webkit-appearance: none; background-color:#FF99FF;} "));client.println(F("h1 {color: red;width: 160px; height: 70px; font-size: 20px; }"));client.println(F("h2 {color: #660033 ;width: 160px; height: 70px; font-size: 20px; }"));client.println(F("h3 {color: #0033FF ;width: 300px; height: 150px; font-size: 45px; }"));client.println(F("</style>"));client.println(F("<script type='text/javascript'>"));client.println(F("function OnButtonClicked(parm) { window.location.href="X?" + parm; }"));client.println(F("</script>"));client.println(F("</head>"));client.println(F("<body style="background-color: #FDF5E6">"));client.println(F("<div class="label;label1;label2">"));// future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed/*if (digitalRead(DOOR_OPEN_INPUT) == HIGH)client.println("Door is Open"); else  client.println("Door is Closed"); client.println("<br>");*/// door open / close buttonclient.println(F("<body>"));client.println(F("<br/><br/><br/>"));if (digitalRead(5)==LOW){client.println(F("<button onclick="OnButtonClicked('1');"><h2>OPRIT</h2></button1>"));}if (digitalRead(5)==HIGH){client.println(F("<button onclick="OnButtonClicked('2');"><h1>PORNIT</h1></button2>"));}if (digitalRead(6)==LOW){client.println(F("<button onclick="OnButtonClicked('3');"><h2>OPRIT</h2></button1>"));}if (digitalRead(6)==HIGH){client.println(F("<button onclick="OnButtonClicked('4');"><h1>PORNIT</h1></button2></h1>"));}if (digitalRead(7)==LOW){client.println(F("<button onclick="OnButtonClicked('5');"><h2>OPRIT</h2></button1>"));}if (digitalRead(7)==HIGH){client.println(F("<button onclick="OnButtonClicked('6');"><h1>PORNIT</h1></button2>"));}if (digitalRead(8)==LOW){client.println(F("<button onclick="OnButtonClicked('7');"><h2>OPRIT</h2></button1>"));}if (digitalRead(8)==HIGH){client.println(F("<button onclick="OnButtonClicked('8');"><h1>PORNIT</h1></button2>"));}client.println(F("</div>"));client.println(F("<div>"));client.println(F("<br/><br/>"));if (digitalRead(2)==LOW){client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1>"));}if (digitalRead(2)==HIGH){client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2>"));}if (digitalRead(3)==LOW){client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1>"));}if (digitalRead(3)==HIGH){client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2>"));}if (digitalRead(4)==LOW){client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1>"));}if (digitalRead(4)==HIGH){client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2>"));}if (digitalRead(4)==LOW){client.println(F("<button onclick="OnButtonClicked('1');"><h1>DESCHIS</h1></button1>"));}if (digitalRead(4)==HIGH){client.println(F("<button onclick="OnButtonClicked('2');">INCHIS</button2>"));}client.println(F("</div>"));client.println(F("<div>"));client.println(F("<br/><br/>"));client.println("<table>");client.println("<tr>");client.println("<th><h1>Temperatura sufragerie</h1></th>");client.println("<th><h1>Temperatura bucatarie</h1></th>");client.println("<th><h1>Temperatura dormitor</h1></th>");client.println("<th><h1>Temperatura exterior</h1></th>");client.println("</tr>");client.println("<tr>");Serial.println();Serial.print("Requesting temperature...");sensors.requestTemperatures(); // Send the command to get temperaturesSerial.println("DONE");Serial.print("Device 1 (index 0) = ");Serial.print(sensors.getTempCByIndex(0));client.println("<td>");client.println("<h3>");client.println(sensors.getTempCByIndex(0));client.println("*C");client.println("</h3>");client.println("</td>");Serial.println(" Degrees C");Serial.print("Device 1 (index 0) = ");Serial.print(sensors.getTempFByIndex(0));Serial.println(" Degrees F");Serial.print("Device 2 (index 1) = ");Serial.print(sensors.getTempCByIndex(1));client.println("<td>");client.println("<h3>");client.println(sensors.getTempCByIndex(1));client.println("*C");client.println("</h3>");client.println("</td>");Serial.println(" Degrees C");Serial.print("Device 2 (index 1) = ");Serial.print(sensors.getTempFByIndex(1));Serial.println(" Degrees F");Serial.print("Device 3 (index 2) = ");Serial.print(sensors.getTempCByIndex(2));client.println("<td>");client.println("<h3>");client.println(sensors.getTempCByIndex(2));client.println("*C");client.println("</h3>");client.println("</td>");Serial.println(" Degrees C");Serial.print("Device 2 (index 1) = ");Serial.print(sensors.getTempFByIndex(2));Serial.println(" Degrees F");Serial.print("Device 4 (index 3) = ");Serial.print(sensors.getTempCByIndex(3));client.println("<td>");client.println("<h3>");client.println(sensors.getTempCByIndex(3));client.println("*C");client.println("</h3>");client.println("</td>");Serial.println(" Degrees C");Serial.print("Device 2 (index 3) = ");Serial.print(sensors.getTempFByIndex(1));Serial.println(" Degrees F");client.println("</tr>");client.println("</table>");client.println(F("</div>")); client.println(F("</body>")); client.println(F("</html>")); }
Link spre comentariu

Creează un cont sau autentifică-te pentru a adăuga comentariu

Trebuie să fi un membru pentru a putea lăsa un comentariu.

Creează un cont

Înregistrează-te pentru un nou cont în comunitatea nostră. Este simplu!

Înregistrează un nou cont

Autentificare

Ai deja un cont? Autentifică-te aici.

Autentifică-te acum
Mergi la listare subiecte


×
×
  • Creează nouă...

Informații Importante

Am plasat cookie-uri pe dispozitivul tău pentru a îmbunătății navigarea pe acest site. Poți modifica setările cookie, altfel considerăm că ești de acord să continui.Termeni de Utilizare si Ghidări