Famo.us - Using 'proportionsFrom' in Modifiers

Question

Why am I getting voted a minus vote for this?

UPDATE - Solved

Thanks guys for pointing me in the right direction. I actually found using the View to not be as useful as I had hoped. My solution was to use a ContainerSurface.

Please find my solution here: http://jsfiddle.net/pandafinity/qntrau92/

I'm sure there is a lot of code I can cut out but ContainerSurfaces seems to be what I need.

Thanks again :)

Hi guys and Happy New Year !!

Has anyone any examples of using the new method 'proportionsFrom' for Famo.us Modifiers? https://famo.us/docs/core/Modifier

Seems a lot easier than calculating widths etc, so wondered if anyone is using it yet as there's nothing on the search engines :)

I wanted to see if it overrides size etc?

Any help would be really appreciated :)

Thanks again.

UPDATE

Here is some quick code. I am trying to call a View that is a certain size (could be a percentage size of the browser). Within this View I want another View that takes up 30% width of the outer View (not the browser window).

JSFiddle Example is here: http://jsfiddle.net/pandafinity/b68zfbyt/

-- Main file

define(function(require, exports, module) {
  'use strict';
  var Engine = require("famous/core/Engine");
  var StateModifier = require('famous/modifiers/StateModifier');
  var TestingWindow = require('app/widgets/TestingWindow');
  var mainContext = Engine.createContext();
  var contextSize = [undefined, undefined];
  var mainView = new TestingWindow();

  mainContext.setPerspective(1000);

  Engine.nextTick(function() {
    contextSize = mainContext.getSize();
    mainContext.add(mainView);
  });
});

The Main View called is 'TestingWindow' :

define(function(require, exports, module) {
  'use strict';

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  var SidePanel = require('app/lib/panels/SidePanel');

  function TestingWidget() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      content: 'Weegeet',
      properties: {
        border: '1px solid #ccc'
      }
    });

    this._mainModifier = new StateModifier({
      size: [300,500],
      origin: [0.5,0.5],
      align: [0.5,0.5],
    });
    this.sidePanel = new SidePanel();

    // This is the Proportions Bit I am asking about - but it attaches the sidePanel View
    // to the Context not the 'TestingWindow' (it appears)
    this._sidePanelModifier = new StateModifier({
      proportions: [0.3,1]
    });

    this.add(this._mainModifier).add(this.surface);

    this.add(this._sidePanelModifier).add(this.sidePanel);
  }
  TestingWidget.prototype = Object.create(View.prototype);
  TestingWidget.prototype.constructor = TestingWidget;

  module.exports = TestingWidget;
});

The 'SidePanel' View - I am hoping will be 30% width of the 'TestingWindow' View :

define(function(require, exports, module) {
  'use strict';

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  function SidePanel() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      size: [undefined,undefined],
      properties: {
        backgroundColor: 'red'
      }
    });
    this._mainModifier = new StateModifier({
      opacity: 0.6
    });

    this._add(this._mainModifier).add(this.surface);
  }
  SidePanel.prototype = Object.create(View.prototype);
  SidePanel.prototype.constructor = SidePanel;

  module.exports = SidePanel;
});

Hope this explains a little more about what I am trying to achieve.

Thanks again :)

score 1 · Accepted Answer · answered Jan 04 '15 at 18:50

1

it works like this:

var mod = new Modifier();

// set size to full-width and 100px height
mod.sizeFrom([undefined, 150]);

// set size to 50% of full-width and 10% of height (15px)
mod.proportionsFrom([0.5, 0.1]);

answered Jan 04 '15 at 18:50

IjzerenHein

2,690
1
17
13

@ljzerenHein, of course you beat me to the punch :), Hope all is well. – talves Jan 04 '15 at 19:52
Thanks for replying & Happy New Year :) I have a script that creates the Context and then calls and creates a new View (based on the autosizing example). Inside that view I create a surface which I want to have 30% width of the View (not the Context). Will the Modifier automatically recalculate the 30% width if the browser is resized? – Pandafinity Jan 05 '15 at 16:23

talves · Answer 2 · 2015-01-07T02:02:23.837

It does not actually overwrite the size. It changes the size that is rendered based on the size of the original value.

Example jsBin here

The code below will set a random proportion of 1, 2, or 3 when you click on the surface. The surface size is set to be as large as the parent context ([undefined, undefined]) and will size appropriately. The modifier will change it's size proportionately to the original size set.

