Looking for Implementation Advice

[Alex Tweedly]

Mike Doub wrote:

>Hello List,
>
>I am looking for implementation advice on how best to solve a problem
>displaying a graphical representation of a matrix of data.  
>
>I have a variable that is set up with each line representing a row of
>information, and each item of the line a value.  There are a variable number
>of lines and values.  I typically expect about 50 lines and 24 values.
>
>Something like this (as you can see I am thinking of using arrays with split
>and combine):
>
>Label1|0,0,1,3,5,6...
>Label2|1,4,6,7,2,0...
>Label3|5,4,4,3,-1,1...
>.
>.
>.
>
>The graphic that I was envisioning was a group of small squares that would
>contain colors, green for 0 and higher, orange for -1, red for -2 add below.
>The label would be next to each row of boxes.  I would also like the user to
>be able to hover over one of the boxes and be able to see the actual value.
>
>I have multiple data sets to be displayed. Initially I was thinking that I
>would have one of this graphic per card, but having this as part of a
>scrolling field would be nice.  Anyway let's keep it simple and just assume
>that it will be on each card.
>
>I am a bit stumped at how to:
>1) Build this graphical thing dynamically to accommodate difference numbers
>of rows and columns
>2) How to connect the appearance of each box to the data, both to set the
>color and to get the hovering effect.
>
>I am totally open to suggestions at this point in how to better layout the
>data and to build this graphical control.  
>
>Thank you in advance for pointing me in a direction.
>  
>
Hi Mike - I'll point in a number of directions :-)
I'd probably do #3 myself, assuming the 50 lines x 24 values is a 
realistic estimate, and that the max size you need to handle isn't too 
much larger than that.

I can see three ways to get the colored squares - though there are 
probably dozens of other ways.

1. Use the "imageSource" for each character.
Create images (either in your stack, or as PNG files) each a square of a 
different color.
Set the text of the field to be something like
   Label 1 <tab> ABCD
   Lab 2<tab> AADEC
etc.
Set the images source of each character to the appropriate PNG or image.

2. (similar)
Do the same but instead of using imageSource for each character, use 
htmlText : set both color and bgcolor of each character in turn to the 
relevant color value as needed.

(e.g. some code vaguely like:

>   set the itemdel to TAB
>   repeat with tLine = 1 to the number of lines in fld "Field"
>     put the number of chars in item 2 of line tLine of fld "Field" 
> into tNum
>     repeat with tChar = 1 to tNum
>       put char tChar of item 2 of line tLine of fld "Field" into tt
>       put "<font bgcolor=" & theColor[tt] & "><font color=" & 
> theColor[tt] & ">" & tt & "</font></font>" into tHtml
>       set the htmlText of char tChar of item 2 of line tLine of fld 
> "Field" to tHtml
>     end repeat
>   end repeat
>  

where the array "theColor" has been set up ahead of time.

3. Use a number of buttons, all square.
Create a "template" button, with all the right characteristics (square, 
no border, etc. and hidden)
Then for each value in each line create a new button (clone the template 
one), set its position, set its color according to the value, and then 
make it visible.  [obviously, re-use buttons as needed]


For the "hover" value, in case 3 you can simply set the tooltip of each 
button to the actual value.

For cases 1 or 2, I think you'd need to do your own tracking of the 
mouse using a mouseMove handler and timer, then using mouse co-ords (or 
mouseChunk ??) to determine which char is the relevant one, and pop up 
the right value (maybe by setting the tooltip for the field - worth 
looking into whether you could do that).


Hmmm - it would be nice if there was a tooltip event, which would 
trigger a handler "pre-appearance" to allow you to adjust the text. 
Would that be a worthwhile enhancement request ?


-- 
Alex Tweedly       http://www.tweedly.net



-- 
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.11.8/114 - Release Date: 28/09/2005