CoP PSU IT Blog – Page 32 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

Firebase และ Arduino ตอนที่ 2

June 22, 2021 12:04

ในตอนที่ 2 เราจะมาดูภาคการเขียนโปรแกรมในส่วนของ board โดยใช้ซอฟต์แวร์ arduino-1.8.10 เขียน sketch แล้ว upload เข้า board เพื่อใช้งานร่วมกับ Firebase หากบังเอิญ search มาเจอบทความนี้ก่อน ย้อนกับไปอ่าน ตอนที่ 1 ได้ครับ เริ่มต้นเราต้องดาวน์โหลดซอฟต์แวร์ที่จะต้องใช้ ดังรูป รันโปรแกรมที่ดาวน์โหลดมา arduino-1.8.10-windows.exe (ส่วนอีก 2 ไฟล์ที่เป็น .zip แตกไฟล์ออกมา CH341SER_WINDOWS.zip ใช้เพื่อให้ USB port ของ Notebook จำลองเป็น Serial port COM3 ได้ และ firebase-arduino-master.zip จะใช้ในโปรแกรม Arduino ในขั้นตอน Add Libraries) ในไดเรกทอรี libraries จะเห็นว่าเราใช้งาน libraries ใดได้บ้างในการเขียนโปรแกรม และเมื่อเราจะเขียนโปรแกรม จะต้องวางไว้ในไดเรกทอรี ดูตัวอย่าง เอาโค๊ดของ project ชื่อ Firstapp-IoT ได้ที่ link นี้ https://github.com/woonpsu/firstapp-iot เมื่อรันโปรแกรม Arduino ในครั้งแรก ให้ตั้งค่าเพิ่มที่ File > Preferences ตัวอย่าง Arduino board ที่ใช้ ESP8266 ต้องใส่ URL: https://arduino.esp8266.com/stable/package_esp8266com_index.json ถัดไป ตั้งค่าเลือก Board ให้ตรงกับที่เราซื้อมา (ให้ข้อมูลเพิ่มครับ ที่ซื้อมาคือรุ่น บอร์ดทดลอง NodeMCU V2 NodeMCU V2 ESP8266 Development Kit ESP-12F/N) เมื่อเราเขียน Sketch book เสร็จ ไม่ error แล้ว เราจะอัปโหลดใส่ board ในขั้นตอนนี้ เราใช้สาย USB data ต่อ board เข้ากับ USB port ในรูปจะเห็น COM3 หากใช้สาย USB Charger จะไม่เห็น Serial port นะ เมื่อพร้อมก็คลิกปุ่ม upload ต่อไปเราก็เปิดหน้าต่าง Serial Monitor เพื่อดูผลลัพธ์ หรือ debug จะเห็นว่า โปรแกรมมีการใช้คำสั่ง Serial.println(“WiFi connected”); เพื่อ debug ผลลัพธ์เมื่อเราใช้โปรแกรม JavaScript สั่งเปิด LED1 และ LED2 และตั้งสีให้กับหลอดสี เป็น สีเขียว อ้างอิง: อ่านเยอะ ๆ และ search จาก google หลายเพจมาก ๆ ได้รับข้อมูลเรื่องการเชื่อมต่อเน็ต Arduino ไปยัง Wi-Fi 802.1x จากเพื่อนชื่อโป้งทำงานที่ CLIB PSU โดยนักศึกษาฝึกงานเขียนโค๊ดไว้บน github ที่นี่ https://github.com/ton28919/firedoor/blob/main/nodeMCU_WifiEnterprise/nodeMCU_WifiEnterprise.ino โปรแกรม JavaScript ที่เขียนก็ได้จาก Firebase Document ส่วนมาก ต้องขอบคุณเพจนี้ด้วย เป็นเพจแรก ๆ ที่จุดประกายให้ http://www.daydev.com/firebase/web-authentication-with-firebase.html และ https://adamblog.co/firebase-authentication-with-firebaseui/ Firebase UI https://github.com/firebase/firebaseui-web และขอบคุณทุกเพจบนโลกใบนี้ที่เขียนแนะนำโดยไม่หวังสิ่งใดตอบแทน

