DEV Community: Elmer Urbina Meneses

Build a Smart Object Detection Alarm with Arduino & HC-SR04 Sensor – Full Tutorial

Elmer Urbina Meneses — Thu, 13 Nov 2025 22:06:02 +0000

Introduction

In this hands-on project, we successfully designed and built a smart object detection alarm using an Arduino UNO and an HC-SR04 ultrasonic sensor. The system detects objects within a predefined range and triggers an audible alert via a buzzer. This project not only demonstrates the use of ultrasonic technology for proximity sensing but also validates the functionality of new hardware components after troubleshooting earlier failures.

Project Overview

Objective: Create a reliable object detection system using ultrasonic waves.
Core Components: Arduino UNO, HC-SR04 sensor, active/passive buzzer, and jumper wires.
Applications: Parking assistance, home security, robotics, and industrial measurement.

Methodology & Components

We used an ultrasonic detection methodology combined with real-time audio feedback.

Hardware Components:

Circuit Diagram
Below is the wiring setup used in the project:

Arduino Code

Here’s the complete code uploaded to the Arduino IDE:

void setup() {
  // Define pin modes
  pinMode(trig, OUTPUT);
  pinMode(echo, INPUT);
  pinMode(buzzer, OUTPUT);
}

void loop() {
  long duration, distance;

  // Clear the trigger pin
  digitalWrite(trig, LOW);
  delayMicroseconds(2);

  // Send a 10µs pulse to trigger
  digitalWrite(trig, HIGH);
  delayMicroseconds(10);
  digitalWrite(trig, LOW);

  // Read the echo pin and calculate pulse duration
  duration = pulseIn(echo, HIGH);

  // Calculate distance in cm
  distance = (duration / 2) * 0.0343;

  // If an object is detected within 10 cm, activate the buzzer
  if (distance < 10) {
    tone(buzzer, 4000); // Emit 4000 Hz tone
    delay(1000);
  } else {
    noTone(buzzer); // Turn off buzzer
  }
}

Key Functionalities Explained

Ultrasonic Detection: The HC-SR04 emits an ultrasonic pulse and measures the time taken for the echo to return.

Distance Calculation: Distance is calculated using the formula:

Distance = (Duration / 2) * 0.0343
where 0.0343 is the speed of sound in centimeters per microsecond.

Alarm Trigger: If an object is detected within 10 cm, the buzzer emits a 4000 Hz tone for 1 second.

Continuous Monitoring: The system runs in a loop, providing real-time detection.

Real-World Applications

Parking Sensors: Warn drivers of nearby obstacles.

Home Security: Detect intrusions near doors or windows.

Robotics: Enable obstacle avoidance in autonomous robots.

Industrial Use: Monitor fill levels in tanks or containers.

Conclusion

This smart alarm system effectively demonstrates the use of ultrasonic sensors for object detection. It confirmed that earlier hardware issues were due to faulty components and not coding errors. The system is reliable, scalable, and ready for enhancements like wireless communication or multi-sensor integration.

AI Transcriptor App

Elmer Urbina Meneses — Sat, 16 Nov 2024 14:48:33 +0000

This is a submission for the AssemblyAI Challenge : Sophisticated Speech-to-Text.

What I Built

I built a web page easy to use, with a responsive design so that it can be used in different devices like laptops, cellphones, tablets, the app is 100% functional, contains an input to upload the file (audio) you want to transcript, a button to start transcribing, once you click this button the transcription will start automatically and the transcribed text will appear just below.

The web application is deployed so that everyone can access and use it, from any device, from anywhere, in summary I have a ready to use web app for transcribing audios using the Universal -2 model for processing the audio.

Demo

The code is under the MIT free license, you can reach the GitHub repository here.
The web app is also deployed on Render, which means it have Usability and Accessibility, you can reach and use the application Here.

The app is 100% functional, you can see it on the screenshot below.

Also the interface is intuitive for anyone who has or not experience using technologies, you can see it on this image.

The application design is responsive, can be accessed and used form any device, which means it have a Good User Experience and Accessibility, you can check it out on these screenshots:

Journey

