{"product_id":"joystick-panel-for-m5-face-esp32-development-kit-x-y-axis-push-button-switch-with-rgb-led-bar-and-mega328-insi","title":"Joystick Panel for M5 FACE ESP32 Development Kit X\/Y Axis Push Button Switch with RGB LED Bar and MEGA328 Insi","description":"\u003ch2 id=\"description\"\u003e   \u003cspan style=\"font-size:16px;\"\u003eDescription:\u003c\/span\u003e\n\u003c\/h2\u003e  \u003cp apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder; color: var(--strong-color, currentColor);\"\u003eJOYSTICK\u003c\/span\u003e is a control column module. A joystick is an input device consisting of a stick that pivots on a base and reports its angle or direction to the device it is controlling. Same as ENCODER, it is compatible with FACE Kit. You can have it replace the keycoard panel inside the FACE kit. Through IIC you can get the offset data form (X, Y) axis, also the button status. You can customized the LED behavior as you like.\u003c\/p\u003e  \u003cp apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   JOYSTICK IIC address is 0x5E).\u003c\/p\u003e  \u003cimg apple=\"\" class=\"medium-zoom-image\" color=\"\" height=\"60%\" helvetica=\"\" segoe=\"\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/module\/module_joystick_03.png\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; border: 0px none; vertical-align: middle; cursor: zoom-in; transition: transform 0.3s ease 0s; max-width: 100%; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" width=\"60%\"\u003e  \u003ch2 id=\"product-features\"\u003e   \u003cspan style=\"font-size:16px;\"\u003eProduct Features:\u003c\/span\u003e\n\u003c\/h2\u003e  \u003cul apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; padding-left: 1.5rem; font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003cli style=\"color: rgb(33, 37, 41); box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    12 RGB Led\u003c\/li\u003e   \u003cli style=\"color: rgb(33, 37, 41); box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    IIC communication\u003c\/li\u003e   \u003cli style=\"color: rgb(33, 37, 41); box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    Simple API for programming\u003c\/li\u003e   \u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    Product Size: 58.2mm x 54.2mm x 10mm\u003c\/li\u003e   \u003cli style=\"color: rgb(33, 37, 41); box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    Product weight: 30g\u003c\/li\u003e  \u003c\/ul\u003e  \u003ch2 apple=\"\" color=\"\" helvetica=\"\" id=\"function\" segoe=\"\" style=\"box-sizing: border-box; font-size: var(--heading-h2-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: var(--heading-h2-margin, var(--heading-margin)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color:=\"\" font-weight:=\"\" line-height:=\"\" padding:=\"\"\u003e   \u003cspan style=\"font-size:16px;\"\u003e\u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003eFunction:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/h2\u003e  \u003cp apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder; color: var(--strong-color, currentColor);\"\u003eControl single RGB\u003c\/span\u003e\u003c\/p\u003e  \u003cpre data-lang=\"\" style=\"box-sizing: border-box; font-size: var(--code-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: var(--code-font-family); line-height: var(--code-block-line-height); margin: var(--code-block-margin); overflow: hidden; color: var(--code-theme-text); background: var(--code-theme-background); tab-size: var(--code-tab-size); overflow-wrap: normal; word-break: normal; hyphens: none; position: relative; padding: 0px; border-radius: var(--code-block-border-radius);\" v-pre=\"\"\u003e  \u003ccode class=\"lang-\" style=\"box-sizing: border-box; font-size: var(--code-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: var(--code-font-family); color: var(--code-theme-text); word-break: normal; font-weight: var(--code-font-weight); line-height: var(--code-block-line-height); tab-size: var(--code-tab-size); word-spacing: normal; overflow-wrap: normal; hyphens: none; display: block; overflow: auto; padding: var(--code-block-padding);\"\u003e\/*      Parameter:          indexOfLED: 0 ~ 11          r, g, b: 0 ~ 254  *\/  void Led(int indexOfLED, int r, int g, int b){    Wire.beginTransmission(FACE_JOY_ADDR);    Wire.write(indexOfLED);    Wire.write(r);    Wire.write(g);    Wire.write(b);    Wire.endTransmission();  }\u003c\/code\u003e\u003cbutton class=\"docsify-copy-code-button\" style=\"font-size: 1em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: inherit; margin: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 0px; line-height: inherit; overflow: visible; cursor: pointer; transition: all 0.25s ease 0s; position: absolute; z-index: 1; top: 0px; right: 0px; padding: 0.65em 0.8em; border-width: 0px; border-style: initial; border-color: initial; outline: 0px; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; opacity: 0;\"\u003e\u003cspan class=\"label\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; cursor: pointer; transition: all 0.25s ease 0s; border-radius: var(--border-radius-s, 0); background: inherit; pointer-events: none;\"\u003eCopy to clipboard\u003c\/span\u003e\u003cspan class=\"error\" style=\"box-sizing: border-box; font-size: 0.825em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; cursor: pointer; transition: all 0.25s ease 0s; border-radius: var(--border-radius-s, 0); background: inherit; pointer-events: none; position: absolute; z-index: -100; top: 22.375px; left: 0px; padding: 0.5em 0.65em; opacity: 0; transform: translateY(-50%);\"\u003eError\u003c\/span\u003e\u003cspan class=\"success\" style=\"box-sizing: border-box; font-size: 0.825em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; cursor: pointer; transition: all 0.25s ease 0s; border-radius: var(--border-radius-s, 0); background: inherit; pointer-events: none; position: absolute; z-index: -100; top: 22.375px; left: 0px; padding: 0.5em 0.65em; opacity: 0; transform: translateY(-50%);\"\u003eCopied\u003c\/span\u003e\u003c\/button\u003e\u003c\/pre\u003e  \u003cp apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder; color: var(--strong-color, currentColor);\"\u003eRead the offset of each direction\u003c\/span\u003e\u003c\/p\u003e  \u003cpre data-lang=\"\" style=\"box-sizing: border-box; font-size: var(--code-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: var(--code-font-family); line-height: var(--code-block-line-height); margin: var(--code-block-margin); overflow: hidden; color: var(--code-theme-text); background: var(--code-theme-background); tab-size: var(--code-tab-size); overflow-wrap: normal; word-break: normal; hyphens: none; position: relative; padding: 0px; border-radius: var(--code-block-border-radius);\" v-pre=\"\"\u003e  \u003ccode class=\"lang-\" style=\"box-sizing: border-box; font-size: var(--code-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: var(--code-font-family); color: var(--code-theme-text); word-break: normal; font-weight: var(--code-font-weight); line-height: var(--code-block-line-height); tab-size: var(--code-tab-size); word-spacing: normal; overflow-wrap: normal; hyphens: none; display: block; overflow: auto; padding: var(--code-block-padding);\"\u003evoid get_joystick_offset(void){    Wire.requestFrom(FACE_JOY_ADDR, 5);    if (Wire.available()) {        y_data_L = Wire.read();      y_data_H = Wire.read();      x_data_L = Wire.read();      x_data_H = Wire.read();        button_data = Wire.read();\/\/ Z(0: released 1: pressed)  }\u003c\/code\u003e\u003cbutton class=\"docsify-copy-code-button\" style=\"font-size: 1em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: inherit; margin: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 0px; line-height: inherit; overflow: visible; cursor: pointer; transition: all 0.25s ease 0s; position: absolute; z-index: 1; top: 0px; right: 0px; padding: 0.65em 0.8em; border-width: 0px; border-style: initial; border-color: initial; outline: 0px; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; opacity: 0;\"\u003e\u003cspan class=\"label\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; cursor: pointer; transition: all 0.25s ease 0s; border-radius: var(--border-radius-s, 0); background: inherit; pointer-events: none;\"\u003eCopy to clipboard\u003c\/span\u003e\u003cspan class=\"error\" style=\"box-sizing: border-box; font-size: 0.825em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; cursor: pointer; transition: all 0.25s ease 0s; border-radius: var(--border-radius-s, 0); background: inherit; pointer-events: none; position: absolute; z-index: -100; top: 22.375px; left: 0px; padding: 0.5em 0.65em; opacity: 0; transform: translateY(-50%);\"\u003eError\u003c\/span\u003e\u003cspan class=\"success\" style=\"box-sizing: border-box; font-size: 0.825em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; cursor: pointer; transition: all 0.25s ease 0s; border-radius: var(--border-radius-s, 0); background: inherit; pointer-events: none; position: absolute; z-index: -100; top: 22.375px; left: 0px; padding: 0.5em 0.65em; opacity: 0; transform: translateY(-50%);\"\u003eCopied\u003c\/span\u003e\u003c\/button\u003e\u003c\/pre\u003e  \u003cimg apple=\"\" class=\"medium-zoom-image\" color=\"\" height=\"60%\" helvetica=\"\" segoe=\"\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/module\/module_joystick_02.png\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; border: 0px none; vertical-align: middle; cursor: zoom-in; transition: transform 0.3s ease 0s; max-width: 100%; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" width=\"60%\"\u003e  \u003ch2 apple=\"\" color=\"\" helvetica=\"\" id=\"include\" segoe=\"\" style=\"box-sizing: border-box; font-size: var(--heading-h2-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: var(--heading-h2-margin, var(--heading-margin)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color:=\"\" font-weight:=\"\" line-height:=\"\" padding:=\"\"\u003e   \u003cspan style=\"font-size:16px;\"\u003e\u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003ePackage Included:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/h2\u003e  \u003cul apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; padding-left: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    1x M5Stack JOYSTICK Module board\u003c\/li\u003e   \u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    1x Joystick Bar\u003c\/li\u003e  \u003c\/ul\u003e  \u003ch2 apple=\"\" color=\"\" helvetica=\"\" id=\"related-link\" segoe=\"\" style=\"box-sizing: border-box; font-size: var(--heading-h2-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: var(--heading-h2-margin, var(--heading-margin)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color:=\"\" font-weight:=\"\" line-height:=\"\" padding:=\"\"\u003e   \u003cspan style=\"font-size:16px;\"\u003e\u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003eRelated Link:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/h2\u003e  \u003cul apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; padding-left: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    \u003cp style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px;\"\u003e     \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder;\"\u003e\u003ca href=\"https:\/\/www.youtube.com\/channel\/UCozgFVglWYQXbvTmGyS739w\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; text-decoration-color: var(--link-text-decoration-color); text-decoration-skip-ink: auto; background-color: transparent; border-bottom: var(--link-border-bottom);\" target=\"_blank\"\u003e\u003cspan style=\"color:#ff0000;\"\u003eOffical Video\u003c\/span\u003e\u003c\/a\u003e\u003c\/span\u003e\u003c\/p\u003e   \u003c\/li\u003e   \u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    \u003cp style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px;\"\u003e     \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder;\"\u003e\u003ca href=\"http:\/\/forum.m5stack.com\/\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; text-decoration-color: var(--link-text-decoration-color); text-decoration-skip-ink: auto; background-color: transparent; border-bottom: var(--link-border-bottom);\" target=\"_blank\"\u003e\u003cspan style=\"color:#ff0000;\"\u003eForum\u003c\/span\u003e\u003c\/a\u003e\u003c\/span\u003e\u003c\/p\u003e   \u003c\/li\u003e   \u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e    \u003cp style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px;\"\u003e     \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder;\"\u003e\u003ca href=\"https:\/\/github.com\/m5stack\/M5-ProductExampleCodes\/tree\/master\/Module\/JOYSTICK\/firmware_328p\/FaceJoystick328\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; text-decoration-color: var(--link-text-decoration-color); text-decoration-skip-ink: auto; background-color: transparent; border-bottom: var(--link-border-bottom);\" target=\"_blank\"\u003e\u003cspan style=\"color:#ff0000;\"\u003eThe Firmware of inside MEGA328\u003c\/span\u003e\u003c\/a\u003e\u003c\/span\u003e\u003c\/p\u003e   \u003c\/li\u003e  \u003c\/ul\u003e  \u003ch2 apple=\"\" color=\"\" helvetica=\"\" id=\"easyloader\" segoe=\"\" style=\"box-sizing: border-box; font-size: var(--heading-h2-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: var(--heading-h2-margin, var(--heading-margin)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color:=\"\" font-weight:=\"\" line-height:=\"\" padding:=\"\"\u003e   \u003cspan style=\"font-size:16px;\"\u003e\u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003eEasyLoader\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/h2\u003e  \u003cimg apple=\"\" class=\"medium-zoom-image\" color=\"\" helvetica=\"\" segoe=\"\" src=\"https:\/\/m5stack.oss-cn-shenzhen.aliyuncs.com\/image\/EasyLoader_logo.png\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; border: 0px none; vertical-align: middle; cursor: zoom-in; transition: transform 0.3s ease 0s; max-width: 100%; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" width=\"100px\" margin-top:=\"\"\u003e  \u003cp apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e   \u003ca href=\"https:\/\/m5stack.oss-cn-shenzhen.aliyuncs.com\/EasyLoader\/Module\/EasyLoader_FACES_joystick.exe\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; text-decoration-color: var(--link-text-decoration-color); text-decoration-skip-ink: auto; background-color: transparent; border-bottom: var(--link-border-bottom);\"\u003e\u003cbutton class=\"btn btn-primary\" style=\"font-size: 1rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: inherit; margin: 0px; border-radius: 0.25rem; line-height: 1.5; overflow: visible; white-space: nowrap; vertical-align: middle; user-select: none; border-width: 1px; border-style: solid; border-color: rgb(0, 123, 255); padding: 0.375rem 0.75rem; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); cursor: pointer;\" type=\"button\"\u003eclick to download EasyLoader\u003c\/button\u003e\u003c\/a\u003e\u003c\/p\u003e  \u003cblockquote a=\"\" and=\"\" apple=\"\" blockquote=\"\" br=\"\" case=\"\" color=\"\" e=\"\" each=\"\" fast=\"\" for=\"\" has=\"\" helvetica=\"\" is=\"\" p=\"\" page=\"\" product=\"\" product-related=\"\" program=\"\" segoe=\"\" simple=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 2em 0px; overflow: visible; padding: 1.5em; border-width: var(--blockquote-border-width, 0); border-style: var(--blockquote-border-style); border-color: var(--blockquote-border-color); border-radius: var(--blockquote-border-radius); background: var(--blockquote-background); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" quotes:=\"\"\u003e   \u003cbr\u003e   \u003cp style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 0px;\"\u003e    2.After downloading the software, double-click to run the application, connect the M5 device to the computer via the data cable, select the port parameters, and click \u003cspan style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder; color: var(--strong-color, currentColor);\"\u003e\"Burn\"\u003c\/span\u003e to start burning.\u003cbr\u003e    \u003cbr\u003e    3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. \u003cstrong\u003e\u003ca href=\"https:\/\/docs.m5stack.com\/#\/en\/related_documents\/establish_serial_connection\" style=\"background-color: transparent; font-size: inherit; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; text-decoration-color: var(--link-text-decoration-color); text-decoration-skip-ink: auto; border-bottom: var(--link-border-bottom);\"\u003e\u003cspan style=\"color:#ff0000;\"\u003eClick here to view the driver installation tutorial\u003c\/span\u003e\u003c\/a\u003e\u003c\/strong\u003e\u003c\/p\u003e   \u003ch2 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"example\" line-height:=\"\" padding:=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: var(--heading-h2-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: var(--heading-h2-margin, var(--heading-margin)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e    \u003cspan style=\"font-size:16px;\"\u003e\u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003eExample:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/h2\u003e   \u003ch3 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"-ide\" line-height:=\"\" padding:=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: var(--heading-h3-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin-top: 1rem; font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e    \u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003e IDE\u003c\/span\u003e\u003c\/strong\u003e\n\u003c\/h3\u003e   \u003cp apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"box-sizing: border-box; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; margin: 1em 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e    \u003cem style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eTo the complete code \u003ccode style=\"box-sizing: border-box; font-size: var(--code-font-size); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-family: var(--code-font-family); color: var(--code-inline-color, currentColor); word-break: break-word; font-weight: var(--code-font-weight); line-height: inherit; margin: var(--code-inline-margin); padding: var(--code-inline-padding); border-radius: var(--code-inline-border-radius); background: var(--code-inline-background); white-space: nowrap;\"\u003efaces_joystick.ino\u003c\/code\u003e, click \u003cstrong\u003e\u003ca href=\"https:\/\/github.com\/m5stack\/M5-ProductExampleCodes\/tree\/master\/Module\/JOYSTICK\/\/faces_joystick\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; text-decoration-color: var(--link-text-decoration-color); text-decoration-skip-ink: auto; background-color: transparent; border-bottom: var(--link-border-bottom);\" target=\"_blank\"\u003e\u003cspan style=\"color:#ff0000;\"\u003ehere\u003c\/span\u003e\u003c\/a\u003e\u003c\/strong\u003e\u003c\/em\u003e\u003c\/p\u003e  \u003c\/blockquote\u003e  \u003cbr\u003e\u003cimg alt=\"\" class=\"M5Stack,Push Button Switch,NeoPixel,MEGA328,ESP32\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/ser1\/banggood\/images\/AC\/06\/90574a41-14fb-4a1f-9304-fbf30eca7394.JPG\" title=\"M5Stack,Push Button Switch,NeoPixel,MEGA328,ESP32\"\u003e\u003cbr\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/ser1\/banggood\/images\/9D\/8B\/6250b739-6e2c-44e6-9946-8ae592fa9e5e.JPG\"\u003e\u003cbr\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/ser1\/banggood\/images\/B3\/36\/30e39485-92bf-4b11-9966-26aa8207b65f.JPG\"\u003e\u003cbr\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/ser1\/banggood\/images\/6D\/8E\/e03727a2-50a3-4c9c-a445-fb237c18de08.JPG\"\u003e\u003cbr\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/ser1\/banggood\/images\/83\/EB\/bb035bc7-46e6-45ed-bb59-cc9f5d57a1d7.JPG\"\u003e\u003cbr\u003e\u003cbr\u003e","brand":"Electronic Pro","offers":[{"title":"Default Title","offer_id":35468119310492,"sku":"1537970","price":602.04,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/2787\/9162\/products\/d1d7cd38-cf32-4a2f-b68c-a8e79c5fc88d.jpg?v=1597149498","url":"https:\/\/electronic-pro-south-africa.myshopify.com\/products\/joystick-panel-for-m5-face-esp32-development-kit-x-y-axis-push-button-switch-with-rgb-led-bar-and-mega328-insi","provider":"Electronic Pro ","version":"1.0","type":"link"}