mirror of
https://github.com/taigrr/arduinolibs
synced 2025-01-18 04:33:12 -08:00
225 lines
18 KiB
HTML
225 lines
18 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
|
|
<meta name="generator" content="Doxygen 1.8.6"/>
|
|
<title>ArduinoLibs: Form example for LCD displays</title>
|
|
<link href="tabs.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
<script type="text/javascript" src="dynsections.js"></script>
|
|
<link href="search/search.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="search/search.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() { searchBox.OnSelectItem(0); });
|
|
</script>
|
|
<link href="doxygen.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
|
|
<div id="titlearea">
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr style="height: 56px;">
|
|
<td style="padding-left: 0.5em;">
|
|
<div id="projectname">ArduinoLibs
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- end header part -->
|
|
<!-- Generated by Doxygen 1.8.6 -->
|
|
<script type="text/javascript">
|
|
var searchBox = new SearchBox("searchBox", "search",false,'Search');
|
|
</script>
|
|
<div id="navrow1" class="tabs">
|
|
<ul class="tablist">
|
|
<li><a href="index.html"><span>Main Page</span></a></li>
|
|
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
|
|
<li><a href="modules.html"><span>Modules</span></a></li>
|
|
<li><a href="annotated.html"><span>Classes</span></a></li>
|
|
<li><a href="files.html"><span>Files</span></a></li>
|
|
<li>
|
|
<div id="MSearchBox" class="MSearchBoxInactive">
|
|
<span class="left">
|
|
<img id="MSearchSelect" src="search/mag_sel.png"
|
|
onmouseover="return searchBox.OnSearchSelectShow()"
|
|
onmouseout="return searchBox.OnSearchSelectHide()"
|
|
alt=""/>
|
|
<input type="text" id="MSearchField" value="Search" accesskey="S"
|
|
onfocus="searchBox.OnSearchFieldFocus(true)"
|
|
onblur="searchBox.OnSearchFieldFocus(false)"
|
|
onkeyup="searchBox.OnSearchFieldChange(event)"/>
|
|
</span><span class="right">
|
|
<a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- window showing the filter options -->
|
|
<div id="MSearchSelectWindow"
|
|
onmouseover="return searchBox.OnSearchSelectShow()"
|
|
onmouseout="return searchBox.OnSearchSelectHide()"
|
|
onkeydown="return searchBox.OnSearchSelectKey(event)">
|
|
<a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(0)"><span class="SelectionMark"> </span>All</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(1)"><span class="SelectionMark"> </span>Classes</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(2)"><span class="SelectionMark"> </span>Files</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(3)"><span class="SelectionMark"> </span>Functions</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(4)"><span class="SelectionMark"> </span>Variables</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(5)"><span class="SelectionMark"> </span>Typedefs</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(6)"><span class="SelectionMark"> </span>Enumerations</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(7)"><span class="SelectionMark"> </span>Enumerator</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(8)"><span class="SelectionMark"> </span>Friends</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(9)"><span class="SelectionMark"> </span>Groups</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(10)"><span class="SelectionMark"> </span>Pages</a></div>
|
|
|
|
<!-- iframe showing the search results (closed by default) -->
|
|
<div id="MSearchResultsWindow">
|
|
<iframe src="javascript:void(0)" frameborder="0"
|
|
name="MSearchResults" id="MSearchResults">
|
|
</iframe>
|
|
</div>
|
|
|
|
</div><!-- top -->
|
|
<div class="header">
|
|
<div class="headertitle">
|
|
<div class="title"><a class="el" href="classForm.html" title="Manager for a form containing data input/output fields. ">Form</a> example for <a class="el" href="classLCD.html" title="Enhanced library for Freetronics 16x2 LCD shields. ">LCD</a> displays </div> </div>
|
|
</div><!--header-->
|
|
<div class="contents">
|
|
<div class="textblock"><p>The <a class="el" href="classForm.html" title="Manager for a form containing data input/output fields. ">Form</a> and <a class="el" href="classField.html" title="Manages a single data input/output field within a Form. ">Field</a> classes simplify the process of building user interfaces for Arduino projects that use a <a href="http://www.freetronics.com/pages/16x2-lcd-shield-quickstart-guide">Freetronics LCD</a> shield. That shield has a 16x2 <a class="el" href="classLCD.html" title="Enhanced library for Freetronics 16x2 LCD shields. ">LCD</a> display and five buttons for Up, Down, Left, Right, and Select.</p>
|
|
<p>The user interface is organised as a "form" which consists of one or more "fields" that display or modify a single program parameter. The Left and Right buttons are used to navigate between fields, and the Up and Down buttons are used to modify the value of the currently-displayed field.</p>
|
|
<div class="image">
|
|
<img src="FormText.png" alt="FormText.png"/>
|
|
</div>
|
|
<p>We start by including the classes from the library that we will need:</p>
|
|
<div class="fragment"><div class="line"><span class="preprocessor">#include <LCD.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <Form.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <TextField.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <TimeField.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <IntField.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <BoolField.h></span></div>
|
|
</div><!-- fragment --></p>
|
|
<p>Next, we initialize the <a class="el" href="classLCD.html" title="Enhanced library for Freetronics 16x2 LCD shields. ">LCD</a> display, create the main form, and populate it with fields:</p>
|
|
<div class="fragment"><div class="line"><a class="code" href="classLCD.html">LCD</a> lcd;</div>
|
|
<div class="line"><a class="code" href="classForm.html">Form</a> mainForm(lcd);</div>
|
|
<div class="line"><a class="code" href="classTextField.html">TextField</a> welcomeField(mainForm, <span class="stringliteral">"Form example"</span>, <span class="stringliteral">"v1.0"</span>);</div>
|
|
<div class="line"><a class="code" href="classTimeField.html">TimeField</a> timeField(mainForm, <span class="stringliteral">"Time since reset"</span>, 24, TIMEFIELD_READ_ONLY);</div>
|
|
<div class="line"><a class="code" href="classIntField.html">IntField</a> volumeField(mainForm, <span class="stringliteral">"Volume"</span>, 0, 100, 5, 85, <span class="stringliteral">"%"</span>);</div>
|
|
<div class="line"><a class="code" href="classBoolField.html">BoolField</a> ledField(mainForm, <span class="stringliteral">"Status LED"</span>, <span class="stringliteral">"On"</span>, <span class="stringliteral">"Off"</span>, <span class="keyword">true</span>);</div>
|
|
<div class="line"><a class="code" href="classTimeField.html">TimeField</a> durationField(mainForm, <span class="stringliteral">"Timer duration"</span>, 24, TIMEFIELD_READ_WRITE);</div>
|
|
</div><!-- fragment --></p>
|
|
<p>Each field has a specific type, which may be one of the following classes:</p>
|
|
<ul>
|
|
<li><a class="el" href="classBoolField.html" title="Field that manages the input of a boolean value. ">BoolField</a> displays a boolean on/off value with the Up and Down buttons used to toggle its state. </li>
|
|
<li><a class="el" href="classIntField.html" title="Field that manages the input of an integer value. ">IntField</a> displays an integer value within a specified range, with the Up and Down buttons used to modify the value. </li>
|
|
<li><a class="el" href="classTextField.html" title="Field that displays a read-only text value. ">TextField</a> displays a read-only value, which is typically used for status messages and program results. </li>
|
|
<li><a class="el" href="classTimeField.html" title="Field that manages the display and editing of a time value. ">TimeField</a> displays a time in hours, minutes, and seconds. The field may be either read-only or writable. Writable time fields can be modified with the Up, Down, Left, and Right buttons to select a specific duration.</li>
|
|
</ul>
|
|
<p>Returning to our example, the above code creates the following fields:</p>
|
|
<ul>
|
|
<li><code>welcomeField</code> to display the program's name and version. </li>
|
|
<li><code>timeField</code> to display the number of seconds since reset, wrapping around after 24 hours. This field is read-only. </li>
|
|
<li><code>volumeField</code> which displays a volume between 0 and 100, with an Up/Down step of 5, and a suffix of "%". </li>
|
|
<li><code>ledField</code> which displays the current boolean state of the status LED on D13; the LED will change state when the user toggles the field's value. </li>
|
|
<li><code>durationField</code> which displays a read-write time field for selecting a duration between 0 and 24 hours.</li>
|
|
</ul>
|
|
<p>Now that we have defined our form, we need to initialize the program and show the form for the first time:</p>
|
|
<div class="fragment"><div class="line"><span class="preprocessor">#define STATUS_LED 13</span></div>
|
|
<div class="line"><span class="preprocessor"></span></div>
|
|
<div class="line"><span class="keywordtype">void</span> setup() {</div>
|
|
<div class="line"> <span class="comment">// Status LED initially on.</span></div>
|
|
<div class="line"> pinMode(STATUS_LED, OUTPUT);</div>
|
|
<div class="line"> digitalWrite(STATUS_LED, HIGH);</div>
|
|
<div class="line"> </div>
|
|
<div class="line"> <span class="comment">// Enable the screen saver, which will automatically blank the screen after 10 seconds.</span></div>
|
|
<div class="line"> <span class="comment">// The screen will wake up again when a button is pressed or lcd.display() is called.</span></div>
|
|
<div class="line"> lcd.<a class="code" href="classLCD.html#af9a2326d034fa159d384ec16223c924f">enableScreenSaver</a>();</div>
|
|
<div class="line"> </div>
|
|
<div class="line"> <span class="comment">// Show the main form for the first time.</span></div>
|
|
<div class="line"> mainForm.show();</div>
|
|
<div class="line">}</div>
|
|
</div><!-- fragment --></p>
|
|
<p>An application can have multiple forms, but only one can be shown at any given time. To switch to another form, call <a class="el" href="classForm.html#a88b9146a3f68e837c5e831203096f9e9" title="Hides the form, or does nothing if the form is not on-screen. ">Form::hide()</a> on the old form and <a class="el" href="classForm.html#a9e8d718ab55a8034c22c606ccfa90d65" title="Shows the form, or does nothing if the form is already on-screen. ">Form::show()</a> on the new form.</p>
|
|
<p>All that remains is to define our application's <code>loop</code> function which retrieves button events from <a class="el" href="classLCD.html#ac1e80e2603bd1cf0276c36092c416292" title="Gets the next button press, release, or idle event. ">LCD::getButton()</a> and dispatches them to the form:</p>
|
|
<div class="fragment"><div class="line"><span class="keywordtype">void</span> loop() {</div>
|
|
<div class="line"> <span class="comment">// Update the number of seconds since reset:</span></div>
|
|
<div class="line"> timeField.setValue(millis() / 1000);</div>
|
|
<div class="line"></div>
|
|
<div class="line"> <span class="comment">// Dispatch button events to the main form.</span></div>
|
|
<div class="line"> <span class="keywordtype">int</span> <span class="keyword">event</span> = lcd.<a class="code" href="classLCD.html#ac1e80e2603bd1cf0276c36092c416292">getButton</a>();</div>
|
|
<div class="line"> <span class="keywordflow">if</span> (mainForm.dispatch(event) == FORM_CHANGED) {</div>
|
|
<div class="line"> <span class="keywordflow">if</span> (mainForm.isCurrent(ledField)) {</div>
|
|
<div class="line"> <span class="keywordflow">if</span> (ledField.value())</div>
|
|
<div class="line"> digitalWrite(STATUS_LED, HIGH);</div>
|
|
<div class="line"> <span class="keywordflow">else</span></div>
|
|
<div class="line"> digitalWrite(STATUS_LED, LOW);</div>
|
|
<div class="line"> }</div>
|
|
<div class="line"> }</div>
|
|
<div class="line">}</div>
|
|
</div><!-- fragment --></p>
|
|
<p>The full source code for the example follows:</p>
|
|
<div class="fragment"><div class="line"><span class="comment">/*</span></div>
|
|
<div class="line"><span class="comment">This example demonstrates how to use the Form and Field classes from the</span></div>
|
|
<div class="line"><span class="comment">LCD library to provide a simple UI on the 16x2 LCD display.</span></div>
|
|
<div class="line"><span class="comment"></span></div>
|
|
<div class="line"><span class="comment">This example is placed into the public domain.</span></div>
|
|
<div class="line"><span class="comment">*/</span></div>
|
|
<div class="line"></div>
|
|
<div class="line"><span class="comment">// include the library code:</span></div>
|
|
<div class="line"><span class="preprocessor">#include <LCD.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <Form.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <TextField.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <TimeField.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <IntField.h></span></div>
|
|
<div class="line"><span class="preprocessor">#include <BoolField.h></span></div>
|
|
<div class="line"></div>
|
|
<div class="line"><span class="comment">// Initialize the LCD</span></div>
|
|
<div class="line"><a class="code" href="classLCD.html">LCD</a> lcd;</div>
|
|
<div class="line"></div>
|
|
<div class="line"><span class="comment">// Note: if you are using the USBDroid and have reassigned pin D9 on the LCD shield to some</span></div>
|
|
<div class="line"><span class="comment">// other pin (e.g. A1), then you will need to initialize the shield with something like:</span></div>
|
|
<div class="line"><span class="comment">// LCD lcd(A1);</span></div>
|
|
<div class="line"><span class="comment">// See also: http://www.freetronics.com/pages/combining-the-lcd-keypad-shield-and-the-usbdroid</span></div>
|
|
<div class="line"></div>
|
|
<div class="line"><span class="comment">// Create the main form and its fields.</span></div>
|
|
<div class="line"><a class="code" href="classForm.html">Form</a> mainForm(lcd);</div>
|
|
<div class="line"><a class="code" href="classTextField.html">TextField</a> welcomeField(mainForm, <span class="stringliteral">"Form example"</span>, <span class="stringliteral">"v1.0"</span>);</div>
|
|
<div class="line"><a class="code" href="classTimeField.html">TimeField</a> timeField(mainForm, <span class="stringliteral">"Time since reset"</span>, 24, TIMEFIELD_READ_ONLY);</div>
|
|
<div class="line"><a class="code" href="classIntField.html">IntField</a> volumeField(mainForm, <span class="stringliteral">"Volume"</span>, 0, 100, 5, 85, <span class="stringliteral">"%"</span>);</div>
|
|
<div class="line"><a class="code" href="classBoolField.html">BoolField</a> ledField(mainForm, <span class="stringliteral">"Status LED"</span>, <span class="stringliteral">"On"</span>, <span class="stringliteral">"Off"</span>, <span class="keyword">true</span>);</div>
|
|
<div class="line"><a class="code" href="classTimeField.html">TimeField</a> durationField(mainForm, <span class="stringliteral">"Timer duration"</span>, 24, TIMEFIELD_READ_WRITE);</div>
|
|
<div class="line"></div>
|
|
<div class="line"><span class="preprocessor">#define STATUS_LED 13</span></div>
|
|
<div class="line"><span class="preprocessor"></span></div>
|
|
<div class="line"><span class="keywordtype">void</span> setup() {</div>
|
|
<div class="line"> <span class="comment">// Status LED initially on.</span></div>
|
|
<div class="line"> pinMode(STATUS_LED, OUTPUT);</div>
|
|
<div class="line"> digitalWrite(STATUS_LED, HIGH);</div>
|
|
<div class="line"> </div>
|
|
<div class="line"> <span class="comment">// Enable the screen saver, which will automatically blank the screen after 10 seconds.</span></div>
|
|
<div class="line"> <span class="comment">// The screen will wake up again when a button is pressed or lcd.display() is called.</span></div>
|
|
<div class="line"> lcd.<a class="code" href="classLCD.html#af9a2326d034fa159d384ec16223c924f">enableScreenSaver</a>();</div>
|
|
<div class="line"> </div>
|
|
<div class="line"> <span class="comment">// Show the main form for the first time.</span></div>
|
|
<div class="line"> mainForm.show();</div>
|
|
<div class="line">}</div>
|
|
<div class="line"></div>
|
|
<div class="line"><span class="keywordtype">void</span> loop() {</div>
|
|
<div class="line"> <span class="comment">// Update the number of seconds since reset:</span></div>
|
|
<div class="line"> timeField.setValue(millis() / 1000);</div>
|
|
<div class="line"></div>
|
|
<div class="line"> <span class="comment">// Dispatch button events to the main form.</span></div>
|
|
<div class="line"> <span class="keywordtype">int</span> <span class="keyword">event</span> = lcd.<a class="code" href="classLCD.html#ac1e80e2603bd1cf0276c36092c416292">getButton</a>();</div>
|
|
<div class="line"> <span class="keywordflow">if</span> (mainForm.dispatch(event) == FORM_CHANGED) {</div>
|
|
<div class="line"> <span class="keywordflow">if</span> (mainForm.isCurrent(ledField)) {</div>
|
|
<div class="line"> <span class="keywordflow">if</span> (ledField.value())</div>
|
|
<div class="line"> digitalWrite(STATUS_LED, HIGH);</div>
|
|
<div class="line"> <span class="keywordflow">else</span></div>
|
|
<div class="line"> digitalWrite(STATUS_LED, LOW);</div>
|
|
<div class="line"> }</div>
|
|
<div class="line"> }</div>
|
|
<div class="line">}</div>
|
|
<div class="line"></div>
|
|
</div><!-- fragment --> </div></div><!-- contents -->
|
|
<!-- start footer part -->
|
|
<hr class="footer"/><address class="footer"><small>
|
|
Generated on Wed Mar 23 2016 19:08:46 for ArduinoLibs by  <a href="http://www.doxygen.org/index.html">
|
|
<img class="footer" src="doxygen.png" alt="doxygen"/>
|
|
</a> 1.8.6
|
|
</small></address>
|
|
</body>
|
|
</html>
|