مرحبا! اليوم سنلتقي بشيء مثل واجهة المستخدم M5. بفضل واجهة المستخدم M5 ، يمكنك ربط جميع أنواع الحقول والأزرار وأشرطة التمرير والمفاتيح ببعض سطرين من التعليمات البرمجية وإنشاء طبقات شرطية. على الرغم من حقيقة أن عملية ربط عناصر واجهة المستخدم بسيطة للغاية ، يمكنك أيضًا استخدام الأداة المرئية M5 UI Designer لـ Arduino IDE.
![](https://habrastorage.org/webt/hq/j9/ei/hqj9eitptjonwol-qxdax_ew9b4.jpeg)
الصورة 1
M5 UI , M5 UI Designer.
, . / , , , , . 2.
![](https://habrastorage.org/getpro/habr/post_images/496/9c5/e78/4969c5e78f6672949f7ca71a291a4d8c.jpg)
2.
, ( ) Fn TAB
Inputbox 50 px. , 32 px. (: Enter user name), , ':'. , . — . .
Textbox . , . . . .
Waitingbar 50 px. , 12 px. (: Connection to Wi-Fi), , ':'. , . .
Progressbar 50 px. , 12 px. (: Times of the check), , ':'. , ( 10% — , 30% — , 80% — , 100% — ). .
Selectbox 50 px. , 44 px. (: Mode), , ':'. , . Fn, K / M / .
Checkbox (true/false) 32 px. , 44 px. ( , true, — false). (: Remember password). SPACE.
Button ( void (String*)) 32 px. , 22 px. (: Launch). (. 3). SPACE.
![](https://habrastorage.org/getpro/habr/post_images/d2b/638/d16/d2b638d1695c51931b92f96e5fa362e0.jpg)
3. 24 x 24 px
, 51 px.
Rangebox 50 px. , 32 px. (: Speed), , ':'. . Fn, N / $ / .
- PC/MAC;
- M5STACK;
- FACES;
- FACES Keyboard;
- USB-C ;
- ( -);
- 5 7 ;
- 40 60 ;
- ;
- ;
- ;
- 36 (1 .);
- 160 (1 .);
- 74HC595N (1 .);
- 220 (1 .);
- : , , , (4 .);
- BC337 (1 .);
- 100 (1 .);
- (1 .).
!
1. M5 UI
M5 UI for Arduino IDE Downloads ( ) GitHub (. 3.1).
![](https://habrastorage.org/getpro/habr/post_images/6c9/554/054/6c95540549cbb7d9411fc89b8337f4ee.jpg)
3.1. Clone or download, Download ZIP
Arduino IDE (. 3.2).
![](https://habrastorage.org/getpro/habr/post_images/bbf/6ed/6f3/bbf6ed6f3d031dbcf7cd7844e508554e.jpg)
3.2. Sketch, Include Library, Add .ZIP Library...
. .
2. M5 UI Designer
M5 UI Designer for Arduino IDE Downloads ( ) GitHub , index.html (beta- Chrome) (. 3.4)
![](https://habrastorage.org/getpro/habr/post_images/832/d53/0c6/832d530c675a868b5024de94345451bc.jpg)
3.4
(. 3.5).
![](https://habrastorage.org/getpro/habr/post_images/27f/1e0/2b1/27f1e02b12d18c6b43fcf27c703cd340.jpg)
3.5. — M5 UI Designer
3. Enter — (⊙_⊙)
— Inputbox , : -. M5 ? — Enter ( ).
Enter, — void (String*).
void userFunction1(String* rootVar) {
// reaction after pressing the Enter key
}
...
UIEnter = userFunction1;
4. , Inputbox Textbox (^_^♪)
— Inputbox. Enter (. 4).
![](https://habrastorage.org/getpro/habr/post_images/efa/0ab/e4e/efa0abe4e755d14ddd71e28b3d943d4b.jpg)
4.
M5 UI Designer, Inputbox Textbox, . Tools > User Functions " " Morse. Properties > Enter key Morse (. 4.1).
![](https://habrastorage.org/getpro/habr/post_images/d3e/864/2f9/d3e8642f9d7d048e6c679eed797b970c.jpg)
4.1.
Source Arduino IDE.
/* User functions: */
void Morse(String* rootVar) {
int MorseCodes[] =
{
0,1,-1,-1, // A
1,0,0,0, // B
1,0,1,0, // C
1,0,0,-1, // D
0,-1,-1,-1, // E
0,0,1,0, //F
1,1,0,-1, // G
0,0,0,0, // H
0,0,-1,-1, // I
0,1,1,1, // J
1,0,1,-1, // K
0,1,0,0, // L
1,1,-1,-1, // M
1,0,-1,-1, // N
1,1,1,-1, // O
0,1,1,0, // P
1,1,0,1, // Q
0,1,0,-1, // R
0,0,0,-1, // S
1,-1,-1,-1, // T
0,0,1,-1, // U
0,0,0,1, // V
0,1,1,-1, // W
1,0,0,1, // X
1,0,1,1, // Y
1,1,0,0 // Z
};
for (int i = 0; i < UIInputbox_v05700a.length(); i++) {
char chr = UIInputbox_v05700a[i];
if (chr == ' ')
{
M5.Speaker.mute();
delay(350);
}
else
{
int chrNum = (chr - 'a') * 4;
for (int j = chrNum; j < (chrNum + 4); j++)
{
M5.Speaker.tone(440);
if (MorseCodes[j] == 0)
delay(50);
else if (MorseCodes[j] == 1)
delay(200);
M5.Speaker.mute();
delay(150);
}
}
}
}
— M5 UI Designer . , — Morse. :) (. 4.2).
![](https://habrastorage.org/getpro/habr/post_images/293/28e/56f/29328e56f579ef210bee6458d41bcc7c.jpg)
4.2
5. Bruteforce Waitingbar ≧(◕ ‿‿ ◕)≦
Waitingbar. 8- , . Waitingbar. , Waitingbar . Enter (. 5).
![](https://habrastorage.org/getpro/habr/post_images/efd/366/480/efd366480bb93ebf86546c5c0d12b6bd.jpg)
5.
default void UIDiable(bool, String*) . , Waitingbar .
/* Function for layer default: */
void LayerFunction_default(String* rootVar) {
/* UI Elements */
...
UIDisable(true, &UIWaitingbar_yksk2w8);
}
void UIDisable(bool, String*) void UISet(String*, int) , . bool — true/false .. / ; String* — rootVar ( ) .
void Brutforce(String*):
/* User functions: */
void Brutforce(String* rootVar) {
/* make random original key */
uint8_t okey = random(0, 256);
String okeyString = "";
for (int i = 0; i < 8; i++) {
okeyString += String((okey >> i) & 1);
}
UISet(&UITextbox_sxjzx0g, okeyString); // set value for Textbox
UIDisable(false, &UIWaitingbar_yksk2w8); // show the Waitingbar
uint8_t key;
while (true) {
key++;
String keyString = String();
for (int i = 0; i < 8; i++) {
keyString += String((key >> i) & 1);
}
UISet(&UITextbox_eyar2x, keyString);
Serial.print(key);
Serial.print(" ");
Serial.println(okey);
if (key == okey) break;
M5.Speaker.tone(800);
delay(40);
M5.Speaker.mute();
}
UIDisable(true, &UIWaitingbar_yksk2w8);
M5.Speaker.tone(600);
delay(75);
M5.Speaker.mute();
M5.Speaker.tone(800);
delay(75);
M5.Speaker.mute();
M5.Speaker.tone(500);
delay(75);
M5.Speaker.mute();
}
, void UISet(String*, String) void UISet(String*, int). String* — rootVar ( ) ; String int — .
, (. 5.1).
![](https://habrastorage.org/getpro/habr/post_images/8a7/8ea/c33/8a78eac333517f6e4d6671b62b15762e.jpg)
5.1
6. BatteryCheck Progressbar Σ(O_O)
A, AA, AAA. Progressbar , Textbox (. 6).
![](https://habrastorage.org/getpro/habr/post_images/7e0/9d6/565/7e09d65655d1738301eab11b7d5e2414.jpg)
6.
/* Function for layer default: */
void LayerFunction_default(String* rootVar) {
/* To open this layer use: */
...
// BattaryCheck
while (true) {
int voltage = analogRead(35) * 3400 / 4096;
int percentage = voltage * 100 / 1600;
UISet(&UIProgressbar_1mlmhcu, percentage);
UISet(&UITextbox_gtaetjh, voltage);
delay(500);
}
}
, 500 , 0 ( 35).
: 3400 — , 4096 — . 6.1.
— M5 Bottom FACES
![](https://habrastorage.org/getpro/habr/post_images/7c9/08b/7fd/7c908b7fd4ef3b614924011d7dfa4616.jpg)
6.1.
! (. 6.2).
![](https://habrastorage.org/getpro/habr/post_images/20b/926/3d3/20b9263d3f57b5ff57688060026fb73c.jpg)
6.2
7. LEDshift Selectbox ( ◡‿◡ *)
(, , ) 74HC595N M5 7.
![](https://habrastorage.org/getpro/habr/post_images/e48/bee/124/e48bee1245b65155882fa2b10a4ae810.jpg)
7. M5
M5 UI Designer, , (. 7.1).
![](https://habrastorage.org/getpro/habr/post_images/dc3/d8b/7c5/dc3d8b7c555f81f67a7d2dc9e495b599.jpg)
7.1.
.
M5 74HC595N RootVar's:
/* RootVar's for UI elements (note: not edit manually) */
...
// Shift register pinout
int SH_CP = 17;
int ST_CP = 2;
int DS = 5;
void SelectColor(String*):
/* User functions: */
void SelectColor(String* rootVar) {
int led = UIOptionValue(&UISelectbox_6foo6h).toInt();
digitalWrite(ST_CP, LOW);
shiftOut(DS, SH_CP, MSBFIRST, led);
digitalWrite(ST_CP, HIGH);
delay(100);
}
, Selectbox String UIOptionValue(String*).
Selectbox . 5 :
/* Function for layer default: */
void LayerFunction_default(String* rootVar) {
// add options to Selectbox
UIOption("OFF", "0", &UISelectbox_6foo6h);
UIOption("RED", "17", &UISelectbox_6foo6h);
UIOption("YELLOW", "3", &UISelectbox_6foo6h);
UIOption("GREEN", "5", &UISelectbox_6foo6h);
UIOption("ORANGE", "9", &UISelectbox_6foo6h);
...
}
, Selectbox void UIOption(String, String, String*). String — , ; String — , ; String* — rootVar ( )
. M5 :
void setup() {
...
/* Prepare user's I/O. For example pinMode(5, OUTPUT); */
pinMode(SH_CP, OUTPUT);
pinMode(ST_CP, OUTPUT);
pinMode(DS, OUTPUT);
...
}
! :) (. 7.2).
![](https://habrastorage.org/getpro/habr/post_images/8ad/190/2d7/8ad1902d7860e14264f8bff93bbd38fc.jpg)
7.2
Rangebox, Checkbox Button? ! — . (, ), ( ), , , ! , , , : Checkbox.
![](https://habrastorage.org/getpro/habr/post_images/f66/502/e45/f66502e45855eabbfef5f38c329f3a0b.jpg)
8
Rangebox . (. 8). — ;)
Enter , Enter key ().
Drill Callback .
? RootVar's bool startStatus, .
/* RootVar's for UI elements (note: not edit manually) */
...
// User's variables
bool startStatus = false;
void Drill(String*):
void Drill(String* rootVar) {
startStatus = (startStatus) ? false : true;
if (startStatus)
{
int power = UIRangebox_ztj619h.toInt() * 255 / 100;
dac_out_voltage(DAC_CHANNEL_1, power);
if (UICheckbox_1n9gs0b == "true")
{
UICaption("WAIT", &UIButton_enhu9fc);
delay(25000);
Drill(0);
return;
}
UICaption("STOP", &UIButton_enhu9fc);
}
else
{
dac_out_voltage(DAC_CHANNEL_1, 0);
UICaption("START", &UIButton_enhu9fc);
}
}
, dac_out_voltage(DAC_CHANNEL_1, int). DAC_CHANNEL_1 — ( 25), int —
;
, UI- UICaption(String, String). String — ; String\ — rootVar ( )
! (. 8.1).
![](https://habrastorage.org/getpro/habr/post_images/c22/b97/c87/c22b97c87390b3a6a05d11a8005e58c9.jpg)
8.1
9. !
"" . .
\ Downloads