Node¶

หากเปรียบการใช้งาน FlowEngine เป็นดั่งการสร้างผังงานทั่วไป (Flowchart) โหนดแต่ละโหนดจะเปรียบได้ดั่งสัญลักษณ์ต่าง ๆ ภายในหน้าผังงานที่มีหน้าที่แตกต่างกัน โดยจะเริ่มต้นจากกล่องหรือสัญลักษณ์ที่อยู่ลำดับบนสุดของผังงาน แล้วไล่ไปตามเส้นทางของผังงานนั้นจนถึงปลายสาย ในแถบด้านซ้ายมือของหน้าต่างปรากฏแพลิตต์ (Palette) ซึ่งรวบรวมโหนดต่าง ๆ เอาไว้ให้ผู้ใช้งานนำไปวางลงในเวิร์คสเปซเพื่อสร้างโปรแกรมใหม่ขึ้นมา ซึ่งโหนดแต่ละโหนดนั้นจะมีการใช้งานและการตั้งค่าที่แตกต่างกันไป ซึ่งจะถูกจัดเรียงอยู่ในหมวดหมู่ต่าง ๆ เป็นการแยกประเภทการใช้งานหลักของแต่ละโหนดให้โหนดประเภทที่คล้ายคลึงกันอยู่ด้วยกัน เช่น โหนดทั่วไป (Common) ซึ่งรวบรวมโหนดพื้นฐานเอาไว้ โหนดเกี่ยวกับเครือข่าย (Network) ซึ่งใช้ในการรับ-ส่งค่าข้อมูลผ่านทางเครือข่ายต่าง ๆ หรือโหนดของแดชบอร์ด (Dashbord) ซึ่งจะช่วยในการสร้างแดชบอร์ดขึ้นจากการประกอบร่างของโฟลว์ที่สร้างไว้ เป็นต้น ผู้ใช้งานสามารถลากโหนดจากแพลิตต์มือลงไปวางในโฟลว์ได้ ซึ่งเมื่อลากโหนดจากแพลิตต์ด้านซ้ายมือลงมาใช้งานแล้ว คำที่ปรากฏอยู่บนโหนดในโฟลว์นั้นอาจจะมีการเปลี่ยนแปลงไป

แพลิตต์¶

แพลิตต์ (Palette) ทางด้านซ้ายของหน้าต่างโปรแกรมได้ทำการรวบรวมโหนดต่าง ๆ ซึ่งถูกติดตั้งและพร้อมสำหรับการใช้งาน โดยจะถูกจัดแบ่งเอาไว้ตามหมวดหมู่ต่าง ๆ เช่น ข้อมูลขาเข้า (Input) ข้อมูลขาออก (Output) หรือฟังก์ชัน (Function) เป็นต้น รวมไปถึงแยกซับโฟลว์ (Subflow) ที่ผู้ใช้งานสร้างเอาไว้เป็นอีกหนึ่งหมวดหมู่ด้วยเช่นกัน ผู้ใช้งานสามารถย่อ-ขยายดูโหนดภายในแต่ละหมวดหมู่ได้โดยการคลิกที่ชื่อของหมวดหมู่ที่ต้องการย่อ-ขยายนั้น แต่หากผู้ใช้งานต้องการย่อหรือขยายหมวดหมู่ทั้งหมดภายในแถบโหนด ผู้ใช้งานสามารถใช้บริการปุ่มกดที่อยู่ด้านล่างของแพลิตต์เพื่อย่อทุกหมวดหมู่ () และขยายทุกหมวดหมู่ () ได้ภายในการคลิกเพียงครั้งเดียว ในกรณีที่ผู้ใช้งานต้องการค้นหาโหนดที่อยู่ภายในแพลิตต์ ผู้ใช้งานสามารถพิมพ์ลงไปในช่องค้นหาด้านบนของแพลิตต์นั้นได้ หากผู้ใช้งานต้องการจะซ่อนแถบเมนูนี้ ผู้ใช้งานก็สามารถซ่อนได้ด้วยการคลิกที่ปุ่มซ่อนที่จะปรากฏขึ้นเมื่อนำเมาส์ไปลอยเหนือขอบด้านขวาของแพลิตต์ ซึ่งจะแสดงมาในลักษณะของลูกศรชี้ไปทางด้านซ้าย

ส่วนประกอบของโหนด¶

สัญลักษณ์ (Icon) ของโหนดนี้
ชื่อ (Name) ของโหนดนี้ หรือในบางโหนดอาจบอกถึงข้อมูลที่บรรจุอยู่ภายในโหนดนั้น
หากมีสัญลักษณ์สามเหลี่ยมสีแดงปรากฏขึ้นบนโหนด นั่นหมายถึงมีข้อผิดพลาดบางอย่างที่เกิดขึ้นภายในการตั้งค่าขอโหนดนี้
หากมีสัญลักษณ์วงกลมสีฟ้าปรากฏขึ้นบนโหนด นั่นหมายถึงมีการเปลี่ยนแปลงที่เกิดขึ้นกับโหนดนี้แต่ยังไม่ได้ทำการบันทึกการเปลี่ยนแปลงนั้น
แต่ละโหนดจะปรากฏจุดสีเทาขึ้นที่ด้านข้างของโหนดซึ่งเป็นจุดเชื่อมต่อที่ใช้ในการเชื่อมต่อระหว่างแต่ละโหนดให้เข้าด้วยกัน ซึ่งจุดสีเทาในแต่ละฝั่งของโหนดนั้นมีการใช้งานและข้อจำกัดที่แตกต่างกัน ดังนี้
1. จุดสีเทาที่อยู่ทางด้านซ้ายของโหนด หมายถึงการรับค่าข้อมูลจากโหนดอื่นเข้ามาใช้งาน ซึ่งแต่ละโหนดจะสามารถมีจุดสีเทาด้านซ้ายได้เพียงจุดเดียวเท่านั้น
2. จุดสีเทาที่อยู่ทางด้านขวาของโหนด หมายถึงการส่งค่าข้อมูลที่อยู่ภายในโหนดนี้ออกไปยังโหนดอื่น ๆ ได้ ซึ่งบางโหนดอาจมีจุดเชื่อมต่อขาออกได้มากกว่าหนึ่งจุด
บางโหนดอาจปรากฏค่าสถานะปัจจุบันของโหนดนั้นไว้ด้านล่างของโหนด เช่น โหนดที่ต้องการแสดงสถานะการเชื่อมต่อ เป็นต้น

ในบางโหนดอาจจะมีปุ่มกดที่อยู่ทางด้านซ้ายหรือขวาของโหนดที่ใช้ในการกระตุ้นการทำงานบางอย่างของโหนด เช่น กระตุ้นให้มีการส่งข้อความออกไปจากโหนดนั้น เป็นต้น

การตั้งค่า¶

