เล่มสรุปโครงการ กลุ่ม 1

รูปท่ี 5.15.3
5.15.4 จะไดร้ ปู homeเขา้ มาใน Background Picture

5.15.4.1 ใหค้ ลกิ Reset โปรแกรม1 คร้งั เพื่อใหร้ ปู ภาพขึ้น ดงั รปู ท่ี 5.15.4

5.15.4.1

5.15.4

รปู ท่ี 5.15.4 20%

5.15.5 ดูท่ี Property ด้านขวาของ btnHome Height ใหเ้ ปล่ยี นเป็น
Relative Size (e.g. “50%”) 43% Width ใหเ้ ปลี่ยนเปน็ Relative Size (e.g.“50%”)
ดังรูปที่ 5.15.5

รูปท่ี 5.15.5

5.16 คลกิ ท่ี Button2 เพ่อื เปล่ยี น Button เป็นรูปภาพ
5.16.1 ดทู ี่ Property ด้านขวา คลกิ ท่ี Rename ดงั รปู ท่ี 5.16

5.16.1
5.16

รูปที่ 5.16 Text คลิกท่ี เพ่ือเอาข้อความออก

5.17 เปล่ยี นชือ่ Button2 เป็น btnmanual
ดงั รูปที่ 5.17

รูปท่ี 5.17
5.17.1 เปลี่ยน BackgroundColor ของ btnmanual เปน็ transparent (ไม่มีสีพ้นื หลงั )
ดังรปู ท่ี 5.17.1

รูปท่ี 5.17.1
5.17.2 คลกิ ท่ชี อ่ ง Background Picture แลว้ คลิกท่ี Upload files ดังรูปที่ 5.17.2

รปู ที่ 5.17.2

5.17.3 คลิกรปู คมู่ อื การใช้งาน Open ดงั รปู ท่ี 5.17.3

รปู ท่ี 5.17.3
5.17.4 จะไดร้ ูป คู่มือการใช้งาน เขา้ มาใน Background Picture

5.17.4.1 ใหค้ ลิก Reset โปรแกรม1 คร้งั เพือ่ ให้รปู ภาพขึ้น

5.17.4.1

5.17.4

รูปท่ี 5.17.4.1

รูปที่ 5.17.4 20%

5.17.5 ดทู ี่ Property ดา้ นขวาของ btnmanual Height ให้เปลีย่ นเปน็
Relative Size (e.g. “50%”) 48% Width ให้เปลย่ี นเปน็ Relative Size (e.g. “50%”)
ดังรูปท่ี 5.17.5

รปู ที่ 5.17.5

5.18 คลิกที่ Column1 ดูที่ Property ดา้ นขวา เพอ่ื เปลยี่ น สี Column
5.18.1 คลกิ ที่ BackgroundColor ดังรปู ที่ 5.18

5.18 5.18.1

รปู ท่ี 5.18
5.18.2 คลิกเลอื กสีเทา ดังรปู ท่ี 5.18.2

รปู ท่ี 5.18.2

5.19 คลกิ ท่ี Column2 และทาํ การเปล่ียนสี ตามขนั้ ตอนท่ี 5.18 ถึง ข้ันตอนที่ 5.18.2

รปู ท่ี 5.19
5.20 คลิกท่ี Row2 เพอ่ื ใส่รปู ภาพ ดังรปู ที่ 5.20

รูปท่ี 5.20

5.21 ดูท่ี Property ด้านขวา คลิกที่ Upload files ดังรปู ที่ 5.21
5.21.1 คลกิ ท่ีช่อง Background Picture

รูปท่ี 5.21
5.21.2 คลิกที่รปู คน Open ดงั รปู ท่ี 5.21.2

รปู ที่ 5.21.2

5.21.3 จะไดร้ ปู คน เข้ามาใน Background Picture ดงั รปู ที่ 5.21.3

รูปท่ี 5.21.3
5.22 คลิก Live test เพ่อื รันดผู ลลัพธ์

5.22.1 จะได้ผลลัพธ์ ดงั รปู ท่ี 5.22

รปู ท่ี 5.22

