Jon’s Project Blog

I’ve been busy lately with research and academia, and so I haven’t had much time to hack up some interesting pieces of code. However, because of my student computing job (where I help people connect to the residential network) I decided to look up the Start>Run command shortcuts to generally useful network troubleshooting tasks, as well as a few others. (Note: These probably only work in NT-based systems: NT, 2000, XP, 2003, Vista, etc.)

• services.msc – Brings up the Services control window. I use this often because I don’t like running unnecessary services like Cisco VPN client, which I use only when I need to connect to certain school servers.
• ncpa.cpl – Brings up Network Connections. This is probably useful for users who can’t don’t already have shortcuts on their computers for this.
• appwiz.cpl – Brings up the “Add or Remove Programs” Window. Obviously great for installing and removing software.

Last of all, a tip I mentioned before for taking screenshots of applications/windows with PrintScreen is to press Alt + Printscreen on the selected window. The screenshot as usual is sent to the clipboard as usual. (I learned this trick while working as an intern while writing sample api docs.)

I haven’t posted in awhile, since I’m in the middle of several side projects and research. However, since many people that visit here seem to be looking at my attempts at coding with GWT, I figure I’ll blog about my MathML-in-gwt project I’ve been (ever so) slowly working on.

The goal of the MathML-in-GWT project was to make it easier for people to develop “math” applications for learning. One such application would be for generating basic math problem sets for arithmetic for 3rd – 8th graders. As a student who preformed below average on National Standardize testing in 1st and 2nd grade (how hard could those questions have been!), my parents enrolled me in the torture test of Kumon. If you don’t know what Kumon is, it’s essentially nothing other than the words “practice makes perfect” put into practice. For math I was given literally sets of 200 to 300 problems, many of which were repeated (I was lazy!). Students were typically timed, and if you didn’t finish a problem set within a given amount of time you didn’t pass. After two or three years of this test-taking mathematical torture, I was top my class in math (well almost at the top, the kid ahead of me did Kumon too). No matter what teachers in America say, American students could use more practice when it comes to solving math problems. However, why should anyone pay for Kumon? All they do is randomly generate numbers and print them out on cheap paper. Educational tools for generating such  simple tasks should be available (for free) and be open to encourage use.

I’ve prepared and example which I will reference further down. However, first I will explain a few issues about implementation and etc.

I know there is a gwt-mathml project also on Google Code, but it looks like it’s much more dead than mine. My implementation uses stock GWT (as usual). There are some issues such as IE requiring some voodoo MathPlayer plugin in order to display MathML. This requires adding several annoying header lines to trick IE into loading up MathPlayer. Other than that, I think my implementation is relatively clean and relatively straight forward, although it is still relatively simple (doesn’t support styles and such).

I decided to base all MathML elements on ComplexPanel, since it allows me to keep the relative hierarchy that MathML provides and I can easily mix and match it with normal GWT Widgets. (I haven’t tried putting it into forms or anything.) Briefly looking over MathML, it seems most tags take either one, two, or a list of parameters. Thus I created base “Generic classes (that use Generics) that handle one two or a list of parameters, just to make it easier to generate the whole MathML tag set quickly. I learned how to use Java before Generics were implemented and had dropped the language for a few years (while working at a .NET company). Thus, I decided it would be fun to play around with Generics which have been implemented in GWT 1.5+.

To handle the differences between MathPlayer (not requiring a namespaceURI, but other peculiarities)  and how Firefox renders MathML (requiring a namespaceURI),  I am using Deferred Binding using Replacement. It was relatively straight forward to implement and it makes the implementation “clean”. This was another first experience, since I hadn’t use deferred binding outside of the context of internationalization.

The header lines which must be used (so that Mathplayer functions) are as follows:

<head>
<object id="mathplayer" classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987">
</object>< ?import namespace="m" implementation="#mathplayer"?>
...</head>

Yup. That’s it. It’s a little annoying, but I think it’s the most straight-forward and preferably clean for developers.

Here is an example Fraction Problem Set Generator. Feel free to play around with it. It allows you to change the header of the problem set to create custom notes or instructions.

The example code can be downloaded here.

As a user of Matlab, I have never had to generate a “heat” colormap, since I always use the built in one. It just so happens that among other ongoing projects I have not listed on this website, I will attempt to write some computational examples in Flex/Actionscript 3.0. In order to visualize the data, of course one needs to have some type of plotting features.

I believe I figured out how the “heat” colormap that is generally used for thermal visualization (I’m a Mechanical engineering student) works. It’s actually just HSV. Now depending on how you define HSV, the conversion seems to require people to do strange things (aka the implementation on Wikipedia, that uses HSV and HSL or whatever interchangeably).

However, using GIMP, I found out that the heat colormap is easy to generate from HSV. If you load up the color wheel in any graphical editor that supports choosing colors in HSV, you will notice that it’s generally a wheel, or that the values go from 0 to 360 (obviously a circle). Now the heat map color range we want is usually from [0:240]. We also want to have the higher values map to Red (Hue=0) and the colder or lower values to Blue (Hue=240). The mapping on the color wheel makes it fairly clear what the other algorithms are trying to do.

