WaBis

walter.bislins.ch

Datei: simiface.js

Inhalt der Datei: media/simiface.js
// 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();
}


More Page Infos / Sitemap
Created Freitag, 22. Januar 2010
Scroll to Top of Page
Changed Donnerstag, 22. September 2016