Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved Az and El display for ATDome MTDome and TMA #414

Merged
merged 3 commits into from
Dec 20, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion love/src/components/AuxTel/Dome/Dome.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import DomeTopView from './DomeTopView';
import DomePointing from './DomePointing';
import DomeShutter from './DomeShutter';
import MountTopView from './MountTopView';
import Elevation from 'components/GeneralPurpose/Elevation/Elevation';
import Azimuth from 'components/GeneralPurpose/Azimuth/Azimuth';

import WindRose from '../../icons/WindRose/WindRose';
import DomeSummaryTable from './DomeSummaryTable/DomeSummaryTable';
Expand Down Expand Up @@ -208,8 +210,30 @@ export default class Dome extends Component {
<div className={styles.windRoseContainer}>
<WindRose />
</div>
<div className={styles.elevationContainer}>
<Elevation
height={height}
width={width}
radius={width / 2}
maxL3={90}
maxL2={85}
maxL1={80}
minL1={10}
minL2={5}
minL3={0}
currentValue={currentPointing.el}
targetValue={currentPointing.az}
/>
</div>

<DomeTopView width={width} height={height} />
<Azimuth
className={styles.svgAzimuth}
width={width}
height={height}
currentValue={domeAz}
targetValue={domeTargetAz}
/>
{/*<DomeTopView width={width} height={height} />*/}
<MountTopView currentPointing={currentPointing} />
<DomeShutter
width={width}
Expand Down
23 changes: 22 additions & 1 deletion love/src/components/AuxTel/Dome/Dome.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,21 @@
width: 12%;
}

.elevationContainer {
position: absolute;
left: 75%;
top: 25%;
width: 70%;
}

.elevationContainer svg {
width: 60%;
}

.vignettingDistanceContainer {
position: absolute;
left: 50%;
bottom: 2%;
bottom: 0%;
transform: translate(-50%, 0);
}

Expand All @@ -126,3 +137,13 @@
stroke: var(--default-active-background-color);
fill: var(--second-quaternary-background-dimmed-color);
}

.svgAzimuth {
transform-origin: 50% 50%;
transform: scale(1.1);
width: 100%;
}

