13.1.13.4.2. คอนโทรลแบบเก็บค่า#

เหล่านี้คือคอนโทรลที่เก็บการตั้งค่าไว้ แต่ละตัวมี value และ Save จะเขียน value ที่แก้ไขแล้วกลับเข้าไปในคอนโทรล ตารางด้านล่างเป็นแผนที่อย่างย่อจากคอนโทรลไปยังชนิด JSON ที่มันจัดเก็บ ส่วนหัวข้อที่ตามมาจะอธิบายทุกคีย์

คอนโทรล

บันทึก

checkbox

boolean หรือ integer 0/1/2

combobox

ค่าที่เลือก หรือดัชนีของมัน

radio

ค่าที่เลือก หรือดัชนีของมัน

spinbox

integer

doublespinbox

number (ทศนิยม)

slider

integer

lineedit

string

ตัวควบคุมค่าทั้งหมดยังรับคีย์ทั่วไป ( name , label , tooltip , enabled ) ด้วย ดูที่ ภาพรวม label จะแสดงอยู่ข้างตัวควบคุม (บนกล่องเองสำหรับ checkbox )

13.1.13.4.2.1. checkbox#

สวิตช์เปิด/ปิด สามารถกำหนดให้เป็นสามสถานะได้ สำหรับการตั้งค่าที่มีสถานะกลางแบบ "ไม่กำหนด"

{ "type": "checkbox", "name": "draw_overlays", "label": "Draw Overlays", "value": true }

อาร์กิวเมนต์:

  • label (string) -- ข้อความที่แสดงถัดจากกล่อง ข้อความธรรมดาเท่านั้น (ต่างจากคอนโทรลอื่น ๆ ที่ label รองรับ rich text)

  • tristate (boolean, ค่าเริ่มต้น false) -- อนุญาตให้มีสถานะที่สาม คือสถานะที่เลือกไว้บางส่วน

  • value -- สถานะเริ่มต้น แบบสองสถานะ: boolean แบบ tristate: 0 (ปิด), 1 (บางส่วน), หรือ 2 (เปิด)

บันทึก: ค่า boolean สำหรับกล่องแบบสองสถานะ ค่า integer 0, 1, หรือ 2 สำหรับกล่องแบบ tristate

13.1.13.4.2.2. combobox#

เมนูดรอปดาวน์ของตัวเลือกต่าง ๆ

{
  "type": "combobox",
  "name": "resolution",
  "label": "Resolution",
  "options": ["QQVGA", "QVGA", "VGA"],
  "values": ["qqvga", "qvga", "vga"],
  "value": "qvga"
}

อาร์กิวเมนต์:

  • options (อาร์เรย์ของ string) -- รายการที่แสดงในเมนู

  • values (array) -- อาร์เรย์คู่ขนานที่ไม่บังคับ ของค่าที่จะบันทึก หนึ่งค่าต่อหนึ่ง option เมื่อมี values เมนูจะแสดง options[i] แต่บันทึก values[i] -- ดังนั้นผู้ใช้จะเห็น "QVGA" ในขณะที่ไฟล์จัดเก็บ "qvga" รายการเหล่านี้เป็นชนิด JSON ใดก็ได้ หากไม่มี values คอนโทรลจะบันทึก ดัชนี ของรายการที่เลือกแทน

  • value -- การเลือกเริ่มต้น เมื่อมี values จะเป็นรายการที่เท่ากับหนึ่งใน values หากไม่มี values จะเป็นดัชนีของรายการที่จะเลือก (ค่าเริ่มต้น 0)

บันทึก: รายการ values ที่ตรงกัน (ชนิดใดก็ได้) เมื่อมีการระบุ values มิฉะนั้นจะเป็น ดัชนี ที่เลือก (integer)

13.1.13.4.2.3. radio#

ชุดของปุ่ม radio -- มองเห็นได้หนึ่งตัวเลือกในแต่ละครั้ง เหมือน combobox แต่แสดงออกมาทั้งหมด

{
  "type": "radio",
  "name": "mode",
  "label": "Mode",
  "options": ["Idle", "Track", "Record"],
  "values": ["idle", "track", "record"],
  "value": "idle",
  "orientation": "horizontal"
}

