Skip to content

Commit

Permalink
🐛 Now showing message when vMix disconnects from Stick; Web UI now us…
Browse files Browse the repository at this point in the history 
…es fetch; Added Reconnect logic to Web UI;
  • Loading branch information
@guido-visser
guido-visser committed Sep 5, 2020
1 parent 0f90afb commit b060a42
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 12 deletions.
3 changes: 2 additions & 1 deletion src/a_GLOBAL/c_MAIN.ino
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ void loop()
}

if(millis() > lastBattCheck + 1000){
if(screen == 0){
if(screen == 0 && client.available()){
lastBattCheck = millis();
renderBatteryLevel();
}
Expand All @@ -143,6 +143,7 @@ void loop()
{
client.stop();
lastCheck = millis();
noConnectionTovMix();
}
}

Expand Down
2 changes: 2 additions & 0 deletions src/a_GLOBAL/d_VMIX.ino
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,4 +178,6 @@ void noConnectionTovMix(){
M5.Lcd.println();
M5.Lcd.print("http://");
M5.Lcd.println(WiFi.localIP());
M5.Lcd.println();
M5.Lcd.println("Press BTN39 to reconnect");
}
11 changes: 8 additions & 3 deletions src/a_GLOBAL/f_WEBSERVER.ino
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ String HEADER = "<!DOCTYPE html>\
<meta charset='UTF-8'>\
<meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>\
<title>vMix M5Stick-C Tally</title>\
<link rel='stylesheet' type='text/css' href='style.css'>\
<style>\
@import url(https://fonts.googleapis.com/css2?family=Open+Sans&display=swap);.wrapper,input[type=text],input[type=number],input[type=submit],select{width:100%;box-sizing:border-box}body,html{background:#2b2b2b;color:#eee;padding:0;margin:0;font-family:'Open Sans',verdana,sans-serif}.wrapper{padding:10px}.wrapper h1{text-align:center}input[type=text],input[type=number]{margin-bottom:10px}input,select{background-color:#6d6d6d;color:#f0f0f0;border:1px solid #000;font-size:18px;height:35px;padding:0 5px}input[type=submit]{height:50px;margin:10px auto}@media screen and (min-width:600px){.wrapper{width:600px;margin:0 auto}}\
</style>\
Expand All @@ -22,7 +21,7 @@ void handle_root()
String tally = (String)TALLY_NR;
String bright = (String)BRIGHTNESS;
String HTML = HEADER;
HTML += "<div class=wrapper data-theme=light><h1>vMix M5Stack Tally Settings</h1><form action=/save id=frmData method=post><div>SSID:<br><input id=ssid type=text value='" + (String)WIFI_SSID + "'name=ssid></div><div>Password:<br><input id=pwd type=text value='" + (String)WIFI_PASS + "'name=pwd></div><div>vMix IP Address:<br><input id=vmixip type=text value='" + (String)VMIX_IP + "'name=vmixip></div><div>Main Tally Number:<br><input id=tally_num type=number value='" + tally + "'name=tally_num max=1000 min=1></div><div>Multi Tally (comma separated):<br><input id=m_tally type=text value='" + (String)M_TALLY + "'name=m_tally></div><div>Brightness:<br><select id=drpBright name=bright><option value=7>0%<option value=8>20%<option value=9>40%<option value=10>60%<option value=11>80%<option value=12>100%</select></div><input id=btnSave type=submit value=SAVE class='btn btn-primary'></form></div><script>const btnSave=document.querySelector('#btnSave');const drpBright=document.querySelector('#drpBright');drpBright.value='" + bright + "';btnSave.addEventListener('click',function(e){e.preventDefault();const ssid=document.querySelector('#ssid').value;const pwd=document.querySelector('#pwd').value;const vmixip=document.querySelector('#vmixip').value;const m_tally=document.querySelector('#m_tally').value;const frmData=document.querySelector('#frmData');document.querySelector('#ssid').value=ssid.trim();document.querySelector('#pwd').value=pwd.trim();document.querySelector('#vmixip').value=vmixip.trim();document.querySelector('#m_tally').value=m_tally.trim().replace(/[^0-9,]+/g,'');frmData.submit()})</script>";
HTML += "<div class=wrapper data-theme=light><h1>vMix M5Stack Tally Settings</h1><form action=/save id=frmData method=post onsubmit='return false;'><div>SSID:<br><input type=text value='" + (String)WIFI_SSID + "'id=ssid name=ssid></div><div>Password:<br><input type=text value='" + (String)WIFI_PASS + "'id=pwd name=pwd></div><div>vMix IP Address:<br><input type=text value='" + (String)VMIX_IP + "'id=vmixip name=vmixip></div><div>Main Tally Number:<br><input type=number value='" + tally + "'id=tally_num name=tally_num max=1000 min=1></div><div>Multi Input (comma separated):<br><input type=text value='" + (String)M_TALLY + "'id=m_tally name=m_tally></div><div>Brightness:<br><select id=drpBright name=bright><option value=7>0%<option value=8>20%<option value=9>40%<option value=10>60%<option value=11>80%<option value=12>100%</select></div><input type=submit value=SAVE id=btnSave class='btn btn-primary'></form><h2>Reconnect to vMix</h2><form action=/reconnect id=frmReconnect method=post onsubmit='return false;'><input type=submit value=RECONNECT id=btnReconnect></form></div><script>const btnSave=document.querySelector('#btnSave'),btnReconnect=document.querySelector('#btnReconnect'),drpBright=document.querySelector('#drpBright');drpBright.value='" + bright + "',btnSave.addEventListener('click',async function(e){e.preventDefault();const t=document.querySelector('#ssid').value,n=document.querySelector('#pwd').value,r=document.querySelector('#vmixip').value,a=document.querySelector('#m_tally').value,c=(document.querySelector('#frmData'),document.querySelector('#tally_num').value);let u=new FormData;u.append('ssid',t.trim()),u.append('pwd',n.trim()),u.append('vmixip',r.trim()),u.append('m_tally',a.trim().replace(/[^0-9,]+/g,'')),u.append('tally_num',c),btnSave.setAttribute('disabled',''),200===(await fetch('/save',{'method':'POST','cache':'no-cache','referrerPolicy':'no-referrer','body':u})).status&&(btnSave.value='SETTINGS SAVED!',await setTimeout(()=>{btnSave.value='SAVE'},3e3)),btnSave.removeAttribute('disabled')}),btnReconnect.addEventListener('click',function(e){e.preventDefault(),fetch('/reconnect')});</script>";
HTML += FOOTER;

server.send(200, "text/html", HTML);
Expand All @@ -43,7 +42,7 @@ void handle_save()
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
message += " direct:" + server.arg("tally_num");
server.send(404, "text/plain", message);
server.send(200, "text/plain", message);
Serial.println(message);

String tally = server.arg("tally_num");
Expand Down Expand Up @@ -91,10 +90,16 @@ void handle_save()
start();
}

