I found it necessary to go back and automate the definition and display of blocks of values associated with different elements in a simulation. I’ve based it on a global canvas and will rewrite everything else accordingly. This will make updating the status of a simulation a lot simpler. One thing I may still add is a line or some other type of visual connection between the block of values and the element to which it refers. I note that each one of these things can take up a fair amount of space, so in the long run they should mostly be used for debugging or detailed monitoring.<\/p>\n
Here’s the requisite code.<\/p>\n
\r\n var globalWidth;\r\n var globalHeight;\r\n \r\n var canvas = document.getElementById(\"bcanimation\");\r\n if (canvas) {\r\n \/\/element already exists\r\n if (canvas.nodeName == \"CANVAS\") {\r\n globalWidth = canvas.width;\r\n globalHeight = canvas.height;\r\n } else {\r\n \/\/element is *not* a canvas\r\n alert(\"Error: Element you've linked to is *not* a canvas.\");\r\n }\r\n } else {\r\n \/\/element does not already exist and must be created\r\n canvas = document.createElement(\"canvas\");\r\n canvas.id = \"bcanimation\"\r\n canvas.height = 250;\r\n canvas.width = 380;\r\n globalWidth = canvas.width;\r\n globalHeight = canvas.height;\r\n document.body.appendChild(canvas);\r\n } \r\n canvas.style.border = \"2px solid lime\";\r\n canvas.style.margin = \"5px auto\";\r\n var globalCTX = canvas.getContext(\"2d\");\r\n\/\/***************************************************************************************\r\n\/\/*** display variables\r\n\/\/***************************************************************************************\r\n function clearCanvas(color) {\r\n globalCTX.fillStyle = color;\r\n globalCTX.fillRect(0,0,globalWidth,globalHeight);\r\n }; \/\/clearCanvas\r\n\r\n function displayValue(value,label,format,places) {\r\n \/\/assumes alignment and color\/fillStyle are set before calling\r\n this.value = value;\r\n this.label = label + \":\";\r\n this.format = format;\r\n this.places = places;\r\n globalCTX.font = \"12px Arial\";\r\n this.width = globalCTX.measureText(label).width;\r\n this.getWidth = function() {\r\n return this.width;\r\n }\r\n this.drawLabel = function(x,y) {\r\n globalCTX.fillText(this.label,x,y);\r\n }\r\n this.drawValue = function(x,y) {\r\n var s;\r\n if (this.format == \"integer\") {\r\n s = this.value;\r\n } else if (this.format == \"numdec\") {\r\n s = this.value.toFixed(this.places);\r\n } else if (this.format == \"numwide\") {\r\n s = this.value.toPrecision(this.places);\r\n } else if (this.format == \"text\") {\r\n s = this.value;\r\n } else if (this.format == \"bool\") {\r\n if (this.value) {\r\n s = \"TRUE\";\r\n } else {\r\n s = \"FALSE\";\r\n }\r\n }\r\n globalCTX.fillText(s,x,y);\r\n }\r\n } \/\/displayValue\r\n function displayGroup(label,x,y,vw,lc,vc,bc) {\r\n this.label = label;\r\n this.xLocation = x;\r\n this.yLocation = y;\r\n this.valueWidth = vw;\r\n this.labelColor = lc;\r\n this.valueColor = vc;\r\n this.borderColor = bc;\r\n this.maxLabelWidth = 0;\r\n globalCTX.font = \"12px Arial\";\r\n this.valueCount = 0;\r\n this.valueList = new Array();\r\n this.addValue = function(value,label,format,places) {\r\n var v = new displayValue(value,label,format,places);\r\n this.valueList.push(v);\r\n this.valueCount++;\r\n var w = v.getWidth();\r\n if (w > this.maxLabelWidth) {\r\n this.maxLabelWidth = w;\r\n }\r\n }\r\n this.drawBasic = function() {\r\n this.height = (this.valueCount * 12) + 15;\r\n this.width = this.maxLabelWidth + this.valueWidth + 8;\r\n globalCTX.strokeStyle = this.borderColor;\r\n globalCTX.beginPath;\r\n globalCTX.moveTo(this.xLocation+0.5,this.yLocation+0.5);\r\n globalCTX.lineTo(this.xLocation+this.width+0.5,this.yLocation+0.5);\r\n globalCTX.lineTo(this.xLocation+this.width+0.5,this.yLocation+this.height+0.5);\r\n globalCTX.lineTo(this.xLocation+0.5,this.yLocation+this.height+0.5);\r\n globalCTX.lineTo(this.xLocation+0.5,this.yLocation+0.5);\r\n globalCTX.stroke();\r\n globalCTX.font = \"12px Arial\";\r\n globalCTX.fillStyle = this.labelColor;\r\n globalCTX.textAlign = \"center\";\r\n globalCTX.fillText(this.label,this.xLocation+(this.width*0.5),this.yLocation+12);\r\n globalCTX.textAlign = \"right\";\r\n for (var i=0; i\nThe output looks like this:<\/p>\n
![](\"https:\/\/www.rpchurchill.com\/images\/articles\/20161010_displayGroup.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"
I found it necessary to go back and automate the definition and display of blocks of values associated with different elements in a simulation. I’ve based it on a global canvas and will rewrite everything else accordingly. This will make … Continue reading