Develop Reference

This node does not have access to a size component

My code looks like this
var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
var Position = require('famous/components/Position');
var Transitionable = require('famous/transitions/Transitionable');
var Size = require('famous/components/Size')
var Tile = require('./Tile.js');
var Card = require('./Card.js');
var Selector = require('./Selector.js');
var ChannelCard = require('./ChannelCard.js');
var PanelCard = require('./PanelCard.js');
var KeyCodes = require('../utils/KeyCodes.js');
function App(selector, data) {
this.context = FamousEngine.createScene(selector);
this.rootNode = this.context.addChild();
this.tilesData = data.tilesData;
this.selectedTileIndex = 0;
this.tiles = [];
var firstNode = this.rootNode.addChild(new Card('url(images/tile-01-vidaa.png)','#9a105f', FIRST_X_POSITION, Y_POSITION));
}.bind(this));
module.exports = App;
where Card.js looks like this :
var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var Transitionable = require('famous/transitions/Transitionable');
var Node = require('famous/core/Node');
var FIRST_X_POSITION = 100;
var Y_POSITION = 200;
function Card(bgUrl, bgColor, xpos, ypos) {
Node.call(this);
console.log("xpos + " + xpos);
console.log("ypos + " + ypos);
this.setSizeMode('absolute', 'absolute');
this.setAbsoluteSize(250, 250);
this.setPosition(xpos, ypos);
this.nodeDomElement = new DOMElement(this);
this.nodeDomElement.setProperty('backgroundImage', bgUrl);
this.nodeDomElement.setProperty('background-color', bgColor);
}
Card.prototype = Object.create(Node.prototype);
Card.prototype.constructor = Card;
module.exports = Card;
However, when I run in using famous dev, I get the following error
Uncaught Error: This node does not have access to a size component
setSizeMode # Node.js:1061Card # Card.js:11App # App.js:43
Please help me figure out what is causing the error and how to fix.

Your Node needs a context. If you have not yet added the node to a scene (or there is not yet a scene), add it before running any methods on the components. In the example of my 3D Asteroids game, I had to do the following to avoid the error:
function Game(scene, world) {
Node.call(this);
scene.addChild(this);
this._domElement = new DOMElement(this);
this.world = world;
this.asteroids = [];
this.bullets = [];
this.setProportionalSize(1, 1, 1);
this.addUIEvent('click');
this.addUIEvent('keydown');
}
If you have not yet created a scene, you can do so by running:
function Game() {
// ...
var context = FamousEngine.getContext('body');
context.addChild(this);
}

I believe the issue was a bug in Famous Engine and there were 2 manifestations of it.
The first manifestation was fixed by the following PR :
https://github.com/Famous/engine/pull/349
The second manifestation was fixed by the following PR :
https://github.com/Famous/engine/pull/350
However, at the time of writing this, these have not been merged to master so one needs to work off develop branch to have these fixes.

Is there a way to access fonts icons from html5 canvas?

I am new to html5 canvas.
I need to display fonticons (fontawesome) as images.
Is this possible? Thanks

It is indeed possible, though it is a bit cumbersome.
Since Canvas will draw with a fallback font if the actual font it not yet ready, and since fonts are lazy loaded you will need to hold of rendering until the font is ready. This should be possible using something like Google/Typekit's Web Font Loader (https://github.com/typekit/webfontloader)
Once the font is ready, you can draw it in canvas as any other string, something like
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px FontAwesome';
ctx.fillText(String.fromCharCode(61449), 10, 50);
The biggest challenge is that you have to remap all the symbols in Font Awesome, the their JavaScript char representations.
Edit:
This can actually be done using the name, by calcualting CSS rules
getFAChar = function (name) {
var elm = document.createElement('i');
elm.className = 'fa fa-' + name;
elm.style.display = 'none';
document.body.appendChild(elm);
var content = window.getComputedStyle(
elm, ':before'
).getPropertyValue('content')
document.body.removeChild(elm);
return content;
};
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px FontAwesome';
ctx.fillText(getFAChar('bed'), 10, 50)
Edit:
To improve performance, FA icons should be cached, especially if the Canvas is redrawn often (adding and removing a lot of DOM elements is not a good idea when trying to reach 60 fps)
var FontAwesome = (function () {
var me = {},
FACache = {};
function find (name) {
var elm = document.createElement('i');
elm.className = 'fa fa-' + name;
elm.style.display = 'none';
document.body.appendChild(elm);
var content = window.getComputedStyle(
elm, ':before'
).getPropertyValue('content')
document.body.removeChild(elm);
return content;
};
me.get = function (name) {
if (!!FACache[name]) return FACache[name];
var c = find(name);
FACache[name] = c;
return c;
};
return me;
}());
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px FontAwesome';
ctx.fillText(FontAwesome.get('bed'), 10, 50);
Edit
Complete example using deferred render, auto css injection and mapping of css chars, though only tested in Chrome (Uses font loading API and Promises without polyfill)
var FontAwesome = function () {
return new Promise(function (done, failed) {
var me = {},
FACache = {};
function find (name) {
var elm = document.createElement('i');
elm.className = 'fa fa-' + name;
elm.style.display = 'none';
document.body.appendChild(elm);
var content = window.getComputedStyle(
elm, ':before'
).getPropertyValue('content')
document.body.removeChild(elm);
return content;
};
me.get = function (name) {
if (!!FACache[name]) return FACache[name];
var c = find(name)[1];
FACache[name] = c;
return c;
};
(function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.onload = function () {
document.fonts.load('10px FontAwesome')
.then(function (e) { done(me); })
.catch(failed);
}
l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
}());
});
};
FontAwesome()
.then(function (fa) {
// All set, and ready to render!
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px FontAwesome';
ctx.fillText(fa.get('bed'), 10, 50);
});
<canvas id="canvas"></canvas>

