ตกแต่ง web portal ของ WiFi Manager ตาม Style ตัวเอง (เอาที่ชอบ)

ช่วงแรกนี้ ขอโพสต์ผลลัพธ์ที่ได้ก่อนนะครับ ถ้ามีเวลาจะอธิบายอีกที

1 Like

มาแนวน่ารักเลยนะครับ พี่ :rofl:

สำหรับในหัวข้อนี้ผมมีจุดประสงค์เพื่อต้องการที่จะเปลี่ยนองค์ประกอบรอบนอกของ web portal ที่อยู่ใน Wifi Manager เท่านั้นเช่นการเปลี่ยนสีการทำให้ข้อความแสดงภาษาไทยได้ และการแทรกรูปและเปลี่ยนรูปภาพเข้าไป

เป็นที่ทราบกันดีนะครับสำหรับคนที่ใช้ WiFi Manager กับอุปกรณ์ Iot คือ Node mcu esp 8266 ในการเลือกใช้การกำหนดค่าเชื่อมต่อไปยัง SSID ของ WiFi ที่เราต้องการใช้งานหรือเชื่อมต่อ ตอนนี้ผมจะขอเดินเรื่องไปที่ตำแหน่งที่อยู่ของโฟลเดอร์ WiFi Manager นะครับ

image

โดยทุกครั้งของข้อมูล ssid และ password ที่ถูกเก็บไว้จะถูกค้นหาด้วย ชุดคำสั่งของ WiFi Manager โดยข้อมูลจะถูกนำมาทำการเชื่อมต่อจากเดิมเป็น access point ของตัว WiFi Manager ก็จะกลายเป็น ssid และ password ที่ถูกนำออกมาจากที่เก็บเพื่อนำมาเชื่อมต่อระหว่าง Node mcu esp 8266 กับ Modem Router ผ่านทางระบบ WiFi ซึ่งข้อมูลของ ssid และ password ถ้ายังไม่มี ผู้ใช้จะต้องกำหนดค่าเริ่มต้นใหม่ครั้งแรก แต่ถ้ามีอยู่แล้ว จะเกิดจากกระบวนการ การกำหนดค่าการเชื่อมต่อของผู้ใช้ก่อนหน้านี้นั่นเอง
สำหรับการปรับแต่งค่าต่างๆจะมีอยู่ 2 ฝ่ายด้วยกันคือ WiFiManager.h และ WiFiManager.cpp ในส่วนที่จะอธิบายนี้จะเป็นส่วนที่ผมได้ทำมาแล้วนะครับ

  1. ให้ Web browser รองรับภาษาไทย+ แทรกรูป + ข้อความ เข้าไป (เปิดไฟล์ WiFiManager.h บรรทัดที่ 25 )

1

เดิม

const char HTTP_HEAD[] PROGMEM            = "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/><title>{v}</title>";

ใหม่

