famous/famous

This repo is being deprecated. Please check out http://github.com/famous/engine

#THIS REPO IS DEPRECATED ##Mixed Mode can be found at https://github.com/famous/engine

If you are looking for the old website with the support material for this version of famous please visit http://deprecated.famous.org

This repo will be moved to a deprecated organization in the coming months.

If you have any questions or concerns pelase join us in the famous community slack

signup --> http://slack.famous.org/signup

famous's Issues

Add scale as an option to Scrollview

The hard-coded 1.0 scale (famous/views/Scrollview.js:212) for the GenericSync adapter feels too fast in some cases and it would be better to make it a configurable option so the scrolling speed can be controlled per-instance.

I can submit a PR if you'd like.

Blurry text in Chrome 34.0.1847.116

Due to the use of -webkit-font-smoothing: antialiased in famous.css all text in Chrome is very blurry.

Is this done for performance reasons? Or is it done simply to counteract the blur introduced by the -webkit-transform on Famous Surfaces. I can see it is a huge improvement compared to having no smoothing.

This is very noticeable on the Famous site in particular. Are there plans to try and improve this?

Is license compatible with WordPress?

Hello,

First of all, congrats and thanks for open sourcing famo.us.

We're developing WordLift, a Semantic Web open source plugin for WordPress (more here, http://wordpress.org/plugins/wordlift/).

We'd like to use famo.us to create client-side visualizations. As part of the constraints we have when publishing a plugin of WordPress is that everything we code and we use must be compliant with the GPL license (http://wordpress.org/about/license/).

Is your license compatible with that?

Thanks,
David

Surface From existing DOM element

while trying to integrate Famo.us into ember/handlebars i have created a surface called "ExistingDomSurface".
The question here is something like this already in pipeline or planned. if not can you give me any startingpoint how this was done in the angular integration?

Install page broken

http://famo.us/install.html

No worky!!

Broken link at famous university positioning lesson

There is a broken link in step two of the positioning lesson:

"...For more detail on transform matrices, check out the Layout reference guide"

Project description!

Bother to set description of your project - save time of people who see it in search results.

Maintain a list of Supported Frameworks

Not sure how much liberty the community should feel free to take yet but I took a bash a this :)

https://github.com/Famous/famous/wiki/Supported-Frameworks

Referencing the info from:
#21 - AngularJS + Famo.us
#23 - Meteor.js + Famo.us (mentions Backbone too)

Destroying a surface

The documentation for surface doesn't seem to have anything about destroying the surface.
How does one go about this?

yo famous problem

i got errors when i try to 'yo famous', this is the log:

0 info it worked if it ends with ok
1 verbose cli [ 'c:\\Program Files (x86)\\nodejs\\\\node.exe',
1 verbose cli   'c:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'install' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink c:\Program Files (x86)\nodejs\\node.exe
5 error install Couldn't read dependencies
6 error Failed to parse json
6 error Unexpected token g
7 error File: c:\Users\myname\famousProject\package.json
8 error Failed to parse package.json data.
8 error package.json must be actual JSON, not just JavaScript.
8 error
8 error This is not a bug in npm.
8 error Tell the package author to fix their package.json file. JSON.parse
9 error System Windows_NT 6.2.9200
10 error command "c:\\Program Files (x86)\\nodejs\\\\node.exe" "c:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
11 error cwd c:\Users\myname\famousProject
12 error node -v v0.10.26
13 error npm -v 1.4.3
14 error file c:\Users\myname\famousProject\package.json
15 error code EJSONPARSE
16 verbose exit [ 1, true ]

...what this can be?

Executing "yo famous" returns error (git not installed) --Mac OSX Mavericks

Receiving an error while trying to generate that famous project with yeoman

I have all the dependencies installed.

Created a new file inside documents/Famous/testApp

• mkdir testApp && cd testApp

Ran yo famous and received this error:

• (ERROR) It looks like you do not have git installed, please install it and try again.

Checked my git version with (git --version)

• git version 1.8.5.2 (Apple Git-48)

Appears error is coming from (line 45) https://github.com/Famous/generator-famous/blob/master/app/index.js

I ran (which git), it returned

• /usr/bin/git

I'm not sure what could be causing this error. I'm able to run all my other yeoman generators that I have installed without any issues.

Thanks ahead of time for the help! ;)

