0.6 Progress so far


Well Humph helped me outwith the problems with my prototype but as is usual with me you fix one problem and another one appears as a result.

I’ve got to re-write loadImage() and createImage() to return PImage objects + the data they already return.

The p.js specs state that these 2 functions are to return a PImage or null so I need to do some work on those 2 functions to get them passing back references to the image pixel arrays so i can properly setup the PImage object.

Once that is done I will be ready to start testing get, set, and my copy and blend.

All is not lost for this release I did manage to sort out my git problems and to practice pushing changes I fixed two small bugs with an example and the authors file and git didn’t explode on me.

More to come Mon or Tues.


0.6 processing.js: if it aint broke don’t fix it


To put it in simple terms: I am stuck.

I have a test for pimage, pimage.get(), and pimage.set() working in processing on java and a test for blend() and copy() working as well.

The problem is they both require pimage and pimage.get() working

For some reason I cannot get a prototype for get() to work at all

something as simple and short as:

p.PImage = function PImage(aWidth, aHeight, aFormat) {
this.get = function get(x, y, w, h) {
Accompanied by the following pjs code
PImage pim = loadImage(“metamorphosis.jpg”);
pim.get(464, 200);
gives me an error in the console
Error: pim.get is not a function
Line: 4531
I’ve simplified the function down as small as I can get it and it just will not work.
I also tried the p.PImage.prototype.get = function get() {};  method and it doesn’t work either
This prototype problem is causing the following problems:
  • cant work on loadImage() and createImage() to get them passing back pixel arrays for pimage to use
  • can’t test my pimage unit test just to see if get and set work
  • as a result i cant test blend()
  • as a result i cant test copy()
  • as a result i cant test blit_resize() which implements the ability to use bilinear interpolation and nearest neighbour interpolation for image resizing
  • blit_resize also tests intersect(), peg(), min(), filter_new_scanline(), and filter_bilinear()
  • all of that blocks work on filter() and mask()
On top of all that im still going to have a huge problem when I try to wrap pimage.get to use p.get() because p.get() works with the main canvas and I want to just apply get() to my pimage object.
I either need to write 2 versions of every method or I need to change p.get(), p.set(), etc etc to take an optional parameter of the pixel array I want them to work with instead of the main canvas.

Corbanman and Wonder Anna: My github heroes


Battling the evil forces of Github

Over the last 2 nights I have spent approximately 326 hours trying to fighting with Github to get my work sorted out on my repository.  After several hours of getting no where and actually managing to go backwards and completely destroy some of my branches I get a message from Anna on IRC asking if I need help.

She dove right into it helping me figure out what was going on and helped me get back to square one.  For those of you who follow the Processing.js project, Anna is our current project manager and already has enough stuff on her todo list without having to take time out to help me with Github.  After about an hour we got stuck on a problem with updating my master branch and She sent me to Corban for help in that department.  Corban Brook is our resident git expert and is helping oversee the Processing.js project with Al MacDonald.

To make a long story short another hour passes and Corban has helped me get my branches all updated and sorted out.  I documented all the steps for each scenario from checking out branches to merging in changes after each release.  Corban went through each scenario with me and made sure I was good to go for the future with updates and merging.


The plan is to take my documentation now and include it on the lighthouse site for others to use as a reference for the different Github use case scenarios

How do I make code run automatically AFTER my asp.net page has loaded on the screen (Timer control !)


I’ve been working on redesigning a page for a web application that deals with massive number crunching which takes a long time to process.  The calculations and data gathering and all the manipulation of data takes about 6 seconds.  That might not seem like a long time but when you click a link to a page and that page takes 6-7 seconds to load it feels like an eternity and because the code is in the Page_Load method of the page nothing displays on the screen until the processing is complete.

So what do you do when you want a ton of data to process but not block your page from loading but also not require the user to have to press any buttons or interact with the page other than just loading it ?

Here’s the scenario and my result I implemented

About 85,000 rows of data are checked and calculated for company data, and average data.  Another 100,000 records are checked in another table for company hours.  All this data is then calculated against a formula to spit out a specific number to rank companies standings against an average over 7 years on a set of charts that are dynamically generated.

This process originally took about 30-45 seconds and would cause server timeouts and other errors.

After rewriting the SQL query and reducing the number of database calls it was still taking ~6 seconds.

So how to create a solution that would allow the page to load the initial body and then crunch all the data for the user with a nice little loading graphic while the processing happens in the background ?

The first step was to isolate all the code that was processing data and running in Page_Load off to another method.

Once you have that you have 2 options.  You can implement threading and pass the heavy processing off to another thread but that is much more messy and it requires you to know if any certain data relies on other data that might be processing in a separate thread and needs to complete first before other code runs etc etc.  It gets messy and hard to implement especially once you involve charting and some charts depend on data from other charts.

The simpler solution I found was to wrap up all my code that processes my data and draws my charts into its own method and then stick a Timer control on my page.

The timer control is very simple to use it takes an interval parameter for how long to wait before doing something and has an event for Timer_Tick that fires when the interval elapses.

The timer control runs in a loop and fires the Tick event each time it elapses.

<asp:Timer ID=”Timer1″ runat=”server” Interval=”100″ OnTick=”Timer1_Tick”>

The interval is measured in milliseconds so 1000 is 1 second.

If you only want the timer to tick once and run its code in the event and stop then you can disable the timer as soon as it fires the event with Timer1.Enabled = false;

After that just call your method that has all your heavy processing and the timer will run after the elapsed interval time once the page has loaded.

To jazz it up and include an animated loading gif to show your users that data is loading for them you can add a div and put the image in it.  add attributes to the div for id and add runat=”server” to allow you to get a reference to the div from .cs code behind with the id.

EX: <div id=”loadingdiv” runat=”server”>

cs codebehind:
loadingdiv.Visible = false;

Simply show the div with the loading graphic by default when the page loads and when the timer_Tick method completes on the last line hide the div and show your data or charts.

Here’s 2 links to sites that allow you to generate your own custom animated loading .gif files

If there are other ways to entertain partial page rendering after page load with no user interaction I’d like to hear about them !

0.6 processing.js release progress


Haven’t really had time to blog lately with so much school stuff and work going on.

My progress so far has been limited on my 0.6 release work on PImage.

I spent a good week just trying to get loadImage() to work and finally realized the example on the processing.org website doesn’t work in pjs and the p.js example for displaying images (displaying.html) uses one bit of code for the example but a different set of code for the listed source code. (filed a bug on that)

Over the next 3 days im planning to just write up a basic test to test PImage and the get(), set(), copy(), and blend() functions to make sure they work.

0.7 will probably have filter(), and mask().

That’s all for now

In what order do pages and events load in ASP.NET pages ?


I’ve been working on two different asp.net web applications lately and I’ve been working with web user controls to handle searching so that I can reuse the search capability on multiple pages.

I have the user control show a Gridview with search results and allow the user to select a row to edit.  At this point I store the selected ID of the chosen row in session and have my container page grab the session value and populate a second table with details of the selected record to edit or what have you.

Seems simple enough right ?  Except for the fact that it sometimes wont work depending on how you build your page.  If you use a control to display your details for your selected record chances are it will work ok if it is connected to a DataSource to retrieve the data.

However if you build your own form with just a HTML table and some Textboxes on the page and expect to fill them in you will run into problems.  Most likely what will happen is you will select a record and nothing will happen on the first click.  After that clicking a second record will display the first record.  Clicking a third record will display the results from the second record etc etc.

Whats happening ? well your experiencing a problem with the order that the page is loaded and events fire.

Lets setup a common example:

  • A Master page which contains
    • An ASPX web form page which contains
      • A Web User Control inside the page which contains
        • A button to fire some code in a button_click event

Now lets say you click that button.  You would assume that the button code would run and then the page would post back and the master page code, page load code etc would run.  What really happens is much different.

Here are a few links to documentation on the page load life cycle.

What you will see from the first link provided is that the order is fairly complex.  What concerns us for this example is the Load event, control events, and PreRender event.

With a control like a Gridview, details view,or form view that is connected to a DataSource control you should be ok.  The button code will run first storing the session value and then the PreRender will fire which calls the databind() method for any DataSource controls. This means that the DataSource will grab the session value and update the view correctly.

The other method of trying to manually fill in some Textboxes with textbox1.text = “text” based off data you have in a DataTable from a TableAdapter that runs in the page_load for example will operate differently.  The Load methods are being called and retrieving your data and THEN the control button code is run storing the new data ID in session.

A simple example you can do to test what happens when is to make a page inside your master page and then create a web user control and put it in the new page and follow these steps.

  • Inside the code behind .cs pages add a Trace.Warn(“inside page_load”); line to each Page_load event.
  • Add the Page_Init and Page_PreRender events as well and add similar trace warning messages.
  • Turn on tracing in the ASPX page by adding Trace=”true” to the page directive (the first line of code in your aspx page)
<%@ Page Title=”” Language=”C#” MasterPageFile=”~/myMaster.master” AutoEventWireup=”true” CodeFile=”lifecycle.aspx.cs” Inherits=”_lifecycle” trace=”true”%>

You should end up with tracing information when you load up the page something like below.

aspx.page Begin Init
–> Inside user control Page_Init
–> Inside master page Page_Init
–> Inside lifecycle page Page_Init

aspx.page End Init
aspx.page Begin InitComplete
aspx.page End InitComplete
aspx.page Begin PreLoad
aspx.page End PreLoad
aspx.page Begin Load
–> Inside lifecycle page Page_Load
–> Inside master page Page_Load
–> Inside user control Page_Load

aspx.page End Load
aspx.page Begin LoadComplete
aspx.page End LoadComplete
aspx.page Begin PreRender
–> Inside lifecycle Page_PreRender
–> Inside master page Page_PreRender
–> Inside user control Page_PreRender

aspx.page End PreRender

Hopefully this helps you sort out your page loading problems !

0.6 The plan to implement PImage into processing.js


Now that 0.5 is pushed up and under review I’ve turned to re-planning my 0.6 release to include PImage.

Originally blocked because of plans to implement asynchronous image loading I brought up the fact that PImage was about 75% completed and there was a large chunk of code that was being held back by it being blocked by the async idea.  So I’ve been tasked with the responsibility of bringing PImage back into the code along with all its methods.

The great thing about PImage code is it has methods for copy, blend, filter, mask, get, set, loadpixel, updatepixel.  All of which are methods for the language as well and some of which are already implemented in a basic or completed form.

Hopefully since I have already worked on PImage code a while back I should be able to relatively quickly (read 2-3 days of work) be able to get it in and start testing it.

The wrench in the works

Apparently PGraphics is something that is currently holding back 3D development past 0.6 so it’s been mentioned that PGraphics should be implemented first before PImage.  Although I am not sure why as in the java code a PGraphics object extends a PImage object so I’m not sure why a PImage wouldn’t come first singe a PGraphics inherits variables from PImage.

The goal is to find out this Thursday on the conference call.

More to come

0.5 processing.js release contribution


Sat in on this weeks processing.js status call and got a few things sorted out on where to go with the rest of my stuff for release 0.5 and made some plans for 0.6 which was good.

After the status call Anna was nice enough to teach me how to really use Github and how to manage branches, commit new code, and checkout.  It was a HUGE help and as a result I’ve gotten my code fixes for 0.5 up on Github and ready for review.

A quick summary of my 0.5 work.

  1. Rewrote hex() to support all the required functionality.
  2. cleaned up helper functions relating to hex that were no longer needed and exposed to processing code
  3. Rewrote trim() and added recursive support for arrays of strings. or arrays of arrays of strings, etc, etc.
  4. reviewed Andor’s sort(), and binary() functions
  5. Wrote tests for hex(), and trim()
  6. and cleaned up some library code variables that were reserved words, and some duplicate function definitions

I’m preparing to add PImage for 0.6 and its going to be a MASSIVE undertaking. It may span 2 releases to get it all in with proper tests.