<?xml version="1.0" encoding="utf-8"?>
<feed version="0.3" xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="en">
<title>DreamingWell - Articles</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/" />
<modified>2008-09-17T18:22:10Z</modified>
<tagline></tagline>
<id>tag:dreamingwell.com,2008:/articles/2</id>
<generator url="http://www.movabletype.org/" version="3.01D">Movable Type</generator>
<copyright>Copyright (c) 2008, wildag</copyright>
<entry>
<title>Transcoding MythTV for UPnP transport to a PS3</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/08/transcoding_myt_1.php" />
<modified>2008-09-17T18:22:10Z</modified>
<issued>2008-08-04T04:22:21Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.45</id>
<created>2008-08-04T04:22:21Z</created>
<summary type="text/plain">MythTV has a builtin UPnP server that can serve recorded shows to the PS3&apos;s UPnP client. However, the format that MythTV records may not be directly compatible with the PS3s video client. I use the following user job in MythTV...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>MythTV</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>MythTV has a builtin UPnP server that can serve recorded shows to the PS3's UPnP client. However, the format that MythTV records may not be directly compatible with the PS3s video client. </p>

<p>I use the following user job in <a href="http://mythtv.org">MythTV</a> to transcode recorded videos to a format that is compatible for the PS3 over UPNP. My <a href="http://www.pchdtv.com/">PCHDTV-5500</a> card captures audio in <a href="http://en.wikipedia.org/wiki/Program_stream">MPEG-PS</a> and the PS3 will only play <a href="http://en.wikipedia.org/wiki/MPEG_transport_stream">MPEG-TS</a> formats (thus the requirement to transcode the video file). </p>]]>
<![CDATA[<p>Be sure to change the two instances of "/storage/mythtv" to your appropriate mythtv video directory. </p>

<div class="code">
mythcommflag -c %CHANID% -s %STARTTIME% --gencutlist; mythtranscode -c %CHANID% -s %STARTTIME% -p autodetect -m -e dvd --honorcutlist; mv /storage/mythtv/%FILE%.tmp /storage/mythtv/%FILE%; mythcommflag -c %CHANID% -s %STARTTIME% --rebuild --clearcutlist;</div>

<p>This is script performs the following steps:</p>

<ol>
<li> converts the already created commercial list into a "cut list"</li>
<ul><li>Requires that commercial flagging run before this user job</li></ul>

<p><li> transcodes the captured video to a tmp file.</li><br />
<ul><li>this step also cuts commercials</li><br />
</ul><br />
<li> overwrites the original capture file with the new file</li><br />
<li> rebuilds the commercial flags so that a normal myth frontend doesn't skip the commercials that have been cut in the transcoding</li><br />
</ol></p>

<p>Enter the script above as a "User Job" and enable that user job on any recordings  (under advanced options in MythWeb) you'd like to be able to view on your PS3.</p>]]>
</content>
</entry>
<entry>
<title>Introducing RIAStats.com</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/07/introducing_ria.php" />
<modified>2008-09-15T16:38:49Z</modified>
<issued>2008-07-24T16:33:38Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.44</id>
<created>2008-07-24T16:33:38Z</created>
<summary type="text/plain">RIAStats.com collects statistics about Rich Internet Application browser plugin deployments and provides the results publicly. The site uses a small javascript, much like Google Analytics, to detect the presence and version of RIA plugins. Like google analytics, any web site...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p><a href="http://riastats.com">RIAStats.com</a> collects statistics about Rich Internet Application browser plugin deployments and provides the results publicly. The site uses a small javascript, much like Google Analytics, to detect the presence and version of RIA plugins. Like google analytics, any web site can include this javascript and receive customized statistics. </p>

<p>Today, RIAStats.com supports Flash Player and Silverlight detection. I'm looking into adding JavaFX. Any other suggestions are welcome! </p>

<p>You can sort results by browser, operating system and language. Statistics are available as a pie chart of the last 30 days activity and a line chart that shows daily percentages. When Adobe or Microsoft releases a new version of their plugin, we'll be able to track its penetration. </p>

<p>If you like the service, try adding RIAStats to your site. Hopefully this will become a useful resource for better understanding the deployment of RIA plugins for your target audience.</p>

<p><b>WARNING</b>: If you have silver light installed on your Mac and you use Firefox 3, be sure to get the latest updates! There was a bug in the first release that caused firefox to crash. </p>]]>

