ESP32-C3 OTA update

Post Reply
claudea2
Posts: 7
Joined: Tue Apr 06, 2021 8:42 pm

ESP32-C3 OTA update

Postby claudea2 » Sun Feb 27, 2022 8:44 pm

Hello,
has anyone an Arduino sketch that performs Over-the-Air update of an ESP32-C3?
I have tried most examples and have not been able to make them work.

Thanks
Top
claudea2
Posts: 7
Joined: Tue Apr 06, 2021 8:42 pm

Re: ESP32-C3 OTA update

Postby claudea2 » Sun Feb 27, 2022 10:05 pm

I got OTAWebUpdater to work. I must of done something wrong when I first tried it.
I modified it to make the form nicer, see bolow:

Code: Select all


const char* loginIndex =


 "<!DOCTYPE html> <html>  <head><meta name=  'viewport  ' content=  'width=device-width, initial-scale=1.0, user-scalable=no  '>  "
 "<title>ESP WiFi Manager</title>   <style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}"
 "body{margin-top: 50px;} h1 {color: #444444;margin: 30px auto 30px;}   h3 {color: #ffffff;margin-bottom: 50px;}   label{display:inline-block;width: 160px;text-align: center;font-size: 1.5rem; font-weight: bold;color: #ffffff;}"
"form{margin: 0 auto;width: 360px;padding: 1em;border: 1px solid #CCC;border-radius: 1em; background-color: #077c9f;}    input {margin: 0.5em;font-size: 1.5rem; } "
 " .styled {    border: 0;    line-height: 2.5;    padding: 0 20px;    font-size: 1.5rem;    text-align: center;    color: #fff;    text-shadow: 1px 1px 1px #000; "
 "  border-radius: 10px;    background-color: rgba(220, 0, 0, 1);    background-image: linear-gradient(to top left,  rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, "
 "  rgba(0, 0, 0, 0));    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),   inset -2px -2px 3px rgba(0, 0, 0, .6);.styled:hover {   background-color: rgba(255, 0, 0, 1);} "
".styled:active {    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);}  </style>"  
" <meta charset=  'UTF-8  '>    </head>   <body>   <h1>Welcome to ADC1 Firmware Update</h1>    <h1>Login Page</h1> " 
"   <form name = 'loginForm' method='get' action='setting'> <div><label>Username</label> <input type ='text' name= 'userid' length= 32></div>"  
"  <div><label>Password </label> <input type = 'Password' name=  'pwd'  length= 32></div>  "
" <h3>Please Double Check Before Saving</h3>   "
"<button class= 'favorite styled ' type= 'submit' onclick='check(this.form)' value='Login'> SUBMIT</button> </form> " 

"<script>"
    "function check(form)"
    "{"
    "if(form.userid.value=='admin' && form.pwd.value=='admin')"
    "{"
    "window.open('/serverIndex')"
    "}"
    "else"
    "{"
    " alert('Error Password or Username')/*displays error message*/"
    "}"
    "}"
"</script>"
" </body>  </html> ";
Give it a try.
If you know html and want to test pages try this link: https://www.w3schools.com/tryit/

All the best
Top
Post Reply

Return to “General Discussion”

Who is online

Users browsing this forum: Google [Bot] and 351 guests