5.22.2 คลกิ  เพอื่ ออกจากการรนั ดูผลลัพธ์
5.22.2.1 กลับมาอยู่ทห่ี น้าการทาํ งานของโปรแกรมเหมอื นเดมิ ดังรปู ท่ี5.22.2

รูปท่ี 5.22.2
5.23 คลกิ ที่เพอ่ื เพมิ่ Screen2 ทาํ งานในหน้าถดั ไป

รูปท่ี 5.23

5.24 จะมี Screen2 เพม่ิ ขน้ึ มาและจะทํางานอยู่ที่ Screen2 ดังรูปที่ 5.24

รปู ที่ 5.24
5.25 ดูที่ Add Components พิมพ์คําว่า Row ตรงช่องคน้ หา

5.25.1 คลกิ คา้ งที่ Row แลว้ ลาก
5.25.2 วางใน Screen2 ตอนวางครง้ั แรกใหส้ งั เกตเสน้ สสี ม้ จะอยู่ดา้ นหวั ของ Screen2 และวางตอ่
กันลงมาเรือ่ ยๆ ใหค้ รบ 4 Row ดังรูปท่ี 5.25

5.25.2
5.25
5.25.1

รูปที่ 5.25

5.26 ดูท่ี Add Components พิมพค์ าํ วา่ Column ตรงชอ่ งค้นหา
5.26.1 คลกิ คา้ งท่ี Column แลว้ ลาก
5.26.2 วางใน Row8 ใหค้ รบ 2Column ตอนวางคร้ังแรกใหส้ งั เกตเส้นสีส้มจะอยู่ดา้ นหัวของ Row8
ดังรปู ที่ 5.26

5.26.2
5.26
5.26.1

รูปที่ 5.26
5.27 คลิกท่ี Row5 เพ่ือทําการกําหนดพ้ืนทใ่ี นการแสดงผล

5.27.1 ดูที่ Property ด้านขวา เปลย่ี นเปน็ Relative Size (e.g. “50%”) 53% ดังรูปท่ี 5.27

5.27 5.27.1

รปู ท่ี 5.27

5.28 คลิกท่ี Row6 เพอ่ื ทาํ การกําหนดพื้นที่ในการแสดงผล
5.28.1 ดูที่ Property ดา้ นขวา เปล่ยี นเปน็ Relative Size (e.g. “50%”) 2% ดงั รูปท่ี 5.28

5.28 5.28.1

รูปที่ 5.28
5.29 คลกิ ที่ Row7 เพือ่ ทําการกาํ หนดพื้นที่ในการแสดงผล

5.29.1 ดูที่ Property ด้านขวา เปลี่ยนเปน็ Relative Size (e.g. “50%”) 15% ดงั รูปท่ี 5.29

5.29 5.29.1

รปู ที่ 5.29

5.30 คลกิ ท่ี Row8 เพือ่ ทาํ การกําหนดพืน้ ที่ในการแสดงผล
5.30.1 ดทู ี่ Property ดา้ นขวา เปลี่ยนเปน็ Relative Size (e.g. “50%”) 12% ดงั รปู ที่ 5.30

5.30 5.30.1

รปู ท่ี 5.30
5.31 ดูท่ี Add Components

5.31.1 คลกิ คา้ งที่ Button แล้วลาก
5.31.2 วางตอ่ Row5 ตอนวางใหส้ งั เกตเสน้ สีส้มจะอยู่ใต้ Row5 ดังรปู ท่ี 5.30

5.31.2

5.31.1

รูปที่ 5.30

5.32 ดทู ี่ Add Components
5.32.1 คลิกคา้ งท่ี Button แล้วลาก
5.32.2 วางตอ่ Row6 ตอนวางใหส้ ังเกตเสน้ สสี ม้ จะอยู่ใต้ Row6 ดงั รูปที่ 5.32

5.32.2

5.32.1

รปู ที่ 5.32
5.33 คลิกที่ Button1 เพื่อกําหนดรปู แบบ

5.33.1 ดทู ี่ Property ดา้ นขวา คลิกท่ี Rename สญั ลกั ษณร์ ปู ปากกา ดังรปู ท่ี 5.33

