<section id="overview" style="font-size: medium; box-sizing: border-box;">
   <h1 class="hckui__typography__h1" itemprop="name" style="box-sizing: border-box; font-size: 40px; margin: 0px; font-family: inherit; line-height: 49px; color: #111111;">ESP32 + MPU9250: 3D Orientation Visualisation</h1>
   <p class="hckui__typography__bodyL hckui__layout__marginBottom15" itemprop="description" style="box-sizing: border-box; margin-top: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a;">Visualizing MPU9250 3D orientation data on the web page hosted by ESP32. Using websockets and JSON to send orientation data.</p>
   <div class="hckui__typography__bodyS project-details" style="box-sizing: border-box; font-size: 14px; line-height: 18px; color: #4a4a4a;"><span style="box-sizing: border-box; margin-right: 15px;"><a class="hckui__typography__textWithIcon project-difficulty text-success" href="https://www.hackster.io/projects?difficulty=beginner" style="box-sizing: border-box; color: #5cb85c; text-decoration-line: none; align-items: center; display: inline-flex;" target="_blank"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-beginner"></use></svg></i><span style="box-sizing: border-box; margin-left: 5px;">Beginner</span></a></span><span class="hckui__typography__textWithIcon" style="box-sizing: border-box; align-items: center; display: inline-flex; margin-right: 15px;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-full-instructions"></use></svg></i><span style="box-sizing: border-box; margin-left: 5px;">Full instructions provided</span></span><span class="hckui__typography__textWithIcon" style="box-sizing: border-box; align-items: center; display: inline-flex; margin-right: 15px;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-time"></use></svg></i><span style="box-sizing: border-box; margin-left: 5px;">1 hour</span></span><span class="hckui__typography__textWithIcon" itemprop="interactionStatistic" itemscope="" itemtype="http://schema.org/InteractionCounter" style="box-sizing: border-box; align-items: center; display: inline-flex; margin-right: 15px;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-eye"></use></svg></i><span class="impressions-stats" itemprop="userInteractionCount" style="box-sizing: border-box; margin-left: 5px;">26,573</span></span></div>
   <div class="hckui__layout__marginTop30" style="box-sizing: border-box; margin-top: 30px !important;">
      <div class="project-cover-image" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="box-sizing: border-box; border: 1px solid rgb(216, 216, 216); height: 0px; padding-top: 461.25px; position: relative;"><img alt="ESP32 + MPU9250: 3D Orientation Visualisation" src="https://hackster.imgix.net/uploads/attachments/771259/esp32_mpu9250_Q3KnZduYYF.JPG?auto=compress%2Cformat&amp;w=900&amp;h=675&amp;fit=min" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 461.25px; left: 0px; position: absolute; top: 0px; width: 613px;" /></div>
      </div>
   </section>
