Published November 1, 2023 © GPL3+

Candy Pages: Reading Rewards for Little Bookworms

Embark on sweet reading journeys with Candy Pages! Explore, read, and earn delightful rewards for young bookworms.

IntermediateFull instructions provided2 days143

Most Illuminated Library

Little Free STEM Library

Candy Pages: Reading Rewards for Little Bookworms

Things used in this project

Hardware components

Seeed Studio Wio Terminal

Keypad 4x4

USB Cable, USB Type C Plug

SparkFun Snappable Protoboard

Software apps and online services

Arduino IDE

Google Colab

Canva

Solidworks

Hand tools and fabrication machines

Soldering iron (generic)

Hot glue gun (generic)

3D Printer (generic)

Story

Background

In a world brimming with screens and gadgets, the joy of reading is sometimes overshadowed. It's a common concern for parents and educators to encourage children to dive into the magical world of books. And what better way to do that than by adding a touch of sweetness and a sprinkle of technology to the mix? Enter Candy Page – a delightful reading system designed just for kids.

Objective

The primary aim of Candy Page is to ignite a love for reading in young hearts and make it an exciting adventure. We want to create a reading experience that not only captivates the imagination but also rewards the young readers. Our goal is to nurture a habit of reading while ensuring the process remains fun and engaging.

Solution

Candy Page is the perfect concoction of books, treats, and a dash of technology. Here's how it works:

Magical Books: Our library is filled with an array of enchanting books that cater to every taste. From colorful picture books to thrilling adventures and educational wonders, there's something for every child.
Sweet Rewards: We've introduced a sweet incentive system to motivate young readers. After reading the first book, they receive a candy. The second book they read rewards them with another candy. And if they venture into the world of a third book, they get a special snack! It's a sweet progression that keeps kids eagerly flipping through the pages.
Tech-savvy Magic: Candy Page doesn't stop at candies and snacks. We've also incorporated technology to enhance the reading experience. Kids can track their reading progress on our app, share their thoughts with friends, and even get recommendations for their next adventure.
Interactive Challenges: To keep the excitement alive, Candy Page regularly offers interactive challenges related to the books kids are reading. Completing these challenges leads to additional surprises and rewards, making the reading journey even more thrilling.

By combining the joys of reading with rewards and tech-savvy interactions, Candy Page aims to create a reading paradise for kids. It's not just a library; it's a magical land where imagination, learning, and fun come together. We believe that by fostering a love for reading in children, we are nurturing future storytellers, adventurers, and dreamers.

Process and Steps

1. Keypad 4x4 Test

2. Build GUI using Canva

3. Convert Image to bmp 16-bit

4. Show Image Test

5. Design The Candy Page Box

6. Combine and Complete Code

7. Prepare and Decorate The Stem Library

8. Complete the STEM Library

1. Keypad 4x4 Test

The numeric keypad contains only numeric character buttons, from 0 to 9, while the alphanumeric keypad is the same as the numeric keypad but with the addition of alphabet characters A to D. Both types of keypads are equipped with special characters '*' and '#'.

As a result, a numeric keypad will consist of 12 characters (12 buttons), whereas the alphanumeric keypad consists of 16 characters (16 buttons). This is what distinguishes them from a keyboard, which is a set of buttons with alphanumeric characters (plus special characters) that have a wider variety in accordance with the ASCII standard. (Source: www.saptaji.com).

In the illustration above, the button pressed on the keypad is "5". It can be observed that Row 2 is in a LOW state, while Row 1, Row 3, and Row 4 are in a HIGH state. Additionally, from the illustration, it is known that the data originates from the pressing of Row 2, with feedback in Column 2, thus it can be concluded that the button pressed on the keypad is "5".

1 / 2

For full tutorial you can refer to this page, however, you will need to make slight adjustments to the pins used to match the Wio Terminal, following the instructions on this page.

2. Build GUI on Wio Terminal using Canva

To build a graphical user interface (GUI) on the Wio Terminal using Canva, you should set the canvas size to 320 x 240 pixels, as this matches the display dimensions of the Wio Terminal. This canvas size ensures that your graphical elements and design will fit perfectly on the Wio Terminal's screen.

With this canvas size, you have the creative freedom to design your GUI as you envision it. You can add buttons, images, text, and any interactive elements you need for your project. The 320 x 240-pixel canvas provides ample space to craft an intuitive and visually appealing user interface for your Wio Terminal project.

