Question

所以我现在和Adafruit ESP8266 Huzzah合作了一段时间，而且我在运行带有文件系统库的网站时遇到了麻烦。

我的问题如下：

images / css / js文件始终无法加载
ESP8266崩溃了很多（主要是在切换页面时）
刷新页面需要永远
我的websocket连接总是随机关闭。

问题示例（images / css / js）：

我最初使用的是FSBrowser示例中使用的库：

ESP8266WiFi.h
ESP8266WebServer.h
fs.h文件

然而，我的css / js将无法加载更大的文件，因此现在我正在使用异步的SPIFFS库的修改版本：https://github.com/me-no-dev/ESPAsyncWebServer

这就是我现在所处的位置。我目前拥有的最大图像是47 KB（当前只有四个图像），我真的希望能够以更稳定的方式运行这个图像，所以我真的可以在这里使用一些帮助。

来源ino文件：http://www.codesend.com/view/d0ddc5214ebd22b58090225fe43ed872/

标头ino文件：http://www.codesend.com/view/213e3ebcd61299d20c0fec417137f7a5/

HTML / CSS / JS：https://jsfiddle.net/Th3On3Fr33man/kqhdwc4p/

<html>

<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>FITS</title>

    <!--CSS-->
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body style='background-color:#4a4a4c;' onload="drawGauges(); startSocket();"> <!--start()-->


    <div class="pageHdrDiv">
        <h1 class="pageHdr">FLUID INFUSION TRAINING SYSTEM</h1>
    </div>
    <!--
    <div style="clear:both;"></div>
    -->
    <!--COLUMN HEADERS-->
    <div class='twoHeaderRow'>
        <div id="twoTopHeaderLeft" class="twoTopHeader">
            <h3>BATTERY</h3>
        </div>

        <div id="twoTopHeaderRight" class="twoTopHeader">
            <h3>MARROW</h3>
        </div>
    </div>

    <div class="battFluid">

        <div class="battDiv">

            <svg width="50px" height="50px" viewBox="0 0 100 150" class="battChgContainer">
                <polygon id="battChgContainer" stroke="gray" fill="grey" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
            </svg>

            <div class="battContainer">
                <div id="battery0" class="battery">
                    <div id="battery100" class="juice"></div>

                    <svg id="battLowContainer" width="120px" height="120px" viewBox="0 0 100 190" class="battLowContainer deactiveSect">
                        <polygon stroke="gray" fill="#1A1A1C" points="85,151 85,110 100,110 105,105 110,100 115,95 115,50 100,50 100,20 85,20 85,50 65,50 65,20 50,20 50,50 35,50 35,95 40,100 45,105 50,110 65,110 65,151"></polygon>
                    </svg>

                </div>   

            </div>

            <h1 id="hdr100" class="hdr100">100%</h1>
        </div>

        <!--FLUID GAUGE-->
        <div class="fluidDiv">
            <table class="fluidGauge">
                <tr>
                    <td>
                        <div class="fluidReservoir blood">
                            <div class="tube">
                            </div>
                            <div class="liquid">
                                <div class="head">
                                </div>
                                <div id="fluidReservoirHeight" class="body">
                                    <div class="drop large">
                                    </div>
                                    <div class="drop medium">
                                    </div>
                                    <div class="drop small">
                                    </div>
                                </div>
                                <div class="tail">
                                </div>
                            </div>
                            <div class="glitter">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>

            <div id="hdrFRS" class="activeSect">
                <h1 id="hdrFRH" class="hdrFR frActive">High Level</h1>

                <h1 id="hdrFRM" class="hdrFR frDeactive">Medium Level</h1>

                <h1 id="hdrFRL" class="hdrFR frDeactive">Low Level</h1>
            </div>

            <h1 id="hdrFRE" class="hdrFR frActive deactiveSect">EMPTY</h1>

        </div>

    </div>

    <!--COLUMN HEADERS-->
    <div class='threeHeaderRow'>
        <div class="threeHeader threeHeaderLeft">
            <h3>LEFT</h3>
        </div>

        <div class="threeHeader threeHeaderCenter">
            <h3>STERNUM</h3>
        </div>

        <div class="threeHeader">
            <h3>RIGHT</h3>
        </div>
    </div>

    <div class="oneHeaderRow">
        <h3>MICROSWITCHES</h3>
    </div>

    <!--MICROSWITCHES-->
    <div class="microswitchRow">

        <!--Left-->
        <div class="microContainer microContLeft">
            <div id="microLeftRed" class="led-box">
                <div class="led-red"></div>
                <h4>NOT READY</h4>
            </div>
            <div id="microLeftGreen" class="led-box deactiveSect">
                <div class="led-green"></div>
                <h4>READY</h4>
            </div>
        </div>

        <!--Sternum-->
        <div class="microContainer microContLeft">
            <div id="microCenterRed" class="led-box">
                <div class="led-red"></div>
                <h4>NOT READY</h4>
            </div>
            <div id="microCenterGreen" class="led-box deactiveSect">
                <div class="led-green"></div>
                <h4>READY</h4>    
            </div>
        </div>

        <!--Right-->
        <div class="microContainer">
            <div id="microRightRed" class="led-box">
                <div class="led-red"></div>
                <h4>NOT READY</h4>
            </div>
            <div id="microRightGreen" class="led-box deactiveSect">
                <div class="led-green"></div>
                <h4>READY</h4>
            </div>
        </div>

    </div>

    <div class="oneHeaderRow">
        <h3>VALVES</h3>
    </div>

    <!--VALVES-->
    <div class='valveRow'>
        <div class='valveContainer valveContLeft'>
            <img id="openValveC" src="openvalve.png" alt="open valve C" class="deactiveSect openValvePic">
            <img id="closedValveC" src="closedvalve.png" alt="closed valve C" class="closedValvePic">
        </div>
        <div class='valveContainer valveContLeft'>
            <img id="openValveD" src="openvalve.png" alt="open valve D" class="deactiveSect openValvePic">
            <img id="closedValveD" src="closedvalve.png" alt="closed valve D" class="closedValvePic">
        </div>
        <div class='valveContainer'>
            <img id="openValveE" src="openvalve.png" alt="open valve E" class="deactiveSect openValvePic">
            <img id="closedValveE" src="closedvalve.png" alt="closed valve E" class="closedValvePic">
        </div>
    </div>

    <div class="oneHeaderRow">
        <h3>PRESSURE GAUGES</h3>
    </div>

    <!--PRESSURE GAUGES-->
    <div id="pGauges" class="pressureRow">
        <div class="pressureContainer pContainC pressureContLeft">
            <div id="pGaugeC">
                <canvas id="pressureGaugeC" class="gauge"></canvas>
            </div>

            <div class="pGaugeText">
                <div class="bubble bubbleLeft">
                    <div class="num"></div>
                    <div id="pgcValue" class="rotating">
                        0
                    </div>
                </div>
                <span class="psi">PSI</span>
            </div>
        </div>
        <div class="pressureContainer pContainD pressureContCenter">
            <div id="pGaugeD">
                <canvas id="pressureGaugeD" class="gauge"></canvas>
            </div>
            <div class="pGaugeText pGaugeTextC">
                <div class="bubble">
                    <div class="num"></div>
                    <div id="pgdValue" class="rotating">
                        0
                    </div>
                </div>
                <span class="psi">PSI</span>
            </div>
        </div>
        <div class="pressureContainer pContainE">
            <div id="pGaugeE">
                <canvas id="pressureGaugeE" class="gauge"></canvas>
            </div>
            <div class="pGaugeText">
                <div class="bubble">
                    <div class="num"></div>
                    <div id="pgeValue" class="rotating">
                        0
                    </div>
                </div>
                <span class="psi">PSI</span>
            </div>
        </div>
    </div>  

    <div class="adminLoginButtonDiv">
        <a id="adminLoginButton" class="styled-button-11 elementWrapper" href="admin.htm">INSTRUCTOR LOGIN</a>
    </div>

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


</body>

</html>

Answer 1

好吧，所以我认为我通过更新库解决了大部分（如果不是全部）问题，包括使用此处的esp8266库的git版本：ESP Link

我还必须更新我的函数以匹配新库中的示例。

谢谢大家的帮助。

需要帮助运行带有images / css / js的文件系统库

1 个答案: