{"product_id":"ws6812-37pcs-hex-rgb-led-hexagon-led-board-with-3-grove-port-compatible-with-m5stack-ui-flow","title":"WS6812 37Pcs HEX RGB LED Hexagon LED Board with  3 GROVE Port Compatible with M5Stack UI-Flow","description":"\u003ch2 id=\"description\"\u003e   Description:\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);\"\u003eHEX\u003c\/span\u003e is a hexagona RGB LED panel. Total 37 RGB LEDs. With a input port and a output port, you can have mutiple of them in series connection.\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   This is how LEDs layout in the panel. Pay attention to the sequence in your code.\u003c\/p\u003e  \u003cimg apple=\"\" class=\"medium-zoom-image\" color=\"\" helvetica=\"\" segoe=\"\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/unit\/unit_hex_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=\"\"\u003e\u003cspan apple=\"\" color=\"\" helvetica=\"\" segoe=\"\" style=\"color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\" font-size:=\"\"\u003e \u003c\/span\u003e\u003cbr 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; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e  \u003cimg apple=\"\" class=\"medium-zoom-image\" color=\"\" helvetica=\"\" segoe=\"\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/unit\/hex\/unit_hex_04.jpg\" 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=\"\"\u003e  \u003ch2 id=\"product-features\"\u003e   Product Features:\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    Total LED: 37\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    Software development platform: ,UIFlow(Blockly \u0026amp; python)\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    Two Le go-compatible holes\u003c\/li\u003e  \u003c\/ul\u003e  \u003ch2 id=\"include\"\u003e   Package Include:\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 HEX Unit\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 Grove Cable\u003c\/li\u003e  \u003c\/ul\u003e  \u003ch2 id=\"related-link\"\u003e   Related Link:\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  \u003c\/ul\u003e  \u003ch2 id=\"easyloader\"\u003e   EasyLoader\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   \u003cbutton class=\"btn btn-primary\" style=\"box-sizing: border-box; font-size: 1rem; -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: rgb(0, 123, 255); border-width: 1px; border-style: solid; border-color: rgb(0, 123, 255); font-family: inherit; margin: 0px; border-radius: 0.25rem; line-height: 1.5; overflow: visible; white-space: nowrap; vertical-align: middle; user-select: none; 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); cursor: pointer;\" type=\"button\"\u003eclick to download EasyLoader\u003c\/button\u003e\u003c\/p\u003e  \u003cblockquote a=\"\" and=\"\" apple=\"\" blockquote=\"\" case=\"\" color=\"\" e=\"\" each=\"\" fast=\"\" for=\"\" has=\"\" helvetica=\"\" is=\"\" p=\"\" page=\"\" product=\"\" product-related=\"\" program=\"\" segoe=\"\" simple=\"\" span=\"\" 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   1.EasyLoader is a simple and fast program burner, and each product page has a product-related case program for EasyLoader.\u003cbr\u003e   \u003cbr\u003e   \u003cspan style=\"background-color: rgb(247, 247, 247);\"\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 \u003c\/span\u003e\u003cspan style=\"box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-weight: bolder; color: var(--strong-color, currentColor); background-color: rgb(247, 247, 247);\"\u003e\"Burn\"\u003c\/span\u003e\u003cspan style=\"background-color: rgb(247, 247, 247);\"\u003e to start burning.\u003c\/span\u003e\u003cbr\u003e   \u003cbr\u003e   \u003cspan style=\"background-color: rgb(251, 239, 243);\"\u003e3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. \u003c\/span\u003e\u003cstrong\u003e\u003ca href=\"https:\/\/docs.m5stack.com\/#\/en\/related_documents\/establish_serial_connection\" style=\"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; 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   \u003cp\u003e     \u003c\/p\u003e   \u003ch2 id=\"example\"\u003e    Example:\u003c\/h2\u003e   \u003ch3 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"_1--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;\"\u003e1. for  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    FastLED library on for  presents excellent and colorful lighting effects. Before compile, it is require to install the FastLED library and connect HEX to GROVE A.\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    RGB LED Library on for \u003c\/p\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:\/\/github.com\/FastLED\/FastLED\/wiki\/Overview\" 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;\"\u003eFastLED Library\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:\/\/www.taichi-maker.com\/homepage\/reference-index\/-library-index\/fastled-library\/\" 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;\"\u003eFastLED Reference(Chinese version)\u003c\/span\u003e\u003c\/a\u003e\u003c\/span\u003e\u003c\/p\u003e    \u003c\/li\u003e   \u003c\/ul\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 get the complete code, please click \u003cstrong\u003e\u003ca href=\"https:\/\/github.com\/m5stack\/M5-ProductExampleCodes\/tree\/master\/Unit\/HEX\/\" 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   \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\/*      Install FastLED library first.(HEX is connected to GROVE A)   *\/  #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  #include \"FastLED.h\"    #define RGB LED_PIN    21  #define NUM_LEDS    37    CRGB leds[NUM_LEDS];  uint8_t gHue = 0;    void setup() {    Serial.begin(115200);    M5.begin();    M5.Lcd.clear(BLACK);    M5.Lcd.setTextColor(YELLOW); M5.Lcd.setTextSize(2); M5.Lcd.setCursor(40, 0);    M5.Lcd.println(\"HEX Example\");    M5.Lcd.setTextColor(WHITE);    M5.Lcd.setCursor(0, 25);    M5.Lcd.println(\"Display rainbow effect\");      \/\/ Neopixel initialization    FastLED.addLeds\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\u003eWS2811,RGB LED_PIN,GRB\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\/                          (leds, NUM_LEDS).setCorrection(TypicalLEDStrip);    FastLED.setBrightness(10);  }    void loop(){      fill_rainbow( leds, NUM_LEDS, gHue, 7);      FastLED.show();\/\/ must be executed for RGB LED becoming effective      EVERY_N_MILLISECONDS( 20 ) { gHue++; }  }\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=\"\" helvetica=\"\" segoe=\"\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/unit\/unit_example\/HEX\/example_unit_dual_button_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=\"\"\u003e   \u003ch3 apple=\"\" border-color:=\"\" border-style:=\"\" border-width:=\"\" color=\"\" color:=\"\" font-weight:=\"\" helvetica=\"\" id=\"uiflow\" 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: var(--heading-h3-margin, var(--heading-margin)); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e    \u003cbr\u003e    \u003cstrong\u003e\u003cspan style=\"box-sizing: border-box; text-size-adjust: none; border-bottom-style: initial; border-bottom-color: initial;\"\u003eUIFlow\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 get the complete code, please click \u003cstrong\u003e\u003ca href=\"https:\/\/github.com\/m5stack\/M5-ProductExampleCodes\/tree\/master\/Unit\/HEX\/UIFlow\" 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   \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    \u003cimg class=\"medium-zoom-image\" height=\"50%\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/unit\/unit_example\/HEX\/example_unit_dual_button_01.png\" style=\"box-sizing: border-box; font-size: inherit; -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%;\" width=\"50%\"\u003e \u003cimg class=\"medium-zoom-image\" height=\"30%\" src=\"https:\/\/docs.m5stack.com\/assets\/img\/product_pics\/unit\/unit_example\/HEX\/example_unit_dual_button_02.png\" style=\"box-sizing: border-box; font-size: inherit; -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%;\" width=\"30%\"\u003e\u003c\/p\u003e   \u003ch3 id=\"pinmap\"\u003e    PinMap:\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    \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);\"\u003eIf HEX connected to GROVE A\u003c\/span\u003e\u003c\/p\u003e   \u003ctable 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; border-collapse: collapse; display: block; overflow: auto; margin: 1rem 0px; border-spacing: 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e    \u003ctbody style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; border-color: var(--table-body-border-color); border-style: solid; border-width: var(--table-body-border-width, 0);\"\u003e     \u003ctr style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; background: var(--table-row-odd-background);\"\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       M5Core(GROVE A)\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GPIO22\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GPIO21\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       5V\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GND\u003c\/td\u003e     \u003c\/tr\u003e     \u003ctr style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; background: var(--table-row-even-background);\"\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       HEX Unit\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e        \u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       HEX Pin\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       5V\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GND\u003c\/td\u003e     \u003c\/tr\u003e    \u003c\/tbody\u003e   \u003c\/table\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);\"\u003eIf HEX connected to GROVE B\u003c\/span\u003e\u003c\/p\u003e   \u003ctable 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; border-collapse: collapse; display: block; overflow: auto; margin: 1rem 0px; border-spacing: 0px; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, \" ui=\"\"\u003e    \u003ctbody style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; border-color: var(--table-body-border-color); border-style: solid; border-width: var(--table-body-border-width, 0);\"\u003e     \u003ctr style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; background: var(--table-row-odd-background);\"\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       M5Core(GROVE B)\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GPIO36\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GPIO26\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       5V\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GND\u003c\/td\u003e     \u003c\/tr\u003e     \u003ctr style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; background: var(--table-row-even-background);\"\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       HEX Unit\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e        \u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       HEX Pin\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       5V\u003c\/td\u003e      \u003ctd style=\"box-sizing: border-box; font-size: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; padding: var(--table-cell-padding); border-color: var(--table-cell-border-color); border-style: solid; border-width: var(--table-cell-border-width, 0);\"\u003e       GND\u003c\/td\u003e     \u003c\/tr\u003e    \u003c\/tbody\u003e   \u003c\/table\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);\"\u003eIf HEX connected to GROVE C\u003c\/span\u003e\u003c\/p\u003e   \u003ctable 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; border-collapse: collapse; display: block; overflow: auto; margin: 1rem 0px; border-\"\u003e\u003c\/table\u003e\n\u003c\/blockquote\u003e","brand":"Electronic Pro","offers":[{"title":"Default Title","offer_id":35447094345884,"sku":"1500849","price":424.92,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/2787\/9162\/products\/ef76542a-8110-4f49-9110-420effddc3d2.jpg?v=1597056430","url":"https:\/\/electronic-pro-south-africa.myshopify.com\/products\/ws6812-37pcs-hex-rgb-led-hexagon-led-board-with-3-grove-port-compatible-with-m5stack-ui-flow","provider":"Electronic Pro ","version":"1.0","type":"link"}