Build an interactive kiosk

Interactive retail kiosks are everywhere. We all recognize the pervasiveness of these devices – whether you’re rushing through a self checkout machine at the hardware store or testing speakers at a department store. In a previous articles, we covered how to create interactive buttons on embedded LCD touch screens and how to play audio on embedded devices. Lets put this all together to build an interactive audio kiosk!

Information Kiosk Design

I saw a kiosk similar to the one we’re going to build in the electronics section of a department store. There was an expensive brand name speaker with some buttons directly below it. There were only three buttons: “Previous”, “Play/Pause”, and Next”. Lets get rid of the physical buttons and instead use an LCD touch screen. We’re keeping it simple for this article, but each button could generate a request to turn on an industrial machine, display current temperature, or possibly display weather current conditions.

Hardware and Software

• We used VersaModule’s VM5 4.3″ TFT Color LCD Module. Make sure you get the drivers and example files from VersaModule. It should come in a compressed file called ‘Nano_VM5_vX.X.zip’.
• All of the source code we created is in the kioskfiles.zip at the end of this article.
• You’ll need a NetBurner NANO54415 Ethernet Core Module. If you don’t have a development kit make sure to get one.
• An amplifier and speaker will be needed to hear sound. Please see the playing audio article for additional information.

Start out by loading the drivers and example Boot Demo that you received from Versa Module into a new NetBurner Eclipse project. Next copy all of the files in the KioskFiles.zip folder over said project. This should be all you need to get the demo working. Note that the background image has been converted into a ‘c file’. We used the main article image as a background by converting the image file using the GLCD tool that is available for download from the VersaModule website. As long as you’re there, check out their VMGraphix video tutorials. I used them to help write the code for this article. We’ll dive into the important parts of the code in the next section.

Source code

The first thing we’d like to do is refresh the screen with a background image and set three areas that will detect button presses.

    DisplayImage(0,0,KioskDemo_320x240);
    CreateTouchBox(10,120,110,230,REWIND_BUTTON,0);
    CreateTouchBox(110,120,210,230,PLAY_PAUSE_BUTTON,0);
    CreateTouchBox(210,120,310,230,FORWARD_BUTTON,0);

Next we’ll locate the first file on the SD card and update the LCD screen with the filename.

    fileNum = FindFile( &finder, fileNum );
    sprintf(lcdstring, "%s", finder.filename);
    LCD_String(lcdstring,Calibri17x23,100,95,2,0x0000,0xFFFF);

Finally, we’ll create a large loop that detects if the screen has been touched. We’ll check which button was pressed, and play the correct file. When the file is done playing we’ll update the screen once again.

    while(1)
    {
        if(TOUCH_OPTION == TOUCHED)
        {
            if( GetPenLocation() == true)
            {
                // Clear screen with original background image
                DisplayImage(0,0,KioskDemo_320x240);

                // Check which button was pressed
                if(CheckContainer(sx8654_touch.pen_x,sx8654_touch.pen_y,
                        REWIND_BUTTON) == true)
                {
                    // The rewind button was pressed, lets add a
                    // green circle to it so that the user gets
                    // visual feedback letting them know the button
                    // is being pressed.
                    LCD_Circle(52,182,40,0x0f0f);
                    WaitForTouchRelease(30);

                    // Once the button is released,
                    // clear the screen and load the previous file.
                    DisplayImage(0,0,KioskDemo_320x240);
                    DoPrevious(finder, player, fileNum, loadFile);
                }
                else if(CheckContainer(sx8654_touch.pen_x,sx8654_touch.pen_y,
                        PLAY_PAUSE_BUTTON) == true)
                {
                    // The Play/Pause button was pressed
                    LCD_Circle(160,182,40,0x0f0f);
                    WaitForTouchRelease(30);
                    DisplayImage(0,0,KioskDemo_320x240);
                    DoPlay(finder, player, fileNum, loadFile, pollState);
                }
                else if(CheckContainer(sx8654_touch.pen_x,sx8654_touch.pen_y,
                        FORWARD_BUTTON) == true)
                {
                    // The forward button was pressed
                    LCD_Circle(266,182,40,0x0f0f);
                    WaitForTouchRelease(30);
                    DisplayImage(0,0,KioskDemo_320x240);
                    DoNext(finder, player, fileNum, loadFile);
                }
            }
        }
        // If audio file has finished playing update screen text
        if (pollState && (player.GetState() == WavPlayer::STATE_FINISHED)) {
            sprintf(lcdstring,"Done: %s", finder.filename);
            LCD_String(lcdstring,Calibri17x23,100,95,2,0x0000,0xFFFF);
            pollState = false;
        }
    }
}

You can download the files we created for this project in the “download attatchemnts” section below. If you like this article please click on the Facebook ‘like’ button above or send out a Tweet.