5.33.1
5.33

รูปที่ 5.33

5.34 เปลย่ี นช่ือ Button1 เปน็ btnCOVID Text เปลย่ี นเป็น การรับมอื COVID-19 Text Color
เปน็ สีขาว Font Size 20 BackgroundColor สีนาํ้ เงนิ เข้ม ดังรูปที่ 5.34

รปู ที่ 5.34
5.35 คลิกที่ Button2 เพือ่ กําหนดรปู แบบ

5.35.1 ดูท่ี Property ด้านขวา คลิกท่ี Rename สญั ลกั ษณ์รูปปากกา ดังรปู ที่ 5.35

0
5.35.1
5.35

รูปท่ี 5.35

5.34 เปล่ยี นชือ่ Button2 เป็น btnQ&A Text เปลย่ี นเปน็ การรบั มือ Q&A on COVID-19
Text Color เป็นสขี าว Font Size 20 BackgroundColor สนี าํ้ เงินเข้ม ดงั รปู ท่ี 5.34

รูปที่ 5.34
5.35 ดทู ่ี Add Components

5.35.1 คลกิ คา้ งท่ี Button แลว้ ลากวางใน column3 และ column4 ตอนวางใหส้ ังเกตเส้นสสี ้มจะ
อยดู่ า้ นหัวของ column3 และ column4 ดังรูปที่ 5.35

5.35.1

รูปที่ 5.35

5.36 คลกิ ที่ Button1 เพ่อื เปลยี่ น Button เปน็ รปู ภาพ
5.36.1 ดทู ี่ Property ดา้ นขวา คลิกที่ Rename สญั ลกั ษณ์รูปปากกา ดังรูปที่ 5.36

5.36.1
5.36

รูปที่ 5.36
5.37 เปลยี่ นชื่อ Button1 เป็น btnHomesc2 Text คลิกที่ เพ่ือเอาขอ้ ความออก ดงั รปู ที่ 5.37

รปู ที่ 5.37

5.37.1 เปล่ียน BackgroundColor ของ btnHomesc2 เป็น transparent (ไมม่ สี พี ื้นหลัง)
ดังรูปท่ี 5.37.1

รปู ที่ 5.37.1
5.37.2 คลกิ ทช่ี ่อง Background Picture แล้วคลกิ ท่ี Upload files ดงั รูปท่ี 5.37.2

รูปที่ 5.37.2

5.37.3 คลกิ รปู homesc2 Open ดงั รูปท่ี 5.37.3

รูปท่ี 5.37.3
5.37.4 จะได้รปู homesc2 เขา้ มาใน Background Picture

5.37.4.1 ใหค้ ลิก Reset โปรแกรม1 ครง้ั เพอ่ื ใหร้ ปู ภาพขน้ึ ดังรปู ท่ี 5.37.4

5.37.4.1
5.37.4

รปู ที่ 5.37.4 20%

5.37.5 ดูที่ Property ด้านขวาของ btnHomesc2 Height ให้เปล่ยี นเปน็
Relative Size (e.g. “50%”) 43% Width ใหเ้ ปลี่ยนเป็น Relative Size (e.g. “50%”)

ดงั รปู ท่ี 5.37.5

รูปที่ 5.37.5

5.38 คลกิ ที่ Button2 เพ่อื เปลยี่ น Button เปน็ รปู ภาพ
5.38.1 ดทู ี่ Property ดา้ นขวา คลกิ ที่ Rename สัญลกั ษณร์ ูปปากกา ดงั รปู ท่ี 5.38

5.38.1
5.38

รปู ที่ 5.38
5.39 เปลยี่ นชื่อ Button2 เป็น btnmanual2 Text คลกิ ที่ เพอื่ เอาขอ้ ความออก ดงั รูปท่ี 5.39

รปู ที่ 5.39

5.39.1 เปล่ยี น BackgroundColor ของ btnmanual2 เปน็ transparent (ไมม่ ีสีพื้นหลัง)
ดงั รูปท่ี 5.39.1

รปู ท่ี 5.39.1
5.39.2 คลกิ ท่ชี ่อง Background Picture แลว้ คลิกท่ี Upload files ดงั รปู ที่ 5.39.2