Firebase และ Arduino ตอนที่ 1

June 22, 2021 12:04

บทความนี้ ตอนที่ 1 จะพูดถึง (แจกโค๊ด) Firebase Realtime Database และ ตอนที่ 2 จะพูดถึง Arduino โดยที่ในตอนที่ 1 จะเป็นโปรแกรมให้เห็นว่า นำข้อมูลใส่เข้าใน Firebase Realtime Database ได้อย่างไร แล้วในตอนที่ 2 เราจะโปรแกรม Arduino ให้เชื่อมต่อเน็ตผ่าน Wi-Fi 802.1x แล้วหลอด LED จะถูกเปิด/ปิด หรือ เปลี่ยนสี เมื่อมีการสั่งจากโปรแกรม JavaScript ในตอนที่ 1 ในขั้นตอนการติดตั้ง Firebase สมัครใช้งาน สร้าง Database ลองหาอ่านกันเอาเองนะครับ มันง่าย ๆ ครับ เรามาเริ่มต้นที่มี Database ชื่อว่า Firstapp-IoT ที่ผมสร้างไว้แล้ว ขั้นตอนมาเราจะโปรแกรม JavaScript โดยการเขียนโปรแกรมไว้ใน local folder เครื่องของผมใช้ Windows 10 ผมก็สร้างไว้ที่ C:\myFirebase และก็ไปดาวน์โหลด firebase-tools-instant-win.exe เพื่อใช้ในการทดสอบแบบ localhost ด้วยคำสั่ง firebase serve แล้วทำการทดสอบโปรแกรมผ่านเว็บเบราว์เซอร์ที่ localhost:5000 และเมื่อโปรแกรมพร้อมใช้ก็นำขึ้นไปไว้ใน Firebase hosting ด้วยคำสั่ง firebase deploy –only hosting แล้วก็สามารถใช้โปรแกรมผ่านทางเว็บเบราว์เซอร์ที่ firstapp-iot.web.app รัน firebase-tools-instant-win.exe ในขั้นตอน setup ครั้งแรก เราสร้างไดเรกทอรีชื่อ nodemcu จะมีคำถามว่าจะสร้าง project ใหม่ หรือ ใช้ที่มีอยู่ ผมมีอยู่แล้ว ดังรูป และถัดไป เราจะเขียนโปรแกรมภาษา JavaScript ไว้ที่เรา setup ไว้ ไฟล์แรกที่เราจะเขียนคือ index.html และเมื่อเสร็จเราก็รัน firebase-tools-instant-win.exe กลับเข้ามา และทดสอบโดยคำสั่ง firebase serve และเมื่อโปรแกรมเริ่มใช้งานได้แล้ว ก็นำไปไว้บน Firebase hosting ด้วยคำสั่ง firebase deploy ดังรูป ผลลัพธ์ของโปรแกรม เมื่อเราใส่ email ที่อนุญาต ก็จะเข้าสู่หน้าต่อไปที่จะทดสอบการอัปเดตค่าข้อมูลใน Firebase Realtime Database ของ project ชื่อ Firstapp-IoT ดังรูป เมื่อคลิกที่ SET LED ON ได้ผลลัพธ์แบบนี้ สำหรับเว็บเพจ setled.html เป็นการทดสอบให้เห็นว่า เราสามารถตั้งค่า Firebase authentication ด้วย email แล้วอนุญาตให้แก้ไขข้อมูลใน Firebase Realtime Database ได้ โดยต้องไปตั้งค่า Rules ให้ดี ถัดไป คลิกที่ Goto NodeMCU ESP8266 Project ผมจะสาธิตการควบคุม Arduino NodeMCU ESP8266 ให้เปิด/ปิด LED ตรงนี้เชื่อมต่อผ่านเน็ต Wi-Fi 802.1x ทดสอบคลิก Set LED On และเลือก GREEN และดูผลลัพธ์ที่อุปกรณ์ ดังรูป ถัดไปลองอีกตัวอย่าง คลิก Set LED Off และเลือก BLUE และดูผลลัพธ์ที่อุปกรณ์ ดังรูป จบการทดสอบ จากรูปเราต่อวงจรตามตำราที่เล่าขานกันในอินเทอร์เน็ต ตรงนี้หาอ่านกันเอาเองนะครับ สังเกตเราจะใช้ก้อนถ่านพร้อมราง แต่เราก็สามารถเลือกใช้สายชาร์ตจ่ายไฟได้ ดังรูป ต่อไปมาดูส่วนโปรแกรมกันบ้าง คลิกเข้าไปในไดเรกทอรี public จะเห็นดังรูป แจกโค๊ดให้ครับ เข้าไปที่ github ตาม link นี้ https://github.com/woonpsu/firstapp-iot ถัดไปเรามาดูส่วนที่เราต้องมีใน