</content>
</entry>
<entry>
<title>Displaying a Shapefile (.shp) on a Map in Flex</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/06/displaying_a_sh.php" />
<modified>2008-09-15T16:39:23Z</modified>
<issued>2008-06-18T22:33:42Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.43</id>
<created>2008-06-18T22:33:42Z</created>
<summary type="text/plain">Using some of my previously covered material, I have created a Flex appication that displays Shapefile (.shp) polygons on a map. This demo includes three different shapefiles that give some information about Brazos County, TX. You&apos;ll notice that you can...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>Using some of my <a href="http://www.dreamingwell.com/articles/archives/2008/06/modestmap_examp.php">previously covered material</a>, I have created a Flex appication that displays <a href="http://en.wikipedia.org/wiki/Shapefile">Shapefile</a> (.shp) polygons on a map. This demo includes three different shapefiles that give some information about Brazos County, TX. You'll notice that you can interact with the polygons, change the 'Tile Provider' (yahoo, google, microsoft, etc) and change the dataset (shapefile). The demo also includes a DBF parser to display associated text data with each polygon.</p>

<p><a href="http://dreamingwell.com/examples/flex/shapefileFlex/ShapefileExplorer.html">Running Demo</a></p>

<p><a href="http://dreamingwell.com/examples/flex/shapefileFlex/srcview/ShapefileExplorer.zip">Source Code</a></p>

<p><a href="http://dreamingwell.com/examples/flex/shapefileFlex/ModestMap.zip">ModestMaps Project</a> (Required)</p>

<p>This project makes use of <a href="http://modestmaps.com">ModestMaps</a> and <a href="http://code.google.com/p/vanrijkom-flashlibs/">Vanrijkom's Flashlibs</a> to parse the shapefile and DBF file into objects.</p>

<p>This demo is the beginning of an alternative to <a href="http://www.ilog.com/products/ilogelixir/features/maps/">ILOG Elixr Maps</a>. However, ILOG's maps come with a wonderful tool that simplifies and converts mapping data to an action-script class.  As an alternative, you could use <a href="http://www.mapshaper.org/">MapShaper.org</a> to simplify your shapefiles into a reasonable dataset for parsing in Flex. </p>

<p>You can find tons of Shapefile data sets at <a href="http://arcdata.esri.com/data/tiger2000/tiger_download.cfm">ESRI's Arc Data Repository</a> or <a href="http://www.geographynetwork.com/">GeographyNetwork.com</a>.</p>

<p>I look forward to seeing how the community puts this to use.</p>]]>

</content>
</entry>
<entry>
<title>Google SocialGraph Explorer in Flex</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/06/google_socialgr.php" />
<modified>2008-09-15T16:39:36Z</modified>
<issued>2008-06-13T19:44:44Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.42</id>
<created>2008-06-13T19:44:44Z</created>
<summary type="text/plain">Just for fun, I&apos;ve created a Google SocialGraph Explorer application in Flex. Google&apos;s web spider picks up XFN and FOAF information. The Google SocialGraph API makes that data available through a JSON API. Running Demo Source Code This application makes...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>Just for fun, I've created a <a href="http://dreamingwell.com/examples/flex/googleSocial/GoogleSocial.html">Google SocialGraph Explorer</a> application in Flex. Google's web spider picks up XFN and FOAF information. The <a href="http://code.google.com/apis/socialgraph/">Google SocialGraph API</a> makes that data available through a JSON API.</p>

<p><a href="http://dreamingwell.com/examples/flex/googleSocial/GoogleSocial.html">Running Demo</a></p>

<p><a href="http://dreamingwell.com/examples/flex/googleSocial/srcview/GoogleSocial.zip">Source Code</a></p>

