From 5ecc20740482e53555e37e032571f1ddda1d8c55 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 28 Jun 2021 19:23:11 +0000 Subject: [PATCH 01/29] Bump prismjs from 1.23.0 to 1.24.0 in /love Bumps [prismjs](https://github.com/PrismJS/prism) from 1.23.0 to 1.24.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](https://github.com/PrismJS/prism/compare/v1.23.0...v1.24.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: indirect ... Signed-off-by: dependabot[bot] --- love/yarn.lock | 39 +++------------------------------------ 1 file changed, 3 insertions(+), 36 deletions(-) diff --git a/love/yarn.lock b/love/yarn.lock index a9696578e..2523e127d 100644 --- a/love/yarn.lock +++ b/love/yarn.lock @@ -3652,15 +3652,6 @@ clipboard-copy@^3.1.0: resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb" integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ== -clipboard@^2.0.0: - version "2.0.6" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" - integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== - dependencies: - good-listener "^1.2.2" - select "^1.1.2" - tiny-emitter "^2.0.0" - cliui@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5" @@ -5016,11 +5007,6 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= -delegate@^3.1.2: - version "3.2.0" - resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" - integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== - depd@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" @@ -6627,13 +6613,6 @@ glogg@^1.0.2: dependencies: sparkles "^1.0.0" -good-listener@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" - integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= - dependencies: - delegate "^3.1.2" - graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4: version "4.2.4" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" @@ -10761,11 +10740,9 @@ pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2: react-is "^17.0.1" prismjs@^1.17.1: - version "1.23.0" - resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33" - integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA== - optionalDependencies: - clipboard "^2.0.0" + version "1.24.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.0.tgz#0409c30068a6c52c89ef7f1089b3ca4de56be2ac" + integrity sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ== private@^0.1.8: version "0.1.8" @@ -12152,11 +12129,6 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= -select@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" - integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= - selfsigned@^1.10.7: version "1.10.8" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30" @@ -13114,11 +13086,6 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= -tiny-emitter@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" - integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== - tiny-invariant@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" From 2ac5f8e58de955f3eb2d5c91d0b2f58ef1b905e0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 4 Aug 2021 00:07:15 +0000 Subject: [PATCH 02/29] Bump tar from 6.0.5 to 6.1.4 in /love Bumps [tar](https://github.com/npm/node-tar) from 6.0.5 to 6.1.4. - [Release notes](https://github.com/npm/node-tar/releases) - [Changelog](https://github.com/npm/node-tar/blob/main/CHANGELOG.md) - [Commits](https://github.com/npm/node-tar/compare/v6.0.5...v6.1.4) --- updated-dependencies: - dependency-name: tar dependency-type: indirect ... Signed-off-by: dependabot[bot] --- love/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/love/yarn.lock b/love/yarn.lock index a9696578e..2ce251cfb 100644 --- a/love/yarn.lock +++ b/love/yarn.lock @@ -12964,9 +12964,9 @@ tapable@^1.0.0, tapable@^1.1.3: integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== tar@^6.0.2: - version "6.0.5" - resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f" - integrity sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg== + version "6.1.4" + resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.4.tgz#9f0722b772a5e00dba7d52e1923b37a7ec3799b3" + integrity sha512-kcPWrO8S5ABjuZ/v1xQHP8xCEvj1dQ1d9iAb6Qs4jLYzaAIYWwST2IQpz7Ud8VNYRI+fGhFjrnzRKmRggKWg3g== dependencies: chownr "^2.0.0" fs-minipass "^2.0.0" From 1077e97d36f00c9db6d8aa43e2d1d960181145ed Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 11 Aug 2021 00:44:32 +0000 Subject: [PATCH 03/29] Bump path-parse from 1.0.6 to 1.0.7 in /love Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. - [Release notes](https://github.com/jbgutierrez/path-parse/releases) - [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7) --- updated-dependencies: - dependency-name: path-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] --- love/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/love/yarn.lock b/love/yarn.lock index a9696578e..012faf140 100644 --- a/love/yarn.lock +++ b/love/yarn.lock @@ -9882,9 +9882,9 @@ path-key@^3.0.0, path-key@^3.1.0: integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-to-regexp@0.1.7: version "0.1.7" From 849fe4ea4d5e2c5acaaf42899c3787c44a1ea704 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Mon, 19 Apr 2021 18:16:35 -0400 Subject: [PATCH 04/29] First changes on camera cable wrap component --- .../MainTel/CableWraps/CableWraps.jsx | 93 ++++++++++++++----- .../MainTel/CableWraps/CableWraps.module.css | 19 +++- 2 files changed, 85 insertions(+), 27 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 57c60dd21..594375688 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -2,7 +2,15 @@ import React, { Component } from 'react'; import styles from './CableWraps.module.css'; import AZCableWrap from './AZCableWrap/AZCableWrap'; import CameraCableWrap from './CameraCableWrap/CameraCableWrap'; +import StatusText from '../../GeneralPurpose/StatusText/StatusText'; +import SummaryPanel from '../../GeneralPurpose/SummaryPanel/SummaryPanel'; +import Row from '../../GeneralPurpose/SummaryPanel/Row'; +import Label from '../../GeneralPurpose/SummaryPanel/Label'; +import Value from '../../GeneralPurpose/SummaryPanel/Value'; +import Title from '../../GeneralPurpose/SummaryPanel/Title'; import * as d3 from 'd3'; +import { style } from 'd3'; +// import { Title } from 'components/GeneralPurpose/CardList/CardList'; class CableWraps extends Component { constructor(props) { @@ -51,19 +59,19 @@ class CableWraps extends Component { } drawBackground(g, radio, tau, arc) { - g.append('circle') + g.append('semi-circle') .attr('cx', 0) .attr('cy', 0) .attr('r', radio - 5) .style('fill', '#102632'); - g.append('circle') - .attr('cx', 0) - .attr('cy', 0) - .attr('r', radio - 70) - .style('fill', '#33687f') - .style('stroke', '#233a42') - .style('stroke-width', '0'); + // g.append('circle') + // .attr('cx', 0) + // .attr('cy', 0) + // .attr('r', radio - 70) + // .style('fill', '#33687f') + // .style('stroke', '#233a42') + // .style('stroke-width', '0'); g.append('path').datum({ endAngle: tau }).style('fill', '#33687f').attr('d', arc); } @@ -76,6 +84,12 @@ class CableWraps extends Component { .attr('height', 30) .style('fill', '#ffffff'); + g.append('text') + .attr('x', 10) + .attr('y', -145) + .text(0 + '°') + .style('fill', '#ffffff'); + g.append('rect') .attr('x', -radio - 10) .attr('y', 0) @@ -116,11 +130,11 @@ class CableWraps extends Component { render() { return (
-

Cable Wraps

+ {/*

Cable Wraps

*/}
-
-

Camera Cable Wrap

- {this.state.cable_wraps ? ( +
+ {/*

Camera Cable Wrap

*/} + {/* {this.state.cable_wraps ? (

Rotator angle difference: @@ -131,17 +145,50 @@ class CableWraps extends Component {

- )} - + )} */} +
+ + {/*Camera*/} + Camera Cable Wrap + + UNDEFINED + + + + Value + + + Value + + + Degrees + + {/*Drivers*/} + + Drivers + None + + + UNDEFINED + + + + UNDEFINED + + +
+
+ +
-
+ {/*

Azimuth Cable Wrap

{this.state.cable_wraps ? ( @@ -165,7 +212,7 @@ class CableWraps extends Component { arcTween={this.arcTween} cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.az : null} /> -
+
*/}
); diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index 1029df89a..2e8e94997 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -19,7 +19,7 @@ .rotatorDiff { font-size: 17px; - margin-bottom: 0; + margin-bottom: 0px; margin-left: 10px; } @@ -28,13 +28,24 @@ margin-left: 10px; } -.camCable { -} - .cableWrapSeparator { height: 290px; width: 3px; margin: 50px 40px; border-radius: 10px; background: #2d3d4e; +} + +.cablewrapInfo { + background-color: #2d3d4e; + /* display: inline-flex; */ + width: 550px; +} + +.cameraInfo { + display: inline-flex; +} + +.divCameraWrap { + margin-top: 80px; } \ No newline at end of file From ce640d31a022bbeef359a4f04f73430a7a6f12af Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Tue, 20 Apr 2021 12:51:32 -0400 Subject: [PATCH 05/29] More changes into CCW component --- .../src/components/MainTel/CableWraps/CableWraps.jsx | 12 ++++++------ .../MainTel/CableWraps/CableWraps.module.css | 9 ++++----- .../CableWraps/CameraCableWrap/CameraCableWrap.jsx | 2 +- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 594375688..c5d3872ef 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -131,8 +131,8 @@ class CableWraps extends Component { return (
{/*

Cable Wraps

*/} -
-
+ {/*
*/} + {/*
*/} {/*

Camera Cable Wrap

*/} {/* {this.state.cable_wraps ? (

@@ -146,7 +146,7 @@ class CableWraps extends Component {

)} */} -
+
{/*Camera*/} Camera Cable Wrap @@ -166,7 +166,7 @@ class CableWraps extends Component { {/*Drivers*/} Drivers - None +   UNDEFINED @@ -187,7 +187,7 @@ class CableWraps extends Component { cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.camera : null} />
-
+ {/*
*/} {/*

Azimuth Cable Wrap

@@ -213,7 +213,7 @@ class CableWraps extends Component { cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.az : null} />
*/} -
+ {/*
*/}
); } diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index 2e8e94997..9a9e96263 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -1,5 +1,5 @@ .cableWrapsContainer { - display: flex; + display: inline-block; flex-direction: column; margin: 5px; height: 100%; @@ -7,11 +7,11 @@ } .cableWrapsContainer .cableWrapsContent { - display: flex; color: #96a3b3; background: var(--theme-div-background); margin: 5px; height: 100%; + width: 500px; margin-top: 0; padding-right: 5px; padding-left: 20px; @@ -38,8 +38,7 @@ .cablewrapInfo { background-color: #2d3d4e; - /* display: inline-flex; */ - width: 550px; + display: inline-flex; } .cameraInfo { @@ -48,4 +47,4 @@ .divCameraWrap { margin-top: 80px; -} \ No newline at end of file +} diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index cecbf6d17..fdd338d61 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -73,7 +73,7 @@ class CameraCableWrap extends Component { let delta = radians(this.props.cable_wrap.rotator); let newRotAngle = newAngle + delta; this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); - this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); + // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); } componentDidMount() { From fe5dbaf462eadbb10c8e3376ca1beb0c43491d59 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Tue, 11 May 2021 21:17:25 -0400 Subject: [PATCH 06/29] First attempt to draw line over semi-circle --- .../CameraCableWrap/CameraCableWrap.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index fdd338d61..454d63ad7 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -25,7 +25,7 @@ class CameraCableWrap extends Component { let svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); this.g = g; - let tau = (1 / 2) * Math.PI; + let tau = (1 / 2) * Math.PI; //to transform angles to radians let bckgarc = d3 .arc() @@ -68,11 +68,22 @@ class CameraCableWrap extends Component { } updateCameraCableWrap() { + let radialLineGenerator = d3.lineRadial(); + let radio = 140; let tau = Math.PI / 2; let newAngle = this.props.cable_wrap.cable * tau; let delta = radians(this.props.cable_wrap.rotator); let newRotAngle = newAngle + delta; - this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); + let middleAngle = (newAngle - newRotAngle) / 2; + let radialpoints = [ + [newAngle, radio], + [newRotAngle, radio], + [middleAngle, radio] + ]; + let radialData = radialLineGenerator(radialpoints); + // let radial = svg.select("path").attr("class", "radial").attr("d", radialData); + this.path.transition().duration(1500).attr("class", "radial").attr("d", radialData); + // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); } From 70e1d4fae276ce8cbf9467998fed8116501d8f89 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Wed, 12 May 2021 14:59:11 -0400 Subject: [PATCH 07/29] Second attempt to draw line over semi-circle --- .../CableWraps/CameraCableWrap/CameraCableWrap.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 454d63ad7..ea724f0fd 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -59,7 +59,7 @@ class CameraCableWrap extends Component { this.innerPath = this.g .append('path') .datum({ endAngle: 0 }) - .style('fill', '#43e0f921') + .style('fill', '#43e0f9') .attr('d', this.innerArc) .attr('id', 'rot_wrap'); @@ -76,14 +76,13 @@ class CameraCableWrap extends Component { let newRotAngle = newAngle + delta; let middleAngle = (newAngle - newRotAngle) / 2; let radialpoints = [ + [0, 0], [newAngle, radio], - [newRotAngle, radio], - [middleAngle, radio] + [newRotAngle, radio] ]; let radialData = radialLineGenerator(radialpoints); - // let radial = svg.select("path").attr("class", "radial").attr("d", radialData); - this.path.transition().duration(1500).attr("class", "radial").attr("d", radialData); - // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); + this.innerPath.transition().duration(1500).attr("class", "radial").attr("d", radialData); + this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); } From fd6ae6d3457a74250c2c90f3e5f82b8a78a1f282 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Wed, 12 May 2021 22:15:57 -0400 Subject: [PATCH 08/29] Third attempt to draw line over semi-circle --- .../MainTel/CableWraps/CableWraps.jsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index c5d3872ef..1f3514615 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -76,7 +76,25 @@ class CableWraps extends Component { g.append('path').datum({ endAngle: tau }).style('fill', '#33687f').attr('d', arc); } - drawLimits(g, radio, start, end) { + drawLimits(g, radio, start, end) { //acá tendría que pasarle como atributos tb el ángulo inicial y el final del arco + g.append('line') + .attr("x1", -85) + .attr("y1", -85) + .attr("x2", -105) + .attr("y2", -105) + .attr('transform', 'rotate(30)') + .style("stroke", "lightgreen") + .style("stroke-width", 5); + + g.append('line') + .attr("x1", -85) + .attr("y1", -85) + .attr("x2", -105) + .attr("y2", -105) + .attr('transform', 'rotate(20)') + .style("stroke", "lightgreen") + .style("stroke-width", 5); + g.append('rect') .attr('x', 0) .attr('y', -radio - 10) From a420a03d3b6e4401be0b33952d5ba315dfbd4ead Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Thu, 13 May 2021 18:47:58 -0400 Subject: [PATCH 09/29] 2 lines drawed over semi-circle --- .../MainTel/CableWraps/CableWraps.jsx | 49 ++++++++++--------- .../CameraCableWrap/CameraCableWrap.jsx | 13 ++++- 2 files changed, 37 insertions(+), 25 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 1f3514615..ab064d819 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -76,25 +76,7 @@ class CableWraps extends Component { g.append('path').datum({ endAngle: tau }).style('fill', '#33687f').attr('d', arc); } - drawLimits(g, radio, start, end) { //acá tendría que pasarle como atributos tb el ángulo inicial y el final del arco - g.append('line') - .attr("x1", -85) - .attr("y1", -85) - .attr("x2", -105) - .attr("y2", -105) - .attr('transform', 'rotate(30)') - .style("stroke", "lightgreen") - .style("stroke-width", 5); - - g.append('line') - .attr("x1", -85) - .attr("y1", -85) - .attr("x2", -105) - .attr("y2", -105) - .attr('transform', 'rotate(20)') - .style("stroke", "lightgreen") - .style("stroke-width", 5); - + drawLimits(g, radio, start, end) { //acá tendría que pasarle como atributos tb el ángulo inicial y el final del arco g.append('rect') .attr('x', 0) .attr('y', -radio - 10) @@ -103,10 +85,10 @@ class CableWraps extends Component { .style('fill', '#ffffff'); g.append('text') - .attr('x', 10) - .attr('y', -145) - .text(0 + '°') - .style('fill', '#ffffff'); + .attr('x', 10) + .attr('y', -145) + .text(0 + '°') + .style('fill', '#ffffff'); g.append('rect') .attr('x', -radio - 10) @@ -135,6 +117,26 @@ class CableWraps extends Component { .style('fill', '#ffffff'); } + rotatorLines(g, radio, endAngle){ + g.append('line') + .attr("x1", -85) + .attr("y1", -85) + .attr("x2", -105) + .attr("y2", -105) + .attr('transform', 'rotate(endAngle)') + .style("stroke", "lightgreen") + .style("stroke-width", 5); + + g.append('line') + .attr("x1", -85) + .attr("y1", -85) + .attr("x2", -105) + .attr("y2", -105) + .attr('transform', 'rotate(20)') + .style("stroke", "lightgreen") + .style("stroke-width", 5); + } + arcTween(newAngle, arc) { return function (d) { var interpolate = d3.interpolate(d.endAngle, newAngle); @@ -201,6 +203,7 @@ class CableWraps extends Component { width={400} drawBackground={this.drawBackground} drawLimits={this.drawLimits} + rotatorLines={this.rotatorLines} arcTween={this.arcTween} cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.camera : null} /> diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index ea724f0fd..b72a565f7 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -65,9 +65,16 @@ class CameraCableWrap extends Component { let theta = degrees(Math.PI / 2); this.props.drawLimits(g, radio, -theta, theta); + this.props.rotatorLines(g, radio, theta) } - updateCameraCableWrap() { + updateCameraCableWrap(dom) { + let width = this.props.width; + let height = this.props.height; + let svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); + let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); + this.g = g; + let radialLineGenerator = d3.lineRadial(); let radio = 140; let tau = Math.PI / 2; @@ -82,8 +89,10 @@ class CameraCableWrap extends Component { ]; let radialData = radialLineGenerator(radialpoints); this.innerPath.transition().duration(1500).attr("class", "radial").attr("d", radialData); - this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); + // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); + + this.props.rotatorLines(g, radio, newRotAngle); } componentDidMount() { From 1dbd0d858672c90bdf1fe5e0d459b96997c2bdf7 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Wed, 19 May 2021 13:11:34 -0400 Subject: [PATCH 10/29] Line can move according a seted angle --- .../MainTel/CableWraps/CableWraps.jsx | 4 ++-- .../CameraCableWrap/CameraCableWrap.jsx | 20 +++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index ab064d819..e44e47a2b 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -76,7 +76,7 @@ class CableWraps extends Component { g.append('path').datum({ endAngle: tau }).style('fill', '#33687f').attr('d', arc); } - drawLimits(g, radio, start, end) { //acá tendría que pasarle como atributos tb el ángulo inicial y el final del arco + drawLimits(g, radio, start, end) { g.append('rect') .attr('x', 0) .attr('y', -radio - 10) @@ -123,7 +123,7 @@ class CableWraps extends Component { .attr("y1", -85) .attr("x2", -105) .attr("y2", -105) - .attr('transform', 'rotate(endAngle)') + .attr('transform', 'rotate('+ endAngle +')') .style("stroke", "lightgreen") .style("stroke-width", 5); diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index b72a565f7..ad274c4b6 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -75,21 +75,21 @@ class CameraCableWrap extends Component { let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); this.g = g; - let radialLineGenerator = d3.lineRadial(); + // let radialLineGenerator = d3.lineRadial(); let radio = 140; let tau = Math.PI / 2; let newAngle = this.props.cable_wrap.cable * tau; let delta = radians(this.props.cable_wrap.rotator); let newRotAngle = newAngle + delta; - let middleAngle = (newAngle - newRotAngle) / 2; - let radialpoints = [ - [0, 0], - [newAngle, radio], - [newRotAngle, radio] - ]; - let radialData = radialLineGenerator(radialpoints); - this.innerPath.transition().duration(1500).attr("class", "radial").attr("d", radialData); - // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); + // let middleAngle = (newAngle - newRotAngle) / 2; + // let radialpoints = [ + // [0, 0], + // [newAngle, radio], + // [newRotAngle, radio] + // ]; + // let radialData = radialLineGenerator(radialpoints); + // this.innerPath.transition().duration(1500).attr("class", "radial").attr("d", radialData); + this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); this.props.rotatorLines(g, radio, newRotAngle); From 3ad7dc0a3b01877927f7484b72f1f3043fced51e Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Fri, 4 Jun 2021 10:45:42 -0400 Subject: [PATCH 11/29] New attempt to move rotator lines --- .../MainTel/CableWraps/CableWraps.jsx | 39 +++++++------ .../CameraCableWrap/CameraCableWrap.jsx | 57 +++++++++++++++---- 2 files changed, 64 insertions(+), 32 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index e44e47a2b..2938beba4 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -117,25 +117,25 @@ class CableWraps extends Component { .style('fill', '#ffffff'); } - rotatorLines(g, radio, endAngle){ - g.append('line') - .attr("x1", -85) - .attr("y1", -85) - .attr("x2", -105) - .attr("y2", -105) - .attr('transform', 'rotate('+ endAngle +')') - .style("stroke", "lightgreen") - .style("stroke-width", 5); - - g.append('line') - .attr("x1", -85) - .attr("y1", -85) - .attr("x2", -105) - .attr("y2", -105) - .attr('transform', 'rotate(20)') - .style("stroke", "lightgreen") - .style("stroke-width", 5); - } + // rotatorLines(g, angle){ + // g.append('line') + // .attr("x1", -85) + // .attr("y1", -85) + // .attr("x2", -105) + // .attr("y2", -105) + // .attr('transform', 'rotate('+ angle +')') + // .style("stroke", "lightgreen") + // .style("stroke-width", 5); + + // g.append('line') + // .attr("x1", -85) + // .attr("y1", -85) + // .attr("x2", -105) + // .attr("y2", -105) + // .attr('transform', 'rotate('+ angle + 15 +')') + // .style("stroke", "lightgreen") + // .style("stroke-width", 5); + // } arcTween(newAngle, arc) { return function (d) { @@ -203,7 +203,6 @@ class CableWraps extends Component { width={400} drawBackground={this.drawBackground} drawLimits={this.drawLimits} - rotatorLines={this.rotatorLines} arcTween={this.arcTween} cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.camera : null} /> diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index ad274c4b6..ab301ff23 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -11,6 +11,7 @@ class CameraCableWrap extends Component { this.arc = null; this.innerPath = null; this.innerArc = null; + this.bar = null; } removeCameraCableWrap(dom) { @@ -49,6 +50,14 @@ class CameraCableWrap extends Component { .startAngle(0); this.innerArc = innerArc; + let bar = d3 + .arc() + .innerRadius(radio - 20) + .outerRadius(radio + 10) + .startAngle(0.610865) + .endAngle(0.645772); + this.bar = bar; + this.path = this.g .append('path') .datum({ endAngle: 0 }) @@ -63,9 +72,35 @@ class CameraCableWrap extends Component { .attr('d', this.innerArc) .attr('id', 'rot_wrap'); + this.bar = this.g + .append('path') + .datum({ endAngle: 0 }) + .style('fill', 'red') + .attr('d', this.bar) + .attr('id', 'cable_wrap'); + + // g.append('line') + // .attr("x1", -105) + // .attr("y1", -85) + // .attr("x2", -125) + // .attr("y2", -105) + // // .attr('transform', 'rotate('+ tau + 15 +')') + // .style("stroke", "blue") + // .style("stroke-width", 5) + // .attr('id', 'rotLine1'); + + // g.append('line') + // .attr("x1", -85) + // .attr("y1", -85) + // .attr("x2", -105) + // .attr("y2", -105) + // // .attr('transform', 'rotate('+ tau + 45 +')') + // .style("stroke", "lightgreen") + // .style("stroke-width", 5) + // .attr('id', 'rotLine2'); + let theta = degrees(Math.PI / 2); this.props.drawLimits(g, radio, -theta, theta); - this.props.rotatorLines(g, radio, theta) } updateCameraCableWrap(dom) { @@ -75,33 +110,31 @@ class CameraCableWrap extends Component { let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); this.g = g; - // let radialLineGenerator = d3.lineRadial(); - let radio = 140; let tau = Math.PI / 2; let newAngle = this.props.cable_wrap.cable * tau; let delta = radians(this.props.cable_wrap.rotator); let newRotAngle = newAngle + delta; - // let middleAngle = (newAngle - newRotAngle) / 2; - // let radialpoints = [ - // [0, 0], - // [newAngle, radio], - // [newRotAngle, radio] - // ]; - // let radialData = radialLineGenerator(radialpoints); - // this.innerPath.transition().duration(1500).attr("class", "radial").attr("d", radialData); + console.log(newRotAngle); + + + this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); - this.props.rotatorLines(g, radio, newRotAngle); + // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.bar)); + + } componentDidMount() { var dom = ReactDOM.findDOMNode(this); this.createCameraCableWrap(dom); + console.log("holi"); } componentDidUpdate() { this.updateCameraCableWrap(); + console.log("chau"); } render() { From b9e18f694b099d442ef3b84864db863d953fcd6a Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Fri, 4 Jun 2021 18:13:04 -0400 Subject: [PATCH 12/29] Another attempt to move rotator lines --- .../MainTel/CableWraps/CableWraps.jsx | 20 --- .../CameraCableWrap/CameraCableWrap.jsx | 116 ++++++++++-------- 2 files changed, 67 insertions(+), 69 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 2938beba4..b9cc79491 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -117,26 +117,6 @@ class CableWraps extends Component { .style('fill', '#ffffff'); } - // rotatorLines(g, angle){ - // g.append('line') - // .attr("x1", -85) - // .attr("y1", -85) - // .attr("x2", -105) - // .attr("y2", -105) - // .attr('transform', 'rotate('+ angle +')') - // .style("stroke", "lightgreen") - // .style("stroke-width", 5); - - // g.append('line') - // .attr("x1", -85) - // .attr("y1", -85) - // .attr("x2", -105) - // .attr("y2", -105) - // .attr('transform', 'rotate('+ angle + 15 +')') - // .style("stroke", "lightgreen") - // .style("stroke-width", 5); - // } - arcTween(newAngle, arc) { return function (d) { var interpolate = d3.interpolate(d.endAngle, newAngle); diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index ab301ff23..ad71691b7 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -43,62 +43,59 @@ class CameraCableWrap extends Component { .startAngle(0); this.arc = arc; - let innerArc = d3 - .arc() - .innerRadius(radio - 70) - .outerRadius(radio - 10) - .startAngle(0); - this.innerArc = innerArc; - - let bar = d3 + // let innerArc = d3 + // .arc() + // .innerRadius(radio - 70) + // .outerRadius(radio - 10) + // .startAngle(0); + // this.innerArc = innerArc; + + // arc with length of 2 degrees (35° - 37°) in radians + let barArc = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) .startAngle(0.610865) .endAngle(0.645772); - this.bar = bar; + this.barArc = barArc; - this.path = this.g - .append('path') - .datum({ endAngle: 0 }) - .style('fill', '#43e0f9') - .attr('d', this.arc) - .attr('id', 'cable_wrap'); + // arc with length of 2 degrees (45° - 47°) in radians + let barArc2 = d3 + .arc() + .innerRadius(radio - 20) + .outerRadius(radio + 10) + .startAngle(0.785398) + .endAngle(0.820305); + this.barArc2 = barArc2; + + // this.path = this.g + // .append('path') + // .datum({ endAngle: 0 }) + // .style('fill', '#43e0f9') + // .attr('d', this.arc) + // .attr('id', 'cable_wrap'); + + // this.innerPath = this.g + // .append('path') + // .datum({ endAngle: 0 }) + // .style('fill', '#43e0f9') + // .attr('d', this.innerArc) + // .attr('id', 'rot_wrap'); - this.innerPath = this.g + this.bar = this.g .append('path') .datum({ endAngle: 0 }) - .style('fill', '#43e0f9') - .attr('d', this.innerArc) - .attr('id', 'rot_wrap'); - - this.bar = this.g + .style('fill', 'red') + .attr('d', this.barArc) + .attr('id', 'cable_wrap'); + + this.bar2 = this.g .append('path') .datum({ endAngle: 0 }) .style('fill', 'red') - .attr('d', this.bar) + .attr('d', this.barArc2) .attr('id', 'cable_wrap'); - // g.append('line') - // .attr("x1", -105) - // .attr("y1", -85) - // .attr("x2", -125) - // .attr("y2", -105) - // // .attr('transform', 'rotate('+ tau + 15 +')') - // .style("stroke", "blue") - // .style("stroke-width", 5) - // .attr('id', 'rotLine1'); - - // g.append('line') - // .attr("x1", -85) - // .attr("y1", -85) - // .attr("x2", -105) - // .attr("y2", -105) - // // .attr('transform', 'rotate('+ tau + 45 +')') - // .style("stroke", "lightgreen") - // .style("stroke-width", 5) - // .attr('id', 'rotLine2'); - let theta = degrees(Math.PI / 2); this.props.drawLimits(g, radio, -theta, theta); } @@ -114,14 +111,35 @@ class CameraCableWrap extends Component { let newAngle = this.props.cable_wrap.cable * tau; let delta = radians(this.props.cable_wrap.rotator); let newRotAngle = newAngle + delta; - console.log(newRotAngle); - - - this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); + // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); - // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.bar)); + this.bar.transition().duration(1500).attrTween('d', (d) => { + return (t) => { + const angle = d3.interpolate(d.endAngle, newAngle)(t); + const angle1 = 0.610865 + angle; + const angle2 = 0.640865 + angle; + if ((angle1 >= -1.578) && (angle2 <= 1.578)){ + this.barArc.startAngle(angle1); + this.barArc.endAngle(angle2); + } + return this.barArc(d); + }; + }); + + this.bar2.transition().duration(1500).attrTween('d', (d) => { + return (t) => { + const angle = d3.interpolate(d.endAngle, newAngle)(t); + const angle1 = 0.785398 + angle; + const angle2 = 0.820305 + angle; + if ((0.785398 + angle >= -1.578) && (0.820305 + angle <= 1.578)){ + this.barArc2.startAngle(angle1); + this.barArc2.endAngle(angle2); + } + return this.barArc2(d); + }; + }); } @@ -129,12 +147,12 @@ class CameraCableWrap extends Component { componentDidMount() { var dom = ReactDOM.findDOMNode(this); this.createCameraCableWrap(dom); - console.log("holi"); + // console.log("holi"); } componentDidUpdate() { this.updateCameraCableWrap(); - console.log("chau"); + // console.log("chau"); } render() { From c3456895016fb55907b65529f41e38712e0c825e Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Mon, 7 Jun 2021 18:04:18 -0400 Subject: [PATCH 13/29] CCW line was added and another style changes --- .../MainTel/CableWraps/CableWraps.jsx | 4 +- .../CameraCableWrap/CameraCableWrap.jsx | 79 +++++++++++-------- 2 files changed, 49 insertions(+), 34 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index b9cc79491..693b99d68 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -63,7 +63,7 @@ class CableWraps extends Component { .attr('cx', 0) .attr('cy', 0) .attr('r', radio - 5) - .style('fill', '#102632'); + .style('fill', '#29414B'); // g.append('circle') // .attr('cx', 0) @@ -73,7 +73,7 @@ class CableWraps extends Component { // .style('stroke', '#233a42') // .style('stroke-width', '0'); - g.append('path').datum({ endAngle: tau }).style('fill', '#33687f').attr('d', arc); + g.append('path').datum({ endAngle: tau }).style('fill', '#29414B').attr('d', arc); } drawLimits(g, radio, start, end) { diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index ad71691b7..407ded4f6 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -50,23 +50,32 @@ class CameraCableWrap extends Component { // .startAngle(0); // this.innerArc = innerArc; - // arc with length of 2 degrees (35° - 37°) in radians - let barArc = d3 + // arc with length 2 (35° - 37°) in radians + let rotArc = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) .startAngle(0.610865) .endAngle(0.645772); - this.barArc = barArc; + this.rotArc = rotArc; - // arc with length of 2 degrees (45° - 47°) in radians - let barArc2 = d3 + // arc with length 2 (45° - 47°) in radians + let rotArc2 = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) .startAngle(0.785398) .endAngle(0.820305); - this.barArc2 = barArc2; + this.rotArc2 = rotArc2; + + //arc with length 2 (40° - 42°) in radians + let ccwArc = d3 + .arc() + .innerRadius(radio - 30) + .outerRadius(radio + 20) + .startAngle(0.698132) + .endAngle(0.733038); + this.ccwArc = ccwArc; // this.path = this.g // .append('path') @@ -82,22 +91,29 @@ class CameraCableWrap extends Component { // .attr('d', this.innerArc) // .attr('id', 'rot_wrap'); - this.bar = this.g + this.rot = this.g .append('path') .datum({ endAngle: 0 }) - .style('fill', 'red') - .attr('d', this.barArc) - .attr('id', 'cable_wrap'); + .style('fill', '#43e0f9') + .attr('d', this.rotArc) + .attr('id', 'rotator'); - this.bar2 = this.g + this.rot2 = this.g .append('path') .datum({ endAngle: 0 }) - .style('fill', 'red') - .attr('d', this.barArc2) + .style('fill', '#43e0f9') + .attr('d', this.rotArc2) + .attr('id', 'rotator'); + + this.ccw = this.g + .append('path') + .datum({endAngle: 0}) + .style('fill', '#35667E') + .attr('d', this.ccwArc) .attr('id', 'cable_wrap'); let theta = degrees(Math.PI / 2); - this.props.drawLimits(g, radio, -theta, theta); + this.props.drawLimits(g, radio, theta, -theta); } updateCameraCableWrap(dom) { @@ -115,44 +131,43 @@ class CameraCableWrap extends Component { // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); - this.bar.transition().duration(1500).attrTween('d', (d) => { + this.rot.transition().duration(1500).attrTween('d', (d) => { return (t) => { const angle = d3.interpolate(d.endAngle, newAngle)(t); - const angle1 = 0.610865 + angle; - const angle2 = 0.640865 + angle; - if ((angle1 >= -1.578) && (angle2 <= 1.578)){ - this.barArc.startAngle(angle1); - this.barArc.endAngle(angle2); - } - return this.barArc(d); + this.rotArc.startAngle(0.610865 + angle); + this.rotArc.endAngle(0.640865 + angle); + return this.rotArc(d); }; }); - this.bar2.transition().duration(1500).attrTween('d', (d) => { + this.rot2.transition().duration(1500).attrTween('d', (d) => { return (t) => { const angle = d3.interpolate(d.endAngle, newAngle)(t); - const angle1 = 0.785398 + angle; - const angle2 = 0.820305 + angle; - if ((0.785398 + angle >= -1.578) && (0.820305 + angle <= 1.578)){ - this.barArc2.startAngle(angle1); - this.barArc2.endAngle(angle2); - } - return this.barArc2(d); + this.rotArc2.startAngle(0.785398 + angle); + this.rotArc2.endAngle(0.820305 + angle); + return this.rotArc2(d); }; }); + this.ccw.transition().duration(1500).attrTween('d', (d) => { + return (t) => { + const angle = d3.interpolate(d.endAngle, newRotAngle)(t); + this.ccwArc.startAngle(0.698132 + angle); + this.ccwArc.endAngle(0.733038 + angle); + return this.ccwArc(d); + } + }); + } componentDidMount() { var dom = ReactDOM.findDOMNode(this); this.createCameraCableWrap(dom); - // console.log("holi"); } componentDidUpdate() { this.updateCameraCableWrap(); - // console.log("chau"); } render() { From 838e7ebf6d59e54513da7c4ad86584271aab355a Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Fri, 11 Jun 2021 17:01:48 -0400 Subject: [PATCH 14/29] Subscriptions were added into ccw container --- .../CableWraps/CableWraps.container.jsx | 34 ++++++++++++- .../MainTel/CableWraps/CableWraps.jsx | 50 ++++++++++++------- .../CameraCableWrap/CameraCableWrap.jsx | 4 +- love/src/redux/selectors/selectors.js | 18 +++++++ 4 files changed, 84 insertions(+), 22 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index ae7bd3e72..0f943c25a 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -3,6 +3,7 @@ import { connect } from 'react-redux'; import { addGroup, removeGroup } from '../../../redux/actions/ws'; import CableWraps from './CableWraps'; import SubscriptionTableContainer from '../../GeneralPurpose/SubscriptionTable/SubscriptionTable.container'; +import { getCCWState } from 'redux/selectors'; export const schema = { description: @@ -36,11 +37,40 @@ const CableWrapsContainer = ({ }; const mapStateToProps = (state) => { - return {}; + const ccwState = getCCWState(state); + return ccwState; }; const mapDispatchToProps = (dispatch) => { - const subscriptions = []; + const subscriptions = [ + 'telemetry-MTMount-0-azimuth', + 'telemetry-MTMount-0-azimuthDrives', + 'telemetry-MTMount-0-cameraCableWrap', + 'telemetry-MTMount-0-elevation', + 'telemetry-MTMount-0-elevationDrives', + 'telemetry-MTRotator-0-ccwFollowingError', + 'telemetry-MTRotator-0-motors', + 'telemetry-MTRotator-0-rotation', + 'event-MTMount-0-axesInPosition', + 'event-MTMount-0-axesState', + 'event-MTMount-0-cameraCableWrapFollowing', + 'event-MTMount-0-cameraCableWrapState', + 'event-MTMount-0-cameraCableWrapTarget', + 'event-MTMount-0-connected', + 'event-MTMount-0-error', + 'event-MTMount-0-target', + 'event-MTMount-0-warning', + 'event-MTMount-0-summaryState', + 'event-MTRotator-0-logevent_commandableByDDS', + 'event-MTRotator-0-logevent_configuration', + 'event-MTRotator-0-connected', + 'event-MTRotator-0-controllerState', + 'event-MTRotator-0-inPosition', + 'event-MTRotator-0-interlock', + 'event-MTRotator-0-target', + 'event-MTRotator-0-tracking', + 'event-MTRotator-0-summaryState', + ]; return { subscriptions, subscribeToStreams: () => { diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 693b99d68..5d451bdd2 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -4,6 +4,8 @@ import AZCableWrap from './AZCableWrap/AZCableWrap'; import CameraCableWrap from './CameraCableWrap/CameraCableWrap'; import StatusText from '../../GeneralPurpose/StatusText/StatusText'; import SummaryPanel from '../../GeneralPurpose/SummaryPanel/SummaryPanel'; +import CSCDetail from 'components/CSCSummary/CSCDetail/CSCDetail'; +import { degrees } from 'Utils'; import Row from '../../GeneralPurpose/SummaryPanel/Row'; import Label from '../../GeneralPurpose/SummaryPanel/Label'; import Value from '../../GeneralPurpose/SummaryPanel/Value'; @@ -17,15 +19,17 @@ class CableWraps extends Component { super(props); this.state = { cable_wraps: { - az: { - cable: 10, - rotator: 20, - }, + // az: { + // cable: 10, + // rotator: 20, + // }, camera: { cable: 10, - rotator: 200, + rotator: 20, }, }, + colorArc: '#35667E', + colorCable: '#29414B', }; } @@ -35,12 +39,12 @@ class CableWraps extends Component { setInterval( () => this.receiveMsg({ - az: { - cable: Math.random() * Math.sign(Math.random() - 0.5), - rotator: Math.random() * Math.sign(Math.random() - 0.5), - }, + // az: { + // cable: Math.random() * Math.sign(Math.random() - 0.5), + // rotator: Math.random() * Math.sign(Math.random() - 0.5), + // }, camera: { - cable: Math.random() * Math.sign(Math.random() - 0.5), + cable: Math.random() * Math.sign(Math.random() - 0.8), rotator: Math.random() * Math.sign(Math.random() - 0.5), }, }), @@ -58,12 +62,17 @@ class CableWraps extends Component { }); } + // changeColorWithAlert() { + + // } + drawBackground(g, radio, tau, arc) { + const colorArc = this.state.colorArc; g.append('semi-circle') .attr('cx', 0) .attr('cy', 0) .attr('r', radio - 5) - .style('fill', '#29414B'); + .style('fill', colorArc); // g.append('circle') // .attr('cx', 0) @@ -73,7 +82,7 @@ class CableWraps extends Component { // .style('stroke', '#233a42') // .style('stroke-width', '0'); - g.append('path').datum({ endAngle: tau }).style('fill', '#29414B').attr('d', arc); + g.append('path').datum({ endAngle: tau }).style('fill', colorArc).attr('d', arc); } drawLimits(g, radio, start, end) { @@ -128,6 +137,9 @@ class CableWraps extends Component { } render() { + + const summaryState = CSCDetail.states[this.props.summaryState]; + return (
{/*

Cable Wraps

*/} @@ -149,19 +161,20 @@ class CableWraps extends Component {
{/*Camera*/} - Camera Cable Wrap + STATE UNDEFINED + {/* {summaryState.name} */} - Value + {Math.round(degrees(this.state.cable_wraps.camera.rotator - 0.0349066))+'°'} - Value + {Math.round(degrees(this.state.cable_wraps.camera.rotator))+'°'} - - Degrees + + {Math.round(degrees(this.state.cable_wraps.camera.cable))+'°'} {/*Drivers*/} @@ -181,10 +194,11 @@ class CableWraps extends Component { this.drawBackground(g,r,t,a)} drawLimits={this.drawLimits} arcTween={this.arcTween} cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.camera : null} + colorCable={this.state.colorCable} />
{/*
*/} diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 407ded4f6..1a3722e3c 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -11,7 +11,6 @@ class CameraCableWrap extends Component { this.arc = null; this.innerPath = null; this.innerArc = null; - this.bar = null; } removeCameraCableWrap(dom) { @@ -108,7 +107,7 @@ class CameraCableWrap extends Component { this.ccw = this.g .append('path') .datum({endAngle: 0}) - .style('fill', '#35667E') + .style('fill', this.props.colorCable ? this.props.colorCable : '#35667E') .attr('d', this.ccwArc) .attr('id', 'cable_wrap'); @@ -124,6 +123,7 @@ class CameraCableWrap extends Component { this.g = g; let tau = Math.PI / 2; + // replace that for rotator and cable values from backend let newAngle = this.props.cable_wrap.cable * tau; let delta = radians(this.props.cable_wrap.rotator); let newRotAngle = newAngle + delta; diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index ede5ea17c..174a2dbb7 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -316,6 +316,24 @@ export const getMountMotorsState = (state, index) => { }; }; +export const getCCWState = (state) => { + const subscriptions = [ + 'telemetry-MTMount-0-cameraCableWrap', + 'event-MTMount-0-axesState', + 'event-MTMount-0-cameraCableWrapState', + 'event-MTMount-0-summaryState', + 'event-MTRotator-0-summaryState', + ]; + const ccwData = getStreamData(state, subscriptions); + return { + cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'], + axesState: ccwData['event-MTMount-0-axesState'], + cameraCablaWrapState: ccwData['event-MTMount-0-cameraCableWrapState'], + ccwSummaryState: ccwData['event-MTMount-0-summaryState'], + rotatorSummaryState: ccwData['event-MTRotator-0-summaryState'], + }; +}; + /** * Returns events related to the LATISS instrument in the state. * From e9622e005b0d4e1e9a5d2a3e6e50659cc69ad553 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Thu, 17 Jun 2021 14:25:22 -0400 Subject: [PATCH 15/29] Subscriptions were added --- .../CableWraps/CableWraps.container.jsx | 18 +----- .../MainTel/CableWraps/CableWraps.jsx | 46 +++++---------- love/src/redux/selectors/selectors.js | 56 ++++++++++++++++--- 3 files changed, 64 insertions(+), 56 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index 0f943c25a..ed2014a68 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -12,7 +12,7 @@ export const schema = { props: { title: { type: 'string', - description: 'Name diplayed in the title bar (if visible)', + description: 'Name displayed in the title bar (if visible)', isPrivate: false, default: 'CableWraps', }, @@ -43,32 +43,16 @@ const mapStateToProps = (state) => { const mapDispatchToProps = (dispatch) => { const subscriptions = [ - 'telemetry-MTMount-0-azimuth', - 'telemetry-MTMount-0-azimuthDrives', 'telemetry-MTMount-0-cameraCableWrap', - 'telemetry-MTMount-0-elevation', - 'telemetry-MTMount-0-elevationDrives', 'telemetry-MTRotator-0-ccwFollowingError', - 'telemetry-MTRotator-0-motors', 'telemetry-MTRotator-0-rotation', - 'event-MTMount-0-axesInPosition', - 'event-MTMount-0-axesState', 'event-MTMount-0-cameraCableWrapFollowing', 'event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-cameraCableWrapTarget', - 'event-MTMount-0-connected', - 'event-MTMount-0-error', - 'event-MTMount-0-target', - 'event-MTMount-0-warning', 'event-MTMount-0-summaryState', - 'event-MTRotator-0-logevent_commandableByDDS', 'event-MTRotator-0-logevent_configuration', - 'event-MTRotator-0-connected', - 'event-MTRotator-0-controllerState', 'event-MTRotator-0-inPosition', 'event-MTRotator-0-interlock', - 'event-MTRotator-0-target', - 'event-MTRotator-0-tracking', 'event-MTRotator-0-summaryState', ]; return { diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 5d451bdd2..017bb00e2 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -158,38 +158,20 @@ class CableWraps extends Component {

)} */} -
- - {/*Camera*/} - STATE - - UNDEFINED - {/* {summaryState.name} */} - - - - {Math.round(degrees(this.state.cable_wraps.camera.rotator - 0.0349066))+'°'} - - - {Math.round(degrees(this.state.cable_wraps.camera.rotator))+'°'} - - - {Math.round(degrees(this.state.cable_wraps.camera.cable))+'°'} - - {/*Drivers*/} - - Drivers -   - - - UNDEFINED - - - - UNDEFINED - - -
+ + {/*Camera*/} + STATE + + UNDEFINED + {/* {summaryState.name} */} + + + + {Math.round(degrees(this.state.cable_wraps.camera.rotator))+'°'} + + + {Math.round(degrees(this.state.cable_wraps.camera.cable))+'°'} +
{ export const getCCWState = (state) => { const subscriptions = [ 'telemetry-MTMount-0-cameraCableWrap', - 'event-MTMount-0-axesState', 'event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-summaryState', - 'event-MTRotator-0-summaryState', ]; const ccwData = getStreamData(state, subscriptions); return { - cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'], - axesState: ccwData['event-MTMount-0-axesState'], - cameraCablaWrapState: ccwData['event-MTMount-0-cameraCableWrapState'], - ccwSummaryState: ccwData['event-MTMount-0-summaryState'], - rotatorSummaryState: ccwData['event-MTRotator-0-summaryState'], + cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'] + ? ccwData['telemetry-MTMount-0-cameraCableWrap'] + : 0, + cameraCablaWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] + ? ccwData['event-MTMount-0-cameraCableWrapState'] + : 0, + summaryState: ccwData['event-MTMount-0-summaryState'] + ? ccwData['event-MTMount-0-summaryState'] + : 0, + }; +}; + +export const getRotatorPosition = (state) => { + const subscriptions = [ + 'telemetry-MTRotator-0-rotation', + 'event-MTRotator-0-inPosition', + 'event-MTRotator-0-summaryState', + ]; + const rotatorData = getStreamData(state, subscriptions); + return { + rotation: rotatorData['telemetry-MTRotator-0-rotation'] + ? rotatorData['telemetry-MTRotator-0-rotation'].demandPosition + : 0, + inPosition: rotatorData['event-MTRotator-0-inPosition'] + ? rotatorData['event-MTRotator-0-inPosition'] + : 0, + rotatorSummaryState: rotatorData['event-MTRotator-0-summaryState'] + ? rotatorData['event-MTRotator-0-summaryState'] + : 0, + }; +}; + +export const getCCWFollowingError = (state) => { + const subscriptions = [ + 'telemetry-MTRotator-0-ccwFollowingError', + 'event-MTMount-0-cameraCableWrapFollowing', + 'event-MTRotator-0-interlock', + ]; + const ccwErrorData = getStreamData(state, subscriptions); + return { + ccwFollowingError: ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] + ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] + : 0, + cameraCableWrapFollowing: ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] + ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] + : 0, + interlock: ccwErrorData['event-MTRotator-0-interlock'] + ? ccwErrorData['event-MTRotator-0-interlock'] + : 0, }; }; From 8ae355723f148071b05bfd5bee46ca1186403967 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Thu, 17 Jun 2021 16:14:20 -0400 Subject: [PATCH 16/29] Fix last error and add state according selectors --- love/src/components/MainTel/CableWraps/CableWraps.jsx | 3 +-- love/src/redux/selectors/selectors.js | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 017bb00e2..1c0b3f04c 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -162,8 +162,7 @@ class CableWraps extends Component { {/*Camera*/} STATE - UNDEFINED - {/* {summaryState.name} */} + {summaryState.name} diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index 986aea4c1..d37d26661 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -322,7 +322,7 @@ export const getCCWState = (state) => { 'event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-summaryState', ]; - const ccwData = getStreamData(state, subscriptions); + const ccwData = getStreamsData(state, subscriptions); return { cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'] ? ccwData['telemetry-MTMount-0-cameraCableWrap'] @@ -342,7 +342,7 @@ export const getRotatorPosition = (state) => { 'event-MTRotator-0-inPosition', 'event-MTRotator-0-summaryState', ]; - const rotatorData = getStreamData(state, subscriptions); + const rotatorData = getStreamsData(state, subscriptions); return { rotation: rotatorData['telemetry-MTRotator-0-rotation'] ? rotatorData['telemetry-MTRotator-0-rotation'].demandPosition @@ -362,7 +362,7 @@ export const getCCWFollowingError = (state) => { 'event-MTMount-0-cameraCableWrapFollowing', 'event-MTRotator-0-interlock', ]; - const ccwErrorData = getStreamData(state, subscriptions); + const ccwErrorData = getStreamsData(state, subscriptions); return { ccwFollowingError: ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] From d8486ed30349d53826786b62e167e99549212727 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Thu, 17 Jun 2021 16:25:41 -0400 Subject: [PATCH 17/29] Small changes --- love/src/components/MainTel/CableWraps/CableWraps.jsx | 4 ++-- .../components/MainTel/CableWraps/CableWraps.module.css | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 1c0b3f04c..c6be9e4c6 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -158,9 +158,9 @@ class CableWraps extends Component {

)} */} - + {/*Camera*/} - STATE + Camera Cable Wrap {summaryState.name} diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index 9a9e96263..da0b6777a 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -48,3 +48,11 @@ .divCameraWrap { margin-top: 80px; } + +.summaryPanelStates { + max-width: 100%; + display: flex; + justify-content: flex-start; + padding: 1em; + margin-bottom: 1em; + } \ No newline at end of file From 1aa916f2f3671184e3f7247d28ec8f9e1623411a Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Tue, 22 Jun 2021 20:30:35 -0400 Subject: [PATCH 18/29] Update selectors --- .../CableWraps/CableWraps.container.jsx | 17 ++++++- .../MainTel/CableWraps/CableWraps.jsx | 7 ++- love/src/redux/selectors/selectors.js | 45 +++++++++++++------ 3 files changed, 52 insertions(+), 17 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index ed2014a68..b45c2add1 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -3,7 +3,11 @@ import { connect } from 'react-redux'; import { addGroup, removeGroup } from '../../../redux/actions/ws'; import CableWraps from './CableWraps'; import SubscriptionTableContainer from '../../GeneralPurpose/SubscriptionTable/SubscriptionTable.container'; -import { getCCWState } from 'redux/selectors'; +import { getCCWState, + getRotatorState, + getCCWFollowingError, + getCCWPosition, + getRotatorPosition} from 'redux/selectors'; export const schema = { description: @@ -38,7 +42,16 @@ const CableWrapsContainer = ({ const mapStateToProps = (state) => { const ccwState = getCCWState(state); - return ccwState; + const ccwPosition = getCCWPosition(state); + const rotatorState = getRotatorState(state); + const rotatorPosition = getRotatorPosition(state); + const followError = getCCWFollowingError(state); + return { + ...ccwState, + ...ccwPosition, + ...rotatorState, + ...rotatorPosition, + ...followError}; }; const mapDispatchToProps = (dispatch) => { diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index c6be9e4c6..dcb5ae2b2 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -63,7 +63,8 @@ class CableWraps extends Component { } // changeColorWithAlert() { - + // const followError = this.props.followError; + // } drawBackground(g, radio, tau, arc) { @@ -139,6 +140,10 @@ class CableWraps extends Component { render() { const summaryState = CSCDetail.states[this.props.summaryState]; + const ccwState = this.props.ccwState; + const ccwPosition = this.props.ccwPosition; + const rotatorState = this.props.rotatorState; + const rotatorPosition = this.props.rotatorPosition; return (
diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index d37d26661..3af5d2814 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -318,20 +318,41 @@ export const getMountMotorsState = (state, index) => { export const getCCWState = (state) => { const subscriptions = [ - 'telemetry-MTMount-0-cameraCableWrap', 'event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-summaryState', ]; const ccwData = getStreamsData(state, subscriptions); return { - cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'] - ? ccwData['telemetry-MTMount-0-cameraCableWrap'] - : 0, cameraCablaWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] - ? ccwData['event-MTMount-0-cameraCableWrapState'] + ? ccwData['event-MTMount-0-cameraCableWrapState'].state : 0, summaryState: ccwData['event-MTMount-0-summaryState'] - ? ccwData['event-MTMount-0-summaryState'] + ? ccwData['event-MTMount-0-summaryState'].summaryState + : 0, + }; +}; + +export const getCCWPosition = (state) => { + const subscriptions = [ + 'telemetry-MTMount-0-cameraCableWrap', + ]; + const ccwData = getStreamsData(state, subscriptions); + return { + cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'] + ? ccwData['telemetry-MTMount-0-cameraCableWrap'].actualPosition + : 0, + }; +}; + +export const getRotatorState = (state) => { + const subscriptions = [ + 'event-MTRotator-0-inPosition', + 'event-MTRotator-0-summaryState', + ]; + const rotatorData = getStreamsData(state, subscriptions); + return { + rotatorSummaryState: rotatorData['event-MTRotator-0-summaryState'] + ? rotatorData['event-MTRotator-0-summaryState'].summaryState : 0, }; }; @@ -340,7 +361,6 @@ export const getRotatorPosition = (state) => { const subscriptions = [ 'telemetry-MTRotator-0-rotation', 'event-MTRotator-0-inPosition', - 'event-MTRotator-0-summaryState', ]; const rotatorData = getStreamsData(state, subscriptions); return { @@ -348,10 +368,7 @@ export const getRotatorPosition = (state) => { ? rotatorData['telemetry-MTRotator-0-rotation'].demandPosition : 0, inPosition: rotatorData['event-MTRotator-0-inPosition'] - ? rotatorData['event-MTRotator-0-inPosition'] - : 0, - rotatorSummaryState: rotatorData['event-MTRotator-0-summaryState'] - ? rotatorData['event-MTRotator-0-summaryState'] + ? rotatorData['event-MTRotator-0-inPosition'].inPosition : 0, }; }; @@ -365,13 +382,13 @@ export const getCCWFollowingError = (state) => { const ccwErrorData = getStreamsData(state, subscriptions); return { ccwFollowingError: ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] - ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] + ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'].positionError : 0, cameraCableWrapFollowing: ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] - ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] + ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'].enabled : 0, interlock: ccwErrorData['event-MTRotator-0-interlock'] - ? ccwErrorData['event-MTRotator-0-interlock'] + ? ccwErrorData['event-MTRotator-0-interlock'].detail : 0, }; }; From 9182e21b4394dc3189e0a52319a9dd277181b14f Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Wed, 23 Jun 2021 13:08:24 -0400 Subject: [PATCH 19/29] Some small css changes --- love/src/components/MainTel/CableWraps/CableWraps.module.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index da0b6777a..977044ce8 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -2,7 +2,8 @@ display: inline-block; flex-direction: column; margin: 5px; - height: 100%; + height: 100%; + width: 500px; margin-top: 0; } @@ -51,7 +52,7 @@ .summaryPanelStates { max-width: 100%; - display: flex; + display: grid; justify-content: flex-start; padding: 1em; margin-bottom: 1em; From 0a388208f38d175846702e04fdf84325d6a4def5 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Wed, 23 Jun 2021 18:45:02 -0400 Subject: [PATCH 20/29] Small style changes --- .../components/MainTel/CableWraps/CableWraps.module.css | 9 ++++++++- love/src/redux/selectors/selectors.js | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index 977044ce8..d8232349c 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -56,4 +56,11 @@ justify-content: flex-start; padding: 1em; margin-bottom: 1em; - } \ No newline at end of file + } + +.summaryState { +border-radius: 1rem; +font-weight: 700; +text-align: center; +width: 8em; +} \ No newline at end of file diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index 3af5d2814..81a339789 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -316,6 +316,7 @@ export const getMountMotorsState = (state, index) => { }; }; +// CCW export const getCCWState = (state) => { const subscriptions = [ 'event-MTMount-0-cameraCableWrapState', @@ -328,7 +329,7 @@ export const getCCWState = (state) => { : 0, summaryState: ccwData['event-MTMount-0-summaryState'] ? ccwData['event-MTMount-0-summaryState'].summaryState - : 0, + : 3, }; }; From 30899438ffbfbf9c81a9ae30522c43a2dfb0030b Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Thu, 24 Jun 2021 13:07:45 -0400 Subject: [PATCH 21/29] More small changes --- .../MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 1a3722e3c..d7de89922 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -131,7 +131,7 @@ class CameraCableWrap extends Component { // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); - this.rot.transition().duration(1500).attrTween('d', (d) => { + this.rot.transition().duration(2500).attrTween('d', (d) => { return (t) => { const angle = d3.interpolate(d.endAngle, newAngle)(t); this.rotArc.startAngle(0.610865 + angle); @@ -140,7 +140,7 @@ class CameraCableWrap extends Component { }; }); - this.rot2.transition().duration(1500).attrTween('d', (d) => { + this.rot2.transition().duration(2500).attrTween('d', (d) => { return (t) => { const angle = d3.interpolate(d.endAngle, newAngle)(t); this.rotArc2.startAngle(0.785398 + angle); @@ -149,7 +149,7 @@ class CameraCableWrap extends Component { }; }); - this.ccw.transition().duration(1500).attrTween('d', (d) => { + this.ccw.transition().duration(2500).attrTween('d', (d) => { return (t) => { const angle = d3.interpolate(d.endAngle, newRotAngle)(t); this.ccwArc.startAngle(0.698132 + angle); From aef367527cfe29841150fc7b4ebff794b9631251 Mon Sep 17 00:00:00 2001 From: Astrid Reyes De La Rosa Date: Tue, 13 Jul 2021 12:45:32 -0400 Subject: [PATCH 22/29] Clean code and small style changes --- .../CableWraps/CableWraps.container.jsx | 36 ++-- .../MainTel/CableWraps/CableWraps.jsx | 161 +++++------------- .../CameraCableWrap/CameraCableWrap.jsx | 124 ++++++-------- love/src/redux/selectors/selectors.js | 33 +--- 4 files changed, 120 insertions(+), 234 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index b45c2add1..2ca53b2e4 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -3,15 +3,16 @@ import { connect } from 'react-redux'; import { addGroup, removeGroup } from '../../../redux/actions/ws'; import CableWraps from './CableWraps'; import SubscriptionTableContainer from '../../GeneralPurpose/SubscriptionTable/SubscriptionTable.container'; -import { getCCWState, - getRotatorState, - getCCWFollowingError, +import { + getCCWState, + getRotatorState, + getCCWFollowingError, getCCWPosition, - getRotatorPosition} from 'redux/selectors'; + getRotatorPosition, +} from 'redux/selectors'; export const schema = { - description: - 'View of both MT azimuth and Camera cable wraps', + description: 'View of both MT azimuth and Camera cable wraps', defaultSize: [61, 32], props: { title: { @@ -23,21 +24,11 @@ export const schema = { }, }; -const CableWrapsContainer = ({ - subscribeToStreams, - unsubscribeToStreams, - ...props -}) => { +const CableWrapsContainer = ({ subscribeToStreams, unsubscribeToStreams, ...props }) => { if (props.isRaw) { return ; } - return ( - - ); + return ; }; const mapStateToProps = (state) => { @@ -47,11 +38,12 @@ const mapStateToProps = (state) => { const rotatorPosition = getRotatorPosition(state); const followError = getCCWFollowingError(state); return { - ...ccwState, + ...ccwState, ...ccwPosition, ...rotatorState, - ...rotatorPosition, - ...followError}; + ...rotatorPosition, + ...followError, + }; }; const mapDispatchToProps = (dispatch) => { @@ -63,7 +55,7 @@ const mapDispatchToProps = (dispatch) => { 'event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-cameraCableWrapTarget', 'event-MTMount-0-summaryState', - 'event-MTRotator-0-logevent_configuration', + 'event-MTRotator-0-configuration', 'event-MTRotator-0-inPosition', 'event-MTRotator-0-interlock', 'event-MTRotator-0-summaryState', diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index dcb5ae2b2..136df35f8 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -12,61 +12,35 @@ import Value from '../../GeneralPurpose/SummaryPanel/Value'; import Title from '../../GeneralPurpose/SummaryPanel/Title'; import * as d3 from 'd3'; import { style } from 'd3'; -// import { Title } from 'components/GeneralPurpose/CardList/CardList'; + +const COLOR_ARC_INITIAL = '#35667E'; +const COLOR_CABLE_INITIAL = '#29414B'; +const COLOR_ARC_ERROR = '#202424'; +const COLOR_CABLE_ERROR = '#DC5707'; class CableWraps extends Component { constructor(props) { super(props); this.state = { - cable_wraps: { - // az: { - // cable: 10, - // rotator: 20, - // }, - camera: { - cable: 10, - rotator: 20, - }, - }, - colorArc: '#35667E', - colorCable: '#29414B', + colorArc: COLOR_ARC_INITIAL, + colorCable: COLOR_CABLE_INITIAL, }; } - componentDidMount() { - this.props.subscribeToStreams(); - // Replace the following code with data from redux selectors - setInterval( - () => - this.receiveMsg({ - // az: { - // cable: Math.random() * Math.sign(Math.random() - 0.5), - // rotator: Math.random() * Math.sign(Math.random() - 0.5), - // }, - camera: { - cable: Math.random() * Math.sign(Math.random() - 0.8), - rotator: Math.random() * Math.sign(Math.random() - 0.5), - }, - }), - 2000, - ); - } - componentWillUnmount() { this.props.unsubscribeToStreams(); } - receiveMsg(msg) { - this.setState({ - cable_wraps: msg, - }); + componentDidUpdate(prevProps, prevState) { + if (prevProps.ccwFollowingError !== this.props.ccwFollowingError) { + if (this.props.ccwFollowingError > 2) { + this.setState({ colorArc: COLOR_ARC_ERROR, colorCable: COLOR_CABLE_ERROR }); + } else { + this.setState({ colorArc: COLOR_ARC_INITIAL, colorCable: COLOR_CABLE_INITIAL }); + } + } } - // changeColorWithAlert() { - // const followError = this.props.followError; - - // } - drawBackground(g, radio, tau, arc) { const colorArc = this.state.colorArc; g.append('semi-circle') @@ -75,18 +49,10 @@ class CableWraps extends Component { .attr('r', radio - 5) .style('fill', colorArc); - // g.append('circle') - // .attr('cx', 0) - // .attr('cy', 0) - // .attr('r', radio - 70) - // .style('fill', '#33687f') - // .style('stroke', '#233a42') - // .style('stroke-width', '0'); - g.append('path').datum({ endAngle: tau }).style('fill', colorArc).attr('d', arc); } - drawLimits(g, radio, start, end) { + drawLimits(g, radio, start, end) { g.append('rect') .attr('x', 0) .attr('y', -radio - 10) @@ -138,7 +104,6 @@ class CableWraps extends Component { } render() { - const summaryState = CSCDetail.states[this.props.summaryState]; const ccwState = this.props.ccwState; const ccwPosition = this.props.ccwPosition; @@ -147,73 +112,33 @@ class CableWraps extends Component { return (
- {/*

Cable Wraps

*/} - {/*
*/} - {/*
*/} - {/*

Camera Cable Wrap

*/} - {/* {this.state.cable_wraps ? ( -

- Rotator angle difference: - - {(this.state.cable_wraps.camera.cable - this.state.cable_wraps.camera.rotator).toFixed(2) + 'º'} - -

- ) : ( -

- -

- )} */} - - {/*Camera*/} - Camera Cable Wrap - - {summaryState.name} - - - - {Math.round(degrees(this.state.cable_wraps.camera.rotator))+'°'} - - - {Math.round(degrees(this.state.cable_wraps.camera.cable))+'°'} - -
- this.drawBackground(g,r,t,a)} - drawLimits={this.drawLimits} - arcTween={this.arcTween} - cable_wrap={this.state.cable_wraps ? this.state.cable_wraps.camera : null} - colorCable={this.state.colorCable} - /> -
- {/*
*/} - {/*
-
-

Azimuth Cable Wrap

- {this.state.cable_wraps ? ( -

- Rotator angle difference: - - {(this.state.cable_wraps.az.cable - this.state.cable_wraps.az.rotator).toFixed(2) + 'º'} - -

- ) : ( - //

-

- -

- )} - -
*/} - {/*
*/} +
+ + {/*Camera*/} + Camera Cable Wrap + + {summaryState.name} + + + + {rotatorPosition + '°'} + + + {ccwPosition + '°'} + +
+
+ this.drawBackground(g, r, t, a)} + drawLimits={this.drawLimits} + arcTween={this.arcTween} + cable_wrap={ccwPosition ? ccwPosition : null} + rotator={rotatorPosition ? rotatorPosition : null} + colorCable={this.state.colorCable} + /> +
); } diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index d7de89922..4cd141939 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -42,61 +42,40 @@ class CameraCableWrap extends Component { .startAngle(0); this.arc = arc; - // let innerArc = d3 - // .arc() - // .innerRadius(radio - 70) - // .outerRadius(radio - 10) - // .startAngle(0); - // this.innerArc = innerArc; - - // arc with length 2 (35° - 37°) in radians + // arc with length 2 (-3.5° - -1.5°) in radians let rotArc = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) - .startAngle(0.610865) - .endAngle(0.645772); + .startAngle(-0.0610865) + .endAngle(-0.0261799); this.rotArc = rotArc; - // arc with length 2 (45° - 47°) in radians + // arc with length 2 (1.5° - 3.5°) in radians let rotArc2 = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) - .startAngle(0.785398) - .endAngle(0.820305); + .startAngle(0.0261799) + .endAngle(0.0610865); this.rotArc2 = rotArc2; - //arc with length 2 (40° - 42°) in radians + //arc with length 2 (0° - 2°) in radians let ccwArc = d3 .arc() .innerRadius(radio - 30) .outerRadius(radio + 20) - .startAngle(0.698132) - .endAngle(0.733038); + .startAngle(0) + .endAngle(0.0349066); this.ccwArc = ccwArc; - // this.path = this.g - // .append('path') - // .datum({ endAngle: 0 }) - // .style('fill', '#43e0f9') - // .attr('d', this.arc) - // .attr('id', 'cable_wrap'); - - // this.innerPath = this.g - // .append('path') - // .datum({ endAngle: 0 }) - // .style('fill', '#43e0f9') - // .attr('d', this.innerArc) - // .attr('id', 'rot_wrap'); - this.rot = this.g .append('path') .datum({ endAngle: 0 }) .style('fill', '#43e0f9') .attr('d', this.rotArc) .attr('id', 'rotator'); - + this.rot2 = this.g .append('path') .datum({ endAngle: 0 }) @@ -106,11 +85,11 @@ class CameraCableWrap extends Component { this.ccw = this.g .append('path') - .datum({endAngle: 0}) + .datum({ endAngle: 0 }) .style('fill', this.props.colorCable ? this.props.colorCable : '#35667E') .attr('d', this.ccwArc) .attr('id', 'cable_wrap'); - + let theta = degrees(Math.PI / 2); this.props.drawLimits(g, radio, theta, -theta); } @@ -121,44 +100,49 @@ class CameraCableWrap extends Component { let svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); this.g = g; - + let tau = Math.PI / 2; - // replace that for rotator and cable values from backend - let newAngle = this.props.cable_wrap.cable * tau; - let delta = radians(this.props.cable_wrap.rotator); - let newRotAngle = newAngle + delta; - - // this.path.transition().duration(1500).attrTween('d', this.props.arcTween(newAngle, this.arc)); - // this.innerPath.transition().duration(1500).attrTween('d', this.props.arcTween(newRotAngle, this.innerArc)); - - this.rot.transition().duration(2500).attrTween('d', (d) => { - return (t) => { - const angle = d3.interpolate(d.endAngle, newAngle)(t); - this.rotArc.startAngle(0.610865 + angle); - this.rotArc.endAngle(0.640865 + angle); - return this.rotArc(d); - }; - }); - - this.rot2.transition().duration(2500).attrTween('d', (d) => { - return (t) => { - const angle = d3.interpolate(d.endAngle, newAngle)(t); - this.rotArc2.startAngle(0.785398 + angle); - this.rotArc2.endAngle(0.820305 + angle); - return this.rotArc2(d); - }; - }); - - this.ccw.transition().duration(2500).attrTween('d', (d) => { - return (t) => { - const angle = d3.interpolate(d.endAngle, newRotAngle)(t); - this.ccwArc.startAngle(0.698132 + angle); - this.ccwArc.endAngle(0.733038 + angle); - return this.ccwArc(d); - } - }); - - + let cablePosition = this.props.cable_wrap * tau; + let rotatorPosition = this.props.rotator * tau; + + this.rot + .transition() + .duration(2500) + .attrTween('d', (d) => { + return (t) => { + const angle = d3.interpolate(d.endAngle, rotatorPosition)(t); + this.rotArc.startAngle(-0.0610865 + angle); + this.rotArc.endAngle(-0.02617996 + angle); + this.rot.datum({ endAngle: rotatorPosition }); + return this.rotArc(d); + }; + }); + + this.rot2 + .transition() + .duration(2500) + .attrTween('d', (d) => { + return (t) => { + const angle = d3.interpolate(d.endAngle, rotatorPosition)(t); + this.rotArc2.startAngle(0.0261799 + angle); + this.rotArc2.endAngle(0.0610865 + angle); + this.rot2.datum({ endAngle: rotatorPosition }); + return this.rotArc2(d); + }; + }); + + this.ccw + .transition() + .duration(2500) + .attrTween('d', (d) => { + return (t) => { + const angle = d3.interpolate(d.endAngle, cablePosition)(t); + this.ccwArc.startAngle(0 + angle); + this.ccwArc.endAngle(0.0349066 + angle); + this.ccw.datum({ endAngle: rotatorPosition }); + return this.ccwArc(d); + }; + }); } componentDidMount() { diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index 81a339789..ef1f8b6dc 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -318,38 +318,28 @@ export const getMountMotorsState = (state, index) => { // CCW export const getCCWState = (state) => { - const subscriptions = [ - 'event-MTMount-0-cameraCableWrapState', - 'event-MTMount-0-summaryState', - ]; + const subscriptions = ['event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-summaryState']; const ccwData = getStreamsData(state, subscriptions); return { cameraCablaWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] ? ccwData['event-MTMount-0-cameraCableWrapState'].state : 0, - summaryState: ccwData['event-MTMount-0-summaryState'] - ? ccwData['event-MTMount-0-summaryState'].summaryState - : 3, + summaryState: ccwData['event-MTMount-0-summaryState'] ? ccwData['event-MTMount-0-summaryState'].summaryState : 0, }; }; export const getCCWPosition = (state) => { - const subscriptions = [ - 'telemetry-MTMount-0-cameraCableWrap', - ]; + const subscriptions = ['telemetry-MTMount-0-cameraCableWrap']; const ccwData = getStreamsData(state, subscriptions); return { - cameraCableWrap: ccwData['telemetry-MTMount-0-cameraCableWrap'] + ccwPosition: ccwData['telemetry-MTMount-0-cameraCableWrap'] ? ccwData['telemetry-MTMount-0-cameraCableWrap'].actualPosition : 0, }; }; export const getRotatorState = (state) => { - const subscriptions = [ - 'event-MTRotator-0-inPosition', - 'event-MTRotator-0-summaryState', - ]; + const subscriptions = ['event-MTRotator-0-summaryState']; const rotatorData = getStreamsData(state, subscriptions); return { rotatorSummaryState: rotatorData['event-MTRotator-0-summaryState'] @@ -359,14 +349,11 @@ export const getRotatorState = (state) => { }; export const getRotatorPosition = (state) => { - const subscriptions = [ - 'telemetry-MTRotator-0-rotation', - 'event-MTRotator-0-inPosition', - ]; + const subscriptions = ['telemetry-MTRotator-0-rotation', 'event-MTRotator-0-inPosition']; const rotatorData = getStreamsData(state, subscriptions); return { - rotation: rotatorData['telemetry-MTRotator-0-rotation'] - ? rotatorData['telemetry-MTRotator-0-rotation'].demandPosition + rotatorPosition: rotatorData['telemetry-MTRotator-0-rotation'] + ? rotatorData['telemetry-MTRotator-0-rotation'].actualPosition : 0, inPosition: rotatorData['event-MTRotator-0-inPosition'] ? rotatorData['event-MTRotator-0-inPosition'].inPosition @@ -388,9 +375,7 @@ export const getCCWFollowingError = (state) => { cameraCableWrapFollowing: ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'].enabled : 0, - interlock: ccwErrorData['event-MTRotator-0-interlock'] - ? ccwErrorData['event-MTRotator-0-interlock'].detail - : 0, + interlock: ccwErrorData['event-MTRotator-0-interlock'] ? ccwErrorData['event-MTRotator-0-interlock'].detail : 0, }; }; From 1cc298cf9c1beae633e95204d82ad4ceb22cacf5 Mon Sep 17 00:00:00 2001 From: sebastian-aranda Date: Mon, 16 Aug 2021 12:24:04 -0400 Subject: [PATCH 23/29] Fix accessing selectors data --- .../MainTel/CableWraps/CableWraps.container.jsx | 5 ----- .../components/MainTel/CableWraps/CableWraps.jsx | 9 ++++++--- love/src/redux/selectors/selectors.js | 14 +++++++------- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index 2ca53b2e4..02b22b3dd 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -53,12 +53,7 @@ const mapDispatchToProps = (dispatch) => { 'telemetry-MTRotator-0-rotation', 'event-MTMount-0-cameraCableWrapFollowing', 'event-MTMount-0-cameraCableWrapState', - 'event-MTMount-0-cameraCableWrapTarget', 'event-MTMount-0-summaryState', - 'event-MTRotator-0-configuration', - 'event-MTRotator-0-inPosition', - 'event-MTRotator-0-interlock', - 'event-MTRotator-0-summaryState', ]; return { subscriptions, diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 136df35f8..193470dd4 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -17,6 +17,7 @@ const COLOR_ARC_INITIAL = '#35667E'; const COLOR_CABLE_INITIAL = '#29414B'; const COLOR_ARC_ERROR = '#202424'; const COLOR_CABLE_ERROR = '#DC5707'; +const MAX_CCW_FOLLOWING_ERROR = 2.0; class CableWraps extends Component { constructor(props) { @@ -33,7 +34,7 @@ class CableWraps extends Component { componentDidUpdate(prevProps, prevState) { if (prevProps.ccwFollowingError !== this.props.ccwFollowingError) { - if (this.props.ccwFollowingError > 2) { + if (this.props.ccwFollowingError > MAX_CCW_FOLLOWING_ERROR) { this.setState({ colorArc: COLOR_ARC_ERROR, colorCable: COLOR_CABLE_ERROR }); } else { this.setState({ colorArc: COLOR_ARC_INITIAL, colorCable: COLOR_CABLE_INITIAL }); @@ -104,7 +105,7 @@ class CableWraps extends Component { } render() { - const summaryState = CSCDetail.states[this.props.summaryState]; + const cameraCableWrapState = CSCDetail.states[this.props.cameraCableWrapState]; const ccwState = this.props.ccwState; const ccwPosition = this.props.ccwPosition; const rotatorState = this.props.rotatorState; @@ -117,7 +118,9 @@ class CableWraps extends Component { {/*Camera*/} Camera Cable Wrap - {summaryState.name} + + {cameraCableWrapState.name} + diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index ef1f8b6dc..cac72a0a1 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -321,10 +321,10 @@ export const getCCWState = (state) => { const subscriptions = ['event-MTMount-0-cameraCableWrapState', 'event-MTMount-0-summaryState']; const ccwData = getStreamsData(state, subscriptions); return { - cameraCablaWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] - ? ccwData['event-MTMount-0-cameraCableWrapState'].state + cameraCableWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] + ? ccwData['event-MTMount-0-cameraCableWrapState'][0].state : 0, - summaryState: ccwData['event-MTMount-0-summaryState'] ? ccwData['event-MTMount-0-summaryState'].summaryState : 0, + summaryState: ccwData['event-MTMount-0-summaryState'] ? ccwData['event-MTMount-0-summaryState'][0].summaryState : 0, }; }; @@ -343,7 +343,7 @@ export const getRotatorState = (state) => { const rotatorData = getStreamsData(state, subscriptions); return { rotatorSummaryState: rotatorData['event-MTRotator-0-summaryState'] - ? rotatorData['event-MTRotator-0-summaryState'].summaryState + ? rotatorData['event-MTRotator-0-summaryState'][0].summaryState : 0, }; }; @@ -356,7 +356,7 @@ export const getRotatorPosition = (state) => { ? rotatorData['telemetry-MTRotator-0-rotation'].actualPosition : 0, inPosition: rotatorData['event-MTRotator-0-inPosition'] - ? rotatorData['event-MTRotator-0-inPosition'].inPosition + ? rotatorData['event-MTRotator-0-inPosition'][0].inPosition : 0, }; }; @@ -373,9 +373,9 @@ export const getCCWFollowingError = (state) => { ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'].positionError : 0, cameraCableWrapFollowing: ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] - ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'].enabled + ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'][0].enabled : 0, - interlock: ccwErrorData['event-MTRotator-0-interlock'] ? ccwErrorData['event-MTRotator-0-interlock'].detail : 0, + interlock: ccwErrorData['event-MTRotator-0-interlock'] ? ccwErrorData['event-MTRotator-0-interlock'][0].detail : 0, }; }; From 163220b93fb9117848ca701b791292f5dbd0f795 Mon Sep 17 00:00:00 2001 From: sebastian-aranda Date: Wed, 18 Aug 2021 10:29:19 -0400 Subject: [PATCH 24/29] Refactor for a cleaner code --- .../CableWraps/CableWraps.container.jsx | 6 +- .../MainTel/CableWraps/CableWraps.jsx | 113 +++++++------ .../MainTel/CableWraps/CableWraps.module.css | 9 +- .../CameraCableWrap/CameraCableWrap.jsx | 150 ++++++++++-------- love/src/redux/selectors/selectors.js | 22 +-- 5 files changed, 161 insertions(+), 139 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index 02b22b3dd..29918a8c8 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -1,8 +1,5 @@ import React from 'react'; import { connect } from 'react-redux'; -import { addGroup, removeGroup } from '../../../redux/actions/ws'; -import CableWraps from './CableWraps'; -import SubscriptionTableContainer from '../../GeneralPurpose/SubscriptionTable/SubscriptionTable.container'; import { getCCWState, getRotatorState, @@ -10,6 +7,9 @@ import { getCCWPosition, getRotatorPosition, } from 'redux/selectors'; +import { addGroup, removeGroup } from '../../../redux/actions/ws'; +import CableWraps from './CableWraps'; +import SubscriptionTableContainer from '../../GeneralPurpose/SubscriptionTable/SubscriptionTable.container'; export const schema = { description: 'View of both MT azimuth and Camera cable wraps', diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 193470dd4..d81d3190f 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -1,102 +1,101 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import * as d3 from 'd3'; +import CSCDetail from 'components/CSCSummary/CSCDetail/CSCDetail'; import styles from './CableWraps.module.css'; -import AZCableWrap from './AZCableWrap/AZCableWrap'; import CameraCableWrap from './CameraCableWrap/CameraCableWrap'; -import StatusText from '../../GeneralPurpose/StatusText/StatusText'; import SummaryPanel from '../../GeneralPurpose/SummaryPanel/SummaryPanel'; -import CSCDetail from 'components/CSCSummary/CSCDetail/CSCDetail'; -import { degrees } from 'Utils'; -import Row from '../../GeneralPurpose/SummaryPanel/Row'; import Label from '../../GeneralPurpose/SummaryPanel/Label'; import Value from '../../GeneralPurpose/SummaryPanel/Value'; import Title from '../../GeneralPurpose/SummaryPanel/Title'; -import * as d3 from 'd3'; -import { style } from 'd3'; -const COLOR_ARC_INITIAL = '#35667E'; -const COLOR_CABLE_INITIAL = '#29414B'; -const COLOR_ARC_ERROR = '#202424'; -const COLOR_CABLE_ERROR = '#DC5707'; -const MAX_CCW_FOLLOWING_ERROR = 2.0; +const MAX_CCW_FOLLOWING_ERROR = 4.0; class CableWraps extends Component { + static propTypes = { + ccwPosition: PropTypes.number, + rotatorPosition: PropTypes.number, + cameraCableWrapState: PropTypes.number, + ccwFollowingError: PropTypes.number, + subscribeToStreams: PropTypes.func, + unsubscribeToStreams: PropTypes.func, + }; + constructor(props) { super(props); this.state = { - colorArc: COLOR_ARC_INITIAL, - colorCable: COLOR_CABLE_INITIAL, + ccwFollowingErrorState: false, }; } + componentDidMount() { + this.props.subscribeToStreams(); + } + componentWillUnmount() { this.props.unsubscribeToStreams(); } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate(prevProps) { if (prevProps.ccwFollowingError !== this.props.ccwFollowingError) { if (this.props.ccwFollowingError > MAX_CCW_FOLLOWING_ERROR) { - this.setState({ colorArc: COLOR_ARC_ERROR, colorCable: COLOR_CABLE_ERROR }); + this.setState({ ccwFollowingErrorState: true }); } else { - this.setState({ colorArc: COLOR_ARC_INITIAL, colorCable: COLOR_CABLE_INITIAL }); + this.setState({ ccwFollowingErrorState: false }); } } + // For development purposes: simulators doesn't have ccwFollowingError + // if (prevProps.ccwPosition !== this.props.ccwPosition || prevProps.rotatorPosition !== this.props.rotatorPosition) { + // console.log(Math.abs(this.props.ccwPosition - this.props.rotatorPosition)); + // console.log(Math.abs(this.props.ccwPosition - this.props.rotatorPosition) > MAX_CCW_FOLLOWING_ERROR); + // if (Math.abs(this.props.ccwPosition - this.props.rotatorPosition) > MAX_CCW_FOLLOWING_ERROR) { + // this.setState({ ccwFollowingErrorState: true }); + // } else { + // this.setState({ ccwFollowingErrorState: false }); + // } + // } } - drawBackground(g, radio, tau, arc) { - const colorArc = this.state.colorArc; - g.append('semi-circle') - .attr('cx', 0) - .attr('cy', 0) - .attr('r', radio - 5) - .style('fill', colorArc); - - g.append('path').datum({ endAngle: tau }).style('fill', colorArc).attr('d', arc); - } - - drawLimits(g, radio, start, end) { + static drawLimits(g, radio, start, end) { g.append('rect') - .attr('x', 0) + .attr('x', -1) .attr('y', -radio - 10) - .attr('width', 5) + .attr('width', 2) .attr('height', 30) - .style('fill', '#ffffff'); + .style('fill', '#fff'); - g.append('text') - .attr('x', 10) - .attr('y', -145) - .text(0 + '°') - .style('fill', '#ffffff'); + g.append('text').attr('x', 2).attr('y', -145).text('0°').style('fill', '#fff'); g.append('rect') .attr('x', -radio - 10) .attr('y', 0) .attr('width', 30) .attr('height', 2) - .style('fill', '#ffffff'); + .style('fill', '#fff'); g.append('text') .attr('x', -radio - 50) .attr('y', 5) - .text(start + '°') - .style('fill', '#ffffff'); + .text(`${start}°`) + .style('fill', '#fff'); g.append('rect') .attr('x', radio - 20) .attr('y', 0) .attr('width', 30) .attr('height', 2) - .style('fill', '#ffffff'); + .style('fill', '#fff'); g.append('text') .attr('x', radio + 15) .attr('y', 5) - .text(end + '°') - .style('fill', '#ffffff'); + .text(`${end}°`) + .style('fill', '#fff'); } - arcTween(newAngle, arc) { + static arcTween(newAngle, arc) { return function (d) { - var interpolate = d3.interpolate(d.endAngle, newAngle); + const interpolate = d3.interpolate(d.endAngle, newAngle); return function (t) { d.endAngle = interpolate(t); return arc(d); @@ -105,17 +104,15 @@ class CableWraps extends Component { } render() { + const { ccwFollowingErrorState } = this.state; const cameraCableWrapState = CSCDetail.states[this.props.cameraCableWrapState]; - const ccwState = this.props.ccwState; - const ccwPosition = this.props.ccwPosition; - const rotatorState = this.props.rotatorState; - const rotatorPosition = this.props.rotatorPosition; + const ccwPosition = this.props.ccwPosition ?? 0; + const rotatorPosition = this.props.rotatorPosition ?? 0; return (
- {/*Camera*/} Camera Cable Wrap @@ -124,22 +121,22 @@ class CableWraps extends Component { - {rotatorPosition + '°'} + {`${rotatorPosition}°`} - {ccwPosition + '°'} + {`${ccwPosition}°`}
this.drawBackground(g, r, t, a)} - drawLimits={this.drawLimits} - arcTween={this.arcTween} - cable_wrap={ccwPosition ? ccwPosition : null} - rotator={rotatorPosition ? rotatorPosition : null} - colorCable={this.state.colorCable} + drawBackground={(g, t, a) => this.drawBackground(g, t, a)} + drawLimits={CableWraps.drawLimits} + arcTween={CableWraps.arcTween} + cableWrap={ccwPosition} + rotator={rotatorPosition} + ccwFollowingErrorState={ccwFollowingErrorState} />
diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index d8232349c..68a34a47f 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -59,8 +59,9 @@ } .summaryState { -border-radius: 1rem; -font-weight: 700; -text-align: center; -width: 8em; + border-radius: 1rem; + font-weight: 700; + text-align: center; + display: inline-block; + width: 8em; } \ No newline at end of file diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 4cd141939..015822717 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -3,72 +3,81 @@ import * as d3 from 'd3'; import ReactDOM from 'react-dom'; import { radians, degrees } from 'Utils'; +const MAX_CCW_FOLLOWING_ERROR = 4.0; +const ARC_TRANSITION_DURATION = 200; +const COLOR_CABLE_INITIAL = '#29414B'; +const COLOR_CABLE_ERROR = '#DC5707'; +const COLOR_ARC_INITIAL = '#35667E'; +const COLOR_ARC_ERROR = '#3B2B1F'; +const TAU = Math.PI / 2; //to transform angles to radians + +const rotArcAngles = { + start: radians(-MAX_CCW_FOLLOWING_ERROR / 2.0 - 1.6), + end: radians(-MAX_CCW_FOLLOWING_ERROR / 2.0), +}; +const rotArc2Angles = { + start: radians(MAX_CCW_FOLLOWING_ERROR / 2.0), + end: radians(MAX_CCW_FOLLOWING_ERROR / 2.0 + 1.6), +}; +const ccwArcAngles = { + start: radians(-1), + end: radians(1), +}; + class CameraCableWrap extends Component { constructor(props) { super(props); this.g = null; - this.path = null; - this.arc = null; - this.innerPath = null; - this.innerArc = null; } - removeCameraCableWrap(dom) { + removeCameraCableWrap() { this.g.remove(); } createCameraCableWrap(dom) { - let radio = 140; - let width = this.props.width; - let height = this.props.height; + const radio = 140; + const { width, height } = this.props; - let svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); - let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); + const svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); + const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); this.g = g; - let tau = (1 / 2) * Math.PI; //to transform angles to radians - - let bckgarc = d3 - .arc() - .innerRadius(radio - 10) - .outerRadius(radio) - .startAngle(-tau); - // this.arc=arc; - this.props.drawBackground(g, radio, tau, bckgarc); - let arc = d3 + const background = d3 .arc() .innerRadius(radio - 10) .outerRadius(radio) - .startAngle(0); - this.arc = arc; + .startAngle(-TAU); - // arc with length 2 (-3.5° - -1.5°) in radians - let rotArc = d3 + const rotArc = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) - .startAngle(-0.0610865) - .endAngle(-0.0261799); + .startAngle(rotArcAngles.start) + .endAngle(rotArcAngles.end); this.rotArc = rotArc; - // arc with length 2 (1.5° - 3.5°) in radians - let rotArc2 = d3 + const rotArc2 = d3 .arc() .innerRadius(radio - 20) .outerRadius(radio + 10) - .startAngle(0.0261799) - .endAngle(0.0610865); + .startAngle(rotArc2Angles.start) + .endAngle(rotArc2Angles.end); this.rotArc2 = rotArc2; - //arc with length 2 (0° - 2°) in radians - let ccwArc = d3 + const ccwArc = d3 .arc() - .innerRadius(radio - 30) - .outerRadius(radio + 20) - .startAngle(0) - .endAngle(0.0349066); + .innerRadius(radio - 25) + .outerRadius(radio + 15) + .startAngle(ccwArcAngles.start) + .endAngle(ccwArcAngles.end); this.ccwArc = ccwArc; + this.background = this.g + .append('path') + .datum({ endAngle: TAU }) + .style('fill', COLOR_ARC_INITIAL) + .attr('d', background); + this.rot = this.g .append('path') .datum({ endAngle: 0 }) @@ -86,72 +95,83 @@ class CameraCableWrap extends Component { this.ccw = this.g .append('path') .datum({ endAngle: 0 }) - .style('fill', this.props.colorCable ? this.props.colorCable : '#35667E') + .style('fill', COLOR_CABLE_INITIAL) .attr('d', this.ccwArc) .attr('id', 'cable_wrap'); - let theta = degrees(Math.PI / 2); + const theta = degrees(Math.PI / 2); this.props.drawLimits(g, radio, theta, -theta); } - updateCameraCableWrap(dom) { - let width = this.props.width; - let height = this.props.height; - let svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); - let g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); - this.g = g; + updateCameraCableWrap() { + const { ccwFollowingErrorState } = this.props; - let tau = Math.PI / 2; - let cablePosition = this.props.cable_wrap * tau; - let rotatorPosition = this.props.rotator * tau; + const newCablePosition = radians(this.props.cableWrap); + const newRotatorPosition = radians(this.props.rotator); this.rot .transition() - .duration(2500) + .duration(ARC_TRANSITION_DURATION) .attrTween('d', (d) => { return (t) => { - const angle = d3.interpolate(d.endAngle, rotatorPosition)(t); - this.rotArc.startAngle(-0.0610865 + angle); - this.rotArc.endAngle(-0.02617996 + angle); - this.rot.datum({ endAngle: rotatorPosition }); + const angle = d3.interpolate(d.endAngle, newRotatorPosition)(t); + this.rotArc.startAngle(rotArcAngles.start + angle); + this.rotArc.endAngle(rotArcAngles.end + angle); return this.rotArc(d); }; + }) + .on('end', () => { + this.rot.datum({ endAngle: newRotatorPosition }); }); this.rot2 .transition() - .duration(2500) + .duration(ARC_TRANSITION_DURATION) .attrTween('d', (d) => { return (t) => { - const angle = d3.interpolate(d.endAngle, rotatorPosition)(t); - this.rotArc2.startAngle(0.0261799 + angle); - this.rotArc2.endAngle(0.0610865 + angle); - this.rot2.datum({ endAngle: rotatorPosition }); + const angle = d3.interpolate(d.endAngle, newRotatorPosition)(t); + this.rotArc2.startAngle(rotArc2Angles.start + angle); + this.rotArc2.endAngle(rotArc2Angles.end + angle); return this.rotArc2(d); }; + }) + .on('end', () => { + this.rot2.datum({ endAngle: newRotatorPosition }); }); this.ccw .transition() - .duration(2500) + .duration(ARC_TRANSITION_DURATION) .attrTween('d', (d) => { return (t) => { - const angle = d3.interpolate(d.endAngle, cablePosition)(t); - this.ccwArc.startAngle(0 + angle); - this.ccwArc.endAngle(0.0349066 + angle); - this.ccw.datum({ endAngle: rotatorPosition }); + const angle = d3.interpolate(d.endAngle, newCablePosition)(t); + this.ccwArc.startAngle(ccwArcAngles.start + angle); + this.ccwArc.endAngle(ccwArcAngles.end + angle); return this.ccwArc(d); }; + }) + .on('end', () => { + this.ccw + .style('fill', ccwFollowingErrorState ? COLOR_CABLE_ERROR : COLOR_CABLE_INITIAL) + .datum({ endAngle: newCablePosition }); }); + + this.background.style('fill', ccwFollowingErrorState ? COLOR_ARC_ERROR : COLOR_ARC_INITIAL); } componentDidMount() { - var dom = ReactDOM.findDOMNode(this); + const dom = ReactDOM.findDOMNode(this); this.createCameraCableWrap(dom); } - componentDidUpdate() { - this.updateCameraCableWrap(); + componentDidUpdate(prevProps) { + if ( + prevProps.cableWrap !== this.props.cableWrap || + prevProps.rotator !== this.props.rotator || + prevProps.ccwFollowingErrorState !== this.props.ccwFollowingErrorState + ) { + this.updateCameraCableWrap(); + } } render() { diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index cac72a0a1..6811d699f 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -322,9 +322,11 @@ export const getCCWState = (state) => { const ccwData = getStreamsData(state, subscriptions); return { cameraCableWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] - ? ccwData['event-MTMount-0-cameraCableWrapState'][0].state + ? ccwData['event-MTMount-0-cameraCableWrapState'][0].state.value + : 0, + summaryState: ccwData['event-MTMount-0-summaryState'] + ? ccwData['event-MTMount-0-summaryState'][0].summaryState.value : 0, - summaryState: ccwData['event-MTMount-0-summaryState'] ? ccwData['event-MTMount-0-summaryState'][0].summaryState : 0, }; }; @@ -333,7 +335,7 @@ export const getCCWPosition = (state) => { const ccwData = getStreamsData(state, subscriptions); return { ccwPosition: ccwData['telemetry-MTMount-0-cameraCableWrap'] - ? ccwData['telemetry-MTMount-0-cameraCableWrap'].actualPosition + ? ccwData['telemetry-MTMount-0-cameraCableWrap'].actualPosition.value : 0, }; }; @@ -343,7 +345,7 @@ export const getRotatorState = (state) => { const rotatorData = getStreamsData(state, subscriptions); return { rotatorSummaryState: rotatorData['event-MTRotator-0-summaryState'] - ? rotatorData['event-MTRotator-0-summaryState'][0].summaryState + ? rotatorData['event-MTRotator-0-summaryState'][0].summaryState.value : 0, }; }; @@ -353,10 +355,10 @@ export const getRotatorPosition = (state) => { const rotatorData = getStreamsData(state, subscriptions); return { rotatorPosition: rotatorData['telemetry-MTRotator-0-rotation'] - ? rotatorData['telemetry-MTRotator-0-rotation'].actualPosition + ? rotatorData['telemetry-MTRotator-0-rotation'].actualPosition.value : 0, inPosition: rotatorData['event-MTRotator-0-inPosition'] - ? rotatorData['event-MTRotator-0-inPosition'][0].inPosition + ? rotatorData['event-MTRotator-0-inPosition'][0].inPosition.value : 0, }; }; @@ -370,12 +372,14 @@ export const getCCWFollowingError = (state) => { const ccwErrorData = getStreamsData(state, subscriptions); return { ccwFollowingError: ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'] - ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'].positionError + ? ccwErrorData['telemetry-MTRotator-0-ccwFollowingError'].positionError.value : 0, cameraCableWrapFollowing: ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'] - ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'][0].enabled + ? ccwErrorData['event-MTMount-0-cameraCableWrapFollowing'][0].enabled.value + : 0, + interlock: ccwErrorData['event-MTRotator-0-interlock'] + ? ccwErrorData['event-MTRotator-0-interlock'][0].detail.value : 0, - interlock: ccwErrorData['event-MTRotator-0-interlock'] ? ccwErrorData['event-MTRotator-0-interlock'][0].detail : 0, }; }; From c654455f1ffe400e530b89fdc9dcacc9f6fdfd06 Mon Sep 17 00:00:00 2001 From: sebastian-aranda Date: Wed, 18 Aug 2021 10:43:29 -0400 Subject: [PATCH 25/29] Change constants for production --- .../MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 015822717..ac5eb81af 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -3,8 +3,8 @@ import * as d3 from 'd3'; import ReactDOM from 'react-dom'; import { radians, degrees } from 'Utils'; -const MAX_CCW_FOLLOWING_ERROR = 4.0; -const ARC_TRANSITION_DURATION = 200; +const MAX_CCW_FOLLOWING_ERROR = 2.0; +const ARC_TRANSITION_DURATION = 1000; const COLOR_CABLE_INITIAL = '#29414B'; const COLOR_CABLE_ERROR = '#DC5707'; const COLOR_ARC_INITIAL = '#35667E'; From 7b51e363c4128bb6560250a7a821979cfcc280cf Mon Sep 17 00:00:00 2001 From: sebastian-aranda Date: Wed, 18 Aug 2021 16:33:47 -0400 Subject: [PATCH 26/29] Final details --- love/src/Constants.js | 2 ++ love/src/Utils.js | 4 +++ .../MainTel/CableWraps/CableWraps.jsx | 35 +++++++++++-------- .../MainTel/CableWraps/CableWraps.module.css | 5 +-- .../CameraCableWrap/CameraCableWrap.jsx | 12 ++++--- love/src/redux/selectors/selectors.js | 2 +- 6 files changed, 38 insertions(+), 22 deletions(-) diff --git a/love/src/Constants.js b/love/src/Constants.js index 8e816b204..f10f9b4e2 100644 --- a/love/src/Constants.js +++ b/love/src/Constants.js @@ -1,3 +1,5 @@ +export const MAX_CCW_FOLLOWING_ERROR = 2.0; + export const cameraStates = { raftsDetailedState: { 0: 'NEEDS_CLEAR', diff --git a/love/src/Utils.js b/love/src/Utils.js index 4caf8d93b..05ebbfe0c 100644 --- a/love/src/Utils.js +++ b/love/src/Utils.js @@ -722,3 +722,7 @@ export function radians(degrees) { export function degrees(radians) { return (radians * 180) / Math.PI; } + +export function fixedFloat(x, points = 3) { + return Number.parseFloat(x).toFixed(points); +} diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index d81d3190f..468c5d113 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import * as d3 from 'd3'; +import { MAX_CCW_FOLLOWING_ERROR } from 'Constants'; +import { fixedFloat } from 'Utils'; import CSCDetail from 'components/CSCSummary/CSCDetail/CSCDetail'; import styles from './CableWraps.module.css'; import CameraCableWrap from './CameraCableWrap/CameraCableWrap'; @@ -9,12 +11,11 @@ import Label from '../../GeneralPurpose/SummaryPanel/Label'; import Value from '../../GeneralPurpose/SummaryPanel/Value'; import Title from '../../GeneralPurpose/SummaryPanel/Title'; -const MAX_CCW_FOLLOWING_ERROR = 4.0; - class CableWraps extends Component { static propTypes = { ccwPosition: PropTypes.number, rotatorPosition: PropTypes.number, + mountSummaryState: PropTypes.number, cameraCableWrapState: PropTypes.number, ccwFollowingError: PropTypes.number, subscribeToStreams: PropTypes.func, @@ -44,16 +45,6 @@ class CableWraps extends Component { this.setState({ ccwFollowingErrorState: false }); } } - // For development purposes: simulators doesn't have ccwFollowingError - // if (prevProps.ccwPosition !== this.props.ccwPosition || prevProps.rotatorPosition !== this.props.rotatorPosition) { - // console.log(Math.abs(this.props.ccwPosition - this.props.rotatorPosition)); - // console.log(Math.abs(this.props.ccwPosition - this.props.rotatorPosition) > MAX_CCW_FOLLOWING_ERROR); - // if (Math.abs(this.props.ccwPosition - this.props.rotatorPosition) > MAX_CCW_FOLLOWING_ERROR) { - // this.setState({ ccwFollowingErrorState: true }); - // } else { - // this.setState({ ccwFollowingErrorState: false }); - // } - // } } static drawLimits(g, radio, start, end) { @@ -105,14 +96,30 @@ class CableWraps extends Component { render() { const { ccwFollowingErrorState } = this.state; + const rotatorSummaryState = CSCDetail.states[this.props.rotatorSummaryState]; + const mountSummaryState = CSCDetail.states[this.props.mountSummaryState]; const cameraCableWrapState = CSCDetail.states[this.props.cameraCableWrapState]; - const ccwPosition = this.props.ccwPosition ?? 0; - const rotatorPosition = this.props.rotatorPosition ?? 0; + const rotatorPosition = fixedFloat(this.props.rotatorPosition ?? 0); + const ccwPosition = fixedFloat(this.props.ccwPosition ?? 0); return (
+ {/* MTMount + + + {mountSummaryState.name} + + + + MTRotator + + + {rotatorSummaryState.name} + + */} + Camera Cable Wrap diff --git a/love/src/components/MainTel/CableWraps/CableWraps.module.css b/love/src/components/MainTel/CableWraps/CableWraps.module.css index 68a34a47f..623e85131 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.module.css +++ b/love/src/components/MainTel/CableWraps/CableWraps.module.css @@ -4,7 +4,8 @@ margin: 5px; height: 100%; width: 500px; - margin-top: 0; + margin-top: 0.5em; + } .cableWrapsContainer .cableWrapsContent { @@ -47,7 +48,7 @@ } .divCameraWrap { - margin-top: 80px; + margin-top: 2em; } .summaryPanelStates { diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index ac5eb81af..22e6059d7 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -1,10 +1,11 @@ import React, { Component } from 'react'; import * as d3 from 'd3'; import ReactDOM from 'react-dom'; +import debounce from 'lodash.debounce'; import { radians, degrees } from 'Utils'; +import { MAX_CCW_FOLLOWING_ERROR } from 'Constants'; -const MAX_CCW_FOLLOWING_ERROR = 2.0; -const ARC_TRANSITION_DURATION = 1000; +const ARC_TRANSITION_DURATION = 200; const COLOR_CABLE_INITIAL = '#29414B'; const COLOR_CABLE_ERROR = '#DC5707'; const COLOR_ARC_INITIAL = '#35667E'; @@ -154,11 +155,12 @@ class CameraCableWrap extends Component { this.ccw .style('fill', ccwFollowingErrorState ? COLOR_CABLE_ERROR : COLOR_CABLE_INITIAL) .datum({ endAngle: newCablePosition }); + this.background.style('fill', ccwFollowingErrorState ? COLOR_ARC_ERROR : COLOR_ARC_INITIAL); }); - - this.background.style('fill', ccwFollowingErrorState ? COLOR_ARC_ERROR : COLOR_ARC_INITIAL); } + debouncedUpdateCameraCableWrap = debounce(() => this.updateCameraCableWrap(), ARC_TRANSITION_DURATION); + componentDidMount() { const dom = ReactDOM.findDOMNode(this); this.createCameraCableWrap(dom); @@ -170,7 +172,7 @@ class CameraCableWrap extends Component { prevProps.rotator !== this.props.rotator || prevProps.ccwFollowingErrorState !== this.props.ccwFollowingErrorState ) { - this.updateCameraCableWrap(); + this.debouncedUpdateCameraCableWrap(); } } diff --git a/love/src/redux/selectors/selectors.js b/love/src/redux/selectors/selectors.js index 6811d699f..88356d740 100644 --- a/love/src/redux/selectors/selectors.js +++ b/love/src/redux/selectors/selectors.js @@ -324,7 +324,7 @@ export const getCCWState = (state) => { cameraCableWrapState: ccwData['event-MTMount-0-cameraCableWrapState'] ? ccwData['event-MTMount-0-cameraCableWrapState'][0].state.value : 0, - summaryState: ccwData['event-MTMount-0-summaryState'] + mountSummaryState: ccwData['event-MTMount-0-summaryState'] ? ccwData['event-MTMount-0-summaryState'][0].summaryState.value : 0, }; From bf86f6fac423194ce13cd6b8f8aaf5ef85b2a8e7 Mon Sep 17 00:00:00 2001 From: sebastian-aranda Date: Thu, 26 Aug 2021 17:08:33 -0400 Subject: [PATCH 27/29] Remove svg bottom margin --- love/src/components/MainTel/CableWraps/CableWraps.jsx | 2 +- .../MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index 468c5d113..c36d92b13 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -136,7 +136,7 @@ class CableWraps extends Component {
this.drawBackground(g, t, a)} drawLimits={CableWraps.drawLimits} diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 22e6059d7..f27b05965 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -40,7 +40,7 @@ class CameraCableWrap extends Component { const { width, height } = this.props; const svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); - const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); + const g = svg.append('g').attr('transform', `translate(${width / 2}, 160)`); this.g = g; const background = d3 From d3e0f58233f58d5f30835d987cf53d9ab84b90e3 Mon Sep 17 00:00:00 2001 From: Fernando del Campo Date: Fri, 27 Aug 2021 15:30:25 -0400 Subject: [PATCH 28/29] little changes about position zero angle and size svg relative to expecification in props of CameraCableWrap --- .../components/MainTel/CableWraps/CableWraps.container.jsx | 1 + love/src/components/MainTel/CableWraps/CableWraps.jsx | 4 ++-- .../MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx | 6 ++++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx index 29918a8c8..e9d635fd4 100644 --- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx @@ -32,6 +32,7 @@ const CableWrapsContainer = ({ subscribeToStreams, unsubscribeToStreams, ...prop }; const mapStateToProps = (state) => { + const ccwState = getCCWState(state); const ccwPosition = getCCWPosition(state); const rotatorState = getRotatorState(state); diff --git a/love/src/components/MainTel/CableWraps/CableWraps.jsx b/love/src/components/MainTel/CableWraps/CableWraps.jsx index c36d92b13..55ee9352c 100755 --- a/love/src/components/MainTel/CableWraps/CableWraps.jsx +++ b/love/src/components/MainTel/CableWraps/CableWraps.jsx @@ -55,7 +55,7 @@ class CableWraps extends Component { .attr('height', 30) .style('fill', '#fff'); - g.append('text').attr('x', 2).attr('y', -145).text('0°').style('fill', '#fff'); + g.append('text').attr('x', -4).attr('y', -155).text('0°').style('fill', '#fff'); g.append('rect') .attr('x', -radio - 10) @@ -136,7 +136,7 @@ class CableWraps extends Component {
this.drawBackground(g, t, a)} drawLimits={CableWraps.drawLimits} diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index f27b05965..91242d0aa 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -36,11 +36,13 @@ class CameraCableWrap extends Component { } createCameraCableWrap(dom) { - const radio = 140; + const { width, height } = this.props; + const radio = height - 60; + const svg = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height); - const g = svg.append('g').attr('transform', `translate(${width / 2}, 160)`); + const g = svg.append('g').attr('transform', `translate(${width / 2}, ${height - 20})`); this.g = g; const background = d3 From fb7b96a7e2eb832ab1610664a2647b36fb6008b1 Mon Sep 17 00:00:00 2001 From: Fernando del Campo Date: Fri, 27 Aug 2021 15:52:50 -0400 Subject: [PATCH 29/29] add little changes about order of svg objects for the cable wrap svg is top to line zero angle --- .../CableWraps/CameraCableWrap/CameraCableWrap.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx index 91242d0aa..f3fe2b7d8 100755 --- a/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx +++ b/love/src/components/MainTel/CableWraps/CameraCableWrap/CameraCableWrap.jsx @@ -70,11 +70,14 @@ class CameraCableWrap extends Component { const ccwArc = d3 .arc() .innerRadius(radio - 25) - .outerRadius(radio + 15) + .outerRadius(radio + 13) .startAngle(ccwArcAngles.start) .endAngle(ccwArcAngles.end); this.ccwArc = ccwArc; + const theta = degrees(Math.PI / 2); + this.props.drawLimits(g, radio, theta, -theta); + this.background = this.g .append('path') .datum({ endAngle: TAU }) @@ -102,8 +105,7 @@ class CameraCableWrap extends Component { .attr('d', this.ccwArc) .attr('id', 'cable_wrap'); - const theta = degrees(Math.PI / 2); - this.props.drawLimits(g, radio, theta, -theta); + } updateCameraCableWrap() {