โหมดไม่ระบุตัวตน ?

May 31, 2021 19:35

สวัสดีท่านผู้อ่านทุกท่าน Blog ปิดท้ายของเดือนพฤษภาคม ปี 64 นี้ ผู้เขียนขอเล่าในเรื่องของความรู้เพิ่มเติมในการใช้ Browser ละกันเนอะ จากการใช้งานท่องเว็บของเราในแต่ละวัน คาดว่าผู้อ่านแต่ละท่าน คงจะคุ้นเคยกับคำว่า โหมดไม่ระบุตัวตนกันมาบ้างแล้ว จริงๆ ในแต่ละ Browser เนี่ย ชื่อเรียกมันก็จะต่างกันนะ เช่น Incognito , Private หรือ Inprivate เป็นต้น ซึ่งทั้งหมดทั้งมวลมันก็คือ โหมดไม่ระบุตัวตนนั่นแหละ โหมดไม่ระบุตัวตน คืออะไร ? เอาแบบภาษาบ้านๆ พูดง่ายๆ ก็คือ เป็น Feature นึงที่มีอยู่ในทุกๆ Browser โดยโหมดนี้ จะทำให้ Browser ของเราจะไม่จัดเก็บข้อมูลของเว็บที่เราเข้า ไม่มีที่อยู่ ไม่มี cookie ไม่มีข้อมูลที่เราป้อนก่อนหน้า ก็คือไม่มีอะไรเลย ! มันก็คงคล้ายๆ กับการทำให้ Browser ของเราความจำเสื่อมชั่วคราวนั่นแหละนะ คราวนี้มาขยายความแบบทางการกันหน่อย Browser จะไม่เก็บประวัติการเข้าใช้งานเว็บไซต์ Browser จะไม่เก็บ cookie ของเว็บไซต์ และ ข้อมูลที่กรอกในฟอร์มต่างๆ แต่ถ้ามีการ bookmarks หรือดาวน์โหลดไฟล์ระหว่างใช้งาน ข้อมูลเหล่านั้นก็จะยังคงอยู่ ถึงแม้จะเราจะปิดโหมดนี้ไปแล้ว ผู้ให้บริการอินเทอร์เน็ตยังคงเห็นการเข้าใช้งานของเราตามปกติ IP ที่เข้าใช้งานเว็บไซต์ ไม่ว่าจะโหมดปกติ หรือโหมดไม่ระบุตัวตน ยังเป็น IP เดียวกัน และโหมดไม่ระบุตัวตนมันไม่ได้ซ่อนที่อยู่ IP ของเราให้นะทุกคนนนน !! การใช้งานโหมดนี้ในเครื่องสาธารณะ หรือเครื่องที่มีความเสี่ยง โหมดนี้ไม่ได้ช่วยให้ความเสี่ยงเหล่านั้นลดน้อยลง พออ่านไปอ่านมาจนถึงตรงนี้ หลายๆ ท่านคงรู้สึก เอ๊ะ ! แล้วนี่มันเป็นการท่องเว็บแบบส่วนตัวจริงเหรอ ทำไมรู้สึกเหมือนๆ จะไม่ส่วนตัวยังไงยังงั้นกันใช่มั้ย … เอาจริงๆ ผู้เขียนมองว่า เราก็ต้องเข้าใจให้ถูกต้องกันก่อน ว่าโหมดไม่ระบุตัวตนตัวนี้เนี่ย เหมาะกับการใช้งานแบบไหน ขอบเขตการทำงานของมันเป็นยังไง แล้วมันเหมาะ หรือไม่เหมาะ กับการใช้งานแบบใดกันละ ? ถ้าตามความเข้าใจของผู้เขียน ผู้เขียนเข้าใจว่า เหมาะกับกรณีที่เราไปใช้งานตามร้าน Internet cafe หรือ เครื่องสาธารณะ ที่เราไม่ต้องการให้ Browser มีการเก็บประวัติการเข้าใช้งาน เหมาะกับกรณีที่เราต้องการเข้าใช้บริการต่างๆ พร้อมกันมากกว่า 1 account ข้อนี้ส่วนตัว แหะๆ ผู้เขียนคิดว่ามันเหมาะกับงานของผู้เขียน คือ ใช้สำหรับใช้ทดสอบระบบ หรือเว็บที่เราพัฒนา เนื่องจากจะไม่มีการจำ cache ใด ให้เราปวดหัว ^^ ไม่เหมาะกับกรณีที่เราไปใช้งานในทางที่ไม่ดี เพราะมันยังสามารถโดนติดตามได้อยู่ … อย่าลืมระวังข้อนี้ด้วยนะ !! หากสิ่งที่ท่านผู้อ่านต้องการ ที่ไม่ใช่แค่ไม่เก็บประวัติ ไม่เก็บ cookie เหล่านี้ ทางผู้เขียนขอแนะนำให้ไปศึกษาใช้การ VPN หรือ Proxy ควบคู่ไปกับการใช้โหมดไม่ระบุตัวตน สุดท้ายแล้ว เจ้าโหมดไม่ระบุตัวตนนี้ ก็ยังคงเป็นอีกตัวเลือกที่ง่าย และยังคงมีประสิทธิภาพในระดับหนึ่ง ทั้งนี้ก็ขึ้นอยู่กับลักษณะการใช้งาน และสภาพแวดล้อมของแต่ละคน ผู้เขียนหวังเป็นอย่างยิ่งว่า Blog นี้จะยังคงเพิ่มความเข้าใจ ให้ความกระจ่างกับผู้อ่านในเรื่องของ โหมดไม่ระบุตัวตน ได้ไม่มากก็น้อยแหละเนอะ ขอบคุณแหล่งข้อมูลข่าวสาร และความรู้ >>> https://www.techhub.in.th/