const char HTTP_HEAD[] PROGMEM            = "<!DOCTYPE html><html lang=\"en-TH\"><head><meta charset=\"UTF-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/>PUY IOT<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAUCAYAAABxnDbHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAVVSURBVHjaxJRLbF1XFYa/vfd5XV9fv51cv+I0zcPXLWlUtZXVxGpEUKq+GKA2ICQ6ayYFBAOUqqMIkMgACYlRB41UMgEEokFq2jgNSQlUcYsqHKfUuKkb0jqxr9++vq9zzn4wuIZJ3AESgjXeWt9a+//XL5xz/K9L8n8o7z95/Ma5Nx+emZkZNsb4CwsLvSsrK9u6ujrndw7unC4MFz4YPXTo0/8KdOLatc4LY2PPvXvlyhOzt24Op0my21MKIcFahwWscyg/nM739N7af+DA+NGjR3/zlSNHPvyinmIrTScnr7e/c/nSV6euT47c+fzm3rRW/XLk+zRlIjzPwwFSCoLAR2tNmqbEiaZUrrC2UUELNVW4/4HxF44f//Ho6N3b3wU99ZNTL749du6bKo0fbc1myIQBQiqstVhrUZ6Hsw7jDEEQ4CkJzuEQeErinKNSrTO/uIxW4V9e/N73Xzp27NilL4SeOHHi5SsX3nx+sKd7XxhGxElKPY6x1uJ5Cl8pojAg9H0sDuccArHZiX/DnbUAVGt11mrx+Hd/8PK3n3zqqQ/ugp45c2b05z/76St7ercPKwGVekwm8unr7qQ1m6G4vE5xfYM4TTHGoqTA83yUEigBEoFzIAQYZ9HaEoUhtVqV7h33vvrK6ddeuMtIV69efTpUalgK0NYyfE8/Rx68jz293WTDkOVSmdtLqyyWyhRXSyyVNqjUYpJUk1qNs2CcA+fwPYmxUK7VUUJSq1RyW7p3bW2tNwgUqTE0RSFPjBzg4NAu4jhGCkFuWyeD2zqxDrSx1LUm1SlJatDaIITAOUtiLM1hwPSdIr+6PE6lWqNZCrMlVEqZam2w1uF7ipbAx2qNMZBiUcIhhEBbixCSptBHhj7CCXxfgmucjhQCqSSrlSpSSJx1KKnsltBcLrcaxwlCOHCgnUNKj/dvzDA+dYPOlmYO3reXHV3tWGcwtuEdHPzts0Xe/ehjStU6Rx4Y4pGhXRhrQQgcjqZstrxlDPb39990QuCcwAlQSjJ9p8gfr/8d6xztLdlN6zX8KgApBEIKpBR0tbWgreXi5BS3FlaIAh8lBc45omx2fctNDz92+NyfLl18Vmv9mESAdUS+x9cPj5DvaidSCukcSZIipGhoaBtnUxjoYfdAD6kxzBaXEK7hZt9TaGNpzuW2hh4aPXQzn+/5fOn2P/A2JxzMd7G2vsGZ198ijRO+9cxRWpozNGSQCNVoPLeyyi/OnmdHvptvPHmEQEo+mSsiN80lhbRbfu/4e+8NzM7PD2hr0Zt6CKm4vbTC2fMXOHv+D8wtLOMFPotLq5Q3yggn8DyP2eIiv79wmTcu/5nlUrkREAistWgLf52YGLnxyYz/L5Y6efIkp0+/+szY6789vi3jfS3b3ESqUx7Zt4t8eysATioKe+7l4IP7sVpTnJuntb2VIAzAgvI9EPDQlwrs37sbpSSrG2Xen/6UtpYcOU8NXZv8MJtr75gaGBgoiXNvjbW+/evXfvTcw0Pfybe3sVqNub22TqE/T19bG0miEVIifYXvKxYWFqlVavQP9gNgjMHzFGmqQQPW4oUeK9UKU7NFOjIRHU0RH302x+8mbvzypR+eel62tLaMFHbtfHbfYB+hEHjVCo/uGSTf0Ua9VCNdj7HlBKENqdZUyzU83ydJEoxphIIxFhEbTKlOul6nXonpyDXz0GAfXq1KxlPs7t/O9s6Ox6MoelwOFwqdJYLgyuTHZNtbCTMRST1BCAGeRAUK64GVgHUYo1lfW2dhbgGd6s0kchgBzhPIwEd4CgfEcUIURRBFXJyYYsfQ/Wv9fX3T/xwAzguNA5vuBMQAAAAASUVORK5CYII=)no-repeat center;background-size: 42px;'></div><div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAUCAYAAABxnDbHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAVVSURBVHjaxJRLbF1XFYa/vfd5XV9fv51cv+I0zcPXLWlUtZXVxGpEUKq+GKA2ICQ6ayYFBAOUqqMIkMgACYlRB41UMgEEokFq2jgNSQlUcYsqHKfUuKkb0jqxr9++vq9zzn4wuIZJ3AESgjXeWt9a+//XL5xz/K9L8n8o7z95/Ma5Nx+emZkZNsb4CwsLvSsrK9u6ujrndw7unC4MFz4YPXTo0/8KdOLatc4LY2PPvXvlyhOzt24Op0my21MKIcFahwWscyg/nM739N7af+DA+NGjR3/zlSNHPvyinmIrTScnr7e/c/nSV6euT47c+fzm3rRW/XLk+zRlIjzPwwFSCoLAR2tNmqbEiaZUrrC2UUELNVW4/4HxF44f//Ho6N3b3wU99ZNTL749du6bKo0fbc1myIQBQiqstVhrUZ6Hsw7jDEEQ4CkJzuEQeErinKNSrTO/uIxW4V9e/N73Xzp27NilL4SeOHHi5SsX3nx+sKd7XxhGxElKPY6x1uJ5Cl8pojAg9H0sDuccArHZiX/DnbUAVGt11mrx+Hd/8PK3n3zqqQ/ugp45c2b05z/76St7ercPKwGVekwm8unr7qQ1m6G4vE5xfYM4TTHGoqTA83yUEigBEoFzIAQYZ9HaEoUhtVqV7h33vvrK6ddeuMtIV69efTpUalgK0NYyfE8/Rx68jz293WTDkOVSmdtLqyyWyhRXSyyVNqjUYpJUk1qNs2CcA+fwPYmxUK7VUUJSq1RyW7p3bW2tNwgUqTE0RSFPjBzg4NAu4jhGCkFuWyeD2zqxDrSx1LUm1SlJatDaIITAOUtiLM1hwPSdIr+6PE6lWqNZCrMlVEqZam2w1uF7ipbAx2qNMZBiUcIhhEBbixCSptBHhj7CCXxfgmucjhQCqSSrlSpSSJx1KKnsltBcLrcaxwlCOHCgnUNKj/dvzDA+dYPOlmYO3reXHV3tWGcwtuEdHPzts0Xe/ehjStU6Rx4Y4pGhXRhrQQgcjqZstrxlDPb39990QuCcwAlQSjJ9p8gfr/8d6xztLdlN6zX8KgApBEIKpBR0tbWgreXi5BS3FlaIAh8lBc45omx2fctNDz92+NyfLl18Vmv9mESAdUS+x9cPj5DvaidSCukcSZIipGhoaBtnUxjoYfdAD6kxzBaXEK7hZt9TaGNpzuW2hh4aPXQzn+/5fOn2P/A2JxzMd7G2vsGZ198ijRO+9cxRWpozNGSQCNVoPLeyyi/OnmdHvptvPHmEQEo+mSsiN80lhbRbfu/4e+8NzM7PD2hr0Zt6CKm4vbTC2fMXOHv+D8wtLOMFPotLq5Q3yggn8DyP2eIiv79wmTcu/5nlUrkREAistWgLf52YGLnxyYz/L5Y6efIkp0+/+szY6789vi3jfS3b3ESqUx7Zt4t8eysATioKe+7l4IP7sVpTnJuntb2VIAzAgvI9EPDQlwrs37sbpSSrG2Xen/6UtpYcOU8NXZv8MJtr75gaGBgoiXNvjbW+/evXfvTcw0Pfybe3sVqNub22TqE/T19bG0miEVIifYXvKxYWFqlVavQP9gNgjMHzFGmqQQPW4oUeK9UKU7NFOjIRHU0RH302x+8mbvzypR+eel62tLaMFHbtfHbfYB+hEHjVCo/uGSTf0Ua9VCNdj7HlBKENqdZUyzU83ydJEoxphIIxFhEbTKlOul6nXonpyDXz0GAfXq1KxlPs7t/O9s6Ox6MoelwOFwqdJYLgyuTHZNtbCTMRST1BCAGeRAUK64GVgHUYo1lfW2dhbgGd6s0kchgBzhPIwEd4CgfEcUIURRBFXJyYYsfQ/Wv9fX3T/xwAzguNA5vuBMQAAAAASUVORK5CYII=)no-repeat bottom;background-size: 42px;'></div><div style='background:url(data:image/png;base64,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)no-repeat top;background-size: 42px;'></div><div style='background:url(data:image/png;base64,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)no-repeat center;background-size: 42px;'></div><title>{v}</title>";