EaselJs: Objects, Classes, and Making A Square Move

Although I have used Javascript extensively in the past, I have never used classes and objects in my programs. This is also the first for me using the HTML5 canvas element with an extra Javascript library. The library I'm using is EaselJS.
Short and sweet, I'm trying to make a square move with keyboard input, using object-oriented programming. I've already looked over sample game files, but I've never been able to properly get one to work.
The following is my classes script:
/*global createjs*/
// Shorthand createjs.Shape Variable
var Shape = createjs.Shape;
// Main Square Class
function square(name) {
this.name = name;
this.vX = 0;
this.vY = 0;
this.canMove = false;
this.vX = this.vY = 0;
this.canMove = false;
this.body = new Shape();
this.body.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
}
And below is my main script:
/*global createjs, document, window, square, alert*/
// Canvas and Stage Variables
var c = document.getElementById("c");
var stage = new createjs.Stage("c");
// Shorthand Create.js Variables
var Ticker = createjs.Ticker;
// Important Keycodes
var keycode_w = 87;
var keycode_a = 65;
var keycode_s = 83;
var keycode_d = 68;
var keycode_left = 37;
var keycode_right = 39;
var keycode_up = 38;
var keycode_down = 40;
var keycode_space = 32;
// Handle Key Down
window.onkeydown = handleKeyDown;
var lfHeld = false;
var rtHeld = false;
// Create Protagonist
var protagonist = new square("Mr. Blue");
// Set Up Ticker
Ticker.setFPS(60);
Ticker.addEventListener("tick", stage);
if (!Ticker.hasEventListener("tick")) {
Ticker.addEventListener("tick", tick);
}
// Init Function, Prepare Protagonist Placement
function init() {
protagonist.x = c.width / 2;
protagonist.y = c.height / 2;
stage.addChild(protagonist);
}
// Ticker Test
function tick() {
if (lfHeld) {
alert("test");
}
}
// Handle Key Down Function
function handleKeyDown(event) {
switch(event.keyCode) {
case keycode_a:
case keycode_left: lfHeld = true; return false;
case keycode_d:
case keycode_right: rtHeld = true; return false;
}
}
This is the error I get in the Developer Tools of Chrome:
Uncaught TypeError: undefined is not a function
easeljs-0.7.0.min.js:13
In case you're wondering, the order of my script tags is the EaselJS CDN, followed by my class, followed by the main script file.
I would really like closure on this question. Thank you in advance.

I figured it out. I was adding the entire protagonist instance to the stage. I've fixed by adding the protagonist.body to the stage.

Undefined error using javascript objects

