index_features.html

<!DOCTYPE html>
<html lang="en" class="">
  <head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Install Tasmota</title>
    <style>
      div,fieldset,input,select{padding:5px;font-size:1em;}
      fieldset{background:#4f4f4f;}
      p{margin:0.5em 0;}
      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{text-align:center;font-family:verdana,sans-serif;background:#252525;}
      td{padding:0px;}
      button{border:0;border-radius:0.3rem;background:#1fa3ec;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:#0e70a4;}
      .bred{background:#d43535;}
      .bred:hover{background:#931f1f;}
      .bgrn{background:#47c266;}
      .bgrn:hover{background:#5aaf6f;}
      a{color:#1fa3ec;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;}
    </style>
    <style>
      .accordion {
        outline: none;
        transition: 0.4s;
      }
      .active, .accordion:hover {
        background-color: #ccc;
      }
      .panel {
        border-radius:0;
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
      }
      </style>
    <script
      type="module"
      src="https://unpkg.com/tasmota-esp-web-tools@8.1.2/dist/web/install-button.js?module"
    ></script>
    <script>
        var backup_data; //fetch once, filter a copy on demand
        var selected_soc = ["ESP8266","ESP32","ESP32-S2","ESP32-S3","ESP32-C3"];

        function show_features(path){
          console.log(path);
          var feature_report=document.querySelector("#feature_report");
          var feature_panel=feature_report.nextElementSibling;
          feature_report.innerHTML = '';

          var features = {}
          for(section of Object.entries(backup_data)){
            // console.log(section);
            for(entry of backup_data[section[0]]){
              // console.log(entry['path']);
              if(entry['path'] === path){
                features = entry['features']
              }
            }
          }
          if(features['Xdrv'].length ==0){

            return;
          }
          var acc_button = document.createElement('button');
          acc_button.innerHTML = 'Show additional Debug Info for Developers'
          acc_button.setAttribute("class", "accordion");
          feature_report.appendChild(acc_button);


          var feature_panel = document.createElement('div');
          feature_panel.setAttribute("class", "panel");
          var feature_msg = document.createElement('p');
          feature_msg.innerText = "The following drivers are included in the selected firmware:";
          feature_panel.appendChild(feature_msg);
          feature_report.appendChild(feature_panel);

          // feature_report.setAttribute('hidden','false');
          for(section of Object.entries(features)){
            acc_button = document.createElement('button');
            acc_button.innerHTML = section[0];
            acc_button.setAttribute("class", "accordion");
            feature_panel.appendChild(acc_button);

            acc_panel = document.createElement('div');
            acc_panel.setAttribute("class", "panel");

            for(entry of features[section[0]]){
              if(driver_info[section[0]][entry] == null){
                continue;
              }
               _p = document.createElement('p');
               _p.innerHTML =  driver_info[section[0]][entry] + ' (driver code: ' +entry + ' )';
              acc_panel.appendChild(_p);
              console.log(driver_info[section[0]][entry]);
            }

            feature_panel.appendChild(acc_panel);
            feature_panel.appendChild(document.createElement('p'));
          }
          addEvtListFeatureReport();
          console.log(features);
        }

        function makeSelector(){
            fetch('https://tasmota.github.io/install/manifests_new.json')
            .then(response => response.json())
            .then(data => {backup_data = data; make_select(data)});
        }

        function make_select(data){
            var sel=document.querySelector("#pick-variant-selector");
            // console.log(data);
            for (opt_group in data){
                var og=document.createElement('optgroup');
                og.label = opt_group;
                sel.appendChild(og);
                // console.log(opt_group,data[opt_group]);
                for (fw of data[opt_group]){
                    // console.log(data[opt_group][fw]);
                    var opt=document.createElement('option');
                    opt.label = fw['name'];
                    opt.value = fw['path'];
                    opt.title = "Supported chipfamilies:\n"
                    for (chipFamily of fw['chipFamilies']){
                        opt.title += chipFamily + "\n";
                    }
                    // console.log( opt.value);
                    og.appendChild(opt);
                }
            }
        }

        function makeChipSelector(){
          const chipSel = document.querySelector("#selected_chip");
          var opt=document.createElement('option');
          opt.label = 'All';
          opt.value = 'All';
          opt.title = "All chipfamilies"
          chipSel.appendChild(opt);
          for(chip of selected_soc){
            opt=document.createElement('option');
            opt.label = chip;
            opt.value = chip;
            chipSel.appendChild(opt);
          }
          chipSel.addEventListener("change", () => {
              handleCB_SOC(chipSel.value);
            });
        }

        function addEvtListFeatureReport(){
          var acc = document.getElementsByClassName("accordion");
          var i;

          for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var panel = this.nextElementSibling;
              if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
              } else {
                panel.style.maxHeight = panel.scrollHeight*10 + "px";
              } 
            });
          }
        }

        window.addEventListener("load", function(event) {
            makeChipSelector();
            makeSelector();
            try{
                const button = document.querySelector("esp-web-install-button");
                button.overrides = {
                  checkSameFirmware(manifest, improvInfo) {
                    const manifestFirmware = manifest.name.toLowerCase();
                    const deviceFirmware = improvInfo.firmware.toLowerCase();
                    return manifestFirmware.includes(deviceFirmware);
                  }
                };
                console.log(button.shadowRoot.firstChild.name);
                if(button.shadowRoot.firstChild.name == 'activate'){
                    //success: add the select picker and some info
                    const selectEl = document.querySelector("#pick-variant-selector");
                    button.manifest = "https://tasmota.github.io/install/manifest_ext/release.tasmota.manifest.json";
                    selectEl.addEventListener("change", () => {
                        button.manifest = selectEl.value;
                        show_features(selectEl.value);
                        // console.log(button.manifest);
                    });
                }
            }
            catch(e){
                console.log(e);
            }
        },{ once: true });

        function handleCB_SOC(chip) {
          if(chip=='All'){
            picker_data = backup_data;
          }
          else{
            var picker_data = {};
            for(section of Object.entries(backup_data)){
              picker_data[section[0]]= [];
              for(line of backup_data[section[0]]){
                if (line["chipFamilies"].includes(chip)){
                  picker_data[section[0]].push(line);
                }
              }
            }
          }
          var sel=document.querySelector("#pick-variant-selector");
          sel.innerHTML = '';
          make_select(picker_data);
        }
    </script>
  </head>
  <body>
    <div style='display:inline-block;color:#eaeaea;min-width:340px;'>

    <h1>Install Tasmota</h1>

    <div class='pick-variant'>
    <ol style='text-align:left'>
        <li>Connect the ESP device to your computer</br>using USB or serial-to-USB adapter</li></br>
        <li>Select the firmware variant suitable for</br>your device</li></br>
        <li>Hit "Install" and select the correct port</br>or find help if <a href="https://tasmota.github.io/docs/Getting-Started/" target='_blank' style='color:#aaa;'>no device found</a></li>
        </ol>
        </br>
      </br>
      <span>
        <select style="width:70%;" id="pick-variant-selector"></select>
        <select style="width:25%;" id="selected_chip"></select>
      </span>
      <p>
        </br>
        <esp-web-install-button id="inst" style='text-align:center'>
          <i slot="unsupported">
            Your browser does not support Web Serial.</br>Open this page in Google Chrome or</br>Microsoft Edge instead
            <span class="not-supported-i hidden">(but not on your mobile device)</span>.
          </i>
        </esp-web-install-button>
      </p>
      <div id='feature_report'>
      </div>
    </div>
    <div style='text-align:right;font-size:11px;'>
      <hr/>
      <a href="https://esphome.github.io/esp-web-tools/" target='_blank' style='color:#aaa;'>Tasmota Installer powered by ESP Web Tools</a>
    </div>

    </div>
    <script>
    const driver_info =  {
    "Xdrv": {
        "1": "webserver",
        "2": "mqtt",
        "3": "energy",
        "4": "light",
        "5": "irremote",
        "6": "snfbridge",
        "7": "domoticz",
        "8": "serial",
        "9": "timers",
        "10": "scripter",
        "11": "knx",
        "12": "home",
        "13": "display",
        "14": "mp3",
        "15": "pca9685",
        "16": "tuyamcu",
        "17": "rcswitch",
        "18": "armtronix",
        "19": "ps16dz",
        "20": "hue",
        "21": "wemo",
        "22": "ifan",
        "23": "zigbee",
        "24": "buzzer",
        "25": "A4988",
        "26": "ariluxrf",
        "27": "shutter",
        "28": "pcf8574",
        "29": "deepsleep",
        "30": "exs",
        "31": "tasmota-client",
        "32": "hotplug",
        "33": "nrf24l01",
        "34": "wemos",
        "35": "pwm",
        "36": "keeloq",
        "37": "d1",
        "38": "ping",
        "39": "thermostat",
        "40": "telegram",
        "41": "tcp",
        "42": "i2s",
        "43": "mlx90640",
        "44": "miel",
        "45": "shelly",
        "46": "ccloader",
        "47": "ftc532",
        "48": "timeprop",
        "49": "pid",
        "50": "filesystem",
        "51": "bs814a2",
        "52": "berry",
        "53": "projector",
        "54": "lvgl",
        "55": "touch",
        "56": "rtc",
        "57": "tasmesh",
        "58": "range-extender",
        "59": "influxdb",
        "60": "shift595",
        "61": "ds3502",
        "62": "improv",
        "79": "ble",
        "81": "webcam",
        "82": "ethernet",
        "83": "watch",
        "85": "ble",
        "86": "sonoff",
        "98": "file",
        "99": "debug"
    },
    "Xlgt": {
        "1": "ws2812",
        "2": "my92x1",
        "3": "sm16716",
        "4": "sm2135",
        "5": "l1",
        "6": "electriq",
        "7": "lsc"
    },
    "Xdsp": {
        "1": "lcd",
        "2": "ssd1306",
        "3": "matrix",
        "4": "ili9341",
        "5": "epaper",
        "6": "epaper",
        "7": "sh1106",
        "9": "SSD1351",
        "10": "RA8876",
        "11": "sevenseg",
        "12": "ST7789",
        "14": "SSD1331",
        "15": "tm1637",
        "16": "epaper",
        "17": "universal",
        "18": "berry",
        "19": "max7219"
    },
    "Xnrg": {
        "1": "hlw8012",
        "2": "cse7766",
        "3": "pzem004t",
        "4": "mcp39f501",
        "5": "pzem",
        "6": "pzem",
        "7": "ade7953",
        "8": "sdm120",
        "9": "dds2382",
        "10": "sdm630",
        "11": "ddsu666",
        "12": "solaxX1",
        "13": "fif",
        "14": "bl09xx",
        "15": "teleinfo",
        "16": "iem3000",
        "17": "ornowe517",
        "18": "sdm72",
        "19": "cse7761",
        "21": "sdm230",
        "22": "bl6523",
        "23": "ade7880",
        "30": "dummy"
    },
    "Xsns": {
        "1": "counter",
        "2": "analog",
        "4": "snfsc",
        "5": "ds18x20",
        "6": "dht",
        "7": "sht1x",
        "8": "htu21",
        "9": "bmp",
        "10": "bh1750",
        "11": "veml6070",
        "12": "ads1115",
        "13": "ina219",
        "14": "sht3x",
        "15": "mhz19",
        "16": "tsl2561",
        "17": "senseair",
        "18": "pms5003",
        "19": "mgs",
        "20": "novasds",
        "21": "sgp30",
        "22": "sr04",
        "24": "si1145",
        "26": "lm75ad",
        "27": "apds9960",
        "28": "tm1638",
        "29": "mcp230xx",
        "30": "mpr121",
        "31": "ccs811",
        "32": "mpu6050",
        "34": "hx711",
        "35": "tx20",
        "36": "mgc3130",
        "37": "rfsensor",
        "38": "az7798",
        "39": "max31855",
        "40": "pn532",
        "41": "max44009",
        "42": "scd30",
        "43": "hre",
        "44": "sps30",
        "45": "vl53l0x",
        "46": "MLX90614",
        "47": "max31865",
        "48": "chirp",
        "50": "paj7620",
        "51": "rdm6300",
        "52": "ibeacon",
        "53": "sml",
        "54": "ina226",
        "55": "hih",
        "56": "hpma",
        "57": "tsl2591",
        "58": "dht12",
        "59": "ds1624",
        "60": "GPS",
        "61": "MI32-NRF24",
        "62": "MI32",
        "63": "aht1x",
        "64": "hrxl",
        "65": "hdc1080",
        "66": "iAQ",
        "67": "as3935",
        "68": "windmeter",
        "69": "opentherm",
        "70": "veml6075",
        "71": "veml7700",
        "72": "mcp9808",
        "73": "hp303b",
        "74": "lmt01",
        "75": "prometheus",
        "76": "dyp",
        "77": "vl53l1x",
        "78": "ezoph",
        "79": "as608",
        "80": "mfrc522",
        "81": "seesaw",
        "82": "wiegand",
        "83": "neopool",
        "84": "tof10120",
        "85": "mpu6886",
        "86": "tfminiplus",
        "87": "mcp2515",
        "88": "am2320",
        "89": "t67xx",
        "90": "hrg15",
        "91": "vindriktning",
        "92": "scd40",
        "93": "hm330x",
        "94": "hdc2010",
        "95": "cm110x",
        "96": "flowratemeter",
        "127": "sensors"
    }
};
    </script>
  </body>
</html>