สำหรับการแทรกรูปภาพนั้นจะเห็นว่ามี code ที่ค่อนข้างยาวมากเนื่องจากว่าเราจะนำภาพนามสกุล . PNG มาแปลงเป็น Base64 ในที่นี้คือการฝังภาพลงไปใน code ของ html เลย โดยมีข้อสำคัญคือภาพที่เราจะนำมาใส่จะต้องเป็นภาพที่มีขนาด Pixel ไม่ควรเกิน 30 * 30 พิกเซล สำหรับ code ในชุดนี้ผมลองทำดูแล้วปรากฏว่ารูปภาพ 1รูป จะมีการแสดงผลแค่ส่วนหนึ่งของการเลือกเท่านั้น ตามภาพ

1
โดยชุดคำสั่ง สุดท้ายที่กำหนดคุณสมบัติของรูป : no-repeat center;background-size: 42px;’> ตรงคำว่า center คือการให้รูปภาพแสดงช่วงกลางของภาพเต็มของเรา ตามรูปข้างบน ดังนั้นจากรูปเต็มผมจะใช้เทคนิคการแบ่งครึ่งรูปเต็มออกมาเป็น 2 ส่วนคือส่วนด้านบนและส่วนด้านล่าง และจะกำหนดให้การแสดงผลของรูปออกมาในช่วงต่างๆซึ่งผลลัพธ์จะออกมาเป็นรูปเต็มอีกที