<p>This application makes use of the <a href="http://code.google.com/apis/socialgraph/">Google SocialGraph API</a>, <a href="http://code.google.com/p/as3corelib/">CoreLib</a> for JSON parsing, <a href="http://mark-shepherd.com/blog/springgraph-flex-component/">SpringGraph</a> for the visualization, and <a href="http://labs.adobe.com/wiki/index.php/Cairngorm">Cairngorm</a> for the MVC framework. </p>]]>

</content>
</entry>
<entry>
<title>ModestMap Example in AIR (Updated)</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/06/modestmap_examp.php" />
<modified>2008-06-09T21:11:51Z</modified>
<issued>2008-06-08T06:49:12Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.41</id>
<created>2008-06-08T06:49:12Z</created>
<summary type="text/plain">The following was created as an example ModestMaps implementation in Adobe Air. This application shows the basic functionality of Modest Maps. You will need both of the following projects. The ModestMap Library is a checkout from the ModestMap SVN ModestMapAir...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>The following was created as an example <a href="http://ModestMaps.com">ModestMaps</a> implementation in <a href="http://adobe.com/air">Adobe Air</a>. This application shows the basic functionality of Modest Maps. </p>

<p>You will need both of the following projects. The ModestMap Library is a checkout from the <a href="http://modestmaps.mapstraction.com/trac/wiki/SubversionAccess">ModestMap SVN</a></p>

<p><a href="/examples/flex/modestmap-air2/ModestMapAir.zip">ModestMapAir Source Code</a><br />
<a href="/examples/flex/modestmap-air2/ModestMap.zip">ModestMap Library</a> </p>

<p>You can view the presentation I gave on this material via this Adobe Connect presentation recording.</p>

<p><a href="https://admin.adobe.acrobat.com/_a200985228/p21825398/">ModestMap Presentation</a></p>

<p>Two types of markers are shown in this demo. <br />
<ul><br />
<li>single point "pin" marker (Washington DC)<br />
<li>multi-point "polygon" square marker where the equator and prime merdian meet. <br />
</ul></p>

<p>The demo also shows how to switch "providers", and the various tile providers that are available.</p>]]>

</content>
</entry>
<entry>
<title>Available Mapping Solutions in Flex</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/06/available_mappi.php" />
<modified>2008-06-08T07:08:09Z</modified>
<issued>2008-06-07T21:18:02Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.40</id>
<created>2008-06-07T21:18:02Z</created>
<summary type="text/plain">Last week I gave a short presentation on available Flex mapping solutions to the DC Area Flex Users Group. We covered Yahoo Maps, ILOG Elixir, and ModestMaps. Below you&apos;ll find links to the slides I used during that presentation, in...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>Last week I gave a short presentation on available Flex mapping solutions to the <a href="http://dc-flex.org">DC Area Flex Users Group</a>. We covered <a href="http://developer.yahoo.com/flash/maps/">Yahoo Maps</a>, <a href="http://www.ilog.com/products/ilogelixir/features/maps/">ILOG Elixir</a>, and <a href="http://www.modestmaps.com">ModestMaps</a>. Below you'll find links to the slides I used during that presentation, in several formats.</p>

<p><a href="http://dreamingwell.com/examples/flex/maps/Flex Maps Presentation.ppt">Flex Mapping Solutions Power Point</a></p>

<p><a href="http://dreamingwell.com/examples/flex/maps/Flex Maps Presentation.html">Flex Mapping Solutions Flash Presentation</a></p>]]>

</content>
</entry>
<entry>
<title>Understanding Memory Leaks in ActionScript (Adobe Flex)</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/05/understanding_m.php" />
<modified>2008-09-15T16:43:36Z</modified>
<issued>2008-05-07T19:59:07Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.39</id>
<created>2008-05-07T19:59:07Z</created>
<summary type="text/plain">Thanks go to Danny of TheGoldHold.com for a bunch of this information! In ActionScript, there is no method to manually completely remove an object from memory. That task is soley the responsibility of the Flash Player&apos;s garbage collector (GC). The...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>Thanks go to Danny of <a href="http://thegoldhold.com">TheGoldHold.com</a> for a bunch of this information!</p>

