AyncElegantOTA 라이브러리는 '우아한' 인터페이스를 사용하여 프로젝트에 WebOTA를 쉽게 추가할 수 있는 방법입니다.
페이스북의 최근 토론은 'AsyncElegantOTA를 어떻게 수정할 수 있습니까?'에 관한 것이었습니다.
물론 JavaScript 및/또는 HTML에 대해 알고 있다면 그렇게 어렵지는 않지만 라이브러리 파일에 뛰어든 사람은 곧 많은 부분이 암호화된 것처럼 보이는 것을 알게 될 것입니다. , 그러나 걸릴 수 있습니다.
왜 AsyncElegantOTA 라이브러리를 변경하고 싶은지, 기본 ESP8266HTTPUpdateServer 라이브러리를 사용하고 원하는 대로 수정하면 안 되는 이유를 스스로에게 물어보는 것은 가치가 있습니다. 암호화된 파일을 해독할 필요가 없습니다. C:\Users\<name>\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.7.3\libraries\ESP8266HTTPUpdateServer.src에서 해당 라이브러리를 찾을 수 있습니다. 암호 보호를 포함하고 좀 더 멋져 보이도록 이 라이브러리를 수정 한 좋은 예가 있습니다.
그러나 정말로 AsyncElegantOTA 라이브러리를 다루고 싶다면 다음과 같이 하십시오.
AsyncElegantOTA 파일을 설치한 위치로 이동하여 elegantWebpage.h 파일을 엽니다. 다음과 같습니다.
우리가 관심 있는 부분은 de PROGMEM 콘텐츠이지만 여전히 인코딩되어 있는 한 아무 것도 할 수 없습니다. 디코딩하려면 대괄호 없이 엔터티의 PROGMEM 콘텐츠를 복사합니다. 사실 사이에 쉼표가 있는 숫자만
그런 다음 Cyberchef 웹페이지 로 이동 하여 PROGMEM 콘텐츠를 입력 필드에 붙여넣습니다. 입력 필드에서 2개의 디코딩 작업을 수행해야 합니다.
첫째: 작업에서 "10진수에서"('데이터 형식' 제목 아래)를 선택하고 두 번 클릭하여 "레시피" 아래로 이동하고 구분 기호로 '쉼표'를 선택합니다. (내가 준 링크를 따라가면 두 작업이 이미 추가되어 있어야 함)
그러나 두 번째 작업('Unzip')을 추가하기 전에 먼저 확인을 수행합니다. 'Output' 헤더를 살펴봅니다. 3개의 매개변수를 찾을 수 있습니다.
'Output' 제목에서 'length'를 확인하면 elegantWebpage.h에 언급된 ELEGANT_HTML_SIZE 상수와 같은 숫자임을 알 수 있습니다. 라이브러리 버전 2.2.5를 사용하는 경우 해당 숫자는 "53715"일 가능성이 높습니다. 나중에 새 값 출력을 계산하기 위해 메모가 필요하기 때문에 해당 숫자가 언제/어디서 나타났는지(예: '인코딩된 섹션의 10진수 변환에서' 이후) 메모해 두세요. '
우리가 추가해야 하는 두 번째 디코딩은 다음과 같습니다. 압축 해제. 따라서 작업에서 이제 "Gunzip"('압축' 제목 아래에서 찾으십시오)을 선택하면 출력 파일에 HTML 구조가 나타나야 합니다.
HTML을 스크롤하면 HTML 코드에 JavaScript가 포함되어 있음을 알 수 있습니다. 전체적으로(HTML 및 JS) 수정할 수 있는 코드입니다. 정확히 수정하려는 것은 귀하에게 달려 있습니다.
HTML /Javascript 파일을 수정한 후 이를 라이브러리에 다시 포함할 수 있는 몇 가지 방법이 있습니다. 암호화되지 않은 상태로 두고 다음과 같이 elegantWebpage.h 파일에 '원시 리터럴'로 다시 넣을 수 있습니다.
const char ELEGANT_HTML[] PROGMEM = R"---(
<html>
<head>
...
)---";
그러나 AsyncElegantOTA.h 파일도 변경해야 합니다.
위 줄은 다음과 같이 변경해야 합니다.
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", ELEGANT_HTML);"ELEGANT_HTML"은 이제 원시 리터럴에 지정한 이름입니다. HTML 파일을 다시 인코딩하는 것이 더 간단하다는 것을 알았기 때문에 이것은 내가 따랐던 방법이 아닙니다. 이를 위해 Cyberchef 웹 사이트로 돌아가지만 이제 HTML 파일을 입력 필드에 붙여넣습니다. 이전 두 작업을 제거하거나 일시 중지하고 이제 다음과 같이 "Gzip" 및 "To Decimal"을 추가합니다.
올바르게 수행했다면 이제 출력 필드에 새로운 십진수 코드가 표시되어야 합니다. 그것을 복사하여 'elegantWebpage.h' 파일의 이전 PROGMEM 콘텐츠 위에 붙여넣으십시오.
이제 거의 끝났습니다. elegantWebpage.h 파일에서 크기 상수를 업데이트해야 합니다.
const uint32_t ELEGANT_HTML_SIZE = 53715;음, 파일 길이를 찾을 수 있는 위치를 미리 메모해 두라고 요청한 것을 기억하십니까?
수정하고 다시 암호화한 파일의 길이를 찾아야 합니다
. 출력 필드에서 "altered and recrypted to decimal again" 파일을 복사하여 elegantWebpage.h 파일에 붙여넣은 후 이제 입력 필드에 붙여넣습니다. 다시 Cyberchef 웹사이트. 선택한 유일한 작업이 '쉼표'가 구분 기호로 설정된 "십진수에서"인지 확인하십시오. 이제 출력 필드 헤더에 새 크기가 표시됩니다. 이 크기를 사용하여 ELEGANT_HTML_SIZE 상수를 업데이트합니다.
이제 수정이 작동해야 합니다.