สร้างนามบัตรแบบไม่จำเจ geek style ด้วย Arduboy

Tags: arduinoarduboyiot
Sunday, September 15, 2019 3:39:00 AM

enter image description here

สร้าง business card นามบัตรด้วย Arduboy ไอเดียนามบัตรที่ไม่จำเจ geek style

ผมได้เจอ project Arduboy ซึ่งเป็น Game boy clone project ที่ hardware นั้น based on Arduino Leonardo และในวิดีโอแนะนำสินค้าตัวนี้มีการเอามาใช้เป็นบัตรด้วย ซึ่งเป็น use case ที่น่าสนใจมากๆ เพราะขนาดของ Arduboy เท่ากับขนาดของนามบัตรพอดี และสามารถพกในกระเป๋าตังค์ได้อย่างสะดวก

Hardware ที่ต้องใช้

Arduboy สามารถสั่งซื้อได้ที่ Seeedstudio ฟรีค่าส่ง

IDE ที่ใช้

VS Code พร้อมติดตั้ง Arduino extension

ขั้นตอนหลักๆ ในการสร้าง business card มีดังนี้ครับ

  • เตรียม IDE
  • เขียน C Arduino code
  • Upload code ลง Arduboy board

เตรียม IDE

หลักๆ คือติดตั้ง VS Code, ติดตั้ง Arduino IDE เพราะ Arduino extension ยังจำเป็นต้องไปเรียกใช้ module ใน Arduino IDE และสุดท้ายติดตั้ง Arduino Extension สำหรับ VS Code

เขียน code C++ programming

เริ่มจากเตรียม QR code ครับ

เราสามารถสร้างรูป qr code จาก https://api.qrserver.com/v1/create-qr-code/?size=64x64&data=https://www.codesanook.com/2ySy7noPcj1aFnJ0e12NMd5Ki24zhJvB.vcf เปลี่ยนค่าของ data query ให้ตรงกับ URL ที่เราเก็บ vcf file (https://en.wikipedia.org/wiki/VCard)

แปลงรูป QR code เป็น char array

โดยใช้ on line tool ตัวนี้ upload รูปเข้าไป เราก็ได้ C code ของ QR code ไปใช้ต่อได้เลยครับ

มา code กันต่อใน VS code

สร้าง folder ใหม่ และสร้าง files หลักๆ ที่จะใช้ใน project ดังนี้ครับ

  • BusinessCard.ino เป็น main file สำหรับเขียน code Arduino
  • Variables.h สำหรับเก็บ QR code ผมแยก QR code มาอยู่ในนี้ เพราะต้องการที่จะ ignore file นี้ออกจาก git repository ครับ เพราะเราไม่ต้องการที่จะให้ URL ของ business card ไปอยู่ใน public GitHub repository

มาดู code กันต่อนะครับ

เริ่มจาก Variables.h ที่ไว้เก็บค่าตัวแปร qrCode