<p>In ActionScript, there is no method to manually completely remove an object from memory. That task is soley the responsibility of the Flash Player's garbage collector (GC). The GC operates autonomously, and beyond the "Force GC" button in the Flex Builder memory profiler, there is no method to cause the GC to run. Therefore, memory leaks in Flex can be hard to understand and debug. </p>

<p>I have created a <a href="http://dreamingwell.com/examples/flex/memoryleak/MemoryLeakTest.zip">MemoryLeakTest project</a> in Flex Builder that show examples that are and are not memory leaks. The project contains three applications, two with memory leaks and one with out. Each sample application adds and removes a single sub-component 100 times per second. This forces the garbage collector to run, and easily shows when a memory leak occurs. The source code contains comments that explain the memory leaks, and how to avoid them, but I'll go over them briefly here as well. </p>]]>
<![CDATA[<p><b>Flash Player Memory Allocation</b></p>

<p>Memory allocation speed inside the Flash player runtime is limited by the browser. Therefore, instead of making a large number of small requests for memory, flash player makes a small number of requests for large chunks of memory. Memory deallocation is also a slow process, so flash player is reluctant to give up memory; though it will do so as necessary.  </p>

<p><b>Garbage Collector Specifics</b></p>

<p>Objects are garbage collected only when they have no other objects that contain strong references. Flash Player's runtime keeps a reference table that is updated each time a reference is made between two objects. The Garbage Collector simply uses that table to determine which objects are completely de-referenced.</p>

<p>The Garbage Collector (GC) runs directly before additional memory is requested. This way flash player can gain the memory resources used by garbage objects, and can re-evalute the need to allocate additional memory; possibly saving time. It is important to note that GC does not run immediately when an object is completely de-referenced. So, even though you've completely de-referenced an object it can and probably will stay in memory. </p>

<p><b>Identifying Memory Leaks</b></p>

<p>Flex Builder 3 Pro includes a "Profiler" tool that can be used to identify memory leaks. In that tool is a "Force Garbage Collection" button. When your application is being profiled, simply click that button and monitor the "Live Objects" list. If you believe you have complete removed and dereferenced an object, its number of "instances" should have be reduced. </p>

<p>Use the "Cumulative Instances" to determine how many instances of that object were ever created, and the "Instances" column to determine how many of those instances still exist. If after creating and removing an object, then running "Force GC", those numbers are still the same, you probably have a memory leak. </p>

<p>The "Memory Usage" chart is another way to determine whether a memory leak exists; but only for small applications. The red line represents the maximum memory use, and the blue line represents the current memory use. If the blue line and red line never separate, you have a memory leak.</p>

<p><img src="/examples/flex/memoryleak/Bad-Memory-Usage.jpg"><br />
<center>Bad Memory Usage</center></p>

<p><img src="/examples/flex/memoryleak/Good-Memory-Usage.jpg"><br />
<center>Good Memory Usage</center></p>

<p><b>Memory Leaks by Reference</b></p>

<p>Because the garbage collector determines which objects to free by their references, it is important for the developer to keep up with what references they have created. A very simple example of this is creating a reference from a parent object to a child object.</p>

<p>In the following  example, a childObject is created, and then a second reference is made to that childObject. Because that second reference still exists at the end of this code, that childObject will never be freed; unless the parent object is garbage collected.<br />
<pre>    private var childObject:Object = {test: 'test'};<br />
    private var secondReference:Object = childObject;<br />
    childObject = null;<br />
</pre></p>

<p><b>Memory Leaks by Event Listeners</b></p>

<p>Incorrect use of EventListners are the number one cause of memory leaks in ActionScript. EventListeners push references of the callback object into an array on the target object. That reference keeps the Garbage Collector from destroying the call back object. There are a few exceptions to this rule. These do not block garbage collection:</p>

<ol>
<li>Weak References</li>
<li>Self References</li>
<li>References to Child Objects</li>
</ol>

<p>Weak references are created by setting fifth argument of "addEventListner" to "true". By default, eventListeners use strong references. Note that using a weak referenced eventlistner, and then having no other reference to an object means that object will be garbage collected, so be careful!</p>

<p>An example of a weak reference event listener.<br />
<pre>   someObject.addEventListener(MouseClick.CLICK, handlerFunction, false, 0, true);<br />
</pre></p>

<p>Self references are simply references by an object to itself. A common example is adding an eventListener to a component, and handling it inside of that component. </p>

<p>An example of a self reference event listener.<br />
<pre>    this.addEventListener(MouseClick.CLICK, handlerFunction);<br />
</pre></p>

<p>Child references are references to a child object. When a parent object is garbage collected, that destroys the references to the child object. So usually, this means the child object will also be garbage collected (unless outside references to that child object exist). Therefore, it is safe to add eventListeners to an immediate child object and not worry about memory leaks. You should note that the child object will not be freed until the parent object is freed!</p>

<p>An example of a childObject event listener:<br />
<pre>     private var childObject:UIComponent = new UIComponent;<br />
     addChild(childObject);<br />
     childObject.addEventListener(MouseEvent.CLICK, clickHandler);</pre></p>]]>
