bs editor

package.json

@@ -52,6 +52,7 @@
   "homepage": "https://github.com/akaJes/marlin-config#readme",
   "dependencies": {
     "bootstrap": "4.0.0-alpha.6",
+    "cropper": "^3.0.0-rc.2",
     "express": "^4.15.2",
     "font-awesome": "^4.7.0",
     "formidable": "^1.1.1",

static/index.html

@@ -17,6 +17,8 @@
     <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="libs/socket.io-client/dist/socket.io.js"></script>
     <script src="js/jquery.ba-throttle-debounce.js"></script>
+    <link  href="libs/cropper/dist/cropper.css" rel="stylesheet">
+    <script src="libs/cropper/dist/cropper.js"></script>
     <link href="css/toggle.css" rel="stylesheet">
     <link href="libs/font-awesome/css/font-awesome.css" rel="stylesheet"> <!-- rework to svg-->
     <link href="css/spinner.css" rel="stylesheet">

static/snippets.js

@@ -43,3 +43,66 @@ function drawBootscreen(canvas,screen,size){
         }
     }
 }
+function imgReader(file,img,canv){
+  var destCtx = canv[0].getContext('2d');
+  Object.assign(canv[0],{width:5*128,height:5*64});
+  destCtx.scale(5, 5);
+  destCtx.imageSmoothingEnabled = false;
+  file.on('change', function (evt) {
+    var tgt = evt.target || window.event.srcElement,
+        files = tgt.files;
+    // FileReader support
+    if (FileReader && files && files.length) {
+        var fr = new FileReader();
+        fr.onload = function () {
+            img.attr('src',fr.result);
+            img.cropper('replace', fr.result);
+        }
+        fr.readAsDataURL(files[0]);
+    }
+  })
+  var cropDefs={
+        movable: false,
+        zoomable: false,
+        rotatable: false,
+        scalable: false,
+        aspectRatio: 2,
+        minCropBoxWidth:10,
+        maxCropBoxWidth:10,
+        viewMode:1,
+      };
+  img.cropper(cropDefs);
+  img.on('aspect',function(ev,aspect){
+    cropDefs.aspectRatio = aspect;
+    img.cropper('destroy').cropper(cropDefs);
+  });
+  img.on('crop',function(){
+    var sel=img.cropper('getData');
+    var canvas=cropImage(img,sel.x,sel.y,sel.width,sel.height,128,64);
+    toBW(canvas);
+    var ctx = canvas.getContext("2d");
+    var destCtx = canv[0].getContext('2d');
+    destCtx.drawImage(canvas, 0, 0);
+  })
+}
+function cropImage(img,x,y,w,h,fw,fh){
+  var cv=$('<canvas>')[0];
+  cv.width=w;
+  cv.height=h;
+  var ctx=cv.getContext('2d');
+  var aw=w/fw,ah=h/fh,a=Math.min(aw,ah);
+  ctx.drawImage(img[0],x,y,w,h,0,0,Math.floor(w/a),Math.floor(h/a));
+  return cv;
+}
+function toBW(canvas){
+  var ctx = canvas.getContext("2d");
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+}

views/snippets/bs-custom.html

@@ -0,0 +1,64 @@
+<title>Custom marlin bootscreen</title>
+<style>
+.bs-custom .uploaded{
+  max-width:640px;
+  max-height:320px;
+}
+</style>
+<div style="text-align:center" class="bs-custom">
+  <div class="form-group row">
+    <div class="col-md-12">Maximal allowed image can be placed on screen 128x64</div>
+  </div>
+            <div class="form-group row">
+              <div class="col-md-3">
+               <div class="input-group spinner">
+                  <input type="text" name="bsWidth" value="128" class="form-control change">
+                  <div class="input-group-btn-vertical">
+                    <button class="btn btn-secondary fa fa-caret-up" type="button"></button>
+                    <button class="btn btn-secondary fa fa-caret-down" type="button"></button>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-1">X</div>
+              <div class="col-md-3">
+               <div class="input-group spinner">
+                  <input type="text" name="bsHeight" value="64" class="form-control change">
+                  <div class="input-group-btn-vertical">
+                    <button class="btn btn-secondary fa fa-caret-up" type="button"></button>
+                    <button class="btn btn-secondary fa fa-caret-down" type="button"></button>
+                  </div>
+                </div>
+              </div>
+    <div class="col-md-4">
+      <label class="custom-file">
+        <input type="file" class="file custom-file-input">
+        <span class="custom-file-control"></span>
+      </label>
+    </div>
+            </div>
+  <div class="row form-group mx-auto">
+    <canvas></canvas>
+  </div>
+  <div class="row form-group">
+    <img class="uploaded"></img>
+  </div>
+</div>
+<script>
+$(function(){
+  var base=$('.bs-custom');
+  var img=base.find('.uploaded')
+  imgReader(base.find('.file'),img,base.find('canvas'));
+  bindSpinner(base);
+  var inps=base.find('.spinner input');
+  inps.on('change',function(){
+    img.trigger('aspect',inps.eq(0).val()/inps.eq(1).val())
+  })
+  $.ajax('/bs/custom')
+//  .fail(function(){ base.empty().text('NOT FOUND') })
+  .then(function(screen){
+    base.find('p span').text(screen.width+'x'+screen.height);
+    screen.data=eval('['+screen.data+']');
+    drawBootscreen(base.find('canvas')[0],screen,10);
+  })
+});
+</script>