« previous next »
Pages: [1]   Go Down

Author Topic: HTML / possibly CSS help  (Read 2148 times)

0 Members and 1 Guest are viewing this topic.

Offline MjolinorTopic starter

  • Frequent Contributor
  • **
  • Posts: 328
  • Country: gb
HTML / possibly CSS help
« on: April 04, 2020, 12:30:36 pm »

I have a very simple web page running on an ESP8266 to control the power feed on my milling machine.

It all works fine and when I use my desktop to control it I can see it no problem.

The problem is that when I look at it in Chrome on an Android phone though I can make the text legible without zooming all the buttons and text entry boxes are stupid little. I can zoom the page OK on the phone and see them but once I enter the zoom goes back to 100%.

This is the page:
Quote
<font size='18'> DRO <form action = 'msg5'><input type='text' name='msg5' size=8 value='30.00000' size=10 autostepdir> Distance  <action = 'Submit'>

<input type='submit' name = 'LR' value='<'>  <action = 'Submit'><input type='submit' name = 'LR' value='>'><font size='18'>


 <form action = 'msg6'><input type='text' name='msg6' size=8 value='2500.00000' size=10 autostepdir> Speed  <action = 'Submit'>

<input type='submit' name = 'LRS' value='<'>  <action = 'Submit'><input type='submit' name = 'LRS' value='>'>   </font>

I added a few new lines to make it readable.

This is what it looks like:

I just need to make the text boxes bigger either by making them bigger or fixing a zoom value to the whole page. T'interweb reckons I should use CSS but having never even heard of it I am finding it difficult to know where one sticks these CSS instructions. Do they just go anywhere in the HTML or do they need to be in a separate file somewhere. I have no idea how to add a separate file to an ESP 8266 web server, as far as I know you can only have one.
Logged
 

Offline sleemanj

  • Super Contributor
  • ***
  • Posts: 3168
  • Country: nz
  • Professional tightwad.
    • The electronics hobby components I sell.
Re: HTML / possibly CSS help
« Reply #1 on: April 04, 2020, 12:48:58 pm »
Code: [Select]
<style type="text/css">
input { font-size: 20px; }
</style>

In the html anywhere is fine
Logged
~~~
EEVBlog Members - get yourself 10% discount off all my electronic components for sale just use the Buy Direct links and use Coupon Code "eevblog" during checkout.  Shipping from New Zealand, international orders welcome :-)
 
The following users thanked this post: Mjolinor, MK14

Offline MjolinorTopic starter

  • Frequent Contributor
  • **
  • Posts: 328
  • Country: gb
Re: HTML / possibly CSS help
« Reply #2 on: April 04, 2020, 12:58:17 pm »
Quote from: sleemanj on April 04, 2020, 12:48:58 pm
Code: [Select]
<style type="text/css">
input { font-size: 20px; }
</style>

In the html anywhere is fine


Perfect. I should have asked two days ago. :)
Logged
 

Offline T3sl4co1l

  • Super Contributor
  • ***
  • Posts: 22435
  • Country: us
  • Expert, Analog Electronics, PCB Layout, EMC
    • Seven Transistor Labs
Re: HTML / possibly CSS help
« Reply #3 on: April 04, 2020, 10:08:26 pm »
Code: [Select]
You may want to put a
    <meta name=viewport content="width=device-width, initial-scale=1">
[/code]
in the <head>.  This tells mobile devices not to scale the page -- if it's missing, the browser assumes it's a naive desktop-formatted page and tries to format it at typical desktop width and scale.

Hm, I forget if text height specified by exact measurement (pixels) overrides this or not.  Probably not in Chrome (and most modern browsers), because it zooms the whole page, not just changes text and image size..?

Tim
Logged
Seven Transistor Labs, LLC
Electronic design, from concept to prototype.
Bringing a project to life?  Send me a message!
 
The following users thanked this post: MK14

Offline Nominal Animal

  • Super Contributor
  • ***
  • Posts: 8349
  • Country: fi
    • My home page and email address
Re: HTML / possibly CSS help
« Reply #4 on: April 04, 2020, 10:38:12 pm »
I recommend the following "structure" for web pages:

  <!DOCTYPE html5>
  <html>
   <head>
    <title> Page Title </title>
    Meta elements
    <style type="text/css">
     CSS definitions
    </style>
    <script type="text/javascript">
     JavaScript
    </script>
   </head>
   <body>
    Body Content
   </body>
  </html>

The indentation is there for illustration; you can either keep it or remove the indentation.

Meta elements you might choose to use includes <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> or <meta charset="UTF-8"> (which tells the browser the document uses UTF-8; otherwise, if you save the page as a local file, browsers assume it uses some "legacy encoding", like Windows-1252 or ISO 8859-1), and the <meta name="viewport" content="width=device-width, initial-scale=1"> T3sl4co1l suggested.