</content>
</entry>
<entry>
<title>Horizontal Scrolling in DataGrids with many Columns</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/05/horizontal_scro_1.php" />
<modified>2008-05-01T19:07:36Z</modified>
<issued>2008-05-01T18:51:10Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.38</id>
<created>2008-05-01T18:51:10Z</created>
<summary type="text/plain">Out of the box, horizontal scrolling in datagrids with many columns is not smooth; especially if your view has many visible rows. A cheap and easy way around this is to disable &quot;liveScrolling&quot;. Without liveScrolling, the datagrid will not redraw...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>Out of the box, horizontal scrolling in datagrids with many columns is not smooth; especially if your view has many visible rows. A cheap and easy way around this is to disable "liveScrolling". Without liveScrolling, the datagrid will not redraw until mouseUp from the scroll.</p>

<p>To improve on that, I wanted to have vertical liveScrolling and horizontal non-liveScrolling. The solution is simply to use the following function as an event handler for the "scroll" event on the dataGrid. </p>

<p>
private function dataGridScroll(event:ScrollEvent):void
{
     exhaustGrid.liveScrolling  = (event.direction == "vertical");
}
</p>

<p>The downside is that the first vertical scroll after a horizontal scroll will not be a live scroll. I am sure there is an easy way around that.</p>]]>

</content>
</entry>
<entry>
<title>Flex 3 Map with ModestMaps</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2008/04/flex_3_map_with_1.php" />
<modified>2008-05-01T19:02:25Z</modified>
<issued>2008-04-28T15:42:02Z</issued>
<id>tag:dreamingwell.com,2008:/articles/2.37</id>
<created>2008-04-28T15:42:02Z</created>
<summary type="text/plain">ModestMaps is a BSD licensed project that enables Flex developers to create unique and robust mapping solutions. ModestMaps has the ability to use map tiles from almost any source; with built-in support for Google, MSN and Yahoo map tiles. View...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Flex</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p><a href="http://modestmaps.com/">ModestMaps</a> is a BSD licensed project that enables Flex developers to create unique and robust mapping solutions. ModestMaps has the ability to use map tiles from almost any source; with built-in support for Google, MSN and Yahoo map tiles. View 'samples' in the SVN trunk for Flex, AIR and flash for example modestmap projects. </p>

<p>Here's a compiled version of the AIR project in the ModestMaps SVN. </p>

<p><a href="http://dreamingwell.com/examples/flex/modestmap-air/ModestMapAir.air">ModestMapAir</a></p>

<p>Use the top right combo box to change the map tile provider. Use your scroll wheel to zoom in and out. Click and drag to pan around the map. </p>

<p>Note that this is a quick and dirty demo, and that portions may not work.</p>]]>

