Notifications
Clear all

RP2040 question on coding for wifi & what will appear on screen- html, CSS, javascript

18 Posts
5 Users
9 Likes
1,419 Views
Larry Manson
(@larry-manson)
Eminent Member
Joined: 2 years ago
Posts: 23
Topic starter  

In the RP2040 Webserver AP mode example:

Is this strictly html or is it some combination of html, CSS, and javascript?

Thanks!

// the content of the HTTP response follows the header:

            client.print("<style>");
           client.print(".container {margin: 0 auto; text-align: center; margin-top: 100px;}");
           client.print("button {color: white; width: 100px; height: 100px;");
           client.print("border-radius: 50%; margin: 20px; border: none; font-size: 20px; outline: none; transition: all 0.2s;}");
           client.print(".red{background-color: rgb(196, 39, 39);}");
           client.print(".green{background-color: rgb(39, 121, 39);}");
           client.print(".blue {background-color: rgb(5, 87, 180);}");
           client.print(".off{background-color: grey;}");
           client.print("button:hover{cursor: pointer; opacity: 0.7;}");
           client.print("</style>");

            client.print("<div class='container'>");
           client.print("<button class='red' type='submit' onmousedown='location.href=\"/RH\"'>ON</button>");
           client.print("<button class='off' type='submit' onmousedown='location.href=\"/RL\"'>OFF</button><br>");
           client.print("<button class='green' type='submit' onmousedown='location.href=\"/GH\"'>ON</button>");
           client.print("<button class='off' type='submit' onmousedown='location.href=\"/GL\"'>OFF</button><br>");
           client.print("<button class='blue' type='submit' onmousedown='location.href=\"/BH\"'>ON</button>");
           client.print("<button class='off' type='submit' onmousedown='location.href=\"/BL\"'>OFF</button>");
           client.print("</div>");
 

   
Quote
DroneBot Workshop
(@dronebot-workshop)
Noble Member Admin
Joined: 4 years ago
Posts: 1174
 

Hi Larry

I reformatted your post, please check out the instructions for including code in your post for future reference.

And by reformatting it I think I've answered your question at the same time!  I separated the CSS and HTML/JavaScript for you to make it more apparent.

Hope that helps!

 

😎

Bill

"Never trust a computer you can’t throw out a window." — Steve Wozniak


   
Larry Manson reacted
ReplyQuote
MadMisha
(@madmisha)
Reputable Member
Joined: 3 years ago
Posts: 348
 

@larry-manson

The tradition CSS in it's own file won't work but including CSS in the HTML(internal CSS or inline) will work.

I take back that first part. I looked it up and you can but you need to store it somewhere. Link here

 

I don't know much about using java on Arduino but here is a link to a place that claims you can. Link here


   
Larry Manson reacted
ReplyQuote
Larry Manson
(@larry-manson)
Eminent Member
Joined: 2 years ago
Posts: 23
Topic starter  

@dronebot-workshop

Thanks!

Sorry I didn't read the code submittal post first. 

 

So as I understand the first part is CSS and the second part is a combination of html & javascript?

 

Thanks


   
ReplyQuote
DaveE
(@davee)
Noble Member
Joined: 2 years ago
Posts: 798
 

@larry-manson Hi Larry,

