Arduino JSON to Touchdesigner Part 1

บทความจะแบ่งเป็น 2 ตอน
1.Arduino JSON to Touchdesigner Part 1
2.Arduino JSON to Touchdesigner Part 2

ในบทความนี้เราจะมาใช้ Arduino Firware ส่งข้อมูล JSON ไปที่ Touchdsigner ให้แสดงผลภาพกันครับ โดยผมจะตั้งโจทร์ว่าข้อมูลที่ส่งไปจะเป็นข้อมูล Solenoid 4 ตัว กับ Temperature Sensor 2 ตัวครับ โดยข้อมูลที่จะส่งไปเป็น JSON ผ่าน Protocal Serial ไปที่ Touchdesigner และแสดงสถานะของ Solenoid ออกมาเป็นแถบสีขาวดำบนโปรแกรมครับ

โดยจะแบ่งขั้นตอนในส่งข้อมูล JSON จาก Arduino ไปที่ Touchdsigner ดังนี้
1.Arduino Coding
2.Touchdsigner Coding

Arduino Coding

อันดับแรกโจทย์คือเราจะต้องสร้างข้อมูล JSON ของข้อมูล Solenoid 4 ตัวและ Temperature 2 ตัว โดยผมจัดการ Data type เป็นลักษณะนี้ครับ

float temp1 = 0.0;
float temp2 = 0.0;
bool SOL_1 = false;
bool SOL_2 = true;
bool SOL_3 = false;
bool SOL_4 = true;

ต่อมาเราจะนำข้อมูลนี้เก็บอยู่ในรูปของ JSON ครับ
เราสามารถเขียน String เพื่อเก็บค่าเหล่านี้แบบถึกๆก็ได้ครับ

String json = "{\"temp1\":" + String(temp1) + "," +
              "\"temp2\":" + String(temp2) + "," +
              "\"solenoid\":" +
              "{\"s1\":" + String(byte(SOL_1)) + "," +
              "\"s2\":" + String(byte(SOL_2)) + "," +
              "\"s3\":" + String(byte(SOL_3)) + "," +
              "\"s4\":" + String(byte(SOL_4)) + "}" +
              "}";

แล้วลอง print ค่าออกมาจะได้ String ลักษณะนี้ครับ

{“temp1”:50.00,”temp2":125.00,”solenoid”:{“s1”:0,”s2":1,”s3":0,”s4":1}}

ค่า String JSON ที่เราได้มาสามารถเอาไปดูเพื่อ check format ได้ที่ jsoneditoronline เพื่อดูการแสดงข้อมูลของ json ที่ดูง่ายขึ้นได้ ถ้าข้อมูลเริ่มซับซ้อน

แต่เพื่อให้ง่ายขึ้นในการจัดการข้อมูลเราจะมาใช้ library ที่ชื่อว่า ArduinoJson กันครับ

หลังจากลง ArduinoJson เรียบร้อยแล้วการใช้งานขั้นแรกคือ #include <ArduinoJson.h> เข้ามาและประกาศ object ของ StaticJsonDocumentโดยกำหนด size ของขนาดข้อมูลในหน่วย byte ลงไป (ในกรณีที่เก็บข้อมูลมากกว่า 1 KB ให้ใช้DynamicJsonDocument แทน)

#include <ArduinoJson.h>
StaticJsonDocument<1024> sendJson;

วิธีในการใส่ข้อมูลลงไปใน JSON และส่งข้อมูลไปที่ Serial ก็ดูสบายตาขึ้นเยอะครับดังนี้

sendJson["temp1"] = temp1;
sendJson["temp2"] = temp2;
sendJson["solenoid"]["s1"] = byte(SOL_1);
sendJson["solenoid"]["s2"] = byte(SOL_2);
sendJson["solenoid"]["s3"] = byte(SOL_3);
sendJson["solenoid"]["s4"] = byte(SOL_4);
serializeJson(sendJson, Serial); // send json to serial

หรือเราสามารถแปลงค่า JSON ออกมาในรูปของ String ก็ได้ครับ

