Tweet
Tutorial Video
Hardware
- PHPoC Blue (+ USB WLAN) or PHPoC Black (+ Ethernet cable)
- Micro USB to USB Cable (to upload source code to PHPoC Device)
- Piezo Buzzer
- Jumper wires
About Buzzer
Buzzer is used to make sound, tone and alerts. The buzzer used in this example includes three pins:
- VCC pin.
- GND pin.
- Signal pin (receives the control signal from controller).
- If generating a square wave of the specified frequency (and 50% duty cycle) on signal pin of buzzer, buzzer makes a specific tone corresponding to the frequency.
- If controlling the signal pin of buzzer to HIGH (3.3V to 5V), of buzzer makes constant sound.
- If controlling the signal pin of buzzer to LOW (0V), of buzzer keeps silent.
- This example shows how to simply control buzzer by controlling the signal pin of buzzer to HIGH or LOW to generate sound or mute, respectively. To do so, It just needs to connect an digital output pin of PHPoC devices to the signal pin of buzzer and control it. For advanced control, use can use hardware/software timer to generate a square wave of the desired frequency.
- Grove buzzer (for more convenience, use it in combination with PHPoC Grove Expansion Board).
- Piezo buzzer
Wiring Diagram
Quick Steps
Source code of this example is a part of PHPoC Support Packet (PSP). You need to:
- Download PHPoC Support Package.
- Upload example\p4s\03.html_image\01.uio_buzzer to PHPoC Blue/Black.
- Configure network parameters (e.g. WiFi SSID, password, IP address ...).
- Access webpage on PHPoC using Web Browser on your PC or smart phone (See How To).
Source Code
Source files includes:
- index.php: this file contains source code of web page.It is only run in response to request from Web Browser.
- uio_buzzer.jpg: Wring diagram between PHPoC devices and buzzer. It is displayed on webpage.
index.php
[Full Code]
PHP Code:
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<style> body { text-align: center; } </style>
</head>
<body>
<h2>
UIO / Catalex Buzzer<br>
<img src="uio_buzzer.jpg"><br>
<?php
include_once "/lib/sd_340.php";
define("OUT_PIN", 0);
uio_setup(0, OUT_PIN, "out");
if(($led0 = _GET("led0")))
{
if($led0 == "low")
uio_out(0, OUT_PIN, LOW);
else
uio_out(0, OUT_PIN, HIGH);
}
if(uio_in(0, OUT_PIN) == LOW)
{
echo "Buzzer Status : OFF<br>\r\n";
echo "<br><a href='index.php?led0=high'>Toggle</a><br>\r\n";
}
else
{
echo "Buzzer Status : ON<br>\r\n";
echo "<br><a href='index.php?led0=low'>Toggle</a><br>\r\n";
}
?>
</h2>
</body>
</html>
[Explanation]
Source code of index.php file is composed of HTML, CSS and PHPoC code.
PHPoC code is interpreted on on PHPoC device.
-
PHP Code:
<?php
include_once "/lib/sd_340.php";
define("OUT_PIN", 0);
uio_setup(0, OUT_PIN, "out");
if(($led0 = _GET("led0")))
{
if($led0 == "low")
uio_out(0, OUT_PIN, LOW);
else
uio_out(0, OUT_PIN, HIGH);
}
if(uio_in(0, OUT_PIN) == LOW)
{
echo "Buzzer Status : OFF<br>\r\n";
echo "<br><a href='index.php?led0=high'>Toggle</a><br>\r\n";
}
else
{
echo "Buzzer Status : ON<br>\r\n";
echo "<br><a href='index.php?led0=low'>Toggle</a><br>\r\n";
}
?>
- Setup IO pin to output mode.
- Get the requested state from HTTP request.
- Control the state of buzzer according to the requested state.
- Read the current state of buzzer .
- Print out image hyperlink, which can be used to toggle state of buzzer to webpage.
PHPoC code may add/update the content of HTML, CSS or JavaScript code. Once PHPoC code is interpreted in PHPoC, the remaining code is client-side code and it is returned to Web Browser. Web Browser receives this code and interpret it to display the webpage.
- HTML: describes the structure of Web pages
- CSS: describes how HTML elements are to be displayed
See Also
- Buzzer - How to Use Buzzer.
- Buzzer - Controlling Buzzer from Webpage using Hypertext.
- Buzzer - Controlling Buzzer via WebSocket.
Other Resources