Friday, June 30, 2023

Copper tape (easy obtainable)

For an index to all my stories click this text.



I was building a kind of switch. That is another story all together but for the design I needed copper tape. 

For those not familiar with copper tape: it is indeed a tape that consists of a thin strip copper with an adhesive at the back side. You can use it to build circuits on paper but also to have a conductive material that can be bend easily and cut with scissors.

I did use aluminium tape in the past but there is a problem with it. It conducts great but you can not solder Aluminium tape. Well actually you can solder aluminium but it is such a hassle that I quit doing that all together.



Copper tape on the other hand solders easily.



Next to that copper tape adheses very well to paper and to my 3D printed designs and that is just what I needed.

The copper tape I used was .5cm (about 1/5 inch) wide and that was not wide enough for my purpose. Next to that I did not have enough off the stuff. So I started a search.

Copper tape can be bought at several electronic shops and is sold for building all kinds of paper circuits. Just search google for paper circuits and you will stumble upon many projects suitable for building with your kids.

And then I found something I never knew. Well it's a big world so I always find things I never knew. But this really struck me.



Copper tape is used in gardens. It is used to prevail snails to cross lines. So people put copper tape on their outside planters and the snails will not cross it. It is an animal friendly repellent. My local garden center actually sells it !!!



The copper tape they sell is shorter in length but a lot wider. It is more then an inch wide. It is about 1.18 inch. That is actually fine as I can cut it to the size I want with plain scissors.



And here you see the original tape and the new bought tape in a test phase. As you can see they adhere very well to paper and soldering the tape is a piece of cake.

To connect the ends of the wire to my breadboard I use paperclips as shown in this story:
http://lucstechblog.blogspot.com/2015/03/diy-breadboard-cables-i-am-doing.html

This shows that you can find components for your projects in the strangest places.

Till next time
Have fun

Luc Volders







Thursday, June 8, 2023

Javascript tips

 For an index to all my stories click this text

I like to introduce my new website: Javascript Tips

https://javascript-tips.weebly.com/

Lately I have been digging deep into Javascript. Javascript is very underestimated by many electronics hobbyists. They do not see the need for learning this language.
But Javascript is more important than you might realise.

In the ESP8266 and ESP32 world we are used to build web-servers for switching lights, displaying sensor data etc. But you can make the web-pages much more attractive by using some Javascript. I will be doing a multiple story series on this.

Then there is Javascript in your browser. In EVERY browser. For writing Javascript programs you do not need anything fancy. A simple editor like wordpad already does the trick. And then you can run your program on any computer that has a web-browser. So yes it will also work on your phone and tablet next to your PC.

Here are two examples.

https://lucvolders.github.io/htmltest01/



This site shows a gauge with a button and that gauge will display a new value each time you press the button.

https://lucvolders.github.io/htmltest02/



This site is a simple reaction test. A red dot appears on the screen and you have to point your mouse on it and click. The webpage shows at the upper left corner the best time and the last time. Before you start resize the web browsers page to a smaller size if you like. The program adjusts automatically to any screen size. It works on your phone and tablet too.

Both web-sites show how easy it is to develop programs in Javascript.

And last but not least there are web-services that can turn your Javascript program into a full blown Android App. This means that building a Javascript webpage and uploading it to a web-service (free services available) will get you a full-blown App for your phone. I will be doing some stories about this on this web-log later on.

So what's the new website about.

Well it is bringing you tips for programming in Javascript.
No complete programs but just little code snippets that make programming a lot easier. Almost every programmer runs into programming challenges like How do I :
- check for double elements in an array
- convert a CSV file to an array
- compare dates
- convert seconds to hours and minutes
- call a function with an unknown number of argusments
- activate a link on a page at a certain time
- count the amount of digits in a number
- test if objects are fully identical
- getting the numbers out of a text
- generate a password of x characters

etc. etc. etc.

At this moment there are more than 515 tips on the site and I am adding 1 each day.

So there will be hundreds of tips ???

Yes at this moment there are. At a certain point there will be no more tips added and even worse the site will vanish all together. And why is that ?? Well  I have put them all in a book. And the book contains all tips. So when the book is finished (and that might go faster as you think) and in print the website will cease to exist.

At this moment the Dutch book is already available. The English version of the book will become available shortly though Amzon and your local bookstore. It is now already available through my printers bookshop:


Click here to by the book on Amazon (and support me a bit)


So get the tips while you can and re-visit often to get more.

Javascript-tips.weebly.com.

Till next time.
Have fun.

Luc Volders



Friday, June 2, 2023

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.


Click here to buy the book

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