How to add image inside container or surface for parallax

Question

I was trying to modify this example here

https://github.com/Famous/examples/tree/master/src/examples/surfaces/ImageSurface

My goal is make the image under a modifier which is a child of some kind of container. Then I can do setTransform to this modifier to move the image.

var Engine       = require("famous/core/Engine");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var Modifier     = require("famous/core/Modifier");
var ImageSurface = require("famous/surfaces/ImageSurface");

var mainCtx = Engine.createContext();

var image = new ImageSurface({
    size: [200, 200]
});

var container = new ContainerSurface({
    size: [200, undefined],
    properties:{
        backgroundColor: 'blue',
        overflow: 'hidden'
    }
});

image.setContent("content/famous_symbol.svg");

mainCtx.add(container).add(new Modifier({origin: [0, 0]})).add(image);

I was hoping the above code would show the logo on top left and then blue background. But so far I dont see the image appearing at all.

Any help?

UPDATE 1:

I realized doing this work:

container.add(new Modifier({origin: [0, 0]})).add(image);
mainCtx.add(container);

That is kinda weird because I thought it is the same thing as this:

mainCtx.add(container).add(new Modifier({origin: [0, 0]})).add(image);

Can someone tell me the difference?

Answer 1

The reason your original method doesn't work as you expected is because container has it's own method called .add.

mainCtx.add(container); returns a RenderNode that contains container, and so if you do mainCtx.add(container).add(...); then you are calling RenderNode.add. If you do container.add(...) then you are calling ContainerSurface.add instead of RenderNode.add; two different methods with the same name. ContainerSurface.add adds things to the new Context that exists inside of the ContainerSurface. There's a whole new scene graph tree inside of the ContainerSurface.

Answer 2

The difference the nesting levels. Think in terms of HTML flow. (though thats not whats going on here.)

Originally you were doing this:

<mainCtx>
  <container/>
  <image/>
</mainCtx>

When you changed it to:

container.add(new Modifier({origin: [0, 0]})).add(image);
mainCtx.add(container);

You added the modifier and the image inside the container, opposed to just below it.

<mainCtx>
  <container>
    <image/>
  </container>
</mainCtx>

Its not the perfect example but I hope it explains whats going on here.

EDIT:

I have removed the Modifier from the example code. You are correct in that modifiers do not work this way. My explanation was only true for Renderables (Objects with Surface as its root object)

Modifiers modify everything chained under them. Your issue is you were treating Renderables like Modifiers.