User control of zoomlevel in Hybrid

There was a request for user control of the zoomlevel (ctrl-+, ctrl--) in a Hybrid application.
Right now the situation is:
It seems to work for a split second, then the Hybrid picks up a resize event en ignores the user zoom.

There are two reasons for not implementing this:
- This behaviour is consistent with the goal of the Hybrid: Making a consistent user-experience, no matter what browser or previous settings as much as is technically possible.

-We might make it default behaviour and have the programmer override it at will..
However:
http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers
The following discussion reveals a rather pained process of dealing with all the browser-quirks involved. Without extensive browser sniffing this does not seem possible to do  yet in all browsers,

Browser sniffing or UA sniffing is generally considered bad practice because of reduced scalability, increased maintenance and the existence and common practice of 'browser masquerading' and is therefore against the Hybrid design policy.

Table Border collapse fails when transform scale applied in Chrome

Here is the fiddle.
https://jsfiddle.net/d6qbp2kw/1/

Chrome & Safari both get it wrong.
I haven't tested Firefox, but IE get's it right.
So it might be a webkit-problem.

Canvas LineWidth 0

For a client I have to create a graph with a linewidth of 1 pixel, regardless of the
scaling of the matrix the canvas is currently operating under.

So for instance:

var c = document.getElementById("theCanvas");
var ctx = c.getContext("2d");
ctx.scale(5,5);
ctx.lineWidth = 1;
ctx.strokeRect(20, 20, 80, 100);

This will ofcourse render a line thickness of 5.
Now I tried the following:

var c = document.getElementById("theCanvas");
var ctx = c.getContext("2d");
ctx.scale(5,5);
ctx.lineWidth = 0.001;
ctx.strokeRect(20, 20, 80, 100);

This will give you a line thickness of 0.005 and the line will hardly be visible (antialiased to a nice alpha version of your color.)
However lineWidth has an exception for lineWidth = 0!
It will default to 1 instead.
I thought: "Haleluja, some developer has foreseen my plight."
But alas no..

var c = document.getElementById("theCanvas");
var ctx = c.getContext("2d");
ctx.scale(5,5);
ctx.lineWidth = 0;
ctx.strokeRect(20, 20, 80, 100);

Yields a line of 5 pixels thickness. How can this be? Well, the function linewidth has a very simple error catch: if 0 -> 1 (Because linewidth 0 doesn't make sense)
After it's been set to 1 the scale is adapted and the line becomes 5pixels thick.

I only tested it in Chrome, maybe other browsers behave differently, but that's enough for me. It's a bust. The way to fix it is to keep track of your transforms.

var c = document.getElementById("theCanvas");

var s=1;
var ctx = c.getContext("2d");

ctx.scale(5,5);

s=s*5;

ctx.scale(0.5,0.5);

s=s*0.5;

ctx.lineWidth = 1/s; // for a single pixel line..
ctx.strokeRect(20, 20, 80, 100);

This will yield a scaled rectangle with a single pixel line.
It works pretty good, but there is no guarantee it will behave exactly the same way as expected with a hairline.

I hope someday ..... lineWidth 0 will yeald the expected result.

In line with this issue:
http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element

De absurditeit van de implementatie van Nederlandse Cookiewetgeving

Wat zijn cookies?
Cookies zijn kleine bestanden die uw voorkeuren tijdens het surfen onthouden en opslaan op uw eigen computer.

Dit soort teksten verschijnen overal. Verplicht. Op iedere Nederlandse website.
Je moet dan OK klikken en dan is alles weer normaal.
Je hebt cookies geaccepteerd.

Maar wat als je cookies NIET accepteert?
Dan wordt er een cookie gezet, die deze voorkeur onthoud.
Dit is de standaard implementatie van deze vervelende, onnodige, maar vooral ondoordachte wet.
Natuurlijk wordt er een cookie gezet. Want je wilt toch niet, dat gebruikers deze melding iedere keer krijgen, alleen maar omdat ze geen cookie willen?

Al deze verwarring rondom cookies leidt tot cookiemuren, niet technisch noodzakelijke cookies en geen toestemming mogen vragen voor de opslag van cookies.

Er is net weer een wetsvoorstel aangenomen ter vergroting van het gebruiksgemak, die deze implementatie legaal wil maken. (Want het is op dit moment illegaal, toch?)

http://www.eerstekamer.nl/wetsvoorstel/33902_wijziging_artikel_11_7a

Je hoeft niet alleen cookies te kunnen implementeren, je moet 80 pagina's wetsvoorstellen en amendementen doorlezen in krom gesteld Nederlands. En dan, misschien weet je dan wat je wel of niet mag doen of wel of niet mag/moet laten.

Ik weet het in ieder geval NIET meer.
Mijn beste manier om cookies op te slaan:

Closing soft keyboards on 'enter' on mobile

Have you ever run across this problem:
You use contenteditable because every browser claims it's supported and you can style it much better than a text-input.
And then the soft keyboard on mobile just won't shut when you are getting just a single line from the user??

Well here is the answer:
http://jsfiddle.net/uc7merbd/1/

Uploading images in HTML5 by dropzone.

Uploading images in HTML5 by dropzone.

HTML:

<div id="drop_zone">Drop files here</div>

<output id="list"></output>

STYLE:

 .thumb {

    height: 75px;

    border: 1px solid #000;

    margin: 10px 5px 0 0;

  }

#drop_zone {

border: 2px dashed #bbb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 25px;

text-align: center;

font: 20pt bold 'Vollkorn';

color: #bbb;

}