ผู้ใช้งานสามารถแก้ไขการตั้งค่าของโหนดแต่ละโหนดได้ด้วยการ double-click บนโหนดนั้น ๆ ที่ต้องการ หรือทำการกดเลือกตัวโหนดที่ต้องการแก้ไข จากนั้นกดปุ่ม Enter บนแป้นคีย์บอร์ด โดยการทำเช่นนี้จะเป็นการเปิดหน้าต่างแก้ไข ด้านขวามือขึ้นมาเพื่อให้ผู้ใช้งานสามารถแก้ไขได้ ซึ่งการตั้งค่าแก้ไขนี้จะประกอบไปด้วยสามส่วนด้วยกัน ตามแถบเมนูในหน้าการตั้งค่า

ค่าคุณสมบัติของโหนด (Properties) ซึ่งจะเปลี่ยนแปลงหน้าตาและลักษณะในการตั้งค่าต่าง ๆ ไปตามประเภทของโหนดนั้น ๆ

คำอธิบาย (Description) คือการเพิ่มคำอธิบายให้โหนดนั้นในลักษณะของคู่มือ (Documentation) ที่ถูกเขียนขึ้นในลักษณะของ Markdown โดยจะปรากฏเป็นข้อความขึ้นที่แถบเมนูรายละเอียด (Information Sidebar) ที่ด้านขวามือของโปรแกรม

ลักษณะการแสดงผล (Appearance) คือการตั้งค่าลักษณะของโหนดนั้นที่จะแสดงผลอยู่บนโฟลว์ เช่น ต้องการให้ปรากฏชื่อ (Label) ประกอบโหนดนั้นหรือไม่ สัญลักษณ์ (Icon) ที่ต้องการใช้งานเป็นแบบใดและสามารถเพิ่มคำอธิบายประกอบการจุดเชื่อมต่อ (Port Labels) ทั้งจุดเชื่อมต่อทางเข้าและทางออกของโหนดนั้นได้อีกด้วย

นอกเหนือจากนั้น หากผู้ใช้งานไม่ต้องการให้โหนดใดมีการทำงานอยู่ภายในโฟลว์ ผู้ใช้งานสามารถคลิกที่ปุ่ม ‘Enabled’ ด้านล่างของหน้าต่างแก้ไขให้กลายเป็น ‘Disabled’ เพื่อปิดการใช้งานโหนดนั้นได้ โดยโหนดและเส้นการเชื่อมต่อไปยังโหนดนั้นจะกลายเป็นเส้นประที่ไม่เกิดการทำงานขึ้น ในทางกลับกัน หากผู้ใช้งานต้องการกลับมาใช้โหนดนั้นอีก ให้ทำการคลิกที่ปุ่มเดิมเพื่อเปลี่ยนจาก ‘Disabled’ ให้กลายเป็น ‘Enabled’ เพื่อใช้งานได้ตามปกติ

โหนดที่ถูกปิดการทำงานเอาไว้จะไม่มีข้อความใด ๆ ที่สามารถไหลผ่านเข้าไปภายในโหนดนั้นได้ และจะไม่มีข้อความใดไหลผ่านได้หากโหนดนั้นถูกลากเชื่อมต่อระหว่างโหนดอื่น ๆ อีกสองโหนด

โหนดหลัก¶

โดยทั่วไปแล้ว จะมีโหนดบางประเภทที่มักถูกนำมาใช้งานอยู่ภายในโฟลว์อยู่เสมอ เปรียบเสมือนโหนดหลักของ FlowEngine ที่ผู้ใช้ควรรู้จักถึงประโยชน์และลักษณะในการใช้งานโหนดเหล่านี้เอาไว้ เช่น โหนดที่ทำการสร้างข้อความขึ้นมาอย่างโหนด ‘Inject’ หรือโหนดที่ทำการรับข้อความที่ส่งออกจากโหนดต่าง ๆ มาแสดงบนแถบเมนูดีบักด้านขวาของโปรแกรมอย่างโหนด ‘Debug’ เป็นต้น โดยโหนดหลัก ๆ เหล่านั้นมีดังต่อไปนี้

Inject¶

Inject คือ โหนดที่อนุญาตให้ผู้ใช้งานสามารถสร้างข้อมูลสมมติขึ้นมาภายในโฟลว์ได้ตามประเภทของค่าข้อมูลที่ผู้ใช้งานต้องการ เช่น ตัวเลข ข้อความ หรืออ็อบเจกต์ เป็นต้น โดยจะมีปุ่มทางด้านซ้ายของโหนดที่ใช้ในการส่งข้อความหรือ ข้อมูลภายในโหนดนี้ออกไปยังโหนดที่เชื่อมต่อกัน ในขณะเดียวกัน โหนดนี้ก็มีส่วนการตั้งค่าที่อนุญาตให้ตัวมันเองสามารถส่งข้อความออกไปจากโหนดได้ตามระยะเวลาที่ถูกกำหนดเอาไว้ เช่น ให้ส่งค่าข้อมูลออกไปจากโหนดนี้ทุก ๆ 5 นาที หรือส่งค่าข้อมูลทุก ๆ หกโมงเช้าของวันจันทร์ หรือแม้แต่ให้ส่งค่าข้อมูลออกจากโหนดนี้ทุก 1 นาทีระหว่างช่วงเวลาหกโมงเช้าถึงเจ็ดโมงเช้าของวันจันทร์ เป็นต้น

ข้อความที่ถูกส่งไปจากโหนดนี้นั้นจะประกอบไปด้วยตัวแปรสองค่าอันได้แก่ payload ซึ่งเป็นข้อมูลของโหนดนี้ซึ่งสามารถเป็นได้ทั้งข้อความ ตัวเลข ค่าความจริง หรือข้อมูลประเภทอื่น ๆ ตามที่ผู้ใช้งานกำหนด ควบคู่กับค่า topic ที่เป็นข้อความส่งไปคู่กัน ซึ่ง topic ที่ถูกส่งออกไปนั้นมักจะถูกใช้เป็นชื่อตัวแปรของค่า payload ที่ถูกส่งออกไปจากโหนดนี้

Debug¶

Debug คือ โหนดที่ใช้ในการแสดงผลข้อความที่ได้รับมาจากโหนดอื่น ๆ ขึ้นมาปรากฏบนแถบเมนูข้าง ‘Debug’ ทางด้านขวาของโปรแกรม

ปุ่มที่ปรากฏอยู่ทางด้านขวาของโหนดนี้จะเป็นการเปิดหรือปิดการแสดงผลลัพธ์ของตัวมันเองเอาไว้ว่าต้องการให้แสดงผลของข้อมูลที่เข้ามาภายในโหนดนี้หรือไม่ ซึ่งประเด็นในการปิดการทำงานของโหนดนี้ในกรณีที่ไม่ได้ถูกใช้งานนั้นเป็น สิ่งที่แนะนำให้ทำอย่างยิ่ง เพราะมันจะทำให้แถบเมนูด้านข้างไม่แสดงข้อความที่ไม่เกี่ยวข้องมากเกินความจำเป็น เช่นเดียวกับการลบโหนดนี้ออกไปจากหน้าโฟลว์ในกรณีที่ไม่ได้ต้องการให้แสดงผลค่าข้อมูลของโหนดที่ส่งมาอีกต่อไป

