lucstechblog: HTML Buttons with images: enhance your webpage

For an index to all my stories click this text

As you might know I wrote a book about the Raspberry Pi Pico W.

In the book the last chapter describes how to build a webserver. The webserver puts some sensor readings on a webpage. It also puts some buttons on the webpage that set leds attched to the Pico W on and off.

This is how the webpage looks. It is fully functional but the buttons are rather dull. We are going to change that.

First thing is to find some nice looking buttons and I found them on this website: https://www.pngfind.com/
You can find loads of graphics there and they are free for personal use.

I found these buttons on the site. You can download them yourself using this link:
https://www.pngfind.com/mpng/hRJTx_original-png-clip-art-file-power-off-buttons/

I loaded this file in The Gimp and made 2 new files with only the black and the red round buttons. The Gimp is a free to use image manipulation program. Not unlike Photoshop, but then free. You can find it here: https://www.gimp.org/

The webpage we are building needs to get the images from a file or a website. I chose for saving the images to a website.

postimage.org is a webpage where you can upload your images without the need for an account or even the need to log in. You can give each image an expiring date and I chose for no expiration.

After uploading your image the site gives you a link to it. For convenience I give you here both links for the black and the red button so you can download and use them yourself if you like.

For the black button the link is: https://postimg.cc/JDsFgks6/59767afa
For the red button the link is: https://postimg.cc/tZ1B4Gt2/93d146d1

The last step is to embed the images as a button on the webpage. There are several ways to do that. I chose this one:
<button onclick="myFunction()"><img src="your image path here.png"></button>

And this is what the new website should look. As you can see I only replaced the buttons for the first led. You could also do this for the second led.

You can use this in any programming language like the Arduino IDE, MicroPython and Javascript.

In my book I only use MicroPython. And for the readers of the book I herebye give the complete HTML code for the last program (page 264) in the book:

def webpage(stateled1,stateled2):
    sensor.convert_temp()
    temperature = sensor.read_temp(roms[0])

    html = ''
    html = html + '<!DOCTYPE html>'
    html = html + '<meta http-equiv="refresh" content="15">'
    html = html + '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
    html = html + '<html style="background-color:PowderBlue;">'
    html = html + '<h1 style ="color: red">Pico W control page</h1>'
    html = html + '<br>'
    html = html + '<FORM action=\"/\" method=\"post\">'
    #html = html + '<button type=\"submit\" name=\"butledon\" value=\"lighton1\" onclick=\'update()\'>Set Led 1 ON</button>'
    html = html + '<button type=\"submit\" name=\"butledon\" value=\"lighton1\"  onclick=\'update()\'"><img src="https://i.postimg.cc/d16KhRwY/butblack2.png" width="50" height="50"></button>'
    html = html + '<br>'
    #html = html + '<button type=\"submit\" name=\"butledoff\" value=\"lightoff1\" onclick=\'update()\'>Set Led 1 OFF</button>'
    html = html + '<button type=\"submit\" name=\"butledoff\" value=\"lightoff1\"  onclick=\'update()\'"><img src="https://i.postimg.cc/KzfwQZKS/butred2.png" width="50" height="50"></button>'
    html = html + '<br>'
    html = html + '<br>'
    html = html + '<button type=\"submit\" name=\"butledon2\" value=\"lighton2\" onclick=\'update()\'>Set Led 2 ON</button>'
    html = html + '<br>'
    html = html + '<button type=\"submit\" name=\"butledoff2\" value=\"lightoff2\" onclick=\'update()\'>Set Led 2 OFF</button>'
    html = html + '<br>'
    html = html + '</form>'
    html = html + '<br>'
    html = html + '<p>LED 1 is ' + stateled1 + ' </p>'
    html = html + '<p>LED 2 is ' + stateled2 + ' </p>'
    html = html + '<br>'
    html = html + 'The temperature is '
    html = html + str(temperature)
    html = html + '<br>'
    html = html + 'The LDR value is '
    html = html + str(LDR.read_u16())
    html = html + '<br>'
    html = html + 'The button value is '
    html = html + str(buttonpin.value())
    html = html + '<br>'
    html = html + '</html>'
    return (html)

There is a running series on this weblog on building html webpages with the ESP32. In an upcoming story I'll show you how this is done in the Arduino IDE with an ESP8266 or ESP32

Till next time
Have fun

Luc Volders

Friday, June 2, 2023

HTML Buttons with images: enhance your webpage