From 304f2bc1031ecc628c71c93cc05bd7c0537c69b8 Mon Sep 17 00:00:00 2001 From: rlyra8 Date: Fri, 27 Oct 2023 14:49:15 -0300 Subject: [PATCH] Improve SiriusLed --- example/chart.tsx | 4 +- src/assets/interfaces.ts | 4 - src/components/SiriusLed/index.tsx | 172 ++++++++++------------------- src/controllers/epics_base.ts | 2 +- 4 files changed, 61 insertions(+), 121 deletions(-) diff --git a/example/chart.tsx b/example/chart.tsx index f6afb13..26f8bcf 100644 --- a/example/chart.tsx +++ b/example/chart.tsx @@ -33,8 +33,8 @@ const ChartDoc: React.FC = () => { ADD PVs -interface State { - value: T -} - interface Dict { [key: string]: T } diff --git a/src/components/SiriusLed/index.tsx b/src/components/SiriusLed/index.tsx index 66cdff7..e8499dd 100644 --- a/src/components/SiriusLed/index.tsx +++ b/src/components/SiriusLed/index.tsx @@ -1,71 +1,35 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import EpicsBase from "../../controllers/epics_base"; import SiriusTooltip from "../SiriusTooltip"; -import { State, LedPv, EpicsData, Dict } from "../../assets/interfaces"; +import { LedPv, EpicsData, Dict } from "../../assets/interfaces"; import { default_colors, led_shape } from "../../assets/themes"; import * as S from './styled'; /** * Default Led component for monitoring a PV from the EPICS control system. */ -class SiriusLed extends React.Component>{ - private epics: EpicsBase; - private color_list: Dict; - private hasMounted: boolean; - private fist_update: Date; - - constructor(props: LedPv) { - super(props); - this.updateLed = this.updateLed.bind(this); - - this.state = { - value: 'nc' - }; - this.fist_update = new Date(0); - this.hasMounted = false; - this.color_list = this.initialize_led_style(props.color); - this.epics = this.initialize_epics_base(props); - this.updateLed(); - } - - componentDidMount(): void { - this.hasMounted = true; - } - - /** - * Save PV name with update - */ - componentDidUpdate(): void { - const { pv_name } = this.props; - this.epics.set_pvname(pv_name); - } - - componentWillUnmount(): void { - this.epics.destroy(); - } - - initialize_epics_base(props: LedPv): EpicsBase { +const SiriusLed: React.FC = (props) => { + const epics: EpicsBase = new EpicsBase(props.pv_name); + const [colorList, setColorList] = useState>({}); + const [state, setState] = useState('nc'); + + useEffect(() => { + initialize_epics_base(); + setColorList(initialize_led_style()); + epics?.set_pvname(props.pv_name); + }, [props.pv_name]); + + const initialize_epics_base = (): void => { const { pv_name, threshold, update_interval } = props; - - this.epics = new EpicsBase(pv_name); - this.epics.initialize(pv_name, threshold, update_interval); - this.epics.start_timer(this.updateLed); - return this.epics; - } - - initialize_led_style(color: Dict|undefined) { - if(color !== undefined) { - color = this.handle_default_color(color); - return color; - } - return default_colors.led; + epics.initialize(pv_name, threshold, update_interval); + epics.start_timer(updateLed); } /** * Add normal and nc (Not connected) colors to the color dictionary * if they are not declared. */ - handle_default_color(color: Dict): Dict { + const handle_default_color = (color: Dict): Dict => { if(!('nc' in color)){ color["nc"] = default_colors.led["nc"]; } @@ -75,86 +39,66 @@ class SiriusLed extends React.Component>{ return color; } + const initialize_led_style = (): Dict => { + const { color } = props; + if(color !== undefined) + return handle_default_color(color); + return default_colors.led; + } + /** * Check if the time since the last PV update is greater than * the disconnect time parameter value. */ - check_disconnected(disc_time: number, pvInfo: EpicsData, led_value: string): string { - if(pvInfo.date != null){ - const update_time: number = pvInfo.date.getTime(); - const start_date: number = update_time - this.fist_update.getTime(); - let time_since_update: number = (new Date()).getTime() - update_time; - if(start_date < 1000){ - time_since_update += disc_time; - } + const check_disconnected = (disc_time: number, pvInfo: EpicsData, led_value: string): string => { + if(pvInfo.date === null) + return "nc"; - if(time_since_update >= disc_time){ - led_value = "nc"; - } - }else{ - led_value = "nc"; - } - return led_value - } + const update_time: number = pvInfo.date.getTime(); + const now_ms: number = (new Date()).getTime(); + let time_since_update: number = now_ms - update_time; - /** - * Register first update - */ - register_first_update(): void { - const date_0: Date = new Date(0); - if(date_0.getTime() == this.fist_update.getTime()){ - this.fist_update = new Date(); - } + if(time_since_update >= disc_time) + return "nc"; + + return led_value } /** * Update led color with measured EPICS value */ - updateLed(): void { - const { disc_time, pv_name, modifyValue } = this.props; + const updateLed = (): void => { + const { disc_time, pv_name, modifyValue } = props; let led_value: string = "nc"; - let pvData: Dict> = this.epics.get_pv_data(); - const pvInfo: EpicsData = pvData[pv_name]; - this.register_first_update(); - if(pvInfo != undefined){ - const validValue: boolean = this.state!=null && pvInfo.value != null; - if(validValue){ - led_value = this.epics.get_threshold(Number(pvInfo.value)); - if(modifyValue!=undefined){ - led_value = modifyValue( - led_value, pv_name); + if(epics){ + let pvData: Dict> = epics.get_pv_data(); + const pvInfo: EpicsData = pvData[pv_name]; + + if(pvInfo != undefined){ + const validValue: boolean = state!=null && pvInfo.value != null; + if(validValue){ + console.info("OK"+pvInfo.value) + led_value = epics.get_threshold(Number(pvInfo.value)); + if(modifyValue!=undefined) + led_value = modifyValue(led_value, pv_name); + if(disc_time) + led_value = check_disconnected(disc_time, pvInfo, led_value); + setState(led_value); } - if(disc_time){ - led_value = this.check_disconnected( - disc_time, pvInfo, led_value) - } - }else{ - this.fist_update = new Date(0); } - }else{ - this.fist_update = new Date(0); - } - - if(this.hasMounted){ - this.setState({ - value: led_value - }); } } - render(): React.ReactNode { - const {shape, pv_name} = this.props; - return( - - - - ); - } + return ( + + + + ); } export default SiriusLed; diff --git a/src/controllers/epics_base.ts b/src/controllers/epics_base.ts index b8493b9..13d41fd 100644 --- a/src/controllers/epics_base.ts +++ b/src/controllers/epics_base.ts @@ -13,7 +13,7 @@ class EpicsBase { private timer: any; constructor(pvname: T){ - this.update_interval = 100; + this.update_interval = 300; this.pv_name = pvname; this._subscribe2epics_con(); this.timer = null;