Skip to content

Commit 5eaabf1

Browse files
gregwgodind
gregw
and
godind
authored
TTB, TTL and named Lines in racer widgets (#885)
* Improve button font sizes * Added support for TTL and TTB Added support for selecting a named line * Added support for TTL and TTB Added support for selecting a named line Added tool tips * Added support for TTL and TTB Added support for selecting a named line Added tool tips * Added support for TTL and TTB Added support for selecting a named line Added tool tips * Delete plugin/index.js PLugin compiled file. Not needed. --------- Co-authored-by: David Godin <34038713+godind@users.noreply.github.com>
1 parent 3c88f63 commit 5eaabf1

File tree

6 files changed

+515
-218
lines changed

6 files changed

+515
-218
lines changed

‎src/app/widgets/widget-racer-line/widget-racer-line.component.html‎

Lines changed: 71 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<div class="line-wrapper">
2-
<div class="filler"><canvas #canvasMainRef class="line-canvas"></canvas></div>
2+
<div class="filler">
3+
<canvas #canvasMainRef class="line-canvas"></canvas>
4+
</div>
35
<div class="buttons-container">
4-
<button mat-flat-button class="button select-button" (click)="toggleMode()">
6+
<button mat-flat-button class="button select-button" matTooltip="Select the control mode" (click)="toggleMode()">
57
<mat-icon class="buttons-svg-icon">
68
<svg
79
width="100%"
810
height="100%"
9-
viewBox="0 0 100 14"
11+
viewBox="0 0 80 14"
1012
preserveAspectRatio="xMidYMid meet"
1113
class="svg-content">
12-
<text xml:space="preserve" x="50" y="9">&vellip;</text>
14+
<text x="40" y="9">&vellip;</text>
1315
</svg>
1416
</mat-icon>
1517
</button>
@@ -21,7 +23,7 @@
2123
viewBox="0 0 70 18"
2224
preserveAspectRatio="xMidYMid meet"
2325
class="svg-content pin">
24-
<text xml:space="preserve" x="33" y="14">{{ portBiasValue() }}</text>
26+
<text x="33" y="14">{{ portBiasValue() }}</text>
2527
</svg>
2628
</div>
2729
<div class="len-bias-container">
@@ -31,7 +33,7 @@
3133
viewBox="0 0 90 12"
3234
preserveAspectRatio="xMidYMid meet"
3335
class="svg-content len-bias">
34-
<text xml:space="preserve" x="45" y="9">
36+
<text x="45" y="9">
3537
<tspan class="pin">⚑</tspan>
3638
{{ lineLengthValue() }}
3739
<tspan class="boat">⚑</tspan>
@@ -45,13 +47,14 @@
4547
viewBox="0 0 70 18"
4648
preserveAspectRatio="xMidYMid meet"
4749
class="svg-content boat">
48-
<text xml:space="preserve" x="33" y="14">{{ stbBiasValue() }}</text>
50+
<text x="33" y="14">{{ stbBiasValue() }}</text>
4951
</svg>
5052
</div>
5153
} @case (1) {
5254
<button
5355
mat-flat-button
5456
class="button port-button"
57+
matTooltip="Set the port(pin) end of the line to the current position"
5558
(click)="setLineEnd('port')">
5659
<mat-icon class="buttons-svg-icon">
5760
<svg
@@ -60,13 +63,14 @@
6063
viewBox="0 0 100 14"
6164
preserveAspectRatio="xMidYMid meet"
6265
class="svg-content">
63-
<text xml:space="preserve" x="50" y="11">Port End</text>
66+
<text x="50" y="11">Port End</text>
6467
</svg>
6568
</mat-icon>
6669
</button>
6770
<button
6871
mat-flat-button
6972
class="button starboard-button"
73+
matTooltip="Set the starboard(boat) end of the line to the current position"
7074
(click)="setLineEnd('stb')">
7175
<mat-icon class="buttons-svg-icon">
7276
<svg
@@ -75,147 +79,173 @@
7579
viewBox="0 0 100 14"
7680
preserveAspectRatio="xMidYMid meet"
7781
class="svg-content">
78-
<text xml:space="preserve" x="50" y="11">Stbd End</text>
82+
<text x="50" y="11">Stbd End</text>
7983
</svg>
8084
</mat-icon>
8185
</button>
8286
} @case (2) {
8387
<button
8488
mat-flat-button
8589
class="button port-small-button"
90+
matTooltip="Increase the line length by 5m at the port(pin) end"
8691
(click)="adjustLineEnd('port', 5, 0)">
8792
<mat-icon class="buttons-svg-icon">
8893
<svg
8994
width="100%"
9095
height="100%"
91-
viewBox="0 0 100 14"
96+
viewBox="0 0 50 14"
9297
preserveAspectRatio="xMidYMid meet"
9398
class="svg-content">
94-
<text xml:space="preserve" x="50" y="12">+5m</text>
99+
<text x="25" y="11">+5m</text>
95100
</svg>
96101
</mat-icon>
97102
</button>
98103
<button
99104
mat-flat-button
100105
class="button port-small-button"
106+
matTooltip="Decrease the line length by 5m at the port(pin) end"
101107
(click)="adjustLineEnd('port', -5, 0)">
102108
<mat-icon class="buttons-svg-icon">
103109
<svg
104110
width="100%"
105111
height="100%"
106-
viewBox="0 0 100 14"
107-
preserveAspectRatio="xMidYMid meet"
108-
class="svg-content">
109-
<text xml:space="preserve" x="50" y="12">-5m</text>
110-
</svg>
111-
</mat-icon>
112-
</button>
113-
<button
114-
mat-flat-button
115-
class="button starboard-small-button"
116-
(click)="adjustLineEnd('stb', 5, 0)">
117-
<mat-icon class="buttons-svg-icon">
118-
<svg
119-
width="100%"
120-
height="100%"
121-
viewBox="0 0 100 14"
112+
viewBox="0 0 50 14"
122113
preserveAspectRatio="xMidYMid meet"
123114
class="svg-content">
124-
<text xml:space="preserve" x="50" y="12">+5m</text>
115+
<text x="25" y="11">-5m</text>
125116
</svg>
126117
</mat-icon>
127118
</button>
128119
<button
129120
mat-flat-button
130121
class="button starboard-small-button"
122+
matTooltip="Decrease the line length by 5m at the starboard(boat) end"
131123
(click)="adjustLineEnd('stb', -5, 0)">
132124
<mat-icon class="buttons-svg-icon">
133125
<svg
134126
width="100%"
135127
height="100%"
136-
viewBox="0 0 100 14"
128+
viewBox="0 0 50 14"
137129
preserveAspectRatio="xMidYMid meet"
138130
class="svg-content">
139-
<text xml:space="preserve" x="50" y="12">-5m</text>
131+
<text x="25" y="11">-5m</text>
140132
</svg>
141133
</mat-icon>
142134
</button>
143135
<button
144136
mat-flat-button
145137
class="button starboard-small-button"
146-
(click)="adjustLineEnd('stb', -5, 0)">
138+
matTooltip="Increase the line length by 5m at the starboard(boat) end"
139+
(click)="adjustLineEnd('stb', 5, 0)">
147140
<mat-icon class="buttons-svg-icon">
148141
<svg
149142
width="100%"
150143
height="100%"
151-
viewBox="0 0 100 14"
144+
viewBox="0 0 50 14"
152145
preserveAspectRatio="xMidYMid meet"
153146
class="svg-content">
154-
<text xml:space="preserve" x="50" y="12">+5m</text>
147+
<text x="25" y="11">+5m</text>
155148
</svg>
156149
</mat-icon>
157150
</button>
158151
} @case (3) {
159152
<button
160153
mat-flat-button
161154
class="button port-small-button"
155+
matTooltip="Rotate the line by moving the port(pin) end 1° clockwise"
162156
(click)="adjustLineEnd('port', 0, toRadians(1))">
163157
<mat-icon class="buttons-svg-icon">
164158
<svg
165159
width="100%"
166160
height="100%"
167-
viewBox="0 0 100 14"
161+
viewBox="0 0 50 14"
168162
preserveAspectRatio="xMidYMid meet"
169163
class="svg-content">
170-
<text xml:space="preserve" x="50" y="12">↑1&deg;</text>
164+
<text x="25" y="11">↑1&deg;</text>
171165
</svg>
172166
</mat-icon>
173167
</button>
174168
<button
175169
mat-flat-button
176170
class="button port-small-button"
171+
matTooltip="Rotate the line by moving the port(pin) end 1° counter-clockwise"
177172
(click)="adjustLineEnd('port', 0, toRadians(-1))">
178173
<mat-icon class="buttons-svg-icon">
179174
<svg
180175
width="100%"
181176
height="100%"
182-
viewBox="0 0 100 14"
177+
viewBox="0 0 50 14"
183178
preserveAspectRatio="xMidYMid meet"
184179
class="svg-content">
185-
<text xml:space="preserve" x="50" y="12">↓1&deg;</text>
180+
<text x="25" y="11">↓1&deg;</text>
186181
</svg>
187182
</mat-icon>
188183
</button>
189184
<button
190185
mat-flat-button
191186
class="button starboard-small-button"
187+
matTooltip="Rotate the line by moving the starboard(boat) end 1° counter-clockwise"
192188
(click)="adjustLineEnd('stb', 0, toRadians(1))">
193189
<mat-icon class="buttons-svg-icon">
194190
<svg
195191
width="100%"
196192
height="100%"
197-
viewBox="0 0 100 14"
193+
viewBox="0 0 50 14"
198194
preserveAspectRatio="xMidYMid meet"
199195
class="svg-content">
200-
<text xml:space="preserve" x="50" y="12">↑1&deg;</text>
196+
<text x="25" y="11">↓1&deg;</text>
201197
</svg>
202198
</mat-icon>
203199
</button>
204200
<button
205201
mat-flat-button
206202
class="button starboard-small-button"
203+
matTooltip="Rotate the line by moving the starboard(boat) end 1° clockwise"
207204
(click)="adjustLineEnd('stb', 0, toRadians(-1))">
208205
<mat-icon class="buttons-svg-icon">
209206
<svg
210207
width="100%"
211208
height="100%"
212-
viewBox="0 0 100 14"
209+
viewBox="0 0 50 14"
213210
preserveAspectRatio="xMidYMid meet"
214211
class="svg-content">
215-
<text xml:space="preserve" x="50" y="12">↓1&deg;</text>
212+
<text x="25" y="11">↑1&deg;</text>
216213
</svg>
217214
</mat-icon>
218215
</button>
216+
} @case (4) {
217+
<button
218+
mat-flat-button
219+
class="button select-button"
220+
matTooltip="Display the next named line"
221+
(click)="nextDisplayLineName()">
222+
<mat-icon class="buttons-svg-icon">
223+
<svg
224+
width="100%"
225+
height="100%"
226+
viewBox="0 0 50 14"
227+
preserveAspectRatio="xMidYMid meet"
228+
class="svg-content">
229+
<text x="25" y="11">Line</text>
230+
</svg>
231+
</mat-icon>
232+
</button>
233+
<button
234+
mat-flat-button
235+
class="button {{isDisplayLineCurrent() ? 'line-button-current' : 'line-button'}}"
236+
matTooltip="Set the {{ getDisplayLineName()}} line as the current line"
237+
(click)="setStartLine(getDisplayLineName())">
238+
<mat-icon class="buttons-svg-icon">
239+
<svg
240+
width="100%"
241+
height="100%"
242+
viewBox="0 0 150 14"
243+
preserveAspectRatio="xMidYMid meet"
244+
class="svg-content">
245+
<text x="75" y="11">{{ getDisplayLineName() }}</text>
246+
</svg>
247+
</mat-icon>
248+
</button>
219249
} }
220250
</div>
221251
@if (!dashboard.isDashboardStatic()) {

‎src/app/widgets/widget-racer-line/widget-racer-line.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,24 @@
6363
));
6464
}
6565

66+
.line-button {
67+
flex: none;
68+
width: 58%;
69+
@include mat.button-overrides((
70+
filled-container-color: var(--kip-grey-color),
71+
filled-label-text-color: var(--kip-contrast-color)
72+
));
73+
}
74+
75+
.line-button-current {
76+
flex: none;
77+
width: 58%;
78+
@include mat.button-overrides((
79+
filled-container-color: var(--kip-orange-color),
80+
filled-label-text-color: var(--kip-contrast-color)
81+
));
82+
}
83+
6684
.port-button {
6785
flex: 1 1 auto;
6886
@include mat.button-overrides((

0 commit comments

Comments
 (0)