puyiot puyiot1 puyiot2


ภาพก็จะออกตามที่เห็น (ลูกศรสีเขียว)

ส่วนการนำภาพนามสกุล . PNG มาแปลงเป็น Base64 ให้ ทำตามรูปเลยครับ
เข้าไปที่ onlinepngtools.com


ก็เป็นอันเสร็จ ในข้อที่ 1

  1. ในส่วนรูปของกุญแจซึ่งแสดงเป็นสัญลักษณ์ว่าระบบ WiFi มีรหัสผ่านผมจะเปลี่ยนรูปกุญแจใหม่ก็ใช้หลักการเดิมในการแปลงภาพนามสกุล . PNG มาแปลงเป็น Base64 ตามข้อที่ 1 (ไฟล์ WiFiManager.h บรรทัดที่ 26)
    1 ---->lock

เดิม

const char HTTP_STYLE[] PROGMEM           = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==\") no-repeat left center;background-size: 1em;}</style>";

ใหม่

const char HTTP_STYLE[] PROGMEM           = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;background-color:#e94fe7;} button{border:0;border-radius:0.3rem;background-color:#081108;color:#f7ef12;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAbKSURBVHjarNZ7VNPnGQfwJ4QECIFCSEgwQJJfYtVunqOtZ7Zz+0Oxrau7tM61dZ2XOqsgoAgUEITDRWCQQMMddZd20x26taU3J3VSLh0KyD1CSkGQS4VqgyTcL8l3f9AGKUml3Z5znnNykve8n/PN8+bNj0RHL5K1gz4kcWg5+af2kH9aP8k1d0ieOUR+GYOucs3dJxXZhgxF9sj7Cu1oC5Nj6mO0xptMjqnON7ahRPi89lXeD3Y8yuLyaEVlH+4jueaOpyLbEKXQjnYyOSYwOWNgcsew8HqxlQUzUJ0BlEVmi198S5X7lkO7WY7c7wiHXCH/1B6SZdz+NZNj6rYF2e8xKAtnoToL+EbVfOSs2LzePhz0gbWFR94jcci/Sa7+IsUeuCrLBJHaCInGCLHGCJHaCL/s5etUxRYw2lEDf9MLu2zCksiahY6oIXHEJ+SfclOrzB1ftpFMa4JEY8SO8+PIrZvBB52zeEc/i+SqaWw+Nwax2mhjBNNg8ibn+Jte3LMMFodeJnHoZfIOLiP/9IF0Zf6kTVSuNeFPTTOYNWNZGSYtCP9oCmL18uTK/Ckw+VPTLuu2P70EXhXbSD4x18k3seNJe7MTq434Y9PMEmzENIGxiakl7x29OGk7eeEsZKdvDrLdxVIr7J8+QH4pN50U2SNtTM6YzZnuvDAOs2Vh89HxKbxcdBU+IZcgDytD+rs6WCwLX0PfqBlr88cg09qY+TnAa7emyAq7btxFksDSPcrCOZtphZlGqGsWk4WfbwW99C9wgyrhGFgJ2l+Gf9b2Wz/f8+YIfLJsHMy8SSiy7o47CmTrrLg0svpje7C32oi/ty3A82YzHk26CofDH8M1pAr8kCrQoQoE/rXDCgdd6IRbwi0o8yZspvZ4OiqJiIic/DfKmdyxCcbGSf4aLtEtwLNzZmxIugb2kQrwQ6rAD60GHa5E0PlPrXDwhU5Q4CeQpvZDmbd0T2XRPKQRlY3EYjmT2+P7dqvOwCYq05rgkjqKN1omrfDq2BrQ/iugQxWgVypAe8tx4M+LiQ++8Sno99VwP1G7DFfmT0Ge3j/K5gvXkNevUqNswTKtCesKTAi5NInW4TkAgNlsQW55P2JLe5DwXi8S3u9FzDu9KG2+a4VLm7/EMwV6uIbV4aGIekhTBxbx3DEoC6bgrNi8g7wP/k2jKrYsQRU5JqzKMuLtjll83/rtX7rAOVYPj8gGSNMGrbiyyAze+p17SRJYmqsqNi9LuzZvFAP35r43nFP+ORxC6+EZ1QRBVBOkaQNQ5o5DVWyG64ZnXyavXZlJqrOwCfcabMNmsxkXG/vxH/2QXTj7yiDYx65DEN0Cr+gWCKJbIE0bhKpoHi5rtj5P7j89HPjNGT8ILizvAR24DG5gOSr1d+zAn4N9vAFeMa3wOtkG4ck2COPaIU3pmeGIlD8hZ+aJLUz+tOX+W+tBcPKHfaCjV8E9Vot37ztY34Qdjzd+heogjL0BUcJnEASX9bHYHBmxuDy+f6K+V1kws2JYNzgOXlgtmPgG3JuwvSa7/DY4Yc2LaFw7vFP64f5sxttE5ExERF7PpWfdP+cHwUUV/WAFXwPveC2qOw0217xWfhucEy0Qxi2golN6eCf1won58T7rlckRMesU2YYJZd7kiuCd+TrQkWugw9cQ+Va3HXgInPDWr9B2iFP6IDhY0kwsB+mSv0fBL5OzVeewBL5lB67uMuIfjQa82WBAy+CEzTXaimE4RbRBdKoD3gmdECffgpPiiQNExF4COzi5CnxjanWqM4BMa8TDuffQ/z/8jrUVw+BG6CCK10OSPgS3p6JfJyJPm49BHMnax2QpXYOqYgt81PfwWrUBMzMzgGUegHllbZnHl8YJ/KxAD7eTHRCnD8HjxcJyloOjYlnaJbj36k1+8a3dynOAf9YIthbeQkBmHbam12BrRi22ZdZiW2YdtqnrsU1djwDNdQRoGhCQ1YDtWY3YntWIHyY3wiNWD8kfhuGxW3uJ5chd863o18V+yGeN5Mhbl5VnAb8CM0RpX8AlvBnOYQ1wCW+GS0QzeBEt4EW2wvXVNrhG6cCPugF+9A3wY/QQJA1AnNg16xZwopjFcpCvCL2v+G6P7wv3i2vqXH0WUORPQ3hKD4H1JtJBGKuDMK4dong9vBO7IT49CHFSDzz3vl7N9dv4AhEJvitqLRbHxY//2G+CJa+UlPkm6odFp9rNwoTPIErsgSipF96J3RDF6Wa9gsu63H9xuoQr/9FLRORLRBwiYtH/oXhsnucjHJ9HnuEyW/a7bHguxGX9z49y5Zt/5yhknmKxuQ8TkftKE/53AMaVzCRfXOyOAAAAAElFTkSuQmCC\") no-repeat left center;background-size: 1em;} </style>";

