date/time control

[patson12]

i am going to add date/time control in control expansion panel.. but it shows me blank in editor.. can you help me to add this new control ? or can you add this to in your version??

[unocelli]

Great, a datetime control is also in our TODO list, we can try to help you. We have created a 'datetime-control' branch where you can do the Pull Request with your changes.

[patson12]

hii, i will update code later.. right now i have done this in control ..

i have added code for editor now want to change value with live current time..

here is date component code

import { Component, Inject, OnInit, Input, AfterViewInit } from "@angular/core";
import { GaugeBaseComponent } from "../../gauge-base/gauge-base.component";
import {
GaugeSettings,
Variable,
GaugeStatus,
GaugeAction,
GaugeActionsType,
GaugeRangeProperty,
} from "../../../_models/hmi";
import { GaugeDialogType } from "../../gauge-property/gauge-property.component";

import { Utils } from "../../../_helpers/utils";

declare var SVG: any;

@component({
selector: "app-html-date",
templateUrl: "./html-date.component.html",
styleUrls: ["./html-date.component.css"],
})
export class HtmlDateComponent extends GaugeBaseComponent {
@input() data: any;

ngOnInit(): void {
throw new Error("Method not implemented.");
}
// static TypeTag = "svg-ext-htmlDate";
// static LabelTag = "HtmlDate";
// // static TypeTag = "svg-ext-value";
// // static LabelTag = "Value";

static TypeTag = "svg-ext-date";
static LabelTag = "HtmlDate";
static prefixD = "DATE_";

static actionsType = {
hide: GaugeActionsType.hide,
show: GaugeActionsType.show,
blink: GaugeActionsType.blink,
};

static getSignals(pro: any) {
let res: string[] = [];
if (pro.actions && pro.actions.length) {
pro.actions.forEach((act) => {
res.push(act.variableId);
});
}
if (pro.ranges) {
pro.ranges.forEach((range: GaugeRangeProperty) => {
if (range.textId) {
res.push(range.textId);
}
if (range["fractionDigitsId"]) {
res.push(range["fractionDigitsId"]);
}
});
}
if (pro.variableId) {
res.push(pro.variableId);
}
return res;
}
constructor() {
super();
}
static getDialogType(): GaugeDialogType {
return GaugeDialogType.ValueAndUnit;
}

static getActions(type: string) {
return this.actionsType;
}
static processValue(
ga: GaugeSettings,
svgele: any,
sig: Variable,
gaugeStatus: GaugeStatus
) {
try {
console.log("svgele", svgele);
if (
svgele.node &&
svgele.node.children &&
svgele.node.children.length <= 1
) {
let g = svgele.node.children[0];
let val: any = "abcd";
switch (typeof sig.value) {
case "undefined":
break;
case "boolean":
val = Number(sig.value);
break;
case "number":
val = parseFloat(val.toFixed(5));
break;
case "string":
val = sig.value;
break;
default:
break;
}
if (ga.property) {
let unit = GaugeBaseComponent.getUnit(ga.property, gaugeStatus);
let digit = GaugeBaseComponent.getDigits(ga.property, gaugeStatus);

      if (!Utils.isNullOrUndefined(digit) && Utils.isNumeric(val)) {
        val = parseFloat(val).toFixed(digit);
      }
      if (ga.property.variableId === sig.id) {
        g.textContent = val;
        if (unit) {
          g.textContent += " " + unit;
        }
      }
      // check actions
      if (ga.property.actions) {
        ga.property.actions.forEach((act) => {
          if (act.variableId === sig.id) {
            HtmlDateComponent.processAction(
              act,
              svgele,
              parseFloat(val),
              gaugeStatus
            );
          }
        });
      }
    }
  }
} catch (err) {
  console.error(err);
}

}

static processAction(
act: GaugeAction,
svgele: any,
value: any,
gaugeStatus: GaugeStatus
) {
if (this.actionsType[act.type] === this.actionsType.hide) {
if (act.range.min <= value && act.range.max >= value) {
let element = SVG.adopt(svgele.node);
this.runActionHide(element, act.type, gaugeStatus);
}
} else if (this.actionsType[act.type] === this.actionsType.show) {
if (act.range.min <= value && act.range.max >= value) {
let element = SVG.adopt(svgele.node);
this.runActionShow(element, act.type, gaugeStatus);
}
} else if (this.actionsType[act.type] === this.actionsType.blink) {
let element = SVG.adopt(svgele.node.children[0]);
let inRange = act.range.min <= value && act.range.max >= value;
this.checkActionBlink(element, act, gaugeStatus, inRange, false);
}
}
}

export class DateProperty {
signalid = "";
format = "##.##";
}
console.log("svgele", GaugeSettings);

[unocelli]

is there any news? can you please explain why you don't solve it with a script?

[unocelli]

date/time control are available to test in the last commit 81323c8