Category Archives: javascript

HTML5 and JavaScript: Flip an Image using HTML5 Canvas

Leave a reply

See the working code example on jsfiddle.


<!DOCTYPE html>
<html>
<head>
<title>Flipping an Image Horizontally and Vertically</title>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var imageurl = null;
//
$(document).ready( function() {
$('#loadimage').click(function() {
urlProvided();
});
$('#mirrorh').click(function() {
mirror(1,0);
});
$('#mirrorv').click(function() {
mirror(0,1);
});
});
//
function urlProvided() {
var userinput = document.getElementById('imageurl');
imageurl = userinput.value;
loadImage();
}
function loadImage(){
//
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//
var img = new Image();
img.src = imageurl;
img.onload = function(){
ctx.drawImage(img,0,0);
};
//
var w = img.width;
var h = img.height;
canvas.width = w;
canvas.height = h;
}
//
function mirror(mirrorh,mirrorv){
//
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
//
var img = new Image();
img.src = imageurl;
//
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
//
var w = img.width;
var h = img.height;
if(mirrorh){
ctx.scale(1, -1);
ctx.translate(0, -h);
}
if(mirrorv){
ctx.scale(-1, 1);
ctx.translate(-w,0);
}
ctx.drawImage(img,0,0,img.width,img.height,null,null,w,h);
ctx.save();
}
</script>
</head>
<body>
<div>
Your image URL: <input type="text" id="imageurl"></input><button id="loadimage">load image</button>
</div>
<div>
<button id="mirrorh">mirrorh</button>
<button id="mirrorv">mirrorv</button>
</div>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>

Cordova: Install or Update Cordova on Windows with Visual Studio

1 Reply

To install Apache Cordova on Windows and to use it with Visual Studio 2010 Express for Windows Phone, follow these steps:

  1. Get the source code for the latest version from the Cordova project page or for older versions go to the Cordova distribution archive.
  2. Unzip the source archive cordova-3.4.0-src.zip.
    C:/>unzip cordova-3.4.0-src.zip
  3. Locate the file cordova-wp8.zip in the extracted directory, and unzip the archive.
    C:/>cd cordova-3.4.0
    C:/cordova-3.4.0>unzip cordova-wp8.zip
  4. Change directory to cordova-wp8 and run the createTemplates.bat script.
    C:/cordova-3.4.0>cd cordova-wp8
    C:/cordova-3.4.0/cordova-wp8>createTemplates.bat
  5. Copy the generated template files CordovaWP7_3_4_0.zip and CordovaWP8_3_4_0.zip to the Visual Studio Templates directory in the users My Documents folder ~/Document
    s\Visual Studio 2010\Templates\ProjectTemplates.
    C:\cordova-3.4.0\cordova-wp8>copy CordovaWP8_3_4_0.zip "C:\Users\user1\Document
    s\Visual Studio 2010\Templates\ProjectTemplates"

Now, start Visual Studio 2010 Express for Windows Phone, and in the File menu, select New Project…. In the Installed Templates select the Cordova template you just copied.

To add Cordova plugins on Windows with Visual Studio, go here.

Cordova: adding camera plugin to wp7 in Visual Studio Express on Windows 7 Pro

1 Reply

To see how to install Cordova on Windows with Visual Studio, go here.

After you created the Cordova app using the generated Template in Visual Studio, you must use the plugman package instead of the cordova tool to install plugins. If you didn’t install plugman, first install plugman using npm.
>npm install -g plugman

To add the plugin camera use the following code inside the root of the solution.
C:\>cd \dev\mobile\CordovaWP7_3_4_0_App1
C:\dev\mobile\CordovaWP7_3_4_0_App1>plugman install --platform wp7 --project CordovaWP7_3_4_0_App1 --plugin org.apache.cordova.camera
Fetching plugin "org.apache.cordova.camera" via plugin registry
Starting installation of "org.apache.cordova.camera" for wp7
Preparing wp7 project
org.apache.cordova.camera installed on wp7.

Cordova: submit multipart form with additional parameters

1 Reply

With the Cordova plugin File-Transfer you can submit a multipart form with additional parameters. To read an image file as a binary string, you can use the HTML5 FileReader syntax from the File API by using the Cordova plugin File.

For instance, the following example uses Idol On Demand‘s APIs to analyze images for barcodes.

Add the required plugins.
$cordova plugin add org.apache.cordova.console
$cordova plugin add org.apache.cordova.file
$cordova plugin add org.apache.cordova.file-transfer

This is the code to submit a multipart form in Cordova. Note that the additional parameters are added to the form by using the options.params property with an associative array of parameters.

var formURL = "https://api.idolondemand.com/1/api/sync/readbarcode/v1";
var encodedURI = encodeURI(formURL);
// add additional parameters 'file' and 'apikey' to the multipart form
var options = new FileUploadOptions();
options.fileKey = "file";
// strip the filename from the full path
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
var imgData = readFileAsBinaryString(fileURI);
options.params = { 'apikey': apikey, 'file': imgData };
// create the FileTransfer object
var ft = new FileTransfer();
// submit the multipart form
ft.upload(fileURI, encodedURI, fnOnSuccess, fnOnError, options, false);

The readFileAsBinaryString(file) is implemented like this:

function readFileAsBinaryString(file) {
 console.log("readFileAsBinaryString(: "+file+")");
 var reader = new FileReader();
 reader.onloadend = function(e) {
  console.log("Successfully read file as binary string");
  var imgData = e.target.result;
  return imgData;
 };
 reader.onerror = function(e) {
  console.log("Error while reading file as binary string: "+e.target.error.code);
 };
 reader.readAsBinaryString(file);
}

D3: Binding Multi-Dimensional Arrays and Deep Nested Data

2 Replies

The easiest way to work with D3 data arrays is to create simple arrays. For example, to create a stacked array, represent each stack in a stacked bar by the a comma separated value in a row per bar.

state, males, females
CT, 125, 135
NY, 240, 250

But if you are retrieving data from an open data API via REST for instance or if you want to use dynamic data visualizations where the visualization depends on user input, it is easier to use the built-in d3.nest function. For example, the following data comes from http://www.clinicaltrials.gov and is formatted as a .csv file:

"nct_id","gender","status","phase","city","state","minimum_age","maximum_age"
"NCT00000102","Both","Completed","Phase 1/Phase 2","Charleston","South Carolina","14 Years","35 Years",
"NCT00000104","Female","Completed","N/A","Minneapolis","Minnesota","N/A","N/A",
"NCT00000105","Male","Completed","Phase 3","Charleston","South Carolina","10 Years","14 Years",

If you use a simple nested array with one level of parent-child structure, it is straightforward to bind data to your elements.

var data1 = d3.nest()
  .key(function(d) { return d.state; }).sortKeys(d3.ascending)
  .entries(data);

Using the d3.nest() function with a single key generates the following data array structure. Continue reading →

Rhino: OptimizationLevel and Java Heap Space

Leave a reply

When loading external JavaScript libraries like env.js or jquery.js
load('/Users/nl11087/dev/tradecard/modules/lib/env.rhino.1.2.js');
load('/Users/nl11087/dev/tradecard/modules/lib/jquery-1.8.3.js');

You might get a OutOfMemoryError:
exception from uncaught JavaScript throw: java.lang.OutOfMemoryError: Java heap space

Solution:
java org.mozilla.javascript.tools.shell.Main -opt -1
or
Packages.org.mozilla.javascript.Context.getCurrentContext().setOptimizationLevel(-1);