{"product_id":"encoder-module-for-m5stack-faces-esp32-pocket-computer-with-12pcs-rgb-led-mega328-inside-i2c","title":"Encoder Module for M5Stack FACES ESP32 Pocket Computer with 12pcs RGB LED MEGA328 Inside I2C","description":"\u003ch2 apple=\"\" color=\"\" helvetica=\"\" id=\"description\" 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;\"\u003eDescription:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\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);\"\u003eENCODER\u003c\/span\u003e is compatible with FACE Kit. You can have it replace the keycoard panel inside the FACE kit. It is designed for rotary encoder control, integrated Mega328 microprocessor inside and LEDs around the encoder.\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=\"\"\u003eThe series communication protocol between M5 core and ENCODER is IIC (adress: 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_encoder_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 apple=\"\" color=\"\" helvetica=\"\" id=\"product-features\" 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;\"\u003eProduct Features:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\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\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e12 RGB Led\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eIIC communication\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eSimple API for programming\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eMega328 inside\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eEncoder detection\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eProduct Size: 58.2mm x 54.2mm x 10mm\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eProduct weight: 17g\u003c\/li\u003e\n\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\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_encoder.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\n\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;\"\u003e2.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.\u003c\/p\u003e\n\u003cp apple=\"\" class=\"tip\" color=\"\" 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: 2em 0px; position: relative; padding: var(--notice-padding); border-width: var(--notice-important-border-width, var(--notice-border-width, 0)); border-style: var(--notice-important-border-style, var(--notice-border-style)); border-color: var(--notice-important-border-color, var(--notice-border-color)); border-radius: var(--notice-border-radius); background: var(--notice-important-background, var(--notice-background)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\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=\"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\u003cspan style=\"color:#ff0000;\"\u003eClick here to view the driver installation tutorial\u003c\/span\u003e\u003c\/a\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003ch2 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"function\" 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;\"\u003eFunction:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\u003c\/h2\u003e\n\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\n\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:          led_index: 0 ~ 11          r, g, b: 0 ~ 254  *\/  void Led(int led_index, int r, int g, int b){      \/\/ IIC send data      Wire.beginTransmission(Faces_Encoder_I2C_ADDR);      Wire.write(led_index);      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\n\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 encoder increment\u003c\/span\u003e\u003c\/p\u003e\n\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_encoder_increment(void){      int temp_encoder_increment;        \/\/ IIC read data      Wire.requestFrom(Faces_Encoder_I2C_ADDR, 3);      if(Wire.available()){         temp_encoder_increment = Wire.read();\/\/ get increment         button_state = Wire.read();\/\/ get button value      }      if(temp_encoder_increment \u0026gt; 127){\/\/anti-clockwise          direction = 1;\/\/ flag for encoder direction          encoder_increment = 256 - temp_encoder_increment;      }      else{\/\/ clockwise          direction = 0;          encoder_increment = temp_encoder_increment;      }  }\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\n\u003ch2 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"include\" 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\u003cstrong\u003e\u003cspan style=\"font-size:16px;\"\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\/span\u003e\u003c\/strong\u003e\u003c\/h2\u003e\n\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\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003e1x M5Stack ENCODER Module\u003c\/li\u003e\n\u003cli style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none;\"\u003eEncoder turnpanel\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"related-link\" 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;\"\u003eRelated Link:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\u003c\/h2\u003e\n\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\n\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\n\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\n\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\/ENCODER\/firmware_328p\/FacesEncoder328\" 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;\"\u003eT\u003c\/span\u003e\u003c\/a\u003e\u003c\/span\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\/ENCODER\/firmware_328p\/FacesEncoder328\" 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;\"\u003ehe Firmware of inside MEGA328\u003c\/span\u003e\u003c\/a\u003e\u003c\/span\u003e\u003c\/p\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"easyloader-1\" 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 \u003c\/h2\u003e\n\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\u003c\/h2\u003e\n\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\u003cspan style=\"font-size:16px;\"\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003efor IDE\u003c\/span\u003e\u003c\/span\u003e\u003c\/h3\u003e\n\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;\"\u003eIf you want 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_encoder.ino\u003c\/code\u003e, please click \u003cstrong\u003e\u003ca href=\"https:\/\/github.com\/m5stack\/M5-ProductExampleCodes\/tree\/master\/Module\/ENCODER\/\/faces_encoder\" 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\n\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\/*  * faces_encoder.ino  *\/  #include \u003cspan class=\"token tag\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; color: var(--code-theme-tag);\"\u003e\u003cspan class=\"token tag\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; color: var(--code-theme-tag);\"\u003e\u003cspan class=\"token punctuation\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; color: var(--code-theme-punctuation);\"\u003e\u0026lt;\u003c\/span\u003eM5Stack.h\u003c\/span\u003e\u003cspan class=\"token punctuation\" style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; color: var(--code-theme-punctuation);\"\u003e\u0026gt;\u003c\/span\u003e\u003c\/span\u003e    #define Faces_Encoder_I2C_ADDR     0X5E    \/\/ declaration  int encoder_increment;\/\/positive: clockwise nagtive: anti-clockwise  uint16_t encoder_value=0;  int button_state;  uint8_t direction;\/\/0: clockwise 1: anti-clockwise  int temp_encoder_increment;    \/\/ initialization  M5.begin();  Wire.begin();    \/\/ get data from ENCONDER  Wire.requestFrom(Faces_Encoder_I2C_ADDR, 3);  if(Wire.available()){      temp_encoder_increment = Wire.read();\/\/ the first byte: increment      button_state = Wire.read();\/\/ the second byte: button value  }    \/\/ IIC send data, 4bytes  Wire.beginTransmission(Faces_Encoder_I2C_ADDR);  Wire.write(led_index);  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\n\u003cimg apple=\"\" class=\"medium-zoom-image\" color=\"\" height=\"55%\" helvetica=\"\" segoe=\"\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/module\/module_example\/ENCODER\/example_faces_encoder_01.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=\"55%\"\u003e\n\u003c\/blockquote\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/banggood\/images\/81\/74\/a5884dba-340f-4092-87c1-9f1e9bc05ea6.JPG\"\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/banggood\/images\/29\/48\/ea6dd352-8441-4ed5-be87-0da1c4e83d30.JPG\"\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/banggood\/images\/BE\/6C\/8ae553b5-396c-4c1c-b8f5-51b4063fac45.JPG\"\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/banggood\/images\/88\/F3\/1d02a4c0-51a0-4465-b7da-61408b676659.JPG\"\u003e\u003cbr\u003e\u003cimg alt=\"\" src=\"https:\/\/imgaz.staticbg.com\/images\/oaupload\/banggood\/images\/36\/F6\/e0e94ff3-5346-4283-b7de-0ac88e0ae46d.JPG\"\u003e","brand":"Electronic Pro","offers":[{"title":"Default Title","offer_id":35468116230300,"sku":"1538395","price":623.82,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/2787\/9162\/products\/c86b71f1-7ed2-400f-a627-8d4858abe1e6.jpg?v=1597149496","url":"https:\/\/electronic-pro-south-africa.myshopify.com\/products\/encoder-module-for-m5stack-faces-esp32-pocket-computer-with-12pcs-rgb-led-mega328-inside-i2c","provider":"Electronic Pro ","version":"1.0","type":"link"}