Go Down

Topic: ESP8266 Webserver formatting assistance.  (Read 127 times) previous topic - next topic

ecsunix

Mar 20, 2017, 08:16 pm Last Edit: Mar 20, 2017, 08:55 pm by ecsunix
Can anyone tell me how to modify my HTML code to center/increase the size for easier phone use?

My original webpage code:
Code: [Select]
 webPage += "<h1>Treats For Lincoln</h1><p>AM Medicine  <a href=\"deliverA\"><button>Deliver</button></a>&nbsp;<a href=\"resetA\"><button>Reset</button></a></p>";
  webPage += "<h1> </h1><p>PM Medicine  <a href=\"deliverB\"><button>Deliver</button></a>&nbsp;<a href=\"resetB\"><button>Reset</button></a></p>";
  webPage += "<h1> </h1><p>Treat  <a href=\"deliverC\"><button>Deliver</button></a>&nbsp;<a href=\"resetC\"><button>Reset</button></a></p>";
  webPage += "<h1> </h1><p>Kong Toy  <a href=\"deliverD\"><button>Deliver</button></a>&nbsp;<a href=\"resetD\"><button>Reset</button></a></p>";


What I would like to accomplish:
Code: [Select]

<h1 style="text-align: center;"><span style="color: #ff0000;">Treats For Lincoln</span></h1>
<p>&nbsp;</p>
<h2 style="text-align: center;">AM Medicine</h2>
<p style="text-align: center;"><a href="\&quot;deliverA\&quot;"><button>Deliver</button></a>&nbsp; <a href="\&quot;resetA\&quot;"><button>Reset</button></a></p>
<h2 style="text-align: center;">PM Medicine</h2>
<p style="text-align: center;"><a href="\&quot;deliverB\&quot;"><button>Deliver</button></a>&nbsp; <a href="\&quot;resetB\&quot;"><button>Reset</button></a></p>
<h2 style="text-align: center;">&nbsp;Treats</h2>
<p style="text-align: center;"><a href="\&quot;deliverC\&quot;"><button>Deliver</button></a>&nbsp; <a href="\&quot;resetC\&quot;"><button>Reset</button></a></p>
<h2 style="text-align: center;">Kong Toy</h2>
<p style="text-align: center;"><a href="\&quot;deliverD\&quot;"><button>Deliver</button></a>&nbsp; <a href="\&quot;resetD\&quot;"><button>Reset</button></a></p>


Is it possible to stylize this simple web interface with CSS buttons and a background color?

Thanks,

Johnny




PaulS

Code: [Select]
<h1> </h1
What is the point of having empty header tags?

Quote
Is it possible to stylize this simple web interface with CSS buttons and a background color?
Yes, but then you need to serve up the css, too.
The art of getting good answers lies in asking good questions.

spycatcher2k

if you GOOGLE html tutorial - the answer is given to you there.
Drew.
http://www.uk-pcb.co.uk - My UK Based PCB Fab & Assembly Company
Design & Assembly work undertaken - Arduino repairs & testing - PM for details. PM me for non repair or testing, 1 to 1 support and I will charge you - beware!

ecsunix

spycatcher2k,

I have made numerous attempts with the information I obtained from Google.

text align example:   

Code: [Select]
  webPage += "<h1 style="text-align: center;">Treats For Lincoln</h1><p>AM Medicine  <a href=\"deliverA\"><button>Deliver</button></a>&nbsp;<a href=\"resetA\"><button>Reset</button></a></p>";



original code.
Code: [Select]
  webPage += "<h1>Treats For Lincoln</h1><p>AM Medicine  <a href=\"deliverA\"><button>Deliver</button></a>&nbsp;<a href=\"resetA\"><button>Reset</button></a></p>";

Error Message:
Code: [Select]
C:\Users\jp\Documents\Arduino\DogRx_9v5\DogRx_9v5.ino: In function 'void setup()':

DogRx_9v5:72: error: expected ';' before 'text'

   webPage += "<h1 style="text-align: center;">Treats For Lincoln</h1><p>AM Medicine  <a href=\"deliverA\"><button>Deliver</button></a>&nbsp;<a href=\"resetA\"><button>Reset</button></a></p>";

                          ^


I'm obviously missing something.

Thanks

ecsunix

PaulS,

No excuse for the empty header tags, just lack of experience.

At this point I would be happy just cleaning up the HTML.

CSS is probably out of the question.







PaulS

You need to escape the double quotes in the strings:
Code: [Select]
   webPage += "<h1 style=\"text-align: center;\">Treats ...
The art of getting good answers lies in asking good questions.

ecsunix

PaulS,

Thanks again for pointing me in the right direction!

