Pomoc s HTML

Odpovědět
daton
Příspěvky: 450
Registrován: 16 bře 2013, 16:12

Pomoc s HTML

Příspěvek od daton » 30 lis 2017, 22:26

Zdravím všechny
potřeboval bych pomoc s html kodem který je zapsán do kodu pro ESP8266. Jedná se o sérii čtyř tabulek, které by se měly zobrazovat za sebou v řadě. Prozatím jsem zkoušel tento kod:

Kód: Vybrat vše

 client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
  client.println("</head>");

  client.println("<hr>");
  client.println("<h2><center> KONTROLNI  SYSTEM </center></h2>");
  client.println("<hr/>");
   client.println ("<table  style=\"  border: 5px double red\" >");
   client.println("<tr><td>");
   client.println("<center>");
  client.println("<table   style= \"padding: 15px; border: 12px double red; width: 20%; float: left; display:inline-table \";>"); 
  client.println("<tr>");
 
  if (digitalRead(0)==!true){
              client.print ("<td><a href=\"/light3on\"\"><button style='background:lightblue;height:100px;width:150px'>Zaluzie 1 OFF</button></a></td>");
              }else{
              client.print ("<td><a href=\"/light3off\"\"><button style='background:yellow;height:100px;width:150px'>Zaluzie 1 ON</button></a></td>");
               }
               
   client.println("</tr>");  
   client.println ("</table >");
   
   client.println ("<table style=\"display:inline-table; padding: 15px; border: 12px double blue; float:center; width: 30% \";>");  
   client.println("<tr>");
  
  if (digitalRead(5)==!true){
              client.print ("<td><a href=\"/light1on\"\"><button style='background:lightblue; height:100px; width:250px; '>Zaluzie 2 OFF</button></a></td>");
              }else{
              client.print ("<td><a href=\"/light1off\"\"><button style='background:yellow; height:100px; width:250px'>Zaluzie 2 ON</button></a></td>");
               }
               
  client.println("</tr>");
  client.println("</table>");

  client.println ("<table style=\"display:inline-table; padding: 15px; border: 12px double blue; float:center; width: 30% \";>");  
  client.println("<tr>");
  
  if (digitalRead(5)==!true){
              client.print ("<td><a href=\"/light1on\"\"><button style='background:lightblue; height:100px; width:250px; '>Zaluzie 2 OFF</button></a></td>");
              }else{
              client.print ("<td><a href=\"/light1off\"\"><button style='background:yellow; height:100px; width:250px'>Zaluzie 2 ON</button></a></td>");
               }
               
  client.println("</tr>");
  client.println("</table>");

  client.println ("<table    style=\" display:inline-table; padding: 15px; border: 12px double green;  float: right; width: 20%  \">"); 
  client.println("<tr>");

  if (digitalRead(5)==!true){
              client.print ("<td><a href=\"/light1on\"\"><button style='background:lightblue; height:100px; width:50px; '>Zaluzie 3 OFF</button></a></td>");
              }else{
              client.print ("<td><a href=\"/light1off\"\"><button style='background:yellow; height:100px; width:50px'>Zaluzie 3 ON</button></a></td>");
               }
               
  client.println("</tr>");
  client.println("</table>");

       
  client.println("</center>");
  client.println("</td></tr>");
  client.println("</table>");

  client.println("</html>"); 
ale výsledek je takovýto:
pokus11.png
Stále mi poslední tabulka utíká dolu. Nemáte někdo nápad jak to udělat aby tabulky byl v radě? Potřebuji to pro panel s tlačítky. Díky

AlesH
Příspěvky: 322
Registrován: 25 úno 2013, 09:18

Re: Pomoc s HTML

Příspěvek od AlesH » 30 lis 2017, 22:39

Ahoj. Podle mých zkušeností je pro zamezení "zalamování" nejlepší to všechno udělat jako jedinou tabulku (table) a jediný řádek (tr) s potřebným počtem "sloupců" (td).

Uživatelský avatar
Dex
Administrátor
Příspěvky: 897
Registrován: 16 úno 2013, 14:26

Re: Pomoc s HTML

Příspěvek od Dex » 30 lis 2017, 22:45

V tomto případě a aby to bylo jednoduché, bych také udělal jedinou tabulku a je to vyřešené ;)
"all your robots are belong to us"
robodoupe.cz | rxd.cz | codetory.cz

daton
Příspěvky: 450
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 01 pro 2017, 08:14