.svgAzimuth svg {
width: 110%;
}
23 changes: 11 additions & 12 deletions love/src/components/AuxTel/Dome/DomePointing.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,18 +51,17 @@ export default class DomePointing extends Component {
const az = this.props.currentPointing.az;
return (
<svg className={styles.svgOverlay} height={height} width={width} viewBox="0 0 596 596">

<circle
className={styles.targetPointing}
r={16}
strokeWidth={2}
cx={zenithPixels.x}
cy={zenithPixels.y}
style={{
transform: `rotateZ(${this.props.targetPointing.az}deg) rotateX(${this.props.targetPointing.el - 90}deg)`,
transformOrigin: '50% 50% 298px',
}}
/>
<circle
className={styles.targetPointing}
r={16}
strokeWidth={2}
cx={zenithPixels.x}
cy={zenithPixels.y}
style={{
transform: `rotateZ(${this.props.targetPointing.az}deg) rotateX(${this.props.targetPointing.el - 90}deg)`,
transformOrigin: '50% 50% 298px',
}}
/>

<g
style={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
color: var(--secondary-font-color);
}


.multirowLabel {
display: block;
white-space: nowrap;
}

.panelTable{
.panelTable {
padding: 1em 0 0 0.4rem;
}

.panelTable td, .panelTable th{
border-color:var(--second-quaternary-background-dimmed-color);
text-align:center;
}
.panelTable td,
.panelTable th {
border-color: var(--second-quaternary-background-dimmed-color);
text-align: center;
}
145 changes: 145 additions & 0 deletions love/src/components/GeneralPurpose/Azimuth/Azimuth.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './Azimuth.module.css';

export default class Limits extends Component {
static propTypes = {
/** gauge Size */
radius: PropTypes.number,

/** Value origin, from where the gauge fills up */
valueOrigin: PropTypes.number,
/** Current value */
currentValue: PropTypes.number,
/** Target value */
targetValue: PropTypes.number,

/** Option to show labels */
displayLabels: PropTypes.bool,
};

static defaultProps = {
radius: 200,
valueOrigin: -90,

currentValue: 0,
targetValue: 0,

displayLabels: true,

height: 200,
width: 200,
};

render() {
const { className, height, width, currentValue, targetValue, radius, valueOrigin, displayLabels } = this.props;

return (
<svg className={className} height={height} width={width} viewBox={`0 0 ${height} ${height}`}>
{/* Diagram Group Container, whith translation and origin rotation for the whole svg */}
<g style={{ translate: `${width / 2}px ${height / 2}px`, transform: `rotate(${valueOrigin}deg)` }}>
{/* Origin value text */}
<text
className={styles.originText}
transform={`${'translate(' + radius + ' 0) rotate(' + valueOrigin * -1 + ')'}`}
>
<tspan>0º</tspan>
</text>

{/* Azimuth Diagram Group */}
<g
style={{
transformOrigin: `50% 50%`,
transition: 'transform 1.5s linear 0s',
transformBox: 'fill-box',
transform: ` rotate(${currentValue}deg)`,
}}
>
{/* Rotate Center */}
<circle
style={{
fill: 'transparent',
}}
r={`${radius * 1.3}`}
cx={`${0}`}
cy={`${0}`}
/>

{/* Current value text*/}
<g className={styles.targetText}>
<text
transform={`${'translate(' + radius + ' 0) rotate(' + (valueOrigin * -1 - currentValue) + ')'}`}
transition=" transform 1.5s linear 0s"
>
<tspan
className={[
currentValue > 90
? [currentValue > 180 ? [currentValue > 270 ? styles.textQ2 : styles.textQ3] : styles.textQ4]
: styles.textQ1,
].join(' ')}
>{`${currentValue + 'º'}`}</tspan>
</text>
</g>

{/* Background */}
<circle
style={{
transition: 'transform 1.5s linear 0s',
transformBox: 'fill-box',
}}
r={`${radius}`}
cx={`${0}`}
cy={`${0}`}
className={styles.bg}
/>

{/* Gauge */}
<circle
style={{
transition: 'transform 1.5s linear 0s',
transformBox: 'fill-box',
}}
r={`${radius * 0.92}`}
cx={`${0}`}
cy={`${0}`}
className={styles.gaugeL1}
/>

{/* Target Line */}
<path
style={{
transition: 'transform 1.5s linear 0s',
transformBox: 'fill-box',
transform: ` rotate(${targetValue - currentValue}deg)`,
}}
d={`${'M 0 0 L ' + radius + ' 0'}`}
className={styles.targetValue}
/>

{/* Current Line */}
<path
style={{
transition: 'transform 1.5s linear 0s',
transformBox: 'fill-box',
}}
d={`${'M 0 0 L ' + radius + ' 0'}`}
className={styles.currentValue}
/>

{/* Cutout */}
<circle
style={{
transition: 'transform 1.5s linear 0s',
transformBox: 'fill-box',
}}
r={`${radius * 0.9}`}
cx={`${0}`}
cy={`${0}`}
className={styles.cutOut}
/>
</g>
</g>
</svg>
);
}
}
77 changes: 77 additions & 0 deletions love/src/components/GeneralPurpose/Azimuth/Azimuth.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
.backgroundBar {
stroke: var(--second-quaternary-background-color);
}

.warningBar {
stroke: var(--status-warning-dimmed-color-2);
}

.activeWarning {
animation: warning 0.5s infinite;
animation-direction: alternate;
transition: stroke ease-in-out;
}

.currentValue {
fill: white;
transition: x 0.5s ease;
}

.originText {
fill: var(--secondary-font-color);
font-size: 1em;
text-anchor: start;
}

.targetText {
fill: var(--base-font-color);
font-size: 1em;
transition: transform 0.5s linear 0s;
}

.textQ1 {
text-anchor: start;
}
.textQ2 {
text-anchor: end;
}
.textQ3 {
alignment-baseline: text-before-edge;
text-anchor: end;
}
.textQ4 {
alignment-baseline: text-before-edge;
text-anchor: start;
}

.cutOut {
fill: rgb(17, 31, 39);
}

.bg {
fill: #182e39;
}
.bgTarget {
fill: transparent;
stroke: #3a525f;
opacity: 0.25;
transition: stroke-dasharray linear 0.5s;
transition: transform ease-out 0.5s;
}
.gaugeL1 {
fill: #2e6261;
}

.targetValue {
stroke: #c1ced2;
fill: transparent;
stroke-width: 2px;
stroke-dasharray: 4 4;
transition: transform ease-out 0.5s;
}
.currentValue {
stroke: #c1ced2;
fill: transparent;
stroke-width: 2px;
transition: transform ease-out 0.5s;
}
Loading