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

มกราคม 7, 2015

QR code generator and Printing

Filed under: Development,Linux,Qt — ป้ายกำกับ:, , — สี่สิบดีกรี @ 4:47 pm

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

ผมใช้ libPrison ในการสร้าง QR ก็สะดวกง่ายดายดีครับ ในส่วนของการปรินท์ Qt ก็ให้ API มาให้ค่อนข้างดีทีเดียว การเรียกใช้ print preview dialog การเพิ่มจำนวนหน้า ทำได้ไม่ยากเลย

เหลือที่จุกจิกกวนใจก็ตรงการกำหนดขนาดและทำการ resize สิ่งที่เราจะวาดให้ตรงกับขนาดของกระดาษที่เราจะพิมพ์นั่นละครับ ผมใช้วิธี resize และ render widget เอาเลย โดยทำ widget ที่มีส่วนประกอบและวาง layout ดังรูป กำหนดขนาดและจำนวนที่จะ render ให้พอดีกับขนาดของกระดาษโดยประมาณเอา

10872676_564210363713443_2086052009_n1

กันยายน 23, 2014

QR decoder app on Android

Filed under: Android,Embedded,Image Processing,Linux,Qt — ป้ายกำกับ:, , , , — สี่สิบดีกรี @ 7:57 pm

Screenshot_2014-09-23-18-27-55

คราวก่อน เขียนโปรแกรม QR decoder บน pc ไปแล้ว วันนี้เป็นการทดสอบเอาโปรแกรมไปรันบนเครื่องแอนดรอยด์ จุดที่น่าสนใจคือ การคอมไพล์ zbar library ด้วย ndk ส่วนหนึ่งผมทำตามแนะนำจากเว็บนี้ http://www.blackdogfoundry.com/blog/zbar-bar-code-qr-code-reader-android/ เพื่อให้ได้ libzbar.so และ ฟังก์ชั่นการ decode ภาพออกมา

ส่วนต่อมาคือการเอาไปใช้ ผมเขียนด้วย QML ดัดแปลงจาก https://www.ics.com/blog/qt-5-multimedia-qml-elements#.VCFtHdazCfg ซึ่งจริงๆก็คล้ายๆกับ ใน document ของ Qt เองครับ จุดที่น่าสนใจอีกจุดคือการทำให้ QML สามารถเรียกฟังก์ชั่น decode ใน C++ ได้

และส่วนสุดท้ายครับ คือการ deploy หรือการนำโปรแกรมขึ้นไปรันบนอุปกรณ์ที่เป็น Android จริงๆ ซึ่งประเด็นอยู่ที่การนำเอา libzbar.so ใส่เข้าไปด้วย ก็ศึกษาได้จาก http://www.kdab.com/qt-android-episode-3/

การเขียนโปรแกรมครั้งเดียวแล้วสามารถรันได้หลายๆแพลตฟอร์มด้วย Qt เป็นอะไรที่เจ๋งจริงๆเลยครับ อิอิ

Powered by WordPress