Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page is loading twice? #6

Open
Spankythemusical opened this issue Oct 4, 2018 · 4 comments
Open

Page is loading twice? #6

Spankythemusical opened this issue Oct 4, 2018 · 4 comments

Comments

@Spankythemusical
Copy link

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
Copy link

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

@Spankythemusical
Copy link
Author

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
Copy link

zombodotcom commented Oct 11, 2018 •
edited
Loading

Your bottom part here, `

<script src="js/combined.js"></script> <script src="js/app.js"></script>` 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.

esp8266-fastled-audio/data/index.htm

Line 220 in 273cf2c

<!-- request js from internet CDN -->

This might be where you are getting the issue. if not, try and recompile it without changing anything in the HTML area.

@zombodotcom
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zombodotcom @Spankythemusical