รูปท่ี 5.39.2

5.39.3 คลกิ รปู โควดิ 19 Open ดงั รปู ท่ี 5.39.3

รูปที่ 5.39.3
5.39.4 จะได้รูป โควิด19 เข้ามาใน Background Picture

5.39.4.1 ใหค้ ลิก Reset โปรแกรม1 ครัง้ เพอื่ ให้รูปภาพข้นึ ดงั รูปที่ 5.39.4

5.39.4.1

5.39.4

รปู ที่ 5.39.4 70%

5.39.5 ดทู ่ี Property ดา้ นขวาของ btnHomesc2 Height ให้เปล่ยี นเปน็
Relative Size (e.g. “50%”) 48% Width ใหเ้ ปลี่ยนเป็น Relative Size (e.g. “50%”)
ดงั รูปท่ี 5.39.5

รูปที่ 5.39.5

5.40 คลิกที่ Screen2 เพอ่ื ท่ีจะใส่รปู ภาพ ดังรูปท่ี 5.40

รปู ที่ 5.40

5.41 ดูที่ Property ดา้ นขวา คลิกท่ี Upload files ดงั รูปท่ี 5.41
5.41.1 คลิกท่ีช่อง Background Picture

รปู ที่ 5.41

5.41.2 คลิกท่รี ูป bgsc2 Open ดงั รปู ท่ี 5.41.2

รปู ท่ี 5.41.2
5.41.3 จะได้รูป bgsc2 เข้ามาใน Background Picture ดงั รูปท่ี 5.41.3

รปู ท่ี 5.41.3

5.42 คลิกท่ี Column3 เพื่อเปล่ียน สี Column
5.42.1 เปลย่ี น BackgroundColor เป็นสเี ทา ดงั รูปที่ 5.42

5.42 5.42.1

รปู ที่ 5.42
5.43 คลกิ ที่ Column4 เพื่อเปลีย่ น สี Column

5.43.1 เปลยี่ น BackgroundColor เป็นสเี ทา ดงั รูปท่ี 5.43

5.43 5.43.1

รปู ที่ 5.43

5.44 คลกิ Live test เพอื่ รนั ดูผลลพั ธ์
5.44.1 จะไดผ้ ลลพั ธ์ ดงั รูปที่ 5.44

รูปท่ี 5.44

5.44.2 คลกิ  เพื่อออกจากการรันดูผลลพั ธ์
5.44.2.1 กลับมาอย่ทู ี่หนา้ การทาํ งานของโปรแกรมเหมอื นเดมิ ดงั รูปท่ี5.44.2

รปู ท่ี 5.44.2

5.45 คลกิ ท่ีเพอ่ื เพิ่ม Screen3 ทํางานในหนา้ ถดั ไป

5.46 จะมี Screen3 เพ่ิมข้ึนมาและจะทาํ งานอยู่ท่ี Screen3 ดงั รปู ที่ 5.46

รปู ที่ 5.46
5.47 ดูที่ Add Components พมิ พ์คาํ ว่า Row ตรงชอ่ งคน้ หา

5.47.1 คลิกคา้ งท่ี Rowแลว้ ลาก
5.47. วางใน Screen3 ตอนวางครง้ั แรกใหส้ งั เกตเส้นสสี ม้ จะอยู่ด้านหน้าของScreen3 และใหว้ าง
ต่อกนั ลงมาเรื่อย ๆ ให้ครบ 5Row ดงั รูปท่ี 5.47

5.47.2

5.47

5.47.1

รปู ที่ 5.47
5.48 ดูที่ Add Components

5.48.1 คลกิ คา้ งที่ Button แลว้ ลาก
5.48.2 ใสใน Row9 Row10 Row11 Row12 ตอนวางใหส้ งั เกตเส้นสสี ้มจะอย่ดู ้านหวั ของ Row9
Row10 Row11 Row12 ดงั รปู ท่ี 5.47

5.48.2

5.48.1 Text Color เป็นสี

รปู ที่ 5.47