On the Technology stack I used the traditional HTML, CSS and JS for building a web frontend with Usability and User Experience, In the Backend I used Flask for defining the routes and implementing the logic, I used the Universal-2, AssamblyAI's Model to transcribe the audio, in simple words, the Flask receive the audio, send it to the Assembly AI API (The connection is stablished through the API Key), the API process the audio and send 200 status response.

Possible Problems

Flask save the audio on the uploads folder, so when it is deployed on Render the host don't have access to saving and accessing the file on the directory, which can get into errors and the page will not translate, for solve this issue, is needed to use cloud storage for saving the audio and flask access it from the Cloud and not for the uploads directory.

Quamtum Computing and its importance

Elmer Urbina Meneses — Mon, 17 Jun 2024 22:38:39 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Quantum computing is the implementation of quantum mechanic's principles into computers; they're called quantum computers, their most relevant feature is that they can solve problems faster, and problems than traditional computers can't solve.

Meet the world most beautiful beaches

Elmer Urbina Meneses — Sat, 08 Jun 2024 00:30:25 +0000

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

Demo

Screenshots of the template.

See the code on GitHub

The code have the MIT free licence.

Earth

Elmer Urbina Meneses — Sun, 21 Apr 2024 02:20:32 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

I built a web page with HTML, CSS and JavaScript with some information about the climate change, sustainable practices, and some interesting facts about earth. The goal is promote the sustainable practices, generate awareness on people, and encourage them to care our planet. -->

Demo

You can find the project deployed on GitHub pages here.

Access the code directly on the repository.

Journey

I developed new skills with JavaScript, language that i am actually learning, as well i put in practice some of my knowledges on climate change and carry it to real life projects.

License

The project is under the MIT free license

Translator AI App

Elmer Urbina Meneses — Sat, 06 Apr 2024 15:07:43 +0000

*This is a submission for the Cloudflare AI Challenge.

What I Built

The web application can recognize automatically the language you are using, and will translate to another language, which user can select on the translate to section, it handle four languages.

The main features of the application are:

1.** Text input in which you can enter text**, when click on the button translate, the text you entered will be translated into the language you had selected to translate for

2.** Speech recognition:** you can use the microphone to send a voice message and translate to the selected language

The app handle files translations which means you can upload a file, select the language to translate and the web will do the job of extracting the text, translate it and display the translated message on the translated information section

Demo

You can access to the deployed project on CloudFlare Pages

My Code

See the code

Journey

Is the first time i use APIs, I had been working on AI related projects but with Python, so this project allow me to understand clearer how does the API integrations works, I developed the project alone, I want to fix some bugs, add more functionalities and maybe present the project on my University at the end of the year, so it will be fine to find collaborators and growth network.

Develop a Python (Flask) web app and deploy on pythonanywhere: step by step

Elmer Urbina Meneses — Sat, 06 Apr 2024 05:02:14 +0000

Introduction

In this article I will teach you how to develop and deploy a web site, web page or web app, using Python as programming language, Flask as web framework and pythonanywhere.com as a deployment provider. I will guide you step by step since the process of organizing your code directory on your local machine, and then uploading the code to the python anywhere interface for further deployment, I will not teach you to write code my goal is help you to deploy your works projects to be accessible on internet. I'll suppose that you have a basic understanding of python programming as well as the flask framework.
I am not going to make the program but the article is basic on experience since I deployed my personal portfolio, so I will tell you all the true and the process is proven to work, for evidence you can check here, as well every section is supported with screenshots.
Before we can keep is important to know that deploying on python anywhere is free, but your site's URL will see like: username.pythonanywhere/project-name.com, if you want to add a custom domain you will have to upgrade for the premium plan, the second fact is that you can host only one web for free, if you want to host more than one web you will have to upgrade, and third once you deploy your web you will have to login at least one every three months, if you don't your web will be closed and for instance not accessible through internet. Now that you know this basic information go ahead with the first step.

Organize your project in the local machine

