Page is loading twice? - Githubissues

Spankythemusical commented 6 years ago

I've tried this both connected to WiFi as well as running in AP mode. For some reason, it seems that the page is loading two instances on the same page.

esp8266

As you can see, this should be the bottom of the page, but it loads another page just under. All the options now show twice.

zombodotcom commented 6 years ago

Did you check in incognito mode? also could you send me the index.html file you are using

Spankythemusical commented 6 years ago

Just tried incognito mode, same results.

This is the index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP8266</title>

  <!-- request combined CSS from the ESP8266 web server -->
  <link rel="stylesheet" href="css/combined.css">

  <link rel="stylesheet" href="css/styles.css">

  <link rel="icon" href="images/atom196.png">
</head>

<body>

  <nav class="navbar navbar-default navbar-static-top" id="top" role="banner">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="https://www.google.com" target="_blank"><img src="images/atom196.png" style="width: 24px; height: 24px;" /></a>
        <a class="navbar-brand" href="https://www.google.com" target="_blank">ESP8266</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Deluxe Settings <span class="sr-only">(current)</span></a></li>
          <li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple Settings</a></li>
          <li><a href="/edit.htm" target="_blank" title="Edit Files"></a></li>
          <li><a href="/update" target="_blank" title="Update Firmware"></a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="https://github.com/jasoncoon/esp8266-fastled-webserver">
              <img style="height: 16px;" src="https://assets-cdn.github.com/favicon.ico" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="container" class="container">

    <form class="form-horizontal" id="form">
    </form>

  </div>

  <div id="templates" style="display: none">

    <div id="sectionTemplate" class="form-group">
      <div class="col-sm-12">
        <hr style="margin-bottom: 5px;margin-top: 5px;" />
      </div>
    </div>

    <div id="numberTemplate" class="form-group">
      <label class="col-sm-2 control-label"></label>
      <div class="col-sm-2">
        <input class="form-control input" type="number" step="1" min="0" max="255" />
      </div>
      <div class="col-sm-8">
        <input class="form-control slider" type="range" step="1" min="0" max="255" />
      </div>
    </div>

    <div id="booleanTemplate" class="form-group">
      <label class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" id="btnOn">On</button>
          <button type="button" class="btn btn-default" id="btnOff">Off</button>
        </div>
      </div>
    </div>

    <div id="selectTemplate" class="form-group">
      <label class="col-sm-2 control-label"></label>
      <div class="col-sm-8">
        <select class="form-control"><select>
      </div>
      <div class="col-sm-2">
        <div class="btn-group" role="group" aria-label="...">
          <button type="button" class="btn btn-default btn-previous"
                  aria-label="Previous" title="Previous">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </button>
          <button type="button" class="btn btn-default btn-next"
                  aria-label="Next" title="Next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </button>
        </div>
      </div>
    </div>

    <div id="colorPaletteTemplate" class="form-group">
      <label class="col-sm-2 control-label color-label"></label>
      <div class="col-sm-10">
        <div class="btn-group btn-group-justified" role="group">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&nbsp;</button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-color" style="background: #FFFFFF;" title="White">&nbsp;</button>
          </div>
        </div>
      </div>
    </div>

    <div id="colorTemplate">
      <div class="form-group">
        <!-- <label class="col-sm-2 control-label color-label"></label> -->
        <div class="col-sm-12 col-sm-offset-2">
          <input type="text" class="form-control minicolors" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Red</label>
        <div class="col-sm-2">
          <input class="form-control color-red-input" type="number" step="1" min="0" max="255" />
        </div>
        <div class="col-sm-8">
          <input class="form-control color-red-slider" type="range" step="1" min="0" max="255" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Green</label>
        <div class="col-sm-2">
          <input class="form-control color-green-input" type="number" step="1" min="0" max="255" />
        </div>
        <div class="col-sm-8">
          <input class="form-control color-green-slider" type="range" step="1" min="0" max="255" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Blue</label>
        <div class="col-sm-2">
          <input class="form-control color-blue-input" type="number" step="1" min="0" max="255" />
        </div>
        <div class="col-sm-8">
          <input class="form-control color-blue-slider" type="range" step="1" min="0" max="255" />
        </div>
      </div>
    </div>

  </div>

  <nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-2">
        <ul class="nav navbar-nav">
          <li>
            <a href="/" aria-label="Refresh" title="Refresh">
              <span class="glyphicon glyphicon-refresh" id="btnRefresh"></span>
            </a>
          </li>
          <li><p class="navbar-text" id="status">Loading, please wait...</p></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- request combined js from the ESP8266 web server -->
  <script src="js/combined.js"></script>

  <script src="js/app.js"></script>

</body>

</html>

zombodotcom commented 6 years ago

Your bottom part here, `

` Looks a little different. When I was originally doing it the files were hosted online, and they got combined. Go back and look at this HTML. And check how its loading the JS and where its getting everything. https://github.com/jasoncoon/esp8266-fastled-audio/blob/273cf2cf223ea5f40de55e68dac7f2c177065cee/data/index.htm#L220 This might be where you are getting the issue. if not, try and recompile it without changing anything in the HTML area.

zombodotcom commented 6 years ago

could also just try this one

https://github.com/jasoncoon/esp8266-fastled-webserver

Its basically the same thing, just without the audio part. Look at both of them and try and combine them if the Audio one doesnt work. i think the only real difference is audio patterns and initialization/reading of the MSGEQ7 or however you're getting audio in.

jasoncoon / esp8266-fastled-audio

Page is loading twice? #6