<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Sun May 13 2012 17:05:08 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: HTML canvas
Description:
Url: http://www.primordion.com/Xholon/wb/
InternalName:
YoutubeId:
Keywords:
My Notes
--------
How to Run this app ::
Click the Run button above.
Click the Step button in the overlay.
The green square should be replaced by a house.
This workbook will explore the use of the HTML canvas element. The example is the same simple House model used elsewhere in Xholon, including ::
http://www.primordion.com/Xholon/wb/openwb.php?q=2511736&f=gist.github.com/raw/
Just the graphics part is different.
See ::
google: "html canvas example", "html canvas performance"
http://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices
http://www.scirra.com/blog/58/html5-2d-gaming-performance-analysis
http://bomomo.com/
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
]]></script>
<_-.XholonClass>
<!-- types of domain objects -->
<PhysicalSystem/>
<House/>
<Floor>
<FirstFloor/>
<SecondFloor/>
<Roof/>
</Floor>
<Room>
<BedRoom/>
<LivingRoom/>
<FrontEntrance/>
<Kitchen/>
</Room>
<Opening>
<Window/>
<Door/>
</Opening>
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<House>
<Roof/>
<SecondFloor>
<BedRoom>
<Window/>
</BedRoom>
<BedRoom>
<Window/>
</BedRoom>
<BedRoom>
<Window/>
</BedRoom>
</SecondFloor>
<FirstFloor>
<LivingRoom>
<Window/>
</LivingRoom>
<FrontEntrance>
<Door/>
</FrontEntrance>
<Kitchen>
<Window/>
</Kitchen>
</FirstFloor>
</House>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
]]></Blockbehavior>
<Housebehavior implName="lang:webEditionjs:inline:"><![CDATA[
function postConfigure() {
drawHousePart = function(ctx, housePart, x, y) {
switch (housePart.getXhcName()) {
case 'House':
housePart.children('div').each( function() {
drawHousePart(ctx, $(this), x, y);
});
break;
case 'Roof':
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.lineTo(160,0);
ctx.lineTo(320,y);
ctx.lineTo(x,y);
ctx.closePath();
ctx.fill();
break;
case 'SecondFloor':
ctx.fillStyle = '#FAEBD7';
ctx.fillRect(x+10,y,300,100);
x += 20;
y += 10;
housePart.children('div').each( function() {
drawHousePart(ctx, $(this), x, y);
x += 100;
});
break;
case 'FirstFloor':
ctx.fillStyle = '#FAEBD7';
ctx.fillRect(x+10,y+100,300,100);
x += 20;
y += 110;
housePart.children('div').each( function() {
drawHousePart(ctx, $(this), x, y);
x += 100;
});
break;
case 'BedRoom':
case 'LivingRoom':
case 'FrontEntrance':
case 'Kitchen':
ctx.fillStyle = '#F5F5DC';
ctx.beginPath();
ctx.arc(x+40,y+40,40,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
housePart.children('div').each( function() {
drawHousePart(ctx, $(this), x, y);
});
break;
case 'Window':
ctx.fillStyle = '#87CEEB';
ctx.fillRect(x+20,y+10,40,40);
break;
case 'Door':
ctx.fillStyle = '#8FBC8F';
ctx.fillRect(x+20,y+10,40,70);
break;
default: break;
}
}
}
function act() {
if (this.application("getTimeStep") == 0) {
var myCanvasDiv = $("div#mySVGDiv");
myCanvasDiv.empty();
myCanvasDiv.append('<canvas width="320" height="230"/>');
var canvas = myCanvasDiv.children("canvas");
var ctx = canvas[0].getContext('2d');
drawHousePart(ctx, $('div.House'), 0, 30);
}
}
]]></Housebehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<g>
<title>House - Click the Step button.</title>
<rect id="PhysicalSystem/House" fill="#98FB98" height="50" width="50" x="25" y="0"/>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>
All original content Copyright © 2012 Ken Webb