Fixed Point Dashboard - documentation<title> <style> body, html { font-size : 11px; color : #404040; } a:link, a:visited { text-decoration : none; color : #0068a6; } a:hover{ text-decoration : none; color : #ff5f00; background : #efefef; } b { color : #202020 } </style> <pre>Fixed Point Dashboard Pyry Ahlfors 2008- pyry@kiinto.com <a name="TOC"></a> Table of contents <a href="#1">INTRODUCTION</a> .......................................................... 1 <a href="#1.1">Including dashboard to external site</a> ........................... 1.1 <a href="#2">COMPONENTS</a> ............................................................ 2 <a href="#2.1">kiintopiste_dashboard.js</a> ....................................... 2.1 <a href="#2.2">kiintopiste_ajax.js</a> ............................................ 2.2 <a href="#2.3">kiintopiste_cookies.js</a> ......................................... 2.3 <a href="#2.4">kiintopiste_dock.js</a> ............................................ 2.4 <a href="#2.5">kiintopiste_skins.js</a> ........................................... 2.5 <a href="#2.6">kiintopiste_uicontrol.js</a> ....................................... 2.6 <a href="#2.7">kiintopiste_windowcontrol.js</a> ................................... 2.7 <a href="#2.8">kiintopiste_windowdata.js</a> ...................................... 2.8 <a href="#3">FPTOOLS</a> ............................................................... 3 <a href="#3.1">fptools.js</a> ..................................................... 3.1 <a href="#3.2">animate.js</a> ..................................................... 3.2 <a href="#3.3">chrome.js</a> ...................................................... 3.3 <a href="#3.4">gradient.js</a> .................................................... 3.4 <a href="#3.5">linkparser.js</a> .................................................. 3.5 <a href="#4">Widgets</a> ............................................................... 4 Ajax Chat ...................................................... 4.1 Google Weather ................................................. 4.2 Youtube ........................................................ 4.3 <a name="1"></a> 1. INTRODUCTION ------------------------------------------------------------------------------- Fixed Point Dashboard is a javascript based widget platform. It allows you to create sophisticated widgets easily. Built-in ajax routines make it easy to download content (such as RSS-feeds) from other services. <a name="1.1"></a> 1.1. INTRODUCTION - Including dashboard to external site ------------------------------------------------------------------------------- It is possible to run dashboard on top of any page. Just include following code inside HEAD -tag  <link href="http://www.kiinto.com/experiments/javascript/dashboard/css/overlay.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var dashboardEnableDock = false; var dashboardShowInitStatus = false; var dashboardScriptPath = 'http://www.kiinto.com/experiments/javascript/dashboard/'; var fpToolsPath = 'http://www.kiinto.com/experiments/javascript/dashboard/'; </script> <script src="http://www.kiinto.com/experiments/javascript/dashboard/lib/common.js" type="text/javascript"></script> <script src="http://www.kiinto.com/experiments/javascript/dashboard/lib/tools/fptools.js" type="text/javascript"></script> <script src="http://www.kiinto.com/experiments/javascript/dashboard/lib/kiintopiste_dashboard.js" type="text/javascript"></script>  Variables: <i>dashboardEnableDock</i> : Enable or disable dock. Default <b>false</b>. <i>dashboardShowInitStatus</i> : Show Fixed Point Dashboard initializing messages. Default <b>false</b>. <i>dashboardDefaultWidgets</i> : Use set of default widgets. Default <b>true</b>. <a name="2"></a> 2. COMPONENTS ------------------------------------------------------------------------------- Fixed Point Dashboard is a collection of javascript functions for different use binded together. There are script libraries for window handling, Ajax routines, user interface and so on. <a name="2.1"></a> 2.1. Components - kiintopiste_dashboard.js ------------------------------------------------------------------------------- <a href="#2.1">kiintopiste_dashboard.js</a> is a object that loads and executes all needed components. fixedPointDashboard.init function is called when the file is loaded. The function first waits that document.body is ready and <a href="#3">FpTools</a> are initialized. More about <a href="#3">FpTools</a> in chapter 3. When document.body and <a href="#3">FpTools</a> are ready the function will execute fixedPointDashboard.include -function that will load all needed javascripts that are defined in <i>includeOrder</i> array. Principles of the function is simple: it checks of the pre-defined object exist or not. e.g. <b>["lib/kiintopiste_uicontrol.js", typeof(fixedPointUiControl)]</b> ^ Javascript file ^ Object name The function keep checking if fixedPointUiControl -object is different than undefined. When fixedPointUiControl is something else than undefined the file must be ready. After that it will move to the next file/object until the whole array is done. The inner order of <i>includeOrder</i> array is critical since there are interactions between different scripts. If the order is wrong some components may not work. <a href="#TOC">Back to TOC ^</a> <a name="2.2"></a> 2.2. Components - kiintopiste_ajax.js ------------------------------------------------------------------------------- kiintopiste_ajax.js is an AJAX framework that handles all AJAX calls. It allows you to load content from other web sites. Since there can be only one ajax request at time fixedPointAjaxFramework uses and array as an queue to line up the requests. When top of the stack is processed it will remove the record from array and start with next one Usage: <b>fixedPointAjaxFramework.addToLine(['xml_gateway.php', false, this.openFeed,</b> <sup>^1</sup> <sup>^2</sup> <sup>^3</sup> false, 'file=http://domain.com/feed.rss','GET']);</b> <sup>^4</sup> <sup>^5</sup> <sup>^6</sup> <sup>1)</sup> The actual file that is called <sup>2)</sup> Element where the content should be loaded to <sup>3)</sup> Function that is initialized after the content is loaded <sup>4)</sup> Show loaded content on screen: true/false <sup>5)</sup> Parameters <sup>6)</sup> Method: POST / GET(default) (not mandatory) example: <b>fixedPointAjaxFramework.addToLine(['php_gateway.php', exampleWidget.objectContainer, false, false, 'file=http://www.kiinto.com']);</b> Loads the content of http://www.kiinto.com (using php_gateway.php) and shows it on element called exampleWidget.objectContainer <a href="#TOC">Back to TOC ^</a> <a name="2.3"></a> 2.3. Components - kiintopiste_cookies.js ------------------------------------------------------------------------------- <a name="2.4"></a> 2.4. Components - kiintopiste_dock.js ------------------------------------------------------------------------------- kiintopiste_dock.js creates the toolbar containing widget icons. <a name="2.5"></a> 2.5. Components - kiintopiste_skins.js ------------------------------------------------------------------------------- Here you can find definitions for diffent window skins. It helps <a href="#2.7">kiintopiste_windowcontrol.js</a> to calculate window size and allows you to create different looking ui windows. <a name="2.6"></a> 2.6. Components - kiintopiste_uicontrol.js ------------------------------------------------------------------------------- <a name="2.7"></a> 2.7. Components - kiintopiste_windowcontrol.js ------------------------------------------------------------------------------- <a name="2.8"></a> 2.8. Components - kiintopiste_windowdata.js ------------------------------------------------------------------------------- <a name="3"></a> 3. FPTOOLS ------------------------------------------------------------------------------- <a href="#3">FpTools</a> or Fixed Point tools is also a collection of different scripts aimed to make coding easier. It includes libraries for animation (<a href="#3.2">animate.js</a>) , chromed interface object (<a href="#3.3">chrome.js</a>, gradient fills <a href="#3.4">gradient.js</a> etc. <a name="3.1"></a> 3.1 FPTOOLS - fptools.js ------------------------------------------------------------------------------- fptools.js containts the actual fpTools object definition. Besides that, it includes the <i>fpTools.include</i> -function which allows you to include javascript files. e.g. <b>fpTools.include('lib/tools/gradient.js');</b> <a name="3.2"></a> 3.2 FPTOOLS - animate.js ------------------------------------------------------------------------------- This library allows you to animate HTML elements. Supported values are _x, _y, _width, _height and _alpha. You will also need a starting and ending points plus ratio. e.g. <b>fpTools.animate.init($("element"), animate._y, 10, 100, 8, 30);</b> This will animate object which ID is <b>element</b>. Element start position (style.top) is 100px and end position 0px. Function will create an array containing animation value for each step. In this case the array looks like this: <b>[100,87,76,66,57,49,42,36,31,27,20,17,14,12,10,8,7,6,5,4,3,2,1,0]</b> </pre>