Wednesday, February 24, 2010

4-key-keyboard


note: this video is showing an early prototype, behavior of the final version is slightly modified

Introduction:

A good while back, I made the 1-key-keyboard project. Ever since it has always been in the back of my mind that the ATTiny microcontroller, which I used in this project, had still 3 IO ports which were unused. Only recently I’ve found the time to expand my old project in the most obvious way possible; by adding 3 more buttons to these IO ports and thereby creating a 4-key-keyboard, without having to add any other hardware than these 3 extra buttons.

Although this project can still easily be built on a stripboard, I chose this time to etch my own (single sided) PCB and to use an old USB cable to interface with the computer, instead of the makeshift USB-plug as used in my previous project.

[Read More…]

Tuesday, February 3, 2009

How to display any database table in a Flex 3 Datagrid

The project described in this post is made to display any table from a PostgreSQL or MySQL database in Adobe Flex 3.
(note: only text based database info will work, so it won’t work with e.g. pictures stored in a database)

Here’s an overview of the technologies used in this project:

database2flex.jpg

[Read More…]

Friday, January 30, 2009

Adobe FLEX 3 .mxml code to display xml data in a datagrid table

This post contains .mxml code which reads in a xml file and outputs a table showing all information.

The xml file should look like this: (see my previous post to see how to dynamically generate such a xml file from a PostgreSQL or MySQL database using PHP)

<?xml version="1.0" encoding="iso-8859-1"?>
<entries>
<entry><column_1_name>column_1_row_1_value</column_1_name><column_2_name>column_2_row_1_value</column_2_name> .......... </entry>
<entry><column_1_name>column_1_row_2_value</column_1_name><column_2_name>column_2_row_2_value</column_2_name> .......... </entry>
........
........
</entries>

Here is the FLEX code:
(the xml data used in this example is dynamically generated by GetDataSmart.php)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" horizontalAlign="left" verticalAlign="top" width="100%" height="100%">
<mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.http.HTTPService;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.collections.XMLListCollection;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.StringUtil;
            import mx.collections.ArrayCollection;
            
            
            private function init():void {
            	data_service.addEventListener("result", httpResult);
            	data_service.addEventListener("fault", httpFault);
            	data_service.send();
            }    
            
            [Bindable]
 			public var datalist:XMLListCollection;      
            public function httpResult(event:ResultEvent):void {
            	var x:XML = event.result as XML;
				var xl:XMLList = XMLList(x.children());
				datalist = new XMLListCollection(xl);

				list.columns=generateCols(datalist.copy(), false);
               	list.rowCount=datalist.length;
               	list.dataProvider=data_service.lastResult.entry;
              
            }
            public function httpFault(event:FaultEvent):void {
                var faultstring:String = event.fault.faultString;
                Alert.show(faultstring);
            }
            
            private function generateCols(input:XMLList, useAttributes:Boolean = false):Array {
 				var e1:XML = input[0];
 				var columns:Array = [];
 				var children:XMLList ;
 				if (useAttributes) {
 					children = e1.attributes();
 				}
 				else {
 					children = e1.children();
 				}
    			for each(var child:XML in children) {
    				var col:DataGridColumn = new DataGridColumn();
    				col.dataField = child.name();
    				columns.push(col);
 				}
 				return columns;
			}
        ]]>
</mx:Script>
<mx:HTTPService id="data_service" url="GetDataSmart.php" showBusyCursor="true" resultFormat="e4x"/>
 <mx:Panel width="100%" id="pp" resizeEffect="Resize" height="90%" layout="absolute" title="List of database: DD - Table: short02" horizontalAlign="left" verticalAlign="top">
 <mx:DataGrid id="list" width="100%" enabled="true" editable="false" textAlign="center" variableRowHeight="false" wordWrap="false" y="0" sortableColumns="true" resizableColumns="true" minColumnWidth="150" x="0" rowCount="1">
 </mx:DataGrid>
 <mx:Spacer x="0" y="445"/>
</mx:Panel>
 <mx:Spacer/>
 <mx:Button label="Reload Data" id="Reload" click="data_service.send()" width="165" height="35"/>
