14° : สิบสี่องศา Programmer's Blog

พฤษภาคม 8, 2017

MQTT + Silk

Filed under: Arduino,Development,Embedded,ESP8266,hardware,javascript,NodeMCU,Programming Langauge,Qt,Web Application — ป้ายกำกับ:, , , — สี่สิบดีกรี @ 2:13 pm

Silk เป็น web framework อีกตัวหนึ่งครับ แต่ไอเดียจะแตกต่างจากตัวอื่นๆที่เคยเขียนถึงไป ตัวนี้ค่อนข้างถูกจริตกับผมมากกว่าตัวอื่นๆ เนื่องจากมันคือการเขียน HTML document ด้วย QML

การที่มันยังสามารถใช้ model/view ของ QML ได้นั้น ทำให้เราสามาารถดึงข้อมูลจาก C++ model ไปแสดงใน HTML table ได้อย่างง่ายดาย

การที่มันยังเขียน web ได้ในแบบเดิมๆ ใช้ javascript ได้ ก็ทำให้ไม่ต้องเปลี่ยนแปลงวิธีการเขียนในส่วนนี้ไป

และด้วยความที่มันเป็น C++ web server โดยตัวมันเอง มันน่าจะเหมาะกับโปรเจ็คเล็กๆ อย่างพวก IoT ที่ไม่ได้ต้องการรองรับ client จำนวนมาก

จากที่ว่ามา ผมจึงเอามันมาลองกับ MQTT โดยมี hardware คือ nodemcu เอามาต่อกับ sensor DS18B20 เขียนโปรแกรมด้วย Arduino IDE โดย ก็ต้องลง library ESP8266, OneWire, PubSubClient (MQTT), DallasTemperature เพื่อให้ใช้อ่านค่าอุณหภูมิและส่งข้อมูลไปให้ MQTT server ผ่าน wifi ได้

 

ตัว server ก็เป็น linux รัน mosquitto ที่รองรับ websocket และ รัน silk webserver โดยเขียน web app ให้ subscribe MQTT message ผ่าน websocket ได้โดยใช้ paho javascipt client และใช้ justgage แสดงผลข้อมูลที่ได้ในแบบ graphics

เมษายน 19, 2015

QChart.js : awesome chart for QML

Filed under: Development,javascript,Programming Langauge,Qt — ป้ายกำกับ:, , , , — สี่สิบดีกรี @ 9:46 pm

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

control อีกสองตัวที่อยากพูดถึง ซึ่ง Qt น่าจะเอามาใส่ไว้ในเวอร์ชั่น Community ก็คือ date picker และ tumbler ผมก็ไปหามาใช้จนได้ อิอิ จริงๆ tumbler เนี่ยเคยมีอยู่ใน QML1 บน Qt 4.8 นะถ้าผมจำไม่ผิด เป็นตัวอย่างโค้ดหรืออย่างไรเนี่ยแหละ

ครับ หายไปนาน ก็มีเรื่องมาฝากกันเท่านี้ก่อน ในฐานะ Qt fan club อีกเช่นเคย ฮ่าๆ ผมก็ต้องเรียนรู้ หัดเขียน javascript เพิ่มขึ้นมาอีกอย่างหนึ่ง เพื่อให้ใช้งาน QML ได้อย่างเต็มเม็ดเต็มหน่วย ฟีเจอร์เด็ด พวก  animation ของมันผมก็ยังไม่ค่อยคล่อง มีโอกาสจะนำมาเสนอในคราวต่อๆไปครับ

อ้างอิง : https://github.com/jwintz/qchart.js/tree/master

insta_analiytics_3

Powered by WordPress