I am newbie to javascript objects and I have a problem. I am trying to make an image gallery but I keep getting an error that this.current, this.size & this.initial are undefined, and therefore, the script cannot work. Please help me resolve this error. the following is the full script.
function gallery()
{
this.image = new Array(10);
this.initial = 1;
this.current = 0;
this.size = 10;
this.frame_height = 400;
this.frame_width = 600;
this.initialize=function()
{
if(document.images)
{
var count = 1;
for(count=1;count<=this.size;count++)
{
this.image[count] = new Image();
this.image[count].src = 'images/'+count+'.jpg';
}
}
divImg.id = "divImg";
divImg.setAttribute("Width",this.frame_width);
divImg.setAttribute("align","center");
divImg.setAttribute("margin","0px auto");
divBtn.id = "divBtn";
divBtn.setAttribute("align","center");
divBtn.setAttribute("backgroung-color","Black");
divBtn.setAttribute("color","White");
divBtn.style.margin = "0px auto";
divBtn.className ="btn";
pictureFrame.src = this.image[this.initial].src;
pictureFrame.setAttribute('Width',this.frame_width);
pictureFrame.setAttribute('Height',this.frame_height);
pictureFrame.name = 'img';
btnNext.innerHTML='NEXT';
btnPrevious.innerHTML='PREVIOUS';
btnLast.innerHTML='LAST';
btnFirst.innerHTML='FIRST';
btnFirst.onclick=this.first;
btnLast.onclick=this.last;
btnPrevious.onclick=this.previous;
btnNext.onclick=this.next;
myForm.appendChild(pictureFrame);
divImg.appendChild(myForm);
divBtn.appendChild(btnFirst);
divBtn.appendChild(btnPrevious);
divBtn.appendChild(btnNext);
divBtn.appendChild(btnLast);
pageBody.appendChild(divImg);
pageBody.appendChild(divBtn);
headerTag.appendChild(pageBody);
}
this.next=function()
{
alert(this.size);
alert(this.current);
if (this.current < this.size)
{
this.current +=1;
pictureFrame.src = this.image[this.current].src;
}
else
{
alert("This is the last image");
}
}
this.previous=function()
{
alert(this.current);
alert(this.initial);
if (this.current > this.initial)
{
this.current = this.current-1;
pictureFrame.src = this.image[this.current].src;
}
else
{
alert("This is the first image");
}
}
this.first=function()
{
this.current=this.initial;
pictureFrame.src = this.image[this.current].src;
}
this.last=function()
{
alert(this.size);
this.current=this.size;
pictureFrame.src = this.image[this.current].src;
}
};
var divImg= document.createElement('div');
var divBtn = document.createElement('div');
var btnFirst= document.createElement('button');
var btnNext= document.createElement('button');
var btnPrevious= document.createElement('button');
var btnLast= document.createElement('button');
var divTop = document.createElement('div');
var headerTag = document.getElementsByTagName('html')[0];
var pageBody = document.createElement('body');
var myForm=document.createElement("form");
var pictureFrame = document.createElement('img');
var pics=new gallery();
window.onload=pics.initialize();