[Browser-Specific - FF] Latest created surface always on top of older surfaces despite Z-Translate.

In Firefox, to recreate issue.
Create Surface and StateModifier and give it a Translate Z of 0.
Create new Surface and StateModifier and give it a Translate Z of -400.
New surface will be on top of older surface in FF. To fix issue keep an array/object of Surfaces and store their translate. Based on current camera view, loop through and give them a descending z-index based on surfacesArray.length. It may be good to keep this as another function that you may run like zClean or something that is ran after creating many surfaces, so you don't clog the pipes.

Note:
Will add code this weekend to give a more clear example of issue.

Docs on famo.us have errors

I have been looking at the docs a lot and seeing quite a few of these. I mention it because some of the classes used in the examples are also showing this YUIDoc error.

They are kinda all over the place but I saw them specifically in the Transitionable page. If you look in that page there are about 3 instances of this error, if you scroll down.

three.js + Famo.us

Has anyone attempted integrating Three.js with Famo.us?

Curious as to how a Three WebGL scene embedded (or not) in a Famo.us Surface would actually perform. For example could use Famo.us for the UI of a single page app, but build a main 3D workspace on Three.js.

Most Famo.us transitions are CSS3 transforms at the moment, however WebGL support was demo'd earlier (http://codepen.io/befamous/pen/iJsHl) - when will this be released?

Requirejs relative paths

I'm currently testing out the famous library with bower in a specific vendor folder.

My setup is as following:

public/assets/js # this is where the root of my requirejs is located
public/assets/js/vendor # this is where all the bower dependencies are installed.

Now when i do require('vendor/famous/core/Engine') the engine file is required properly but the dependencies of the Engine are not. It looks for them in the public/assets/js folder.

This seems logical because famous dependencies are always loaded in this way require('famous/core/Engine') or require('famous/surfaces/ContainerSurface')

I just replaced all dependencies that start with require('famous/path/to/file') to require('../path/to/file') and for nested folders require('../../path/to/file')

After making all dependencies relative to the file i do not get any errors and all works fine.

Point i am making here is to make all dependency calls relative to the file it's in so it can be used even when the famous folder is nested in another root folder.

PS: English is not my native language so sorry if it's unclear.

yo famous installation

Hello, I am trying to create sample project with toolbelt yo program. It runs well until it wants to access the git repo of famous which gives me the following errormessage

bower famous#v0_1_1 ECMDERR Failed to execute "git ls-remote --tags --heads [email protected]:Famous/famous.git", exit code of #128

Did anyone manage to to install the whole package ??

Cant wait to play with famous but right now I am really frustrated.

Blurry Text when using a Scrollview

Here's a link to the shortest code that reproduces this in chrome: https://gist.github.com/reem/11406427.

The problem:

Not really sure where to go from here - the code is effectively just creating regular Surfaces and putting them in a Scrollview.

Undefined size on rotated object fails to account for rotation.

