Skip to content

TheSmiths-Widgets/ts.blurryview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blurry View Alloy LicenseTravis

This widget for the Appcelerator Titanium Alloy MVC framework provides an easy way to display a picture on the top of a blurry background.

Preview

preview

Quick Start

Get it gitTio npm

Download this repository and install it:

  • In your application's config.json file, include the following line in your dependencies:
"dependencies": {
    "ts.blurryview": "1.0"
}
  • Copy the ts.blurryview folder into your app/widgets directory.
  • Be sure to check and install all dependencies.

Or use your favorite package manager

  • gitTio: gittio install ts.blurryview

  • npm: npm install ts.blurryview

Use it

  • Require the widget in a view:

file1.xml

<Widget id="blurryView" src="ts.blurryview" />`

Which create a reference in your controller, accessible via: $.blurryView

  • Or, require it directly in a controller :
var blurryView = Alloy.createWidget("ts.blurryview");

Do not forget to initialize the widget; Before opening your window, call the widget's init method. For instance:

$.blurryView.init({
    title: "The Smiths",
    backgroundImage: "background.jpg",
    foregroundImage: "avatar.jpg",
    blurRadius: 10,
    paddings: {
        outer: 15
    }
});

Here is the list of available options:

  • title <String>: The title to display
  • foregroundImage <String | Image | Blob>: The main clear image.
  • backgroundImage <String | Image | Blob>: The blurry background image.
  • [subtitle] <String>: The subtitle below the title, if any.
  • [colors] <Object>: Colors of title or subtitle.
    • title <String>: The title's color
    • subtitle <String>: The subtitle's color
  • [fonts] <Object>: Fonts of title or subtitle
    • title <Object>: The title's font
    • subtitle <Object>: The subtitle`s font
  • [sizes] <Object>: Set the sizes of elements
    • innerHeight <Number>: The foreground picture's height
    • innerWidth <Number>: The foreground picture's width
    • outerHeight <Number>: The background picture's height
    • outerWidth <Number>: The background picture's width
  • [paddings] <Object>: All paddings
    • interTitle <Number>: Space between title and subtitle
    • outer <Number>: Space from the border of the widget
  • [borderColor] <String>: The border color of the foreground image
  • [borderWidth] <Number>: The border width of the foreground image
  • [borderRadius] <Number>: The border radius of the foreground image
  • [blurRadius] <Number>: The intensity of the blur effect

Dependencies

Changelog

  • 1.0 First version

wearesmiths

Titanium is Copyright (c) 2008-2015 by Appcelerator, Inc. All Rights Reserved. Titanium is licensed under the Apache Public License (Version 2).

Releases

No releases published

Packages

No packages published