// Learn PROGMEM
// https://www.arduino.cc/reference/en/language/variables/utilities/progmem/
const unsigned char qrCode[] PROGMEM =
{
    // width, height,
    64, 64,
    0xff, 0x01, 0x01, 0xf9, 0xf9, 0x19, 0x19, 0x19, 0x19, 0x19, 0x19, 0x19, 0x19, 0xf9, 0xf9, 0x01, 0x01, 0x01, 0xff, 0xff, 0xe7, 0xe7, 0xe7, 0x01, 0x01, 0x1f, 0x1f, 0x1f, 0x07, 0x07, 0xe7, 0xe7, 0xe7, 0xff, 0xff, 0x1f, 0x1f, 0x1f, 0xe7, 0xe7, 0xe1, 0xe1, 0xe1, 0xff, 0xff, 0x01, 0x01, 0x01, 0xf9, 0xf9, 0x19, 0x19, 0x19, 0x19, 0x19, 0x19, 0x19, 0x19, 0xf9, 0xf9, 0x01, 0x01, 0x01, 0xff, 
    0xff, 0x00, 0x00, 0x7f, 0x7f, 0x60, 0x60, 0x60, 0x60, 0x60, 0x60, 0x60, 0x60, 0x7f, 0x7f, 0x00, 0x00, 0x00, 0xff, 0xff, 0x1c, 0x1c, 0x1c, 0xfc, 0xfc, 0x03, 0x03, 0x03, 0xfc, 0xfc, 0x63, 0x63, 0x63, 0x80, 0x80, 0x1c, 0x1c, 0x1c, 0x9c, 0x9c, 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00, 0x7f, 0x7f, 0x60, 0x60, 0x60, 0x60, 0x60, 0x60, 0x60, 0x60, 0x7f, 0x7f, 0x00, 0x00, 0x00, 0xff, 
    0xff, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x0c, 0x0c, 0x0c, 0x0c, 0x0c, 0x7c, 0x7c, 0x8c, 0x8c, 0x8c, 0x0f, 0x0f, 0x0c, 0x0c, 0x0c, 0x0f, 0x0f, 0x8c, 0x8c, 0x8c, 0xff, 0xff, 0x80, 0x80, 0x80, 0x0f, 0x0f, 0x8c, 0x8c, 0x8c, 0x83, 0x83, 0x70, 0x70, 0x70, 0x0f, 0x0f, 0xfc, 0xfc, 0xfc, 0x0c, 0x0c, 0xfc, 0xfc, 0xfc, 0x8c, 0x8c, 0xfc, 0xfc, 0xfc, 0x0c, 0x0c, 0xfc, 0xfc, 0xfc, 0xff, 
    0xff, 0x3f, 0x3f, 0xc1, 0xc1, 0xff, 0xff, 0xff, 0xce, 0xce, 0x0e, 0x0e, 0x0e, 0x0e, 0x0e, 0x31, 0x31, 0x31, 0xf0, 0xf0, 0xfe, 0xfe, 0xfe, 0x00, 0x00, 0xcf, 0xcf, 0xcf, 0x01, 0x01, 0x31, 0x31, 0x31, 0x30, 0x30, 0x01, 0x01, 0x01, 0x01, 0x01, 0xce, 0xce, 0xce, 0x00, 0x00, 0x31, 0x31, 0x31, 0x00, 0x00, 0x31, 0x31, 0x31, 0xf1, 0xf1, 0x3f, 0x3f, 0x3f, 0x30, 0x30, 0x01, 0x01, 0x01, 0xff, 
    0xff, 0x00, 0x00, 0xff, 0xff, 0x07, 0x07, 0x07, 0xff, 0xff, 0xf8, 0xf8, 0xf8, 0x3e, 0x3e, 0xc6, 0xc6, 0xc6, 0xff, 0xff, 0x3f, 0x3f, 0x3f, 0x06, 0x06, 0x39, 0x39, 0x39, 0xfe, 0xfe, 0xf8, 0xf8, 0xf8, 0xc0, 0xc0, 0x06, 0x06, 0x06, 0xc6, 0xc6, 0x01, 0x01, 0x01, 0x00, 0x00, 0xc6, 0xc6, 0xc6, 0x00, 0x00, 0x06, 0x06, 0x06, 0xc1, 0xc1, 0xfe, 0xfe, 0xfe, 0xc0, 0xc0, 0x06, 0x06, 0x06, 0xff, 
    0xff, 0x18, 0x18, 0x1f, 0x1f, 0x18, 0x18, 0x18, 0x18, 0x18, 0x1f, 0x1f, 0x1f, 0x18, 0x18, 0x18, 0x18, 0x18, 0xf8, 0xf8, 0x00, 0x00, 0x00, 0x1f, 0x1f, 0x00, 0x00, 0x00, 0xe0, 0xe0, 0xf8, 0xf8, 0xf8, 0x00, 0x00, 0xf8, 0xf8, 0xf8, 0xe7, 0xe7, 0x00, 0x00, 0x00, 0xf8, 0xf8, 0x18, 0x18, 0x18, 0xf8, 0xf8, 0x00, 0x00, 0x00, 0xe7, 0xe7, 0x18, 0x18, 0x18, 0x1f, 0x1f, 0x1f, 0x1f, 0x1f, 0xff, 
    0xff, 0x00, 0x00, 0xff, 0xff, 0x03, 0x03, 0x03, 0x03, 0x03, 0x03, 0x03, 0x03, 0xff, 0xff, 0x00, 0x00, 0x00, 0xff, 0xff, 0x03, 0x03, 0x03, 0x03, 0x03, 0x1f, 0x1f, 0x1f, 0x80, 0x80, 0xe3, 0xe3, 0xe3, 0x03, 0x03, 0x7c, 0x7c, 0x7c, 0x63, 0x63, 0x80, 0x80, 0x80, 0xe3, 0xe3, 0x83, 0x83, 0x83, 0xe3, 0xe3, 0x80, 0x80, 0x80, 0x1c, 0x1c, 0x03, 0x03, 0x03, 0x9f, 0x9f, 0x1f, 0x1f, 0x1f, 0xff, 
    0xff, 0x80, 0x80, 0x8f, 0x8f, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0x8f, 0x8f, 0x80, 0x80, 0x80, 0xff, 0xff, 0x80, 0x80, 0x80, 0xf0, 0xf0, 0x8c, 0x8c, 0x8c, 0xf3, 0xf3, 0x83, 0x83, 0x83, 0x8c, 0x8c, 0x8c, 0x8c, 0x8c, 0xf0, 0xf0, 0xf3, 0xf3, 0xf3, 0xf3, 0xf3, 0xff, 0xff, 0xff, 0x83, 0x83, 0x83, 0x83, 0x83, 0x80, 0x80, 0x8c, 0x8c, 0x8c, 0x8f, 0x8f, 0x80, 0x80, 0x80, 0xff, 
};

