Скрыть объявление
На нашем форуме недоступен просмотр изображений для неавторизованных пользователей. Если Вы уже зарегистрированы на нашем форуме, то можете войти. Если у Вас еще нет аккаунта, мы будем рады, если Вы к нам присоединитесь. Зарегистрироваться Вы можете здесь.

esphttpd -> артефакты на страницах

Тема в разделе "Раздел для начинающих", создана пользователем Kitaro, 10 мар 2017.

  1. Kitaro

    Kitaro Новичок

    Сообщения:
    9
    Симпатии:
    1
    Добрый день, собирал ли кто вебсервер на основе esphttpd из UDK?
    На страницах вылазят артефакты - хвосты кода, которых нет в усходном коде страницы, заливаемом в ESP, но которые появляются при компоновке страницы и отображении в браузере. Появляются в конце страницы, перед тегом </body>
    Кто-нить сталкивался, победил?
     
  2. Юрий Ботов

    Юрий Ботов Moderator Команда форума

    Сообщения:
    994
    Симпатии:
    169
    То о чем вы говорите обычно бывает либо если вы забыли закрывающие тэги где то в html либо если браузер не распознал принятую информацию как html, вы с сервера не послали заголовок, либо весь либо его кусок с contenttype
     
  3. Kitaro

    Kitaro Новичок

    Сообщения:
    9
    Симпатии:
    1
    Врядли я что-то забыл, я беру страницу, что идет с примером, скажем wifi.tpl
    вот код, что льется в ESP
    wifi.tpl (раскрыть)

    Код (Text):
    1. <html><head><title>WiFi connection</title>
    2. <link rel="stylesheet" type="text/css" href="style.css">
    3. <script type="text/javascript" src="140medley.min.js"></script>
    4. <script type="text/javascript">
    5.  
    6. var xhr=j();
    7. var currAp="%currSsid%";
    8.  
    9. function createInputForAp(ap) {
    10.     if (ap.essid=="" && ap.rssi==0) return;
    11.     var div=document.createElement("div");
    12.     div.id="apdiv";
    13.     var rssi=document.createElement("div");
    14.     var rssiVal=-Math.floor(ap.rssi/51)*32;
    15.     rssi.className="icon";
    16.     rssi.style.backgroundPosition="0px "+rssiVal+"px";
    17.     var encrypt=document.createElement("div");
    18.     var encVal="-64"; //assume wpa/wpa2
    19.     if (ap.enc=="0") encVal="0"; //open
    20.     if (ap.enc=="1") encVal="-32"; //wep
    21.     encrypt.className="icon";
    22.     encrypt.style.backgroundPosition="-32px "+encVal+"px";
    23.     var input=document.createElement("input");
    24.     input.type="radio";
    25.     input.name="essid";
    26.     input.value=ap.essid;
    27.     if (currAp==ap.essid) input.checked="1";
    28.     input.id="opt-"+ap.essid;
    29.     var label=document.createElement("label");
    30.     label.htmlFor="opt-"+ap.essid;
    31.     label.textContent=ap.essid;
    32.     div.appendChild(input);
    33.     div.appendChild(rssi);
    34.     div.appendChild(encrypt);
    35.     div.appendChild(label);
    36.     return div;
    37. }
    38.  
    39. function getSelectedEssid() {
    40.     var e=document.forms.wifiform.elements;
    41.     for (var i=0; i<e.length; i++) {
    42.         if (e[i].type=="radio" && e[i].checked) return e[i].value;
    43.     }
    44.     return currAp;
    45. }
    46.  
    47.  
    48. function scanAPs() {
    49.     xhr.open("GET", "wifiscan.cgi");
    50.     xhr.onreadystatechange=function() {
    51.         if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
    52.             var data=JSON.parse(xhr.responseText);
    53.             currAp=getSelectedEssid();
    54.             if (data.result.inProgress=="0" && data.result.APs.length>1) {
    55.                 $("#aps").innerHTML="";
    56.                 for (var i=0; i<data.result.APs.length; i++) {
    57.                     if (data.result.APs[i].essid=="" && data.result.APs[i].rssi==0) continue;
    58.                     $("#aps").appendChild(createInputForAp(data.result.APs[i]));
    59.                 }
    60.                 window.setTimeout(scanAPs, 20000);
    61.             } else {
    62.                 window.setTimeout(scanAPs, 1000);
    63.             }
    64.         }
    65.     }
    66.     xhr.send();
    67. }
    68.  
    69.  
    70. window.onload=function(e) {
    71.     scanAPs();
    72. };
    73. </script>
    74. </head>
    75. <body>
    76. <div id="main">
    77. <p>
    78. Current WiFi mode: %WiFiMode%
    79. </p>
    80. <p>
    81. Note: %WiFiapwarn%
    82. </p>
    83. <form name="wifiform" action="connect.cgi" method="post">
    84. <p>
    85. To connect to a WiFi network, please select one of the detected networks...<br>
    86. <div id="aps">Scanning...</div>
    87. <br>
    88. WiFi password, if applicable: <br />
    89. <input type="text" name="passwd" val="%WiFiPasswd%"> <br />
    90. <input type="submit" name="connect" value="Connect!">
    91. </p>
    92. </div>
    93. </body>
    94. </html>
    95.  

    А вот что видно в браузере
    реальный вид (раскрыть)


    Код (Text):
    1. <html><head>
    2. <meta http-equiv="content-type" content="text/html; charset=windows-1251"><title>WiFi connection</title>
    3. <link rel="stylesheet" type="text/css" href="WiFi%20connection_files/style.css">
    4. <script type="text/javascript" src="WiFi%20connection_files/140medley.js"></script>
    5. <script type="text/javascript">
    6.  
    7. var xhr=j();
    8. var currAp="Power AP";
    9.  
    10. function createInputForAp(ap) {
    11.     if (ap.essid=="" && ap.rssi==0) return;
    12.     var div=document.createElement("div");
    13.     div.id="apdiv";
    14.     var rssi=document.createElement("div");
    15.     var rssiVal=-Math.floor(ap.rssi/51)*32;
    16.     rssi.className="icon";
    17.     rssi.style.backgroundPosition="0px "+rssiVal+"px";
    18.     var encrypt=document.createElement("div");
    19.     var encVal="-64"; //assume wpa/wpa2
    20.     if (ap.enc=="0") encVal="0"; //open
    21.     if (ap.enc=="1") encVal="-32"; //wep
    22.     encrypt.className="icon";
    23.     encrypt.style.backgroundPosition="-32px "+encVal+"px";
    24.     var input=document.createElement("input");
    25.     input.type="radio";
    26.     input.name="essid";
    27.     input.value=ap.essid;
    28.     if (currAp==ap.essid) input.checked="1";
    29.     input.id="opt-"+ap.essid;
    30.     var label=document.createElement("label");
    31.     label.htmlFor="opt-"+ap.essid;
    32.     label.textContent=ap.essid;
    33.     div.appendChild(input);
    34.     div.appendChild(rssi);
    35.     div.appendChild(encrypt);
    36.     div.appendChild(label);
    37.     return div;
    38. }
    39.  
    40. function getSelectedEssid() {
    41.     var e=document.forms.wifiform.elements;
    42.     for (var i=0; i<e.length; i++) {
    43.         if (e[i].type=="radio" && e[i].checked) return e[i].value;
    44.     }
    45.     return currAp;
    46. }
    47.  
    48.  
    49. function scanAPs() {
    50.     xhr.open("GET", "wifiscan.cgi");
    51.     xhr.onreadystatechange=function() {
    52.         if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
    53.             var data=JSON.parse(xhr.responseText);
    54.             currAp=getSelectedEssid();
    55.             if (data.result.inProgress=="0" && data.result.APs.length>1) {
    56.                 $("#aps").innerHTML="";
    57.                 for (var i=0; i<data.result.APs.length; i++) {
    58.                     if (data.result.APs[i].essid=="" && data.result.APs[i].rssi==0) continue;
    59.                     $("#aps").appendChild(createInputForAp(data.result.APs[i]));
    60.                 }
    61.                 window.setTimeout(scanAPs, 20000);
    62.             } else {
    63.                 window.setTimeout(scanAPs, 1000);
    64.             }
    65.         }
    66.     }
    67.     xhr.send();
    68. }
    69.  
    70.  
    71. window.onload=function(e) {
    72.     scanAPs();
    73. };
    74. </script>
    75. </head>
    76. <body>
    77. <div id="main">
    78. <p>
    79. Current WiFi mode: Client
    80. </p>
    81. <p>
    82. Note: Click <a href="http://192.168.137.238/wifi/setmode.cgi?mode=2">here</a> to go to standalone AP mode.
    83. </p>
    84. <form name="wifiform" action="connect.cgi" method="post">
    85. <p>
    86. To connect to a WiFi network, please select one of the detected networks...<br>
    87. </p><div id="aps"><div id="apdiv"><input name="essid" value="Guests" id="opt-Guests" type="radio"><div class="icon" style="background-position: 0px -96px;"></div><div class="icon" style="background-position: -32px 0px;"></div><label for="opt-Guests">Guests</label></div><div id="apdiv"><input name="essid" value="TEST-NPS" id="opt-TEST-NPS" type="radio"><div class="icon" style="background-position: 0px -96px;"></div><div class="icon" style="background-position: -32px -64px;"></div><label for="opt-TEST-NPS">TEST-NPS</label></div><div id="apdiv"><input name="essid" value="Guests" id="opt-Guests" type="radio"><div class="icon" style="background-position: 0px -96px;"></div><div class="icon" style="background-position: -32px 0px;"></div><label for="opt-Guests">Guests</label></div><div id="apdiv"><input name="essid" value="Power AP" id="opt-Power AP" checked="checked" type="radio"><div class="icon" style="background-position: 0px -128px;"></div><div class="icon" style="background-position: -32px -64px;"></div><label for="opt-Power AP">Power AP</label></div><div id="apdiv"><input name="essid" value="Guests" id="opt-Guests" type="radio"><div class="icon" style="background-position: 0px -96px;"></div><div class="icon" style="background-position: -32px 0px;"></div><label for="opt-Guests">Guests</label></div></div>
    88. <br>
    89. WiFi password, if applicable: <br>
    90. <input name="passwd" val="shall we dance" type="text"> <br>
    91. <input name="connect" value="Connect!" type="submit">
    92. <p></p>
    93. </form></div>
    94.  
    95.  
    96. br /&gt;
    97. <input name="connect" value="Connect!" type="submit">
    98. <p></p>
    99.  
    100.  
    101.  
    102. </body></html>


    артефакт появляется между </form></div> и </body></html> и имеет вид куска кода, а точнее его последних строк:


    br /&gt;
    <input name="connect" value="Connect!" type="submit">
    <p></p>
     
  4. Юрий Ботов

    Юрий Ботов Moderator Команда форума

    Сообщения:
    994
    Симпатии:
    169
    Так где HTTP заголовки то???

    В минимале они выглядят подобным образом:
    Код (Text):
    1. HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n
    а чтобы не тормозило надо еще и длину передаваемого файла указывать.

    Вот это почитайте: Что такое Http заголовки (Http headers). Общая теория.
     
  5. Kitaro

    Kitaro Новичок

    Сообщения:
    9
    Симпатии:
    1
    Я понял, Вы пытаетесь мне сказать, что esphttpd неправильно обрабатывает запросы
    Вот ответ сервера (раскрыть)

    Код (Text):
    1. HTTP/1.1 200 OK
    2. Server: esp8266-httpd/0.4
    3. Transfer-Encoding: chunked
    4. Content-Type: text/html

    Так я собственно о том же и спрашиваю, я могу переписать и вникнуть в библиотеку перефирии, но в стек HTTP я не влезу, в силу отсутствия нужных знаний, и переписать его я не смогу.
    Вот и спрашиваю, сталкивался ли кто с чем-то подобным и как лечил...
    версия esphttpd из UDK Текущая стабильная версия: 2.2.1 от 30.10.2016

    upd:
    а
    вот такую страницу (раскрыть)

    Код (Text):
    1. <html><head><title>Test</title>
    2. <!--<link rel="stylesheet" type="text/css" href="style.css">-->
    3. <!--<meta http-equiv="refresh" content="60" > 13.57-->
    4. <meta charset=UTF-8>
    5. <script type="text/javascript">
    6.     String.format = function() {
    7.     var s = arguments[0];
    8.     for (var i = 0; i < arguments.length - 1; i++) {
    9.     var reg = new RegExp("\\{" + i + "\\}", "gm");
    10.     s = s.replace(reg, arguments[i + 1]);
    11.     }
    12.     return s;
    13.     }
    14. function myFunction() {
    15.  
    16.     var t = document.getElementById("myRange").value;
    17.     var x = (t%60);
    18.     if ( x < 10 )
    19.         { x = "0" + x; }
    20.     var y = (t-x)/60;
    21.     if ( y < 10 )
    22.         { y = "0" + y; }
    23.     document.getElementById("demo").innerHTML = "" + y + ":" + x;
    24. }
    25. window.onload=function(e) {
    26.     myFunction()
    27.     };
    28. </script>
    29. </head>
    30. <body>
    31. <p> </p>
    32. <p> </p>
    33. <p> </p>
    34. <div id="main">
    35. <form method="post" action="led.cgi">
    36. <input type="submit" name="led" value="255">
    37. <input type="submit" name="led" value="0">
    38. </form>
    39. <input type="range" id="myRange" min="0" max="1440" step="5" value="540" onchange="myFunction()">
    40. <p id="demo"></p>
    41. </div>
    42. </body>
    43. </html>
    44.  


    вообще загружает
    наполовину :( (раскрыть)

    Код (Text):
    1. <html><head><title>Test</title>
    2. <!--<link rel="stylesheet" type="text/css" href="style.css">-->
    3. <!--<meta http-equiv="refresh" content="60" > 13.57-->
    4. <meta charset=UTF-8>
    5. <script type="text/javascript">
    6.     String.format = function() {
    7.     var s = arguments[0];
    8.     for (var i = 0; i < arguments.length - 1; i++) {
    9.     var reg = new RegExp("\\{" + i + "\\}", "gm");
    10.     s = s.replace(reg, arguments[i + 1]);
    11.     }
    12.     return s;
    13.     }
    14. function myFunction() {
    15.  
    16.     var t = document.getElementById("myRange").value;
    17.     var x = (t
     
    Последнее редактирование: 14 мар 2017
  6. Kitaro

    Kitaro Новичок

    Сообщения:
    9
    Симпатии:
    1
    Мдя... лучшее враг хорошего.
    Если после отладки страницы ее всю свернуть в одну строку, артефакты уходят... Но все таки хотелось бы знать, это все результат моих издевательств над кодом или это фича?
     
  7. Сергей_Ф

    Сергей_Ф Moderator Команда форума

    Сообщения:
    1.862
    Симпатии:
    208
    @Kitaro что то у меня подозрение, что ошибка где то у Вас в коде.
     
  8. Kitaro

    Kitaro Новичок

    Сообщения:
    9
    Симпатии:
    1
    ну, сами библиотеки esphttpd я не модифицировал.
    скомпили только что пример из UDK, там точно также есть артефакты на странице, скажем, мигания светодиодом, если взять эту страницу, что идет в примере и свернуть в строку - артефакты уходят.
    Я-то для себя нашел как исправить, просто интересно, никто с таким не сталкиваля что-ли, или просто не заморачивался?
     
  9. Sam_Arcanum

    Sam_Arcanum Новичок

    Сообщения:
    96
    Симпатии:
    0
    Взял библиотеку из примеров как и ты. и тот же косяк появился. странички у меня все появляются полностью. но последний закрывающий тэг есть всегда и везде.
    Причём эти артефакты появляются только на страницах файлов. А вот на страничке 404 этого безобразия нет.
     
    Последнее редактирование: 24 мар 2017
  10. Sam_Arcanum

    Sam_Arcanum Новичок

    Сообщения:
    96
    Симпатии:
    0
    Решилось!
    в начале каждого файла html надо добавить строку
    <!DOCTYPE html>
    и никаких артефактов!
     
  11. Kirill_ow

    Kirill_ow Новичок

    Сообщения:
    1
    Симпатии:
    0
    Ошибка в программе которая собирает файлы для файловой системы . Она вместо 2 символов переноса каретки ставит 1, реальный размер файла уменьшается на количество строк, а в заголовке программа ставит исходный размер. Можете открыть прошивку и html например far-ом и сравнить.
    Я написал свою простенькую программу на C# которая, делает бинарник.
    Может есть текстовый редактор, который делает 1 символ в конце строки...
     

Поделиться этой страницей