String str;
serializeJson(sendJson, str);

เพื่อเป็นการ test ผมจะกำหนดให้ค่าให้ตัวแปรทุกตัวมีค่าเปลี่ยนแปลงไปเรื่อยๆ และส่งค่า JSON ไปที่ serial ทุกๆ 1 วินาที ด้วย code ดังนี้ครับ

#include <Arduino.h>
#include <ArduinoJson.h>
StaticJsonDocument<1024> send;
float temp1 = 0.0;
float temp2 = 0.0;
bool SOL_1 = false;
bool SOL_2 = true;
bool SOL_3 = false;
bool SOL_4 = true;
unsigned long time_;
void setup()
{
    Serial.begin(115200);
    time_ = millis();
}
void loop()
{
    if (millis() - time_ > 1000)
    {
        send["temp1"] = temp1;
        send["temp2"] = temp2;
        send["solenoid"]["s1"] = byte(SOL_1);
        send["solenoid"]["s2"] = byte(SOL_2);
        send["solenoid"]["s3"] = byte(SOL_3);
        send["solenoid"]["s4"] = byte(SOL_4);
        serializeJson(send, Serial);
        Serial.println();
        temp1 += 0.2;
        temp2 += 0.5;
        SOL_1 = !SOL_1;
        SOL_2 = !SOL_2;
        SOL_3 = !SOL_3;
        SOL_4 = !SOL_4;
        time_ = millis();
    }
}

Touchdesigner Coding

มาต่อกันใน Touchdesigner เพื่อให้รับค่าจาก Serial ที่เป็น String JSON มาใช้งานได้จะใช้กล่อง Serial ที่อยู่ใน DAT โดยจะปรับค่า Row/Callback Format เป็น One Per Message ให้รับค่ามาที่ละ String Message และปรับค่า Maximum Line เป็น 1

ตอนนี้เราสามารถรับค่ามาจาก Serial แล้วแต่ในข้อมูลมีคำว่า message ติดมาด้วยในบรรทัดแรกเราจะเอามันออกโดยใช้ Select DAT เพื่อเอาบันทัดบนสุดออก จากนั้นแปลงข้อมูลเป็น Text ด้วย Convert DAT เพื่อให้กล่อง JSON สามารถดึงข้อมูลไปใช้ได้

Serial DAT > Select DAT > Convert DAT

จากนั้นใช้กล่อง JSON ดึงค่าออกมาทั้งหมด เราสมารถดึงค่าได้โดยการใช้ $.temp1 หรือ $.solenoid.s1 ก็ทำได้

เปลี่ยนข้อมูล DAT เป็น CHOP และกำหนดค่า first Column เป็น Value

สร้าง Constant TOP ขึ้นมาเอาไว้เป็น background สี ขาว/ดำ ที่ Mapping กับค่าของ Solenoid ที่ส่งเข้ามาแต่ละตัว

ในแต่ละ background ที่ Mapping กับค่าของ Solenoid เราจะเอามาแสดงบน window size 1280x720 px ให้ครบทั้ง 4 อันโดยเราใช้ กล่อง Transform TOP เพื่อปรับ scale และเคลื่อนย้ายตำแหน่งใน window

และใช้กล่อง Over TOP ในการซ้อนภาพแต่ละภาพเข้าด้วยกันจนครบแล้วส่งออกมาที่ กล่อง Out TOP

เมื่อต่อทุกอย่างเรียบร้อยแล้วจะได้ดังนี้ครับ

ผลลัพธ์ที่ได้ครับ การสลับไปมาของสีขาว-ดำ ที่เกิดจากค่า JSON ที่ส่งมาจาก serial

จบแล้วครับสำหรับการส่งข้อมูล JSON ของ Arduino และการรับข้อมูล JSON ของ Touchdesigner ในบทความต่อไปจะทำวิถีทางที่กลับกันบ้างครับ
ให้ Touchdesigner ส่งข้อมูลจาก JSON ไป Arduino ครับ Arduino JSON to Touchdesigner Part 2

• https://arduinojson.org/