Correct HTML Syntax

Using Arduino Project Guidance
1

Hello Group!

I am using an Arduino Wifi Rev2 board and I am trying to orient my range slider to be vertical using the following code. The slider displays however it is displayed horizontally. My code is posted below and thanks in advance for the help.

client.println("<body>");
client.println("input[type=range][orient=vertical]");
client.println("{");
client.println("writing-mode: bt-lr;");
client.println("-webkit-appearance: slider-vertical;");
client.println("width: 8px;");
client.println("height: 175px;");
client.println("padding: 0 5px;");
client.println("}");
client.println("<input type=\"range\" orient=\"vertical\" id=\"range\" min=\"0\" max=\"9\" step=\"1\" value=\"3\">"); 
client.println("</body>");

The above html code should work and it does display the slider. The rest of the code is printed as just text on the webpage.

2

I think you need to put and around your CSS

3

did it for you

<body>

<style>
.classs_name  {
 writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
 width: 8px;
 height: 175px;
 padding: 5px;
}

</style>

<input type="range" class="classs_name" orient="vertical" id="derry" min="0" max="9" step="1" value="3">

</body>

to make life easier, use progmem to store your string, and read it when you invoke

client.println(read_string);

i am pretty sure you know how to deal with progmem

that way you will be able to test your script using a raw html file (eg: my_script.html) and when it works, you paste the code back into progmem

4

I reckon the w3schools website is a good resource for all things to do with web programming - HTML, CSS, Javascript etc.

...R

5

@johnwasser: adding style did the trick
@Robin2: That website is in my bookmarks
@kassimsamji: Thanks for the edited code that helped as well.

Thanks for the help. I do alot of web programming and now combining the two with arduino has been an adventure sometimes a second pair of eyes helps alot!

6