อาร์กิวเมนต์:

  • options (อาร์เรย์ของ string) -- หนึ่งปุ่มต่อหนึ่งรายการ

  • values (array) -- ค่าที่ไม่บังคับที่จะบันทึก หนึ่งค่าต่อหนึ่ง option เช่นเดียวกับ combobox ทุกประการ หากไม่มี คอนโทรลจะบันทึก ดัชนี ที่เลือก

  • value -- การเลือกเริ่มต้น จับคู่กับ values หรือใช้เป็นดัชนี เช่นเดียวกับ combobox

  • orientation (string, ค่าเริ่มต้น "vertical") -- "horizontal" เพื่อจัดวางปุ่มเป็นแถว มิฉะนั้นจะเป็นคอลัมน์

บันทึก: รายการ values ที่ตรงกัน (ชนิดใดก็ได้) หรือ ดัชนี ที่เลือก

13.1.13.4.2.4. spinbox#

กล่องตัวเลขสำหรับจำนวนเต็ม พร้อมลูกศรขึ้น/ลง

{
  "type": "spinbox",
  "name": "server_port",
  "label": "Port",
  "value": 8080,
  "min": 0,
  "max": 65535,
  "group_separator": true
}

อาร์กิวเมนต์:

  • value (integer, ค่าเริ่มต้น 0) -- ตัวเลขเริ่มต้น

  • min (integer, ค่าเริ่มต้น 0 หรือ value แล้วแต่ว่าอันไหนน้อยกว่า) -- ค่าต่ำสุดที่อนุญาต

  • max (integer, ค่าเริ่มต้น 100 หรือ value แล้วแต่ว่าอันไหนมากกว่า) -- ค่าสูงสุดที่อนุญาต

  • step (integer, ค่าเริ่มต้น 1) -- ขนาดการเพิ่ม/ลดขึ้น/ลง

  • prefix (string) -- ข้อความที่แสดงก่อนตัวเลข เช่น "0x"

  • suffix (string) -- ข้อความที่แสดงหลังตัวเลข เช่น หน่วยอย่าง " px"

  • base (integer, ค่าเริ่มต้น 10) -- ฐานที่ใช้แสดงผล ตั้งเป็น 16 เพื่อแสดงและแก้ไขตัวเลขในรูปแบบเลขฐานสิบหก

  • group_separator (boolean, ค่าเริ่มต้น false) -- จัดกลุ่มตัวเลขด้วยเครื่องหมายคั่นหลักพัน

  • special_value_text (string) -- ข้อความที่จะแสดงแทนตัวเลขเมื่อค่าอยู่ที่ min เช่น แสดง "Off" ที่ 0

บันทึก: ค่า integer

13.1.13.4.2.5. doublespinbox#

กล่องตัวเลขสำหรับจำนวนทศนิยม

{
  "type": "doublespinbox",
  "name": "sensitivity",
  "label": "Sensitivity",
  "value": 50.0,
  "min": 0,
  "max": 100,
  "step": 0.5,
  "decimals": 1,
  "suffix": " %"
}

อาร์กิวเมนต์:

  • value (number, ค่าเริ่มต้น 0) -- ตัวเลขเริ่มต้น

  • min (number, ค่าเริ่มต้น 0 หรือ value แล้วแต่ว่าอันไหนน้อยกว่า) -- ค่าต่ำสุดที่อนุญาต

  • max (number, ค่าเริ่มต้น 100 หรือ value แล้วแต่ว่าอันไหนมากกว่า) -- ค่าสูงสุดที่อนุญาต

  • decimals (integer, ค่าเริ่มต้น 2) -- จำนวนหลักที่จะแสดงหลังจุดทศนิยม

  • step (number, ค่าเริ่มต้น 1.0) -- ขนาดการเพิ่ม/ลดขึ้น/ลง

  • prefix (string) -- ข้อความที่แสดงก่อนตัวเลข เช่น "max "

  • suffix (string) -- ข้อความที่แสดงหลังตัวเลข เช่น หน่วยอย่าง " %"

  • group_separator (boolean, ค่าเริ่มต้น false) -- เครื่องหมายคั่นหลักพัน

  • special_value_text (string) -- ข้อความที่จะแสดงเมื่อตัวเลขอยู่ที่ min

