Published December 7, 2018

Fun and Creative Way to Demo the HC-SR04

With a Windows tablet, Arduino, and HC-SR04, you can create a graphical caliper to show the distance.

BeginnerProtip30 minutes7,043

Things used in this project

Hardware components

Arduino UNO

Ultrasonic Sensor - HC-SR04 (Generic)

Windows Tablet

Software apps and online services

GEMstudio Pro

Story

Introduction

For many of us, "Blinky" is the first starting point for writing Arduino code. This code demonstration requires no other hardware, besides the Arduino board itself. Once we graduate to hardware interfacing, I would say that the HC-SR04, the ultrasonic sensor measuring device, has to be one of the earliest devices in our Arduino hobby kit.

Just Google, "HC-SR04," and pages of examples show up. But this project will cover taking the usual Arduino serial output:

And graphically representing the distance with this:

Software

You will need to download and install the GEMstudio Pro software from Amulet Technologies. It is a free 30-day trial, but even after 30 days, the software still works, you just get an annoying pop-up message when you launch the program.

You will also need to download and install the Arduino Amulet Communication library. The library and instructions for installing can be found on Github. The repository contains some Arduino examples, so you can take a look and see how the library is used. For further details on the library, you can also take a look at my earlier project.

Arduino Sketch

Using the Newping and Amulet library, the code within the loop, boils down to just 3 lines of code:

hexValue =  byte(sonar.ping_cm());  
myModule.setByte(0, hexValue);
delay(200);

1. Arduino read the value from the HC-SR04

2. The value gets sent to the computer

3. Wait 200ms

Compile and upload this code to the Arduino. We are now finished with the Arduino code. Let's create the GUI on the PC side.

GEMstudio Pro

There are only two images used for this project:

Save these two images on your computer. Then you can use the two images, along with the attached Amulet project file, the caliper GUI can be displayed on your computer screen.

In previous projects of mine, Ive shown videos of how to use GEMustudio. In those videos, I've shown how to create your project and import the images used in the project. So this time, I'm just attaching the GUI project file. The project file has the extension.gemp. It is a readable text file, but makes little sense. Just copy the text below, and save it as caliper.gemp. Then just open this file in the GEMstudio software.

<?xml version="1.0" encoding="UTF-8"?><GEMProject GEMstudioVersion="3.3.0.1" CompilerVersion="V3.3.0.1"><COMPLETE_MODULE><LCD_CONFIG><SIZE>1280 x 800</SIZE><MFG>Amulet</MFG><NAME>HP-STREAM.tft</NAME></LCD_CONFIG><BOARD>HPMK-070C (High Performance Capacitive 7 GEMstarter-kit).board</BOARD><OS_SPECIFIC><PROTOCOL>CRC</PROTOCOL><ROTATION>No</ROTATION><COLOR_DEPTH>32</COLOR_DEPTH><DISABLE_MSD>False</DISABLE_MSD><SECURITY_OVERRIDE>False</SECURITY_OVERRIDE></OS_SPECIFIC></COMPLETE_MODULE><CACHE_FONTS>TRUE</CACHE_FONTS><AMULET_ID>1</AMULET_ID><BAUD></BAUD><BAUD0>115200</BAUD0><BAUD1>115200</BAUD1><BAUD2>115200</BAUD2><BGCOLOR>#FFFFFF</BGCOLOR><BUFFER>Double</BUFFER><DISABLE_MSD>False</DISABLE_MSD><GS_STRING_BUFFER_SIZE>100</GS_STRING_BUFFER_SIZE><GS_COMPRESS>False</GS_COMPRESS><GS_DRAW>True</GS_DRAW><HOST_ID>2</HOST_ID><JPEG>Native</JPEG><NULL_TERMINATE>No</NULL_TERMINATE><SECURITY_OVERRIDE>False</SECURITY_OVERRIDE><STRICT_MODBUS_TIMING>No</STRICT_MODBUS_TIMING><SLAVE_RSP>Full Protocol</SLAVE_RSP><TIMEOUT>0.20</TIMEOUT><TOUCH_PRIORITY>From Top to Bottom</TOUCH_PRIORITY><PAGE_BUFFER_SIZE>0x10000</PAGE_BUFFER_SIZE><TRANSITIONS>Clear Screen With Background Color</TRANSITIONS><UTF8_META_STRINGS>No</UTF8_META_STRINGS><MACRO_FILE></MACRO_FILE><LANG_FILE></LANG_FILE><INTERNALRAM_INIT></INTERNALRAM_INIT><IR_INIT_Include_in_POT_File>FALSE</IR_INIT_Include_in_POT_File><PAGE NAME="Page_1"><PROPERTIES><HEAD><BGCOLOR>#363636</BGCOLOR><GS_DRAW>True</GS_DRAW><TRANSITIONS>Clear Screen With Background Color</TRANSITIONS><FUNCTIONS charPos="451" foldedLines="">&lt;script&gt;
/************************************************************************************
	Name:           move_field
	Arguments:   none
	Returns:         none
	moveField is a public function that is called by the Amulet OS 
************************************************************************************/	
public moveField() 
{
	new int currentx = Amulet:internalRAM.byte(0).value()
	#define currenty	100
	#define width		1280 - 409 //(gaugeWidth - handleWidth)
	#define range		200  //(max - min)
	#define offset		100
	// Limit Check value
   if (currentx &gt; 200)
   	currentx = 200
   currentx = (currentx * (width)) / (range) + offset
	//Move the field by updating its X coordinates, then	
	//redraw gauge/numeric field return to the OS
	Amulet:document.MyNumField_1.disappear()
	Amulet:document.MyNumField_1.setX(currentx)
	Amulet:document.MyNumField_1.forceUpdate()
	Amulet:document.MyNumField_1.reappear()
	Amulet:document.MyGauge_1.forceUpdate()
}
&lt;/SCRIPT&gt;
&lt;META HTTP-EQUIV="REFRESH" CONTENT="0.05;
					URL=GEMscript.moveField();Name=move_field"&gt;
