Adds automatic CSS zoom for Explore/Validate pages

app/controllers/TaskController.scala

@@ -220,7 +220,7 @@ class TaskController @Inject() (implicit val env: Environment[User, SessionAuthe
       val userOption: Option[User] = identity
       val streetEdgeId: Int = data.auditTask.streetEdgeId
       val missionId: Int = data.missionProgress.missionId
-      val currTime: Timestamp = new Timestamp(Instant.now.toEpochMilli)
+      val currTime: Timestamp = new Timestamp(data.timestamp)
 
       if (data.auditTask.auditTaskId.isDefined) {
         val priorityBefore: StreetEdgePriority = streetPrioritiesFromIds(List(streetEdgeId)).head
@@ -356,15 +356,15 @@ class TaskController @Inject() (implicit val env: Environment[User, SessionAuthe
       val env: EnvironmentSubmission = data.environment
       val taskEnv:AuditTaskEnvironment = AuditTaskEnvironment(0, auditTaskId, missionId, env.browser,
         env.browserVersion, env.browserWidth, env.browserHeight, env.availWidth, env.availHeight, env.screenWidth,
-        env.screenHeight, env.operatingSystem, Some(remoteAddress), env.language)
+        env.screenHeight, env.operatingSystem, Some(remoteAddress), env.language, env.cssZoom, Some(currTime))
       AuditTaskEnvironmentTable.save(taskEnv)
 
       // Insert Street View metadata.
       for (pano <- data.gsvPanoramas) {
         // Insert new entry to gsv_data table, or update the last_viewed column if we've already recorded it.
         if (GSVDataTable.panoramaExists(pano.gsvPanoramaId)) {
           GSVDataTable.updateFromExplore(pano.gsvPanoramaId, pano.lat, pano.lng, pano.cameraHeading,
-            pano.cameraPitch, false, currTime)
+            pano.cameraPitch, expired = false, currTime)
         } else {
           val gsvData: GSVData = GSVData(pano.gsvPanoramaId, pano.width, pano.height, pano.tileWidth, pano.tileHeight,
             pano.captureDate, pano.copyright, pano.lat, pano.lng, pano.cameraHeading, pano.cameraPitch, expired = false,

app/controllers/ValidationTaskController.scala

@@ -39,6 +39,7 @@ class ValidationTaskController @Inject() (implicit val env: Environment[User, Se
    */
   def processValidationTaskSubmissions(data: ValidationTaskSubmission, remoteAddress: String, identity: Option[User]) = {
     val userOption = identity
+    val currTime = new Timestamp(data.timestamp)
     ValidationTaskInteractionTable.saveMultiple(data.interactions.map { interaction =>
       ValidationTaskInteraction(0, interaction.missionId, interaction.action, interaction.gsvPanoramaId,
         interaction.lat, interaction.lng, interaction.heading, interaction.pitch, interaction.zoom, interaction.note,
@@ -49,7 +50,7 @@ class ValidationTaskController @Inject() (implicit val env: Environment[User, Se
     val env: EnvironmentSubmission = data.environment
     val taskEnv: ValidationTaskEnvironment = ValidationTaskEnvironment(0, env.missionId, env.browser,
       env.browserVersion, env.browserWidth, env.browserHeight, env.availWidth, env.availHeight, env.screenWidth,
-      env.screenHeight, env.operatingSystem, Some(remoteAddress), env.language)
+      env.screenHeight, env.operatingSystem, Some(remoteAddress), env.language, env.cssZoom, Some(currTime))
     ValidationTaskEnvironmentTable.save(taskEnv)
 
     // We aren't always submitting labels, so check if data.labels exists.

app/formats/json/TaskSubmissionFormats.scala

@@ -7,7 +7,7 @@ import scala.collection.immutable.Seq
 import play.api.libs.functional.syntax._
 
 object TaskSubmissionFormats {
-  case class EnvironmentSubmission(browser: Option[String], browserVersion: Option[String], browserWidth: Option[Int], browserHeight: Option[Int], availWidth: Option[Int], availHeight: Option[Int], screenWidth: Option[Int], screenHeight: Option[Int], operatingSystem: Option[String], language: String)
+  case class EnvironmentSubmission(browser: Option[String], browserVersion: Option[String], browserWidth: Option[Int], browserHeight: Option[Int], availWidth: Option[Int], availHeight: Option[Int], screenWidth: Option[Int], screenHeight: Option[Int], operatingSystem: Option[String], language: String, cssZoom: Int)
   case class InteractionSubmission(action: String, gsvPanoramaId: Option[String], lat: Option[Float], lng: Option[Float], heading: Option[Float], pitch: Option[Float], zoom: Option[Int], note: Option[String], temporaryLabelId: Option[Int], timestamp: Long)
   case class LabelPointSubmission(panoX: Int, panoY: Int, canvasX: Int, canvasY: Int, heading: Float, pitch: Float, zoom: Int, lat: Option[Float], lng: Option[Float], computationMethod: Option[String])
   case class LabelSubmission(gsvPanoramaId: String, auditTaskId: Int, labelType: String, deleted: Boolean, severity: Option[Int], temporary: Boolean, description: Option[String], tagIds: Seq[Int], point: LabelPointSubmission, temporaryLabelId:Int, timeCreated: Option[Long], tutorial: Boolean)
@@ -16,7 +16,7 @@ object TaskSubmissionFormats {
   case class GSVLinkSubmission(targetGsvPanoramaId: String, yawDeg: Double, description: String)
   case class GSVPanoramaSubmission(gsvPanoramaId: String, captureDate: String, width: Option[Int], height: Option[Int], tileWidth: Option[Int], tileHeight: Option[Int], lat: Option[Float], lng: Option[Float], cameraHeading: Option[Float], cameraPitch: Option[Float], links: Seq[GSVLinkSubmission], copyright: String)
   case class AuditMissionProgress(missionId: Int, distanceProgress: Option[Float], completed: Boolean, auditTaskId: Option[Int], skipped: Boolean)
-  case class AuditTaskSubmission(missionProgress: AuditMissionProgress, auditTask: TaskSubmission, labels: Seq[LabelSubmission], interactions: Seq[InteractionSubmission], environment: EnvironmentSubmission, incomplete: Option[IncompleteTaskSubmission], gsvPanoramas: Seq[GSVPanoramaSubmission], amtAssignmentId: Option[Int], userRouteId: Option[Int])
+  case class AuditTaskSubmission(missionProgress: AuditMissionProgress, auditTask: TaskSubmission, labels: Seq[LabelSubmission], interactions: Seq[InteractionSubmission], environment: EnvironmentSubmission, incomplete: Option[IncompleteTaskSubmission], gsvPanoramas: Seq[GSVPanoramaSubmission], amtAssignmentId: Option[Int], userRouteId: Option[Int], timestamp: Long)
   case class AMTAssignmentCompletionSubmission(assignmentId: Int, completed: Option[Boolean])
 
   implicit val pointReads: Reads[Point] = (
@@ -40,7 +40,8 @@ object TaskSubmissionFormats {
       (JsPath \ "screen_width").readNullable[Int] and
       (JsPath \ "screen_height").readNullable[Int] and
       (JsPath \ "operating_system").readNullable[String] and
-      (JsPath \ "language").read[String]
+      (JsPath \ "language").read[String] and
+      (JsPath \ "css_zoom").read[Int]
     )(EnvironmentSubmission.apply _)
 
   implicit val interactionSubmissionReads: Reads[InteractionSubmission] = (
@@ -135,7 +136,8 @@ object TaskSubmissionFormats {
       (JsPath \ "incomplete").readNullable[IncompleteTaskSubmission] and
       (JsPath \ "gsv_panoramas").read[Seq[GSVPanoramaSubmission]] and
       (JsPath \ "amt_assignment_id").readNullable[Int] and
-      (JsPath \ "user_route_id").readNullable[Int]
+      (JsPath \ "user_route_id").readNullable[Int] and
+      (JsPath \ "timestamp").read[Long]
     )(AuditTaskSubmission.apply _)
 
   implicit val amtAssignmentCompletionReads: Reads[AMTAssignmentCompletionSubmission] = (

app/formats/json/ValidationTaskSubmissionFormats.scala

@@ -7,12 +7,12 @@ import scala.collection.immutable.Seq
 import play.api.libs.functional.syntax._
 
 object ValidationTaskSubmissionFormats {
-  case class EnvironmentSubmission(missionId: Option[Int], browser: Option[String], browserVersion: Option[String], browserWidth: Option[Int], browserHeight: Option[Int], availWidth: Option[Int], availHeight: Option[Int], screenWidth: Option[Int], screenHeight: Option[Int], operatingSystem: Option[String], language: String)
+  case class EnvironmentSubmission(missionId: Option[Int], browser: Option[String], browserVersion: Option[String], browserWidth: Option[Int], browserHeight: Option[Int], availWidth: Option[Int], availHeight: Option[Int], screenWidth: Option[Int], screenHeight: Option[Int], operatingSystem: Option[String], language: String, cssZoom: Int)
   case class InteractionSubmission(action: String, missionId: Option[Int], gsvPanoramaId: Option[String], lat: Option[Float], lng: Option[Float], heading: Option[Float], pitch: Option[Float], zoom: Option[Float], note: Option[String], timestamp: Long, isMobile: Boolean)
   case class LabelValidationSubmission(labelId: Int, missionId: Int, validationResult: Int, canvasX: Option[Int], canvasY: Option[Int], heading: Float, pitch: Float, zoom: Float, canvasHeight: Int, canvasWidth: Int, startTimestamp: Long, endTimestamp: Long, source: String)
   case class SkipLabelSubmission(labels: Seq[LabelValidationSubmission])
   case class ValidationMissionProgress(missionId: Int, missionType: String, labelsProgress: Int, labelTypeId: Int, completed: Boolean, skipped: Boolean)
-  case class ValidationTaskSubmission(interactions: Seq[InteractionSubmission], environment: EnvironmentSubmission, labels: Seq[LabelValidationSubmission], missionProgress: Option[ValidationMissionProgress])
+  case class ValidationTaskSubmission(interactions: Seq[InteractionSubmission], environment: EnvironmentSubmission, labels: Seq[LabelValidationSubmission], missionProgress: Option[ValidationMissionProgress], timestamp: Long)
   case class LabelMapValidationSubmission(labelId: Int, labelType: String, validationResult: Int, canvasX: Option[Int], canvasY: Option[Int], heading: Float, pitch: Float, zoom: Float, canvasHeight: Int, canvasWidth: Int, startTimestamp: Long, endTimestamp: Long, source: String)
 
   implicit val environmentSubmissionReads: Reads[EnvironmentSubmission] = (
@@ -26,7 +26,8 @@ object ValidationTaskSubmissionFormats {
       (JsPath \ "screen_width").readNullable[Int] and
       (JsPath \ "screen_height").readNullable[Int] and
       (JsPath \ "operating_system").readNullable[String] and
-      (JsPath \ "language").read[String]
+      (JsPath \ "language").read[String] and
+      (JsPath \ "css_zoom").read[Int]
     )(EnvironmentSubmission.apply _)
 
   implicit val interactionSubmissionReads: Reads[InteractionSubmission] = (
@@ -72,8 +73,9 @@ object ValidationTaskSubmissionFormats {
     (JsPath \ "interactions").read[Seq[InteractionSubmission]] and
       (JsPath \ "environment").read[EnvironmentSubmission] and
       (JsPath \ "labels").read[Seq[LabelValidationSubmission]] and
-      (JsPath \ "missionProgress").readNullable[ValidationMissionProgress]
-    )(ValidationTaskSubmission.apply _) // .map(ValidationTaskSubmission(_))
+      (JsPath \ "missionProgress").readNullable[ValidationMissionProgress] and
+      (JsPath \ "timestamp").read[Long]
+    )(ValidationTaskSubmission.apply _)
 
   implicit val labelMapValidationSubmissionReads: Reads[LabelMapValidationSubmission] = (
     (JsPath \ "label_id").read[Int] and

app/models/audit/AuditTaskEnvironmentTable.scala

@@ -9,7 +9,7 @@ case class AuditTaskEnvironment(auditTaskEnvironmentId: Int, auditTaskId: Int, m
                                 browserVersion: Option[String], browserWidth: Option[Int], browserHeight: Option[Int],
                                 availWidth: Option[Int], availHeight: Option[Int], screenWidth: Option[Int],
                                 screenHeight: Option[Int], operatingSystem: Option[String], ipAddress: Option[String],
-                                language: String)
+                                language: String, cssZoom: Int, timestamp: Option[java.sql.Timestamp])
 
 class AuditTaskEnvironmentTable(tag: Tag) extends Table[AuditTaskEnvironment](tag, "audit_task_environment") {
   def auditTaskEnvironmentId = column[Int]("audit_task_environment_id", O.PrimaryKey, O.AutoInc)
@@ -26,9 +26,11 @@ class AuditTaskEnvironmentTable(tag: Tag) extends Table[AuditTaskEnvironment](ta
   def operatingSystem = column[Option[String]]("operating_system", O.Nullable)
   def ipAddress = column[Option[String]]("ip_address", O.Nullable)
   def language = column[String]("language", O.NotNull)
+  def cssZoom = column[Int]("css_zoom", O.NotNull)
+  def timestamp = column[Option[java.sql.Timestamp]]("timestamp", O.Nullable)
 
   def * = (auditTaskEnvironmentId, auditTaskId, missionId, browser, browserVersion, browserWidth, browserHeight,
-    availWidth, availHeight, screenWidth, screenHeight, operatingSystem, ipAddress, language) <> ((AuditTaskEnvironment.apply _).tupled, AuditTaskEnvironment.unapply)
+    availWidth, availHeight, screenWidth, screenHeight, operatingSystem, ipAddress, language, cssZoom, timestamp) <> ((AuditTaskEnvironment.apply _).tupled, AuditTaskEnvironment.unapply)
 
   def auditTask: ForeignKeyQuery[AuditTaskTable, AuditTask] =
     foreignKey("audit_task_environment_audit_task_id_fkey", auditTaskId, TableQuery[AuditTaskTable])(_.auditTaskId)

app/models/validation/ValidationTaskEnvironmentTable.scala

@@ -9,7 +9,7 @@ case class ValidationTaskEnvironment(validationTaskEnvironmentId: Int, missionId
                                 browserVersion: Option[String], browserWidth: Option[Int], browserHeight: Option[Int],
                                 availWidth: Option[Int], availHeight: Option[Int], screenWidth: Option[Int],
                                 screenHeight: Option[Int], operatingSystem: Option[String], ipAddress: Option[String],
-                                language: String)
+                                language: String, cssZoom: Int, timestamp: Option[java.sql.Timestamp])
 
 class ValidationTaskEnvironmentTable(tag: Tag) extends Table[ValidationTaskEnvironment](tag, "validation_task_environment") {
   def validationTaskEnvironmentId = column[Int]("validation_task_environment_id", O.PrimaryKey, O.AutoInc)
@@ -25,9 +25,11 @@ class ValidationTaskEnvironmentTable(tag: Tag) extends Table[ValidationTaskEnvir
   def operatingSystem = column[Option[String]]("operating_system", O.Nullable)
   def ipAddress = column[Option[String]]("ip_address", O.Nullable)
   def language = column[String]("language", O.NotNull)
+  def cssZoom = column[Int]("css_zoom", O.NotNull)
+  def timestamp = column[Option[java.sql.Timestamp]]("timestamp", O.Nullable)
 
   def * = (validationTaskEnvironmentId, missionId, browser, browserVersion, browserWidth, browserHeight, availWidth,
-    availHeight, screenWidth, screenHeight, operatingSystem, ipAddress, language) <> ((ValidationTaskEnvironment.apply _).tupled, ValidationTaskEnvironment.unapply)
+    availHeight, screenWidth, screenHeight, operatingSystem, ipAddress, language, cssZoom, timestamp) <> ((ValidationTaskEnvironment.apply _).tupled, ValidationTaskEnvironment.unapply)
 
   def mission: ForeignKeyQuery[MissionTable, Mission] =
     foreignKey("validation_task_environment_mission_id_fkey", missionId, TableQuery[MissionTable])(_.missionId)

app/views/main.scala.html

@@ -87,13 +87,17 @@
     }
     @if(url.get == "/explore") {
         <script type="text/javascript">
+            // Prevents extra whitespace at the bottom of the page, not sure why that's an issue.
             document.getElementsByTagName("body")[0].style.overflow = "hidden";
-            document.getElementById("wrap").style.padding = "0 0 35px";
         </script>
     }
-    @if(url.get == "/explore" || url.get == "/signInMobile" || url.get == "/signUpMobile") {
-        <!-- footer code found in app/views/footer.scala.html -->
-        @footer()
+    <!-- Trying out no footer on Explore or Validate. Mini footer on mobile sign in/up. Code is weird bc "else if" doesn't work in template scala rn. -->
+    @if(url.get == "/explore" || url.get == "/validate" || url.get == "/signInMobile" || url.get == "/signUpMobile") {
+        @if(url.get == "/explore" || url.get == "/validate") {
+        } else {
+            <!-- footer code found in app/views/footer.scala.html -->
+            @footer()
+        }
     } else {
         <div class="filler" style="position:relative;top: 0px;background-color:#fff; min-height:50px;"></div>
 

app/views/missionStartTutorial.scala.html

@@ -115,7 +115,7 @@
                         <div class="label-on-image-description"></div>
                     </div>
                 </div>
-                <div class="mts-text-area">
+                <div class="mst-text-area">
                     <div class="example-type-area">
                         <div class="example-type-icon">
                             <svg viewBox="0 0 24 24">

conf/evolutions/default/210.sql

@@ -0,0 +1,17 @@
+# --- !Ups
+ALTER TABLE audit_task_environment
+    ADD COLUMN css_zoom INT NOT NULL DEFAULT 100,
+    ADD COLUMN timestamp TIMESTAMPTZ;
+
+ALTER TABLE validation_task_environment
+    ADD COLUMN css_zoom INT NOT NULL DEFAULT 100,
+    ADD COLUMN timestamp TIMESTAMPTZ;
+
+# --- !Downs
+ALTER TABLE validation_task_environment
+    DROP COLUMN css_zoom,
+    DROP COLUMN timestamp;
+
+ALTER TABLE audit_task_environment
+    DROP COLUMN css_zoom,
+    DROP COLUMN timestamp;

public/javascripts/SVLabel/css/svl.css

@@ -83,11 +83,15 @@ input[type="radio"] {
     text-decoration: underline;
 }
 
+.tool-ui {
+    width: 1170px; /* Used to override bootstrap .container media queries. We want to keep a consistent width. */
+}
+
 #svl-application-holder {
     background: rgba(255,255,255,1);
     margin: 0 auto;
     position: relative;
-    height: 640px;
+    height: 610px;
     width: 960px;
 }
 

public/javascripts/SVLabel/src/SVLabel/Main.js

@@ -288,7 +288,7 @@ function Main (params) {
         //hide any alerts
         svl.alert.hideAlert();
         //hide footer
-        $("#mini-footer-audit").css("visibility", "hidden");
+        svl.ui.footer.css("visibility", "hidden");
 
         if (!onboardingHandAnimation) {
             onboardingHandAnimation = new HandAnimation(svl.rootDirectory, svl.ui.onboarding);
@@ -362,11 +362,11 @@ function Main (params) {
             $(".visible").css({"visibility": "visible"});
 
             if (mission.getProperty("missionType") === "auditOnboarding") {
-                $("#mini-footer-audit").css("visibility", "hidden");
+                svl.ui.footer.css("visibility", "hidden");
                 startOnboarding();
             } else {
                 _calculateAndSetTasksMissionsOffset();
-                $("#mini-footer-audit").css("visibility", "visible");
+                svl.ui.footer.css("visibility", "visible");
 
                 // Initialize explore mission screens focused on a randomized label type, though users can switch between them.
                 var currentNeighborhood = svl.neighborhoodContainer.getCurrentNeighborhood();
@@ -378,6 +378,13 @@ function Main (params) {
 
                 startTheMission(mission, currentNeighborhood);
             }
+
+            // Use CSS zoom to scale the UI for users with high resolution screens.
+            // Has only been tested on Chrome and Safari. Firefox doesn't support CSS zoom.
+            if (bowser.chrome || bowser.safari) {
+                svl.cssZoom = util.scaleUI();
+                window.addEventListener('resize', (e) => { svl.cssZoom = util.scaleUI(); });
+            }
         }
     }
 
@@ -581,6 +588,8 @@ function Main (params) {
         svl.ui.areaComplete.overlay = $("#area-completion-overlay-wrapper");
         svl.ui.areaComplete.title = $("#area-completion-title");
         svl.ui.areaComplete.body = $("#area-completion-body");
+
+        svl.ui.footer = $("#mini-footer-audit");
     }
 
     // Gets all the text on the explore page for the correct language.

public/javascripts/SVLabel/src/SVLabel/data/Form.js

@@ -30,7 +30,7 @@ function Form (labelContainer, missionModel, missionContainer, navigationModel,
      * @returns {{}}
      */
     this.compileSubmissionData = function (task) {
-        var data = {};
+        var data = { timestamp: new Date().getTime() };
 
         data.amt_assignment_id = svl.amtAssignmentId;
         data.user_route_id = svl.userRouteId;
@@ -70,7 +70,8 @@ function Form (labelContainer, missionModel, missionContainer, navigationModel,
             avail_width: screen.availWidth,              // total width - interface (taskbar)
             avail_height: screen.availHeight,            // total height - interface };
             operating_system: util.getOperatingSystem(),
-            language: i18next.language
+            language: i18next.language,
+            css_zoom: svl.cssZoom ? svl.cssZoom : 100
         };
 
         data.interactions = tracker.getActions();

public/javascripts/SVValidate/css/svv.css

@@ -6,6 +6,10 @@
     width: 960px;
 }
 
+.tool-ui {
+    width: 1170px; /* Used to override bootstrap .container media queries. We want to keep a consistent width. */
+}
+
 text {
     visibility: hidden;
 }