วิธี Install Windows Service (ที่เขียนด้วย VS.Net) ตัวเดียวกันมากกว่า 1 ครั้ง

May 31, 2021 12:38

ปกติวิธี Install Windows Service ที่เขียนด้วย VS.Net เป็นดังนี้ InstallUtil.exe MyService.exe และคำสั่ง Uninstall Windows Service ที่เขียนด้วย VS.Net เป็นดังนี้ InstallUtil.exe /u MyService.exe อย่างเช่นมีไฟล์ Windows Service ชื่อ KillLoginSession โดยจะมีทั้ง file exe และ file config ไว้ใน folder C:\service1 ดังรูป เมื่อ run คำสั่งดังนี้ %WINDIR%\Microsoft.NET\Framework\v2.0.50727\InstallUtil.exe c:\service1\KillLoginSession.exe แล้วเปิด Services ของ Windows ขึ้นมา จะมี Service KillLoginSession ปรากฎดังรูป ซึ่ง Service ตัวนี้จะมี Properties ดังนี้ คือมี Service name = KillLoginSessionService และมี Display name = ALIST Kill Login Session Service ถ้าต้องการติดตั้ง Service KillLoginSession เพิ่ม เพราะบางครั้งต้องการใช้ Service เดิมแต่ปรับแก้ค่าที่ config file ก็ทำการ copy Service KillLoginSession ไปไว้เพิ่มใน folder C:\service2 ดังรูป แล้ว run คำสั่ง %WINDIR%\Microsoft.NET\Framework\v2.0.50727\InstallUtil.exe c:\service2\KillLoginSession.exe จะปรากฎ error ดังรูป คือมี service นี้ติดตั้งอยู่แล้ว วิธีแก้คือ ให้ใส่ code ดังนี้ sc create <servicename> binpath= “<pathtobinaryexecutable>” [option1] [option2] [optionN] <servicename> คือ ชื่อ service ที่กำหนดขึ้นมาโดยต้องไม่ตรงกับ service ที่ทำงานอยู่ <pathtobinaryexecutable> คือ ตำแหน่งที่ตั้งของ file service ที่จะทำการ Install [option] ไว้สำหรับใส่คำสั่งอย่างอื่นเพิ่ม เช่น Display Name จะมีหรือไม่มีก็ได้ ใส่ code ตามข้างบนได้ดังนี้ sc create KillLoginSessionTest binpath=”C:\service2\KillLoginSession.exe” DisplayName=”ALIST Kill Login Session Test” จะได้ผลดังรูป มี Properties ดังนี้ คือมี Service name กับ Display name ตามที่ได้กำหนดไว้ คำสั่งสำหรับ Uninstall ก็คือ sc delete <servicename> ถ้าต้องการ Uninstall Service ที่สร้างขึ้นก็ใส่ code ดังนี้ sc delete KillLoginSessionTest

