Improve Gallery and Increase Performance (#2)

* Show the label state of the videos. * Queried videos will not contain the ones that were shown to the same user before. * Improve the logic for Google sign-in. * Add the ability for researchers (client type 0) to filter and edit label states. * Rename files and refactor code. * Regenerate database migration due to model changes. * Update front-end website template. * Disable remote playback for videos. * Add more bounding boxes to the sample videos. * Fix a bug that an error message will occur after a failed video batch loading. * Set max page size for pagination. * Fix video playback problems on iPhone Safari (iPhone Safari only allows 16 video tags at once).
CMU-CREATE-Lab · Feb 12, 2019 · 735aa5b · 735aa5b
1 parent 269ac89
commit 735aa5b
Show file tree

Hide file tree

Showing 20 changed files with 1,088 additions and 431 deletions.
diff --git a/back-end/data/video_samples.json → back-end/data/video_samples/1.json b/back-end/data/video_samples.json → back-end/data/video_samples/1.json
diff --git a/back-end/www/add_community_videos.py b/back-end/www/add_community_videos.py
@@ -10,12 +10,12 @@
 video_size = 180
 
 # Get video samples
-with open("../data/video_samples.json") as f:
+with open("../data/video_samples/1.json") as f:
     video_samples = json.load(f)
 
 # The sun set and rise time in Pittsburgh
 # Format: [[Jan_sunrise, Jan_sunset], [Feb_sunrise, Feb_sunset], ...]
-pittsburgh_sun_table = [(8,17), (8,17), (8,19), (7,19), (6,20), (6,20), (6,20), (7,20), (7,19), (7,18), (8,17), (8,17)]
+pittsburgh_sun_table = [(8,16), (8,17), (8,18), (7,19), (6,19), (6,20), (6,19), (7,19), (7,18), (8,17), (8,16), (8,16)]
 
 def request_json(url):
     r = requests.get(url)

diff --git a/back-end/www/application.py b/back-end/www/application.py
diff --git a/...s/versions/92e30b99aea4_init_migration.py → ...s/versions/2731d42ed66e_init_migration.py b/...s/versions/92e30b99aea4_init_migration.py → ...s/versions/2731d42ed66e_init_migration.py
@@ -1,16 +1,16 @@
 """init migration
 
-Revision ID: 92e30b99aea4
+Revision ID: 2731d42ed66e
 Revises: 
-Create Date: 2019-01-23 17:27:11.635860
+Create Date: 2019-02-04 12:16:43.685955
 
 """
 from alembic import op
 import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
-revision = '92e30b99aea4'
+revision = '2731d42ed66e'
 down_revision = None
 branch_labels = None
 depends_on = None
@@ -65,7 +65,7 @@ def upgrade():
     sa.Column('label', sa.Integer(), nullable=False),
     sa.Column('time', sa.Integer(), nullable=False),
     sa.Column('user_id', sa.Integer(), nullable=False),
-    sa.Column('batch_id', sa.Integer(), nullable=False),
+    sa.Column('batch_id', sa.Integer(), nullable=True),
     sa.ForeignKeyConstraint(['batch_id'], ['batch.id'], name=op.f('fk_label_batch_id_batch')),
     sa.ForeignKeyConstraint(['user_id'], ['user.id'], name=op.f('fk_label_user_id_user')),
     sa.ForeignKeyConstraint(['video_id'], ['video.id'], name=op.f('fk_label_video_id_video')),

diff --git a/front-end/css/controls.css b/front-end/css/controls.css
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.1
+ * Version: v3.4
  * This CSS file has control elements that do not require JavaScript
  * If you want to keep this template updated, avoid modifying this file
  * Instead, add your own CSS in the index.css
@@ -140,6 +140,20 @@
   user-select: none;
 }
 
+.custom-button-flat.large {
+  font-size: 18px;
+  line-height: 18px;
+  padding: 17px;
+  border-radius: 56px;
+}
+
+.custom-button-flat.small {
+  font-size: 14px;
+  line-height: 14px;
+  padding: 12px;
+  border-radius: 42px;
+}
+
 .custom-button-flat:disabled {
   opacity: 0.4;
   cursor: default;
@@ -150,6 +164,16 @@
   height: 20px;
 }
 
+.custom-button-flat.small img {
+  width: 16px;
+  height: 16px;
+}
+
+.custom-button-flat.large img {
+  width: 24px;
+  height: 24px;
+}
+
 .custom-button-flat span {
   margin-left: 6px;
 }

