index.html

<!DOCTYPE html>
<html lang="en" class="">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-789423255"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'AW-789423255');
    </script>

    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>Konnected Flash Tool - Install Konnected via Web Browser</title>
    <link rel="stylesheet" href="https://use.typekit.net/zoq0xkd.css">
    <style>
      div,fieldset,input,select{padding:5px;font-size:1em;}
      fieldset{background:#4f4f4f;}
      p{margin:0.5em 0;}
      p,li{font-size:1.1em;line-height: 1.2em;}
      input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background:#dddddd;color:#000000;}
      input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}
      input[type=range]{width:99%;}
      select{width:100%;background:#dddddd;color:#000000;}
      textarea{resize:vertical;width:98%;height:318px;padding:5px;overflow:auto;background:#1f1f1f;color:#65c115;}
      body{font-family:Inter,sans-serif;background:#FFF;--esp-tools-button-color:#3F75FF;}
      td{padding:0px;}
      button{border:0;border-radius:0.3rem;background:#2777c0;color:#faffff;line-height:2.4rem;font-size:1.2rem;width:100%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;}
      button:hover{background:#3F75FF;}
      h1{font-weight:100;font-family:"basic-sans",HelveticaNeue,"Helvetica Neue",sans-serif;}
      h2{font-weight:300;font-family:"basic-sans",HelveticaNeue,"Helvetica Neue",sans-serif;}
      h3{font-weight:normal;font-family:"basic-sans",HelveticaNeue,"Helvetica Neue",sans-serif;}
      li{margin-bottom: 1em;}
      .main{margin: 2em auto;min-width:340px;max-width:1090px;}
      .logo{text-align: center;}
      .sub{font-weight:lighter;font-size:1em;}
      .sub b{font-weight:normal;}
      .bred{background:#d43535;}
      .bred:hover{background:#931f1f;}
      .bgrn{background:#47c266;}
      .bgrn:hover{background:#5aaf6f;}
      a{color:#3F75FF;text-decoration:none;}
      .p{float:left;text-align:left;}
      .q{float:right;text-align:right;}
      .r{border-radius:0.3em;padding:2px;margin:6px 2px;}
      .pick-variant{margin-bottom:16px;}
      .flasher{text-align:left;}
      .box{padding: 1em 2em; background-color: #f8f8f8; border: 1px solid #999;}
      .badge{margin-left:0.5rem;font-size:0.8rem;letter-spacing:0.1rem;padding:0.3rem 1rem;background:rgba(71, 245, 163);vertical-align:top;}
      .badge.beta{background: #fdf0d7;}
      .badge.deprecated{background:#EEE;}
      div.hardware.radios{display:flex;align-items:start;flex-direction:row;flex-wrap:nowrap;}
      div.firmware.radios label{display:flex;align-items:baseline;flex-direction:row;flex-wrap:nowrap;}
      div.build.radios{border-radius:10px;display:block;border:4px solid #f8f8f8;padding:1em;}
      div.radios label{cursor:pointer;display:block;position:relative;}
      div.hardware.radios label{width:24%;}
      div.firmware.radios label{padding:4px;width:95%;margin:0.5em;border-radius:10px;border:4px solid #f8f8f8;}
      div.firmware.radios div.tile{display:block;position: relative;}
      div.firmware.radios div.tile.img-container{width: 280px;flex-shrink: 0;}
      div.hardware.radios input{position:absolute;top:16px;left:16px;}
      div.radios img{width:240px;margin:0 auto;}
      div.hardware.radios img{border-radius:10px;display:block;border:4px solid #f8f8f8;}      
      input:checked ~ img, 
      div.hardware.radios img:has(+ input:checked){border-color:#3F75FF;}
      div.firmware.radios label:has(input:checked){border-color:#3F75FF;}
      div.firmware.radios img{width:220px;padding:1em 0.5em;margin: 0 auto;border:none;}
      div.install-button{margin:2em auto;text-align: center;}
      esp-web-install-button{zoom:1.5;}
      esp-web-install-button[install-unsupported]{ border:1px dashed; padding: 1em; background-color: lightgoldenrodyellow;}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script
      type="module"
      src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
    ></script>

    <!-- Facebook Pixel Code -->
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '235610976930801');
      fbq('track', 'PageView');
      </script>
      <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=235610976930801&ev=PageView&noscript=1"
      /></noscript>
      <!-- End Facebook Pixel Code -->
  </head>
  <body>
    <div class="main">
      <img width="384px" src="assets/logo-blue.svg" itemprop="logo" alt="Konnected" class="logo"><br/>
      <h1>Flash & Debugging Tool</h1>
      <div>
        <p>Use this web page to install Konnected device firmware and/or connect to the device console for USB debugging.</p>
        <h2>Select your Konnected hardware:</h2>
        <div class="hardware radios">
          <label>
            <img src="https://konnected.io/cdn/shop/products/polotno-2_2.png?v=1691699458&width=240" alt="6-Zone Alarm Panel">
            <input type="radio" name="hardware" value="alarm-panel-esp8266">
            <p>6-zone Alarm Panels</p>           
          </label>
          <label>
            <img src="https://konnected.io/cdn/shop/products/12_zones_-_1_kit_791fbf60-751a-4428-aa8c-dcb4b7474989.png?v=1691699521&width=240" alt="Alarm Panel Pro">
            <input type="radio" name="hardware" value="alarm-panel-pro">
            <p>Alarm Panel Pro</p>           
          </label>
          <label>
            <img src="https://konnected.io/cdn/shop/files/GDOProductImages_2_1.png?v=1706810917&width=240" alt="GDO White">
            <input type="radio" name="hardware" value="gdo-white">
            <p>GDO White (v1 or v2)</p>           
          </label>
          <label>
            <img src="assets/gdo_blaq_tile.jpg" alt="GDO blaQ">
            <input type="radio" name="hardware" value="gdo-blaq">
            <p>GDO blaQ</p>           
          </label>
        </div>
        
        <h2 id="firmware-header" style="display:none;">Select a firmware platform:</h2>

        <!-- Alarm Panel ESP8266 -->
        <div class="firmware radios" id="alarm-panel-esp8266" style="display:none;">          
          <label>
            <div class="tile">
              <p>
                <input type="radio" name="firmware" value="esphome" data-manifest="manifests/esphome-alarm-panel-wifi.json">                
              </p>
              </div>
            <div class="tile img-container">
              <span class="badge new">RECOMMENDED</span><br/>
              <img src="assets/made-for-esphome-black-on-white.svg">              
            </div>
            <div class="tile" style="flex-grow: 8;">
              <p>Konnected's latest device firmware  -- recommended for Home Assistant and Hubitat users with 6-zone Alarm Panels.</p>
              <ul class="sub">
                <li><b>100% local.</b> The ESPHome firmware platform does not support Konnected Cloud on the 6-zone Alarm Panel hardware.</li>
                <li><b>Multi-controller.</b> Integrates with multiple local smart home hubs simultaneously.</li>              
              </ul>
            </div>
          </label>

          <label>
            <div class="tile">
              <p>
                <input type="radio" name="firmware" value="konnected-legacy" data-manifest="manifest.json">
              </p>
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge deprecated">LEGACY</span><br/>
              <img src="assets/nodemcu-style5-150px.png_150x150.png" style="width:120px;">
            </div>            
            <div class="tile" style="flex-grow: 8;">
              <p>Konnected's original firmware (NodeMCU platform) supports a <em>single</em> cloud or local integration. Recommended for SmartThings or Alexa users.</p>
              <ul class="sub">
                <li><b>Single-controller</b>. Integrates with either Konnected Cloud or <em>one</em> local smart home hub.</li>
              </ul>
            </div>
          </label>
        </div>

        <!-- Alarm Panel Pro -->
        <div class="firmware radios" id="alarm-panel-pro" style="display:none;">          
          <label>
            <div class="tile">
              <p>
                <input type="radio" name="firmware" value="esphome">                
              </p>
              </div>
            <div class="tile img-container">
              <span class="badge new">RECOMMENDED</span><br/>
              <img src="assets/made-for-esphome-black-on-white.svg">              
            </div>
            <div class="tile text-block" style="flex-grow: 8;">
              <p>Konnected's latest device firmware is now the default/stock on all new devices. Recommended for all new installs.</p>
              <ul class="sub">                
                <li><b>Multi-controller.</b> Integrates with multiple local smart home hubs and apps simultaneously.</li>              
                <li><b>Cloud optional.</b> 100% local by default. Opt-in to Konnected Cloud connectivity for cloud-based integrations and premium features.</li>
              </ul>
            </div>
          </label>
          
          <label>
            <div class="tile">
              <p>
                <input type="radio" name="firmware" value="konnected-legacy" data-manifest="manifest.json">
              </p>
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge deprecated">LEGACY</span><br/>
              <img src="assets/nodemcu-style5-150px.png_150x150.png" style="width:120px;">
            </div>            
            <div class="tile" style="flex-grow: 8;">
              <p>Konnected's original firmware (NodeMCU platform) supports a <em>single</em> cloud or local integration.</p>
              <ul class="sub">
                <li><b>Single-host</b>. Integrates with either Konnected Cloud or <em>one</em> local smart home hub.</li>
              </ul>
            </div>
          </label>

          <label>
            <div class="tile">
              <input type="radio" name="firmware" value="matter" data-manifest="manifests/matter-alarm-panel-pro.json">
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge beta">EXPERIMENTAL</span><br/>
              <img src="assets/Matter_logo.jpeg">
            </div>
            <div class="tile" style="flex-grow: 8;">
              <p>
                Matter is the emerging smart home standard with promises of <em>local</em> integration with top consumer
                smart home platforms. Konnected's EXPERIMENTAL support for Matter on the Alarm Panel Pro integrates contact sensors,
                on/off switches, and temperature sensors to the Matter fabric.
              </p>
              <ul class="sub">
                <li>NOT (yet) MATTER CERTIFIED. May not work with all Matter controllers.</li>
                <li><a href="https://share.hsforms.com/1RrMQPKEhQyqTSjTv8oGS9Adff38" target="_blank">Request to join Konnected's Matter early-access program here</a></li>
                <li>Knowledge base: <a href="https://support.konnected.io/matter-alarm-panel-pro" target="_blank">Matter (Experimental) for the Alarm Panel Pro</a></li>
              </ul>  
            </div>
          </label>
        </div>

        <!-- GDO White -->
        <div class="firmware radios" id="gdo-white" style="display:none;">
          <label>
            <div class="tile">
              <input type="radio" name="firmware" value="esphome" data-manifest="manifests/esphome-garage-door-wifi.json">
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge new">RECOMMENDED</span><br/>
              <img src="assets/made-for-esphome-black-on-white.svg">
            </div>
            <div class="tile" style="flex-grow:8;">
              <p>Konnected's latest device firmware made with ESPHome is now the default/stock on all new GDO White.</p>
              <ul class="sub">
                <li><b>Multi-controller.</b> Integrates with multiple local smart home hubs and apps simultaneously.</li>              
                <li><b>Cloud optional.</b> 100% local by default. Opt-in to Konnected Cloud connectivity for cloud-based integrations and premium features.</li>
              </ul>
            </div>
          </label>

          <label>
            <div class="tile">
              <input type="radio" name="firmware" value="matter" data-manifest="manifests/matter-GDOv2-S.json">
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge beta">EXPERIMENTAL</span><br/>
              <img src="assets/Matter_logo.jpeg">
            </div>
            <div class="tile" style="flex-grow: 8;">
              <p>
                Matter is the emerging smart home standard with promises of <em>local</em> integration with top consumer
                smart home platforms. Konnected's EXPERIMENTAL support for Matter on the GDO White enables control of your garage
                from a Matter enabled controller.
              </p>
              <ul class="sub">
                <li>NOT (yet) MATTER CERTIFIED. May not work with all Matter controllers.</li>
                <li><a href="https://share.hsforms.com/1RrMQPKEhQyqTSjTv8oGS9Adff38" target="_blank">Request to join Konnected's Matter early-access program here</a></li>
                <li>Knowledge base: <a href="https://support.konnected.io/matter-gdo-white" target="_blank">Matter (Experimental) for the GDO White</a></li>
              </ul>  
            </div>
          </label>


          <label>
            <div class="tile">
              <input type="radio" name="firmware" value="konnected-legacy" data-manifest="manifests/konnected-garage-door-opener.json">
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge deprecated">V1 ONLY</span><br/>
              <img src="assets/nodemcu-style5-150px.png_150x150.png" style="width:120px;">
            </div>            
            <div class="tile" style="flex-grow:8;">              
              <p>Original Konnected GDOv1 (NodeMCU firmware)</p>
              <ul class="sub">
                <li><b>SmartThings</b> and <b>Alexa</b> integration via Konnected cloud.</li>
                <li><b>For GDOv1 (sold in 2023) only</b></li>
              </ul>  
            </div>
          </label>
        </div>

        <!-- GDO blaQ -->
        <div class="firmware radios" id="gdo-blaq" style="display:none;">
          <label>
            <div class="tile">
              <input type="radio" name="firmware" value="esphome" data-manifest="manifests/esphome-gdov2-q.json">
            </div>
            <div class="tile img-container" style="flex-grow:4;">
              <span class="badge new">RECOMMENDED</span>
              <img src="assets/made-for-esphome-black-on-white.svg">
            </div>
            <div class="tile" style="flex-grow:8;">
              <p><p>Konnected's latest device firmware made with ESPHome is now the default/stock on all new devices. Currently the only option for the GDO blaQ.</p></p>
              <ul class="sub">
                <li><b>Multi-controller.</b> Integrates with multiple local smart home hubs and apps simultaneously.</li>              
                <li><b>Cloud optional.</b> 100% local by default. Opt-in to Konnected Cloud connectivity for cloud-based integrations and premium features.</li>
              </ul>
            </div>
          </label>

          <label>
            <div class="tile">
              <input type="radio" name="firmware" value="matter" data-manifest="manifests/matter-GDOv2-Q.json">
            </div>
            <div class="tile img-container" style="flex-grow: 4;">
              <span class="badge beta">EXPERIMENTAL</span><br/>
              <img src="assets/Matter_logo.jpeg">
            </div>
            <div class="tile" style="flex-grow: 8;">
              <p>
                Matter is the emerging smart home standard with promises of <em>local</em> integration with top consumer
                smart home platforms. Konnected's EXPERIMENTAL support for Matter on the GDO blaQ enables control of your garage
                from a Matter enabled controller.
              </p>
              <ul class="sub">
                <li>NOT (yet) MATTER CERTIFIED. May not work with all Matter controllers.</li>
                <li><a href="https://share.hsforms.com/1RrMQPKEhQyqTSjTv8oGS9Adff38" target="_blank">Request to join Konnected's Matter early-access program here</a></li>
                <li>Knowledge base: <a href="https://support.konnected.io/matter-support-experimental-for-the-gdo-blaq" target="_blank">Matter (Experimental) for the GDO blaQ</a></li>
              </ul>  
            </div>
          </label>

        </div>

        <h2 id="build-header" style="display:none;">Select a build:</h2>
        <div class="build radios" id="alarm-panel-pro-esphome" style="display:none">
          <p class="sub">ESPHome can support only ethernet <em>or</em> Wi-Fi, not both at the same time. Choose the build below according to your desired connectivity. Check the hardware version on the Alarm Panel Pro board underneath the logo.</p>
          <h3>Ethernet connectivity</h3>
          <label>
            <input type="radio" name="build" value="rtl8201" data-manifest="manifests/esphome-alarm-panel-rtl8201.json">
            Ethernet: hardware version 1.8 and 1.9
          </label>
          <label>
            <input type="radio" name="build" value="lan8720" data-manifest="manifests/esphome-alarm-panel-lan8720.json">
            Ethernet: hardware version 1.5, 1.6 and 1.7
          </label>

          <h3>WiFi connectivity</h3>
          <label>
            <input type="radio" name="build" value="esphome-alarm-panel-wifi" data-manifest="manifests/esphome-alarm-panel-wifi.json">
            WiFi: all versions
          </label>
        </div>
      </div>
      <div class="install-button" style="display:none">
        <esp-web-install-button manifest="manifests/empty.json" id="inst">
          <span slot="unsupported"><strong>Unsupported Browser:</strong> Please use <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> or <a href="https://microsoft.com/edge" target="_blank">Microsoft Edge</a> browser to use this tool.</span>
        </esp-web-install-button>
      </div>
      <br/><br/><br/><br/>
      <p>Need help? <a href="https://help.konnected.io">Konnected Help & Support portal</a></p>
      <div style='font-size:11px;margin-top:5em;'>
        &copy; Copyright 2024 <a href="https://konnected.io">Konnected Inc.</a></br>
        <a href="https://esphome.github.io/esp-web-tools/" target='_blank' style='color:#aaa;'>powered by ESP Web Tools</a>
      </div>  
    </div>

    <!--         <ol>
          <li><a href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers" target="_blank">Download and install the USB drivers from Silicon Labs</a> to connect Konnected branded hardware.<br/>
            <span class="sub">To connect a NodeMCU/Konnected v1 use <a href="https://sparks.gogo.co.nz/ch340.html" target="_blank">this driver</a>. You only need to do this once.</span></li>
          <li>On 6-zone boards: open the door/window on Zone 6 or disconnect the wire from Zone 6 before continuing.
            <span class="sub">Zone 6 must remain open or empty while flashing. You can leave all the other wires connected.</span>
          </li>
          <li>Plug in the device to your computer or laptop using a Micro-USB cable that supports data transfer.
            <span class="sub"><a href="https://konnected.io/products/micro-usb-cable" target="_blank">Need a cable?</a></span></li>
          <li>Click <u>CONNECT</u> below and select the correct port for the device in the popup window.<br/><span class="sub">Usually has <em>CP210x</em> or <em>SLAB_USBtoUART</em> in the name.</span></li>
          <li>Follow the prompts to <u>Install Konnected</u> or view <u>Logs & Console</u>.</li>
          <li><a href="https://help.konnected.io/support/solutions/articles/32000023498-re-sync-device-settings" target="_blank">Re-sync the device settings</a> from the Konnected App or your local home automation platform.</li>
        </ol>
 -->
  <script>
    var hardware = null;
    var platform = null;

    $(document).on('change', 'input[type="radio"]', e => {
      $target = $(e.target);
      $inst_button = $('div.install-button');
      switch (e.target.name) {
        case 'hardware':
          hardware = $target.val();
          platform = null;
          $inst_button.hide();
          $('#build-header').hide();
          $('div.firmware.radios').hide();
          $('div.build.radios').hide();
          $('input[type="radio"][name="firmware"]').prop('checked', false);
          $('input[type="radio"][name="build"]').prop('checked', false);
          // show and scroll to Firmware section
          $('div.firmware.radios#' + hardware).show();      
          $('html,body').animate({scrollTop:$('#firmware-header').show().offset().top},'slow');
          break;
        
        case 'firmware':
          platform = $target.val();
          $('div.build.radios').hide();
          if($target.data('manifest')) {
            $('#inst').attr('manifest', $target.data('manifest'));
            $('#build-header').hide();
            $inst_button.show();
          } else {
            $('input[type="radio"][name="build"]').prop('checked', false);
            $inst_button.hide();
            $('div.build.radios#' + hardware + '-' + platform).show();
            $('html,body').animate({scrollTop:$('#build-header').show().offset().top},'slow');            
          }
          break;

        case 'build':
          if($target.data('manifest')) {
            $('#inst').attr('manifest', $target.data('manifest'));
            $inst_button.show();
          }
          break;
      }
    })

  </script>

  </body>
</html>