scouting: button to switch field pov
Signed-off-by: emilym <emily.markova@gmail.com>
Change-Id: Ic5e22194c863c0a573b35b553c98c10d7be5e6d7
diff --git a/scouting/www/entry/entry.component.css b/scouting/www/entry/entry.component.css
index 24e4127..6d13657 100644
--- a/scouting/www/entry/entry.component.css
+++ b/scouting/www/entry/entry.component.css
@@ -15,3 +15,12 @@
button {
touch-action: manipulation;
}
+
+#switchFldbtn {
+ width: 15%;
+ display: block;
+ margin: 0 auto;
+ box-shadow: 2px 2px 1px #ccc;
+ max-width: 105px;
+ text-align: center;
+}
diff --git a/scouting/www/entry/entry.component.ts b/scouting/www/entry/entry.component.ts
index d6829c5..08f4dd4 100644
--- a/scouting/www/entry/entry.component.ts
+++ b/scouting/www/entry/entry.component.ts
@@ -38,6 +38,23 @@
f: 'Finals',
};
+const IMAGES_ARRAY = [
+ {
+ id: 'field_quadrants_image',
+ original_image:
+ '/sha256/cbb99a057a2504e80af526dae7a0a04121aed84c56a6f4889e9576fe1c20c61e/pictures/field/quadrants.jpeg',
+ reversed_image:
+ '/sha256/2c67fffbb722e9a7d0e1d270f1aad7f39a2dc8493c2e7ad1ae50bd6fa52d5bb7/pictures/field/reversed_quadrants.jpeg',
+ },
+ {
+ id: 'field_balls_image',
+ original_image:
+ '/sha256/e095cc8a75d804b0e2070e0a941fab37154176756d4c1a775e53cc48c3a732b9/pictures/field/balls.jpeg',
+ reversed_image:
+ '/sha256/fe4a4605c03598611c583d4dcdf28e06a056a17302ae91f5c527568966d95f3a/pictures/field/reversed_balls.jpeg',
+ },
+];
+
@Component({
selector: 'app-entry',
templateUrl: './entry.ng.html',
@@ -122,6 +139,14 @@
this.scrollToTop();
}
+ flipImages() {
+ for (let obj of IMAGES_ARRAY) {
+ let img = document.getElementById(obj.id) as HTMLImageElement;
+ img.src = img.src.endsWith(obj.original_image)
+ ? obj.reversed_image
+ : obj.original_image;
+ }
+ }
private scrollToTop() {
this.header.nativeElement.scrollIntoView();
}
diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index 6dab39b..9be8db7 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -54,8 +54,12 @@
</div>
<div *ngSwitchCase="'Auto'" id="auto" class="container-fluid">
+ <button class="buttons" id="switch_field_button" (click)="flipImages()">
+ Flip
+ </button>
<div class="row">
<img
+ id="field_quadrants_image"
src="/sha256/cbb99a057a2504e80af526dae7a0a04121aed84c56a6f4889e9576fe1c20c61e/pictures/field/quadrants.jpeg"
alt="Quadrants Image"
/>
@@ -97,8 +101,9 @@
</div>
<div class="row">
<img
+ id="field_balls_image"
src="/sha256/e095cc8a75d804b0e2070e0a941fab37154176756d4c1a775e53cc48c3a732b9/pictures/field/balls.jpeg"
- alt="Image"
+ alt="Balls Image"
/>
<form>
<!--Choice for each ball location-->
diff --git a/third_party/y2022/field/reversed_balls.jpeg b/third_party/y2022/field/reversed_balls.jpeg
new file mode 100644
index 0000000..5a2dc93
--- /dev/null
+++ b/third_party/y2022/field/reversed_balls.jpeg
Binary files differ
diff --git a/third_party/y2022/field/reversed_quadrants.jpeg b/third_party/y2022/field/reversed_quadrants.jpeg
new file mode 100644
index 0000000..adacd8d
--- /dev/null
+++ b/third_party/y2022/field/reversed_quadrants.jpeg
Binary files differ
