GLOB
Montagne, Informatique & Pensées...

Circliful Reloaded : Documentation

License

Licensed under MIT

Compatibility

jQuery

Tested with jQuery 1.4, developped with jQuery 1.10

Browsers

Tested and working with Firefox 29 (should work with firefox > 4) and chrome 34 (chromium) (svg or canvas)

Tested and working with IE8 (using VML) : should work with IE < 10

Requirements

Circliful Reloaded requires only jQuery

If you want to use Font Awesome, you will need to load the Font Awesome css files

Installation

Add the following script tag :

<script src="js/jquery.circliful.js"></script>

If you want to support IE versions < 10, you can also add (after the latter declaration) :

<!--[if lt IE 10]><script src="js/jquery.circliful.ie8.js"></script><![endif]-->

Init

To initalise a cirlciful display, call the following code :

jQuery([selector]).circliful([settings]);

The settings parameter is optionnal

Available Settings

background-radius

The outer radius of the background circle

background-stroke-color

The color of the background inner cirle (supports color names, Hex values, RGB values)

background-width

The width of the background outer circle

background-fill-color

The width of the background outer circle (supports color names, Hex values, RGB values)

background-fill

true to fill the background inner circle, false otherwise

foreground-color

The color of the foregroud circular arc (supports color names, Hex values, RGB values)

foreground-radius

The outer radius of the foreground circular arc

foreground-width

The width of the foreground circular arc

start-point

The start point for the drawing of the foreground circular arc. This value is to be multiplied by PI to be understood.

Examples

0 : the circle starts on the right side of the circle

-0.5 : the circle starts on the top side of the circle

-1 : the circle starts on the left side of the circle

max-angle

The max angle for the drawing of the foreground circular arc. This value is to be multiplied by PI to be understood.

Examples

1 : ultimatly draws a half circle

2 : ultimatly draws a full circle

time-between-frames

The minimum time between to frames during animation

animation-step

The step given in pourcentage between two animation frames

dimension

width and height of the canvas to be created

display-style

Style of the display : full or half : used only to calculate the position and width of various texts

circle-text-class

Class applied to the DOM element containing the main circle text

circle-text-class

Class applied to the DOM element containing the main circle text

info-text-class

Class applied to the DOM element containing the text info circle

percent

Initial value to be displayed

use-total

true to work with values, false to work with percentages
If true is used, set the total setting

total

The total to be used

icon-class

Class to be applied to the icon element

icon-display

true to display the icon / false otherwise

getText

callback method that returns the circle text to be displayed for each animation value

getInfoText

callback method that returns the circle info text to be displayed for each animation value

drawer

Object that takes care of the drawing of the circliful element
If you want to draw things differently, you can define your own drawer (CirclifulDrawer used for non-ie browsers, VMLDrawer used for ie browsers)

Drawer required methods

A drawer has to have 4 methods

init

Method called on init of the drawer and of the Circliful Reloaded Object

setParent(object parent)

Method called by the Circliful Reloaded Object to define itself as the parent

setSize(int width,int height)

Method called by the Circliful Reloaded Object to define width/height of the drawing to be done

draw()

Method called by the Circliful Reloaded Object draw a new frame

NOTE

Settings can also be set through tag attributes, just prepend data- to the setting name

Example

<div class="circliful" data-max-angle="1" data-dimension="100"></div>

Circliful Reloaded Object

Each Circliful Reloaded display has a specific object attached to it. If you want to call methods on this object, you can use the following syntax after the init

jQuery([selector]).circliful([method name],[parameters]);

Circliful Reloaded Object methods

setDrawer(Object drawer)

Defines the drawer object

getHtmlContainer()

Returns the DOM element supporting the Circliful Reloaded Object

setUseTotal(boolean usesTotal)

Sets the use-total setting

usesTotal()

Returns true if the Circliful Reloaded Object uses displays a total, false if it displays a percentage

setTotal(int total)

Sets the total setting

setValue(int value)

Sets the value setting and updates display accordingly

destroy()

destroys the current circliful instance

setSetting(string attributeName, mixed value)

Sets the value of a setting attribute and redraws

setPercentage(int percentage)

Sets the percentage setting and updates display accordingly

animateToValue(int value)

Starts an animation to the given value

animateToPercentage(int value)

Starts an animation to the given percentage

getCurrentValue()

Returns the current value during an animation

getTargetValue()

Returns the target value of an animation

addValueReachedListener(Function listener)

Adds a listener to the event of value reached : called when the target value is reached by the animation
A listener is a callback method

setSize(int dimension)

Sets the size setting

setDisplayStyle(string half|full)

Sets the display-style setting

setCircleTextClass(string class)

Sets the circle-text-class setting

setInfoTextClass(string class)

Sets the info-text-class setting

setIconDisplay(boolean iconDisplay)

Sets the icon-display setting

setIconClass(string class)

Sets the icon-class setting


Powered by Jalmot