BrowserLogic/js/elements/DisplayElements.js

class LabelElement extends Element {
  constructor(_Container, RestoreData = null,logicengine) {
    super(_Container, RestoreData,logicengine,0);
    this.removeProperty("Inputs");
    this.Name = "Label";
    this.Font = "48px Console";
    this.FontStyle = "black";
    this.Label = this.Name;
    this.NoOutput = true;
    let LabelProperty = new ElementProperty("Label","string",{CBObject: this,CBFunction: "setLabel"},"Label","Label",false,1,255);
    this.Properties.push(LabelProperty);
    let LabelSize = new ElementProperty("Size","int",{CBObject: this,CBFunction: "setSize"},"48","48",false,6,99999);
    this.Properties.push(LabelSize);
    let LabelColor = new ElementProperty("Color","color",{CBObject: this,CBFunction: "setColor"},"#000000","#000000",false,0,0);
    this.Properties.push(LabelColor);

    if (RestoreData) {
      this.Label = RestoreData.Properties[0].CurrentValue;
      this.Properties[0].CurrentValue = this.Label;
      this.Font = RestoreData.Properties[1].CurrentValue + "px Console";
      this.Properties[1].CurrentValue = RestoreData.Properties[1].CurrentValue;
      this.FontStyle = RestoreData.Properties[2].CurrentValue;
      this.Properties[2].CurrentValue = this.FontStyle;
    }

    let textWidth = this.textSize(logicengine.Ctx,this.Label,this.Font);
    this.Width = textWidth.width;
    this.Height = textWidth.height;

  }
  setLabel(label) {
    this.Label = label;
    this.Properties[0].CurrentValue = label;
    this.drawElement(0,0,this.StaticCtx);
  }
  setSize(size) {
    this.Font = size + "px Console";
    this.Properties[1].CurrentValue = size;
    this.drawElement(0,0,this.StaticCtx);
  }

  setColor(color) {
    this.FontStyle = color;
    this.Properties[2].CurrentValue = color;
    this.drawElement(0,0,this.StaticCtx);
  }

  drawOutputs(ctx, x, y, borderColor = "#000", circleColorFalse = "#ff0000", circleColorTrue = "#00ff00", circleColorHover = "#00ffff") {
    // No outputs to draw
  }

  drawInputs(ctx, x, y, borderColor = "#000", circleColorFalse = "#ff0000", circleColorTrue = "#00ff00", circleColorHover = "#00ffff") {
    // No outputs to draw
  }

  drawElement(x, y, ctx) {
    if (this.LogicEngine.ActiveContainer !== this._Container) return; // No point if we aren't visible
    let textWidth = this.textSize(ctx,this.Label,this.Font);
    this.Width = textWidth.width;
    this.Height = textWidth.height;
    this.StaticCanvas.width = this.Width;
    this.StaticCanvas.height = this.Height;

    this.drawTextCentered(ctx,x,y,textWidth.width,textWidth.height,this.Label,this.Font,this.FontStyle);
  }
}
let ElementCatalog_Label = new ElementCatalog_Element("Label","Allows you to place a label","🏷",LabelElement,[]);
ElementReferenceTable.push(ElementCatalog_Label);
ElementCategory_Other.addElement(ElementCatalog_Label);

class output4bitDisplay extends Element {
  constructor(_Container, RestoreData = null,logicengine) {
    super(_Container, RestoreData,logicengine,4);
    this.Name = "4B Display";
    this.Output = false;
    this.OutputChar = "0";
    this.NoOutput = true;
    this.Width = 100;
    this.Height = 100;
    this.Inputs = [0,0,0,0];
    this.InputLabels = ["I0","I1","I2","I3"];
    this.Type = 0;
    this.removeProperty("Inputs");
    let typeProperty = new ElementProperty("Type","list",{CBObject: this,CBFunction: "setType"},0,0,[{Value: "0", String: "Hex"},{Value: "1", String: "Decimal"},{Value: "2", String: "BCD"}],0,0);
    this.Properties.push(typeProperty);

    if (RestoreData) {
      if (RestoreData.Properties.length > 0) {
        this.Properties[0].CurrentValue = RestoreData.Properties[0].CurrentValue;
        this.Properties[0].Values = RestoreData.Properties[0].Values;
        this.setType(this.Properties[0].CurrentValue);
      }
    }
  }

  setType(type) {
    this.Properties[0].CurrentValue = type;
    switch (type) {
      case "0":
        this.Type = 0;
        break;
      case "1":
        this.Type = 1;
        break;
      case "2":
        this.Type = 2;
        break;
    }
    this.setInput(0,this.Inputs[0]); // Trigger a proper recalc of the display.
  }

  setInput(Input, Value) {
    Value = this._Container.isHigh(this,Input);
    this.Inputs[Input] = (Value !== false) ? 1 : 0;
    let outchar = (this.Inputs[3] << 3) + (this.Inputs[2] << 2) + (this.Inputs[1] << 1) + (this.Inputs[0]);

    this.OutputChar = (outchar);
    switch (outchar) {
      case 10:
        if (this.Type == 0) this.OutputChar = 'A';
        if (this.Type == 1) this.OutputChar = '10';
        if (this.Type == 2) this.OutputChar = '0';
        break;
      case 11:
        if (this.Type == 0) this.OutputChar = 'B';
        if (this.Type == 1) this.OutputChar = '11';
        if (this.Type == 2) this.OutputChar = '1';
        break;
      case 12:
        if (this.Type == 0) this.OutputChar = 'C';
        if (this.Type == 1) this.OutputChar = '12';
        if (this.Type == 2) this.OutputChar = '2';
        break;
      case 13:
        if (this.Type == 0) this.OutputChar = 'D';
        if (this.Type == 1) this.OutputChar = '13';
        if (this.Type == 2) this.OutputChar = '3';
        break;
      case 14:
        if (this.Type == 0) this.OutputChar = 'E';
        if (this.Type == 1) this.OutputChar = '14';
        if (this.Type == 2) this.OutputChar = '4';
        break;
      case 15:
        if (this.Type == 0) this.OutputChar = 'F';
        if (this.Type == 1) this.OutputChar = '15';
        if (this.Type == 2) this.OutputChar = '5';
        break;
    }
    this.drawElement(0,0,this.StaticCtx);
  }

  drawOutputs(ctx, x, y, borderColor = "#000", circleColorFalse = "#ff0000", circleColorTrue = "#00ff00", circleColorHover = "#00ffff") {
    // Do nothing, we want to overide
  }

  drawElement(x, y, ctx) {
    if (this.LogicEngine.ActiveContainer !== this._Container) return; // No point if we aren't visible
    this.StaticCanvas.width = this.Width;
    this.StaticCanvas.height = this.Height;

    this.drawBorderBox(ctx, x+20,y,this.Width-40,this.Height);
    let fontStyle = "72px Console";
    if (this.Type == 1) fontStyle = "36px Console";
    this.drawTextCentered(ctx,x,y,this.Width,this.Height,this.OutputChar,fontStyle);
    this.drawInputs(ctx,x,y,undefined,undefined,undefined,undefined,true);
  }
}

let ElementCatalog_Output_4BDisplay = new ElementCatalog_Element("4B Display","A display!  Takes a 4 bit input and shows hex value of the input.","[8]",output4bitDisplay,[]);
ElementReferenceTable.push(ElementCatalog_Output_4BDisplay);
ElementCategory_Outputs.addElement(ElementCatalog_Output_4BDisplay);