Skip to content

Commit

Permalink
src: WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@carneirofc
carneirofc committed Mar 25, 2020
1 parent 114e5db commit 61fe86c
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 22 deletions.
4 changes: 2 additions & 2 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.App {
align-items: center;
background-color: #052b00;
color: white;
background-color: #061a10;
color: #bfbfbf;
font-size: calc(12px + 2vmin);
justify-content: center;
min-height: 100vh;
Expand Down
13 changes: 9 additions & 4 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,22 @@ import GammaBar from './components/GammaBar';
import { Button, ButtonGroup } from '@material-ui/core';

import gamma from './static/gamma.json';
import gamma_norm from './static/gamma_norm.json';

import { GAMMA } from './utils/consts';

import './App.css';

const STATE = {
INITIAL: 0,
GAMMA_NORM: 1,
GAMMA: 3
}

class App extends React.Component {
constructor(props) {
super(props);
this.state = { content: STATE.INITIAL, tooltipVisible: false, tooltipX: '', tooltipY: '', title: "Sirius - Gamma Detectors" };
this.state = { content: STATE.INITIAL, tooltipVisible: false, tooltipX: '', tooltipY: '' };
}

customTooltipCallback = (tooltipModel) => {
Expand All @@ -41,10 +43,11 @@ class App extends React.Component {
</div>
} else {
return <div className='Menu'>
<div className='MainTitle'>{this.state.title}</div>
<div style={{ 'margin-bottom': '15px' }} className='SubTitle'></div>
<div className='MainTitle'>Sirius - Gamma Detectors</div>
<div style={{ 'margin-bottom': '15px' }} className='SubTitle'>Gamma Detector Counting Readings</div>
<ButtonGroup orientation="vertical" color="primary">
<Button variant="contained" color="primary" onClick={() => this.setState({ content: STATE.GAMMA })}>Gamma</Button><br />
<Button variant="contained" color="primary" onClick={() => this.setState({ content: STATE.GAMMA_NORM })}>Gamma - Normalized Countings (SI current)</Button><br />
</ButtonGroup>
</div>

Expand Down Expand Up @@ -72,7 +75,9 @@ class App extends React.Component {
renderGraph = () => {
switch (this.state.content) {
case STATE.GAMMA:
return <GammaBar customTooltipCallback={this.customTooltipCallback} pvs={gamma} title='GAMMA' {...GAMMA} />
return <GammaBar customTooltipCallback={this.customTooltipCallback} pvs={gamma} labely='Pulses/second' title='Gamma Detector - Countings' {...GAMMA} />
case STATE.GAMMA_NORM:
return <GammaBar customTooltipCallback={this.customTooltipCallback} pvs={gamma_norm} labely='Pulses/second.mA' title='Gamma Detector - Normalized Countings (SI Current)' {...GAMMA} />
default:
if (this.state.tooltipVisible) { this.setState({ tooltipVisible: false }); }
return <div></div>;
Expand Down
40 changes: 24 additions & 16 deletions src/components/GammaBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ class GammaBar extends React.Component {
tooltipVisible: false,
minorVal: props.high ? props.high : 2000,
minorArray: props.pvs.map(() => props.high ? props.high : 1e-8),
majorVal: props.hihi ? props.hihi : 200,
majorVal: props.hihi ? props.hihi : 100,
majorArray: props.pvs.map(() => props.hihi ? props.hihi : 1e-7),
maxVal: null,
};

this.timer = null;
this.refreshInterval = 100;
this.epics = new Epics(this.props.pvs);
this.epicscurrent = new Epics(['SI-13C4:DI-DCCT:Current-Mon']);

this.values = [];
this.alarms = { bg: [], border: [] };
Expand All @@ -46,13 +47,14 @@ class GammaBar extends React.Component {
const { minorVal, majorVal } = this.state;
const { pvs } = this.props;

this.values = pvs.map(pv => { return this.epics.pvData[pv].value; });
this.values = pvs.map(pv => { return this.epics.pvData[pv].value.toExponential(2); });
this.currentvalue = this.epicscurrent.pvData['SI-13C4:DI-DCCT:Current-Mon'].value.toExponential(2);
this.valuesMax = Math.max(...this.values);

this.alarms.bg = this.values.map(value => {
if (value && !isNaN(value)) {
if (value < minorVal) {
return color.OK_BG;
return color.OK_GAMMA_BG;
} else if (value >= minorVal && value < majorVal) {
return color.MINOR_BG;
} else {
Expand All @@ -68,12 +70,12 @@ class GammaBar extends React.Component {
this.alarms.border = this.values.map(value => {
if (value && !isNaN(value)) {
if (value < minorVal) {
return color.OK_LINE;
return color.OK_GAMMA_LINE;
} else if (value >= minorVal && value < majorVal)
return color.MINOR_LINE;
} else {
/** Same as the alarm.bg*/
return color.OK_LINE;
return color.OK_GAMMA_LINE;
}
});
}
Expand All @@ -91,11 +93,11 @@ class GammaBar extends React.Component {
labels: pvs,
datasets: [
{
label: 'MKS - Cold Cathode',
label: 'Gamma',
backgroundColor: this.alarms.bg,
borderColor: this.alarms.border,
borderWidth: 1,
hoverBackgroundColor: color.OK_BG,
hoverBackgroundColor: color.OK_GAMMA_BG,
hoverBorderColor: color.HOVER_LINE,
data: this.values,
},
Expand Down Expand Up @@ -129,22 +131,19 @@ class GammaBar extends React.Component {

componentDidMount() { this.timer = setInterval(this.updateContent, this.refreshInterval); }

componentWillUnmount() { clearInterval(this.timer); this.epics.disconnect(); }
componentWillUnmount() { clearInterval(this.timer); this.epics.disconnect(); this.epicscurrent.disconnect();}

renderBar() {
const { majorVal, minorVal, maxVal } = this.state;
const { customTooltipCallback } = this.props;
const { labely } = this.props;
return (
<Bar
data={this.state.chartData}
plugins={[ChartDataLabels]}
options={{
plugins: {
datalabels: {
rotation: 270,
font: { weight: "bold" },
formatter: function(value, context) { return value.toExponential();},
},
datalabels: { rotation: 270, font: { weight: "bold"}, color: 'rgba(184,184,184)' },
},
tooltips: { mode: 'index', enabled: false, custom: customTooltipCallback },
maintainAspectRatio: false,
Expand All @@ -155,7 +154,10 @@ class GammaBar extends React.Component {
},
scales: {
xAxes: [{
ticks: {},
ticks: {
fontColor: 'rgba(184,184,184)',
fontSize: 14
},
gridLines: {
display: true,
color: 'rgba(184,184,184,0.2)',
Expand All @@ -164,13 +166,15 @@ class GammaBar extends React.Component {
}],
yAxes: [{
id: 'pulse',
scaleLabel: { display: true, labelString: 'Pulse/s' },
scaleLabel: { display: true, labelString: labely, fontColor: 'rgba(184,184,184)' },
gridLines: {
display: true,
color: 'rgba(184,184,184,0.2)',
zeroLineColor: 'rgba(184,184,184,0.8)'
},
ticks: {
fontColor: 'rgba(184,184,184)',
fontSize: 14,
min: 1e-12,
max: maxVal,
fontSize: 14,
Expand Down Expand Up @@ -199,15 +203,19 @@ class GammaBar extends React.Component {
const { title, backHandler } = this.props;

return (
<div className='GammaBar'>
<div className='GammaBar'>
<div className='GammaBar1'>
<div className='Title'>{title}</div>
<SettingsDialog
title={title + " settings"}
high={minorVal}
hihi={majorVal}
handleConfig={this.handleConfig} />

{this.state.chartData ? <article className='GraphContainer'> {this.renderBar()} </article> : 'loading...'}
</div>
{'\nSI-13C4:DI-DCCT:Current-Mon: ' + this.currentvalue + " mA"}
</div>
);
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/utils/Colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ class Color{
this.OK_BG = 'rgba(65,190,60,0.9)';
this.OK_LINE = 'rgba(65,190,60,0.6)';

this.OK_GAMMA_BG = 'rgba(148, 79, 24,0.9)';
this.OK_GAMMA_LINE = 'rgba(148, 79, 24,0.6)';

this.MINOR_BG = 'rgba(359, 200, 0, 0.8)';
this.MINOR_LINE = 'rgba(359 ,200, 0, 1)';

Expand Down

0 comments on commit 61fe86c

Please sign in to comment.