1 / 2

Whether you're creating a custom control panel, a data visualization dashboard, or any other interactive interface, Canva makes it easy to design and export your GUI for use with the Wio Terminal. After completing your design, download it in JPG format. This format is compatible with the Wio Terminal and allows you to easily display your GUI on the device's screen.

3. Convert Image to bmp 16-bit

Once you've downloaded your design from Canva in JPG format, the next step is to convert it into a BMP file compatible with the Wio Terminal. You can achieve this by opening the JPG file with Paint and selecting 'Save As' to save it as a BMP file. The resulting file will be in a 24-bit BMP format, which you will need for the conversion process.

The next step is to access Google Colab or another Python platform. Import your 24-bit BMP image and run the provided code. This code will convert your image into a 16-bit BMP format, making it compatible with the Wio Terminal's display. Once the conversion is complete, you can easily copy the converted image onto the SD card, which can then be used with your Wio Terminal.

By following these steps, you can ensure that your Canva design is seamlessly converted into a format that Wio Terminal can display, allowing you to enjoy your customized GUI on the device.

4. Show Image Test

To display an image on the Wio Terminal using the provided code from the link Wio Terminal LCD Loading Image, you can follow the instructions in the attached code. First, ensure you have the image you want to display saved in the appropriate format, typically a 16-bit BMP. The code example provides a clear and straightforward approach to loading and displaying this image on the Wio Terminal's LCD screen.

The code consists of the necessary functions to read the image file from the SD card, load it onto the screen, and display it in the specified location. It utilizes the Wio Terminal's built-in libraries for handling image display, making it easy to integrate your custom GUI or image onto the device.

By following the instructions and using the provided code in the link, you can seamlessly display your desired image on the Wio Terminal's LCD screen. This process allows you to personalize your Wio Terminal and enhance its functionality for various applications.

5. Design The Candy Page Box

Candy Page has been meticulously designed using SolidWorks, a leading 3D computer-aided design software. The design process involved creating various parts, each meticulously crafted to serve a specific function within the system. These parts were then seamlessly integrated into an assembly format, ensuring that they work harmoniously together to create a cohesive and functional whole.

Following the completion of the design and assembly stages, the next step involved preparing the parts for production. This process included dividing the components into two distinct groups. The first set of parts was chosen for fabrication using acrylic material, offering durability and a polished finish. Meanwhile, the second set of components was prepared for 3D printing, a versatile and precise manufacturing method that allowed for the creation of intricate and custom elements within the project.

By incorporating this design and manufacturing process, Candy Page not only achieves a high level of functionality but also embodies a visually appealing and meticulously crafted design. This approach ensures that the system not only serves its intended purpose but also reflects a dedication to precision and craftsmanship in its construction.

6. Combine and Complete Code

Having thoroughly tested and explored all the essential features that will be utilized in this project, the next step involves creating a comprehensive system by integrating the previously developed and tested code. Additionally, we will implement specific rules and logic, aligning them with the flowchart provided as a visual guide. This process is pivotal as it consolidates the individual components into a functional and cohesive system, ensuring that the project operates seamlessly and in accordance with the intended workflow. By adhering to the flowchart's instructions and applying the necessary rules, we aim to establish a well-structured and efficient system that meets the project's requirements and delivers the expected results. This integration process is a crucial stage in bringing together all the elements of the project and aligning them to achieve the project's goals successfully.

Here's a simplified block diagram of the provided Arduino code:(for the complete code, you can access the attachment)

Arduino Code
   |
   | --> Includes Libraries: Keypad, TFT_eSPI, Seeed_FS, RawImage
   |
   | --> Setup:
   |       - Initialize Serial Communication
   |       - Check SD Card Initialization
   |       - Initialize TFT Display and Set Rotation
   |       - Load "home.bmp" Image
   |
   | --> Loop:
   |       | --> Check for Keypad Input
   |       |
   |       | --> In Standby Mode:
   |       |       - Display "home.bmp" Image
   |       |       - If '*' Key Pressed, Switch to UserID Input Mode
   |       |
   |       | --> In UserID Input Mode:
   |       |       - Accept UserID Input
   |       |       - Handle Input and Display on Screen
   |       |       - If 'A' Key Pressed, Switch to BookID Input Mode
   |       |       - If 'B' Key Pressed, Remove Last Character from Input
   |       |
   |       | --> In BookID Input Mode:
   |       |       - Accept BookID Input
   |       |       - Handle Input and Display on Screen
   |       |       - Check for Valid UserID and BookID
   |       |       - Display Appropriate Images based on Validity
   |       |       - Reset Input Variables and Switch to Standby Mode