You're expierencing an out of scope failure which is very common to people who are new to ECMAscript.
Every function has it's own execution context and each context in ECMA-/Javascript has its own this context variable. To avoid this, the most common way is to store a reference to the "outer" this context-variable in a local variable:
function gallery()
{
this.image = new Array(10);
this.initial = 1;
this.current = 0;
this.size = 10;
this.frame_height = 400;
this.frame_width = 600;
var self = this;
//...
this.initialize=function()
{
if(document.images)
{
var count = 1;
for(count=1;count<=self.size;count++)
{
self.image[count] = new Image();
self.image[count].src = 'images/'+count+'.jpg';
}
}
// ...
This will work in like every Javascript environment. In the meantime, there are "better" (other) ways to avoid this problem in ECMA. For instance, ECMAscript Edition 5 introduces the .bind() method which let you "bind" the reference from the this context variable to an object of your choice. Lots of javascript frameworks offer a pretty similar way of binding this to an object, even Javascript itself lets you do it with a little effort.

What jAndy said is correct, when the window object calls pics.initialise, this refers to window (this refers to the caller of the function, unless the function is anonymous).
However there is a simpler solution that you may prefer:
Instead of
var pics = new gallery();
window.onload = pics.initialize;
You can do:
var pics = new gallery();
window.onload = function() {
pics.initialize();
};
Because it is wrapped in an anonymous function, this will refer to the gallery instance, instead of window.
jAndy's suggestions are definitely more robust, but may be a bit difficult for someone still grappling with Javascript.

ipad safari stops running code events (canvases with 1 image object) out of memory

(Yeah I'm from sweden so my english might not be perfect ;)
I have troubles with memory on the ipad. This code does not crash the broser, but it just stops. At some point it never goes in to any of the event handlers on the Image object. I have no clue why..? I have searched the forum and googled for a couple of days about workarounds. But they don't really fit what I am trying to achieve(?). (Because I only have 1 Image object).
What I have created is as follows:
1 main canvas which is visible to the user.
16 other canvases which I draw on.
1 Image Object which I load images with.
all images are pngs with alpha and have the following dimension 900x373 px. All the canvases have the same dimensions.
On the 16 other canvases there are drawn 8 images.
The purpose of this is to be able to rotate an object which has interchangable layers.
(1 angle is an object from a different angle, so it will look like it's rotating when the main loop runs.) The rotation is supposed to be controlled by touch/mouse but this should demonstrate what I want to achieve.
I know that this is a lot of code to look through and it might not be the best written code either since I'm a novice at javascript. However it does work fine on my laptop in chrome.
I've read something about events holding references to imageObjects and therefore they would not get GC'd. But does that imply here when I only have one Image Object ?
I also tried adding and removing the listeners with jquery syntax but no success.
It would be much appreciated if anyone would take the time to answer this.
Regards Oscar.
initialization of variables:
var drawingCanvas = null;
var context = null;
var numAngles = 8;
var angleStep = 32/ numAngles;
var canvasAngles = [];
var loadStatus = {};
var basePath = "assets_900/";
var layerPaths = [];
var layerPathsA = ["black/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsB = ["red/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsC = ["black/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsD = ["red/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];
var layerPathsArr = [layerPathsA,layerPathsB,layerPathsC,layerPathsD];
layerPathsCounter = 0;
var numLayers = layerPaths.length;
var imageInit = null;
var SW = 900; //1920
var SH = 373; //796
var loopcounter = 0;
first setup of canvases and other stuf:
layerPaths = layerPathsArr[0];
drawingCanvas = document.getElementById('myDrawing');
context = drawingCanvas.getContext('2d');
for(var i = 0; i < numAngles; i++){
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
canvasContext.createImageData(SW, SH);
canvas.height = SH;
canvas.width = SW;
canvasAngles.push(canvas);
}
this will init the loop, and then it will never stop, it will jsut continue until mobile safari crashes:
loadImage(0,0,0);
this is a loop that loads images:
when it has loaded 8 images it draws them on one of the 16 canvases and then that canvas gets drawn on the visible canvas. then it loads a new angle and 8 new images , and so on...
function loadImage(pathIndex,layerIndex,angleIndex){
if(layerIndex < layerPaths.length ){
//logger.log("path :" + pathIndex +" lajr : "+ layerIndex + " angl: " + angleIndex);
imageInit = new Image();
imageInit.onload = function(){
var canvas = canvasAngles[angleIndex];
var canvasContext = canvas.getContext('2d');
canvasContext.drawImage(imageInit,0, 0);
imageInit.onload = null;
imageInit.onerror = null;
imageInit.onabort = null;
imageInit.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
imageInit = null;
delete imageInit;
loadImage(pathIndex,layerIndex+1,angleIndex);
}
imageInit.onerror = function(){
logger.log("Error loading, retrying....");
loadImage(pathIndex,layerIndex,angleIndex);
}
imageInit.onabort = function(){
logger.log("Error loading (aborted)");
}
var path = "";
if(pathIndex < 10){
path = basePath + layerPaths[layerIndex] + "img000"+ pathIndex + ".png";
}else{
path = basePath + layerPaths[layerIndex] + "img00"+ pathIndex + ".png";
}
imageInit.src = path;
}else{
displayAngle(angleIndex);
if(angleIndex > numAngles-2){
logger.log("turns : " + loopcounter++ +" C: " + layerPathsCounter);
clearCanvases();
loadImage(0,0,0);
layerPathsCounter++;
if(layerPathsCounter > layerPathsArr.length-1){
layerPathsCounter = 0;
}
layerPaths = layerPathsArr[layerPathsCounter];
}else{
loadImage(pathIndex+angleStep,0,angleIndex+1);
}
}
}
heres a couple of helper functions :
function clearCanvases(){
for(var i = 0; i < numAngles; i++){
var canvas = canvasAngles[i];
var canvasContext = canvas.getContext('2d');
canvasContext.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);
}
}
function displayAngle(index){
context.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);
var canvas = canvasAngles[index];
context.drawImage(canvas,0,0);
}
HTML :
<body >
<canvas id="myDrawing" width="900" height="373">
<p>Your browser doesn't support canvas. (HEHE)</p>
</canvas>
</body>

It seems like you can only load ~6.5 mb in one tab. And as far as I know there is no way to free up this memory (?)
this will load about 13 500kb imqages on an ipad and then stop..,
http://www.roblaplaca.com/examples/ipadImageLoading/img.html