// Objekte für die Anzeige und Eingabe von Werten, ValueBars, usw. // http://walter.bislins.ch/ function CBar(aId,aLength,aMax,aOrientation,aColor,aStyles) { // aOrientation: 'h' = horizontal, 'v' = vertical var i; this.HtmlID = aId; this.Max = aMax; this.Value = 0.0; this.Length = aLength; this.Width = '15px'; this.Orientation = aOrientation; this.XStyles = (aStyles ? aStyles : ''); this.Color = aColor; this.LastColor = ''; this.BorderWidth = 1; this.Padding = '0'; this.Object = null; this.PixelLength = 0; } CBar.prototype.Html = function() { if (this.Orientation == 'h') { document.write( '<div id="Bar'+this.HtmlID+'" class="bdBoxSizing" style="background-color:#eee;width:'+this.Length+'px; height:'+this.Width+'; border:'+this.BorderWidth+'px solid black; padding:0; font-size:0; overflow:hidden; '+this.XStyles+'">' ); document.write( '<div id="BarX'+this.HtmlID+'" class="bdBoxSizing" style="height:100%; width:0; background-color:'+this.Color+'; margin:'+this.Padding+'px 0; border:none; padding:0; font-size:0;">' ); document.write( '</div></div>' ); } else { document.write( '<div id="Bar'+this.HtmlID+'" class="bdBoxSizing" style="background-color:#eee;width:'+this.Width+'; height:'+this.Length+'px; border:'+this.BorderWidth+'px solid black; padding:0; font-size:0; overflow:hidden; '+this.XStyles+'">' ); document.write( '<div id="BarX'+this.HtmlID+'" class="bdBoxSizing" style="position:relative; width:100%; height:0; background-color:'+this.Color+'; margin:0 '+this.Padding+'px; padding:0; border:none; font-size:0;">' ); document.write( '</div></div>' ); } } CBar.prototype.SetValue = function( aValue ) { if (!this.Object) { this.Object = xGet('BarX'+this.HtmlID); if (!this.Object) return; var ct = xGet('Bar'+this.HtmlID); if (this.Orientation == 'h') { this.PixelLength = xWidth(ct) - 2 * this.BorderWidth; } else { this.PixelLength = xHeight(ct) - 2 * this.BorderWidth; } } this.Value = aValue; var pxLength = Math.round(aValue*this.PixelLength/this.Max); if (pxLength < 0) pxLength = 0; if (pxLength > this.PixelLength) pxLength = this.PixelLength; if (this.Orientation == 'h') { xWidth(this.Object,pxLength); } else { xHeight(this.Object,pxLength); xTop(this.Object,this.PixelLength-pxLength); } } CBar.prototype.SetColor = function( aColor ) { if (this.LastColor == aColor) return; if (!this.Object) { this.Object = xGet('BarX'+this.HtmlID); if (!this.Object) return; } xStyle(this.Object,'backgroundColor',aColor); this.LastColor = aColor; } // Bars function CBars() { this.Bars = new Array(); } CBars.prototype.Make = function(aId,aLength,aStorRef,aMax,aUnit,aMult,aDigits,aColor) { var b = new CBarValue(aId,aLength,aStorRef,aMax,aUnit,aMult,aDigits,aColor); b.Html(); this.Bars[this.Bars.length] = b; return b; } CBars.prototype.Update = function() { for (var i = 0; i < this.Bars.length; i++) this.Bars[i].Update(); } function CBarValue(aId,aLength,aStorRef,aMax,aUnit,aMult,aDigits,aColor) { this.ValueWidth = 70; this.HtmlID = aId; this.Length = aLength; this.StorRef = aStorRef; this.Mult = aMult; this.Digits = aDigits; this.Color = aColor; this.Unit = (aUnit != '') ? ' '+aUnit : ''; this.LastValue = 0.0; this.Bar = new CBar(aId,aLength-this.ValueWidth-2,aMax,'h',aColor,'float:left;'); this.ValueObject = null; } CBarValue.prototype.Html = function() { document.writeln( '<div class="Barclass bdBoxSizing" style="width:'+this.Length+'px; height:15px; margin:0;">' ); this.Bar.Html(); document.writeln( '<div id="'+this.HtmlID+'Value" class="bdBoxSizing" style="width:'+this.ValueWidth+'px; height:15px; text-align:right; float:right; margin:0; padding:0 2px; font-size:12px; line-height:13px; border:1px solid black;">0'+this.Unit+'</div>'); document.writeln( '</div>' ); } CBarValue.prototype.Update = function() { // StorRef must be a reference to a variable or object property! if (this.StorRef == '') return; try { var v = eval(this.StorRef); if (this.Mult != 0) v /= this.Mult; this.SetValue( v ); } catch(err) {} } CBarValue.prototype.SetValue = function( aValue ) { if (!this.ValueObject) { this.ValueObject = xGet(this.HtmlID+'Value'); if (!this.ValueObject) return; } if (aValue != this.LastValue) { this.Bar.SetValue( Math.abs(aValue) ); xInnerHTML(this.ValueObject,aValue.toFixed(this.Digits)+this.Unit); if ((aValue < 0.0 && this.LastValue >= 0.0) || (aValue >= 0 && this.LastValue < 0.0)) { if (aValue < 0.0) { this.Bar.SetColor( 'black' ); } else { this.Bar.SetColor( this.Color ); } } this.LastValue = aValue; } } // Bar Graphs function CBarGraphs() { this.BarGraphs = new Array(); } CBarGraphs.prototype.Make = function(aID,aBoxWidth,aBarWidth,aHeight,aNBars,aStorRefX,aStorRefY,aMaxValue,aXmin,aXmax,aColor) { var b = new CBarGraph(aID,aBoxWidth,aBarWidth,aHeight,aNBars,aStorRefX,aStorRefY,aMaxValue,aXmin,aXmax,aColor); b.Html(); this.BarGraphs[this.BarGraphs.length] = b; return b; } CBarGraphs.prototype.Update = function() { for (var i = 0; i < this.BarGraphs.length; i++) this.BarGraphs[i].Update(); } CBarGraphs.prototype.Reset = function() { for (var i = 0; i < this.BarGraphs.length; i++) this.BarGraphs[i].Reset(); } function CBarGraph(aID,aBoxWidth,aBarWidth,aHeight,aNBars,aStorRefX,aStorRefY,aMaxValue,aXmin,aXmax,aColor) { this.HtmlID = aID; this.BoxWidth = aBoxWidth; this.BarWidth = aBarWidth; this.Height = aHeight; this.NBars = aNBars; this.StorRefX = aStorRefX; this.StorRefY = aStorRefY; this.MaxValue = aMaxValue; var marg = (aXmax - aXmin) / aNBars / 2; this.Xmin = aXmin - marg; this.Xmax = aXmax + marg; this.Color = aColor; this.Bars = new Array(aNBars); this.ValueSums = new Array(aNBars); this.ValueCounts = new Array(aNBars); for (var i = 0; i < aNBars; i++) this.Bars[i] = null; } CBarGraph.prototype.Html = function() { var w = this.NBars * this.BarWidth + 6; if (this.BoxWidth > 0) w = this.BoxWidth; document.writeln( '<div class="Graph bdBoxSizing" id="Graph'+this.HtmlID+'" style="width:'+w+'px;height:'+(this.Height+6)+'px;border:1px solid black;padding:2px;overflow:hidden;">' ); for (var i = 0; i < this.NBars; i++) { var b = new CBar( this.HtmlID+i, this.Height, this.MaxValue, 'v', this.Color, 'float:left;' ); b.Width = this.BarWidth + 'px'; b.BorderWidth = 0; b.Padding = 1; b.Html(); this.Bars[i] = b; } document.writeln( '</div>' ); this.Reset(); } CBarGraph.prototype.Reset = function() { for (var i = 0; i < this.NBars; i++) { this.ValueSums[i] = 0.0; this.ValueCounts[i] = 0; this.Bars[i].SetValue(0.0); } } CBarGraph.prototype.Update = function() { // StorRef must be a reference to a variable or object property! if (this.StorRefX == '') return; try { var vx = eval(this.StorRefX); var vy = eval(this.StorRefY); this.SetValue( vx, vy ); } catch(err) {} } CBarGraph.prototype.SetValue = function( aX, aY ) { var i = Math.floor((aX-this.Xmin) * this.NBars / (this.Xmax - this.Xmin)); if (i < 0 || i >= this.NBars) return; this.ValueSums[i] += aY; this.ValueCounts[i]++; this.Bars[i].SetValue(this.ValueSums[i]/this.ValueCounts[i]); } // Input Fields function CInputFields() { this.InpFields = new Array(); var me = this; // closure xOnLoad(function(){me.Init();}); } CInputFields.prototype.Make = function( aName, aStorRef, aLabel, aUnit, aMult, aDigits ) { var i = this.InpFields.length; var fld = new CInputField( aName, aStorRef, aLabel, aUnit, aMult, aDigits ); fld.Html(); this.InpFields[i] = fld; return fld; } CInputFields.prototype.Init = function() { for (var i = 0; i < this.InpFields.length; i++) this.InpFields[i].Init(); } CInputFields.prototype.Reset = function() { for (var i = 0; i < this.InpFields.length; i++) this.InpFields[i].Reset(); } function CInputField( aName, aStorRef, aLabel, aUnit, aMult, aDigits ) { this.HtmlName = aName; this.HtmlObj = null; this.StorRef = aStorRef; this.Label = aLabel; this.Default = 0.0; this.Unit = aUnit; this.Mult = aMult; this.Digits = aDigits; var me = this; // closure this.OnChangeFunc = function(e){me.HandleChange(e);}; this.OnKeyDownFunc = function(e){me.HandleKeyDown(e);}; this.OnFocusFunc = function(e){me.HandleFocus(e);}; } CInputField.prototype.Html = function() { document.writeln('<td class="InpLabelCol">'+this.Label+'</td><td class="InpValueCol"><input type="text" class="InpField" id="'+this.HtmlName+'" name="'+this.HtmlName+'" value=""> '+this.Unit+'</td>'); } CInputField.prototype.Init = function() { this.HtmlObj = xGet(this.HtmlName); this.AddEventHandlers(); var v = eval(this.StorRef); if (this.Mult != 0) v /= this.Mult; this.Default = v; this.HtmlObj.value = v.toFixed(this.Digits); xStyle(this.HtmlObj,'color','black'); } CInputField.prototype.AddEventHandlers = function() { xAddEvent(this.HtmlObj,'change',this.OnChangeFunc); xAddEvent(this.HtmlObj,'keydown',this.OnKeyDownFunc); xAddEvent(this.HtmlObj,'focus',this.OnFocusFunc); } CInputField.prototype.Store = function() { // stores field value in storage try { var v; with(Math) { v = eval(this.HtmlObj.value); } if (this.Mult != 0) v *= this.Mult; eval(this.StorRef+'='+v); } catch(err) {} this.Recall(); } CInputField.prototype.Reset = function() { // Resets to Default Value this.HtmlObj.value = this.Default; xStyle(this.HtmlObj,'color','black'); this.Store(); } CInputField.prototype.Recall = function() { // recalls storage into input field var v = eval(this.StorRef); if (this.Mult != 0) v /= this.Mult; if (v != this.Default) xStyle(this.HtmlObj,'color','red'); this.HtmlObj.value = v.toFixed(this.Digits); } CInputField.prototype.HandleChange = function(e) { this.Store(); } CInputField.prototype.HandleKeyDown = function(ev) { if (ev.keyCode == 13) { this.Store(); return false; } else if (ev.keyCode == 27) { this.Reset(); } return true; } CInputField.prototype.HandleFocus = function(e) { this.HtmlObj.select(); }