Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- String indexHTML = R"=====(
- <!DOCTYPE html>
- <html lang="en" dir="ltr">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title>8x8 Painter</title>
- <style>
- html,body{
- font:18px Helvetica,Arial,sans-serif;
- padding:50;
- margin:50;
- background-color:#aaa;
- }
- #flexHolder{
- display:flex;
- }
- #output{
- padding:20px;
- border:4px solid black;
- background-color:white;
- }
- #allTheseLEDs{
- padding:0;
- margin:0;
- border:4px solid black;
- margin-right:50px;
- /* display:flex; */
- width:min-content;
- }
- .oneRow{
- flex-direction:row;
- display:flex;
- }
- .butHolder{
- width:60px;
- height:60px;
- border:1px solid black;
- background-color:#d0d0d0;
- display:inline-table;
- }
- .oneDot{
- font-size:300%;
- border:none;
- background-color:transparent;
- padding:0;
- margin:0;
- line-height:90%;
- width:100%;
- height:100%;
- }
- .dotON{
- color:#ff2525;
- }
- .dotOFF{
- color:#404040;
- }
- #copyRight{}
- #copyRight a{
- font-size:70%;
- color:#666;
- text-decoration:none;
- border:none;
- }
- #copyRight a:hover{
- text-decoration:none;
- border:none;
- color:black;
- }
- </style>
- </head>
- <body>
- <h1>8x8 Painter</h1>
- <div id="flexHolder">
- <div id="allTheseLEDs"></div>
- <div id="output"><span id="stage"></span></div>
- </div>
- <div id="copyRight">
- <a href="https://detlefamend.de" target="_blank">Detlef Amend 2020</a>
- </div>
- <script>
- var line=1;
- var divvLine;
- var Url='http://' + location.hostname + '/'
- window.onload=bootup;
- function AjaxInit(){
- AJ=new XMLHttpRequest();
- // AJ.onreadystatechange=AJReader;
- }
- function calcTheOutput(){
- var allDotsDatStream='';
- var stageString="Data-String:<br/><br/>const unsigned uint8_t PROGMEM img[]={<br/>";
- for(t=1;t<=8;t++){
- stageString+='B';
- for(k=1;k<=8;k++){
- var thisDot=document.getElementById(t.toString()+k.toString());
- if(thisDot.classList.contains("dotOFF")){
- stageString+='0';
- allDotsDatStream+='0';
- }else{
- stageString+='1';
- allDotsDatStream+='1';
- }
- }
- if(t==8){
- stageString+="<br/>";
- }else{
- stageString+=",<br/>";
- }
- }
- stageString+="};";
- document.getElementById("stage").innerHTML=stageString;
- AJ.open("GET",Url+"?data="+allDotsDatStream,true);
- AJ.send();
- }
- function addEvent(element,evnt,funct){
- if(element.attachEvent)
- return element.attachEvent('on'+evnt,funct);
- else
- return element.addEventListener(evnt,funct,false);
- }
- function toggleThisDot(){
- var whatBut=this.getAttribute('id');
- console.log(whatBut);
- if(this.classList.contains("dotOFF")){
- this.classList.remove("dotOFF");
- this.classList.add("dotON");
- }else{
- this.classList.remove("dotON");
- this.classList.add("dotOFF");
- }
- calcTheOutput();
- }
- function draw8Buttons(){
- for(t=1;t<=8;t++){
- var holderDiv=document.createElement("DIV");
- holderDiv.classList.add("butHolder");
- holderDiv.id='holdOneBut'+line+t.toString();
- document.getElementById(divvLine).appendChild(holderDiv);
- var but=document.createElement("BUTTON");
- but.id=line+t.toString();
- but.classList.add("oneDot");
- but.classList.add("dotOFF");
- but.innerHTML='●';
- holderDiv.appendChild(but);
- addEvent(but,'click',toggleThisDot);
- }
- }
- function drawGrid(){
- for(line=1;line<=8;line++){
- var divv=document.createElement("DIV");
- divvLine='line'+line.toString();
- divv.id='line'+line.toString();
- divv.classList.add("oneRow");
- allTheseLEDs.appendChild(divv);
- draw8Buttons();
- }
- }
- function bootup(){
- drawGrid();
- AjaxInit();
- calcTheOutput();
- }
- </script>
- </body>
- </html>
- )=====";
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement