javascript: the beginning and end of an image along its center

13 dicembre 201713 dicembre 2017 Diego BettoLeave a comment

Javascript snippet that detects the beginning and end of an image along its center, alpha supported.

Parameters: image id (without ‘#’)

Returns an object with:
– start (first non trasparent/not white pixel from center top)
– end (first not trasparent/not white pixel from center bottom)
– image width
– image height

function getRealImageYStartEnd($imageId){
    var img = document.getElementById($imageId);
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    var context = canvas.getContext('2d');
    var middle = Math.floor(img.width/2);
    var startImage = 0;
    var endImage = img.height;

    for (i = 0; i < img.height; i++){
        var data = context.getImageData(Math.floor(img.width/2), i, 1, 1).data;
        if (data[0] !== 0 && data[1] !== 0 && data[1] !== 0 && data[3] !== 0){
            startImage = i;
            break;
        }
    }

    for (i = img.height; i >= 0; i--){
        var data = context.getImageData(Math.floor(img.width/2), i, 1, 1).data;
        if (data[0] !== 0 && data[1] !== 0 && data[1] !== 0 && data[3] !== 0){
            endImage = i;
            break;
        }
    }

    return {start: startImage, end: endImage, width: img.width, height: img.height};
}

function getRealImageYStartEnd($imageId){

var img = document.getElementById($imageId);

var canvas = document.createElement('canvas');

canvas.width = img.width;

canvas.height = img.height;

canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

var context = canvas.getContext('2d');

var middle = Math.floor(img.width/2);

var startImage = 0;

var endImage = img.height;

for (i = 0; i < img.height; i++){

var data = context.getImageData(Math.floor(img.width/2), i, 1, 1).data;

if (data[0] !== 0 && data[1] !== 0 && data[1] !== 0 && data[3] !== 0){

startImage = i;

break;

}

for (i = img.height; i >= 0; i--){

var data = context.getImageData(Math.floor(img.width/2), i, 1, 1).data;

if (data[0] !== 0 && data[1] !== 0 && data[1] !== 0 && data[3] !== 0){

endImage = i;

break;

}

return {start: startImage, end: endImage, width: img.width, height: img.height};

}

G Suite: Gmail and Inbox crashing. Solved

29 settembre 20173 ottobre 2017 Diego BettoLeave a comment

Just installed G Suite, launched Gmail / Inbox and … crash? Seems that it is related to the fact that G Suite cannot use Chrome process.

So tried to install Chrome ( G Suite version ), everything seems ok and working now. Solved.

09-29 23:06:14.531 9281 9281 I WebViewFactory: Loading com.android.chrome version 61.0.3163.98 (code 316309852)
09-29 23:06:14.580 9281 9281 I cr_LibraryLoader: Time to load native libraries: 4 ms (timestamps 8515-8519)
09-29 23:06:14.592 9281 9281 I chromium: [INFO:library_loader_hooks.cc(136)] Chromium logging enabled: level = 0, default verbosity = 0
09-29 23:06:14.592 9281 9281 I cr_LibraryLoader: Expected native library version number "61.0.3163.98", actual native library version number "61.0.3163.98"
09-29 23:06:14.610 9281 9437 W cr_ChildProcLH: Create a new ChildConnectionAllocator with package name = com.android.chrome, sandboxed = true
09-29 23:06:14.625 9281 9437 E bta : bzc Uncaught Android Crash on thread Chrome_ProcessLauncherThread with tid 3396 on version 1.56.168919525.release
09-29 23:06:14.625 9281 9437 E bta : java.lang.RuntimeException: Could not get application info.
09-29 23:06:14.625 9281 9437 E bta : at org.chromium.base.process_launcher.ChildConnectionAllocator.create(ChildConnectionAllocator.java:11)
09-29 23:06:14.625 9281 9437 E bta : at org.chromium.content.browser.ChildProcessLauncherHelper.getConnectionAllocator(ChildProcessLauncherHelper.java:71)
09-29 23:06:14.625 9281 9437 E bta : at org.chromium.content.browser.ChildProcessLauncherHelper$2.run(ChildProcessLauncherHelper.java:8)
09-29 23:06:14.625 9281 9437 E bta : at android.os.Handler.handleCallback(Handler.java:751)
09-29 23:06:14.625 9281 9437 E bta : at android.os.Handler.dispatchMessage(Handler.java:95)
09-29 23:06:14.625 9281 9437 E bta : at android.os.Looper.loop(Looper.java:154)
09-29 23:06:14.625 9281 9437 E bta : at android.os.HandlerThread.run(HandlerThread.java:61)
09-29 23:06:14.628 9281 9281 I cr_BrowserStartup: Initializing chromium process, singleProcess=false
09-29 23:06:14.629 9281 9437 E AndroidRuntime: FATAL EXCEPTION: Chrome_ProcessLauncherThread
09-29 23:06:14.629 9281 9437 E AndroidRuntime: Process: com.google.android.apps.inbox, PID: 9281
09-29 23:06:14.629 9281 9437 E AndroidRuntime: java.lang.RuntimeException: Could not get application info.
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at org.chromium.base.process_launcher.ChildConnectionAllocator.create(ChildConnectionAllocator.java:11)
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at org.chromium.content.browser.ChildProcessLauncherHelper.getConnectionAllocator(ChildProcessLauncherHelper.java:71)
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at org.chromium.content.browser.ChildProcessLauncherHelper$2.run(ChildProcessLauncherHelper.java:8)
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:751)
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:95)
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.Looper.loop(Looper.java:154)
09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.HandlerThread.run(HandlerThread.java:61)

09-29 23:06:14.531 9281 9281 I WebViewFactory: Loading com.android.chrome version 61.0.3163.98 (code 316309852)

09-29 23:06:14.580 9281 9281 I cr_LibraryLoader: Time to load native libraries: 4 ms (timestamps 8515-8519)

09-29 23:06:14.592 9281 9281 I chromium: [INFO:library_loader_hooks.cc(136)] Chromium logging enabled: level = 0, default verbosity = 0

09-29 23:06:14.592 9281 9281 I cr_LibraryLoader: Expected native library version number "61.0.3163.98", actual native library version number "61.0.3163.98"

09-29 23:06:14.610 9281 9437 W cr_ChildProcLH: Create a new ChildConnectionAllocator with package name = com.android.chrome, sandboxed = true

09-29 23:06:14.625 9281 9437 E bta : bzc Uncaught Android Crash on thread Chrome_ProcessLauncherThread with tid 3396 on version 1.56.168919525.release

09-29 23:06:14.625 9281 9437 E bta : java.lang.RuntimeException: Could not get application info.

09-29 23:06:14.625 9281 9437 E bta : at org.chromium.base.process_launcher.ChildConnectionAllocator.create(ChildConnectionAllocator.java:11)

09-29 23:06:14.625 9281 9437 E bta : at org.chromium.content.browser.ChildProcessLauncherHelper.getConnectionAllocator(ChildProcessLauncherHelper.java:71)

09-29 23:06:14.625 9281 9437 E bta : at org.chromium.content.browser.ChildProcessLauncherHelper$2.run(ChildProcessLauncherHelper.java:8)

09-29 23:06:14.625 9281 9437 E bta : at android.os.Handler.handleCallback(Handler.java:751)

09-29 23:06:14.625 9281 9437 E bta : at android.os.Handler.dispatchMessage(Handler.java:95)

09-29 23:06:14.625 9281 9437 E bta : at android.os.Looper.loop(Looper.java:154)

09-29 23:06:14.625 9281 9437 E bta : at android.os.HandlerThread.run(HandlerThread.java:61)

09-29 23:06:14.628 9281 9281 I cr_BrowserStartup: Initializing chromium process, singleProcess=false

09-29 23:06:14.629 9281 9437 E AndroidRuntime: FATAL EXCEPTION: Chrome_ProcessLauncherThread

09-29 23:06:14.629 9281 9437 E AndroidRuntime: Process: com.google.android.apps.inbox, PID: 9281

09-29 23:06:14.629 9281 9437 E AndroidRuntime: java.lang.RuntimeException: Could not get application info.

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at org.chromium.base.process_launcher.ChildConnectionAllocator.create(ChildConnectionAllocator.java:11)

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at org.chromium.content.browser.ChildProcessLauncherHelper.getConnectionAllocator(ChildProcessLauncherHelper.java:71)

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at org.chromium.content.browser.ChildProcessLauncherHelper$2.run(ChildProcessLauncherHelper.java:8)

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:751)

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:95)

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.Looper.loop(Looper.java:154)

