bootscreen editor

README.md

@@ -8,15 +8,17 @@ supported OS: Linux,Mac,Windows
 
 * automatically clone repository from github if you don't have it
 * instant changing of Configuration*.h files
-* filter only changed options overall and for each section
-* show help for options
+* allow to filter only changed options overall and for each section
+* show help for all options
 * show help for G-codes
 * show allowed options/gcodes depends your configuration
 * reset configuration changes
-* switch between releases (available after reset)
+* switch between releases and update git repository from github
 * **uploading your old configuration over current**
 * **compiling and uploading firmware** via PlatformIO
 * **access to all serial ports** using console manager (Linux/Mac with auto ports changing detection)
+* simple 3D tool for positioning printer head in console manager
+* **snippets** allow edit upload BootScreen, calculate a step values for various stepper motors
 * quick navigate with a right sided navigation bar
 * creating an issue on [Marlin github](https://github.com/MarlinFirmware/Marlin) with your configuration
 
@@ -28,7 +30,7 @@ in project used documentation from [MarlinDocumentation](https://github.com/Marl
 * [git](https://git-scm.com/downloads)
 * [PlatformIO](http://docs.platformio.org/en/latest/installation.html) (optional)
 ## Using
-after run - choose a folder with Marlin repo or an empty folder for cloning
+After run appears a File dialog and asks to open any empty folder (then will be cloning for last version of marlin from github) or folder with the Marlin git repository
 # Installation NPM
 [![npm version](https://badge.fury.io/js/marlin-conf.svg)](https://badge.fury.io/js/marlin-conf)
 
@@ -46,7 +48,7 @@ open terminal in an empty folder or in a folder with Marlin repository and type
 `mct` and confirm action
 
 # Preview
-![image](https://cloud.githubusercontent.com/assets/3035266/26492336/2934c98c-421c-11e7-8aab-3ddab57525f3.png)
+![image](https://user-images.githubusercontent.com/3035266/26917440-f626e258-4c36-11e7-9d1c-3ae199a497ee.png)
 
 ## hints
 * In clean/unchanged configuration you can change current release version

app/server.js

@@ -1,4 +1,5 @@
 var express = require('express');
+var bodyParser = require('body-parser');
 var path = require('path');
 var opn = require('opn');
 var mctool = require('./mc-tool');
@@ -28,6 +29,8 @@ if (serial_enabled)
 
 app.use('/', express.static(path.join(__dirname,'..', 'static')));
 app.use('/libs', express.static(path.join(__dirname,'..', 'node_modules')));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
 
 app.get('/tags', function (req, res) {
   git.Tags().then(data=>{
@@ -267,6 +270,16 @@ app.get('/bs/default', function (req, res) {
   .then(a=>res.send(a))
   .catch(e=>res.status(403).send(e))
 });
+app.post('/bs/custom', function (req, res) {
+  var name='_Bootscreen.h';
+  Promise
+  .resolve(path.join(__dirname,'..','views',name))
+  .then(file=>promisify(fs.readFile)(file,'utf8'))
+  .then(text=>text.replace(/{{([\w.]+)}}/g,(m,r)=>r.split('.').reduce((p,o)=>(p=p&&p[o],p),req.body)))
+  .then(file=>git.root().then(p=>promisify(fs.writeFile)(path.join(p,'Marlin',name),file)))
+  .then(a=>res.end('writed'))
+  .catch(e=>res.status(403).send(e))
+});
 app.get('/bs/custom', function (req, res) {
   git.root()
   .then(f=>path.join(f,'Marlin','_Bootscreen.h'))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marlin-conf",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "configuration tool for Marlin project",
   "main": "./index.js",
   "scripts": {
@@ -51,6 +51,7 @@
   },
   "homepage": "https://github.com/akaJes/marlin-config#readme",
   "dependencies": {
+    "body-parser": "^1.17.2",
     "bootstrap": "4.0.0-alpha.6",
     "cropper": "^3.0.0-rc.2",
     "express": "^4.15.2",

static/css/toggle.css

@@ -24,6 +24,7 @@
     display: block; overflow: hidden; cursor: pointer;
     border: 1px solid #999999; border-radius: 20px;
     margin-bottom:0;
+    text-align: left;
 }
 .onoffswitch-inner {
     display: block; width: 200%; margin-left: -100%;

static/index.html

@@ -307,7 +307,7 @@ <h4 class="modal-title" id="myModalLabel">Log</h4>
   </div>
   <div id="mct-alert" >
     <template class="_alert">
-    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <div class="alert alert-danger alert-dismissible fade show" role="alert" data-dismiss="alert" >
       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
@@ -316,7 +316,7 @@ <h4 class="alert-heading">Oh snap!</h4>
     </div>
     </template>
     <template class="_info">
-    <div class="alert alert-info alert-dismissible fade show" role="alert">
+    <div class="alert alert-info alert-dismissible fade show" role="alert" data-dismiss="alert" >
       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>

static/snippets.js

@@ -22,9 +22,15 @@ function readValues(inps){
     })
   return vals;
 }
+function setCanvasSize(canvas,width,height,scale){
+    Object.assign(canvas,{width:width*scale,height:height*scale});
+    var ctx = canvas.getContext("2d");
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.scale(scale,scale);
+    ctx.imageSmoothingEnabled = false;
+}
 function drawBootscreen(canvas,screen,size){
-    Object.assign(canvas,{width:screen.width*size,height:screen.height*size});
-
+    setCanvasSize(canvas,screen.width,screen.height,size);
     function reader(screen){
       var bit=0x80>>(screen.pos%8);
       var pixel=!!(screen.data[parseInt(screen.pos/8)]&bit);
@@ -37,24 +43,58 @@ function drawBootscreen(canvas,screen,size){
       for (var x=0;screen.width>x;x++)
         if (reader(screen)){
           ctx.beginPath();
-          ctx.rect(x*size,y*size,size,size)
+          ctx.rect(x,y,1,1)
           ctx.fillStyle="black";
           ctx.fill();
         }
     }
 }
-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;
+function createBootscreen(canvas,width,height){
+    var inrow=Math.ceil(width/8);
+    var buffer=new ArrayBuffer(inrow*height);
+    var ar8=new Uint8Array(buffer);
+    function writer(row,x,data){
+      if (data)
+        ar8[row+Math.floor(x/8)]|=0x80>>(x%8);
+    }
+    var ctx = canvas.getContext("2d");
+    var data = ctx.getImageData(0, 0, width, height).data;
+    var pixel = 0;
+    for (var y=0;height>y;y++){
+      for (var x=0;width>x;x++,pixel+=4)
+        writer(y*Math.floor(width/8),x,data[pixel]==0);
+    }
+    var pos=0,lines='';
+    for (var i=0;i<ar8.length;i++)
+      lines+='0x'+('0'+ar8[pos++].toString(16)).slice(-2)+','+(pos%8?' ':'\n');
+    return lines;
+}
+var resized; //global
+function imgReader(file,img,canv,inps){
+  var scale=5;
+  var canvas=canv[0];
+  function setAspect(){
+    var width=inps.eq(0).val(),height=inps.eq(1).val();
+    img.cropper('setAspectRatio', width/height);
+  }
+  setCanvasSize(canvas,inps.eq(0).val(),inps.eq(1).val(),scale);
+  inps.on('change',function(){
+    var width=parseInt(inps.eq(0).val()),height=parseInt(inps.eq(1).val());
+    if (canvas.width/scale != width || canvas.height/scale != height ){
+      setCanvasSize(canvas,width,height,scale);
+      setAspect();
+    }else
+      img.trigger('crop');
+  })
   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 () {
+            setCanvasSize(canvas,inps.eq(0).val(),inps.eq(1).val(),scale);
+            setAspect();
             img.attr('src',fr.result);
             img.cropper('replace', fr.result);
         }
@@ -66,23 +106,19 @@ function imgReader(file,img,canv){
         zoomable: false,
         rotatable: false,
         scalable: false,
-        aspectRatio: 2,
+        aspectRatio: 1,
         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 width=inps.eq(0).val(),height=inps.eq(1).val();
     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);
+    resized=cropImage(img,sel.x,sel.y,sel.width,sel.height,width,height);
+    toBW(resized,parseInt(inps.eq(3).val()),inps.eq(4).prop('checked'));
+    var destCtx = canvas.getContext('2d');
+    destCtx.drawImage(resized, 0, 0);
   })
 }
 function cropImage(img,x,y,w,h,fw,fh){
@@ -92,14 +128,20 @@ function cropImage(img,x,y,w,h,fw,fh){
   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));
+//  ctx.drawImage(img[0],x,y,w,h,0,0,fw,fh);
   return cv;
 }
-function toBW(canvas){
+function toBW(canvas,brightness,inverse){
   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;
+      //var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      var lum = data[i] * 0.3 + data[i+1] * 0.59 + data[i+2] * 0.11;
+      if (inverse)
+        avg = (lum < brightness) ? 0 : 255;
+      else
+        avg = (lum < brightness) ? 255 : 0;
       data[i]     = avg; // red
       data[i + 1] = avg; // green
       data[i + 2] = avg; // blue

views/_Bootscreen.h

@@ -0,0 +1,42 @@
+/**
+ * Marlin 3D Printer Firmware
+ * Copyright (C) 2016 MarlinFirmware [https://github.com/MarlinFirmware/Marlin]
+ *
+ * Based on Sprinter and grbl.
+ * Copyright (C) 2011 Camiel Gubbels / Erik van der Zalm
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * Custom Bitmap for splashscreen
+ *
+ * This file was generated with marlin-config https://github.com/akaJes/marlin-config/
+ *
+ * You may use one of the following tools to generate the C++ bitmap array from
+ * a black and white image:
+ *
+ *  - http://www.marlinfw.org/tools/u8glib/converter.html
+ *  - http://www.digole.com/tools/PicturetoC_Hex_converter.php
+ */
+#include <avr/pgmspace.h>
+
+#define CUSTOM_BOOTSCREEN_TIMEOUT   {{timeout}}
+#define CUSTOM_BOOTSCREEN_BMPWIDTH  {{width}}
+#define CUSTOM_BOOTSCREEN_BMPHEIGHT {{height}}
+
+const unsigned char custom_start_bmp[{{bytes}}] PROGMEM = {
+{{data}}
+};

views/snippets/bs-0default.html

@@ -2,7 +2,6 @@
 <div style="text-align:center" class="bs-default">
   <p>This is default boot screen with size <span></span></p>
   <canvas></canvas>
-  <p>Maximal allowed image can be placed on screen 128x64</p>
 <script>
 $(function(){
   var base=$('.bs-default');
@@ -13,4 +12,4 @@
     drawBootscreen(base.find('canvas')[0],screen,10);
   })
 });
-</script>
+</script>