newspaint

Documenting Problems That Were Difficult To Find The Answer To

Monthly Archives: May 2014

How To Stop Video Autoplay In Facebook May 2014

Facebook change their web application drastically every few years if not months – so by the time you read this the instructions are probably long out-of-date and your privacy has been violated multiple times in ways you never imagined possible by now.

In the meantime here is a step-by-step post on how to turn off video auto-play (where the video starts playing without you pressing a start button) on the Facebook website.

Step 1: choose settings from the top-right drop down menu.

Choose settings from the top-right drop down menu

Choose settings from the top-right drop down menu

Step 2: choose the video settings.

Select the video settings

Select the video settings

Step 3: select turn off video autoplay.

Select off for video autoplay

Select off for video autoplay

That’s all.

It is a dastardly thing to do to play videos when we don’t want them to play. It chews up bandwidth (not everybody has an unlimited high speed broadband connection in the world). And can be embarrassing depending on what content your friends have put in their videos.

A news organisation (in Australia if I recall correctly) boasted of having the highest number of video plays in the world – which came about because it decided to autoplay all videos. Perhaps this is an accolade Facebook is going for – even though it is meaningless and doesn’t represent the number of people who actually wanted to play those videos.

Writing Rotated Text on a JavaScript Canvas

This is a tutorial on rotating the canvas to produce text in directions other than horizontal. I wrote this because I wanted to write vertical text on a canvas and didn’t know how.

The Trick

You can only write text horizontally on a canvas. But we can rotate a canvas that we write on – then draw our horizontal text on the rotated canvas. When we’re finished we restore the canvas (restore it to its original orientation).

This can be a bit hard to imagine at first so I’ll work through a practical example. It is actually pretty easy once you know the trick.

Tutorial

Skeleton and Blank Canvas

Let’s start with a blank canvas with a border so we can see how big the canvas is.

<html>
  <head>
    <script src="example.js"></script>
  </head>
  <body onload="init();">
    <canvas id="demoCanvas" width="400" height="240">
      Please enable JavaScript
    </canvas>
  </body>
</html>
"use strict";

function init() {
  var canvas = document.getElementById( "demoCanvas" );
	
  var context = canvas.getContext( '2d' );
	
  // draw a box around the canvas
  context.beginPath(); // always start a new line with beginPath
  context.lineWidth = 3;
  context.moveTo( 0, 0 ); // start position
  context.lineTo( canvas.width - 1, 0 );
  context.lineTo( canvas.width - 1, canvas.height - 1 );
  context.lineTo( 0, canvas.height - 1 );
  context.lineTo( 0, 0 );
  context.stroke(); // actually draw the line
}

This results in the blank canvas image:

Blank Canvas

Blank Canvas

Drawing Vertical Text Going Down

If we want to write text going down beginning at the upper left corner (co-ordinate [0,0]) then we have to virtually rotate the paper we are drawing on by holding onto the left-hand corner and rotating it 90 degrees (that’s pi divided by 2 radians) anti-clockwise.

So if we start with the following canvas – and we grab the origin (0, 0) with our finger and thumb:

Grab the original canvas at the top left hand corner

Grab the original canvas at the top left hand corner

… then rotate the canvas 90 degrees anti-clockwise at this point:

Rotate the image at the origin 90 degrees

Rotate the image at the origin 90 degrees

… and once rotated draw on the rotated canvas horizontally at (0, 0). Note that text is always drawn above the selected point.

Draw at the origin horizontally on the rotated canvas

Draw at the origin horizontally on the rotated canvas

When you restore the canvas to the original orientation using the restore() function the text will appear to go down from the top-left hand corner.

So let’s add the following code to our JavaScript init() function:

// start by saving the current context (current orientation, origin)
context.save();

// when we rotate we will be pinching the
// top-left hand corner with our thumb and finger
context.translate( 0, 0 );

// now rotate the canvas anti-clockwise by 90 degrees
// holding onto the translate point
context.rotate( Math.PI / 2 );