5.49 คลกิ ท่ี Button1 เปลี่ยนชอื่ เปน็ btn1 Text ไวรสั โคโรนาคืออะไร
ขาว

Font Size 18 BackgroundColor สนี า้ํ เงินเข้ม ดงั รปู ท่ี 5.49

รูปท่ี 5.49 70%
5.49.1 ดทู ่ี Property ดา้ นขวาของ btn1 Height ใหเ้ ปลยี่ นเปน็
Relative Size (e.g. “50%”) 40% Width ให้เปลีย่ นเปน็ Relative Size (e.g. “50%”)
ดงั รปู ท่ี 5.49.1

รูปที่ 5.49.1

5.50 คลิกที่ Button2 เปล่ยี นชื่อเป็น btn2 Text โรคโควิด 19 คืออะไร Text Color เปน็ สี
ขาว

Font Size 18 BackgroundColor สนี าํ้ เงินเขม้ ดังรูปท่ี 5.50

รูปท่ี 5.50 80%
5.50.1 ดูที่ Property ดา้ นขวาของ btn2 Height ให้เปลี่ยนเปน็
Relative Size (e.g. “50%”) 40% Width ให้เปล่ียนเป็น Relative Size (e.g. “50%”)
ดังรูปที่ 5.50.1

รปู ที่ 5.50.1

5.51 คลิกท่ี Button3 เปลี่ยนชอ่ื เปน็ btn3 Text อาการของโรคโควิด 19 คอื อะไร Text
Color เป็นสีขาว Font Size 18 BackgroundColor สีนํ้าเงินเขม้ ดงั รปู ท่ี 5.51

รปู ที่ 5.51 90%
5.51.1 ดูท่ี Property ดา้ นขวาของ btn3 Height ให้เปลีย่ นเป็น
Relative Size (e.g. “50%”) 40% Width ให้เปลี่ยนเป็น Relative Size (e.g. “50%”)
ดงั รปู ท่ี 5.51.1

รูปที่ 5.51.1

5.52 คลิกท่ี Button3 เปล่ียนชื่อเปน็ btn3 Text โรคโควิด 19 แพร่ระบาดได้อย่างไร Text
Color เป็นสีขาว Font Size 18 BackgroundColor สีน้ําเงนิ เข้ม ดงั รูปท่ี 5.52

รปู ที่ 5.52

5.52.1 ดูที่ Property ด้านขวาของ btn4 Height ใหเ้ ปลี่ยนเป็น 95%

Relative Size (e.g. “50%”) 40% Width ใหเ้ ปลยี่ นเป็น Relative Size (e.g. “50%”)
ดงั รปู ที่ 5.52.1

รูปที่ 5.52.1

5.53 ดูที่ Add Components พมิ พ์คําว่า Column ตรงชอ่ งคน้ หา
5.53.1 คลกิ ค้างที่ Column แลว้ ลาก
5.53.2 วางใน Row13 ให้ครบ 2Column ตอนวางครง้ั แรกใหส้ ังเกตเสน้ สีส้มจะอยูด่ า้ นหัวของ
Row13
ดงั รูปท่ี 5.53

5.53.2

5.53
5.53.1

รปู ท่ี 5.53
5.54 ดทู ี่ Add Components พิมพ์คาํ วา่ Buttonตรงช่องคน้ หา

5.54.1 คลิกค้างท่ี Button แลว้ ลาก
5.54.2 วางใน Column5 และ Column6 ใหค้ รบ 2Button ตอนวางให้สงั เกตเส้นสสี ้มจะอยู่ดา้ นหวั
ของ Column5 และ Column6 ดังรปู ที่ 5.54

5.54.2

5.54
5.54.1

รปู ที่ 5.54

5.55 คลิกท่ี Button1 Text คลกิ ที่ เพ่อื เอาข้อความออก ดงั รูปท่ี 5.55

รูปท่ี 5.55

55.55.1 เปลย่ี นช่อื จาก Button1 เปน็ btnback
55.55.1.1 BackgroundColor เป็น transparent (ไมม่ สี พี ื้นหลัง) ดงั รปู ที่ 5.55.1

5.55.1

5.55.1.1

รปู ที่ 5.55.1

