Visual helpers

[EthernautParticipant]

I’ve been using these simple classes a lot lately, and they help me debug things more quickly.

The first one is the “Echo” system, it basically prints out values to a screen overlay. You don’t have to worry about where each line falls, only the initial placement of the text box. You can easily extend it, check out how the “Entity” class is extended to add recursive echoing of all entities in a scene.

Usage is simple. For instance, to add the current FPS do:

Monkey

Echo.Add( "FPS="+App.FPS, Color.Green )

1	Echo.Add( "FPS="+App.FPS, Color.Green )

Then at the end of your render loop you call:

Monkey

If _drawInfo Echo.Draw( canvas, 10, 8, 0.75 ) Else Echo.Clear() End

1 2 3 4 5

If _drawInfo Echo.Draw( canvas, 10, 8, 0.75 ) Else Echo.Clear() End

It’s important to call “Clear()” if you’re not drawing anything, otherwise the stacks will explode…
Use Echo.font to set the font to your liking.

 

The second helper is a simple Graph system, extremely helpful when debugging animation problems. It will graph any values over time, with different colors and user specified scale/range.

Use it by adding named values (on every frame, it won’t add a new “channel” twice if it has the same name), like this:

Monkey

Graph.Add( "Noise Rx", Entity.LocalRx, Color.Red ) Graph.Add( "Noise Ry", Entity.LocalRy, Color.Green ) Graph.Add( "Noise Rz", Entity.LocalRz, Color.Blue )

1 2 3

Graph.Add( "Noise Rx", Entity.LocalRx, Color.Red ) Graph.Add( "Noise Ry", Entity.LocalRy, Color.Green ) Graph.Add( "Noise Rz", Entity.LocalRz, Color.Blue )

And then call at the end of your render loop, just like Echo, something like:

Monkey

If _drawGraph Graph.DrawAll( canvas, Height * 0.3, 1.0 ) End

1 2 3

If _drawGraph Graph.DrawAll( canvas, Height * 0.3, 1.0 ) End

The “height” value is how tall the positive values of the curve will be, in pixels, and the range is the maximum visible value. Better names? Amplitude maybe?

 

Anyway, here’s the code for Echo:

Monkey

Namespace util #Import "<mojo>" #Import "<std>" Using mojo.. Using std.. Class Echo Global font:Font Private Global _textStack:= New StringStack Global _colorStack:= New Stack<Color> Public '************************************* Public static functions ************************************* 'Use this to add text to the Echo Display Function Add( text:String, color:Color = Color.White ) _textStack.Push( text ) _colorStack.Push( color ) End 'This will echo the entire mojo3d scene hierarchy, recursively Function Add( scene:Scene ) Add( "Scene", Color.LightGrey ) For Local e := EachIn scene.GetRootEntities() e.Echo( ". " ) End End 'Draws all echo messages Function Draw( canvas:Canvas, x:Int=0, y:Int=0, rectAlpha:Float = 0.5, border:Int = 5 ) If font Then canvas.Font = font canvas.PushMatrix() Local lineY := 2 Local maxWidth := 0 'Figure out dimensions For Local n := 0 Until _textStack.Length local text := _textStack[ n ] Local size := canvas.Font.TextWidth( text ) If( size > maxWidth ) maxWidth = size Next 'Draw rect If rectAlpha > 0.01 canvas.Alpha = rectAlpha canvas.Color = New Color( 0, 0, 0 ) canvas.DrawRect( x-border, y+lineY-border, maxWidth+border+border, (canvas.Font.Height*_textStack.Length)+border+border ) End 'Draw text For Local n := 0 Until _textStack.Length local text := _textStack[ n ] canvas.BlendMode = BlendMode.Alpha canvas.Alpha = 1.0 canvas.Color = _colorStack[ n ] canvas.DrawText( text, x, y+lineY ) lineY += canvas.Font.Height Next canvas.PopMatrix() Clear() End 'Clears stacks. MUST BE CALLED when not drawing the current messages or the stacks will grow until they explode. Function Clear() _textStack.Clear() _colorStack.Clear() End End '******************************** Extensions ******************************** Class Entity Extension Method Echo( tab:String ) util.Echo.Add( tab + Name ) For Local c := Eachin Children c.Echo( tab + ". " ) Next End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