Lets begin with organizing the directories on the computer you are going to work. For develop the code you can use any code editor you like I use PyCharm Community edition, but you can use the on you work comfortable with.
The location in which any files go is crucial, if a file is on the wrong directory it will damage the entire work, so lets see how it should be organized.
The files with the extension .py _will be on the root directory, is the project folder, in the project folder you will have a subfolder named templates in which you will put all the HTML files, go back to the root directory and create another subfolder named static in this subfolder you will put all the CSS, JavaScript files and images. Some people sometimes create subfolders into the static to separate the CSS, JS and images, and it is a good practice for large scale projects in what you need a powerful organization, but in smaller projects it is easier to leave all the CSS, JS and images inside the static directory because when you upload tour files and the deployment site will search for them on the static folder.
You can have many python files or modules as you want, but the only to consider is app.py, so you have to import your modules and handle the logic to make them work into this file.
When you will access your templates on the python code you will use: return render template _(‘index.html'), python automatically will search for index.html into the templates folder, the @app.route(‘/project-name'), the route in this case project-name will the route you will type into the web browser to find your web app.
On the HTML templates when accessing a static file the structure will be like this: url_for{{ (‘static filename=styles’)}}, for example for adding your styles CSS you will update your code to: <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"> . When linking to another Python module your code will be: url_for {{ (‘another-route') }}, it works when you have a system with more than one route, so if you have another section into your web app, for example a second page, in your app.py you will have a route:

 @app.route (‘/second-page’)
Def second-page ():
      return render template (‘second-page.html')
your logic here


if __name__ == '__main__':
    app.run(debug=True)

just down the route following the python programming rules you will write the logic for the second-page functionality.

Important when you link the second-page route on HTML, check that if your route and your def name are different, on the url_for{{(‘second-page') }}, you have to write the def name, because if you use the route it won't work.
Now when you run your html file you will not see your CSS styles applied and your Python backend won't work, to see the result of your code you will run your app.py file, ensure that everything is right and the server is active, after that go to your favorite browser and type the localhost 127.0.0.1:5000/project-name, remember that project name is the route your home or index logic have.

This screenshot show the structure of your project directory, the .idea folder and the README file are generated by the IDE when you are working with Git control.

Now I think you understand important keys of the structure your directory, links and so on must have, once you have your code ready to deploy you can proceed with the next step.

Deploying to pythonanywhere.com

Open your web browser and navigate to the pythonanywhere.com url, if it is the first time you access this site you will have to create an account, you can use your Google account or start one with your Email, use a password you can remember because you will need it to login, once you finished the registration process that is very intuitive, they will send you an Email to the provided email address, so you will have to confirm your account, ensure to finish it successfully and proceed with the next steps.
Once logged in you will be prompted to the Dashboard page, once here you can see your username and a menu with options like Files, Web, Databases. Go to Web. Once here click on add a new web app, you will be promted to enter the name, name it exactly as your app route on the python code, because the name of the directory is which later will be used in the URL and if you name it different you will have problems to load your page, on the frameworks select Flask, on Python version the last available version, and once you finish the process you can go to files for uploading your codes.

Once you have added your new web app, go back to the dashboard using the backward arrow at the top left corner, and go to Files.

Into the file section you can upload your app.py file using the upload button, for uploading your templates and statics go to directories, search for directories and type static, open the folder and upload your files, leave the static folder and repeat the process with the templates files.

Every file upload support a maximum 100 MB file size.

Ensure that the project directory after_ home/_ have the exact name of your app route on the python code, on the contrary you will have problems when loading your page, if the name is not which you want you can try to rename it.

Once you have uploaded your files go back to the dashboard using the backward arrow located at the top left corner of the page, now that you are in the dashboard again you can go to the Web menu, located at the right of the File menu, follow instructions and click on reload page.

When it comes to the first time you have to click on run until 3 months from today, so your page will be automatically deployed.

Python anywhere have another functions like a console to write and run code, but is more comfortable to upload the files directly, the next time you want to update your web, you can click on the file you want to change, it will open the file code, so you can edit it as you want, next click save and reload go back using the backward arrow, go to the web menu and click on reload, now your page will be updated.
You can now check your web on the browser typing the url, generally it comes with the next structure: your_username.pythonanywhere/directory_name.com.

Conclusion

If I accomplished my mission, you know the structure of a python project, the structure of url on the templates, the meaning and functionality of the routes, and finally how to deploy your web projects developed with the Flask framework on python anywhere.

for more information read the Flask documentation to deploying a flask app.