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

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

@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

@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

@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.

@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

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

@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

@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

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...

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

@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

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

Chuck

@chucketn

I am running both on the same Windows 10 computer.

Larry

@chucketn

What error is reported when you try to compile?