ตัวอย่าง

เพื่อแสดงผลข้อความว่า ‘Hello World’ ขึ้นมาในแถบเมนูข้างดีบัก ให้ผู้ใช้งานทำการนำโหนด ‘Inject’ มาวางลงบนโฟลว์ เช่นเดียวกับโหนด ‘Debug’ จากนั้นให้ลากเส้นเชื่อมต่อออกมาจากโหนด ‘Inject’ เข้าสู่จุดเชื่อมต่อทางด้านซ้าย ของโหนด ‘Debug’

ภายในโหนด ‘Inject’ นั้น ให้ผู้ใช้งานทำการตั้งค่า ‘payload’ เป็นประเภทของข้อความแล้วพิมพ์คำว่า ‘Hello World’ ลงไป จากนั้นจึงคลิกที่ปุ่ม ‘Done’ เพื่อยืนยันการเปลี่ยนแปลง

เมื่อทำการบันทึกโฟลว์นี้เรียบร้อยแล้ว ทุกครั้งที่ผู้ใช้งานทำการคลิกบนปุ่มที่อยู่ทางด้านขวาของโหนด ‘Inject’ ค่าข้อความที่อยู่ภายในโหนดจะถูกส่งไปแสดงผลบนแถบเมนูข้างดีบักทันที

[
    {
        "id": "4f19b295.ce21dc",
        "type": "inject",
        "z": "8cfb1028.a0d6d",
        "name": "",
        "topic": "",
        "payload": "Hello World!",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 370,
        "y": 960,
        "wires": [["67bbe1fd.ec7f1"]]
    },
    {
        "id": "67bbe1fd.ec7f1",
        "type": "debug",
        "z": "8cfb1028.a0d6d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "x": 590,
        "y": 960,
        "wires": []
    }
]

Change¶

Change คือ โหนดที่อนุญาตผู้ใช้งานสามารถแก้ไขหรือเปลี่ยนแปลงค่าข้อมูลที่รับเข้ามาจากโหนดอื่น ๆ ได้ เช่น การตั้งค่าข้อมูลเป็นค่าที่กำหนด การเปลี่ยนแปลงข้อมูลบางส่วน การย้ายค่าข้อมูลหนึ่งจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่ง หรืการลบค่าข้อมูลนั้นออกไป ซึ่งโหนดประเภทนี้แต่ละโหนดนั้นสามารถมีค่าคำสั่งมากกว่าหนึ่งคำสั่ง ซึ่งจะเรียงลำดับการทำงานเหล่านั้นจากบนลงล่างตามที่ผู้ใช้งานกำหนดเอาไว้

Set คือการเปลี่ยนแปลงค่าข้อมูลที่เข้ามาให้กลายเป็นค่าข้อมูลที่ผู้ใช้งานกำหนดขึ้นมาเองได้

Change คือการเปลี่ยนแปลงค่าข้อมูลที่มีอยู่แล้วด้วยการแทนที่ด้วยผค่าใหม่ที่ผู้ใช้งานกำหนดขึ้นมาลงไป มักใช้ในกรณีที่ค่าข้อมูลเข้ามาในลักษณะของข้อความ โดยจะเป็นการเปลี่ยนตัวอักษรหรือข้อความบางส่วนที่กำหนดให้กลายเป็นค่าอื่นได้

Move จะเป็นการย้ายของมูลจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่ง

Delete จะเป็นการลบค่าข้อมูลบางส่วนออกตามค่าตัวแปรที่ผู้ใช้งานกำหนด

Switch¶

Switch คือโหนดที่อนุญาตให้ผู้ใช้งานสามารถตั้งเงื่อนไขหรือกฎให้กับค่าข้อมูลที่เข้ามาได้ โดยจะส่งผลให้เกิดหลายทางของผลลัพธ์โดยอ้างอิงจากเงื่อนไขของค่าที่เข้ามา ซึ่งชื่อของโหนดนี้มีที่มาจากฟังก์ชันพื้นฐานของการเขียนโปรแกรมที่ใช้ใน การเลือกค่าข้อมูลที่ต้องการใช้เป็นผลลัพธ์ (Switch-case statement) ไม่ใช่สวิตช์ที่เปิด-ปิดในชีวิตจริงแต่อย่างใด ตัวอย่างการใช้งาน เช่น การเปรียบเทียบค่าข้อมูลสองค่า หากค่าข้อมูลแรกน้อยกว่าค่าข้อมูลที่สอง ผู้ใช้งานอาจตั้งค่าให้โฟลว์ทำงานอย่างหนึ่ง และในกรณีที่ค่าข้อมูลที่สองน้อยกว่าค่าข้อมูลแรก ผู้ใช้งานอาจตั้งค่าให้มีการทำงานอีกอย่างหนึ่งได้เช่นกัน เป็นต้น

โดยภายในโหนดนี้จะทำการตรวจสอบค่า msg.payload ที่เข้ามาเป็นค่าเริ่มต้น (ผู้ใช้งานสามารถแก้ไขค่าที่ต้องการตรวจสอบให้เป็นค่าอื่นได้ เช่น การให้ตรวจสอบค่า msg.topic แทน เป็นต้น) ว่าตรงกับเงื่อนไขที่กำหนดเอาไว้หรือไม่ ซึ่งเงื่อนไขที่สามารถตั้งได้ในโหนดนี้มีอยู่ด้วยกัน 4 ประเภท ได้แก่

ค่าข้อมูลนั้นตรงกับเงื่อนไขของค่าข้อมูลที่กำหนดเอาไว้หรือไม่ เช่น มีค่าเท่ากัน มากกว่า หรือน้อยกว่าค่าที่กำหนด เป็นต้น
ตำแหน่งของค่าต่าง ๆ ที่อยู่ในข้อมูลที่เป็นลำดับรายการว่าต้องการค่าข้อมูลส่วนต้น ส่วนท้าย หรือระหว่างตำแหน่งของค่าข้อมูลสองค่า
ค่าข้อมูลที่เข้ามานั้นตรงกับเงื่อนไขที่กำหนดโดยสมการที่ถูกเขียนขึ้นในลักษณะของค่า JSON
ถ้ามิเช่นนั้น (Otherwise) จะเป็นเพียงเงื่อนไขเดียวที่ผู้ใช้งานไม่จำเป็นต้องกำหนดค่าใด ๆ แต่หากค่าข้อมูลที่ได้รับเข้ามาไม่ตรงกับเงื่อนไขใด ๆ ก่อนหน้าเลยแม้แต่เงื่อนไขเดียว เงื่อนไขนี้จะทำการรองรับทุกค่าข้อมูลที่ไม่ตรงกับเงื่อนไขเหล่านั้นทั้งหมด