Code: [Select]
  webPage += "<BODY style='background-color:#0a88c2'>";
  webPage += "<h1 style=\"text-align: center;\">Treats for Lincoln</p>";
  webPage += "<h3 style=\"text-align: center;\">Quiet Time (AM)<p><a href=\"deliverA\"><button>Deliver</button></a>&nbsp;<a href=\"resetA\"><button>Reset</button></a></p>";
  webPage += "<h3 style=\"text-align: center;\">Quiet Time (PM)<p><a href=\"deliverB\"><button>Deliver</button></a>&nbsp;<a href=\"resetB\"><button>Reset</button></a></p>";
  webPage += "<h3 style=\"text-align: center;\">Cup Of Treats<p><a href=\"deliverC\"><button>Deliver</button></a>&nbsp;<a href=\"resetC\"><button>Reset</button></a></p>";
  webPage += "<h3 style=\"text-align: center;\">Kong<p><a href=\"deliverD\"><button>Deliver</button></a>&nbsp;<a href=\"resetD\"><button>Reset</button></a></p>";


What is the correct way to change the text color? I cannot seem to get it to work.
Code: [Select]
  webPage += "<h1 style=\"color:#999999'>":"text-align: center;">Treats for Lincoln</p>";

Can anything be done to double or triple the overall size of the text and buttons?

When I open the url on my phone the buttons are so tiny I have to resize the screen to use them.

Then when a button is pressed the screen resizes again.

Thanks


PaulS

Quote
What is the correct way to change the text color? I cannot seem to get it to work.
The color value that you are trying to use is ?

Forget about the Arduino for a while. Create a web page that displays the way you want, on your PC. Determine what the style value(s) need(s) to be. When you want to have the Arduino serve the page, it will be possible to do that.

The ; in the style value is a name = value pair separator. With only text centering, there is no need for the ;, because there is only one name/value pair. When you add color, you have two name/value pairs (color and alignment), so then you need a ; in the style value.

Not considering how the style and value should be embedded in the tag, the style and value part of the statement would look like:
Code: [Select]
style="color:#FF00FF; text-align: center"

Putting the style statement in a h1 tag:
Code: [Select]
<h1 style="color:#FF0000; text-align:center">Frog Lips</h1>


Sending that from the client:
Code: [Select]
client.print("<h1 style=\"color:#FF0000; text-align:center\">Frog Lips</h1>");
The art of getting good answers lies in asking good questions.

PaulS

Quote
Can anything be done to double or triple the overall size of the text and buttons?
That is where the magic of style sheets comes into play. You can serve up different style sheets depending on which browser is making the request. Firefox wants to see your page? Serve up the page, with a link to a style sheet. When the browser sees that style sheet link, it will request the style sheet. Serve up one for a PC.

Safari wants to see your page? Serve up the same page, with the same style sheet link. When the browser sees that link, it will request the style sheet. Serve up one appropriate for use on a iPhone.

Only the Arduino would know that two different contents were served up.

Tailoring the content of the style sheet really isn't an Arduino topic. There are plenty of resources on the web, dealing with developing mobile content, where you can get ideas.

Often, the only thing you need to do is to tell the browser that the content is suitable for rendering on the device the browser is running on, by adding the appropriate Content lines to the header data.
The art of getting good answers lies in asking good questions.

ecsunix

Pauls,

Thanks again for the detailed information! It works.

Code: [Select]
  webPage += "<BODY style='background-color:#0a88c2'>";
  webPage += "<h1 style=\"color:#FBFCFC; text-align:center\">Treats for Lincoln</h1>";
  webPage += "<hr/>";
  webPage += "<h3 style=\"color:#FBFCFC; text-align:center\">Quiet Time (AM)<p><a href=\"deliverA\"><button>Deliver</button></a>&nbsp;<a href=\"resetA\"><button>Reset</button></a></p>";
  webPage += "<h3 style=\"color:#FBFCFC; text-align:center\">Quiet Time (PM)<p><a href=\"deliverB\"><button>Deliver</button></a>&nbsp;<a href=\"resetB\"><button>Reset</button></a></p>";
  webPage += "<h3 style=\"color:#FBFCFC; text-align:center\">Cup Of Treats<p><a href=\"deliverC\"><button>Deliver</button></a>&nbsp;<a href=\"resetC\"><button>Reset</button></a></p>";
  webPage += "<h3 style=\"color:#FBFCFC; text-align:center\">Kong<p><a href=\"deliverD\"><button>Deliver</button></a>&nbsp;<a href=\"resetD\"><button>Reset</button></a></p>";
  webPage += "<hr/>";

Go Up
 


Please enter a valid email to subscribe

Confirm your email address

We need to confirm your email address.
To complete the subscription, please click the link in the email we just sent you.

Thank you for subscribing!

Arduino
via Egeo 16
Torino, 10131
Italy