The mapping algorithm from HSV to RGB is as follows (assuming a S and V=1.0 – a.k.a. heat map colors).

From H=0-59 R=255 G=0-255 B=0

From H=60-119  R=255-0 G=255 B=0

From H=120-179 R=0 G=255 B=0-255

From H=180-239 R=0 G=255-0 B=255

From H=240-299 R=0-255 G=0 B=255

From H=300-359 R=255 G=0 B=255-0

As you can see, it’s a fairly simple linear mapping if you go by HUE. The permutations go according to ROYGBIV along the circle. S, V are selected to be 1.0 simply because that’s what the thermal color map is.

Anyways, the following is just a bit of flex code that displays the value of a 2D function on a domain of [0,1]x[0,1]. It’s my first application with flex and so I’m a little unfamiliar with the data types. So if anyone needs an easy to understand heat/thermal colormap, here’s a “crippled” version of HSV to RGB specifically made for thermal maps.

< ?xml version="1.0"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  backgroundColor="#123456"
  creationComplete="init();" width="600" height="600" verticalAlign="middle" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #AAAAAA]">
 
  </mx><mx :Script>
  < ![CDATA[
 
 
	var plot:Shape = new Shape();
	var domain_width:Number = 1.0;
	var domain_height:Number = 1.0;
	var domain_xelem:uint = 100;
	var domain_yelem:uint = 100;
	var color_value_max:Number = 1.0;
	var color_value_min:Number = -1.0;
 
    public function init():void 
    {
 
 
    }
 
    public function heatmap(value:Number):Array
    {  	
 
 
    	var RGB:Array;
 
    	// Remap hot color to red and cold color to blue
    	// 240 is the angle range [0:240] for red to blue in HSV
    	var h:uint=(1-(value-color_value_min)/(color_value_max-color_value_min))*240;
 
    	var g:Number=(h%60)/60;
    	var inc:Number=255;
    	var up:uint=int(g*inc);
    	var down:uint=255-up;
 
    	switch(int(h/60))
    	{
    		case 0: return new Array(255,up,0);
    		case 1: return new Array(down,255,0);
    		case 2: return new Array(0,255,up);
    		case 3: return new Array(0,down,255);
    		case 4: return new Array(up,0,255);
    		case 5: return new Array(255,0,down);
    	}
 
		return new Array(255,255,255);
    }
 
    public function RGB(RGBArray:Array):uint
    {
    	return RGBArray[0]*65536+RGBArray[1]*256+RGBArray[2];
    }
 
    public function showMap():void
    {
    			// Define height parameters
		var dx:Number=domain_width/domain_xelem;
		var dy:Number=domain_height/domain_yelem;
 
		// Define color gradient
		var RED:Number = 0xFF0000;
		var BLUE:Number = 0x0000FF;
 
		var scrn_width:Number = myCanvas.width;
		var scrn_height:Number = myCanvas.height;
 
		for(var i:uint=0;i<domain_xelem;i++)
		{
			for (var j:uint=0;j<domain_yelem;j++)
			{
				var x:Number = i*dx+dx/2;
 
				var y:Number = j*dy+dy/2;
				plot.graphics.beginFill(RGB(heatmap(Math.cos(2*Math.PI*x)*Math.cos(2*Math.PI*y))));
				plot.graphics.drawRect(((x-dx/2)*scrn_width),((y-dy/2)*scrn_height),(dx*scrn_width),(dy*scrn_height));
				plot.graphics.endFill();
			}
		}
 
      myCanvas.rawChildren.addChild(plot);
    }
 
  ]]>
  </mx>		
  <mx :Canvas width="400" height="400" id="myCanvas" backgroundColor="#903636">
  </mx>
  <mx :Button label="Generate Color map" id="btnColorMap" enabled="true" click="showMap()"/>

So while I was working on one of my outreach projects as a graduate student, I wanted to write a simple XML indenter to make my GWT generated xml more aesthetically appealing using stock GWT. The xml document is assumed to be as lean as possible (There are no empty #text nodes that are usually in xml because of the indentation.)

I should also mention that I’m posting this because I didn’t really see any stock simple GWT indenters after a quick google. The following is not meant to be a complete indenter, just something quick and simple to organize xml.

Here’s a basic indenter.

	public String formatXML(Node node,String tab_str)
	{
		String formatted="";
 
		if (node.getNodeType()==Node.ELEMENT_NODE)
		{
			String attributes="";
			for (int k=0;k < node.getAttributes().getLength();k++)
				attributes+=" "+node.getAttributes().item(k).getNodeName()+"=\""+node.getAttributes().item(k).getNodeValue()+"\"";
 
			formatted=tab_str+"<"+node.getNodeName()+attributes+">\n";
 
			for (int i=0;i< node.getChildNodes().getLength();i++)
			{
				formatted=formatted+formatXML(node.getChildNodes().item(i),tab_str+"    ");
			}
			formatted=formatted+tab_str+"</"+node.getNodeName()+">\n";
		}
		else
		{
			if (node.toString().trim().length()>0)
				formatted=tab_str+node.toString()+"\n";
		}
 
		return formatted;
	}