Wednesday, February 24, 2010
4-key-keyboard
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:
It works as follows:
1. The Flex 3 application sends out a HttpRequest to a php webpage.
2. The php script queries the database and selects all elements from a table
3. The same php script outputs the table as a XML-formatted page and returns this to the Flex application
4. The Flex application interprets the XML page and creates a table output using a Datagrid.
Download here all the source files. In order to make it work with your site do the following:
Make sure you have a webserver running PHP and MySQL or PostgreSQL
- Copy DataSmart.swf and DataSmart.html to your webdirectory
- Copy either GetDataSmart_MySQL.php or GetDataSmart_PostgreSQL.php to your webdirectory, depending on the database technology you’re using.
- Rename the .php to GetDataSmart.php
- Edit the .php page to connect to your database and to query the table you want to display.
open DataSmart.html in your webbrowser and everything should work (Adobe Flash plugin needed!)
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: 
instead of this: 
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>
Thursday, October 9, 2008
the 1-Key-Keyboard project
Click here to download the complete sourcecode of this project (including .hex and Flash demo program)
Introduction:
The idea for a 1-key keyboard comes from the need as an interaction designer to make “cheap, quick and dirty prototypes.” When creating a quick screen-based demo in e.g. Adobe Flash, a common way of quickly prototyping physical actions is to assign actions to certain key presses on a keyboard. In more advanced prototypes, physical hacks to the circuit board from a keyboard are also often used to interface custom buttons and switches with a computer. (see http://wiki.arcadecontrols.com/wiki/Keyboard_Hacks)
What this project does is to create a keyboard hack that is smaller and cheaper and better reproducible than what one would get when hacking a keyboard circuit; a perfect solution for when you only want to use one switch in your prototype. (Note: 3 IO ports from the microprocessor are still unused, so it’s very easy to add 3 more switches. If you want to interface more than 4 switches, I suggest having a look here: http://www.obdev.at/products/avrusb/hidkeys.html)
To maximize the functionality of the 1-key keyboard, I implemented having a different key being sent to the computer for a key-down and a key-up event. This can be useful when you create for example a prototype that has to detect whether a physical object is pushing down a switch or not.
This project implements AVR-USB from Objective Development to emulate a standard USB keyboard using an Atmel AVR microcontroller. This project has been heavily inspired by the EasyLogger Reference project.
What does it do?
This 1-Key-Keyboard can be plugged into any computer and will be recognised as a standard USB keyboard.
When closing the switch, the keystroke ‘]’ will be sent.
When opening the switch, the keystoke ‘[’ will be sent.
That’s all.
What do we need:
1x Atmel ATTiny45-20PU or ATTiny85-20PU microcontroller (I used a ATTiny85, which has more memory than the ATTiny45 but the program will fit the ATTiny45 too)
2x Diodes (0.5W) (ordinary 1N4148 are sufficient)
2x 68 ohm resistors
1x 1.5K resistor
1x 0.1 uF capacitor
1x switch
a piece of prototype-board (striped 2.54mm single-sided)
a programmer for the Atmel AVR
the .hex file from the 1-Key-Keyboard project (Download it here)
Instructions:
First program the microcontroller with the .hex file (don’t forget to set the fuses first to 0xFF 0xDF 0xC1)
Link: Instructions for how to set up the Atmel AVR STK500 programmer to program an 8-pin ATTiny
Link: Instructions for setting up AVR studio for using the Atmel STK500 programmer
Link: Instructions for programming a .hex file with AVR Studio
With the programmed ATTiny, build the following circuit:
To keep the costs low, you can make a usb-plug from strip board (veroboard) see the pictures below
Now it’s time to test the 1-Key-Keyboard! you can test it by opening a text editor and press and release the switch a couple of times. If everything went well, you should see a series like this being typed: ][][][][][
Creating a demo-program in Adobe Flash
Here’s the actionscript 3.0 code for a demo-program which detects whether the switch is pressed or not. If the switch is pressed, the movie-clip ‘onSwitch’ is visible. When released, the movie-clip ‘offSwitch’ is visible.
//actionscript 3.0 source file
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
offSwitch.visible = true;
onSwitch.visible = false;
function reportKeyDown(event:KeyboardEvent):void {
switch (String.fromCharCode(event.charCode)) {
case ']' :
offSwitch.visible = false;
onSwitch.visible = true;
break;
case '[' :
offSwitch.visible = true;
onSwitch.visible = false;
break;
default :
break;
}
}
// end of source file
Try it out by clicking here and press/release the switch on your 1-Key-Keyboard.
or click here to download a .zip file with the .fla and .swf files
Click here to download the complete sourcecode of this project (including .hex and Flash demo program)
Feedback
Please feel free to leave comments on my 1-key-keyboard project!
Wednesday, October 8, 2008
Programming a .hex file with AVR Studio
If you just want to write an existing program to your Atmel AVR chip, without changing any actual code, you need a precompiled .hex file (a hex file is a compiled version of a program, to work on a specific microcontroller)
If you have a ATTiny45 or ATTiny85 you can Download here a precompiled .hex file for my 1-key-keyboard project. For other microcontrollers you’ll need a .hex file which is compiled for it.
Connect with AVR Studio to your device by pressing the connect button 
and selecting your programmer from the list and connect.
Before programming the actual firmware, the fuses need to be set on the AVR.
Read more about fuses here
If you’re using my 1-key-keyboard .hex file, the easiest way to get the correct setting is to change the bottom 3 values to:
EXTENDED: 0xFF
HIGH: 0xDF
LOW: 0xC1
Then press “Program” and the fuses are set! (this has to be done only once for every chip, unless you want to change these fuse settings off course)
See the picture below for the correct settings
Now you’re ready to program the actual .hex file on the AVR.
Go to the Program tab and under “Flash” select the path of the capslocker.hex file and press “Program”
If everything goes correct, the ATTiny is programmed and you get the following report (only last 5 lines visible without scrolling)
Getting isp parameter.. SD=0×0a .. OKOK
Reading FLASH input file.. OK
Entering programming mode.. OK!
Erasing device.. OK!
Programming FLASH .. OK!
Reading FLASH .. OK!
FLASH contents is equal to file.. OK
Leaving programming mode.. OK!
Now you have successfully uploaded the code to the AVR!
Setting up AVR studio for ATTiny85 (or ATTiny45 / ATTiny25) using the Atmel STK500 programmer
Software used: AVR studio
download version 4.15 here:(Click here to download AVR Studio 4.15 from www.atmel.no)or download a beta of version 4.16 here:(Click here to download AVR Studio 4.16 Beta from www.atmel.no)
After starting up AVR studio, press the connect button.
Select the “STK500 or AVRISP” option and “Auto” port selection. Then press connect
Then In the “Main” tab, select the ATTiny85 as Device.
Set Programming mode to “ISP mode” and press “Read signature”
If everything is set up OK, then you should see the following output:
Entering programming mode.. OK!
Reading signature .. 0×1E, 0×93, 0×0B .. OK!
Leaving programming mode.. OK!
Now you’re ready to start programming the ATTiny using the STK500
How to set up the Atmel AVR STK500 programmer for use with ATTiny85-20PU (or ATTiny45 / ATTiny25)
Before being able to program the ATTiny85-20PU with the STK500 you need to add 2 jumper wires on the STK500:
• One wire to connect the PB3 pin (pin 4) on the PORTB header to the XT1 pin (pin 7) on the PORTE / AUX header. This is to connect the clock system to the AVR device.
• The second wire to connect the PB5 pin (pin 6) on the PORTB header to the RST pin (pin 4) on the PORTE / AUX header. This is to connect the reset system to the AVR device.
Place the 6-pin programmer cable so that it connects ISP6PIN to SPROG1
Jumper settings:
VTAGET: Enabled
AREF: Enabled
RESET: Enabled
XTAL1: Enabled
OSCSEL: pin 1-2 Enabled
BSEL2: Enabled
All other jumpers: Disabled
Place the ATTiny85-20PU in the SCKT3400D1 socket
Connect the (12V) power supply and a (usb-to-)serial cable to connect the programmer to your computer to the RS232 CTRL port and power on the STK500
See the complete setup in the picture below
