Monkey Console

Monkey Targets Forums/HTML5/Monkey Console

KawaCoder

(Posted 2012) [#1]

Hi Monkey coders,

I am planning on teaching Programming Fundamentals to my students in ASL videos. I want to build a console in Monkey for them to learn basics in Monkey without any OOP concepts.

Here is my first attempt:

Strict

Import console

Function Main:Int()
	New Console
	
	Print "Hello, Monkey!~n"
	
	For Local i:Int = 0 Until 10
		Print "Index: " + i
	Next
	
	Return 0
End Function

And the imported module:

Import mojo

Class Console Extends App

	Method OnCreate:Int()
		SetUpdateRate 60
		Return 0
	End

	Method OnUpdate:Int()
		Return 0
	End
	
	Method OnRender:Int()
		Cls 0,0,128
		Return 0
	End

End

Upon building the program for HTML5 platform, the result was shown BELOW the blue canvas whereas for Flash platform, the result was shown INSIDE of the canvas.

My questions:

- Why doesn't HTML5 show the result INSIDE of the canvas like Flash does?

- Is there a way to make HTML5 showing results INSIDE of the console?

Thank you.

Geo Massar
ASL Video Author/Teacher

muddy_shoes

(Posted 2012) [#2]

I'd guess that it's more of a case of Flash rendering the printed text over the app because it can't easily render it outside. Print is analogous to console output in other languages and you don't generally want that cluttering up your graphic output.

Anyway, if you want to have an "in app" console that works across all targets then you'll have to do some work yourself to make it happen via DrawText or similar.

impixi

(Posted 2012) [#3]

For HTML5, you can hack monkey's console via Javascript so it will overlay the game canvas:

conhack.js

function overlayConsole(txtColor)
{
	var can = document.getElementById("GameCanvas");
	var con = document.getElementById("GameConsole");
	if ((can) && (con))
	{
		con.style.position="absolute";
		con.style.backgroundColor="transparent";
		con.style.width=can.width + "px"
		con.style.height=can.height + "px"
		con.style.top="0px";
		con.style.left="0px";
		if (!txtColor) txtColor = "white";
		con.style.color = txtColor;
	}
}

console.monkey

Strict

Import mojo
Import "conhack.js"

Extern 

Function overlayConsole:Void(txtColor:String)

Public

Function Main:Int()
	
	New Console
	
	Print "Hello, Monkey!~n"
	
	For Local i:Int = 0 Until 10
		Print "Index: " + i
	Next
	
	Return 0
End Function

'----------

Class Console Extends App

	Method OnCreate:Int()
		overlayConsole("white")
		SetUpdateRate 60
		Return 0
	End

	Method OnUpdate:Int()

		Return 0
	End
	
	Method OnRender:Int()
		Cls 0,0,128
		Return 0
	End

End

KawaCoder

(Posted 2012) [#4]

Thanks, Shane, for the great tip. I'll save it in my Tips folder.

However, I have already developed a console module in pure Monkey. It allows users to scroll results up and down to view. I will announce the first beta release once I set up a open project site at Google.

Geo