เขียน code กันต่อใน Businesscard.ino ซึ่งเป็น file หลักของ project

#include <Arduboy2.h>
#include "Variables.h"

Arduboy2 arduboy;

void setContrast(uint8_t value)
{
    arduboy.LCDCommandMode();
    arduboy.SPItransfer(value);
    arduboy.LCDDataMode();
}

void setup()
{
    arduboy.begin();
    arduboy.fillScreen(WHITE);                
    Sprites::drawOverwrite(32, 0, qrCode, 0); 
    arduboy.display();

    // 255 is maximum contrast, 0 is minimum contrast
    setContrast(255);
}

อธิบาย BusinessCard.ino แบบคร่าวๆ

  • include function จาก Arduboy2 library และ qrCode variable
  • ใช้งานแปร arduboy เพื่อเขียนค่า QR code ลงไปที่จอ LCD มีพื้นหลังสีขาว และปรับ contrast สูงสุด
  • สำหรับรายละเอียดของ function ต่างๆ admin จะมา comment เพิ่มเติมให้อีกทีนะครับ

Upload code เข้าไปที่ board

ต่อ Arduboy ผ่าน micro USB cable ที่ status bar มุมด้านล่างขวาของ VS code จะมี option ให้เราเลือก Arduino board และ COM port

  • สำหรับ Arduino board ให้เราเลือก Arduino Leonardo
  • สำหรับ COM port ให้เลือกตามเครื่องของเราว่า Arduboy ได้ต่อเข้ากับ COM PORT อะไร แต่ละเครื่องจะแตกต่างกัน ของผมเป็น COM8 ครับ

เราสามารถใช้ short cut ctrl+alt+u เพื่อ upload ได้เลยครับ

ตัวอย่างการ scan QR code ด้วยกล้องของ iPhone แล้วอ่านค่าได้ URL ออกมา

ใช้ได้ทั้ง Android และ iOS จะใช้ QR scanner ใน LINE app ก็ได้ครับ

enter image description here

เราสามารถนำไปประยุกต์ใช้กับอย่างอื่นก็ได้นะครับ จริงๆ แล้ว Arduboy ถูกออกแบบมาสำหรับเล่นเกมส์หรือสร้างเกมส์ขึ้นมาเล่นเองมากกว่า ถ้าอยากลองดูว่า Arduboy มีเกมส์อะไรบ้าง สามารถเข้าไปดูตาม link นี้ได้เลยครับ https://community.arduboy.com/c/games

สำหรับ code ตัวอย่างนี้ admin ได้ไป discuss กับ community ของ Arduboy เนื่องจาก code version แรกๆ มีปัญหากับ iPhone ที่ไม่สามารถอ่านค่า QR code จากกล้องได้ ท่านใดสนใจรายละเอียดเพิ่มเติมสามารถเข้าไปดูตาม link นี้ได้เลยนะครับ https://community.arduboy.com/t/qr-code-app-not-working-with-iphone/7875/46

Source code in GitHub

https://github.com/codesanook/Codesanook.Examples/tree/master/Codesanook.ArduboyBusinessCard

ขอบคุณครับ