void handleReconnect(){
connectTovMix(false);
server.send(200, "text/plain", "success");
}

void startServer()
{
server.on("/", handle_root);
server.on("/save", handle_save);
server.on("/reconnect", handleReconnect);
server.begin();
Serial.println("HTTP server started");
}
40 changes: 32 additions & 8 deletions src/a_GLOBAL/webui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

<div class='wrapper' data-theme="light">
<h1>vMix M5Stack Tally Settings</h1>
<form action='/save' id='frmData' method='post'>
<form action='/save' id='frmData' method='post' onsubmit="return false;">
<div>
SSID:<br/>
<input type='text' id='ssid' name='ssid' value='" + (String)WIFI_SSID + "'>
Expand All @@ -66,7 +66,7 @@ <h1>vMix M5Stack Tally Settings</h1>
<input type='number' min='1' max='1000' id='tally_num' name='tally_num' value='" + tally + "'>
</div>
<div>
Multi Tally (comma separated):<br/>
Multi Input (comma separated):<br/>
<input type='text' id='m_tally' name='m_tally' value='" + (String)M_TALLY + "'>
</div>
<div>
Expand All @@ -82,23 +82,47 @@ <h1>vMix M5Stack Tally Settings</h1>
</div>
<input type='submit' value='SAVE' id='btnSave' class='btn btn-primary'>
</form>
<h2>Reconnect to vMix</h2>
<form onsubmit="return false;" action="/reconnect" id="frmReconnect" method="post">
<input type="submit" value="RECONNECT" id="btnReconnect" />
</form>
</div>
<script type='text/javascript'>
const btnSave = document.querySelector('#btnSave');
const btnReconnect = document.querySelector('#btnReconnect');
const drpBright = document.querySelector('#drpBright');
drpBright.value = '" + bright + "';
btnSave.addEventListener('click', function(e){
btnSave.addEventListener('click', async function(e){
e.preventDefault();
const ssid = document.querySelector('#ssid').value;
const pwd = document.querySelector('#pwd').value;
const vmixip = document.querySelector('#vmixip').value;
const m_tally = document.querySelector('#m_tally').value;
const frmData = document.querySelector('#frmData');
document.querySelector('#ssid').value = ssid.trim();
document.querySelector('#pwd').value = pwd.trim();
document.querySelector('#vmixip').value = vmixip.trim();
document.querySelector('#m_tally').value = m_tally.trim().replace(/[^0-9,]+/g, '');
frmData.submit();
const tally_num = document.querySelector('#tally_num').value;
let formData = new FormData();
formData.append('ssid', ssid.trim());
formData.append('pwd',pwd.trim());
formData.append('vmixip', vmixip.trim());
formData.append('m_tally', m_tally.trim().replace(/[^0-9,]+/g, ''));
formData.append('tally_num', tally_num);
btnSave.setAttribute('disabled', '');
const res = await fetch('/save', {
method: 'POST',
cache: 'no-cache',
referrerPolicy: 'no-referrer',
body: formData
});
if(res.status === 200){
btnSave.value = 'SETTINGS SAVED!';
await setTimeout(()=>{btnSave.value = 'SAVE';}, 3000);
}
btnSave.removeAttribute('disabled');
});

btnReconnect.addEventListener('click', function(e){
e.preventDefault();
fetch('/reconnect');
});
</script>
</body>
Expand Down

0 comments on commit b060a42

Please sign in to comment.