การใช้งาน Widget Text input แสดงค่าด้วย Value Display

คู่มือ

(Permpol Thanapunnamas) #1

…ในกระทู้นี้เราจะมาพูดถึงเรื่องการใช้งาน widget text input กันนะครับเริ่มแรกก็ทำการเลือก widget text input ออกมาก่อน ตรงนี้จะเป็นภาค input ของเรา แล้วกำหนด Vpin ให้เป็น V0 ซึ่งเราไม่จำเป็นต้องกำหนดเป็น V0 อย่างเดียวก็ได้ จะกำหนดเป็น Vpin อะไรก็ได้ตามที่เราต้องการ แต่ในโปรแกรมก็ต้องกำหนดเหมือนกันด้วยแค่นั้นเอง

image

ในส่วนของการตั้งค่า
Title (optioal) คือ ชื่อบนหัวของ text input
HINT คือ ชื่อในช่องของ text input
CHARACTER LIMIT คือ การจำกัดจำนวนตัวอักษรที่ใส่ใน text input

แล้วเรายังสามารถปรับขนาดตัวอักษรและสี ได้อีกด้วย

image

จากนั้นตามด้วยส่วนที่เราต้องการจะแสดงผลภาค output ผลเลือก Vale Display กำหนด vpin ให้เป็น V1

image

นีัเเป็นคพสั่งที่ใช้ในการรับส่งค่าของ text input ซึ่งเราจะรับค่าที่คีย์เข้ามาด้วยคำสั่ง param.asStr(); จากนั้นไปเก็บในตัวแปร text_In ที่เราประกาศขึ้นมาชนิดของตัวแปลเป็น String จากนั้นเราก็ส่งค่าไปแสดงที่ Value Display ด้วยคำสั่ง Blynk.virtualWrite(Vpin ที่เรากำหนด , ตัวแปร)

BLYNK_WRITE(V0) {
  text_In = param.asStr();  // Text Input Widget - Strings
  Blynk.virtualWrite(V1, text_In); 
}

ตัวอย่างการเชื่อมต่อแบบเต็ม

#define BLYNK_PRINT Serial 
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>
#define D0 13
#define D1 10

char auth[] = "d7c8e1666dca4de3862b4d0a85820422"; //Token key
char server[] = "oasiskit.com";
char ssid[] = "Eleceasy";
char pass[] = "Bb20072536";
int port = 8080;
char led1 = D0;
char led2 = D1;
String text_In;

void setup() {
  Serial.begin(115200);
  Serial.println("กำลังเชื่อมต่อไปที่ Blynk Server");
  pinMode(D0, OUTPUT); //กำหนดโหมด ว่าเป็น INPUT หรือ OUTPUT
  pinMode(D1, OUTPUT);
  WiFi.begin(ssid, pass); //เชื่อมต่อ WiFi
  Blynk.config(auth, server, port); //กำหนด Token key , ชื่อ Server และ port
  Blynk.connect(); //เชื่อมต่อไปยัง Blynk
}

BLYNK_CONNECTED() {  // ฟังก์ชันนี้ทำงานเมื่อต่อ Blynk ได้ 
  Serial.println("App Blynk ทำงาน!");
}

BLYNK_WRITE(V0) {
  text_In = param.asStr();  // Text Input Widget - Strings
  Blynk.virtualWrite(V1, text_In); 
}



void loop() {
  
  Blynk.run();


}

ตอนนี้แอฟ eleceasy.com ของเรา on แล้ว

ตอนนี้เรายังไม่มีการป้อนค่าใดๆ เข้าไปเราจริงไม่เห็นว่า value display ไม่มีอะไรขึ้นเลย ตอนนี้เราลองใส่ คำว่า ok เข้าไป แล้ว

อย่าลืมว่าต้องกด enter ด้วยหลังพิมพ์เสร็จเพื่อเป็นการส่งค่า

ไม่ฉนันค่าจะไม่แสดงผลครับ