Sape’s Blog

Quick, a little snippet on adding client side scripts (javascript) in a web part or ASP.NET page. And the link to MSDN where I found this wonderful information. My script was small, basically an alert to tell the user he/she is stupid. So I embedded the script in the Web Part. It worked. Here is my code snippet, since the one on MSDN was using old function to register the client script.

    private const string ByeByeIncludeScriptKey = "myByeByeIncludeScript";
    private const string EmbeddedScriptFormat =
          "<script language=javascript>alert('Bye Bye');</script> ";

    public WebPart_ClientScript()
    {
       this.PreRender += new EventHandler(WebPart_ClientScript_PreRender);
    }

    private void WebPart_ClientScript_PreRender(object sender , System.EventArgs e )
    {

            if (!Page.ClientScript.IsClientScriptBlockRegistered(ByeByeIncludeScriptKey))
              Page.ClientScript.RegisterClientScriptBlock(typeOf(WebPart_ClientScript), ByeByeIncludeScriptKey, EmbeddedScriptFormat);
    }

Note that James.ToString() says not to use this.GetType but rather typeOf(ControlName) where control name is the web part. So the above just tosses up an alert that happens when the page loads. Although, if you did want a function in there, to have it be called, you add the OnClientClick attribute to the asp tag.

    <asp:Button runat="server" Text="Oh, Click me.." OnClientClick="ShowAlert()" />

And that “ShowAlert()” can be any function name. Simple enough.

There are a bunch of tutorials out there that use C# to create a class library and the put that in the GAC (Windows assemblies folder) etc. I could not get those to work for the life of me. The best way I have found to develop, test, and then deploy a custom SharePoint Web Part to the production server is with Visual Studio SharePoint Extensions, for VS 2005 or VS 2008. Except it seems you can only install this if you have Windows SharePoint Services 3.0 installed. And you can only install WSS 3.0 on Windows Server 2003 SP1. Sorry, no free download for that.

(more…)

At work we are trying to develop some ways to visualize data. Since game engines are great at making complicated math look cool, we are trying to use them to visualize data-sets. We wanted to test how many “dimensions” we could represent (x, y, z..size, direction, color, etc). So I made a little proof of concept with Unity3d, SQLite, and AIR. (The AIR part of will not be covered in this tutorial; but I basically used it as a simple form to input data-points, nothing crazy.)

