• No products in the cart.

„Ring the Bell“ game with Highscore Visualization

  /  Make   /  „Ring the Bell“ game with Highscore Visualization

Worlds first textile “Ring the Bell” game and visualiation with a LCD Display

If you are looking for facts and want to make them visible everywhere and directly to everyone – there’s a very simple and good way to attach a LCD display to the WEARIC Expansion Board. In this tutorial we use a small LCD display as a visualization.


• WEARIC Expansion board
• Nano controller V3.0 Atmel Atmega328
Software Arduino IDE
• WEARIC Pressure sensor
• WEARIC LED module
• WEARIC Textile Buttons
LCD Display (we are using for example this Display from sparkfun)

The objective of this tutorial is to create the “ring the bell” game by using a pressure sensor and a display. The display should show a bar indicating the applied pressure on the sensor, but since we would like to see our screen at night, we will use the buttons to turn the display backlight on and off. Finally, the high score is visualized by flashing LEDs.

How to connect the LCD Display for the Ring the Bell game?

Let’s connect the LCD Display to the Expansion Board. If you have a look from the top onto the Board you need the connections GND, SDA and 5V. From left to right the connections are GND, SDA, SCL, 5V.


Connect the LCD Display to the Expansion Board

Let’s get started!

Our LCD Display has a serial port and can be accessed easily via commands (see table on page 2: https://www.sparkfun.com/products/9395). Each command is made up of two bytes, the first one being called “Control Character” and the second “Command”.
That we do not spend too much time on programming the serial interface, we use the finished library “SoftwareSerial.h”, which can be integrated as follows:

Did it work? You recognize this when the line “#include SoftwareSerial.h” appears at the top of the code field.

Let’s finally get started!
We start with a few basic pin definitions:

#define BUTTON1_PIN 8
#define BUTTON2_PIN 9
#define LED1_PIN 10
#define LED2_PIN 11

Afterwards we create our serial interface directly under the pin definition (before setup or loop):

SoftwareSerial LCD(A6, A5); // RX: Pin A6 (unused), TX: Pin A5

With these first pin definitions, the foundation is done and we can programme the setup part. We first start with the serial interface and use the standard transmission speed (baud rate) of 9600 bits/s.
The program pauses for half a second to ensure that the display is safely ready.

Now the inputs and outputs are defined, and the LED1 is turned on at the beginning, while the LED 2 remains off.

void setup()
LCD.begin(9600); // set up serial port for 9600 baud
delay(500); // wait for display to boot up
pinMode(LED1_PIN, OUTPUT);
pinMode(LED2_PIN, OUTPUT);
digitalWrite(LED1_PIN, HIGH);

Before we now start with the periodically executed loop part, we create our own function, which receives the read analogue value (from 0 … 16) and describes the LCD Display accordingly.
That the display is only described when the score actually gets higher, the previous value is always buffered. In order to retain the contents of this variable even after leaving the function, the keyword “static” is used in the declaration of the variable. This keeps the value until the next entry into the same function and can thus continue to be used.
If the new value does not match the old value, first the “cursor” of the LCD display is set to the beginning of the first line and then deleted by sending a space.

The cursor is then reset to the beginning of the first line, this time “We are WEARIC” is written to the first line. Of course you can replace that with any slogan that suits you!
The cursor is then placed at the beginning of the second line to display so many blocks until the value eg equals 255, which is the analogue value (0 … 16).

Finally, the current value is just saved so that it can be compared again the next time.

void Write(unsigned int val)
static unsigned int oldVal;
if(val != oldVal)
// move cursor to beginning of first line
// clear display by sending spaces
LCD.write(" ");
LCD.write(" ");
// move cursor to beginning of first line
LCD.write("We are WEARIC");
// move cursor to beginning of second line
for(unsigned int i = 0; i < val; i++)
oldVal = val;

Everything is fine so far? Let’s go on!
In the loop part, we again use two static variables (with the keyword “static”) to preserve the value. On the one hand, the status of the backlight of the display as well as the status of a counter variable, which is necessary for the periodic blinking of the LEDs, are temporarily stored.

The analog value is read in first and stored in the variable “analogVal”.
Now it is checked whether the button 1 was pressed and if so, whether the backlight is not yet switched on. If both apply, the Backlight on command is sent to the display and the status variable “backOn” is set to true. The short delay is built, so that the display has enough time to create the presentation.

Subsequently, this process is run through the opposite case. It is checked if Button 2 was pressed and the backlight has not yet been switched off. If both apply, the Backlight Off command is sent and the status variable is set to false.

Afterwards, the previously described function “Write” is called and the analog value is transferred. Since the read value ranges from 0 to 1024, but only 16 bars can be displayed, the value is divided by 64.

The last section defines the flashing function of the LED. If the count has reached 500 (with a delay of 1ms -> 500ms), then both LEDs are switched on. The counter is then reset to 0 again. On each pass, the counter variable is incremented by 1 and the run is delayed by 1ms.

void loop()
static bool backOn = true;
static int count = 0;
int analogVal = analogRead(A0);
if(!digitalRead(BUTTON1_PIN) && !backOn)
backOn = true;
if(!digitalRead(BUTTON2_PIN) && backOn)
backOn = false;
Write(analogVal / 64);
if(count == 500)
digitalWrite(LED1_PIN, !digitalRead(LED1_PIN));
digitalWrite(LED2_PIN, !digitalRead(LED2_PIN));
count = 0;
count ++;

Once everything is selected press the button “upload”:
We are finally done with our game and you can Hit the Highscore!