// specify the font and colour of the text
context.font = "16px serif";
context.fillStyle = "#ff0000"; // red

// set alignment of text at writing point (left-align)
context.textAlign = "left";

// write the text
context.fillText( "left-aligned 90 deg", 0, 0 );

// now restore the canvas flipping it back to its original orientation
context.restore();

This produces the following on the canvas:

Canvas with vertical text down from top-left corner

Canvas with vertical text down from top-left corner

Drawing Vertical Text Going Up and Right-Aligned

What about text going up that lines up against the top-right?

This time we’ll grab the top-right hand corner of the canvas and rotate it -90 degrees (or 270 degrees) anti-clockwise.

Rotate the canvas holding the top-right hand corner

Rotate the canvas holding the top-right hand corner

Bear in mind that any drawing done is relative from the translate point which in this case is top-right of the original canvas (or bottom-right of the rotated canvas). So when we draw text we’ll again draw to (0, 0) but right-align it so that the text extends to the left of the bottom-right corner of the rotated canvas.

Draw right-aligned text at the origin of the translated canvas

Draw right-aligned text at the origin of the translated canvas

Now for some code:

// save orientation again
context.save();

// hold top-right hand corner when rotating
context.translate( canvas.width - 1, 0 );

// rotate 270 degrees
context.rotate( 3 * Math.PI / 2 );

context.font = "16px serif";
context.fillStyle = "#0000ff"; // blue
context.textAlign = "right";

// draw relative to translate point
context.fillText( "right-aligned 270 deg", 0, 0 );

context.restore();

Now we have a canvas that looks like the following:

Canvas with text going up aligned to the top right

Canvas with text going up aligned to the top right

Text 45 Degrees Down and Centred

So you should have a pretty good handle on this now. Let’s have some fun with 45 degree text sloping downwards but at the centre.

We’ll obviously rotate the canvas from the centre.

Rotate 45 degrees anti-clockwise from the centre

Rotate 45 degrees anti-clockwise from the centre

Then we can draw at the translate point but with centred text:

Draw text at translate point but centre-aligned

Draw text at translate point but centre-aligned

The code to do this:

context.save();
context.translate( canvas.width / 2, canvas.height / 2 );
context.rotate( Math.PI / 4 );
context.font = "16px serif";
context.fillStyle = "#00df00"; // green
context.textAlign = "center";
context.fillText( "center-aligned 45 deg", 0, 0 );
context.restore();

The canvas now looks like the following:

Canvas with 45-degree centred text

Canvas with 45-degree centred text

Microsoft Mouse in Windows 7 Became Slow and Laggy

Last month, April 2014, I started to experience severe problems with my USB Microsoft Mouse (cabled) on Windows 7. Frequently it would stop responding altogether and suspending the computer and waking it up seemed to get it working again for between 2 and 10 minutes – but then it would stop working again.

I suspected my cabled mouse was getting old and dysfunctional (highly unusual for an optical mouse, but one can be unlucky). So I removed the cabled mouse and plugged in a wireless USB Microsoft Mouse. This didn’t stop working. But it suffered a different problem.

From time to time the mouse would appear “slow”. It would update on the screen maybe twice a second, or even less frequently, once per second, or pause for several seconds before responding again.

The solution in my case was to do the following. Open device manager (start menu, type “device manager”). Then expand the “Universal Serial Bus controllers” item, and right click on “Microsoft Mouse and Keyboard Detection Driver (USB), left-click on “Uninstall”. You do not need to tick the box that asks to delete the drivers.

Uninstall Microsoft Mouse and Keyboard Detection Driver (USB)

Uninstall Microsoft Mouse and Keyboard Detection Driver (USB)

The mouse stopped working at this point. So I connected my trusty cabled mouse and I clicked “cancel” as the Microsoft Mouse detection program started running looking for special drivers for my mouse.

Turns out I have to do this every time the mouse slows down. Go to device manager, uninstall the driver, then unplug and re-plug my mouse.