No to právě moc nechci. jde o to že jedna tabulka nebude flexibilní a bunky mi neposkytnou takovou grafickou volnost jako rámečky tabulky jako takové. v těch tabulkách nebude pouze jeden spínač ale hned několik různě rozdělených polí a pokud by to mělo být propojené jako bunky i se základním formátem tak to bude hodně nepřehledné. Proto jsem chtěl základní rozlišení na čtyři samostatné tabulky vedle sebe.

AlesH
Příspěvky: 322
Registrován: 25 úno 2013, 09:18

Re: Pomoc s HTML

Příspěvek od AlesH » 01 pro 2017, 08:49

OK, tak ty jednotlivé tabulky ještě "obal" jednou hlavní tabulkou s jediným řádkem a čtyřmi buňkami. Do každé z buněk pak dej jednu stávající tabulku samostatně (a komplet).

Struktura by mohla vypadat nějak takto:

Kód: Vybrat vše

<table>
  <tr>
    <td>
      <table><tr><td>Tabulka 1</td></tr></table>
    </td>
    <td>
      <table><tr><td>Tabulka 2</td></tr></table>
    </td>
    <td>
      <table><tr><td>Tabulka 3</td></tr></table>
    </td>
    <td>
      <table><tr><td>Tabulka 4</td></tr></table>
    </td>
  </tr>
</table>
Místo vnořených tabulek by v těch buňkách jediného hlavního řádku mohly být třeba DIV tagy, nebo cokoliv jiného (i složitého). Podstatné je to, že řádek tabulky se nikdy "nezalomí".

daton
Příspěvky: 450
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 01 pro 2017, 09:11

Jo super tohle vypadá nadějně zkusím. Tu hlavní tabulku tam mám taky ale nedával jsem ostatní do řádku a proto to možná bylo takto zalomené díky.

daton
Příspěvky: 450
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 01 pro 2017, 09:20

Super to je ono, podcenil jsem sílu tagu td myslel jsem že to udělám stylem ale ten na to neměl. Moc dík.

daton
Příspěvky: 450
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 04 pro 2017, 15:59

Ještě mám dotaz tentokrát na dvě věci. Za prvé potřeboval bych zvětšit písmo na klasický rámec h1 což je největší nadpis asi ještě dvakrát. Zkoušel jsem style = font size:40px (i 200%) ale nějak mi to nefunguje. Máte někdo zkušenosti jak to udělat? Opět je to html v codu arduina.
A druhý dotaz je zákeřnější, v aplikaci je vypinač a odesílá se metodou get příznak za adresou o tom že se má sepnout daný pin. Důležité ještě je že stránka je automaticky po 2s obnovována refreshem. Potřeboval bych aby při dalším obnovení stránky se příznak z adresy vymazal. Tedy aby odeslání příznaku bylo jen jednorázové jako tlačítko. Jak napsat kod toho tlačítka tak aby při dalším refreší již tam ten příznak nebyl?

Kód: Vybrat vše

 if (ztazeno = 1){
              client.print ("<td><a href=\"/roztahni"\"><button style='background:lightblue; height:100px; width:150px; '>Zaluzie 2 ON</button></a></td>");
              }else if (roztazeno =1){
              client.print ("<td><a href=\"/zatahni\"\"><button style='background:yellow; height:100px; width:150px'>Zaluzie 2 OFF</button></a></td>");
               }
Takhle by to mohlo fungovat ale když se odešle příznak roztahni nebo zatahni tak tam zustane až do další změny a při každém refreši se provede což nechci. Dík za rady :D

DavidO
Příspěvky: 551
Registrován: 01 kvě 2013, 21:27

Re: Pomoc s HTML

Příspěvek od DavidO » 04 pro 2017, 16:08

daton píše:
04 pro 2017, 15:59
Ještě mám dotaz tentokrát na dvě věci. Za prvé potřeboval bych zvětšit písmo na klasický rámec h1 což je největší nadpis asi ještě dvakrát. Zkoušel jsem style = font size:40px (i 200%) ale nějak mi to nefunguje. Máte někdo zkušenosti jak to udělat? Opět je to html v codu arduina.
Chybí ti tam pomlčka:
<span style="font-size:40px;">Čtyřicet px</span> <span style="font-size:200%;">Dvěstě %</span>

daton
Příspěvky: 450
Registrován: 16 bře 2013, 16:12

Re: Pomoc s HTML

Příspěvek od daton » 04 pro 2017, 19:40

No a právě tak jak to píšeš Davide to nefunguje jen to tam musím zadat takto :

Kód: Vybrat vše

client.println ("< style=\"font-size:40px\">")
no ale tohle právě nefunguje a je ani to s těmi procenty...nevím proč...

Odpovědět

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 1 host