JAVASCRIPT:

function handleFileSelect(evt) {

    evt.stopPropagation();

    evt.preventDefault();



    var files = evt.dataTransfer.files; // FileList object.



    // files is a FileList of File objects. List some properties.

    var output = [];

    for (var i = 0, f; f = files[i]; i++) 

    {

      // Only process image files.

      if (!f.type.match('image.*')) {

        continue;

      }

      var reader = new FileReader();

      // Closure to capture the file information.

      reader.onload = (function(theFile) 

      {

            return function(e) 

            {

              // Render thumbnail.

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

              span.innerHTML = ['<img class="thumb" src="',

                                e.target.result,'" title="',

                                escape(theFile.name),'"/>'].join('');

              document.getElementById('list').insertBefore(span, null);

            };

      })(f);

      // Read in the image file as a data URL.

      reader.readAsDataURL(f);

       

      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',

                  f.size, ' bytes, last modified: ',

                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

                  '</li>');

    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

  }



  function handleDragOver(evt) {

    evt.stopPropagation();

    evt.preventDefault();

    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

  }



  // Setup the dnd listeners.

  var dropZone = document.getElementById('drop_zone');

  dropZone.addEventListener('dragover', handleDragOver, false);

  dropZone.addEventListener('drop', handleFileSelect, false);

TEST IT: http://jsfiddle.net/sdorLj3e/

Loopable Soft Noise

Generating Soft Noise on a Canvas

I'm making a space paralax game and I need a function for soft, loopable noise, to make space a little more interesting.
I've been looking at perlin-noise, but speed is an issue..

So I've been fiddling to generate this:
http://jsfiddle.net/LwDC9/1/

As you can see the texture is generated to be completely loopable at ANY format. (Perlin noise usually needs something like 2,4,8,16,32... etc)
If you want a 2048x2048 loopable texture, you'll have to wait a bit, but it'll get there. You can reduce the complexity of the rendering to optimize.

Also the texture is transparent. This is because I want to use it in a parallax.

So let's use that technique to create a huge (640x480) spaceview animation that you might know from games. (using a parallax)

http://jsfiddle.net/LwDC9/3/
Please try the fiddle, the image doesn't do justice to the animation.
I've put some text underneath the canvas, to show it's pretty transparant.
I'd like to see what the performance is on an iPad or something, but right now, I'm pretty happy with the performance in Chrome.

Now when a star dissappears it immeadeately reappears on the other side, the same goes for the colors. That kind of kills the illusion.
So I made the generated bitmaps bigger than the shown ones. I generate 4 bitmaps of 1024 by 512 and show them in a frame of 800x200.

http://jsfiddle.net/LwDC9/5/