(Demonstration code: https://gist.github.com/rakar/856d67a7e57d27b682a7)

When a surface that has a size containing "undefined" is rotated, the rotation should be taken into consideration when determining it's size from it's parent's size. The demonstration code displays a pair of surfaces in a sequentialLayout. One of the surfaces is rotated and then sized with StateModifiers. The rotation is 90 deg. If the parent's size was multiplied by the rotation modifier's matrix and the result used to size the surface all would be well, but this appears not to be the case and as a result the actual size and the size seen by the sequentialLayout do not match.

I have included code to illustrate what the correction should be. The code is a simplified long-hand version of what the matrix code would be.

I believe that the transforms between an element with undefined size and the parent item it's size is derived from should be accounted for in determining what values to use for the undefined size elements.

Thanks.

Cannot read property 'SUPPORTS_MULTIPLE' of undefined

I am using the drag modifier and this issue is coming up
I am also using Chrome Version 34.0.1847.131
The current version of the tool belt.

   var trans = {
        method: "snap",
        peroid: 300,
        dampingRatio: 0.3,
        velocity: 0
    };

var surface= new Surface ({
        size: [61.80,100],
        content: "fileName",
        classes: [
        "backfaceVisibility"
        ],
        properties:{
            backgroundColor:"#1ABC9C",
            textAlign: "center",
            lineHeight: "100px"
        }
    });

  surface.state = new StateModifier({
        origin:[0.5,0.5],
    });

    surface.draggable = new Draggable({
        xRange: [0,220],
        yRange: [0,220]
    });

 surface.pipe(fileSurface.draggable);


 surface.on('mouseup', function() {
        surface.draggable.setPosition([0,0,0], trans);

    });

on console output

Cannot read property 'SUPPORTS_MULTIPLE' of undefined

Where is the history?

I'm confused by the intention behind "initial commit". You've graciously open sourced this code, hopefully to get the professional feedback of the community. However, you've deleted all history, all papertrail, anything that could suggest why the code exists a certain way.

Please consider publishing the history.

starter kit zip contains misnamed files & folders

the file names and folder names in the root directory of the famous-starter-0.1.1.zip archive have been prepended with famous-starter ... the files need to be renamed in order for it to work

Also it may be worth putting serve on the install page so people know how to run ... and fixing the typo on the 2nd line:-

unzip famous-starter-0.1.1.zip
cd famous-starter-0.1.1
npm install -g serve
serve

surface events - mouse should be mapped to touch

it would be nice if these events were mapped:

mousedown should be touchstart
mouseup should be touchend

Documentation Guides Layout Origin property and a few mentions.

https://famo.us/guides/dev/layout.html

It should mention that the origin is defined to be
[0,0] Left (x) , Top (y)
[1,1] Right (x) , Bottom (y)

   var surface = new Surface({
        properties: {
            background: 'red'
        },
    });

    var originModifier = new Modifier({
        origin: [0.5, 0.5] //bottom, center <--- ERROR here actual Center
    });

    var sizeModifier = new Modifier({
        size: [50, 50]
    });

    var rotateModifier = new Modifier({
        transform : Transform.rotateZ(Math.PI/4)
    });

    context.add(rotateModifier).add(sizeMod).add(originMod).add(surface);

Should also mention that -Z axis is through the screen.

Internal Links @ docs & guides

hey famous team, I've noticed that when you give click an internal link page this positioned on your share of the ad always eating up the first line where it should be positioned, I leave a screenshot of what I mean really:

i see that happens with chrome 34 (&canary ver), firefox 28 (&beta+aurora ver) & safari 7

EDIT: must redesign the responsive with more pixels than a phone, the problem is in the black top bar @ desktop pixels dimension

yo famous fails on bower

following the instructions to install Famous (as I can't find any production version available)

npm install -g generator-famous
mkdir newProject
cd newProject
yo famous
grunt serve

running yo famous always fails for me at the line

bower famous-polyfills#0.1.1          ECMDERR Failed to execute "git ls-remote --tags --heads [email protected]:Famous/polyfills.git", exit code of #128

or

bower famous#v0_1_1                   ECMDERR Failed to execute "git ls-remote --tags --heads [email protected]:Famous/famous.git", exit code of #128

apparently because

Additional error details:
Permission denied (publickey).
fatal: Could not read from remote repository.

Syntax error on Design for the Right Feel on /hello-famous intro.

Easing syntax on lines 19 and 20 should be Easing.outExpo not Easing.outExp.

Meteor.js + Famo.us

Hi, just created a first shot version for support https://github.com/raix/Meteor-famono, nothing like fresh code.

Thanks!

Nav links @ Docs and Guides

When viewing Docs and Guides, Famo.us University, Demos and Install are disabled in nav. By design?

Also noticing that when users go Home the nav loads and then reloads/animates.

tap and drag to disable touchend?

Is there any way to accomplish this? touch on an item inside scrollview always fires the on.('touchend'... event. Issue present on the taasky demo

Transitionable callbacks not executing

Can anyone verify if this bug is happening to them too? Below is the line of code to run:

var Transitionable = require("famous/transitions/Transitionable");

var state = new Transitionable(0);
state.set(100, {duration : 500}, function(){ console.log("Hey"); });

Thanks. Its just not writing "Hey" to the console.

CSS Webkit Transform issue when declaring size from css vs size from surface

This uses the webkit transform when inspection with chrome debugger and the end result is the element is centered.

   var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Surface = require('famous/core/Surface');
    var Scene = require("famous/core/Scene");
    var View = require('famous/core/View');
    var Draggable = require('famous/modifiers/Draggable');
    var EventHandler = require('famous/core/EventHandler');
    var Vector = require('famous/math/Vector')

    // Surfaces
    var ImageSurface = require('famous/surfaces/ImageSurface');

    var InputSurface = require('famous/surfaces/InputSurface');

    // Physics
    var PhysicsEngine = require('famous/physics/PhysicsEngine');
    var Rectangle = require('famous/physics/bodies/Rectangle');
    var Wall = require('famous/physics/constraints/Wall');
    var Drag = require('famous/physics/forces/Drag');
    // Modifiers
    var StateModifier = require('famous/modifiers/StateModifier');

    var mainContext = Engine.createContext();
    mainContext.setPerspective(1000);

     var wrapperModifier = new StateModifier({
        origin:[0.5,0.5],
    }); 

     var wrapper = new Surface({
        size:[300,400],
        content:"Wrapper",
        classes: ["backfaceVisibility","wrapperAwesome"],
        properties:{
            backgroundColor:"orange",
            zIndex: -1
        }
    });

   var wrapperDiv = mainContext.add(wrapperModifier);
        wrapperDiv.add(wrapper);

However when overriding and using the css to obtain width and height.
It appears that odd positioning is used ? and the centering does not take effect.

   var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Surface = require('famous/core/Surface');
    var Scene = require("famous/core/Scene");
    var View = require('famous/core/View');
    var Draggable = require('famous/modifiers/Draggable');
    var EventHandler = require('famous/core/EventHandler');
    var Vector = require('famous/math/Vector')

    // Surfaces
    var ImageSurface = require('famous/surfaces/ImageSurface');

    var InputSurface = require('famous/surfaces/InputSurface');

    // Physics
    var PhysicsEngine = require('famous/physics/PhysicsEngine');
    var Rectangle = require('famous/physics/bodies/Rectangle');
    var Wall = require('famous/physics/constraints/Wall');
    var Drag = require('famous/physics/forces/Drag');
    // Modifiers
    var StateModifier = require('famous/modifiers/StateModifier');

    var mainContext = Engine.createContext();
    mainContext.setPerspective(1000);

     var wrapperModifier = new StateModifier({
        origin:[0.5,0.5],
    }); 

     var wrapper = new Surface({
        size:[true,true],
        content:"Wrapper",
        classes: ["backfaceVisibility","wrapperAwesome"],
        properties:{
            backgroundColor:"orange",
            zIndex: -1
        }
    });

   var wrapperDiv = mainContext.add(wrapperModifier);
        wrapperDiv.add(wrapper);

app.css

html {
  background: #fff;
}

.backfaceVisibility {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.wrapperAwesome {
    /* Center wrapper perfectly */
    width: 300px;
    height: 400px;
    margin: 70px auto;
    background-color: #454545;
}

DOM generation based on context add order

Hi,

I wanted to try out a simple UI, which has elements overlapping each other (in this example they are complete covering each other).

    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');

    var mainContext = Engine.createContext();

    var foreground = new Surface({
      content: 'hello first',
      properties: {
        color: 'white',
        textAlign: 'center',
        backgroundColor: '#FA5C4F'
      }
    });

    var background = new Surface({
      content: 'hello second',
      properties: {
        color: 'white',
        textAlign: 'center',
        backgroundColor: '#FA5C4F'
      }
    });

    mainContext.add(background);
    mainContext.add(foreground);

My expectation would be that in the famous-container div there are two divs with famous-surface classes. First the background surface and as a sibling afterwards the foreground surface.
Actually it is the opposite, no matter how I change the order of the surfaces added to the context.

<div class="famous-container">
  <div class="famous-surface" style="-webkit-transform-origin: 0% 0%; opacity: 0.999999; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); color: white; text-align: center; background-color: rgb(250, 92, 79); width: 966px; height: 604px;">
    hello forground
  </div>
  <div class="famous-surface" style="-webkit-transform-origin: 0% 0%; opacity: 0.999999; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); color: white; text-align: center; background-color: rgb(250, 92, 79); width: 966px; height: 604px;">
    hello background
  </div>
</div>

Is it only possible to layout surfaces in a predictive way using modifiers and handling explicit the z-index?

Scrolling inside surface or dynamic Scrollview item

It would be nice to either have a surface that can scroll its contents just like a scrollview does, or have a surface inside a scrollview that can have a height of true ([undefined,true]) and the Scrollview will still work when the content size changes

Currently i have a listener on the window resize to adjust to scrollview and its surface by calculating the contents height.
And when the size of the content changes, due to for example an accordion or dynamically appended content, i trigger a resize event onto the scrollview.

Carousel example

Hi there, where can I find the iTunes like carousel example?

oauth / facebook / twitter login

let me know if this is a silly question, but thinking it through i'm not sure how one would handle trying to login users with a facebook account or twitter account -- everything i've seen has some kind of dom elements involved - dialogs and popups don't really seem to fit. some kind of custom server-side solution w/node.js or the like??

Famous University editor busted on Safari

The cursor is 2-3 characters off to the right in Safari. Screen recording.

Debuggex has the exact same issue, and they also use Ace editor.

Surface Object Size Defaults to 100% x 100% Even if Width/Height Set in Properties

Surface Object size defaults to 100% x 100% even if Width/Height set in properties.
Example:

var surface = new Surface({
        content: 'click me',
        properties: {
            color: 'white',
            textAlign: 'center',
            backgroundColor: '#CCC',
            width: '30%',
            height: '200px'
        }
    })

Will give a block that takes up 100% x 100% canvas. If on an event such as:

surface.setProperties({
    backgroundColor: '#CCC'
})

It will resolve to correct w x h. To fix issue from start, pass size as [false, false]

Example:

var surface = new Surface({
        size: [false, false],
        content: 'click me',
        properties: {
            color: 'white',
            textAlign: 'center',
            backgroundColor: '#CCC',
            width: '30%',
            height: '200px'
        }
    })

link to contributor agreement is broken

famous/CONTRIBUTING.md has a link to http://famo.us/legal/cla.html which gives "Cannot GET /legal/cla.html"

i made a simply typo fix to the tech docs yesterday and sent a pullreq. now the pullreq is apparently deleted? (not closed as rejected nor merged, has just disappeared) and i got an email about CLA and came to read the doc but encountered this broken link.

Supporting CoffeeScript

Any CoffeeScript fans here? Creating a sibling Yeoman generator for CoffeeScript users would be, in a word, AWESOME.

My dream: yo famous-coffee

There's three things that need to be discussed before I'd be comfortable making a CoffeeScript version of the skeleton, though.

• Building: Where should the compiled .js files go? They'll need to coexist with the .js files during the requirejs optimization phase. Compiling them right into the app/src/ folder would work but it would then clutter your source directory with compiled output; not ideal. Renaming them to *.coffee.js would help a bit, but there must be a better way... any ideas? It would be nice to be able to freely mix using .js and .coffee source code in the app/src/ folder.
• Source Maps: inline or in separate files? grunt-contrib-coffee doesn't support inline source maps, and I'm not sure where browser support is for it yet (I only know Chrome works great). Inlining them makes serving it up very easy though, otherwise we have to make sure the static file server is serving up the .map files as well and that the source mapping URL is correct.
• Style: The style established in the generator and timbre-menu-tutorial is awesome and I'd like to stick to something similar for CoffeeScript. CoffeeScript has some powerful class syntax that should be leveraged, though. The existing boilerplate should be rewritten completely in CoffeeScript. No need to rewrite the Famous libs in coffee, that would definitely be overkill. (I'm willing to work on this myself.)

Scroll Container this.surface undefined

Looks like this.surface has been replace by this.container in the implementation but surface is still used in the constructor and in the documentation section.

line 25:
* @param {Options} [options.surface=undefined] Options for the ScrollContainer instance's surface.
should be replaced by
* @param {Options} [options.container=undefined] Options for the ScrollContainer instance's surface.
line 37:
this.surface.add(this.scrollview);
should be replaced by:
this.container.add(this.scrollview);

Francesco

Docs - 2nd 'getPerspective' should be 'setPerspective'

in '/docs' 2nd 'getPerspective' should be 'setPerspective'.

Provide global namespace version (no require.js)

I want to integrate famo.us to my apps but my environment hevily depends on common.js(browserify). So it's difficult to use by conflicting require function. Maybe I can do with some hacks, but not comfortable at least.

I need all concated files or custom building kitchean if files are huge like jquery.
For example,

var Engine = require('famous/core/Engine');

will be

var Engine = famous.core.Engine;

It's no problems to use.
I'm not going to deny require.js but now difficult to say it is de facto standard. (of cource current way will be left anyway)

I tried r.js to concat files but it can't resolve require.js dependencies.(Sorry, I'm not well at require.js ecosystems)

https://gist.github.com/anonymous/10731828

All doc links are either behind a firewall or missing.

It makes sense of you want to limit the # of people accessing servers at Famo.us University, but why limit the documents describing the API, etc? Hope this is just a bug and not a plan to also trickle in people to see documentation.

publish to npm

It would be great if this package were also published to npm, ideally in a form consumable by commonjs (#27) with a proper UMD shim, not just requirejs.

Need a way of tracking animation parameters as they update

Without hacking the source code there is no event callback for each time an animation parameter is updated.

Say you have a spring animation that effects the y Position. It would be nice to have a way to track each time the y position is updated, and what that position is. It would be better to have a way of doing this somewhere besides the _update() function inside of SpringTransition.js

Install Page 404

http://famo.us/install.html

Where is the starter kit or documentation

People need one of the two to use it.

Can the dirty checking/observables code be re-used in any way?

I am doing a bit of exploration around the ideas of what a post-famo.us library would look like, and I am wondering whether this could be re-used in some way.

I've seen a lot of effort being put into updating or tricking existing libraries into working with famous, and I've started to suspect that perhaps this is a good point to break free from the past entirely.

I think that the famous event subsystem could be a suitable replacement for something like Backbone.Events in such a theoretical library, the scene graph is a very powerful replacement for the 'views' component... but maybe the famo.us dirty checking should be the basis of an observables library that 2-way binding could be built on?

While I believe that over-generalizing this code would be a mistake, I suspect this might be a low-level enough primitive to make it work. I can see that it would be beneficial to have multiple layers that make use of this functionality fail in the same way too.

This would avoid a situation where a data structure change that trips up one observables layer, works perfectly in another. Inevitably this would mean tailoring logic differently depending on which routes it is going to take, and that's an entire level of complexity to be aware of and run into the hard way.

I just think that we'd be better off if we could just say "don't do that", rather than "don't do that unless...." and list exceptions.

AngularJS + Famo.us

I just saw the launch event video of famo.us and they talked about angular.js integration with famous..

Is there any repo or an example to see that?

all information is welcome, thanks!

Examples link is broken

README refers to https://github.com/Famous/examples, which is either private or does not exist.