</FUNCTIONS></HEAD></PROPERTIES><BKGND/><BODY><LinearGauge><Name Type="12">MyGauge_1</Name><invisible Type="2" Editable="True">False	True	False</invisible><backgroundImage Type="16" Editable="True">.Images\calipers-bigge2.png</backgroundImage><cacheImage Type="2" Editable="True">True	True	False</cacheImage><href Type="24" Editable="True">Amulet:internalRAM.byte(0).value()</href><max Type="13" Editable="True">200</max><min Type="13" Editable="True">0</min><minAt Type="10" Editable="True">Left	Left	Right</minAt><pointerImage Type="16" Editable="True">.Images\indicator-big.png</pointerImage><updateFreq Type="20" Editable="True">0.2</updateFreq><updateDelay Type="20" Editable="True">0.01</updateDelay><waitForInit Type="2" Editable="True">False	False	True</waitForInit><MidX Type="13">640</MidX><MidY Type="13">233</MidY><Width Type="13">1286</Width><Height Type="13">439</Height></LinearGauge><NumericField><Name Type="12">MyNumField_1</Name><invisible Type="2" Editable="True">False	True	False</invisible><border Type="13" Editable="True">0</border><borderColor Type="11" Editable="True">#000000FF</borderColor><fillColor Type="11" Editable="True">#FFFFFF00</fillColor><font Type="14" Editable="True">Bitstream Vera Sans,  36pt</font><fontColor Type="11" Editable="True">#000000</fontColor><fontStyle Type="18" Editable="True">Bold	Bold	Italic</fontStyle><horizontalAlign Type="10" Editable="True">Right	Center	Left	Right</horizontalAlign><href Type="24" Editable="True">Amulet:internalRAM.byte(0).value()
</href><min Type="13" Editable="True">0</min><max Type="13" Editable="True">200</max><maxFld Type="12" Editable="True">200</maxFld><minFld Type="12" Editable="True">0</minFld><printf Type="12" Editable="True">%3i</printf><updateFreq Type="20" Editable="True">0</updateFreq><updateDelay Type="20" Editable="True">0.01</updateDelay><verticalAlign Type="10" Editable="True">Middle	Bottom	Middle	Top</verticalAlign><waitForInit Type="2" Editable="True">False	False	True</waitForInit><MidX Type="13">592</MidX><MidY Type="13">187</MidY><Width Type="13">122</Width><Height Type="13">62</Height></NumericField></BODY></PAGE></GEMProject>

Once you read in this gemp file, you will need to input the two images.

Code

Arduino Code

#include <NewPing.h>                                                      #include <AmuletLCD.h>


#define TRIGGER_PIN  8  // Arduino pin tied to trigger pin on the ultrasonic sensor.
#define ECHO_PIN     7  // Arduino pin tied to echo pin on the ultrasonic sensor.
#define MAX_DISTANCE 200 // Maximum distance we want to ping for (in centimeters). Maximum sensor distance is rated at 400-500cm.
#define VDP_SIZE 32
//Virtual Dual Port memory used for communicating with Amulet Display 
uint8_t AmuletBytes[VDP_SIZE]  = {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
byte hexValue;
NewPing sonar(TRIGGER_PIN, ECHO_PIN, MAX_DISTANCE); 
// NewPing setup of pins and maximum distance.

AmuletLCD myModule;
void setup() {
 //start communication with Amulet Display at default baud         
 myModule.begin(115200);
 //register our local buffer with Amulet state machine
 myModule.setBytePointer(AmuletBytes,VDP_SIZE); 
}
void loop() {
  hexValue =  byte(sonar.ping_cm());  
	myModule.setByte(0, hexValue);
	delay(200);
 }
//This method automatically gets called if there is any serial data available
//http://www.arduino.cc/en/Tutorial/SerialEvent
void serialEvent() {
   myModule.serialEvent();  //send any incoming data to the Amulet state machine
}

Fun and Creative Way to Demo the HC-SR04

Things used in this project

Hardware components

Software apps and online services

Story

Introduction

Software

Schematics

Standard connection to HC-SR04

Code

Arduino Code

Credits

Philip Ushijima

Comments

Embed the widget on your own site

Fun and Creative Way to Demo the HC-SR04

Fun and Creative Way to Demo the HC-SR04

Things used in this project

Hardware components

Software apps and online services

Story

Introduction

Software

Schematics

Standard connection to HC-SR04

Code

Arduino Code

Credits

Philip Ushijima

Comments

Related channels and tags