สร้างเงาให้กับวัตถุด้วย SmoothShadow

May 31, 2021 12:19

Layer of shadows คือจำนวนชั้นของเงา ปกติโดยทั่วไปเราจะใช้งานกันประมาณ 1-2 layer ซึ่งจำนวนของชั้นเงานี้จะสัมพันธ์กับตัวปรับแต่งด้านล่าง เช่นในรูปตั้งไว้ที่ 4 layers หรือเงา 4 ชั้น เราก็จะสามารถปรับกราฟการไล่เงาซึ่งจะแบ่งไว้ 4 ช่วงของแสงไล่ตั้งแต่ขาวไปดำ 4 ระดับ ถ้าปรับเป็น 7 layers ระบบก็จะซอยช่วงเทาเพิ่มมามากขึ้น ก็จะไล่จากขาวไปดำ 7 ระดับ Final transparency คือความเข้ม/ความโปร่งใสของเงา ค่ายิ่งน้อยเงาของเราจะยิ่งโปร่งแสง(จางขึ้น) ค่ายิ่งมากเงาของเราก็จะยิ่งทึบแสง(เข้มขึ้น) ส่วนของกราฟจะแสดงถึงการไล่แสงของเงา โดยเราจะสามารถดึงจุดวงกลมสีชมพูได้ เพื่อปรับความโค้งของกราฟ เงาก็จะมีการไล่แสงที่ต่างกันออกไป และส่วนของ Reverse alpha คือการกลับกันของเงา ไล่จากขาวไปดำ Final vertical distance คือการไล่แสงในแนวตั้ง ซึ่งจะสามารถไล่แสงได้แค่ทิศทางเดียวคือ แสงจากบนลงล่าง เงาด้านล่างของวัตถุ ยิ่งเพิ่มค่ามากเงาก็จะเพิ่มมาด้านล่างมากขึ้น ค่าลดลงเงาในแนวตั้งก็จะน้อยลง ส่วนกราฟจะแสดงปริมาณของเงาในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้ Final blur strength คือระดับความเบลอของเงา ยิ่งเพิ่มค่าเบลอ เงาของเราก็จะเบลอ ดูนวลตา กลมกลืนมากขึ้น ถ้าลดค่าความเบลอ เงาก็จะยิ่งชัดขึ้นจะเป็นสี่เหลี่ยม แสงแข็ง เห็นชัดเจน ส่วนกราฟจะความเบลอในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้เช่นกัน Reduce spread คือ ระดับการแผ่กระจายของเงา ยิ่งเพิ่มมาก เงาก็จะมีความใหญ่ มีการเกลี่ยแสงที่มาก ดูกลมกลืน ยิ่งลดค่า เงาก็จะยิ่งหดอยู่ใกล้วัตถุ ทำให้วัตถุมีความชัดเจนมากขึ้น อ้างอิง Smoother & sharper shadows with layered box-shadows | Tobias Ahlin , @brumm (@funkensturm) / Twitter