Namespace util   #Import "<mojo>" #Import "<std>" Using mojo.. Using std..   Class Echo Global font:Font   Private Global _textStack:= New StringStack Global _colorStack:= New Stack<Color> Public '************************************* Public static functions ************************************* 'Use this to add text to the Echo Display Function Add( text:String, color:Color = Color.White ) _textStack.Push( text ) _colorStack.Push( color ) End 'This will echo the entire mojo3d scene hierarchy, recursively Function Add( scene:Scene ) Add( "Scene", Color.LightGrey ) For Local e := EachIn scene.GetRootEntities() e.Echo( ".   " ) End End 'Draws all echo messages Function Draw( canvas:Canvas, x:Int=0, y:Int=0, rectAlpha:Float = 0.5, border:Int = 5 ) If font Then canvas.Font = font canvas.PushMatrix() Local lineY := 2 Local maxWidth := 0 'Figure out dimensions For Local n := 0 Until _textStack.Length local text := _textStack[ n ] Local size := canvas.Font.TextWidth( text ) If( size > maxWidth ) maxWidth = size Next 'Draw rect If rectAlpha > 0.01 canvas.Alpha = rectAlpha canvas.Color = New Color( 0, 0, 0 ) canvas.DrawRect( x-border, y+lineY-border, maxWidth+border+border, (canvas.Font.Height*_textStack.Length)+border+border ) End 'Draw text For Local n := 0 Until _textStack.Length local text := _textStack[ n ] canvas.BlendMode = BlendMode.Alpha canvas.Alpha = 1.0 canvas.Color = _colorStack[ n ] canvas.DrawText( text, x, y+lineY ) lineY += canvas.Font.Height Next canvas.PopMatrix() Clear() End 'Clears stacks. MUST BE CALLED when not drawing the current messages or the stacks will grow until they explode. Function Clear() _textStack.Clear() _colorStack.Clear() End End   '********************************   Extensions   ********************************   Class Entity Extension Method Echo( tab:String ) util.Echo.Add( tab + Name ) For Local c := Eachin Children c.Echo( tab + ".   " ) Next End End

And for Graph…

Monkey