</mx:Application>

Thursday, January 29, 2009

PHP scripts for outputting a complete database table to xml (PostgreSQL and MySQL)

The first php scripts below connects to a postgres database, queries a full table and outputs this table as an XML page.
The second script is similar but implements a MySQL database.

The goal of creating an XML from a table is that XML files are an easy way to communicate data to Adobe Flex (and Flash)

Both PHP scripts will output a xml page that looks like this:

<?xml version="1.0" encoding="iso-8859-1"?>
<entries>
<entry><column_1_name>column_1_row_1_value</column_1_name><column_2_name>column_2_row_1_value</column_2_name> .......... </entry>
<entry><column_1_name>column_1_row_2_value</column_1_name><column_2_name>column_2_row_2_value</column_2_name> .......... </entry>
........
........
</entries>

Here is the php script using PostgreSQL:

<?php
session_start();
header("Cache-control: private");
//connect to the database.
$link = pg_connect("dbname=database user=databaseuser password=databasepassword");
//Get the data
$Query = "SELECT * from tablename";
$Result = pg_query($Query); //Execute the query
$XML = "";
$NumFields = pg_num_fields($Result);
$XML .= "<?xml version="1.0" encoding="iso-8859-1"?>\n<entries>\n";
$row = true;
while ($row = pg_fetch_row($Result)){
	$XML .= "<entry>";
	for ($i=0; $i < $NumFields; $i++)
    {   
	    $XML .= "<" . pg_field_name($Result, $i) . ">" . $row[$i] . "</" . pg_field_name($Result, $i) . ">";
    }
	$XML .= "</entry>\n";
}
$XML .= "</entries>";
echo ($XML);

pg_free_result($Result);
pg_close();
?>

Here is the php script using MySQL:

<?php
session_start();
header("Cache-control: private");
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "user" );
define( "DATABASE_PASSWORD", "password" );
define( "DATABASE_NAME", "database" );
//connect to the database.
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//Get the data
$Query = "SELECT * from table";
$Result = mysql_query( $Query );
$XML = "";
$NumFields = mysql_num_fields($Result);
$XML .= "<?xml version="1.0" encoding="iso-8859-1"?>\n";
$XML .= "<entries>\n";
$row = true;
while ($row = mysql_fetch_row($Result)){
	$XML .= "<entry>";
	for ($i=0; $i < $NumFields; $i++)
    {   
	    $XML .= "<" . mysql_field_name($Result, $i) . ">" . $row[$i] . "</" . mysql_field_name($Result, $i) . ">";
    }
	$XML .= "</entry>\n";
}
$XML .= "</entries>";
echo ($XML);

mysql_free_result($Result);
mysql_close();
?>

Saturday, January 17, 2009

Adobe Flex 3: How to automatically display the current date in a Datefield component

The following code automatically fills in the current date in a Datafield object in Flex 3.

so you have this: datafield2.jpg instead of this: datafield1.jpg

The full mxml code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="displayDate()">
	<mx:Script>
		<![CDATA[
			 public function displayDate():void {
            	                var now:Date = new Date();
				var day_int:int = now.getDate(); //gets day of the month
				var month_int:int = (now.getMonth()+1); // gets month. Months are given from 0 to 11, so you need to do +1 here
				var year_int:int = now.getFullYear(); // gets year

				var day_string:String;
				//display always 2 digits for a month, so '02' instead of just '2' for February
				if (day_int < 10) {
					day_string = "0" + day_int.toString();
				}
				else {
					day_string = day_int.toString();
				}

				var month_string:String;
				//display always 2 digits for a day, so '02' instead of just '2'
				if (month_int < 10) { 
					month_string = "0" + month_int.toString();
				}
				else {
					month_string = month_int.toString();
				}

				var year_string:String = year_int.toString();

				// note: this is displaying the date in the DD/MM/YYYY format, this same format is also set for the Datefield below!
				DateSelect.text = day_string + "/" + month_string + "/" + year_string;
			}
		]]>
	</mx:Script>
	<mx:DateField id="DateSelect" formatString="DD/MM/YYYY"/>

</mx:Application>