Display device in a surface for Meteor's famous-views.
CoffeeScript JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
private/doc
.gitignore
README.md
allDevice.coffee
desktop.jade
deviceCss.coffee
package.js
smartphone.jade
tablet.jade
versions.json

README.md

Devices - Desktop, smartphone and tablet surfaces

A plugin for famous-views.

This plugin brings devices surfaces in Blaze or Jade templating for Meteor.js. Available devices as famo.us's surfaces are:

  • Desktop
  • Smartphone
  • Tablet

Desktop Smartphone Tablet

demo: fview-devices.

Usage

Starts with the usual and add some packages:

meteor create mydevices
cd mydevices
mkdir client
meteor add gadicohen:famous-views pierreeric:fview-devices
# From here you can choose your favorite Famo.us provider, mine is Raix's one.
meteor add raix:famono

You can choose to write your HTML templates with Blaze or with Maxime Quandalle's Jade.

meteor add mquandalle:jade

And then in client directory, call your devices like this:

+StateModifier id='app' align='[.5, .5]' origin='[.5, .5]' translate='[0,0,100]'
  // For the desktop
  +desktopSvg width=400 perspective=200 clip=true template='demoContent'
  // For the smartphone
  +smartphoneSvg width=150 perspective=200 clip=true template='demoContent'
  // For the tablet
  +tabletSvg width=150 perspective=200 clip=true template='demoContent'

template(name='demoContent')
  +Surface class='test'
    | Screen background
  +StateModifier translate='[0,0,1]'
    +StateModifier align='[.5, .5]' origin='[.5, .5]' size='[50, 50]' transform='eval:Transform.rotateY(Math.PI/4)'
      +DotLoader
        |

Available attributes and their defaults are:

  • width: Widget's width, default 500.
  • perspective: Perspective of content in the widget's screen, default 0.
  • clip: Clip content in the screen, default false.

The clip property provides some nice effect. When set to false, you can create effect where the animations are literally going outside of the screen. When set to true, the widget makes you really feel that the animation is contained within the screen.

For illustration purposes, here's an example of an unclipped content: Unclipped

Examples

A basic example is provided in the Github repository.

Customization

Themes

A basic theme is provided for a nice display out of the box. You can easily customize it with CSS, LESS, Stylus or in CoffeeScript using CSSC.

Here are the default CSS classes names used on the devices:

.fview-devices-desktop-svg-empty {
  stroke: gray
  fill: silver
  stroke-width: .5  
}

.fview-devices-desktop-svg-filled {
  fill: gray
}

fview-devices-smartphone-svg-empty {
  stroke: black
  fill: gray
  stroke-width: .5  
}

.fview-devices-smartphone-svg-filled {
  fill: black
}

fview-devices-tablet-svg-empty {
  stroke: black
  fill: gray
  stroke-width: .5  
}

.fview-devices-tablet-svg-filled {
  fill: black
}