almost-fully-working

siowu · Jul 16, 2022 · 23d002c · 23d002c
1 parent addfb7e
commit 23d002c
Show file tree

Hide file tree

Showing 8 changed files with 920 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -1,20 +1,36 @@
 <!DOCTYPE html>
 <head>
-    <link rel="stylesheet" href="bulma.min.css">
+    <link rel="stylesheet" href="util/bulma.min.css">
     <script src="util/crc32.js"></script>
-    <script src="util/dom-to-image.min.js"></script>
-    <script src="script.js"></script>
+    <script src="util/html2canvas.min.js"></script>
+    <script src="util/marked.min.js"></script>
+    <link rel="stylesheet" href="util/simplemde.min.css">
+    <script src="util/simplemde.min.js"></script>
+    <!--Main script append at the end of body-->
 </head>
 <body>
-    <div class="container">
-        <p class="title">WebBLE with Paperang</p>
+    <div class="container" style="max-width: 50em;">
         <div class="block">
-            <button class="button" onclick="connect();">connect</button>
-            <button class="button" onclick="printText()">Print</button>
-            <button class="button" onclick="bitmapRender()">Render</button>
+            <p class="title">WebBLE with Paperang</p>
         </div>
         <div class="block">
-            <textarea class="textarea" id="inputtext"></textarea>
+            <button class="button" onclick="connect();">connect</button>
+            <button class="button" onclick="selfdiag()">Print Diagnostics</button>
+            <button class="button" onclick="textRender('renderoutput')">Print</button>
+        </div>
+
+
+        <div class="columns">
+            <div class="column">
+                <textarea id="editorarea"></textarea>
+            </div>
+
+        </div>
+
+        <div class="content">
+            <div id="renderoutput" style="display: none;"></div>
         </div>
     </div>
+
+    <script src="script.js"></script>
 </body>
diff --git a/script.js b/script.js
@@ -2,6 +2,22 @@
 var btservice;
 var sockchar;
 var notify;
+
+// some global variables:
+var widthbyte = 48; // p1 has 48 bytes per line. make this one variable in future.
+var binarizationInterval = 420; // Between 0 and 768.
+
+// editor settings
+var simplemde = new SimpleMDE({
+    element: document.getElementById("editorarea"),
+    spellChecker: false,
+    previewRender: (text) => {
+        let d = marked.parse(text);
+        return `<div class="content"> ${d} </div>`
+    }
+});
+
+
 /*
 Some useful facts about printers:
     service: 49535343-fe7d-4ae5-8fa9-9fafd205e455
@@ -25,21 +41,17 @@ async function connect() {
     notify.startNotifications().then(() => {
         notify.addEventListener('characteristicvaluechanged', (event) => {
             let value = event.target.value;
-            let a = [];
+            let a = new DataView(value)
             // Convert raw data bytes to hex values just for the sake of showing something.
             // In the "real" world, you'd use data.getUint8, data.getUint16 or even
             // TextDecoder to process raw data bytes.
-            for (let i = 0; i < value.byteLength; i++) {
-                a.push(('00' + value.getUint8(i).toString(16)).slice(-2));
-            }
-            console.log('Notify:' , a.join(' '));
+            console.log('Notify:' , a);
         })
     })
 }
 
 async function selfdiag() {
-    let cmdstr = Uint8Array.from([2, 27, 0, 1, 0, 0, 70, 137, 94, 158, 3]);
-    await sockchar.writeValue(cmdstr);
+    await sockchar.writeValue(genpack(27));
 }
 
 async function sendprint(data) {
@@ -55,7 +67,8 @@ async function sendprint(data) {
         }
         return ret;
     }
-    let packs = aslice(data, 500);
+    let maxbyte = (Math.floor(500/widthbyte)) * widthbyte;
+    let packs = aslice(data, maxbyte);
     console.log(packs)
     for (each in packs) {
         let m = await sockchar.writeValue(genpack(0, packs[each]));
@@ -64,22 +77,6 @@ async function sendprint(data) {
 }
 
 
-function randfill(n) {
-    let arr = Array(n);
-    for (let i = 0; i < n; i += 40) {
-        for (let j = 0; j < 40; j++) {
-            if (j % 2) {
-                arr[i + j] = 255;
-            } else {
-                arr[i + j] = 0;
-            }
-
-        }
-    }
-    return arr;
-}
-
-
 // --- JSDoc Enabled funcs
 
 /**
@@ -125,12 +122,65 @@ function genpack(cmd, data = [0], packetid = 0) {
 /*
 * Graphical rendering
 */
+async function textRender(elementid){
+    let out = document.getElementById(elementid);
+    out.innerHTML = marked.parse(simplemde.value());
+    await bitmapRender(elementid);
+    out.innerHTML = '';
+    /*
+    let node = document.createElement('div');
+    node.innerHTML = marked.parse(simplemde.value());
+    await bitmapRender(node);*/
+}
+async function bitmapRender(elementid){
+    let node = document.getElementById(elementid);
+    // canvas renderer: bindata is the bytearray.
+    let bindata; // this is goint to be the binary bytearray.
+    // in future swapping to another renderer is just rewrite this part.
+    // width is always (widthbyte * 8) bytes.
+    let canvas = await html2canvas(node, {
+        width: widthbyte * 4,
+        windowWidth: widthbyte * 4,
+        onclone: (cloned) => {
+            cloned.getElementById(elementid).style.display = 'block'
+        }
+    });
+    console.log(canvas);
+    bindata = canvas.getContext('2d').getImageData(0,0,canvas.width, canvas.height).data;
+    //document.body.appendChild(canvas);
+
+
+    // canvas render done, rest is good.
+
+    console.log(bindata);
+    // Get image binarized
+    let binarized = new Array();
+    for(let i=0; i<bindata.length;i+=4){
+        let curr = bindata[i] + bindata[i+1] + bindata[i+2];
+        if(curr < binarizationInterval){
+            curr = 0;
+        } else {
+            curr = 1;
+        }
+        binarized.push(curr);
+    }
+    console.log(binarized);
+    // Encode to bit by bit
+    let encoded = new Array();
+    for (let i=0; i<binarized.length; i+=8){
+        let t = 0;
+        for(let j=0; j<8; j++){
+            let n = binarized[i+j];
+            if(n == 1){ // now 1 is white 0 is black
+                t = t * 2;
+            } else {
+                t = t * 2 + 1;
+            }
+        }
+        encoded.push(t)
+    }
+    console.log(encoded);
 
-function bitmapRender(){
-    let node = document.getElementById("inputtext");
-    domtoimage.toPng(node, {width: 340}).then(function(dataUrl){
-        var img = new Image();
-        img.src = dataUrl;
-        document.body.appendChild(img);
-    })
+    // send to print
+    sendprint(encoded);
 }
diff --git a/bulma.min.css → util/bulma.min.css b/bulma.min.css → util/bulma.min.css