Unity3d uses Mono which has an SQLite Library which I then modified to javascript (for some reason it worked better in javascript than C#).

In this tutorial, I will assume you already have a basic understanding of databases, scripting, and even Unity.

So the first thing we’ll do is create a new project in Unity. Then create an Empty Game Object, place it at (0,0,0), and name it 3DGraph. To create an axis, simply create a Cube, make it a child of 3DGraph by dragging it onto 3DGraph in the Hierarchy view. Lets name this X-Axis and place it at (0,0,0) and scale it (100,0.5,0.5). This should give us a nice long bar on the x axis. Repeat these steps for Y-Axis and Z-Axis, scaling the respective axis by 100 and the other by 0.5.

Once that is complete, we should have a nice X,Y,Z graph. Feel free to get fancy and add materials and colors, and add a point light or some other light source, but I will not cover how to do that. With that done, lets take a moment to go over our database.

I used SQLite Database Browser to create and manipulate the SQLite DB. Create a new table called points and save the SQLite DB file in the same directory as the Unity project, name the DB file “SqliteTest.db” or something. Here is the SQLite CREATE statement for tabel points.

CREATE TABLE points (
    id INTEGER PRIMARY KEY,
    name VARCHAR,
    x NUMERIC,
    y NUMERIC,
    z NUMERIC,
    scale NUMERIC,
    r NUMERIC,
    g NUMERIC,
    b NUMERIC,
    timeMod date
)

The name is whatever name the point has, x,y,z are the coordinates, scale is how much to scale the point (size), r,g,b are the color values, and timeMod is the date it was last modified. These are the 7 dimensions that we will visualize in this tutorial. Since it is SQLite, a TRIGGER is needed to keep the timeMod up to date when data is updated or inserted. Here is the TRIGGER statement.

CREATE TRIGGER insert_point_timeMod AFTER INSERT ON points
BEGIN
    UPDATE points SET timeMod = DATETIME('NOW') WHERE id = new.id;
END;

CREATE TRIGGER update_point_timeMod AFTER UPDATE ON points
BEGIN
    UPDATE points SET timeMod = DATETIME('NOW') WHERE id = new.id;
END;

Now that the DB is all setup perfectly, quit the SQLite Database Browser (or else you will get an error when Unity tries to access the DB). Now we need to create the script in Unity to access the DB (Project view…Create JavaSctipt). You will have to rename it to something useful, like “MySqlite” or “SQLiteUpdater”. Here is the code.

    import System; 
    import Mono.Data.Sqlite;

    var pointObject : Transform;

    private var childArray : Array = new Array();
    private var graphClone : Object;

    function Start()
    {
        var connStrn : String = "URI=file:SqliteTest.db";

        var dbcon : SqliteConnection = new SqliteConnection(connStrn);  
        dbcon.Open();

        GetTable(dbcon);
        //GetLatest(dbcon);

        dbcon.Close();
        dbcon = null;
    }

    function Update ()
    {
        var connStrn : String = "URI=file:SqliteTest.db";

        var dbcon : SqliteConnection = new SqliteConnection(connStrn);  
        dbcon.Open();

        var rowCount : int = GetRowCount(dbcon);
            //DestroyPoints();
        if((rowCount != transform.childCount - 3) || NeedUpdate(dbcon))
        {
            DestroyPoints();
            //graphClone = Instantiate(transform,Vector3.zero,Quaternion.identity);
            GetTable(dbcon);
        }
        //Debug.Log("children: " + transform.childCount);

        dbcon.Close();
        dbcon = null;
    }

    function GetRowCount(dbcon) : int
    {
        var dbcmd : Object = dbcon.CreateCommand();
        dbcmd.CommandText = "SELECT count(*) as count FROM points";

        var reader : Object;
        try
        {
            reader = dbcmd.ExecuteReader();
        }catch(err)
        {
            Debug.LogError("cmd failed:" + err.Message);    
        }
        reader.Read();
        var rowCount : int = reader.GetInt32(0);

        reader.Close();
        reader = null;
        //dbcmd.Close();
        //dbcmd = null;

        return rowCount;
    }
    private var lastUpdated : DateTime;
    
    //If no update needed, don't redraw everything
    //Format 2008-01-30 15:38:41
    //       0123,56,89,1112,1415,1718 
    //DateTime(Int32, Int32, Int32, Int32, Int32, Int32) constructor
    function NeedUpdate(dbcon) : Boolean
    {
        var latest = false;
        var dbcmd : Object = dbcon.CreateCommand();
        dbcmd.CommandText = "SELECT timeMod FROM points ORDER BY timeMod DESC LIMIT 1;";

        var reader : Object = dbcmd.ExecuteReader();
        reader.Read();

        var timeMod = reader.GetString(0);
        //Debug.Log("timeMod: " + timeMod);

        var tempYear = parseInt(timeMod[0].ToString()+timeMod[1].ToString()+timeMod[2].ToString()+timeMod[3].ToString());
        var tempMonth = parseInt(timeMod[5].ToString()+timeMod[6].ToString());
        var tempDay = parseInt(timeMod[8].ToString()+timeMod[9].ToString());
        var tempHour = parseInt(timeMod[11].ToString()+timeMod[12].ToString());
        var tempMinute = parseInt(timeMod[14].ToString()+timeMod[15].ToString());
        var tempSecond = parseInt(timeMod[17].ToString()+timeMod[18].ToString());

        var sqlUpdate  = new DateTime(tempYear,tempMonth,tempDay,tempHour,tempMinute,tempSecond);

        if(DateTime.Compare(sqlUpdate,lastUpdated) > 0) //sqlUpdate > lastUpdated
        {

            lastUpdated = sqlUpdate; //new DateTime(tempYear,tempMonth,tempDay,tempHour,tempMinute,tempSecond);
            latest = true;
        }

        //var timeInt : int = parseInt(timeMod);
        //var timeDivided : Array = timeMod.Substring(" ");
        //var timeDate : Array = timeDivided[0].split("-");
        //var timeTime : Array = timeDivided[1].split(":");
        //Debug.Log(timeDivided.ToString());// + timeDate.ToString() + timeTime.ToString());
        //pareInt

        reader.Close();
        reader = null;
        //dbcmd.Close();
        //dbcmd = null;

        return latest;
    }

    function GetTable(dbcon) : void
    {
        var dbcmd : Object = dbcon.CreateCommand();
        dbcmd.CommandText = "SELECT * FROM points;";

        var reader : Object = dbcmd.ExecuteReader();

        while(reader.Read())
        {

            var pos : Vector3 = new Vector3(reader.GetFloat(2),reader.GetFloat(3),reader.GetFloat(4));
            var scale : Vector3 = new Vector3(reader.GetFloat(5),reader.GetFloat(5),reader.GetFloat(5));
            var colour : Color = new Color(reader.GetFloat(6),reader.GetFloat(7),reader.GetFloat(8),1);

            var newChild : Transform = Instantiate(pointObject,Vector3.zero,Quaternion.identity);
            newChild.parent = transform;
            newChild.localPosition = pos;
            newChild.localScale = scale;
            newChild.renderer.material.color = colour;

            childArray.Push(newChild);
            //result += reader.GetInt32(0) + " " + reader.GetString(1) + " " + reader.GetString(2) + ", ";
            //http://msdn2.microsoft.com/en-us/library/system.data.idatareader_methods.aspx
        }

        reader.Close();
        reader = null;
        //dbcmd.Close();
        //dbcmd = null;
    }
    
    //Erase them all so we can draw all the new ones and we won't get duplicates
    function DestroyPoints() : void
    {

        //Destroy(graphClone);
        //Can't remove Transform because MeshFilter, SphereCollider, MeshRenderer depend on it!
        //var points = GetComponentsInChildren(typeof(pointObject));
        while(childArray.length > 0)
        //for(var child : Object in points)
        {
            var child = childArray.Pop();

            var meshFilters = child.GetComponentsInChildren (MeshFilter);
            for (var meshF : MeshFilter in meshFilters) {
                DestroyImmediate(meshF);
            }

            var sphereColliders = child.GetComponentsInChildren (SphereCollider);
            for (var sphere : SphereCollider in sphereColliders) {
                DestroyImmediate(sphere);
            }

            var meshRenderers = child.GetComponentsInChildren (MeshRenderer);
            for (var meshR : MeshRenderer in meshRenderers) {
                DestroyImmediate(meshR);
            }

            DestroyImmediate(child);
            //Debug.Log("Children after destroy: " + transform.childCount);
        }
    }

Change the URI to point to your SQLite DB.

    var connStrn : String = "URI=file:SqliteTest.db";

Drag this script from the Project view onto the 3DGraph game object. All that is left is to create a point object. Lets just use a sphere, so create a new sphere object, call it GraphPoint, click on 3DGraph and drag GraphPoint onto the Point Object under the script settings. You should disable the source point object so its not confused with the ones created by the script. That should be all you need. The graph should plot the points in 3D space! Yay!

To make it more appealing, we added some controls, like zooming and flying the camera around with an XBOX360 controller. Maybe I will do that in Part 2, after I get back from Hawaii!!

Monstagon was wanting to create a custom window for an AIR application at work and could not figure out how to do it. I had found a tutorial that used an apple shaped window, but I seem to have lost the bookmark. So I figured I’ll just post my own tutorial. Since that is what this dang blog is for!

First, create a new AIR application in Flex Builder. I called mine NonStandardGUI, but you can call it “whatever.” Then, open up the app-XML file (”NonStandardGUI-app.xml”) and we will edit the properties here first. This file is loaded automatically and contains all of the basic application properties. Set these properties to

systemChrome = none
transparent = true
visible = false
width = 800
height = 600
x = 100
y = 100

in the “initialWindow” section. The width, height, x and y are optional; you just need to make sure the size is big enough for the background image and the location on the screen allows you to see the whole window.

Now we will edit the NonStandardGUI.mxml (the main application file). To the WindowedApplication, add these attributes

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        showTitleBar="false" showStatusBar="false"
        backgroundAlpha="0.0" borderThickness="0" >

This gets rid of the window. If you were to save and run the app now it would display nothing.

To add your image as the background, simply an Image tag with the source pointing to the actual image file. For better performance, we want to embed these static images. This could be a PNG, JPG, SWF… So the background can be anything you can create.

<mx:Image id="background" source="@Embed(source='nonStandard_GUI_test.png')" />

With the image in place a a background, you can add all the content you like to it. Due to the nonstandard shape of the new window, laying content out might be a little more time consuming since the Flex Builder Design view doesn’t load the image for you. I have attached the source code for my NonStandard GUI for you to dissect.

Source code: nonstandardgui.zip

While working on KatanaPG (picture uploader) I ran into a memory issue. Pictures, especially those taken with 6+MP cameras, are HUGE. When I was creating the thumbnails for them in the TileList was was simply resizing them. This kept all that 6MP of data in memory just loooked smaller. I needed to resample it at a lower resolution and then dispose of the original. I tried it multiple ways, first using an Image and setting the source and then the width and height.  Then using a bitmap and scaleX and scaleY (as well as ImageSnapshop, but never go that to even work).  After posting a question to flexcoders a very kind replier said: “Use bitmap.draw.”  That method worked great.  Below is a chart of the Flex Profile peak memory for each method. Pictures imported: 23 Photo Booth pictures 640 x 480 and about 150KB on disk each.

Method	Peak Memory (KB)
image.width/height	33,351
bitmap.scaleX/scaleY	61,837
bitmap.draw	7,107

I don’t know exactly why the first two methods take up almost as much memory as Firefox, but I am glad I managed to reduce the memory significantly. Now for he part you all have been waiting for, CODE. I used this code for a TileList.itemRenderer.

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" initialize="init();" creationComplete="created();" dataChange="init()">
        <mx:Script>
            <![CDATA[
                import mx.graphics.ImageSnapshot;
                import mx.core.UIComponent;


                private var _created:Boolean = false;

                private function created():void
                {
                    _created = true;
                    init();
                }
                private var contentLoader:Loader;
                private function init():void
                {
                    if(!_created)
                        return;
                    removeAllChildren();
                    contentLoader = new Loader();
                    contentLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadComplete);
                    contentLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, IOErrorHandler);

                    var request:URLRequest = new URLRequest(data.url);
                    contentLoader.load(request);
                }

                //When image loaded, create scaled bitmap
                private function LoadComplete(evt:Event):void
                {
                    evt.stopImmediatePropagation();
                    var loader:Loader = Loader(evt.target.loader);
                    var image:Bitmap = Bitmap(loader.content);

                    var sxy:Number = (image.width > image.height)?(95/image.width):(95/image.height);
                    var scaleMatrix:Matrix = new Matrix();
                    scaleMatrix.scale(sxy,sxy);

                    var container:UIComponent = new UIComponent();
                    addChild(container);

                    var scaledImage:Bitmap = new Bitmap(new BitmapData(95,95,true,0));
                    scaledImage.bitmapData.draw(image,scaleMatrix);

                    container.addChild(scaledImage);
                    contentLoader = null;
                    image.bitmapData.dispose();
                }
                private function IOErrorHandler(evt:IOErrorEvent):void
                {
                    trace("Error loading",data.url);
                }
            ]]>
        </mx:Script>
    </mx:Canvas>

This is a little “Hello World!” with a button tutorial for Jeff, since he was having trouble with Flex. So, Jeff, start a new project in Flex Builder. Let’s call it, “HelloSape”. Now, go to the Design view of HelloSape.mxml and drop in a Label, fill in the ID with “sapeLabel“, and fill the Text with “Hello Sape!“. Now drag in a Button next to the Label, fill in the Button Label field with “Goodbye!“, and fill in the On click with “DoClick()“. Switch to Source view.

Enter this code above the Label:

<mx:Script>
<![CDATA[
private function DoClick():void
{
sapeLabel.text = "Goodbye Sape!";
}
]]>
</mx:Script>

Save and run the application! Click the button and it should change the label!