บันทึก: ค่า number (ทศนิยม)

13.1.13.4.2.6. slider#

slider แนวนอนพร้อมค่าตัวเลขที่แสดงแบบเรียลไทม์อยู่ข้าง ๆ

{
  "type": "slider",
  "name": "brightness",
  "label": "Brightness",
  "value": 50,
  "min": 0,
  "max": 100,
  "step": 1,
  "suffix": " %",
  "ticks": 25
}

อาร์กิวเมนต์:

  • value (integer, ค่าเริ่มต้น 0) -- ตำแหน่งเริ่มต้น

  • min (integer, ค่าเริ่มต้น 0 หรือ value แล้วแต่ว่าอันไหนน้อยกว่า) -- ปลายด้านต่ำของราง

  • max (integer, ค่าเริ่มต้น 100 หรือ value แล้วแต่ว่าอันไหนมากกว่า) -- ปลายด้านสูงของราง

  • step (integer, ค่าเริ่มต้น 1) -- ขนาดการเพิ่มด้วยคีย์บอร์ดและการลาก การลากจะดึงเข้าหาผลคูณที่ใกล้ที่สุด

  • prefix (string) -- ข้อความที่แสดงก่อนค่าตัวเลขที่อยู่ข้าง slider เช่น "x"

  • suffix (string) -- ข้อความที่แสดงหลังค่าตัวเลข เช่น " %"

  • ticks (integer) -- ระยะห่างของขีดบอกระยะที่วาดไว้ใต้ราง

บันทึก: ค่า integer

13.1.13.4.2.7. lineedit#

ฟิลด์ข้อความบรรทัดเดียว สำหรับชื่อ รหัสผ่าน ที่อยู่ และอื่น ๆ ในลักษณะเดียวกัน

{
  "type": "lineedit",
  "name": "hostname",
  "label": "Hostname",
  "value": "openmv-cam",
  "placeholder": "letters, digits, dashes",
  "regex": "[A-Za-z0-9-]+",
  "clear_button": true
}

อาร์กิวเมนต์:

  • value (string, ค่าเริ่มต้น "") -- ข้อความเริ่มต้น

  • placeholder (string) -- ข้อความคำใบ้สีเทาที่แสดงในขณะที่ฟิลด์ว่างเปล่า

  • max_length (integer) -- จำนวนอักขระมากที่สุดที่ฟิลด์จะยอมรับ

  • mask (string) -- input mask ที่กำหนดรูปแบบตายตัวของสิ่งที่พิมพ์ได้ เช่น "000.000.000.000;_" สำหรับที่อยู่ IPv4 ดู Input masks ด้านล่าง

  • regex (string) -- นิพจน์ปกติที่ข้อความทั้งหมดต้องตรงกัน ดู Regular expressions ด้านล่าง

  • clear_button (boolean, ค่าเริ่มต้น false) -- แสดงปุ่มล้างเล็ก ๆ ภายในฟิลด์

  • password (boolean, ค่าเริ่มต้น false) -- ซ่อนข้อความเป็นจุด ๆ และเพิ่มปุ่มรูปตาเพื่อเปิดเผยมัน

บันทึก: ค่า string

ทั้ง mask และ regex ต่างจำกัดสิ่งที่ฟิลด์จะยอมรับ จากมุมที่ตรงข้ามกัน -- mask กำหนด รูปแบบ ของข้อความ ส่วน regex จำกัด เนื้อหา ของมัน ฟิลด์ที่มีอย่างใดอย่างหนึ่งเป็นคอนโทรลเดียวที่สามารถขัดขวางการ Save ได้: หากข้อความไม่สมบูรณ์หรือไม่ตรงกัน เอดิเตอร์จะแสดงรายชื่อฟิลด์ตาม label ของมัน และปฏิเสธที่จะบันทึกจนกว่าจะแก้ไขหรือล้างข้อมูล ใช้อย่างมากที่สุดหนึ่งในสองอย่างนี้ต่อฟิลด์