ผลลัพธ์ที่ได้
1

  1. การเปลี่ยนสีพื้นหลัง ของ Page และ Form + ตัวอักษรของปุ่ม และ ตัวอักษรที่แสดงใน Page เป็นภาษาไทย
    (ไฟล์ WiFiManager.h บรรทัดที่ 27-36)
    เดิม
const char HTTP_SCRIPT[] PROGMEM          = "<script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script>";
const char HTTP_HEAD_END[] PROGMEM        = "</head><body><div style='text-align:left;display:inline-block;min-width:260px;'>";
const char HTTP_PORTAL_OPTIONS[] PROGMEM  = "<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/><form action=\"/i\" method=\"get\"><button>Info</button></form><br/><form action=\"/r\" method=\"post\"><button>Reset</button></form>";
const char HTTP_ITEM[] PROGMEM            = "<div><a href='#p' onclick='c(this)'>{v}</a>&nbsp;<span class='q {i}'>{r}%</span></div>";
const char HTTP_FORM_START[] PROGMEM      = "<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 type='password' placeholder='password'><br/>";
const char HTTP_FORM_PARAM[] PROGMEM      = "<br/><input id='{i}' name='{n}' maxlength={l} placeholder='{p}' value='{v}' {c}>";
const char HTTP_FORM_END[] PROGMEM        = "<br/><button type='submit'>save</button></form>";
const char HTTP_SCAN_LINK[] PROGMEM       = "<br/><div class=\"c\"><a href=\"/wifi\">Scan</a></div>";
const char HTTP_SAVED[] PROGMEM           = "<div>Credentials Saved<br />Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>";
const char HTTP_END[] PROGMEM             = "</div></body></html>";