If you don't have any CSS, omit the <style type="text/css"></style>.

If you don't need any JavaScript, omit the <script type="text/javascript"></script>.

Finally, you might wish to use the W3 validator facilities at https://validator.w3.org/ to see what it says about your HTML code.  I disagree with some of its warnings (especially "... is not needed and should be omitted" and "Consider adding ..." ones), but it is definitely a nice sanity check.
Logged
 
The following users thanked this post: MK14

Offline MjolinorTopic starter

  • Frequent Contributor
  • **
  • Posts: 328
  • Country: gb
Re: HTML / possibly CSS help
« Reply #5 on: April 06, 2020, 08:51:39 am »
Quote from: Nominal Animal on April 04, 2020, 10:38:12 pm
I recommend the following "structure" for web pages:

  <!DOCTYPE html5>
  <html>
   <head>
    <title> Page Title </title>
    Meta elements
    <style type="text/css">
     CSS definitions
    </style>
    <script type="text/javascript">
     JavaScript
    </script>
   </head>
   <body>
    Body Content
   </body>
  </html>

The indentation is there for illustration; you can either keep it or remove the indentation.

Meta elements you might choose to use includes <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> or <meta charset="UTF-8"> (which tells the browser the document uses UTF-8; otherwise, if you save the page as a local file, browsers assume it uses some "legacy encoding", like Windows-1252 or ISO 8859-1), and the <meta name="viewport" content="width=device-width, initial-scale=1"> T3sl4co1l suggested.

If you don't have any CSS, omit the <style type="text/css"></style>.

If you don't need any JavaScript, omit the <script type="text/javascript"></script>.

Finally, you might wish to use the W3 validator facilities at https://validator.w3.org/ to see what it says about your HTML code.  I disagree with some of its warnings (especially "... is not needed and should be omitted" and "Consider adding ..." ones), but it is definitely a nice sanity check.

I cannot format it like that. What I pasted was from the page source in the browser. On the device the web page definition is like this:
Quote
String CSS1 = "<style type='text/css'>";
String CSS2 = "input { font-size: 100px; }";
String CSS3 = "</style>";


String sizestart = "<font size='22'>";
String sizeend = "</font>";


String Move1 =     " DRO <form action = 'msg5'><input type='text' name='msg5' size=8 value='";
String Move2 =     "' size=10 autostepdir>   ";

String left = "
<action = 'Submit'><input type='submit' name = 'LR' value='<'>  ";
String right = "Distance  <action = 'Submit'><input type='submit' name = 'LR' value='>'>";

// Added for speed
String Speed1 =     "


 <form action = 'msg6'><input type='text' name='msg6' size=8 value='";

String Speed2 =     "' size=10 autostepdir>  ";

String leftS = "
<action = 'Submit'><input type='submit' name = 'LRS' value='<'>  ";
String rightS = " Speed  <action = 'Submit'><input type='submit' name = 'LRS' value='>'>   ";
It is assembled with this:
Quote
  String webstring;

    webstring =
    String(CSS1)
    String(CSS2)
    String(CSS3)
   
    String(sizestart)
    String(Move1) String((float)msg[5], 5)
    String(Move2)

    String(left)
    String(right) //String((float)msg[5], 5)
// Added for speed
    String(Speed1) String((float)msg[6], 5)
    String(Speed2)

    String(leftS)
    String(rightS) //String((float)msg[6], 5);
    String(sizeend);
  server.send(200, "text/html", webstring);
  }

And boy did that lot bake my noodle. :)

Edit: Hmm, it seems that the forum took all the < br > and plus signs out, never mind, I am sure you get the gist of it. I am also very very limited for space on the ESP12 so if it works, it will do.

I think it is only a middle step anyway,once I pluck up the courage I will fire up Android Studio and make an app for it. (groan)
« Last Edit: April 06, 2020, 08:57:50 am by Mjolinor »
Logged
 

Offline Nominal Animal

  • Super Contributor
  • ***
  • Posts: 8349
  • Country: fi
    • My home page and email address
Re: HTML / possibly CSS help
« Reply #6 on: April 06, 2020, 12:51:25 pm »
Quote from: Mjolinor on April 06, 2020, 08:51:39 am
I cannot format it like that. What I pasted was from the page source in the browser. On the device the web page definition is like this:
Ah, right.  Sorry, I forgot this was on the ESP8266.  :-[
Logged
 
Pages: [1]   Go Up
« previous next »

Share me

Digg  Facebook  SlashDot  Delicious  Technorati  Twitter  Google  Yahoo
Smf

 


EEVblog® Main Site EEVblog® on Youtube EEVblog® on Twitter EEVblog® on Facebook EEVblog® on Odysee