13.1.13.4.2.7.1. Input masks#

mask กำหนดฟิลด์ทีละอักขระ: เครื่องหมายคั่นถูกวาดไว้ให้ผู้ใช้แล้ว โดยผู้ใช้เพียงเติมช่องว่าง อักขระ mask แต่ละตัวแทนตำแหน่งอินพุตหนึ่งตำแหน่ง:

  • 9 -- ตัวเลขที่จำเป็น 0 -- ตัวเลขที่ไม่บังคับ

  • A / a -- ตัวอักษรที่จำเป็น / ไม่บังคับ

  • N / n -- ตัวอักษรหรือตัวเลขที่จำเป็น / ไม่บังคับ

  • X / x -- อักขระชนิดใดก็ได้ที่จำเป็น / ไม่บังคับ

  • H / h -- เลขฐานสิบหกที่จำเป็น / ไม่บังคับ

  • > / < -- แปลงตัวอักษรที่ตามมาเป็นตัวพิมพ์ใหญ่ / ตัวพิมพ์เล็ก ! หยุดการแปลง

อักขระอื่น ๆ -- เช่น . ใน 000.000.000.000 หรือ - ในหมายเลขซีเรียล -- เป็นเครื่องหมายคั่นตามตัวอักษร: มันถูกวางไว้โดยอัตโนมัติและถูกข้ามไปในขณะที่ผู้ใช้พิมพ์ หากต้องการใช้อักขระ mask เป็นตัวอักษรตามตัวจริง ให้ใส่แบ็กสแลชไว้ข้างหน้า

; ใกล้ท้ายกำหนดตัวยึดตำแหน่งที่แสดงสำหรับตำแหน่งที่ยังไม่ได้เติม: "000.000.000.000;_" จะแสดงฟิลด์ว่างเป็น ___.___.___.___ หากไม่ใส่ ช่องว่างจะเป็นช่องเว้นวรรค ในขณะที่ตำแหน่งที่ จำเป็น ใด ๆ ยังคงว่างอยู่ ข้อความจะไม่สมบูรณ์ ซึ่งจะขัดขวางการ Save

13.1.13.4.2.7.2. Regular expressions#

regex ตรวจสอบเนื้อหามากกว่ารูปแบบ และเหมาะกว่าเมื่อกฎเป็นแบบ "อักขระเหล่านี้ รูปแบบนี้" มากกว่าจะเป็นฟิลด์ตายตัว ข้อความทั้งหมดต้องตรงกัน -- นิพจน์ถูกยึดที่ปลายทั้งสองด้าน ดังนั้น "[A-Za-z0-9-]+" จึงหมายถึง เฉพาะ ตัวอักษร ตัวเลข และขีดกลาง ตั้งแต่ต้นจนจบ ไม่ใช่แค่ "มีอยู่หนึ่งตัว"

การตรวจสอบทำงานทุกครั้งที่กดปุ่ม อักขระจะถูกยอมรับตราบใดที่ข้อความยังสามารถเติบโตไปสู่การจับคู่ที่สมบูรณ์ได้ และถูกปฏิเสธทันทีที่ทำไม่ได้ ดังนั้นผู้ใช้จึงไม่มีทางพิมพ์ไปสู่สิ่งที่ไม่ถูกต้องได้ ฟิลด์จะนับว่าถูกต้อง -- และอนุญาตให้ Save ได้ -- ก็ต่อเมื่อนิพจน์ทั้งหมดตรงกันแล้วเท่านั้น ข้อความที่ยังไม่สมบูรณ์ระหว่างทางไปสู่จุดนั้นจะยังคงอยู่แต่ขัดขวางการ Save จนกว่าจะสมบูรณ์

ในการสร้างและทดสอบรูปแบบ regex101.com จะอธิบายแต่ละส่วนในขณะที่คุณพิมพ์ -- ให้ตั้งค่า flavor ของมันเป็น PCRE2 ซึ่งเป็นไวยากรณ์ที่เอดิเตอร์ใช้