ใหม่

const char HTTP_SCRIPT[] PROGMEM          = "<script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script> ";
const char HTTP_HEAD_END[] PROGMEM        = "</head><body> <div style='text-align:left;display:inline-block;min-width:260px;background-color:#e94fe7;'> ";
const char HTTP_PORTAL_OPTIONS[] PROGMEM  = "<form action=\"/wifi\" method=\"get\"><button>ตั้งค่า WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>ตั้งค่า WiFi (แบบไม่สแกน)</button></form><br/><form action=\"/i\" method=\"get\"><button>ข้อมูล</button></form><br/><form action=\"/r\" method=\"post\"><button>รีเซต</button></form>"; 
const char HTTP_ITEM[] PROGMEM            = "<div><a href='#p' onclick='c(this)'>{v}</a>&nbsp;<span class='q {i}'>{r}%</span></div>";
const char HTTP_FORM_START[] PROGMEM      = "<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='ใส่ชื่อ WiFi'><br/><input id='p' name='p' length=64 type='password' placeholder='รหัสผ่าน WiFi'><br/>";
const char HTTP_FORM_PARAM[] PROGMEM      = "<br/><input id='{i}' name='{n}' maxlength={l} placeholder='{p}' value='{v}' {c}>";
const char HTTP_FORM_END[] PROGMEM        = "<br/><button type='submit'>บันทึก</button></form>";
const char HTTP_SCAN_LINK[] PROGMEM       = "<br/><div class=\"c\"><a href=\"/wifi\">สแกน</a></div> ";
const char HTTP_SAVED[] PROGMEM           = "<div>ข้อมูลรับรองที่บันทึกแล้ว<br />กำลังพยายามเชื่อมต่อ ESP กับเครือข่าย<br />หากไม่สามารถเชื่อมต่อกับ AP ได้  ให้ลองใหม่อีกครั้ง</div>";
const char HTTP_END[] PROGMEM             = "</div></body></html>";

