  <?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Athanazio &#187; gadget</title>
	<atom:link href="http://www.athanazio.com/tag/gadget/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.athanazio.com</link>
	<description>Nada é Simples, Mas Tudo é Possível</description>
	<lastBuildDate>Thu, 01 Dec 2011 03:47:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>nyse google gadget</title>
		<link>http://www.athanazio.com/2009/12/11/nyse-google-gadget/</link>
		<comments>http://www.athanazio.com/2009/12/11/nyse-google-gadget/#comments</comments>
		<pubDate>Fri, 11 Dec 2009 18:51:52 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[trecos]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google desktop]]></category>
		<category><![CDATA[nyse]]></category>
		<category><![CDATA[nyse dna]]></category>
		<category><![CDATA[projeto]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/2009/12/11/nyse-google-gadget/</guid>
		<description><![CDATA[Depois de mais de uma ano de projeto, finalmente esta liberado ao publico o Google Destop Gadget da bolsa de Nova Iorque ! um sistema de alertas para investidores, que funciona no google desktop, é um prazer fazer parte deste projeto]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p><a href="http://www.athanazio.com/wp-content/uploads/2009/12/nyse-google-gadget.jpg"><img src="http://www.athanazio.com/wp-content/uploads/2009/12/nyse-google-gadget-414x300.jpg" alt="nyse google gadget" title="nyse google gadget" width="414" height="300" class="alignnone size-medium wp-image-2372" /></a><br />
Depois de mais de uma ano de projeto, finalmente esta liberado ao publico o <a href="http://www.nyse.com/gadget">Google Destop Gadget da bolsa de Nova Iorque</a> ! um sistema de alertas para investidores, que funciona no google desktop, é um prazer fazer parte deste projeto <img src='http://www.athanazio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2009/12/11/nyse-google-gadget/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>google gadget &#8211; div com links</title>
		<link>http://www.athanazio.com/2008/11/26/google-gadget-div-com-links/</link>
		<comments>http://www.athanazio.com/2008/11/26/google-gadget-div-com-links/#comments</comments>
		<pubDate>Wed, 26 Nov 2008 17:22:27 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[programacao]]></category>
		<category><![CDATA[change size]]></category>
		<category><![CDATA[children]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google gadget]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[trocar altura]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1390</guid>
		<description><![CDATA[Olás apesar de saber que este problema é bem específico, vou discutir a solução aqui assim mesmo, vai que alguém passa pelo mesmo &#8230; =) é o seguinte, imagina uma div que precisa aumentar de tamanho quando passamos o mouse por cima, e reduzir quando saimos com o mouse de cima, pois bem isto seria [...]]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p><img class="alignnone size-full wp-image-1395" title="div-com-links" src="http://www.athanazio.com/wp-content/uploads/2008/11/div-com-links.png" alt="" width="287" height="214" /></p>
<p>Olás apesar de saber que este problema é bem específico, vou discutir a solução aqui assim mesmo, vai que alguém passa pelo mesmo &#8230; =)</p>
<p>é o seguinte, imagina uma div que precisa aumentar de tamanho quando passamos o mouse por cima, e reduzir quando saimos com o mouse de cima, pois bem isto seria bem facinho, bastava implementar algo no onmouseover, e o onmouseout e todo ficam felizes.</p>
<p>mas como nada é simples, tem dois labels dentro da div que são links, e quando o mouse vai sobre eles dispara o método onmouseout da  div que os contém &#8230; assim foi necessário implementar uma solução que pudesse ter labels como links dentro de uma div expansível.</p>
<p>O jeito foi tratar os clicks do mouse na div e delegar para o comportamento de cada label, e para evitar diversos ifs com os nomes das labels preferi usar uma regra de nomes, onde o metodo chamado eh o nome do componente seguido de _onclick().</p>
<p>Este techo de codigo eh o tratador de cliques da div</p>
<blockquote><p><code>function div1_onclick() {</code></p>
<p><code>for( var n=0; n &lt; div1.children.count; n++ ){</code></p>
<p><code> </code></p>
<p><code>var child = div1.children(n);</code></p>
<p><code>if( child.y &lt; event.y<br />
&amp;&amp; child.y + child.height &gt; event.y ){</p>
<p></code> </p>
<p> </p>
<p><code> eval(child.name+'_onclick();');<br />
debug.trace(child.name);<br />
}<br />
}<br />
}<br />
</code></p></blockquote>
<p>Note que percorro a lista de filhos da div, e baseado no event.y comparo se o o mesmo esta entre o y e o y+ altura do componente filho e assim identifico o nome do mesmo e uso para montar o nome do método a ser chamado, e com o método eval() executo o referido método. simples não ? =)</p>
<p>segue em anexo o codigo do google gadget para fazer isto.</p>
<p><a href="http://www.athanazio.com/wp-content/uploads/2008/11/testoverarea.zip">testoverarea</a></p>
<p>E o gadget pronto para ser instalado</p>
<p><a href="http://www.athanazio.com/wp-content/uploads/2008/11/testoverarea.gg">testoverarea gadget</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/11/26/google-gadget-div-com-links/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>sqlite no google gadget</title>
		<link>http://www.athanazio.com/2008/10/13/sqlite-no-google-gadget/</link>
		<comments>http://www.athanazio.com/2008/10/13/sqlite-no-google-gadget/#comments</comments>
		<pubDate>Mon, 13 Oct 2008 12:37:35 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[programacao]]></category>
		<category><![CDATA[activex]]></category>
		<category><![CDATA[embeded]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google gadget]]></category>
		<category><![CDATA[sqlite]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1217</guid>
		<description><![CDATA[Acompanhando a lista de discussão do google gadget developer, vi um assunto bem interessante hoje, sobre a integração do sqlite com o google gadget, ou seja como colocar um mini banco de dados dentro do google gadget &#8230; o codigo referenciado do blog de desenvolvimento do google, eh simples, mas foi necessario remexer nos comentarios [...]]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p>Acompanhando a lista de discussão do <a href="http://groups.google.com/group/Google-Desktop-Developer">google gadget developer</a>, vi um <a href="http://groups.google.com/group/Google-Desktop-Developer/browse_thread/thread/07b8146acb37c010#">assunto bem interessante hoje</a>, sobre a integração do <a href="http://www.sqlite.org/">sqlite </a>com o google gadget, ou seja como colocar um mini banco de dados dentro do google gadget &#8230;</p>
<p>o codigo referenciado do blog de desenvolvimento do google, eh simples, mas foi necessario remexer nos comentarios do post para poder colocar as pecas juntas e funcionando. O que fiz basicamente eh um gadget que grava um valor no banco em memoria, e apos isto joga este valor numa label de forma a representar tanto a gravação quanto a leitura de dados.</p>
<p>vamos ver o codigo por partes</p>
<p>este trecho é o método que esta assinalado para ser executado quando da abertura do gadget</p>
<blockquote><p>function view_onOpen() {</p></blockquote>
<p>Aqui a dll do acesso banco é lida</p>
<blockquote><p>var sqliteDLL = storage.extract(&#8220;sqlite3.dll&#8221;);</p></blockquote>
<p>A DLL lida eh registrada manualmente</p>
<blockquote><p>var wshShell = new ActiveXObject(&#8220;WScript.Shell&#8221;);<br />
wshShell.run(&#8220;regsvr32 /s \&#8221;"+sqliteDLL+&#8221;\&#8221;", 0, true);</p></blockquote>
<p>Cria o objeto baseado no activeX registrado</p>
<blockquote><p>var sqlite = new ActiveXObject(&#8220;LiteX.LiteConnection&#8221;);</p></blockquote>
<p>escreve uma linha no debug do google gadget</p>
<blockquote><p>debug.trace(&#8216;SQLite3 version: &#8216; + sqlite.version(true) );</p></blockquote>
<p>Abre em memória o banco de dados</p>
<blockquote><p>sqlite.open(&#8220;:memory:&#8221;);</p></blockquote>
<p>Cria a tabela e adiciona dados</p>
<blockquote><p>sqlite.execute(&#8220;CREATE TABLE Test(a);&#8221;);<br />
sqlite.execute(&#8220;INSERT INTO test VALUES (4);&#8221;);</p></blockquote>
<p>Executa a consulta</p>
<blockquote><p>var statement = sqlite.prepare( &#8216;SELECT * FROM test;&#8217;);</p></blockquote>
<p>Varre o conjunto de resultados e adiciona o resultado na label1</p>
<blockquote><p>while( ! statement.step() ){<br />
label1.innerText = label1.innerText + statement.ColumnValue(0);<br />
}</p></blockquote>
<p>Limpeza final, fecha o statement e fecha a conexão</p>
<blockquote><p>statement.close();<br />
sqlite.close();<br />
}</p></blockquote>
<p>Nada complicado &#8230; <img src='http://www.athanazio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>segue o codigo fonte do gadget <a href="http://www.athanazio.com/wp-content/uploads/2008/10/sql_lite_sample.zip">sql_lite_sample</a></p>
<p>e as referências usadas</p>
<p>how to embed SQLite in a Google Gadget<br />
<a href="http://googledesktopapis.blogspot.com/2008/07/tip-embed-sqlite3-database.html">http://googledesktopapis.blogspot.com/2008/07/tip-embed-sqlite3-database.html</a></p>
<p>Home of the activex wrapper<br />
<a href="http://www.assembla.com/wiki/show/litex">http://www.assembla.com/wiki/show/litex</a></p>
<p>documentation of the wrapper<br />
<a href="http://www.assembla.com/spaces/litex/documents/c-5hiSb6ar3y3sab7jnrAJ/download/litex.pdf">http://www.assembla.com/spaces/litex/documents/c-5hiSb6ar3y3sab7jnrAJ/download/litex.pdf</a></p>
<p>home of the sqlite<br />
<a href="http://www.sqlite.org/">http://www.sqlite.org/</a></p>
<p>API do google gadget<br />
<a href="http://code.google.com/apis/desktop/docs/gadget_apiref.html">http://code.google.com/apis/desktop/docs/gadget_apiref.html</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/10/13/sqlite-no-google-gadget/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>mini webserver</title>
		<link>http://www.athanazio.com/2008/09/29/mini-webserver/</link>
		<comments>http://www.athanazio.com/2008/09/29/mini-webserver/#comments</comments>
		<pubDate>Mon, 29 Sep 2008 18:24:00 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[trecos]]></category>
		<category><![CDATA[80]]></category>
		<category><![CDATA[dicas]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[http]]></category>
		<category><![CDATA[isolamento]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[miniwebserver]]></category>
		<category><![CDATA[nerd]]></category>
		<category><![CDATA[webserver]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1193</guid>
		<description><![CDATA[Estou desenvolvendo google gadgets, e alguns dados recebo de uns serviços no server, mas para desenvolver com certa independência procurei isolar os resultados destas chamadas de serviços em arquivo texto, que vou chamar remotamente como se fossem os serviços. Neste caso os dados resultantes da chamada do serviço estão no formato json, veja um exemplo [...]]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p>Estou desenvolvendo <a href="http://desktop.google.com/plugins/">google gadgets</a>, e alguns dados recebo de uns serviços no server, mas para desenvolver com certa independência procurei isolar os resultados destas chamadas de serviços em arquivo texto, que vou chamar remotamente como se fossem os serviços.</p>
<p>Neste caso os dados resultantes da chamada do serviço estão no formato <a href="http://www.json.org/">json</a>, veja um exemplo :</p>
<blockquote><p>{&#8220;date&#8221;:&#8221;02 Sep&#8221;,&#8221;error&#8221;:&#8221;",&#8221;errorFieldName&#8221;:&#8221;",&#8221;items&#8221;:[<br />
],&#8221;itemsMap&#8221;:null,&#8221;page&#8221;:0,&#8221;pageSize&#8221;:0,&#8221;pageTotal&#8221;:0,<br />
&#8220;rowCount&#8221;:0,&#8221;time&#8221;:&#8221;18:14:34 EDT&#8221;}</p></blockquote>
<p>Mas esbarrei no problema de ter que instalar um http server local para facilitar os testes, e com certeza nâo queria usar o <a href="http://www.iis.net/">IIS</a>, ou o <a href="http://www.apachefriends.org/en/xampp.html">xampp </a>que costumeiramente uso para desenvolvimento <a href="http://www.php.net/">PHP</a>, então após um cadim de pesquisa achei este simpático <a href="http://www.jibble.org/miniwebserver/">miniwebserver</a>, que funciona de forma bem simples:</p>
<ul>
<li>passo 1. executa o jar</li>
<li>passo 2. não tem passo 2 =)</li>
</ul>
<p>só isto e nada mais, executa o jar e pronto ele disponibiliza através da porta 80 os arquivos que estiverem no diretório em que o jar foi executado. fácil rápido e pequeno, show de bola !</p>
<p><a href="http://www.athanazio.com/wp-content/uploads/2008/09/simplewebserver.jar">simplewebserver</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/09/29/mini-webserver/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>google gadget &#8211; debug console</title>
		<link>http://www.athanazio.com/2008/09/26/google-gadget-debug-console/</link>
		<comments>http://www.athanazio.com/2008/09/26/google-gadget-debug-console/#comments</comments>
		<pubDate>Fri, 26 Sep 2008 14:11:27 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[programacao]]></category>
		<category><![CDATA[console]]></category>
		<category><![CDATA[debug]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google gadget]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1191</guid>
		<description><![CDATA[Agora recomeça a sessâo estou desenvolvendo google gadgets ! e como primeira lembrança : use o debug console ele é seu amigo &#8230; =) este link detalha como usar : http://code.google.com/apis/desktop/docs/Tutorials/GadgetDesigner/index.html#5 mas em sintese basta chamar debug.info(&#8216;mensagem&#8217;);]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p>Agora recomeça a sessâo estou desenvolvendo google gadgets ! e como primeira lembrança : use o debug console ele é seu amigo &#8230; =)</p>
<p>este link detalha como usar : <a href="http://code.google.com/apis/desktop/docs/Tutorials/GadgetDesigner/index.html#5">http://code.google.com/apis/desktop/docs/Tutorials/GadgetDesigner/index.html#5</a></p>
<p>mas em sintese basta chamar <strong>debug.info(&#8216;mensagem&#8217;);</strong></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/09/26/google-gadget-debug-console/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google Desktop 5.8 &#8211; It&#8217;s time to party! (i&#8217;m there)</title>
		<link>http://www.athanazio.com/2008/09/15/google-desktop-58-its-time-to-party-im-there/</link>
		<comments>http://www.athanazio.com/2008/09/15/google-desktop-58-its-time-to-party-im-there/#comments</comments>
		<pubDate>Tue, 16 Sep 2008 03:58:05 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[programacao]]></category>
		<category><![CDATA[5.8]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google gadget]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1137</guid>
		<description><![CDATA[I&#8217;m there just waiting &#8230; =) Here is the announce email Hello, The latest release of Google Desktop has been dubbed &#8220;the performance release&#8221; by various members of our team. We hope you find Google Desktop 5.8 to be faster, more stable, and more enjoyable. To celebrate, we&#8217;re throwing a get-together at our Lively developer [...]]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p>I&#8217;m there just waiting &#8230; =)</p>
<p><img class="alignnone size-full wp-image-1138" title="thzcow-waiting" src="http://www.athanazio.com/wp-content/uploads/2008/09/thzcow-waiting.jpg" alt="" width="450" height="397" /></p>
<blockquote><p>Here is the announce email</p>
<p>Hello,</p>
<p>The latest release of Google Desktop has been dubbed &#8220;the performance<br />
release&#8221; by various members of our team. We hope you find Google<br />
Desktop 5.8 to be faster, more stable, and more enjoyable.</p>
<p>To celebrate, we&#8217;re throwing a get-together at our Lively developer<br />
lounge this Wednesday, September 17, at 10:30 a.m. Pacific time to<br />
11:30 a.m.</p>
<p>Here&#8217;s the URL to the developer lounge:</p>
<p><a href="http://www.lively.com/dr?rid=-6058992854362690611" target="_blank">http://www.lively.com/dr?rid=-6058992854362690611</a></p>
<p>And start times for other timezones:</p>
<p><a href="http://www.timeanddate.com/worldclock/fixedtime.html?month=9&amp;day=17&amp;year=2008&amp;hour=10&amp;min=30&amp;sec=0&amp;p1=224" target="_blank">http://www.timeanddate.com/worldclock/fixedtime.html?month=9&amp;day=17&amp;year=2008&amp;hour=10&amp;min=30&amp;sec=0&amp;p1=224</a></p>
<p>So get your avatars ready and stop by to say hello. We&#8217;d love to hear<br />
your thoughts about 5.8 and the future of Google Desktop.</p>
<p>Now as far as the release goes, Joi&#8217;s post on the Google Blog goes<br />
into detail about the planning and engineering behind the release:</p>
<p><a href="http://googleblog.blogspot.com/2008/09/google-desktop-58-for-windows-increased.html" target="_blank">http://googleblog.blogspot.com/2008/09/google-desktop-58-for-windows-increased.html</a></p></blockquote>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/09/15/google-desktop-58-its-time-to-party-im-there/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>lively</title>
		<link>http://www.athanazio.com/2008/08/26/lively/</link>
		<comments>http://www.athanazio.com/2008/08/26/lively/#comments</comments>
		<pubDate>Tue, 26 Aug 2008 10:50:22 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[programacao]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google gadget]]></category>
		<category><![CDATA[lively]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1090</guid>
		<description><![CDATA[Oh well, here I am at the google gadgets developers room &#8230; nobody there that&#8217;s ok 6:4AM ET, everyone is supossed to be sleeping anyway heheheh, visit there at http://www.lively.com/dr?rid=-6058992854362690611]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p><img class="alignnone size-full wp-image-1091" title="at-lively" src="http://www.athanazio.com/wp-content/uploads/2008/08/at-lively.jpg" alt="" width="450" height="313" /></p>
<p>Oh well, here I am at the google gadgets developers room &#8230; nobody there <img src='http://www.athanazio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  that&#8217;s ok 6:4AM ET, everyone is supossed to be sleeping anyway heheheh,<br />
visit there at <a href="http://www.lively.com/dr?rid=-6058992854362690611"><img src="file:///C:/Users/ATHANA~1/AppData/Local/Temp/moz-screenshot.jpg" alt="" />http://www.lively.com/dr?rid=-6058992854362690611</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/08/26/lively/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>fade color</title>
		<link>http://www.athanazio.com/2008/08/25/fade-color/</link>
		<comments>http://www.athanazio.com/2008/08/25/fade-color/#comments</comments>
		<pubDate>Mon, 25 Aug 2008 13:42:47 +0000</pubDate>
		<dc:creator>athanazio</dc:creator>
				<category><![CDATA[programacao]]></category>
		<category><![CDATA[color]]></category>
		<category><![CDATA[fade]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google gadget]]></category>
		<category><![CDATA[transformation]]></category>

		<guid isPermaLink="false">http://www.athanazio.com/?p=1074</guid>
		<description><![CDATA[This is a experiment on google gadgets, based on 2 colors calculate the transition of colors to go from the first to the second, in order to create a nice color transition. This is the link for the gadgets page : my-google-gadgets And this is the piece of code that make the color calculations : [...]]]></description>
			<content:encoded><![CDATA[<div id="HOTWordsTxt" name="HOTWordsTxt"><p>This is a experiment on google gadgets, based on 2 colors calculate the transition of colors to go from the first to the second, in order to create a nice color transition.</p>
<p>This is the link for the gadgets page : <a href="http://www.athanazio.com/projetos-pessoais/my-google-gadgets/">my-google-gadgets</a></p>
<p>And this is the piece of code that make the color calculations :</p>
<style type="text/css">#out {font: normal 10pt Courier,"Courier New",monospace; background: #f5f5f5;}
.keyword {color:#0000ff;}
.object {color:#ff00ff;}
.literal {color:#cc9966;}
.comment {color:#999999;}
</style>
<div id="out"><span class="comment">/*<br />this dont validate the colors<br />*/</span><br /><span class="keyword">function</span> calculateColor( startColor,  endColor,  step,  iterations ) {<br />&nbsp;&nbsp;    <span class="keyword">var</span> redStart  =  startColor.substring(1, 3); <br />&nbsp;&nbsp;  <span class="keyword">var</span> greenStart  =  startColor.substring(3, 5); <br />&nbsp;&nbsp;  <span class="keyword">var</span> blueStart  =  startColor.substring(5); <br />&nbsp;&nbsp;  <span class="keyword">var</span> redEnd  =  endColor.substring(1, 3); <br />&nbsp;&nbsp;  <span class="keyword">var</span> greenEnd  =  endColor.substring(3, 5); <br />&nbsp;&nbsp;  <span class="keyword">var</span> blueEnd  =  endColor.substring(5); <br />&nbsp;&nbsp;  <span class="keyword">var</span> redStepColor  =  calculateOneColor( redStart,  redEnd,  step,  iterations ); <br />&nbsp;&nbsp;  <span class="keyword">var</span> greenStepColor  =  calculateOneColor( greenStart,  greenEnd,  step,  iterations ); <br />&nbsp;&nbsp;  <span class="keyword">var</span> blueStepColor  =  calculateOneColor( blueStart,  blueEnd,  step,  iterations ); <br />&nbsp;&nbsp;  <span class="keyword">return</span> <span class="literal">&#8220;#&#8221;</span>  +  redStepColor  +  greenStepColor  +  blueStepColor; <br />&nbsp;&nbsp; }<br /><span class="comment">/*<br />convert each color in the Hex format to integer<br />then calculate the difference, divide the difference <br />  by the number of iterations and multiply by the current <br />  step, convert back to hexa and you have the step color =)</p>
<p>*/</span><br /><span class="keyword">function</span> calculateOneColor( start,  end,  step,  iterations ) {<br />&nbsp;&nbsp;  <span class="keyword">var</span> intStart  =  parseInt(<span class="literal">&#8220;0X&#8221;</span>  +  start ); <br />&nbsp;&nbsp;   <span class="keyword">var</span> intEnd  =  parseInt(<span class="literal">&#8220;0X&#8221;</span>  +  end ); <br />&nbsp;&nbsp;  <span class="keyword">var</span> difference  =  intEnd  &#8211;  intStart; <br />&nbsp;&nbsp;  <span class="keyword">var</span> intOneStep  =  difference  /  iterations; <br />&nbsp;&nbsp;  <span class="keyword">var</span> intResult  =  <span class="object">Math</span>.round( intStart  +  ( intOneStep  *  step )); <br />&nbsp;&nbsp;  <span class="keyword">var</span> result  =  intResult.toString(16).toUpperCase(); <br />&nbsp;&nbsp;  <span class="keyword">if</span>( result.length  <  2 ) {<br />&nbsp;&nbsp; &nbsp;&nbsp;    result  =  <span class="literal">&#8220;0&#8243;</span>  +  result; <br />&nbsp;&nbsp; &nbsp;&nbsp;  }<br />&nbsp;&nbsp;  <span class="keyword">return</span> result; <br />&nbsp;&nbsp; }</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.athanazio.com/2008/08/25/fade-color/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