diff --git a/front-end/css/custom.css b/front-end/css/custom.css
@@ -24,26 +24,27 @@ body,
   color: white !important;
 }
 
-.custom-button-flat {
-  font-size: 18px !important;
-  line-height: 18px !important;
-  padding: 17px !important;
-  border-radius: 56px !important;
+.text {
+  font-size: 18px;
 }
 
-.control-group {
-  margin-top: 10px !important;
+.text-small-margin {
+  font-size: 18px;
 }
 
-.text {
-  font-size: 18px;
+.user-text {
+  display: none;
 }
 
-.intro-text {
-  margin-top: 0 !important;
+.admin-text {
+  display: none;
+}
+
+.admin-control {
+  display: none;
 }
 
-.label-text {
+.no-top-margin {
   margin-top: 0 !important;
 }
 
@@ -150,15 +151,19 @@ body,
 }
 
 .custom-text-info-dark-theme {
-  color: #3be4ff;
+  color: #3be4ff !important;
+}
+
+.custom-text-primary-dark-theme {
+  color: #41ff3b !important;
 }
 
 .custom-text-danger-dark-theme {
-  color: #ff5e5e;
+  color: #ff5e5e !important;
 }
 
 .gallery-no-data-text {
-  color: #3be4ff;
+  color: #3be4ff !important;
   text-align: center;
   flex: 1 0 100%;
   max-width: 100%;
@@ -167,7 +172,7 @@ body,
 }
 
 .gallery-error-text {
-  color: #ff5e5e;
+  color: #ff5e5e !important;
   text-align: center;
   flex: 1 0 100%;
   max-width: 100%;
@@ -179,6 +184,59 @@ body,
   min-height: 150px;
 }
 
+.gallery a {
+  position: relative;
+}
+
+.gallery a>i {
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: bold;
+  position: absolute;
+  bottom: 10px;
+  right: 17px;
+}
+
+.gallery a .label-control {
+  color: white;
+  text-align: left;
+}
+
+.gallery a .label-control p {
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
+  font-size: 14px;
+  line-height: 14px;
+  font-style: normal;
+  font-weight: normal;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.gallery a .label-control i {
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
+  font-size: 14px;
+  line-height: 14px;
+  font-style: normal;
+  font-weight: normal;
+  width: 100%;
+}
+
+.custom-select {
+  margin: 5px 0;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  width: 100%;
+  height: 39px;
+  text-indent: 5px;
+}
+
+.custom-select:focus {
+  outline: none;
+}
+
 .gallery-videos {
   display: flex;
   flex-direction: row;

diff --git a/front-end/css/frame.css b/front-end/css/frame.css
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.1
+ * Version: v3.4
  * This CSS file is for the website frame
  * If you want to keep this template updated, avoid modifying this file
  * Instead, add your own CSS in the index.css
@@ -45,6 +45,14 @@ h2 {
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 }
 
+h3 {
+  font-size: 18px;
+  margin: 10px 0 0 0;
+  padding: 0;
+  font-weight: bold;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+}
+
 ul {
   margin: 10px 0 10px 0;
 }
@@ -501,10 +509,18 @@ ol.publication.A-list li p:before {
   margin-top: 15px;
 }
 
+.add-top-margin-small {
+  margin-top: 5px;
+}
+
 .add-bottom-margin {
   margin-bottom: 15px;
 }
 
+.add-bottom-margin-small {
+  margin-bottom: 5px;
+}
+
 .custom-text-info,
 .custom-text-info p,
 .custom-text-info a {
@@ -561,8 +577,8 @@ ol.publication.A-list li p:before {
   user-select: none;
 }
 
-.gallery a img,
-.gallery a video {
+.gallery a>img,
+.gallery a>video {
   border-radius: 2px;
   width: 100%;
   background-image: url(../img/loading.gif);
@@ -577,9 +593,6 @@ ol.publication.A-list li p:before {
   text-align: center;
 }
 
-/********************************************************************************
-The @media part need to be put at the end to override all previous css
-********************************************************************************/
 @media screen and (min-width: 900px) {
   .flex-item-stretch {
     flex: 1;

diff --git a/front-end/css/widgets.css b/front-end/css/widgets.css
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.1
+ * Version: v3.4
  * This CSS file has widgets for building interactive web applications
  * Use this file with widgets.js
  * If you want to keep this template updated, avoid modifying this file
@@ -301,11 +301,12 @@
 }
 
 .custom-dialog-flat .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   border: 1px solid #7d7d7d;
   background: #7d7d7d none;
   color: white;
   border-radius: 2px;
-  margin: 0 0 0 0.7em;
+  margin: 0 0 0 1em;
   outline: none;
 }
 

diff --git a/front-end/gallery.html b/front-end/gallery.html
@@ -18,7 +18,15 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="lib/pagination/pagination.js"></script>
   <script src="js/widgets.js"></script>
+  <script src="js/GoogleAnalyticsTracker.js"></script>
+  <script src="js/GoogleAccountDialog.js"></script>
+  <script src="js/VideoTestDialog.js"></script>
   <script src="js/gallery.js"></script>
+  <!-- Start for Google Sign-In -->
+  <meta name="google-signin-scope" content="profile email">
+  <meta name="google-signin-client_id" content="231059631125-7purhi103qml7hapjnetmrmcrr4jff0f.apps.googleusercontent.com">
+  <script src="https://apis.google.com/js/platform.js"></script>
+  <!-- End for Google Sign-In -->
 </head>
 
 <body>
@@ -43,18 +51,38 @@
       <div class="content-table flex-column">
         <div class="flex-row">
           <div class="flex-item flex-column">
-            <p class="text intro-text">
-              We greatly appreciate the efforts taken by the community to find smoke emissions from monitoring cameras. These are the <span class="custom-text-info-dark-theme">smoke videos</span> labeled by using this tool.
+            <p class="text intro-text no-top-margin">
+              We greatly appreciate the efforts taken by the community to find smoke emissions from monitoring cameras.
+              These are the <span class="custom-text-info-dark-theme">smoke videos</span> labeled by using this tool.
             </p>
+            <p class="text user-text no-top-margin">
+              The following smoke videos were identified by you.
+              Symbol <span class="custom-text-info-dark-theme">"?"</span> on the bottom-right corner means that the video has not been confirmed by others.
+              Symbol <span class="custom-text-primary-dark-theme">"Y"</span> and <span class="custom-text-danger-dark-theme">"N"</span> means that others agreed or disagreed with your findings respectively.
+            </p>
+            <p class="text-small-margin admin-text no-top-margin">
+              You logged in as a <span class="custom-text-info-dark-theme">system administrator</span>.
+              The gallery is displayed in the admin mode.
+            </p>
+            <div class="control-group admin-control add-bottom-margin">
+              <a class="custom-button-flat" href="?method=get_pos_labels">Pos</a>
+              <a class="custom-button-flat" href="?method=get_neg_labels">Neg</a>
+              <a class="custom-button-flat" href="?method=get_pos_gold_labels">Gold Pos</a>
+              <a class="custom-button-flat" href="?method=get_neg_gold_labels">Gold Neg</a>
+              <a class="custom-button-flat" href="?method=get_partial_labels">Partial</a>
+              <a class="custom-button-flat" href="?method=get_bad_labels">Bad</a>
+            </div>
           </div>
         </div>
-        <div class="gallery"><div class="gallery-videos"></div></div>
+        <div class="gallery">
+          <div class="gallery-videos"></div>
+        </div>
         <div class="flex-row">
           <div class="flex-item flex-column full-width">
-            <div id="page-control" class="control-group init-hidden">
-              <button id="page-back" class="custom-button-flat stretch-on-mobile" disabled><img src="img/back.png"><span>Back</span></button>
+            <div id="page-control" class="control-group add-top-margin init-hidden">
+              <button id="page-back" class="custom-button-flat large stretch-on-mobile" disabled><img src="img/back.png"><span>Back</span></button>
               <div id="page-navigator" class="stretch-on-mobile"></div>
-              <button id="page-next" class="custom-button-flat stretch-on-mobile"><img src="img/next.png"><span>Next</span></button>
+              <button id="page-next" class="custom-button-flat large stretch-on-mobile"><img src="img/next.png"><span>Next</span></button>
             </div>
           </div>
         </div>
@@ -65,6 +93,9 @@
     <p>Videos on this page did not autoplay. Please enable it.</p>
     <button id="play-video-button" class="custom-button">Enable video autoplay</button>
   </div>
+  <div id="set-label-confirm-dialog" title="Set Label" data-role="none">
+    <p></p>
+  </div>
 </body>
 
 </html>
diff --git a/front-end/img/back.png b/front-end/img/back.png
diff --git a/front-end/img/close.png b/front-end/img/close.png
diff --git a/front-end/img/setting.png b/front-end/img/setting.png