</content>
</entry>
<entry>
<title>Save to the Server Web Browser Rich HTML Editor</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2006/04/rich_html_edito.php" />
<modified>2006-04-14T02:14:56Z</modified>
<issued>2006-04-14T04:08:33Z</issued>
<id>tag:dreamingwell.com,2006:/articles/2.33</id>
<created>2006-04-14T04:08:33Z</created>
<summary type="text/plain">Dojo is a javascript tool kit that includes a RichText Editor . I have enhanced this tool to save the contents directly to the server. View the Demo...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Javascript</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p><a href="http://dojotoolkit.org/">Dojo</a> is a javascript tool kit that includes a <a href="http://dojotoolkit.org/docs/rich_text.html">RichText Editor </a>. I have enhanced this tool to save the contents directly to the server. <a href="http://devel.dreamingwell.com/javascript/textEditor.php">View the Demo</a></p>]]>

</content>
</entry>
<entry>
<title>Morhping Tabular List</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2006/04/morhping_tabula.php" />
<modified>2006-04-14T02:17:04Z</modified>
<issued>2006-04-12T22:48:24Z</issued>
<id>tag:dreamingwell.com,2006:/articles/2.32</id>
<created>2006-04-12T22:48:24Z</created>
<summary type="text/plain"> I have spent the last few days developing a &quot;fluid user interface element&quot; I call the &quot;morphing tabular list&quot;. Many of the sites I develop use table structures to present information; one item per row. The biggest caveat is...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Javascript</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[</p>

I have spent the last few days developing a "fluid user interface element" I call the "morphing tabular list". Many of the sites I develop use table structures to present information; one item per row. The biggest caveat is that these lists can grow to be quite large, but the application does not allow for paging, or shrinking the information in the list. Therefore I have created the Morphing Tabular list that creates a "middle step" in the normal "choose, click, view" process. This middle step of scrolling over an element to provide an expanded view, shrinks the list size by reducing the amount of information in each element and still provdes that "one page stop" for a list of information. Here is my working example:

<br><Br>
<script language="javascript" src="/examples/javascript/propertyOverTime.js"></script>
<script language="javascript" src="/examples/javascript/helpers.js"></script>
<script language="javascript" src="/examples/javascript/rgbcolor.js"></script>



<script language="javascript">
function goBig(target){

    /* Already Growing? */
    if(target.growingBig)
      return;
    else
      target.growingBig = true;

    height = parseInt( target.style.height);
    if (!height)  height = 20;
    
    target.startChange("style.height",height,60,250,10,3,null,notGrowingBig);

    /* Background Color */
    var currentColor = new RGBColor(target.style.backgroundColor);
    if (!currentColor.ok) {
      currentColorStr = "dddddd";
    } else {
      currentColorStr = currentColor.toHex();
    }
    
    if(currentColorStr.indexOf('#') != -1 ) currentColorStr = currentColorStr.substr(1);
    
    target.startChange("style.backgroundColor",currentColorStr,"eeaaee",250,10,1,calculateColors);

}

function notGrowingBig(target){
  target.growingBig = false;
}

function goSmall(target){
     height = parseInt( target.style.height);
    target.startChange("style.height",height,20,250,10,1);


    /* Background Color */
    var currentColor = new RGBColor(target.style.backgroundColor);
    if (!currentColor.ok) {
      currentColorStr = "ffffff";
    } else {
      currentColorStr = currentColor.toHex();
    }
    
    if(currentColorStr.indexOf('#') != -1 ) currentColorStr = currentColorStr.substr(1);

    target.startChange("style.backgroundColor",currentColorStr,"dddddd",250,10,1,calculateColors);
}

function notGrowingSmall(target){
  target.growingBig = false;
}


function calculateColors(startValue,endValue,currentChange,numberOfChanges){
  
  i = (currentChange/numberOfChanges);
  
  rSNum = Number("0x"+startValue.substr(0,2));
  rENum = Number("0x"+endValue.substr(0,2));

  gSNum = Number("0x"+startValue.substr(2,2));
  gENum = Number("0x"+endValue.substr(2,2));
  
  bSNum = Number("0x"+startValue.substr(4,2));
  bENum = Number("0x"+endValue.substr(4,2));  
  
  rI = parseInt(  ((rENum - rSNum) * i) + rSNum );
  gI = parseInt(  ((gENum - gSNum) * i) + gSNum );
  bI = parseInt(  ((bENum - bSNum) * i) + bSNum );
  
  rHex = ToHex(rI);
  gHex = ToHex(gI);
  bHex = ToHex(bI);
  
  return ""+rHex + gHex + bHex;

}


function showMessage(str){
  document.getElementById("outputBox").value = str;
}

</script>


<style type="text/css">
.something{
  background-color: #dddddd;
  border: 1px solid #aaaaaa;
  clear:left;
  height: 20px;
  cursor: pointer;
  overflow: hidden; 
}

.itemInfo{
  margin: 0px 5px 0px 5px;
}

</style>


<!-- Divs -->
<div id="target2" name="target2" class="something" onMouseOver="goBig(this);" onMouseOut="goSmall(this)";>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis.</div>
<div id="target3" name="target3" class="something" onMouseOver="goBig(this);" onMouseOut="goSmall(this)";>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis.</div>
<div id="target4" name="target4" class="something" onMouseOver="goBig(this);" onMouseOut="goSmall(this)";>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis.</div>
<div id="target11" name="target1" class="something" onMouseOver="goBig(this);" onMouseOut="goSmall(this)";>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis.</div>
<!-- End Divs -->

<br><Br>

Those intrested in usability and user interfaces should read on! I would like feed back and other takes on this user interface element.]]>
<![CDATA[
<br><Br>
Caveates of this method and this implementation include inherent limit on size of the roll over information, and the fact that rolling over an element causes the whole page to shift down. Clearly the fix for the page shifting is to display the list element expanded above the list. The size could be negated by having the expanded element be less wide than the orginal element, such that the users can scroll with their mouse down one side (maybe 50px wide) while each element expands along the rest of the list. I have yet to implement this.

I am interested in other takes on this data presentation method. Let me know what you come up with!]]>
</content>
</entry>
<entry>
<title>HP OfficeJet 4200 with Apple Aiport Remote Printing</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2006/04/hp_officejet_42.php" />
<modified>2006-04-12T01:48:46Z</modified>
<issued>2006-04-12T02:14:06Z</issued>
<id>tag:dreamingwell.com,2006:/articles/2.30</id>
<created>2006-04-12T02:14:06Z</created>
<summary type="text/plain">HPJIS provides drivers for printing to the HP OfficeJet line of printers. The OSX Install provides USB and Airport compatible functionality. These are the steps I used to make my OSX Tiger machine print to my HP OfficeJet 4215. -...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Apple</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p><a href="http://www.linuxprinting.org/macosx/hpijs/">HPJIS</a> provides drivers for printing to the HP OfficeJet line of printers. The OSX Install provides USB and Airport compatible functionality. These are the steps I used to make my OSX Tiger machine print to my HP OfficeJet 4215.</p>

