An ESP32 clock

Lately I’ve been trying to design and produce a Wifi/Bluetooth connected clock. The ESP32 is a good candidate, since it has two cores and a low power co-processor, making multitasking quite achievable. The build process The microcontroller code uses the esp-idf build system. These are additional steps that: Recompile protobufs if needed. These are used over MQTT Generate SPIFFS image Add SSL certificates to the binary post-build Embed NVS data (e. [Read More]

Raspi@Home – Domotics with a Raspberry Pi

Introduction Hi, this is a project I’ve worked on for some time. It consists of a raspberry pi connected to several sensors + wifi internet, which alerts me on my Android phone of several events. The reasons I decided to start this project are: – I wanted to learn a little of electronics, the practical way (I’ve come to love it!) – I’m a little bit hard of hearing, enough to miss from time to time the intercom/doorbell sound – It’s fun! [Read More]

RaspiBot

This project is about creating a robot controlled by a Raspberry Pi. The main challenge of the project is to identify obstacles in the robot’s path, using a webcam and the limited computing resources of the credit card sized PC. And do it all in real time. I’ve researched and experimented with several computer vision techniques, such as stereo vision, motion quantization, binocular and monocular vision, background removal. The software used is the excellent computer vision library OpenCV and the chosen programming language is Python. [Read More]

HTML5 Canvas loading spinner

Some time ago I was looking for an HTML5 spinner to include in my project. I found some interesting tools such as loading.io, but as usual I wanted to create a custom one. Something barebones, simple and lightweight. CanvaMap. So here is the code. The javascript part is the following: 1function Spinner(element) { 2 this.canvasElement = document.getElementById(element); 3 this.ctx = this.canvasElement.getContext('2d'); 4 this.ctx.translate(0, 0); 5 this.ctx.scale(1, 1); 6}; 7 8Spinner.prototype.drawLoadingAnimation = function() { 9 var r=255, g=255, b=255; //Color 10 var main_radius = 20; //Radius of the spinner 11 var small_radius = 3; //Radius of the small circles 12 var extension = Math. [Read More]

HTML5 Canvas map framework: CanvaMap

CanvaMap is a JavaScript program, which takes advantage of HTML5 and Canvas to display a map with several overlays. It’s very small and weights just 8.8kB. CanvaMap is in Alpha stage, so it has bugs, the code is not well documented and some parts of it should be restructured; but for basic tasks it’s quick and easy to deploy. It can also be used to display large images as it offers zoom-in/out and navigation capabilities. [Read More]