Namespace util #Import "<mojo>" #Import "<std>" Using mojo.. Using std.. Class Graph Field color:Color Global bgAlpha:= 0.75 Global rightBorder := 10 Global leftBorder := 100 Private Field values:= New Deque<Float> Global cursor:= 0 Global all:= New Map<String, Graph> '************************************* Public methods ************************************* Public Method New( name:String, color:Color ) Self.color = color all.Add( name, Self ) End '************************************* Private methods ************************************* Private Method AddValue( v:Float ) Local c := cursor If cursor >= values.Length values.AddLast( v ) Else values[ cursor ] = v End End Method Draw( canvas:Canvas, scale:Float ) Local w := canvas.Viewport.Width - rightBorder - leftBorder Local h := canvas.Viewport.Height For Local x := 0 Until values.Length Local y0:Double Local y:= (-values[x] * scale) + h/2.0 If x = 0 y0 = y Else y0 = (-values[x-1] * scale) + h/2.0 End canvas.DrawLine( x-1+leftBorder, y0, x+leftBorder, y) Next canvas.DrawCircle( cursor+leftBorder, (-values[cursor] * scale) + h/2.0, 3 ) End '************************************* Public static functions ************************************* Public Function Add( name:String, value:Double, color:Color = Color.White ) Local g := all[ name ] If Not g New Graph( name, color ) Else g.AddValue( value ) End End Function DrawAll( canvas:Canvas, height:Double, range:Double ) Local w := canvas.Viewport.Width - rightBorder - leftBorder Local h := canvas.Viewport.Height Local mid := h/2 Local top := mid-height Local bottom := mid+height-1 Local scale := height/range Local interval := 60 canvas.Font = Null canvas.Alpha = bgAlpha canvas.Color = Color.Black canvas.DrawRect( leftBorder, top,w, height*2) canvas.Alpha = 1.0 canvas.DrawLine( leftBorder, top, leftBorder+w, top ) canvas.DrawLine( leftBorder, bottom, leftBorder+w, bottom ) canvas.DrawRect( rightBorder, top, leftBorder-rightBorder, height*2 ) canvas.Color = Color.LightGrey canvas.DrawLine( leftBorder, mid, leftBorder+w, mid ) canvas.DrawLine( cursor+leftBorder, top, cursor+leftBorder, bottom ) canvas.Color = Color.DarkGrey For Local x := leftBorder To w Step interval canvas.DrawLine( x, top, x, bottom ) Next canvas.Color = Color.White canvas.DrawText( range, leftBorder, top, 1, 0 ) canvas.DrawText( "0", leftBorder, mid, 1, 1 ) canvas.DrawText( -range, leftBorder, bottom, 1, 1 ) Local ty := 0 For Local name := Eachin all.Keys Local g := all[name] If g canvas.Color = g.color canvas.DrawText( name, leftBorder, mid-ty, 1, 0 ) g.Draw( canvas, scale ) ty -= canvas.Font.Height End Next If cursor = w For Local g := Eachin all.Values g.values.PopFirst() Next Else cursor += 1 End End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139

Namespace util   #Import "<mojo>" #Import "<std>" Using mojo.. Using std..   Class Graph Field color:Color Global bgAlpha:= 0.75 Global rightBorder := 10 Global leftBorder := 100 Private Field values:= New Deque<Float> Global cursor:= 0 Global all:= New Map<String, Graph> '************************************* Public methods ************************************* Public Method New( name:String, color:Color ) Self.color = color all.Add( name, Self ) End '************************************* Private methods ************************************* Private Method AddValue( v:Float ) Local c := cursor If cursor >= values.Length values.AddLast( v ) Else values[ cursor ] = v End End Method Draw( canvas:Canvas, scale:Float ) Local w := canvas.Viewport.Width - rightBorder - leftBorder Local h := canvas.Viewport.Height For Local x := 0 Until values.Length Local y0:Double Local y:= (-values[x] * scale) + h/2.0 If x = 0 y0 = y Else y0 = (-values[x-1] * scale) + h/2.0 End canvas.DrawLine( x-1+leftBorder, y0, x+leftBorder, y) Next canvas.DrawCircle( cursor+leftBorder, (-values[cursor] * scale) + h/2.0, 3 ) End '************************************* Public static functions ************************************* Public Function Add( name:String, value:Double, color:Color = Color.White ) Local g := all[ name ] If Not g New Graph( name, color ) Else g.AddValue( value ) End End   Function DrawAll( canvas:Canvas, height:Double, range:Double ) Local w := canvas.Viewport.Width - rightBorder - leftBorder Local h := canvas.Viewport.Height Local mid := h/2 Local top := mid-height Local bottom := mid+height-1 Local scale := height/range Local interval := 60 canvas.Font = Null canvas.Alpha = bgAlpha canvas.Color = Color.Black canvas.DrawRect( leftBorder, top,w, height*2)   canvas.Alpha = 1.0 canvas.DrawLine( leftBorder, top, leftBorder+w, top ) canvas.DrawLine( leftBorder, bottom, leftBorder+w, bottom ) canvas.DrawRect( rightBorder, top, leftBorder-rightBorder, height*2 ) canvas.Color = Color.LightGrey canvas.DrawLine( leftBorder, mid, leftBorder+w, mid ) canvas.DrawLine( cursor+leftBorder, top, cursor+leftBorder, bottom ) canvas.Color = Color.DarkGrey For Local x := leftBorder To w Step interval canvas.DrawLine( x, top, x, bottom ) Next canvas.Color = Color.White canvas.DrawText( range, leftBorder, top, 1, 0 ) canvas.DrawText( "0", leftBorder, mid, 1, 1 ) canvas.DrawText( -range, leftBorder, bottom, 1, 1 ) Local ty := 0 For Local name := Eachin all.Keys Local g := all[name] If g canvas.Color = g.color canvas.DrawText( name, leftBorder, mid-ty, 1, 0 ) g.Draw( canvas, scale ) ty -= canvas.Font.Height End Next If cursor = w For Local g := Eachin all.Values g.values.PopFirst() Next Else cursor += 1 End   End End