<p>- Download and install <a href="http://www.linuxprinting.org/macosx/hpijs/">HPIJS and Espgs</a><br />
-  Install Espgs<br />
- Install HPJS<br />
- Reboot<br />
- Connect the Printer with a USB Connection<br />
 - Install the printer using "Printer Setup Utility" (type: HP OfficeJet 4200 foomatic/hpijs<br />
- Do a test print to be sure it works<br />
- Uninstall the printer<br />
- Connect the printer to Airport Router (via USB)<br />
- Re-install the printer using the "Printer Setup Utility"</p>

<p>I also installed <a href="http://h10025.www1.hp.com/ewfrf/wc/softwareList?lc=en&cc=us&dlc=en&product=351106&lang=en&os=219">HPs Printing Only drivers</a>, <a href="http://gimp-print.sourceforge.net/">GIMP-Print</a> , but I don't believe either helped. </p>]]>

</content>
</entry>
<entry>
<title>Bluetooth Serial to the Gumstix</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2005/10/serial_to_the_g_1.php" />
<modified>2005-11-01T00:49:38Z</modified>
<issued>2005-11-01T02:41:42Z</issued>
<id>tag:dreamingwell.com,2005:/articles/2.28</id>
<created>2005-11-01T02:41:42Z</created>
<summary type="text/plain">I was having quite a time simply connecting to the bluetooth serial port of the gumstix from my mac. I was recieving a message that the rfcomm connection had been refused (even after pairing, with the gumstix). It seems that...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Gumstix</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>I was having quite a time simply connecting to the bluetooth serial port of the gumstix from my mac. I was recieving a message that the rfcomm connection had been refused (even after pairing, with the gumstix). It seems that initiating the pairing from the mac was not "sticking" with the gumstix. The gumstix also has "pand --persistant" mode on by default, which appears to restart the rfcomm device constantly. </p>]]>
<![CDATA[<p>I disabled PAND on startup by setting PAND=false from /etc/default/bluetooth</p>

<p>I then intiated a connection, and pairing request from the gumstix with:</p>

<p>hcitool scan<br />
hcitool inq <br />
hcitool cc <btaddr><br />
hcitool auth <btaddr></p>

<p>The pin number is held in /etc/bluetooth/pin</p>

<p>Make sure the mac has no knowledge of the Gumstix device in bluetooth preferences.</p>]]>
</content>
</entry>
<entry>
<title>Gumstix Project</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2005/10/gumstix_project.php" />
<modified>2005-11-01T00:38:39Z</modified>
<issued>2005-11-01T02:36:02Z</issued>
<id>tag:dreamingwell.com,2005:/articles/2.27</id>
<created>2005-11-01T02:36:02Z</created>
<summary type="text/plain">I&apos;ve recently ordered a Gumstix Connex. I&apos;ll be using this to continue my education in microcontrollers, open source development, and new diciplines. You&apos;ll see some of my simple notes here from time to time....</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>
<dc:subject>Gumstix</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>I've recently ordered a <a href="http://www.gumstix.org">Gumstix Connex</a>. I'll be using this to continue my education in microcontrollers, open source development, and new diciplines. You'll see some of my simple notes here from time to time.</p>]]>

