ABC80
/
max80


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							#ifndef __ABC80_WEBCONTENT_H
#define __ABC80_WEBCONTENT_H
#include <ArduinoOTA.h>
const char rgbtohdmi[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>MAX80 keyboard controller</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <style>
  html {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
  }
  h1 {
    font-size: 1.8rem;
    color: white;
  }
  h2{
    font-size: 1.5rem;
    font-weight: bold;
    color: #143642;
  }
  .topnav {
    overflow: hidden;
    background-color: #143642;
  }
  body {
    margin: 0;
  }
  .content {
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
  }
  .card {
    background-color: #F8F7F9;;
    box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
    padding-top:10px;
    padding-bottom:20px;
  }
  .button {
    padding: 15px 50px;
    width: 400px;
    font-size: 24px;
    text-align: center;
    outline: none;
    color: #fff;
    background-color: #0f8b8d;
    border: none;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
   }
   /*.button:hover {background-color: #0f8b8d}*/
   .button:active {
     background-color: #0f8b8d;
     box-shadow: 2 2px #CDCDCD;
     transform: translateY(2px);
   }
   .state {
     font-size: 1.5rem;
     color:#8c8c8c;
     font-weight: bold;
   }
  </style>
<title>ABC800 Keyboard RGBtoHDMI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
</head>
<body>
  <div class="topnav">
    <h1>ABC800 Keyboard RGBtoHDMI</h1>
  </div>
  <div class="content">
    <div class="card">
      <h2>RGBtoHDMI</h2>
      <p><button id="button_menu" class="button">Menu</button></p>
      <p><button id="button_up" class="button">Up / Genlock</button></p>
      <p><button id="button_down" class="button">Down / Screen Capture</button></p>
    </div>
  </div>
<script>
  var gateway = `ws://${window.location.hostname}/ws`;
  var websocket;
  window.addEventListener('load', onLoad);
  function initWebSocket() {
    console.log('Trying to open a WebSocket connection...');
    websocket = new WebSocket(gateway);
    websocket.onopen    = onOpen;
    websocket.onclose   = onClose;
    websocket.onmessage = onMessage; // <-- add this line
  }
  function onOpen(event) {
    console.log('Connection opened');
  }
  function onClose(event) {
    console.log('Connection closed');
    setTimeout(initWebSocket, 2000);
  }
  function onMessage(event) {
    var state;
    if (event.data == "1"){
      state = "ON";
    }
    else{
      state = "OFF";
    }
    document.getElementById('state').innerHTML = state;
  }
  function onLoad(event) {
    initWebSocket();
    initButton();
  }
  function initButton() {
    document.getElementById('button_menu').addEventListener('click', button_menu);
    document.getElementById('button_up').addEventListener('click', button_up);
    document.getElementById('button_down').addEventListener('click', button_down);
  }
  function button_menu(){
    websocket.send('button_menu');
  }
  function button_up(){
    websocket.send('button_up');
  }
  function button_down(){
    websocket.send('button_down');
  }
</script>
</body>
</html>)rawliteral";
const char fbuttons_html[] PROGMEM = R"rawliteral(<!DOCTYPE HTML><html><head>
  <title>KEY80 Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/fbuttonsget">
    F1:  <textarea name="input1" rows="15" cols="60"></textarea>
    <input type="submit" value="Submit">
  </form><br>
  <form action="/fbuttonsget">
    F2:  <textarea name="input2" rows="15" cols="60"></textarea>
    <input type="submit" value="Submit">
  </form><br>
    <form action="/fbuttonsget">
    F3:  <textarea name="input3" rows="15" cols="60"></textarea>
    <input type="submit" value="Submit">
  </form><br>
</body></html>)rawliteral";
#endif