The code begins by including necessary libraries and then setting up the hardware. In the loop, it continuously checks for keypad input and operates in different modes: Standby, UserID Input, and BookID Input. Based on the input and validation checks, it displays corresponding images and manages the user interaction flow.

7. Prepare and Decorate The Stem Library

Enhancing your STEM library with RGB LED strips is a simple and effective way to make it more visually appealing. By strategically placing these LED strips around your library and programming them to display different colors and patterns, you can create an inviting and engaging atmosphere. It not only adds a touch of creativity but also serves as an educational tool to demonstrate concepts related to light and color mixing. This simple addition can transform your STEM library into a vibrant and interactive space that encourages curiosity and learning.

8. Complete the STEM Library

1 / 2

Once all the individual functions have been thoroughly tested and confirmed to be working effectively, the next step in the project is to proceed with the assembly and finishing processes. During this phase, we will bring together all the project components and create a unified and functional whole. This includes physical assembly, connecting electronic components, and ensuring that everything fits seamlessly.

As a finishing touch, we can add candy and snacks to the designated storage compartments within the project box. This not only enhances the user experience but also aligns with the project's purpose of providing rewards to users. The addition of candies and snacks further adds an element of delight and surprise, making the project even more engaging and enjoyable for the end users.

1 / 2

Once the assembly, finishing, and stocking with candies and snacks are completed, the final step involves rigorous testing of the entire system to ensure that it functions as intended and delivers the expected user experience. This comprehensive approach ensures that the project is not only technically sound but also appealing and user-friendly, providing a well-rounded and satisfying outcome.

Closing

In conclusion, Candy Page represents a delightful journey through the world of books, seamlessly blending the joy of reading with the excitement of rewards. This enchanting platform encourages young readers to explore, learn, and discover, all while indulging in sweet treats along the way. We hope that Candy Page continues to inspire children to develop a lifelong love for reading, where every page turns into an adventure, and every chapter leads to new discoveries. Thank you for joining us on this enchanting literary voyage, and we look forward to many more sweet reading moments together. Happy reading! 📚🍭✨

Code

Bitmap Converter 24-bit to 16 bit

from PIL import Image
import array
import os


def rgb332(r, g, b):
    r = r >> 5
    g = g >> 5
    b = b >> 6
    c = r << 5 | g << 2 | b
    return [c]


def rgb565(r, g, b):
    r = r >> 3
    g = g >> 2
    b = b >> 3
    c = r << 11 | g << 5 | b
    return [c >> 8, c & 0xff]


def convert(cvt, path, subpath):
    subpath = os.path.join(path, subpath)
    if not os.path.exists(subpath):
        os.mkdir(subpath)

    for _, _, filesnames in os.walk(path):
        for file in filesnames:
            if (os.path.splitext(file)[-1] != '.bmp'):
                continue
            im = Image.open(os.path.join(path, file))
            width, height = im.size
            v = [cvt(r, g, b) for (r, g, b) in im.getdata()]
            b = bytearray()
            b.append(width & 0xff)
            b.append(width >> 8)
            b.append(height & 0xff)
            b.append(height >> 8)
            for pair in v:
                for i in pair:
                    b.append(i)
            f = open(os.path.join(subpath, file), "wb")
            f.write(b)
            f.close()
        break

def choose():
    option = int(input("Enter (1) for 8-bit colour convert, Enter (2) for 16-bit colour convert\n"))
    if option == 1:
        pathname = 'rgb332'
        return rgb332, pathname
    elif option == 2:
        pathname = 'rgb565'
        return rgb565, pathname
    else:
        print("Invalid input!")

rgbtype, pathname = choose();
convert(rgbtype, 'bmp', pathname)

Credits

Rifqi Abdillah

11 projects • 10 followers

Lecturer in Informatics & Electronics Engineering. Passionate about Machine Learning, Edge Computing, Image Processing, and IoT.

Comments

Awards

Most Illuminated Library

Little Free STEM Library

Candy Pages: Reading Rewards for Little Bookworms