นอกเหนือไปกว่านี้คือ ผู้ใช้งานยังสามารถกำหนดได้อีกด้วยว่าต้องการให้ตรวจสอบครบทุกเงื่อนไขที่ทำการกำหนดเอาไว้ (Checking all rules) หรือให้หยุดการตรวจสอบเปรียบเทียบทันทีที่มีเงื่อนไขใดตรงกับค่าข้อมูลที่เข้ามา (Stop after first match) ซึ่งการใช้วิธีตรวจสอบทั้งสองแบบนั้นขึ้นอยู่กับลักษณะของโปรแกรมที่ผู้ใช้งานต้องการว่าควรเป็นเช่นไร เช่น หากทุกเงื่อนไขนั้นต่างกันหมด และค่าข้อมูลที่เข้ามามีสิทธิ์ตรงกับค่าข้อมูลเพียงค่าเดียวอยู่แล้วเท่านั้น การใช้การตรวจสอบแบบหยุดทันทีเมื่อพบเงื่อนไขที่ตรงจึงเหมาะสมมากกว่า อีกทั้งยังช่วยลดระยะเวลาในการตรวจสอบเงื่อนไขต่าง ๆ ลงไปด้วย เป็นต้น

ตัวอย่าง

ผู้ใช้งานต้องการตรวจสอบว่า ค่าข้อมูลที่ได้รับเข้ามาจากโหนดก่อนหน้านั้นเท่ากับจำนวนเต็ม 1, 2, 3, และ 4 หรือไม่ โดยให้แสดงผลสรุปสุดท้ายออกมาในลักษณะของคำในภาษาอังกฤษของตัวเลขนั้น ๆ (เช่น หากค่าข้อมูลเป็น 1 จะให้แสดงผลลัพธ์ออกมาว่า ‘One’ เป็นต้น) ซึ่งหากใช่เลขเหล่านี้ จะให้โหนด ‘Switch’ นี้แยกค่าข้อมูลทั้งสี่ค่าออกเป็นคนละจุดกัน แต่หากค่าข้อมูลที่เข้ามาไม่ตรงกับค่าใดเลย จะให้แยกออกมาเป็นอีกจุดเชื่อมต่อขาออกอีกจุดหนึ่ง ซึ่งหมายถึงโหนดนี้จะมีจุดเชื่อมต่อขาออกถึง 5 จุดนั่นเอง

ผู้ใช้งานทำการลากโหนดของข้อมูลที่ต้องการตรวจสอบเข้ากับจุดเชื่อมต่อขาเข้าของโหนดนี้ จากนั้นจึงเปิดหน้าแก้ไขของโหนด ‘Switch’ ขึ้น โดยให้ทำการเพิ่มเงื่อนไขที่ต้องการตรวจสอบให้ครบ 5 เงื่อนไขตามที่กำหนดไว้ข้างต้นโดยการคลิก ที่ปุ่ม ‘+ add’ จากนั้นจึงทำการตั้ง 4 เงื่อนไขแรกให้เป็นประเภทของตัวเลข และใส่ค่าที่ต้องการตรวจสอบไล่ตั้งแต่ 1 ถึง 4 ตามลำดับจากบนลงล่าง โดยใช้เงื่อนไขเป็น ‘==’ เพื่อเปรียบเทียบว่าเท่ากับค่าข้อมูลนั้นหรือไม่ ในขณะที่เงื่อนไขสุดท้ายให้ใช้เป็น ‘Otherwise’ เพื่อใช้ในกรณีที่ค่าข้อมูลที่เข้ามานั้นไม่ตรงกับค่าข้อมูลใด ๆ ด้านบนเลย

เพื่อลดระยะเวลาในการค้นหาเงื่อนไขที่ตรงกับค่าที่กำหนด ให้ผู้ใช้งานทำการเลือก drop-down ที่อยู่ด้านล่างของกล่องเงื่อนไขให้เป็น ‘stop after first match’ เพื่อให้ทำการหยุดเปรียบเทียบกับเงื่อนไขต่าง ๆ ทันทีที่ตรงกับเงื่อนไขใดเงื่อนหนึ่งด้านบนไปแล้ว

ผู้ใช้งานสามารถเปลี่ยนแปลงผลของค่าข้อมูลที่เข้ามาให้กลายเป็นตัวอักษรได้โดยการใช้โหนด ‘Change’ ในการเปลี่ยนแปลงตัวเลขเหล่านั้นโดยใช้การ ‘Set’ เพื่อเปลี่ยนแปลงค่าข้อมูล payload ให้เป็นค่าที่กำหนดในแต่ละเส้นเชื่อมต่อขาออก และเชื่อมต่อเข้ากับโหนด ‘Debug’ เพื่อแสดงผลข้อมูลเหล่านั้น ในขณะที่ค่าข้อมูลที่ไม่ตรงกับเงื่อนไขใด ๆ เลย (เส้นเชื่อมต่อจากจุดเชื่อมต่อขาออกสุดท้าย) ให้แสดงผลข้อความออกมาว่า ‘None of the above’

เมื่อทำการแก้ไขจนเรียบร้อยและบันทึกโฟลว์นี้แล้ว หากผู้ใช้งานลองทำการเปลี่ยนแปลงค่าข้อมูลค่าเข้าให้เป็นค่าต่าง ๆ จะพบว่า ค่าข้อมูลที่แสดงผล ณ แถบเมนูข้างจะปรากฏออกมาเป็นข้อความตามที่กำหนดเอาไว้

