Today I finished mods to the DisplayGroup object that allows it to be set up to hide itself a set amount of time after one or more displayed variables change.
We begin with the code that now includes the requisite timing mechanisms. The turnOn method makes the display visible when it is invoked following a change in a displayed value. The turnOff method sets the visibility back to false unless a more recent timer has been started. The setVisibility method allows the visibility to be initialized to false (the default is true).
|
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 |
function DisplayGroup(label,x,y,vw,lc,vc,bc,displayDelay) { this.label = label; this.xLocation = x; this.yLocation = y; this.valueWidth = vw; this.labelColor = lc; this.valueColor = vc; this.borderColor = bc; this.displayDelay = displayDelay; if (this.label.length > 0) { this.labelHeight = 12; } else { this.labelHeight = 0; } this.visible = true; this.endDisplayTime = 0.0; this.turnOn = function() { this.visible = true; this.endDisplayTime = globalSimClock + this.displayDelay; feq.newItem(this.endDisplayTime,this,"turnOff"); }; this.turnOff = function() { if (globalSimClock >= this.endDisplayTime) { this.visible = false; } //else a more recent value is in play and waiting to time out }; this.setVisibility = function(visible) { this.visible = visible; }; this.maxLabelWidth = 0; this.valueCount = 0; this.valueList = []; //new Array(); this.define = function(label,x,y,vw,lc,vc,bc) { //used to define outside of an object this.label = label; this.xLocation = x; this.yLocation = y; this.valueWidth = vw; this.labelColor = lc; this.valueColor = vc; this.borderColor = bc; if (this.label.length > 0) { this.labelHeight = 12; } else { this.labelHeight = 0; } }; this.addValue = function(value,label,format,places) { var tempValue = ''; if (typeof value === "function") { tempValue = value.call(tempValue); } else { tempValue = value; } var v = new DisplayValue(tempValue,label,format,places); this.valueList.push(v); this.valueCount++; globalCTX.font = "12px Arial"; var w = v.getWidth(); if (w > this.maxLabelWidth) { this.maxLabelWidth = w; } }; this.drawBasic = function() { if (this.visible) { this.height = (this.valueCount * 12) + this.labelHeight + 3; this.width = this.maxLabelWidth + this.valueWidth + 8; globalCTX.strokeStyle = this.borderColor; globalCTX.beginPath(); globalCTX.moveTo(this.xLocation+0.5,this.yLocation+0.5); globalCTX.lineTo(this.xLocation+this.width+0.5,this.yLocation+0.5); globalCTX.lineTo(this.xLocation+this.width+0.5,this.yLocation+this.height+0.5); globalCTX.lineTo(this.xLocation+0.5,this.yLocation+this.height+0.5); globalCTX.lineTo(this.xLocation+0.5,this.yLocation+0.5); globalCTX.stroke(); globalCTX.font = "12px Arial"; globalCTX.fillStyle = this.labelColor; if (this.label.length > 0) { globalCTX.textAlign = "center"; globalCTX.fillText(this.label,this.xLocation+(this.width*0.5),this.yLocation+12); } globalCTX.textAlign = "right"; for (var i=0; i<this.valueCount; i++) { var l = this.valueList[i].label; var x = this.xLocation+this.maxLabelWidth+5; var y = this.yLocation+(i*12)+this.labelHeight+12; //globalCTX.fillText(valueList[i].label,this.xLocation+this.maxLabelWidth+3,this.yLocation+(i*12)+12); globalCTX.fillText(l,x,y); } globalCTX.fillStyle = this.valueColor; globalCTX.textAlign = "left"; for (i=0; i<this.valueCount; i++) { this.valueList[i].drawValue(this.xLocation+this.maxLabelWidth+8,this.yLocation+(i*12)+this.labelHeight+12); } } }; this.activate = function(nextState) { if (nextState == "turnOn") { this.turnOn(); } else if (nextState == "turnOff") { this.turnOff(); } else { errorUndefinedAdvanceState(this.entityID,this.nextState); } }; //this.activate } //DisplayGroup |
Here is the code used to initialize a display object in timing mode. This setup makes use of the fact that the updateValue methods for the individual display items can detect whether the values they point to have changed. Note that we can choose which variables can drive visibility changes when they are modified.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var queue1DataGroupEntry = new DisplayGroup("",175,118,80,"#00FFFF","#FF0000","#FFFF00",2.0); queue1DataGroupEntry.setVisibility(false); gtemp = queue1.getEntryEntityID(); queue1DataGroupEntry.addValue(gtemp,"Entry ID","integer"); gtemp = queue1.getEntryTime(); queue1DataGroupEntry.addValue(gtemp,"Entry Time","numdec",5); function queue1DataGroupEntryUpdate() { var temp = queue1.getEntryEntityID(); var updated0 = queue1DataGroupEntry.valueList[0].updateValue(temp); var temp = queue1.getEntryTime(); var updated1 = queue1DataGroupEntry.valueList[1].updateValue(temp); if (updated0 || updated1) { queue1DataGroupEntry.turnOn(); } } |
Finally, here’s how the updates are called in the main event loop.
|
1 2 |
queue1DataGroupEntryUpdate(); queue1DataGroupEntry.drawBasic(); |