<div class="project-section-break" style="font-size: medium; box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px;">&nbsp;</div>
<div id="project_page_simple_ad_portal" style="font-size: medium; box-sizing: border-box;">&nbsp;</div>
<div id="description" itemprop="articleBody" style="font-size: medium; box-sizing: border-box;">
   <section id="things" style="box-sizing: border-box; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/donowak/esp32-mpu9250-3d-orientation-visualisation-467dc1#things" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Things used in this project</span></h2>
         </div>
      <div class="project-parts" style="box-sizing: border-box;">
         <div class="view-expanded" style="box-sizing: border-box;">
            <table class="project-parts-table" style="border-spacing: 0px; background-color: transparent; width: 615px;">
               <tbody style="box-sizing: border-box;">
                  <tr class="head" style="box-sizing: border-box;">
                     <td colspan="6" style="box-sizing: border-box; padding: 10px 0px; border-top: 0px;">
                        <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 24px;">Hardware components</h3>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/attachments/209612/esp32-module.JPG?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/attachments/209612/esp32-module.JPG?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="ESP32S" src="https://hackster.imgix.net/uploads/attachments/209612/esp32-module.JPG?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 410.078px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;Espressif ESP32S&quot;,&quot;href&quot;:&quot;/Espressif/products/esp32s?ref=project-467dc1&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/Espressif/products/esp32s?ref=project-467dc1" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">Espressif ESP32S</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; color: #4a4a4a; word-break: break-word;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:19850,&quot;link_id&quot;:597,&quot;retailer_id&quot;:null,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/597?s=BAhJIhMxMzMwNzUsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/attachments/175953/13762-00.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/attachments/175953/13762-00.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="SparkFun IMU Breakout - MPU-9250" src="https://hackster.imgix.net/uploads/attachments/175953/13762-00.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 410.078px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;SparkFun IMU Breakout - MPU-9250&quot;,&quot;href&quot;:&quot;/sparkfun/products/sparkfun-imu-breakout-mpu-9250?ref=project-467dc1&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/sparkfun/products/sparkfun-imu-breakout-mpu-9250?ref=project-467dc1" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">SparkFun IMU Breakout - MPU-9250</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; color: #4a4a4a; word-break: break-word;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:26196,&quot;link_id&quot;:857,&quot;retailer_id&quot;:2,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/857?s=BAhJIhMxMzMwNzUsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  <tr class="head" style="box-sizing: border-box;">
                     <td colspan="6" style="box-sizing: border-box; padding: 10px 0px; border-top: 0px;">
                        <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 24px;">Software apps and online services</h3>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/image/file/144203/IDE_web.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/image/file/144203/IDE_web.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Arduino IDE" src="https://hackster.imgix.net/uploads/image/file/144203/IDE_web.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 410.078px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;Arduino IDE&quot;,&quot;href&quot;:&quot;/arduino/products/arduino-ide?ref=project-467dc1&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/arduino/products/arduino-ide?ref=project-467dc1" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">Arduino IDE</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; color: #4a4a4a; word-break: break-word;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td colspan="2" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;"></td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="More info" href="https://www.arduino.cc/en/main/software" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-external-link"></use></svg></i></a></td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/attachments/667707/signet_redxxxhdpi_UHLWPyqJwS.png?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/attachments/667707/signet_redxxxhdpi_UHLWPyqJwS.png?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Husarnet client" src="https://hackster.imgix.net/uploads/attachments/667707/signet_redxxxhdpi_UHLWPyqJwS.png?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 410.078px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;Husarnet client&quot;,&quot;href&quot;:&quot;/husarnet/products/husarnet-client?ref=project-467dc1&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/husarnet/products/husarnet-client?ref=project-467dc1" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">Husarnet client</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; color: #4a4a4a; word-break: break-word;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td colspan="2" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;"></td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:76303,&quot;link_id&quot;:43066,&quot;retailer_id&quot;:null,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/43066?s=BAhJIhMxMzMwNzUsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/attachments/1093647/platformio-ide-laptop_93fc8e69_NiSRGMXerI.png?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/attachments/1093647/platformio-ide-laptop_93fc8e69_NiSRGMXerI.png?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="PlatformIO IDE" src="https://hackster.imgix.net/uploads/attachments/1093647/platformio-ide-laptop_93fc8e69_NiSRGMXerI.png?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 410.078px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;PlatformIO IDE&quot;,&quot;href&quot;:&quot;/platformio/products/platformio-ide?ref=project-467dc1&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/platformio/products/platformio-ide?ref=project-467dc1" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">PlatformIO IDE</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; color: #4a4a4a; word-break: break-word;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td colspan="2" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;"></td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:115129,&quot;link_id&quot;:66160,&quot;retailer_id&quot;:null,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/66160?s=BAhJIhMxMzMwNzUsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">&nbsp;</div>
   <section id="story" style="box-sizing: border-box; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/donowak/esp32-mpu9250-3d-orientation-visualisation-467dc1#story" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Story</span></h2>
         </div>
      <div class="project-story collapsible-section collapsed hljs-active hljs-monokai" itemprop="text" style="box-sizing: border-box;">
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">MPU9250 is one of the most popular IMU (Inertial Measurement Unit) available on the market. It combines not only 3D accelerometer, 3D gyro and 3D compass but also DMP (Digital Motion Processor). Thanks to DMP we can read orientation data in the form of Euler angles or quaternions directly from the chip.</p>
         <div class="embed-frame" style="box-sizing: border-box; margin: 30px 0px;">
            <figure class="youtube" style="box-sizing: border-box; margin: 0px;">
               <div class="embed widescreen" style="box-sizing: border-box; height: 0px; padding-bottom: 352.078px; position: relative;"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/TjDmGXQ9rK8?rel=0" frameborder="0" allowfullscreen="" style="box-sizing: border-box; position: absolute; top: 0px; left: 0px; width: 615px; height: 352.078px;"></iframe></div>
               </figure>
            </div>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;"><span style="box-sizing: border-box;">A web page with a 3D cube visualizing orientation of MPU9250 is hosted by ESP32. Real time data from MPU9250 is sent to a web browser through a websocket. That data is then used by Three.js library (</span><a href="https://threejs.org/" class="hckui__typography__linkBlue" data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;https://threejs.org/)&quot;,&quot;href&quot;:&quot;https://threejs.org/&quot;,&quot;type&quot;:&quot;story&quot;,&quot;location&quot;:&quot;story&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">https://threejs.org/)</a><span style="box-sizing: border-box;">&nbsp;to visualize orientation of the cube in a real time. The web page is available both in LAN and through the internet thanks to Husarnet.</span></p>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 15px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">To run the example, follow the next steps.</p>
         <h3 class="hckui__typography__h3 title-with-anchor" id="toc-connect-mpu9250-to-esp32-0" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 30px; margin-bottom: 0px; font-size: 24px;">
            <p style="box-sizing: border-box; margin-bottom: 10px;">&nbsp;</p>
            <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; font-weight: 400;">&nbsp;</p>
            <p style="box-sizing: border-box; margin-bottom: 10px;">&nbsp;</p>
            <span style="box-sizing: border-box;">Connect MPU9250 to ESP32</span></h3>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">Interface between ESP32 and MPU9250 is as follows:</p>
         <pre class="hljs xml" style="box-sizing: border-box; overflow: auto scroll; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 13px; padding: 0.5em; margin-top: 10px; margin-bottom: 10px; line-height: 1.42857; color: #f8f8f2; word-break: break-all; overflow-wrap: break-word; background: rgb(35, 36, 31); border: none; border-radius: 0px; white-space: pre-wrap; max-height: 400px; text-size-adjust: none;">
            <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px;"><span style="box-sizing: border-box;">ESP32 <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #66d9ef;">-</span>&gt;</span> MPU9250</span><br style="box-sizing: border-box;" /><span style="box-sizing: border-box;"></span><br style="box-sizing: border-box;" /><span style="box-sizing: border-box;">P22   <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #66d9ef;">-</span>&gt;</span> SCL</span><br style="box-sizing: border-box;" /><span style="box-sizing: border-box;">P21   <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #66d9ef;">-</span>&gt;</span> SDA</span><br style="box-sizing: border-box;" /><span style="box-sizing: border-box;">P19   <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #66d9ef;">-</span>&gt;</span> INT</span><br style="box-sizing: border-box;" /><span style="box-sizing: border-box;"></span><br style="box-sizing: border-box;" /><span style="box-sizing: border-box;">GND   <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #66d9ef;">-</span>&gt;</span> GND</span></code>
            </pre>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">Remember also to provide appropriate power supply both for ESP32 and MPU9250.</p>
         <h3 class="hckui__typography__h3 title-with-anchor" id="toc-use-platformio-1" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 30px; margin-bottom: 0px; font-size: 24px;">
            <p style="box-sizing: border-box; margin-bottom: 10px;">&nbsp;</p>
            <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; font-weight: 400;">&nbsp;</p>
            <p style="box-sizing: border-box; margin-bottom: 10px;">&nbsp;</p>
            <span style="box-sizing: border-box;">Use PlatformIO</span></h3>
         <ul class="hckui__typography__bodyL" style="box-sizing: border-box; margin: 10px 0px 0px 10px; line-height: 26px; color: #4a4a4a; padding: 0px 0px 0px 20px;">
            <li style="box-sizing: border-box;">Clone the project repo on your disk and open it from Visual Studio Code with platformio installed</li>
            <li style="box-sizing: border-box; margin-top: 10px;"><span style="box-sizing: border-box;">Open&nbsp;</span><span style="box-sizing: border-box; font-weight: 700;">ESP32-MPU9250-web-view.ino</span><span style="box-sizing: border-box;">&nbsp;file</span></li>
            <li style="box-sizing: border-box; margin-top: 10px;"><span style="box-sizing: border-box;">modify line 39 with your&nbsp;</span><span style="box-sizing: border-box; font-weight: 700;">Husarnet join code&nbsp;</span><span style="box-sizing: border-box;">(get on&nbsp;</span><a href="https://app.husarnet.com/" class="hckui__typography__linkBlue" data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;https://app.husarnet.com&quot;,&quot;href&quot;:&quot;https://app.husarnet.com&quot;,&quot;type&quot;:&quot;story&quot;,&quot;location&quot;:&quot;story&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">https://app.husarnet.com</a><span style="box-sizing: border-box;">&nbsp;-&gt; [Create Network] -&gt; [Add Element] -&gt; [Join Code])</span></li>
            <li style="box-sizing: border-box; margin-top: 10px;">modify lines 18 - 27 to add your Wi-Fi network credentials</li>
            <li style="box-sizing: border-box; margin-top: 10px;">upload project to your ESP32 board.</li>
            </ul>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;"><span style="box-sizing: border-box;">If you face any issues in the process, please visit this site:&nbsp;</span><a href="https://docs.husarnet.com/docs/begin-esp32-platformio#get-platformio" class="hckui__typography__linkBlue" data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;https://docs.husarnet.com/docs/begin-esp32-platformio#get-platformio&quot;,&quot;href&quot;:&quot;https://docs.husarnet.com/docs/begin-esp32-platformio#get-platformio&quot;,&quot;type&quot;:&quot;story&quot;,&quot;location&quot;:&quot;story&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">https://docs.husarnet.com/docs/begin-esp32-platformio#get-platformio</a><span style="box-sizing: border-box;">&nbsp;.</span></p>
         <h3 class="hckui__typography__h3 title-with-anchor" id="toc-open-a-web-page-hosted-by-esp32-2" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 30px; margin-bottom: 0px; font-size: 24px;">
            <p style="box-sizing: border-box; margin-bottom: 10px;">&nbsp;</p>
            <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; font-weight: 400;">&nbsp;</p>
            <p style="box-sizing: border-box; margin-bottom: 10px;">&nbsp;</p>
            <span style="box-sizing: border-box;">Open a web page hosted by ESP32</span></h3>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">There are two options:</p>
         <ul class="hckui__typography__bodyL" style="box-sizing: border-box; margin: 10px 0px 0px 10px; line-height: 26px; color: #4a4a4a; padding: 0px 0px 0px 20px;">
            <li style="box-sizing: border-box;"><span style="box-sizing: border-box;">log into your account at&nbsp;</span><a href="https://app.husarnet.com/" class="hckui__typography__linkBlue" data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;https://app.husarnet.com,&quot;,&quot;href&quot;:&quot;https://app.husarnet.com/&quot;,&quot;type&quot;:&quot;story&quot;,&quot;location&quot;:&quot;story&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">https://app.husarnet.com,</a><span style="box-sizing: border-box;">&nbsp;find&nbsp;</span>
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">box3desp32</code>
               <span style="box-sizing: border-box;">&nbsp;device that you just connected and click&nbsp;</span>
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">web UI</code>
               <span style="box-sizing: border-box;">&nbsp;button. You can also click&nbsp;</span>
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">box3desp32</code>
               <span style="box-sizing: border-box;">&nbsp;element to open "Element settings" and select&nbsp;</span>
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">Make the Web UI public</code>
               <span style="box-sizing: border-box;">&nbsp;if you want to have a publically available address. In such a scenerio Husarnet proxy servers are used to provide you a web UI. Works with any web browser: desktop and mobile.</span></li>
            <li style="box-sizing: border-box; margin-top: 10px;">P2P option - add your laptop to the same Husarnet network as ESP32 board. In that scenerio no proxy servers are used and you connect to ESP32 with a very low latency directly with no port forwarding on your router. Currenly only Linux client is available, so open your Linux terminal and type:</li>
            <li style="box-sizing: border-box; margin-top: 10px;">
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">$ curl https://install.husarnet.com/install.sh | sudo bash</code>
               <span style="box-sizing: border-box;">&nbsp;to install Husarnet.</span></li>
            <li style="box-sizing: border-box; margin-top: 10px;">
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">$ husarnet join XXXXXXXXXXXXXXXXXXXXXXX mylaptop</code>
               <span style="box-sizing: border-box;">&nbsp;replace XXX...X with your own&nbsp;</span>
               <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">join code</code>
               <span style="box-sizing: border-box;">, and click enter.</span></li>
            </ul>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;"><span style="box-sizing: border-box;">At this stage your ESP32 and your laptop are in the same VLAN network. The best hostname support is in Mozilla Firefox web browser (other browsers also work, but you have to use IPv6 address of your device that you will find at&nbsp;</span><a href="https://app.husarnet.com/" class="hckui__typography__linkBlue" data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;https://app.husarnet.com)&quot;,&quot;href&quot;:&quot;https://app.husarnet.com/&quot;,&quot;type&quot;:&quot;story&quot;,&quot;location&quot;:&quot;story&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">https://app.husarnet.com)</a><span style="box-sizing: border-box;">&nbsp;and type:&nbsp;</span>
            <code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 16.2px; padding: 2px 4px; color: #777777; background-color: #f2f2f2; border-radius: 4px;">http://box3desp32:8000</code>
            <span style="box-sizing: border-box;">&nbsp;You should see a web UI to controll your ESP32 now.</span></p>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 15px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">I hope you will like this project :)</p>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">&nbsp;</div>
   <section id="code" style="box-sizing: border-box; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/donowak/esp32-mpu9250-3d-orientation-visualisation-467dc1#code" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Code</span></h2>
         </div>
      <div class="project-attachment" style="box-sizing: border-box; border-radius: 2px 2px 0px 0px;">
         <div class="header" style="box-sizing: border-box; border-width: 1px 1px 0px; border-style: solid; border-color: #d8d8d8; border-image: initial; border-radius: 2px 2px 0px 0px; padding: 15px; align-items: center; display: flex; justify-content: space-between;">
            <div class="text" style="box-sizing: border-box; word-break: break-word;">
               <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin: 0px; font-size: 24px;">ESP32-MPU9250-web-view</h3>
               </div>
            <div class="actions" style="box-sizing: border-box; margin-left: 20px;"><a class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" href="https://github.com/DominikN/ESP32-MPU9250-web-view" rel="nofollow" target="_blank" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-external-link"></use></svg></i></a></div>
            </div>
         <div class="embed original" style="box-sizing: border-box; height: initial; padding-bottom: initial; position: relative; min-height: 50px;">
            <div class="github-box repo" style="box-sizing: border-box; font-family: helvetica, arial, sans-serif; font-size: 13px; line-height: 18px; background: rgb(250, 250, 250); border: 1px solid rgb(221, 221, 221); color: #666666; border-radius: 3px;">
               <div class="github-box-title" style="box-sizing: initial; position: relative; border-bottom: 1px solid rgb(221, 221, 221); border-radius: 3px 3px 0px 0px; background: -webkit-linear-gradient(top, rgb(252, 252, 252), rgb(235, 235, 235));">
                  <h3 style="box-sizing: initial; font-weight: normal; line-height: 1.1; color: gray; margin: 0px; font-size: 16px; padding: 10px 10px 10px 30px; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAXCAMAAAAx3e/WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJERkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJFMEM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkREQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRFQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dka2KgAAAEVQTFRFxMTEyMjI0tLSvb29vr6+zc3Ny8vLxcXFz8/P6enp3t7ex8fH0dHR1NTUw8PDwMDAzs7OvLy8wcHBu7u7v7+/zMzM////budQFwAAABd0Uk5T/////////////////////////////wDmQOZeAAAAcklEQVR42tSQSQ7DMAwD6chOukWs5eX/Ty2coo0T9wOdEzEgdRBuzNmnDofgja52JDyz5TCqUp0O6kfrb4bzSXkRiTviEZZ6JKLMJ5VQ2v8iGbtbfEwXmjFMG0VwdQo10hQNxYqtLMv9O6xvpZ/QeAkwAKjwHiJLaJc3AAAAAElFTkSuQmCC&quot;) 7px center no-repeat;"><a rel="nofollow" target="_blank" class="owner" href="https://github.com/DominikN" style="box-sizing: initial; background-color: transparent; color: #4183c4; text-decoration-line: none; border: 0px;">DominikN</a>&nbsp;/&nbsp;<a rel="nofollow" target="_blank" class="repo" href="https://github.com/DominikN/ESP32-MPU9250-web-view" style="box-sizing: initial; background-color: transparent; color: #4183c4; text-decoration-line: none; border: 0px; font-weight: bold;">ESP32-MPU9250-web-view</a></h3>
                  <div class="github-stats" style="box-sizing: initial; position: absolute; top: 8px; right: 10px; background: white; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-size: 11px; font-weight: bold; line-height: 21px; height: 21px;"><a rel="nofollow" target="_blank" class="watchers" href="https://github.com/DominikN/ESP32-MPU9250-web-view/watchers" style="box-sizing: initial; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAqCAMAAACEJ4viAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJEQkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJEQ0M0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkQ5QzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRBQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h1kA9gAAAK5QTFRF+fn5sbGx8fHx09PTmpqa2dnZ/f3919fX9PT00NDQ1dXVpKSk+vr6+/v7vb298vLyycnJ8/PztLS0zc3N6enp/v7+q6ur2NjY9/f3srKy/Pz8p6en7u7uoaGhnJyc4eHhtbW1pqam6Ojo9fX17e3toqKirKys1NTUzs7Ox8fHwcHBwMDA5eXlnZ2dpaWl0dHR9vb25ubm4uLi3d3dqqqqwsLCv7+/oKCgmZmZ////8yEsbwAAAMBJREFUeNrE0tcOgjAUBuDSliUoMhTEvfdef9//xUQjgaLX0Ium/ZLT/+SkRPxZpGykvuf5VMJogy5jY9yjDHcWFhqlcRuHc4o6B1QK0BDg+hcZgNDh3NWTwzItH/bRrhvT+g3zSxZkNGCZpoWGIbU0a3Y6zV5VA6keyeDxiw62P0gUqEW0FbDim4nVikFJbU2zZXybUEaxhCqOQqyh5/G0wpWICUwthyqwD4InOMuXJ7/gs7WkoPdVg1vykF8CDACEFanKO3aSYwAAAABJRU5ErkJggg==&quot;) no-repeat; color: #666666; text-decoration-line: none; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: #dddddd; border-bottom-color: initial; border-left-color: initial; border-image: initial; display: inline-block; height: 21px; padding: 0px 5px 0px 18px;">36</a>&nbsp;<a rel="nofollow" target="_blank" class="forks" href="https://github.com/DominikN/ESP32-MPU9250-web-view/forks" style="box-sizing: initial; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAqCAMAAACEJ4viAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJEQkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJEQ0M0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkQ5QzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRBQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h1kA9gAAAK5QTFRF+fn5sbGx8fHx09PTmpqa2dnZ/f3919fX9PT00NDQ1dXVpKSk+vr6+/v7vb298vLyycnJ8/PztLS0zc3N6enp/v7+q6ur2NjY9/f3srKy/Pz8p6en7u7uoaGhnJyc4eHhtbW1pqam6Ojo9fX17e3toqKirKys1NTUzs7Ox8fHwcHBwMDA5eXlnZ2dpaWl0dHR9vb25ubm4uLi3d3dqqqqwsLCv7+/oKCgmZmZ////8yEsbwAAAMBJREFUeNrE0tcOgjAUBuDSliUoMhTEvfdef9//xUQjgaLX0Ium/ZLT/+SkRPxZpGykvuf5VMJogy5jY9yjDHcWFhqlcRuHc4o6B1QK0BDg+hcZgNDh3NWTwzItH/bRrhvT+g3zSxZkNGCZpoWGIbU0a3Y6zV5VA6keyeDxiw62P0gUqEW0FbDim4nVikFJbU2zZXybUEaxhCqOQqyh5/G0wpWICUwthyqwD4InOMuXJ7/gs7WkoPdVg1vykF8CDACEFanKO3aSYwAAAABJRU5ErkJggg==&quot;) -4px -21px no-repeat; color: #666666; text-decoration-line: none; border: 0px; display: inline-block; height: 21px; padding: 0px 5px 0px 15px;">15</a></div>
                  </div>
               <div class="github-box-content" style="box-sizing: initial; padding: 10px;">
                  <p class="description" style="box-sizing: initial;">Visualizing MPU9250 3D orientation data on the web page hosted by ESP32 —&nbsp;<a rel="nofollow" target="_blank" href="https://github.com/DominikN/ESP32-MPU9250-web-view#readme" style="box-sizing: initial; background-color: transparent; color: #4183c4; text-decoration-line: none; border: 0px;">Read More</a></p>
                  <p class="link github-homepage" style="box-sizing: initial; font-weight: bold;">&nbsp;</p>
                  </div>
               <div class="github-box-download" style="box-sizing: initial; position: relative; border-top: 1px solid rgb(221, 221, 221); background: white; border-radius: 0px 0px 3px 3px; padding: 10px; height: 24px;">
                  <p class="updated" style="box-sizing: initial; font-size: 11px; line-height: 24px;">Latest commit to the&nbsp;<strong style="box-sizing: initial; color: #000000;">master</strong>&nbsp;branch on 11-3-2020</p>
                  <a rel="nofollow" target="_blank" class="download" href="https://github.com/DominikN/ESP32-MPU9250-web-view/archive/master.zip" style="box-sizing: initial; background: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(229, 229, 229)); color: #666666; text-decoration-line: none; border-width: 1px; border-style: solid; border-color: #dddddd rgb(221, 221, 221) rgb(187, 187, 187); border-image: initial; position: absolute; display: block; top: 10px; right: 10px; height: 24px; line-height: 24px; font-size: 12px; font-weight: bold; text-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px; padding: 0px 10px; border-radius: 3px;">Download as zip</a></div>
               </div>
            </div>
         </div>
      </section>
   </div>
<p>&nbsp;</p>