[

    {"id":"7488a244.12491c","type":"tab","label":"Test","disabled":false,"info":""},
    {"id":"6e6b719d.c403d","type":"switch","z":"7488a244.12491c","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"else"}],"checkall":"false","repair":false,"outputs":5,"x":470,"y":220,"wires":[["fc4fc7c7.382a98"],["415dc39a.f32fec"],["a0851495.504328"],["66bb150f.60aa6c"],["3fab71f3.ea7b5e"]]},
    {"id":"fc4fc7c7.382a98","type":"change","z":"7488a244.12491c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"One","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":750,"y":140,"wires":[["5a4e183b.6c5ea8"]]},{"id":"415dc39a.f32fec","type":"change","z":"7488a244.12491c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Two","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":750,"y":180,"wires":[["e76d709c.7b6e5"]]},
    {"id":"a0851495.504328","type":"change","z":"7488a244.12491c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Three","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":750,"y":220,"wires":[["afbf2025.886d3"]]},{"id":"66bb150f.60aa6c","type":"change","z":"7488a244.12491c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Four","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":750,"y":260,"wires":[["a19195d2.e630b8"]]},
    {"id":"3fab71f3.ea7b5e","type":"change","z":"7488a244.12491c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"None of the above","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":750,"y":300,"wires":[["a6700551.16ff28"]]},
    {"id":"5a4e183b.6c5ea8","type":"debug","z":"7488a244.12491c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":950,"y":140,"wires":[]},
    {"id":"e76d709c.7b6e5","type":"debug","z":"7488a244.12491c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":950,"y":180,"wires":[]},
    {"id":"afbf2025.886d3","type":"debug","z":"7488a244.12491c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":950,"y":220,"wires":[]},
    {"id":"a19195d2.e630b8","type":"debug","z":"7488a244.12491c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":950,"y":260,"wires":[]},
    {"id":"a6700551.16ff28","type":"debug","z":"7488a244.12491c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":950,"y":300,"wires":[]},
    {"id":"1b3f31f5.16578e","type":"inject","z":"7488a244.12491c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":250,"y":140,"wires":[["6e6b719d.c403d"]]},
    {"id":"cc346254.fe72","type":"inject","z":"7488a244.12491c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":250,"y":180,"wires":[["6e6b719d.c403d"]]},
    {"id":"162a818f.081b2e","type":"inject","z":"7488a244.12491c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"3","payloadType":"num","x":250,"y":220,"wires":[["6e6b719d.c403d"]]},
    {"id":"38b42e67.e55392","type":"inject","z":"7488a244.12491c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":250,"y":260,"wires":[["6e6b719d.c403d"]]},{"id":"ddaf647.7ac2d98","type":"inject","z":"7488a244.12491c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":250,"y":300,"wires":[["6e6b719d.c403d"]]}

]

Split¶

Split คือ โหนดที่อนุญาตให้ผู้ใช้งานสามารถแยกค่าข้อมูลออกจากกันได้ ซึ่งโหนดนี้มักใช้คู่กับโหนด ‘Join’ ที่จะรวบรวมแต่ละค่าข้อมูลเข้าด้วยกันให้กลายเป็นค่าข้อมูลเดียว โหนดนี้จะทำการแยกค่าข้อมูล msg.payload ออกจากกันให้กลายเป็นค่าข้อมูลหลายค่า ซึ่งโหนดการแยกค่าข้อมูลนี้รองรับการแยกค่าข้อมูล 3 ประเภท ได้แก่ ข้อความ (String) รายการ (Array) และอ็อบเจกต์ (Object) โดยในการรับค่าข้อมูลแต่ละค่ามาทำการแยกข้อมูลออกจากกันจะมีการตั้งค่าที่แตกต่างกัน ดังนี้

String/buffer คือค่าข้อมูลที่เข้ามาในรูปแบบของข้อความ ซึ่งจะทำการตัดแบ่งข้อความออกเป็นส่วน ๆ โดยอ้างอิงจากตัวอักษรพิเศษที่ต้องการใช้ในการแบ่ง (ค่าเริ่มต้นคือ ‘n’ หรือการเคาะขึ้นบรรทัดใหม่นั่นเอง) หรือแบ่งข้อความออกเป็นขนาดที่กำหนดไว้ (Fixed length)

Array คือค่าข้อมูลที่เข้ามาในลักษณะรายการของข้อมูลประเภทเดียวกันที่เรียงเป็นลำดับ (เช่น [1, 2, 3, 4, 5] เป็นต้น) ซึ่งโหนดนี้จะทำการตัดแบ่งข้อมูลประเภทนี้โดยใช้ขนาดของรายการของข้อมูลนั้นในการแบ่งแต่ละข้อมูลให้แยกออกจากกันเป็นรายการของข้อมูลที่มีขนาดเล็กลงมากว่าเดิม

Object คือโหนดที่ค่าข้อมูลที่ถูกส่งเข้ามาเป็นคู่ ๆ ระหว่างค่าตัวแปร (Key) และค่าข้อมูลของตัวแปร (Value) นั้นที่ถูกเรียกว่าอ็อบเจกต์

ซึ่งผลลัพธ์ที่ออกมาจากโหนดนี้นั้น จะออกมาในลักษณะของรายการของค่าข้อมูลที่จะประกอบไปด้วยค่าข้อมูลต่าง ๆ ที่รวบรวมข้อมูลที่เกี่ยวกับข้อความที่ถูกตัดแบ่งออกไปว่ามีลักษณะอย่างไร โดยหากผู้ใช้งานนำค่านี้ส่งไปให้ยังโหนด ‘Join’ โหนดนั้นจะสามารถรวมค่าข้อมูลที่ถูกตัดแบ่งเข้าด้วยกันจนกลายเป็นค่าข้อความค่าเดียวได้

Join¶

โหนด ‘Join’ ใช้ในการรวบรวมค่าข้อมูลต่าง ๆ เข้าด้วยกันให้กลายเป็นค่าข้อมูลหรือข้อความเพียงค่าเดียวได้ โดยผู้ใช้งานสามารถเลือกได้ว่าต้องการให้ผลลัพธ์ที่ออกมานั้นอยู่ในลักษณะใด ระหว่างข้อความ รายการของข้อมูล หรืออ็อบเจกต์ ซึ่งโหนดนี้เป็นโหนดที่ทำหน้าที่ตรงกันข้ามกับโหนด ‘Split’ ที่ทำการแยกข้อมูลที่เข้ามาภายในโหนดออกจากกัน โหนดนี้มีการตั้งค่าทั้งหมด 3 รูปแบบ ได้แก่

Automatic เมื่อใช้งานคู่กับโหนด ‘Split’ กล่องนี้จะทำการรวมข้อมูลทั้งหมดเข้าด้วยกันเพื่อย้อนคืนสิ่งโหนดนั้นเคยทำ
Manual ใช้ในการรวบรวมค่าข้อมูลเข้าด้วยกันตามที่ผู้ใช้งานกำหนดว่าต้องการให้ผลลัพธ์ออกมาในลักษณะใด และรวบรวมค่าข้อมูลประเภทนั้นอย่างไร
- String คือต้องการให้ผลลัพธ์ออกมาในลักษณะของข้อความ โดยใช้ตัวอักษรที่กำหนดในการเชื่อมต่อค่าข้อความแต่ละค่าเข้าด้วยกัน ซึ่งค่าเริ่มต้นของการเชื่อมข้อความนี้คือการขึ้นบรรทัดใหม่ (End-line; n)
- Buffer คือต้องการให้ผลลัพธ์ออกมาในลักษณะของบัฟเฟอร์ โดยใช้ตัวอักษรที่กำหนดในการเชื่อมต่อค่าข้อความแต่ละค่าเข้าด้วยกัน ซึ่งค่าเริ่มต้นของการเชื่อมข้อความนี้คือการขึ้นบรรทัดใหม่ (End-line; n)
- Array คือการรวมค่าข้อมูลต่าง ๆ ที่เข้ามาภายในโหนดเข้าด้วยกันจนกลายเป็นรายการของข้อมูล
- Key/Value Object คือการสร้างอ็อบเจกต์ใหม่ขึ้นมา โดยผู้ใช้งานสามารถกำหนดได้ว่าต้องการใช้สิ่งใดเป็นตัวแปร (Key) เพื่อเข้าคู่กับค่าข้อมูลนั้น ซึ่งค่าเริ่มต้นคือการใช้ msg.topic เป็นเสมือน key ของค่าข้อมูล
- Merged Object จะทำหน้าที่รวมคุณสมบัติของแต่ละข้อความเข้าด้วยกันจนกลายเป็นอ็อบเจกต์เพียงอ็อบเจกต์เดียว
- Reduce Sequence จะทำการใส่ค่าสมการให้กับทุกข้อความในลำดับของข้อมูล (Sequence) นั้นเพื่อแปลงให้กลายเป็นค่าข้อมูลเดียว โดยการใช้งานในโหมดนี้จะเป็นการกำหนดว่าโหนดนี้ถูกใช้งานเชื่อมต่อมาจากโหนด ‘Split’ หรือได้รับข้อความที่มีตัวแปร msg.parts อยู่ภายในโหนดนั้น
ค่าข้อมูลที่ถูกส่งเข้ามาในโหนดนี้จะทำการรวมกันกลายเป็นอีกค่าหนึ่งก็ต่อเมื่อมีจำนวนของข้อความที่เข้ามาตามที่กำหนด หรือถูกส่งเข้ามาอยู่ภายในช่วงเวลาในหน่วยวินาทีที่กำหนดหลังจากข้อมูลแรกถูกส่งเข้ามาภายในโหนด (Timeout) หรือมีการตั้งค่าตัวแปร msg.complete มาจากโหนดก่อนหน้า

ตัวอย่าง

ค่าข้อมูล “1, 2, 3” ถูกส่งออกไปจากโหนด ‘Inject’ และต้องการเปลี่ยนแปลงเพื่อให้ผลสุดท้ายของค่าข้อมูลเป็น “1/2/3” ผู้ใช้งานสามารถทำได้โดยการแยกค่าข้อความที่เข้ามาออกจากกันโดยใช้โหนด ‘Split’ เข้าเชื่อมต่อกับโหนด ‘Inject’ นั้น แล้วทำการลากผลลัพธ์เข้ากับโหนด ‘Join’

ทำการตั้งค่าภายในโหนด ‘Split’ ในส่วนของ String/buffer ให้เป็นการแยกค่าข้อมูลโดยใช้ ‘,’

ทำการตั้งค่าภายในโหนด ‘Join’ โดยให้เลือกเป็นหมวด manual เพื่อทำการสร้างข้อความ (String) ที่ถูกเชื่อมต่อเข้าด้วยกันด้วยอักษร ‘/’

เมื่อผู้ใช้งานลองทำการคลิกที่ปุ่มบนโหนด ‘Inject’ จะพบว่า จากค่าข้อมูลที่ถูกตั้งไว้ตอนแรก ได้ถูกเปลี่ยนจนกลายเป็น “1/2/3” ดังที่กำหนดเอาไว้ในที่สุด

[
    {"id": "ac501608.b884f8", "type": "debug", "z": "8cfb1028.a0d6d", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "x": 810, "y": 3480, "wires": []},
    {"id": "2a2ef889.5f1b48", "type": "join", "z": "8cfb1028.a0d6d", "name": "", "mode": "custom", "build": "string", "property": "payload", "propertyType": "msg", "key": "topic", "joiner": "/", "joinerType": "str", "accumulate": false, "timeout": "", "count": "", "reduceRight": false, "reduceExp": "$abs", "reduceInit": "0", "reduceInitType": "num", "reduceFixup": "", "x": 630, "y": 3480, "wires": [["ac501608.b884f8"]]},
    {"id": "be4110af.804a4", "type": "split", "z": "8cfb1028.a0d6d", "name": "", "splt": ",", "spltType": "str", "arraySplt": 1, "arraySpltType": "len", "stream": false, "addname": "", "x": 450, "y": 3480, "wires": [["2a2ef889.5f1b48"]]},
    {"id": "3afcef5d.eb9dd", "type": "inject", "z": "8cfb1028.a0d6d", "name": "", "topic": "", "payload": "1,2,3", "payloadType": "str", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 270, "y": 3480, "wires": [["be4110af.804a4"]]}
]

Function¶

ในกรณีที่ผู้ใช้งานไม่พบโหนดที่เหมาะสมต่อการแก้ไขค่าข้อมูลต่าง ๆ ‘Function’ คือ โหนดที่อนุญาตให้ผู้ใช้งานสามารถเขียนโปรแกรมภาษา JavaScript เพื่อเปลี่ยนแปลงค่าข้อความหรือจัดการกับค่าข้อมูลที่ไหลผ่านเข้ามาภายในโหนดนี้ได้

ในการเข้าถึงค่าข้อมูลที่ถูกส่งมาจากโหนดก่อนหน้า ผู้ใช้งานสามารถใช้ตัวแปร msg เพื่อแทนค่าข้อความนั้นได้ ซึ่งลักษณะของข้อความที่ถูกส่งนั้นจะถูกกล่าวอีกครั้งในหัวข้อการส่งข้อความ

ตัวอย่าง

การสร้างผังงานเริ่มต้นที่จะส่งอุณหภูมิแบบเซลเซียส (°C) เพื่อไปแสดงผลในลักษณะของอุณหภูมิแบบฟาเรนไฮต์ (°F) ณ กล่องรับข้อมูล

ผู้ใช้งานทำการนำกล่องฟังก์ชั่น ‘Inject’ ที่อยู่ในหมวดหมู่ ‘Common’ ลงมาวางในพื้นที่ผังงาน

2. คลิกที่ตัวกล่อง ‘Inject’ เพื่อทำการแก้ไขข้อมูลภายใน โดยให้เปลี่ยนประเภทของข้อมูลที่จะส่งเป็นตัวเลขในกล่อง ‘Payload’ ซึ่งปัจจุบันยังคงเป็นการส่งตราประทับเวลา (Timestamp) อยู่ โดยให้ทำการคลิกที่ drop-down แล้วเลือกเป็นตัวเลข (Number) จากนั้นจึงใส่ค่าอุณหภูมิที่ต้องการลงไป (ในที่นี้จะใช้ 25 องศา)

นำกล่องฟังก์ชั่น ‘Debug’ ที่อยู่ในหมวดหมู่ ‘Common’ ลงมาวางในพื้นที่ผังงาน

เชื่อมต่อกล่องฟังก์ชั่นทั้งสองกล่องเข้าด้วยกัน โดยให้ทำการลากเชื่อมจากจุดสีเทาด้านขวาของกล่องฟังก์ชั่น ‘Inject’ ไปยังจุดสีเทาที่อยู่ด้านซ้ายของกล่อง ‘Debug’ เพื่อให้ข้อมูลอุณหภูมิที่กำหนดไว้ในกล่อง ‘Inject’ นั้นส่งไปแสดงผลยังกล่องฟังก์ชั่น ‘Debug’

บันทึกหน้าผังงานนี้โดยการกดที่ปุ่ม ‘Save’ ด้านบนของโปรแกรม จากนั้นจึงทำการคลิกที่ปุ่มที่อยู่ข้าง ๆ กล่อง ‘Inject’ เพื่อเป็นการทดลองส่งข้อมูลออกไป

ผู้ใช้งานทำการเปิดหน้าต่าง debug ด้านขวาขึ้นมา จะพบว่าข้อมูลอุณหภูมิแบบเซลเซียสที่กำหนดไว้นั้นถูกส่งมาเรียบร้อย อย่างไรก็ตาม ค่าข้อมูลที่ถูกส่งมานั้นยังไม่ถูกเปลี่ยนแปลงหน่วยเป็นฟาเรนไฮต์ดังที่หนดเอาไว้ จึงจำเป็นต้องมีการแก้ไขบางส่วนเพิ่มเติมเพื่อให้ข้อมูลถูกต้อง

ทำการลากกล่อง ‘Function’ ในหมวดหมู่ ‘Function’ ลงมา โดยให้ทำการวางแทรกกลางไว้ระหว่างกล่องฟังก์ชั่นเดิมทั้งสองกล่องหรือทับบนเส้นการเชื่อมต่อเดิมที่มีอยู่ โดยจะทำให้เส้นการเชื่อมต่อนั้นกลายเป็นเส้นประ และเมื่อวางสำเร็จ กล่องฟังก์ชั่นทั้งสามกล่องจะเชื่อมต่อกันโดยอัตโนมัติ

คลิกที่กล่อง ‘Function’ เพื่อเปิดการตั้งค่าด้านในขึ้นมา โดยหน้าต่างจะปรากฏพื้นที่ให้ผู้ใช้งานเขียนโค้ดเพิ่มเติมเพื่อเปลี่ยนแปลงค่าจากกล่องฟังก์ชั่นก่อนหน้าและคืนค่าเป็นค่าใหม่ได้ (ซึ่งในที่นี้ใช้สูตรในการคำนวณเปลี่ยนแปลงอุณหภูมิจากองศาเซลเซียสให้กลายเป็นองศาฟาเรนไฮต์) จากนั้นจึงกด ‘Done’ เมื่อทำการเปลี่ยนแปลงสำเร็จ

ข้อควรรู้ ข้อมูลที่ถูกส่งเข้ามาจากกล่องฟังก์ชั่นก่อนหน้านั้นถูกบรรจุเป็นค่าตัวแปรที่ชื่อว่า ‘Payload’ อยู่ใน Object ที่ชื่อว่า ‘msg’ ซึ่งหากผู้ใช้งานต้องการเข้าถึงข้อมูลตัวแปรนี้ ผู้ใช้งานสามารถเขียน ‘msg.payload’ เพื่อเข้าถึงค่าข้อมูลตัวแปรนั้นได้

ทำการบันทึกหน้าผังงานนี้ จากนั้นจึงกดปุ่มที่กล่องฟังก์ชั่น ‘Inject’ อีกครั้ง แล้วตรวจสอบค่าข้อมูลที่ถูกส่งออกไปในหน้าต่าง debug จะพบว่าค่าข้อมูลที่เข้ามานั้นอยู่เปลี่ยนไปตามสูตรที่กำหนดไว้เรียบร้อย

[
    {"id": "42435e70.dc83d", "type": "inject", "z": "b97e3fb1.484b", "name": "", "topic": "", "payload": "25", "payloadType": "num", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 610, "y": 1380, "wires": [["3254da6e.2910e6"]]},
    {"id": "d0422ab7.b57bf8", "type": "debug", "z": "b97e3fb1.484b", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "x": 850, "y": 1520, "wires": []},
    {"id": "3254da6e.2910e6", "type": "function", "z": "b97e3fb1.484b", "name": "", "func": "msg.payload = (msg.payload * 9 / 5) + 32;\nreturn msg;", "outputs": 1, "noerr": 0, "x": 720, "y": 1460, "wires": [["d0422ab7.b57bf8"]]}
]

Comment¶

ในโฟลว์ที่มีความซับซ้อนหรือมีความยุ่งเหยิงจากการเชื่อมต่อของโหนดมากมายเข้าด้วยกัน ผู้ใช้งานสามารถใส่โหนดที่ไม่ได้รับหรือส่งค่าข้อมูลใด ๆ แต่ต้องการใส่คำอธิบายเพิ่มเติมลงไปในโฟลว์เพื่อความเป็นระเบียบเรียบร้อยและเพื่อสร้างความเข้าใจ ให้กับการอ่านโฟลว์ในภายหลังได้ โดยให้ผู้ใช้งานนำโหนด ‘Comment’ ในหมวดหมู่ ‘Common’ ลงมาใช้งาน

PayloadMessage¶

การทำงานโฟลว์ภายในโฟลว์นั้น จะใช้วิธีการส่งข้อความถึงกันระหว่างแต่ละโหนด โดยค่าข้อความเหล่านั้นที่ส่งไปจะออกไปในลักษณะของอ็อบเจกต์ (Object) อย่างง่ายของ JavaScript ซึ่งจะประกอบไปด้วยตัวแปรต่าง ๆ ภายใน ซึ่งค่าเริ่มต้นของข้อความที่ถูกส่งออกไปนี้จะถูกเรียกว่า msg ซึ่งภายในอ็อบเจกต์ msg จะประกอบไปด้วยตัวแปรหลัก ๆ ชื่อ payload ซึ่งเป็นตัวแปรเริ่มต้นที่

โหนดส่วนใหญ่ในโฟลว์จะนำไปใช้ นอกเหนือจากนั้นยังมีตัวแปรชื่อ _msgid ที่ใช้ระบุตัวตนของข้อความเพื่อใช้ในการติดตามการเคลื่อนไหวของโฟลว์ได้อีกด้วย

{ "_msgid": "12345", "payload": "..." }

ในการเข้าถึงค่าตัวแปรเหล่านี้ที่อยู่ภายในอ็อบเจกต์ msg ผู้ใช้งานสามารถทำได้โดยการใช้ . ต่อท้ายอ็อบเจกต์ msg เพื่อเรียกชื่อตัวแปรที่อยู่ภายใน msg มาใช้งาน ยกตัวอย่างเช่น หากต้องการเรียกดูค่าข้อมูล payload ที่อยู่ภายในอ็อบเจกต์ msg ผู้ใช้งานสามารถใช้ msg.payload ในการเรียกค่าข้อมูลนั้นออกมาดูได้ เป็นต้น ค่าข้อมูลที่ถูกส่งควบคู่ไปกับค่าตัวแปรต่าง ๆ นั้นล้วนแต่ต้องเป็นค่าตัวแปรที่สามารถยอมรับได้โดยภาษา Javascript ทั้งสิ้น เช่น ค่าความจริง (Boolean; true, false) ตัวเลข (Number) ค่าข้อความ (String) รายการข้อมูล (Array; เช่น [1,2,3,4] เป็นต้น) อ็อบเจกต์ (Object; เช่น {“a”: 1, “b”: 2} เป็นต้น) หรือค่าข้อมูลที่ไม่มีข้อมูล (Null) เป็นต้น ในการดูข้อความที่ถูกส่งไปเหล่านี้ ผู้ใช้งานสามารถตรวจสอบได้โดยการส่งข้อความไปยังโหนด ‘Debug’ และดูค่าข้อมูลในแถบเมนู Debug (🐞)

ด้านบนสุดจะแสดงชื่อของตัวแปรที่ถูกส่งไป ซึ่งค่าเริ่มต้น msg.payload จะถูกนำมาใช้งานในส่วนนี้
ถัดจากชื่อของตัวแปรคือประเภทของค่าที่ถูกส่งไป เช่น Object, String, Array เป็นต้น
ถัดลงมาด้านล่างจะแสดงผลค่าข้อมูลต่าง ๆ ที่ถูกนำส่งไปซึ่งผู้ใช้งานสามารถย่อ-ขยายการแสดงค่าข้อมูลได้โดยการคลิกที่ลูกศรที่อยู่ด้านข้างของค่าข้อมูลนั้น ๆ

หากผู้ใช้งานทำการนำเมาส์ไปวางเหนือค่าข้อมูลใด ๆ (ปรากฏเป็นแถบสีเทาที่ค่าข้อมูลนั้น) จะแสดงให้เห็นปุ่มเล็ก ๆ ที่อยู่ด้านบนขวาของข้อมูล:

‘>_’ จะเป็นการคัดลอกที่อยู่ของค่าข้อมูลนี้ออกไปใช้งาน ซึ่งในรูปจะเป็นการคัดลอก payload.data.humidity ออกมา

ข้อสังเกต ข้อความที่ถูกส่งอยู่ภายในโฟลว์นั้นมักจะถูกบรรจุอยู่ใน msg.payload เสมอ ดังนั้นเมื่อผู้ใช้งานต้องการเรียกค่าข้อมูลที่อยู่ในข้อความที่ส่งไป จึงมักจะต้องมีการอ้างอิงถึง payload ดังตัวอย่างข้างต้น

‘ปุ่มที่สอง’ จะเป็นการคัดลอกค่าข้อมูลนั้นออกมาใช้งานโดยตรง เช่น ในรูปจะทำการนำ ‘50’ คัดลอกออกมา เป็นต้น

‘📍’ จะเป็นการปักหมุดข้อมูลไว้ให้แสดงผลทุกครั้งที่มีการรับค่าข้อมูลนี้เข้ามาภายในโหนด ‘Debug’ เดิมที่ใช้งานอยู่ โดยโปรแกรมจะทำการขยายค่าข้อมูลและแสดงให้เห็นค่าข้อมูลในตัวแปรนี้ที่ถูกปักหมุดเอาไว้ออกมาเสมอ

Function Node¶

‘Function’ คือ โหนดที่จะใช้ในการเปลี่ยนแปลงหรือแก้ไขข้อมูลหรือข้อความที่ถูกส่งเข้ามาภายในโหนดนี้ผ่านการเขียนโปรแกรมในภาษา JavaScript ซึ่งข้อความนั้นมักจะถูกบรรจุมาในตัวแปรที่ชื่อ msg และภายในตัวแปรนี้ก็มักจะมี payload ซึ่งเป็นค่าข้อมูลหลักที่จะถูกนำมาใช้งานเสมอ โดยผู้ใช้งานสามารถเข้าถึงค่านี้ได้โดยการเรียกผ่านตัวแปรหลักว่า msg.payload

การเขียนฟังก์ชัน¶

โปรแกรมที่ถูกเขียนบรรจุเข้าไปในโหนดนี้จะถูกเรียกว่า body ซึ่งโดยพื้นฐานแล้ว โหนดนี้ได้เขียนโปรแกรมขั้นต้นเอาไว้ดังตัวอย่างของชุดคำสั่งนี้

return msg;

ชุดคำสั่งเริ่มต้นนี้จะทำการรับค่าข้อมูลที่เข้ามาภายในโหนดแล้วส่งต่อออกไปโดยไม่ได้เปลี่ยนแปลงค่าใด ๆ ค่าข้อมูลอย่างไรก็ออกไปอย่างนั้น ฉะนั้นหากโหนดนี้ส่งค่า null ออกไปจากโหนด นั่นหมายถึงไม่มีค่าข้อมูลใด ๆ ส่งผ่านเข้ามาในโหนดนี้ โหนดฟังก์ชันนั้นจำเป็นต้องส่งค่า msg ออกมาเสมอ อย่างไรก็ดี ผู้ใช้งานสามารถเปลี่ยนแปลงหรือแก้ไขข้อมูลเหล่านั้นก่อนที่จะส่งต่อไปให้ยังโหนดอื่น ๆ ได้ โดยสุดท้ายแล้วข้อความที่ออกไปนั้นไม่จำเป็นต้องเป็นค่าเดียวกันกับค่าที่เข้ามาภายในโหนดเลยด้วยซ้ำ นั่นหมายถึงอ็อบเจกต์ที่เข้ามาภายในโหนดนี้อาจจะมีค่าคุณสมบัติภายในที่แตกต่างจากอ็อบเจกต์สุดท้ายที่ถูกสร้างขึ้นมาภายในโหนดฟังก์ชัน

var newMsg = { payload: msg.payload.length }
return newMsg;

สิ่งเดียวที่ผู้ใช้งานควรระวังในการเปลี่ยนแปลงค่าข้อมูลเมื่อจะส่งออกไปคือ มันอาจเป็นการทำลายบางโฟลว์ให้มีข้อผิดพลาดเกิดขึ้นได้ ฉะนั้นแล้วโหนดฟังก์ชันจึงควรจะส่งค่าข้อมูลที่มีตัวแปรเดิมออกไปจากโหนดฟังก์ชันนี้ด้วย

ส่งออกข้อมูลหลายค่าในครั้งเดียว¶

โหนดฟังก์ชันนั้นนอกเหนือจากจะสามารถเปลี่ยนแปลงค่าข้อมูลที่ไหลผ่านเข้ามาได้แล้วนั้น ยังสามารถส่งค่าข้อมูลออกจากโหนดนี้ได้มากกว่าหนึ่งค่าอีกด้วย ซึ่งจำนวนข้อมูลที่ผู้ใช้งานต้องการให้ส่งออกไป สามารถตั้งค่าได้ที่โดยการเปิดหน้าการตั้งค่า ของโหนดนี้ขึ้นมาแล้วเปลี่ยนตัวเลขที่ ‘Output’ การส่งออกข้อมูลหลายค่านี้มีประโยชน์ในบางกรณีที่ต้องการจะส่งค่าข้อมูลเดียวกันจากการแปลงผลที่แตกต่างกันไปให้ยังโหนดที่แตกต่างกัน ตัวอย่างเช่น ผู้ใช้งานอาจต้องการส่งค่าที่ได้รับ topic มาว่า ‘banana’ ไปให้ยังหัวข้อส่งออกที่สองแทนจุดเชื่อมต่อส่งออกแรกของโหนด

if (msg.topic == "banana") {
    return [null, msg];
} else {
    return [msg, null];
}

หรืออีกตัวอย่างในการส่งค่าข้อมูลเดิมไปยังจุดเชื่อมต่อขาออกแรก และความยาวของค่า payload ไปยังจุดเชื่อมต่อขาออกที่สอง

var newMsg = { payload: msg.payload.length };
return [msg, newMsg];