09-29 23:06:14.629 9281 9437 E AndroidRuntime: at android.os.HandlerThread.run(HandlerThread.java:61)

JS/CSS Moon Phases snippet

9 maggio 201710 maggio 2017 Diego BettoLeave a comment

Simple script to generate moon phases ( https://en.wikipedia.org/wiki/Lunar_phase )

It uses 2 SVG (2 hemispheres) and some CSS transformation.
You can avoid JS if you don’t need real-time phase update.

HTML code

<div class="moon">
  <svg height="200" width="100" class="moon-left">
    <circle cx="100" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="100" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg><svg height="200" width="100" class="moon-right">
    <circle cx="0" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="0" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg>
  
  <div id="phase"></div>
</div>

</svg><svg height="200" width="100" class="moon-right">

</svg>

</div>

CSS

html, body {width:100%;background-color:#333;margin:0;position:relative; font: 1em sans-serif;}
.moon {width:200px;margin:2rem auto;}
#phase {width:200px;margin:25px 0;}

.moon-left,.moon-right {display:inline-block;width:100px;position:relative;margin:0;}
.moon-left .bg,.moon-right .bg {stroke-width:2px;}

.moon-right .fg {stroke-width:2px;}
.moon-left .bg {fill:black;}
.moon-left .fg {fill:white;transform-origin: 0% 0%;}

.moon-right .fg {transform: scaleX(1);}
.moon-left .fg {transform: scaleX(0) translateX(0);}

html, body {width:100%;background-color:#333;margin:0;position:relative; font: 1em sans-serif;}

.moon {width:200px;margin:2rem auto;}

#phase {width:200px;margin:25px 0;}

.moon-left,.moon-right {display:inline-block;width:100px;position:relative;margin:0;}

.moon-left .bg,.moon-right .bg {stroke-width:2px;}

.moon-right .fg {stroke-width:2px;}

.moon-left .bg {fill:black;}

.moon-left .fg {fill:white;transform-origin: 0% 0%;}

.moon-right .fg {transform: scaleX(1);}

.moon-left .fg {transform: scaleX(0) translateX(0);}

and JS code. The code is prolix and redundant, but it helps to understand what happens.

jQuery( "#phase" ).slider({
      min: 0,
      max: 200,
      value: 2,
      step:10,
      slide: function( event, ui ) {
        updateMoon( ui.value );
      }
  });

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};
function updateMoon(phase){
  var phaseScale = 1,
      phaseTrans = 100,
      phaseRight = 0;
  
  if(phase <= 100) {
    phaseRight = (1-phase/100);
  } 
  jQuery('.moon-right .fg').css({
    'transform':'scaleX(' + phaseRight + ')'
  });
  
  if(phase >= 100) {
    phaseScale = (1-(phase-100)/100);
    phaseTrans = 100*phaseScale;
  } 
  jQuery('.moon-left .fg').css({
    'transform':'translate('+phaseTrans+'px,0) scaleX(' + (1-phaseScale) + ')'
  });
  
}

jQuery( "#phase" ).slider({

min: 0,

max: 200,

value: 2,

step:10,

slide: function( event, ui ) {

updateMoon( ui.value );

}

});

Math.radians = function(degrees) {

return degrees * Math.PI / 180;

};

function updateMoon(phase){

var phaseScale = 1,

phaseTrans = 100,

phaseRight = 0;

if(phase <= 100) {

phaseRight = (1-phase/100);

}

jQuery('.moon-right .fg').css({

'transform':'scaleX(' + phaseRight + ')'

});

if(phase >= 100) {

phaseScale = (1-(phase-100)/100);

phaseTrans = 100*phaseScale;

}

jQuery('.moon-left .fg').css({

'transform':'translate('+phaseTrans+'px,0) scaleX(' + (1-phaseScale) + ')'

});

}

and here the result

See the Pen JS/CSS Moon Phases by Diego Betto (@agm65) on CodePen.dark

Diego Betto

web, development & blog

Categoria: Labs

javascript: the beginning and end of an image along its center

G Suite: Gmail and Inbox crashing. Solved

JS/CSS Moon Phases snippet