4.เปลี่ยนสีอักษร ที่แสดงข้องความ ชื่อ AP ที่เราตั้งไว้ใน Code ใน ArduinoIDE Sketch Project ของเรา(เปิดไฟล์ WiFiManager.cpp ) ดู Code เดิมในไฟล์ของเรา แล้วแก้ตาม Code ให้

/** Handle root or redirect to captive portal */
void WiFiManager::handleRoot() {
  DEBUG_WM(F("Handle root"));
  if (captivePortal()) { // If caprive portal redirect instead of displaying the page.
    return;
  }

  String page = FPSTR(HTTP_HEAD);
  page.replace("{v}", "ตัวเลือกรายการ");
  page += FPSTR(HTTP_SCRIPT);
  page += FPSTR(HTTP_STYLE);
  page += _customHeadElement;
  page += FPSTR(HTTP_HEAD_END);
  page += String(F("<font face=verdana size=3 color=#ffffff><h2>"));
  page += _apName;
  page += String(F("</h2>"));
  page += String(F("<font face=verdana size=3 color=#ffffff><h3>ระบบการจัดการ WiFi</h3>"));
  page += FPSTR(HTTP_PORTAL_OPTIONS);
  page += FPSTR(HTTP_END);

  server->sendHeader("Content-Length", String(page.length()));
  server->send(200, "text/html", page);

ผลลัพธ์ที่ได้

1

สำหรับส่วนอื่นลองแก้ดูใน ไฟล์ WiFiManager.cpp นี้แหละครับ เช่นเปลี่ยนจาก *WM ใน Serial monitor เป็น PUY_IOT Info : หรืออื่นๆ ตามที่ชอบ

1 Like

หรือลอง Download ที่ผมปรับแต่งแล้วไปลองทดสอบดูครับ


มันเป็นแบบนี้ะครับ

ใช้ไฟล์ Proj. ตัวไหน Run งานครับ คือของผมมีไฟล์ Proj. สำหรับ Run งานอยู่แล้วโดยการปุ่ม Config ค่า AP เพื่อเชื่อมต่อ WiFi ผมแค่เปลี่ยนหน้าตาของ web portal เท่านั้นเองครับ วิธีการโดยย่อคือ

  1. Download ไฟล์ 2 ตัว ที่ผมปรับแต่งแล้ว ไปแทนวางทับไฟล์เดิม ในตำแหน่งที่อยู่ของโฟลเดอร์ WiFi Manager นะครับ

image

  1. Upload ไฟล์ Project ของเรา ไปยัง Node MCU Esp 8266

*** ผมใช้ ESP8266 Version 2.4.1 และ WiFiManager Version 0.14.0 นะครับ

ต่อไป เราจะ ตกแต่ง web portal ของ ESP 32 WiFi Manager บ้าง

Wiring Diagram

ดาวน์โหลด Library ที่ผมปรับแต่งแล้ว
https://drive.google.com/open?id=1BjZf3-6xry5V4V2B65eussnKo0sXk-Lr

File Sketch ตัวอย่างที่ผมใช้ Run ทดสอบ