Example code

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

  var surface = new Surface({ 
    size: [undefined, undefined],
    content: 'Famo.us Application',
    properties: {
      backgroundColor: 'rgba(0, 255, 0, 0.5)'
    }
  });

  var modifier = new Modifier({
    size: [100, 100],
    proportions: [2, 2]
  });

  var proportion = 1;
  function _getProportions() {
    return [proportion, proportion];
  }

  surface.on('click', function(e){
    console.log('clicked ', proportion);
    proportion = Math.floor(Math.random() * (3)) + 1;
    this.setContent('Clicked ' + this.getSize());
  });
  surface.on('resize', function() {
    console.log('changing ', proportion);
    this.setContent('Changed Size ' + this.getSize());
  });

  mainContext.add(modifier).add(surface);

  modifier.proportionsFrom(_getProportions);

[Edit]: To address your edits

Since it is the widget that will size proportionately to the parent. Let us set the proportion within the widget itself so you will not have it applied outside your widget.

Example Changes Here

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var StateModifier = require('famous/modifiers/StateModifier');
  var mainContext = Engine.createContext();
  var contextSize = [undefined, undefined];
  var TestingWindow = require('TestingWindow');

  var mainView = new TestingWindow();

  mainContext.setPerspective(1);

  Engine.nextTick(function() {
    contextSize = mainContext.getSize();
    mainContext.add(mainView);
  });
});

define('TestingWindow', function(require, exports, module) {

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  var SidePanel = require('SidePanel');

  function TestingWidget() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      content: 'Weegeet',
      properties: {
        border: '1px solid #ccc'
      }
    });

    this._mainModifier = new StateModifier({
      size: [300 ,500],
      origin: [0.5 ,0.5],
      align: [0.5 ,0.5],
    });
    this.sidePanel = new SidePanel();

    this._sidePanelModifier = new StateModifier({
      size: [undefined, undefined]
    });

    this._contextNode = this.add(this._mainModifier);
    this._contextNode.add(this.surface);
    this._contextNode.add(this._sidePanelModifier).add(this.sidePanel);
  }
  TestingWidget.prototype = Object.create(View.prototype);
  TestingWidget.prototype.constructor = TestingWidget;

  module.exports = TestingWidget;
});

define('SidePanel',function(require, exports, module) {

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  function SidePanel() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      size: [undefined,undefined],
      properties: {
        backgroundColor: 'red'
      }
    });
    this._mainModifier = new StateModifier({
      opacity: 0.6,
      proportions: [0.333, 1]
    });

    this._add(this._mainModifier).add(this.surface);
  }
  SidePanel.prototype = Object.create(View.prototype);
  SidePanel.prototype.constructor = SidePanel;

  module.exports = SidePanel;
});

Would this work this way if the Surface is in a child View that is being called in as a Variable after creating the Context? (all from separate files) I am having to customise the Render function of the View, so do I need to calculate anything or does the Modifier do this automatically? — Pandafinity, Jan 06 '15 at 11:28
Without seeing your code, it is hard to say exactly how to implement what you are asking, but should be easy to do if you follow the same methods. — talves, Jan 06 '15 at 16:03
Thanks for coming back. I have updated my question with the source code :) — Pandafinity, Jan 06 '15 at 18:18
Sorry its been ages - sorry your answer is not the correct logic for me as with your suggestion it will ALWAYs be that percentage proportion...instead of being what I make it when I call it... The widget should be full size unless otherwise proportioned....so changing the Modifier in the parent calling the child is better than defining a 'third' width' inside the encapsulated widget. Thanks — Pandafinity, Jan 18 '15 at 15:55
Like I said in the comment before yours. Without your code or user case so there was no way to know. The widget will change proportion if the parent changes size. Take my example and change the size of the parent. Also, you can always refactor to pass a proportion also. Good luck to you. — talves, Jan 18 '15 at 17:43
I'm referring to the JSFiddle example which is the same to the one you are also referring to - so same code. I appreciate your example will change the size. But I am coming from a re-useable view, so if I am using that space to display multiple 'widgets' then I want the 'TestingWidget' to handle calculating the 'proportion' of the screen. both work, just a different view on what level handles what. :) — Pandafinity, Jan 18 '15 at 17:52

Famo.us - Using 'proportionsFrom' in Modifiers

2 Answers2

Example code

[Edit]: To address your edits

Linked