It looks like all three to me. (And I hope Bill won't mind if I amplify the headstart he has kindly provided.)

My 'goto' website on such matters is w3schools.com to look up the syntax and meaning. It has sections on all three, and more. The magnifying glass icon towards the top right of its webpage is a handy Google powered search facility for any snippets of code you don't recognise.

I recommend you start by stripping off the client.print stuff, so it's easier to see what will be sent:

 <style>
.container {margin: 0 auto; text-align: center; margin-top: 100px;}
button {color: white; width: 100px; height: 100px;
border-radius: 50%; margin: 20px; border: none; font-size: 20px; outline: none; transition: all 0.2s;}
.red{background-color: rgb(196, 39, 39);}
.green{background-color: rgb(39, 121, 39);}
.blue {background-color: rgb(5, 87, 180);}
.off{background-color: grey;}
button:hover{cursor: pointer; opacity: 0.7;}
</style>

<div class='container'>
<button class='red' type='submit' onmousedown='location.href=\"/RH\"'>ON</button>
<button class='off' type='submit' onmousedown='location.href=\"/RL\"'>OFF</button><br>
<button class='green' type='submit' onmousedown='location.href=\"/GH\"'>ON</button>
<button class='off' type='submit' onmousedown='location.href=\"/GL\"'>OFF</button><br>
<button class='blue' type='submit' onmousedown='location.href=\"/BH\"'>ON</button>
<button class='off' type='submit' onmousedown='location.href=\"/BL\"'>OFF</button>
</div>

 

Then items:

  • like <style> and <div> are HTML
  • items like color: white; width: 100px; height: 100px; are CSS (Cascading Style Sheets)
  • items location.href are Javascript

I hope this will help you make sense of the code.


   
ReplyQuote
MadMisha
(@madmisha)
Reputable Member
Joined: 3 years ago
Posts: 348
 

@larry-manson

Yes. I also assume that you could send out any type of code that would be used on any website. As long as you spit out the correct code in your strings and in the correct order, anything can go in there(Since you are building the HTML script). The Arduino will send the text and the end users browser will use it as intended. Even if the Arduino can't understand it, it doesn't matter, it's all handled on the other side anyways.

The only thing that would not cover is things that need to communicate back. It's not that you can't, you would just need to account for it and handle it properly.


   
Larry Manson reacted
ReplyQuote
DroneBot Workshop
(@dronebot-workshop)
Noble Member Admin
Joined: 4 years ago
Posts: 1174
 

@larry-manson

Posted by: @madmisha

Even if the Arduino can't understand it, it doesn't matter, it's all handled on the other side anyways.

The Arduino doesn't need to "understand it" any more than it needs to understand a statement like this:

Serial.println("My name is Larry");

I'm just telling it to print whatever it finds within the brackets and send the output to the serial port, where I can open the serial monitor and see the text "My name is Larry".  The Arduino doesn't "know" what "My name is Larry" means, it is just following instructions and sending the text to the appropriate place whenever it encounters this statement.

The statements in the code you provided work the same way. 

client.print(".green{background-color: rgb(39, 121, 39);}");

In this case, it just sends the text ".green{background-color: rgb(39, 121, 39);}" to the client, or more specifically, the client's web browser.

Posted by: @madmisha

The only thing that would not cover is things that need to communicate back

I recently did a video about the Arduino Nano RP2040 Connect board in which I explained exactly how this works, in fact, I almost moved this post into the thread devoted to this video but I was too lazy LOL!

You'll find the Web Server AP Point demo starting at the 15:00 point, and I go over how the JavaScript onmousedown events append some characters to the return URL string so that the code can decode which button was pressed and act accordingly, which in this case means turn on or off a segment of the RGB LED.

So if, for example, you click the RED ON button you will trigger an onmousedown event that appends "RH" to the return URL string.  And the following code detects this and turns on the red segment of the LED.

if (currentLine.endsWith("GET /RH")) {

          digitalWrite(LEDR, HIGH);

        }

Hope that helps, you might also want to check out the article that I wrote to accompany the video, as it explains it in more detail.

😎

Bill

"Never trust a computer you can’t throw out a window." — Steve Wozniak


   
ReplyQuote
Larry Manson
(@larry-manson)
Eminent Member
Joined: 2 years ago
Posts: 23
Topic starter  

@dronebot-workshop

Bill, 

Thank you so much.  I have re-watched that segment of the video and re-read the article.

Your videos & articles on the RP2040 are very helpful.  

One of the first things I do after I do one of the examples is try to modify the example in some way or try to combine it with some other video or concept.

When I accomplish this I start to feel relatively comfortable that I can integrate features as I need to.

But my approach makes me dig in and ask questions in areas where I have little experience. Html has been outside my experience set for a decade or so. CSS & javascript were never in my experience.

Just finding out names of used items often provides me enough clues to find out where to learn.

 

Again Thanks!

Larry

 

 

 

 

 

 

 

 

 


   
DaveE reacted
ReplyQuote
DroneBot Workshop
(@dronebot-workshop)
Noble Member Admin
Joined: 4 years ago
Posts: 1174
 

@larry-manson

Posted by: @larry-manson

One of the first things I do after I do one of the examples is try to modify the example in some way or try to combine it with some other video or concept.

When I accomplish this I start to feel relatively comfortable that I can integrate features as I need to.

That is the perfect way to learn something!

I would suggest that you try and add two more buttons to the web-based interface. The Arduino Nano RP2040 connect has an additional LED, the amber "built-in" LED, that is addressed in the same fashion as the LED in the famous "Blink" sketch.

You can do the following to control it:

  • Decide on the color of your new button, I suggest amber or orange. Define a class (I.e. .amber) for it in the CSS section of the code. To help you out, amber is 255, 191, 0 in decimal RGB.
  • Create two new buttons by copying the Javascript and HTML code for an existing button. Change the class to the new one you just defined for one button, the other will be class "off". This sets the colors of the buttons on the interface.
  • Change the two-letter code on your new buttons to something like "AH" (amber high) and "AL" (amber low).
  • In the return section (the section that examines the GET URL data) create a couple of new "if" statements for the two new buttons, for example:
if (currentLine.endsWith("GET /AH")) {

          digitalWrite(LED_BUILTIN, HIGH);

        }

Then give it a try and see if you can also control the built-in amber LED.

😎

Bill

 

 

"Never trust a computer you can’t throw out a window." — Steve Wozniak


   
Larry Manson reacted
ReplyQuote
chucketn
(@chucketn)
Eminent Member
Joined: 3 years ago
Posts: 25
 

Hey Bill, Just received my Nano RP2040 and am trying to follow the article you wrote. I copy and past the code for the web interface from the article to the Arduino IDE, but it won't compile. Any chance I could download the sketch?

Duh! I just read to the end of the article and found the link to the zip file of the code...


   
ReplyQuote
chucketn
(@chucketn)
Eminent Member
Joined: 3 years ago
Posts: 25
 

I downloaded and unzipped the code. Web Server code will not compile.

 


   
ReplyQuote
Larry Manson
(@larry-manson)
Eminent Member
Joined: 2 years ago
Posts: 23
Topic starter  

@chucketn

I have been using the 2.0.0 -beta.7

It is important to select your micro in the box center top.

I had difficulty with the earlier IDE on the RP2040. I can't recall the difficulty anymore.  I'm not real happy with the 2.0.0 because it gives little indication it is compiling and the time to compile seems inconsistent. But it seems to work.

Maybe I screwed up on these steps -- https://dronebotworkshop.com/arduino-nano-rp2040-connect/#Boards_Manager

 

Good Luck,

 

Larry


   
ReplyQuote
chucketn
(@chucketn)
Eminent Member
Joined: 3 years ago
Posts: 25
 

@larry-manson Can I install and run IDE 2.0 on the same computer with 1.8.15?

Chuck

 


   
ReplyQuote
Larry Manson
(@larry-manson)
Eminent Member
Joined: 2 years ago
Posts: 23
Topic starter  

@chucketn

I am running both on the same Windows 10 computer.

 

Larry


   
ReplyQuote
MadMisha
(@madmisha)
Reputable Member
Joined: 3 years ago
Posts: 348
 

@chucketn

What error is reported when you try to compile?


   
ReplyQuote
Page 1 / 2