creaty YouTubers here is the guy with a
Swiss accent again in video number 56 I
introduced the NextGen smart displays
and showed how we can use them based on
an example file in this video I will go
into the details on how to build your
own screens and how to write an Arduino
sketch to use it in your projects please
watch the first video number 56 if you
did not do it yet I start with a simple
application we want to press A Plus or a
minus key and then a number is changed
accordingly you remember we first have
to program the next gen display using an
editor running on Windows and upload the
resulting file to the
display next we can then build our
Arduino sketch and upload it to the
board let's start with the files for the
nection display we first have to start
the nection editor and create a new file
we call it button test we are asked for
the display we want to use I have the
3.5 in version and want to use it in
horizontal orientation next we have to
create the fonts we want to use we start
the font generator and select the font
we like I choose consolas and the size
32 the rest of the fields are okay when
we generate the font we have to give it
a name and a place to store I store it
at the same place as the HMI and the Ino
file in the Arduino sketch directory
like that I have all project files in
one place then we can import the font
into our
resources from now on we can use it in
our project next I want a nice
background I can either use an available
picture or create one important is that
it has the same dimensions as our
display
480 time 320 in the case of the 3.5 in
display as you know I'm sometimes in
Dubai therefore I use a picture from
there to work with it I use inkscape it
is a free software to create these kind
of pictures I am sure that there are
other programs available for this
purpose here I Define the needed format
of 480 * 320 pixel and add the Dubai sky
line and the
logo then I save it as a PNG file and
import it into the nection
editor
the editor already created a page with a
name page zero now we have to insert the
picture with a double
click then we add a text file and place
it where it
belongs next we need the two buttons one
button is the plus and the other one is
the minus button the size of the letters
is 29 and the height is
47 I found these sizes by try and
error because we want to interact with
the button we have to enable the send
command ID I enable it for both events
the pressing of the button and the
releasing of the button this way I can
choose later in the Arduino sketch which
event I will use as a last step we have
to make notes of the names of the
different objects the plus button for
example has the name button plus and the
ID 3 all objects are on page zero now we
can simulate or debug our files and
upload the resulting TFT file to the
LCD last time I showed you how to do
this using an SD card
this time I connect the nection board to
a USB to serial connector and upload the
file directly to the display this is
slower than with the SD card but for
small files it is okay the editor
searches for a comp port and selects
also the speed here we do not need to
power cycle the LCD everything is done
automatically and we see our screen
right after upload now we can attach it
to the Arduino Mega as last time I used
this board because it has two serial
connections and we can connect the
nection to the serial 2 and use serial
for debugging for this video I use the
official NextGen Library you find a link
to it in the comment this library is not
easy understandable for beginners but if
you start with the examples and use copy
paste you should be able to write your
code to define the serial connections
you have to go to the library folder
open the file next config H and enable
serial debugging then you have to change
the lines Define DB serial and Define
next serial now we can start to look at
our coding after the include of the
library we have to declare each object
of our screen we want to use later here
here text number button plus and button
minus we use our notes from before to
fill in the IDS and names they have to
match exactly for each field we have to
create a buffer to hold the text make it
long enough otherwise you risk crazy
behavior of your Arduino because of
buffer overflow at the beginning we fill
it with zero which means it is empty
next we have to register all objects in
list again just copy and paste here as a
next step we have to define the behavior
of the different buttons this is done by
defining a so-called callback function
we name the function for the plus button
plus button pop call back pop means that
the release event of the button will be
used if we would use push the reaction
would be when we push the button I will
show the difference later on for now we
only Define that when the plus button is
released the sketch writes a debug
message increases the number by one and
displays the resulting number in the
text field of the LCD for the minus
button we have to define a similar thing
to show you the difference here I use
the push principle to react on the
pressing of the button not the releasing
of it it now we are nearly finished in
the setup we have to initialize the
device with the command next in it and
reister to the different functions
defined in the last step now the sketch
knows that when a particular button is
pressed or released that it has to call
the respective function please make sure
that the next init statement is placed
before the serial begin statement
otherwise debugging does not work proper
L because we already did the hard stuff
the loop is as simple as it can get just
one line of code next Loop next listen
list now we can upload the sketch and
test it it starts with the value 50 and
if I press the plus button it does
nothing only if I release the button the
number is counted up exactly as defined
in the pop call back function now the
minus button this button reacts already
on the pushing and counts down again
exactly as defined in our push call back
function in serial monitor we see also
the events and the debug messages if you
press a button and you do not see a
message appear something is wrong then
check all the steps we just dat did you
check the send component ID did you
define the button did you include it in
the next listen list did you register it
in the setup are all names and IDs
correct if everything is correct it
should work now we have created our
first application with a nice looking
user interface as a next complication I
will include a new object a slider Dubai
has the biggest tower in the world the
Birch Khalifa I want to let this tower
grow according the number in our display
to do that we need to prepare three
things first a slider object which has
about the same size of the tower it has
to be vertical second a picture of the
tower cropped out of the original with
the same size than the slider and third
a picture from Heaven also cropped out
of the picture and the same size than
the slider we now can attach the two
pictures to the slider the picture of
the tower is shown as one part and the
picture of Heaven is shown as the rest
of the slider after compilation and
uploading the file to the nection
display we have to extend the Arduino
sketch after uploading the two files we
can start to test we see that the plus
and the minus buttons still work in in
addition we grow or Shrink the tower
according to the value in the display
this is achieved because the nection
replaces the power picture with a heaven
picture or vice versa cool as a next
complication I want to add a second page
to get this we have to add a new page
and add a background picture but how do
we get to the second page I want that we
get to this page by pressing and next
button so we have to search for such a
button and include it in our page zero
on page one I want that we have to touch
the tower to get back to page zero so I
Define a hotspot across the tower please
do not forget to select the field send
component ID again we have to include
the four steps in the sketch and off we
go the display works exactly as intended
with what we learned so far we can now
build real complex applications as an
example I use the fish tank example you
find a link to the code in the comment
Please be aware that I simplified it
somehow for this tutorial if you use the
original you might be
overwhelmed the fish tank example is
designed to manage an
aquarium it has seven pages
where four are very similar first we
have to set the realtime clock attached
to the Arduino next we can go to the
pump and switch it on or off or let the
Arduino do it
automatically the same way we can also
change the UV light and the feeder if we
return to the home screen we always see
the actual water temperature which is
measured by a temperature sensor of
course this seems to be very complex but
if you go into it you find for each
object exactly what we learned in this
video and it is easy to understand I
hope this episode was useful or at least
interesting for you in the next few
weeks you will not get a video every
week because I have other obligations
and will travel a lot I hope you
understand
bye