Hope that helps.
Cheers!

[degacParticipant]

Nice!
Thanks for the source code.
I did something like this on Bmax… but this is much ‘cleaner’ (and I like the Extension thing everytime I see it in use!)

[AmonParticipant]

Woah. This is very good. Very helpful, indeed.

 

Thank you.

[EthernautParticipant]

and I like the Extension thing everytime I see it in use!

Yeah, it’s one of my favorite M2 features! I usually find it cleaner to add a method to an existing class instead of making up a new one or a new function that takes the object as an argument. Also makes it really easy to add recursion, as you can see in the Entity example.

[HezkoreParticipant]

Very nice Ethernaut.
I’d love for this to be a simple module you could just import and use everywhere, not just for Mojo3D.

Something like this should definitely be part of Monkey2 by default.
Each module, like Mojo3D and Mojo, could then use Echo themselves to give the user some info about entities, images or whatever.

Btw the graph crashes at canvas.DrawCircle( cursor+leftBorder, (-values[cursor] * scale) + h/2.0, 3 ) in debug mode.
“Deque index out of range”

Also, if you let the graph work its way to the end, then make the window smaller, the graph continue outside of the screen.

[EthernautParticipant]

not just for Mojo3D

If you comment out the Entity and Scene related lines it should work just fine in ‘vanilla’ Mojo.

Btw it seems to crash at canvas.DrawCircle( cursor+leftBorder, (-values[cursor] * scale) + h/2.0, 3 ) in debug mode.

Not crashing here! Are you in the latest dev branch?

[EthernautParticipant]

Also, if you let the graph work its way to the end, then make the window smaller, the graph continue outside of the screen

Yeah, it needs more polish if it’s gonna be a module… I kept it basic for now just so I could keep moving.
Volunteers?

[coconParticipant]

These are tremendously important components, thanks for posting.

Perhaps we could drop various ideas in case there is interest into making a full featured profiling framework, if it’s really useful and needed by the people who use Monkey. One such idea would be to attach some sort of console input and logging mechanism which can be useful when debugging the application at runtime. http://monkeycoder.co.nz/forums/topic/mojox-gui-components/ .

[HezkoreParticipant]

If you comment out the Entity and Scene related lines it should work just fine in ‘vanilla’ Mojo.

Yeah, but I mean if it were a module it should probably stay clear of using other module specific things, like Mojo3D.

Not crashing here! Are you in the latest dev branch?

I sure am!
You can fix it by doing something like:
canvas.DrawCircle( cursor+leftBorder, (-values.Last() * scale) + h/2.0, 3 )
So basically, use values.Last() instead of values[cursor]
And I’d suggest setting radius to something like 2.25 instead of 3.
3 very often seems to look like a square, where as 2.25 more consistently looks like a circle.

Yeah, it needs more polish if it’s gonna be a module… I kept it basic for now just so I could keep moving.
Volunteers?

I won’t be fixing it up, I sadly have too much to do right now.
But I really think Mark should add something like this in the future.
Maybe even tools like “frame step” so you can jump one “frame” forward to inspect things more closely.

[Author]

Posts