5.55.2 คลิกท่ชี อ่ ง Background Picture แล้วคลิกที่ Upload files ดังรูปท่ี 5.55.2

5.55.3 คลกิ รูป ซ้าย รูปที่ 5.55.2
Open ดังรูปท่ี 5.55.3

รูปท่ี 5.55.3

5.55.4 จะได้รปู ซา้ ย เข้ามาใน Background Picture
5.55.4.1 ใหค้ ลิก Reset โปรแกรม1 คร้งั เพ่ือใหร้ ูปภาพขึน้ ดงั รปู ท่ี 5.55.4

5.55.4.1

5.55.4

รูปที่ 5.55.4

5.56 คลิกท่ี Button2 Text คลกิ ท่ี เพื่อเอาข้อความออก ดงั รปู ท่ี 5.56

รูปท่ี 5.56
5.56.1 เปลี่ยนชอ่ื จาก Button2 เป็น btngo

5.56.1.1 BackgroundColor เปน็ transparent (ไม่มีสพี ื้นหลัง) ดงั รปู ที่ 5.56.1

5.56.1

5.56.1.1

รปู ที่ 5.56.1

5.56.2 คลิกท่ชี ่อง Background Picture แล้วคลิกที่ Upload files ดังรปู ท่ี 5.56.2

5.56.3 คลิกรปู ขวา รูปที่ 5.56.2
Open ดังรปู ที่ 5.56.3

รูปท่ี 5.56.3

5.56.4 จะไดร้ ูป ขวา เขา้ มาใน Background Picture
5.56.4.1 ให้คลกิ Reset โปรแกรม1 ครัง้ เพ่อื ใหร้ ูปภาพข้นึ ดังรปู ที่ 5.56.4

5.56.4.1

5.56.4

รปู ที่ 5.56.4

5.57 คลกิ ท่ี btnback ดทู ่ี Property ด้านขวา Height ใหเ้ ปลีย่ นเป็น Relative Size (e.g. “50%”)
83% Width ให้เปล่ียนเปน็ Relative Size (e.g. “50%”) 65% ดังรูปท่ี 5.57

รูปท่ี 5.57

5.58 คลกิ ท่ี btngo ดทู ่ี Property ดา้ นขวา Height ให้เปล่ยี นเปน็ Relative Size (e.g. “50%”) 83%
Width ให้เปลี่ยนเปน็ Relative Size (e.g. “50%”) 65% ดังรูปที่ 5.58

รูปที่ 5.58

5.59 คลิกท่ี Screen3 เพื่อเปลย่ี นสี Background ดงั รูปท่ี 5.59

รปู ท่ี 5.59
5.59.1 ดูท่ี Property ดา้ นขวา BackgroundColor เปลี่ยนเป็นสฟี ้า ดงั รูปท่ี 5.59.1

รูปที่ 5.59.1

5.60 คลกิ Live test เพอื่ รนั ดูผลลพั ธ์
5.60.1 จะไดผ้ ลลพั ธ์ ดงั รูปที่ 5.60

รูปท่ี 5.60

5.60.2 คลกิ  เพื่อออกจากการรันดูผลลพั ธ์
5.60.2.1 กลับมาอย่ทู ี่หนา้ การทาํ งานของโปรแกรมเหมอื นเดมิ ดงั รูปท่ี 5.60.2

รปู ท่ี 5.60.2

5.61 คลิกท่ีเพ่ือเพมิ่ Screen4 และทาํ งานอยู่ท่ี Screen4 ดงั รปู 5.61

รูป 5.61
5.62 ดทู ่ี Add Components พิมพ์คาํ ว่า Row ตรงช่องคน้ หา

5.62.1 คลกิ ค้างท่ี Rowแลว้ ลาก
5.62.2 วางใน Screen4 ตอนวางครั้งแรกให้สงั เกตเส้นสีส้มจะอยูด่ า้ นหัวของ Screen4 และให้วางต่อ
ลงมาเรอื่ ย ๆ ให้ครบ 2 Row ดงั รปู ที่ 5.62

5.62.2
5.62
5.62.1

รูปท่ี 5.62