using-the-screen.html

---
layout: default
title: Using The Screen
---

<h1>Using The LCD Screen</h1>

<p>
In this section, we will build the circuit that connects the LCD screen to
the Arduino, and learn how to program the screen to display different
shapes, colours and text.
</p>

<hr/><br/>

<h2>Building The Circuit</h2>
<div class="section">
<p>
We will be using the Arduino LCD module as our screen. You can find more
information on the screen 
<a target="_blank" href="https://www.arduino.cc/en/Main/GTFT">here</a>, 
and we will show you how to wire it up properly below.
</p>

<img src="images/lcd-front.jpg" width="49.5%"/>
<img src="images/lcd-back.jpg" width="49.5%"/>

<p>
The wiring diagram for the screen is shown below. It assumes you are using
an Arduino Leonardo board. The breadboards we are using are slightly bigger
than the one shown, but that's okay. As long as you get the right wires in
the right place!
</p>

<div style="text-align:center;">
<img src="images/leonardo-diagram.jpg"/>
</div>

</div>

<h2>Checking The Circuit</h2>
<div class="section">
<p>
To check we have connected the screen properly, lets run a small "Hello
World!" program. Open up your Arduino software, and use the code supplied
below to check it works.</p>

<div style="text-align:left; max-width:735px;">
<img src="images/ide-top.png"/>
{% highlight C linenos %}

{% include_relative arduino-src/screen-test/screen-test.ino %}

{% endhighlight %}
<img src="images/ide-bottom.png"/>
</div><br/>

<p>
Hit <b>Upload</b> again, and hopefully, you will see the words 
"Hello World!" appear on your screen.
</p>
</div>

<h2>Programming The Screen</h2>
<div class="section">
<p>
Now we will learn to program the screen and actually draw interesting stuff
on it.
</p>

<p>
The code below goes through a bunch of different examples, and shows you the
different things the screen you can do. Complex things can be drawn from lots
of simple things, and you can build them into a full game. Try copying the
code below and seing how it behaves when you run it. Once you think you know
how each bit works, change things and see how it effects what gets displayed.
</p>

<p>
This is called <b>Hacking!</b>
</p>

<div style="text-align:left; max-width:735px;">
<img src="images/ide-top.png"/>
{% highlight C linenos %}

{% include_relative arduino-src/screen-example/screen-example.ino %}

{% endhighlight %}
<img src="images/ide-bottom.png"/>
</div><br/>

<p style="text-align:center;">
<img src="images/screen-example.png"/>
</p>

<p>
Now you feel comfortable using the screen and the code to control it, lets
move on to making our screen interactive. This will involve buttons, knobs,
circuits and a little more code...
</p>

</div>

<br/>
<p style="text-align:center; font-weight:bolder; font-size:x-large;">
<a href="{{site.baseurl}}/getting-started">&lt; Getting Started</a> | 
<a href="{{site.baseurl}}/input-buttons">Buttons and Dials &gt;</a>
</p>