</content>
</entry>
<entry>
<title>SSH Passkey</title>
<link rel="alternate" type="text/html" href="http://dreamingwell.com/articles/archives/2005/02/ssh_passkey.php" />
<modified>2005-02-23T00:06:05Z</modified>
<issued>2005-02-22T05:36:24Z</issued>
<id>tag:dreamingwell.com,2005:/articles/2.25</id>
<created>2005-02-22T05:36:24Z</created>
<summary type="text/plain">Here is a nifty trick to pair an ssh client and server. Using this technique, you&apos;ll be able to SSH from one computer to another without a password. Always use common sense when by passing authentications schemes. This particular technique...</summary>
<author>
<name>wildag</name>
<url>dreamingwell.com</url>
<email>travis@dreamingwell.com</email>
</author>

<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://dreamingwell.com/articles/">
<![CDATA[<p>Here is a nifty trick to pair an ssh client and server. Using this technique, you'll be able to SSH from one computer to another without a password. </p>

<p><b>Always use common sense when by passing authentications schemes.</b> This particular technique removes the use of a password to access a server. Meaning if someone gains access to your client terminal, then they immediately have access to your server terminal.</p>

<p>From Client terminal, create a key.</p>

<p style="margin: 10px;">ssh-keygen -t dsa</p>
This only needs to be done once per client. If you do not wish to enter a password each time you ssh to a server, then simply do not provide a passphrase.

<p>This public part of this key will be stored on your server. When the client terminal connects, the private part of this key will be used to authenicate; this is instead of a simple password.</p>

<p>Use this <a href="/files/putkey.sh">putkey.sh</a> script (thanks <a href="http://www.arenasoftware.com">arenasoftware.com</a>) from your client to place the public part of your newly generated key on the server.</p>

<p style="margin-left: 10px;">sh ./putkey.sh user@host.tld</a>

<p>To remove this from your server, remove the entry from the .ssh directory in your home path.</p>]]>

</content>
</entry>

</feed>