#321 vertical indication

Former-commit-id: ba3beed68c1f6ddd3a3a5e57fd8df98afde9d57b

5 files changed, 516 insertions, 695 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 8efb5d24..9fb19658 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1,200 +1,153 @@
 @font-face {
     font-family: 'fontawesome';
-    src:url('../lib/font-awesome/fonts/fontawesome-webfont.eot');
-    src:url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
-        url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),
-        url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'),
-        url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
+    src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot');
+    src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
     font-weight: normal;
     font-style: normal;
 }
-
 .icon-super-speed:before {
     font-family: "fontawesome";
     content: "\f135";
 }
-
-
 .icon-normal-speed:before {
     font-family: "fontawesome";
     content: "\f1b9";
 }
-
 .icon-faster:before {
     font-family: "fontawesome";
     content: "\f101";
 }
-
-
-
 .icon-slower:before {
     font-family: "fontawesome";
     content: "\f100";
 }
-
-
-.image-loader-container
-{
-    position:relative;
-    width:100%;
-    height:100%;
+.image-loader-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
-
-image-loader
-{
-    position:absolute;
-    top:50%;
-    left:50%;
-    z-index:999;
+image-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 999;
 }
-
-
 .vis-time-axis .grid.vis-odd {
     background: #f5f5f5;
-  }
-
-.my-vis-font
-{
-    font-size:10px;
 }
-
+.my-vis-font {
+    font-size: 10px;
+}
 .my-vis-buttons {
-            position: absolute;
-            top: 0;
-            right: 0;
-            margin: 10px;
-            z-index: 9999;
-        }
-
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 10px;
+    z-index: 9999;
+}
 ion-popover-view.fit {
-  height: auto;
+    height: auto;
 }
-
 ion-popover-view.fit ion-content {
-  position: relative;
+    position: relative;
 }
-
 .platform-android ion-popover-view.fit {
-  margin-top: 10px;
+    margin-top: 10px;
 }
-
 .platform-ios ion-popover-view.fit {
-  padding-top: 10px;
-  padding-bottom: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 /* Using this for full screen modals for event and monitor mode */
-.modal{
-  top: 0 ;
-  bottom: 0 ;
-  left: 0 ;
-  right: 0 ;
-  width: 100%
-}
-
-
-
 
+.modal {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%
+}
 
 /* I am using flexboxes to dynamicall adapt content
 in montage view.
 Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */
+
 .wrapper {
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-    
     -webkit-flex-flow: row wrap;
     flex-flow: row wrap;
-    
     font-weight: normal;
     text-align: left;
-    flex-wrap:wrap;
-
+    flex-wrap: wrap;
 }
-
 .wrapper > * {
     /*padding: 5px;*/
     /*flex: 1 100%; -- I commented this out - the wrapper was taking up full width in Chrome*/
 }
-
 .header {
     background: #333333;
-    color:#cccccc;
+    color: #cccccc;
     border-color: #444444;
-     border-style: solid;
-    border-width:1px;
-    opacity:80%;
+    border-style: solid;
+    border-width: 1px;
+    opacity: 80%;
 }
-
 .header-event-id {
     background: #9b59b6;
-    color:#cccccc;
+    color: #cccccc;
     border-color: #9b59b6;
-     border-style: solid;
-    border-width:1px;
-    opacity:80%;
+    border-style: solid;
+    border-width: 1px;
+    opacity: 80%;
 }
-
-
 .header-paused {
     background: #ba3e3e;
-    color:#cccccc;
+    color: #cccccc;
     border-color: #ba3e3e;
-     border-style: solid;
-    border-width:1px;
-    opacity:80%;
+    border-style: solid;
+    border-width: 1px;
+    opacity: 80%;
     transform: translate(-50%, -50%);
-    
 }
-
-
-
-
 .alarmed-header {
     background: #ba3e3e;
-    color:#ffffff;
+    color: #ffffff;
     border-color: #ba3e3e;
-     border-style: solid;
-    border-width:1px;
-    opacity:80%;
-    
+    border-style: solid;
+    border-width: 1px;
+    opacity: 80%;
 }
-
 .minimized-alarmed-header {
     background: #ba3e3e;
-    color:#ffffff;
+    color: #ffffff;
     border-color: #ba3e3e;
-     border-style: solid;
-    border-width:5px;
-    opacity:80%;
-    position:absolute;
-    top:0px;
-    left:0px;
-    width:100%;
-    
+    border-style: solid;
+    border-width: 5px;
+    opacity: 80%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
 }
-
-#slowpulse
-{
+#slowpulse {
     -webkit-animation-duration: 1500ms;
 }
 .alarmed-body {
     border-left: thick solid #ba3e3e;
-    
 }
-
 .alarmed-footer {
     background: #ba3e3e;
-    border-color:#ba3e3e;
-    color:#ffffff;
-     border-width:1px;
+    border-color: #ba3e3e;
+    color: #ffffff;
+    border-width: 1px;
     /*padding:2px;*/
 }
-
 .main {
     text-align: center;
     /*background: #5a5a5a;*/
@@ -203,21 +156,15 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     padding: 0px;
     /*padding:2px;*/
 }
-
 .aside-1 {
     background: gold;
 }
-
 .aside-2 {
     background: hotpink;
 }
-
-
 figure {
-     position: relative;
-    
+    position: relative;
 }
-
 figure img {
     display: block;
     width: 100%;
@@ -226,58 +173,49 @@ figure img {
 figcaption {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space:nowrap;
-    
+    white-space: nowrap;
 }
-
 .normal-figcaption {
-    background: rgba(0,0,0,0.2);
+    background: rgba(0, 0, 0, 0.2);
     color: #FFF;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    opacity:1;
-    
+    opacity: 1;
 }
-
 .alarmed-figcaption {
-    
     background: #ba3e3e;
-    color:#ffffff;
-    position:absolute;
+    color: #ffffff;
+    position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    opacity:0.7;
-    
-
+    opacity: 0.7;
 }
 
-
-
-
 /* modified from:
 http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
 
 .notification-badge {
-		position:relative;
-	}
-	.notification-badge[data-badge]:after {
-		content:attr(data-badge);
-		position:absolute;
-		top:-3px;
-		left:18px;
-		font-size:9px;
-		background:crimson;
-		color:white;
-		width:22px;height:17px;
-		text-align:center;
-		line-height:17px;
-		border-radius:40%;
-        font-weight:bold;
-        
-	}
+    position: relative;
+}
+.notification-badge[data-badge]:after {
+    content: attr(data-badge);
+    position: absolute;
+    top: -3px;
+    left: 18px;
+    font-size: 9px;
+    background: crimson;
+    color: white;
+    width: 22px;
+    height: 17px;
+    text-align: center;
+    line-height: 17px;
+    border-radius: 40%;
+    font-weight: bold;
+}
+
 /*
 .notification-badge{
   
@@ -290,26 +228,23 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
   font-size: 8px;
 }*/
 
-
 .missingnetwork {
-  position: fixed; /* or absolute */
-  bottom: 95%;
-  right: 95%;
-  transform: translate(-50%, -50%);
+    position: fixed;
+    /* or absolute */
+    bottom: 95%;
+    right: 95%;
+    transform: translate(-50%, -50%);
 }
-
 .ptzcentered {
-  position: fixed; /* or absolute */
-  top: 50%;
-  left: 50%;
+    position: fixed;
+    /* or absolute */
+    top: 50%;
+    left: 50%;
     transform: translate(-50%, -50%);
 }
-
 .timeline_text {
-    text-align:center;
-    color:white;
-    
-    
+    text-align: center;
+    color: white;
 }
 
 /* // not using for now, may come in handy later
@@ -321,286 +256,250 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     transform: translate(-50%, -50%);
 }*/
 
-.ptzcenteredbotbutton
-{
+.ptzcenteredbotbutton {
     position: absolute;
-    top: 80%; 
-    left:50%;
+    top: 80%;
+    left: 50%;
     transform: translate(-50%, -50%);
 }
-
-.ptzpresetbuttons
-{
+.ptzpresetbuttons {
     position: absolute;
     top: 5%;
     left: 10%;
     width: 80%;
-    
-   
 }
-
-
 .timelinebuttons {
-  position: fixed; /* or absolute */
-  bottom:130px;
-  left: 50%;
-   transform: translate(-50%, -50%);
-    z-index:99999;
+    position: fixed;
+    /* or absolute */
+    bottom: 130px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 99999;
 }
-
-.eventprogress
-{
-    position:absolute;
+.eventprogress {
+    position: absolute;
     -webkit-transform: rotate(-90deg) translateY(-1000%);
     -webkit-transform-origin: 100% 0%;
     -moz-transform: rotate(-90deg);
     top: 50%;
-    margin-top:-50px;
-    left:100%;
-    margin-left:-15px;
-    z-index:10;
-    width:100px;
-
+    margin-top: -50px;
+    left: 100%;
+    margin-left: -15px;
+    z-index: 10;
+    width: 100px;
 }
-
-.camera-icon
-{
-    position:absolute;
-    bottom:20px;
-    left:10px;
-    z-index:10;
-    opacity:0.7;
+.camera-icon {
+    position: absolute;
+    bottom: 20px;
+    left: 10px;
+    z-index: 10;
+    opacity: 0.7;
 }
-
-.desktop-zoom-icon
-{
-    position:absolute;
-    bottom:20px;
-    left:70px;
-    z-index:10;
-    opacity:0.7;
+.desktop-zoom-icon {
+    position: absolute;
+    bottom: 20px;
+    left: 70px;
+    z-index: 10;
+    opacity: 0.7;
 }
-
-.modal-alarm-badge
-{
-    position:absolute;
-    bottom:20px;
+.modal-alarm-badge {
+    position: absolute;
+    bottom: 20px;
     left: 100px;
-    
-    z-index:10;
-    opacity:0.7;
+    z-index: 10;
+    opacity: 0.7;
 }
-
-
-.event-modal-alarm-badge
-{
-    position:absolute;
-    
+.event-modal-alarm-badge {
+    position: absolute;
     left: 10px;
-    bottom:10px;
-    z-index:10;
-    opacity:1;
+    bottom: 10px;
+    z-index: 10;
+    opacity: 1;
 }
-
-
-.events-modal-gapless-icon
-{
-    position:absolute;
-    bottom:120px;
-    left:20px;
-    z-index:10;
-    opacity:0.5;
+.events-modal-gapless-icon {
+    position: absolute;
+    bottom: 120px;
+    left: 20px;
+    z-index: 10;
+    opacity: 0.5;
 }
-
-.popup80 .popup
-{
-    width:80% !important;
+.popup80 .popup {
+    width: 80% !important;
 }
-
-.popup90 .popup
-{
-    width:90% !important;
+.popup90 .popup {
+    width: 90% !important;
 }
-
-.popup95 .popup
-{
-    width:95% !important;
+.popup95 .popup {
+    width: 95% !important;
 }
-
-.events-modal-camera-icon
-{
-    position:absolute;
-    bottom:120px;
-    left:110px;
-    z-index:10;
-    opacity:0.5;
+.events-modal-camera-icon {
+    position: absolute;
+    bottom: 120px;
+    left: 110px;
+    z-index: 10;
+    opacity: 0.5;
 }
-
-.events-modal-onlyalarms-icon
-{
-    position:absolute;
-    bottom:120px;
-    left:140px;
-    z-index:10;
-    opacity:0.5;
+.events-modal-onlyalarms-icon {
+    position: absolute;
+    bottom: 120px;
+    left: 140px;
+    z-index: 10;
+    opacity: 0.5;
 }
-.events-range
-{
-    position:absolute;
-    bottom:20px;
-    left:30px;
-    z-index:10;
-    opacity:0.7;
-    width:70%;
+.events-range {
+    position: absolute;
+    bottom: 20px;
+    left: 30px;
+    z-index: 10;
+    opacity: 0.7;
+    width: 70%;
 }
-
-
-.events-range-modal
-{
-    position:absolute;
-    bottom:30px;
-    left:30px;
-    z-index:99;
-    opacity:1;
-    width:70%;
+.events-range-modal {
+    position: absolute;
+    bottom: 30px;
+    left: 30px;
+    z-index: 99;
+    opacity: 1;
+    width: 70%;
 }
-
-.events-range-modal-text 
-{
-   
-    position:absolute;
-    top:20px;
-    font-size:80%;
-    line-height:100%;
-    
+.events-range-modal-text {
+    position: absolute;
+    top: 20px;
+    font-size: 80%;
+    line-height: 100%;
     left: 50%;
     transform: translate(-50%, 0%);
-    z-index:10;
-    opacity:0.7;
-    color:white;
+    z-index: 10;
+    opacity: 0.7;
+    color: white;
     background-color: black;
     border-radius: 5px 5px 5px 5px;
-    padding-left:3px;
-    padding-right:3px;
-    
+    padding-left: 3px;
+    padding-right: 3px;
 }
-
-
-.monitor-modal-text 
-{
-    position:absolute;
-    bottom:30px;
-    
+.monitor-modal-text {
+    position: absolute;
+    bottom: 30px;
     left: 50%;
     transform: translate(-50%, 0%);
-    z-index:10;
-    opacity:0.7;
-    color:white;
+    z-index: 10;
+    opacity: 0.7;
+    color: white;
     background-color: black;
     border-radius: 5px 5px 5px 5px;
-    padding-left:3px;
-    padding-right:3px;
-    
+    padding-left: 3px;
+    padding-right: 3px;
 }
-
-.events-alarm-line
-{
-
+.events-alarm-line {
     position: relative;
     bottom: 1px;
     left: 0px;
     width: 100%;
     border-top: 1px solid black;
-
 }
-
-.events-float-filter
-{
+.bwmode {
     position: absolute;
-    top: 50%;
-    right:-12px;
-
-    color:#fff;
-    background-color:#b47226;
+    top: 30%;
+    right: -28px;
+    opacity: 0.7;
+    background-color: #f1c40f;
+    color: #000;
+    font-size: 11px;
     border-radius: 0px 0px 5px 5px;
-    font-size:11px;
-
-    padding-left:3px;
-    padding-right:3px;
-    opacity:0.7;
-
-
-   z-index:99999;
-
-     -webkit-transform: rotate(90deg);
+    z-index: 99999;
+    padding-left: 3px;
+    padding-right: 3px;
+    -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
 }
 
-.events-filter-on
-{
-  position: absolute;
-  left: 50%;
-
-  transform: translate(-50%, 0);
-  opacity:0.7;
-  border-radius: 0px 0px 5px 5px;
-  margin-top:-18px;
-  background-color:#b47226;
-  padding-left:6px;
-  padding-right:6px;
-  color:#fff;
- font-size:11px;
 
+.events-float-filter {
+    position: absolute;
+    top: 50%;
+    right: -12px;
+    color: #fff;
+    background-color: #b47226;
+    border-radius: 0px 0px 5px 5px;
+    font-size: 11px;
+    padding-left: 3px;
+    padding-right: 3px;
+    opacity: 0.7;
+    z-index: 99999;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+.events-filter-on {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    opacity: 0.7;
+    border-radius: 0px 0px 5px 5px;
+    margin-top: -18px;
+    background-color: #b47226;
+    padding-left: 6px;
+    padding-right: 6px;
+    color: #fff;
+    font-size: 11px;
 }
 
 /* Styling of progress bar
 http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
 */
-
-progress,          /* All HTML5 progress enabled browsers */
-progress[role]     /* polyfill */
+progress,
+/* All HTML5 progress enabled browsers */
+progress[role]/* polyfill */
 {
-
-	/* Turns off styling - not usually needed, but good to know. */
-	appearance: none;
-	-moz-appearance: none;
-	-webkit-appearance: none;
-
-	/* gets rid of default border in Firefox and Opera. */
-	border: none;
-
-	/* Needs to be in here for Safari polyfill so background images work as expected. */
-	background-size: auto;
-    height:10px;
-
+    /* Turns off styling - not usually needed, but good to know. */
+    
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    /* gets rid of default border in Firefox and Opera. */
+    
+    border: none;
+    /* Needs to be in here for Safari polyfill so background images work as expected. */
+    
+    background-size: auto;
+    height: 10px;
 }
 
 /* Polyfill */
 progress[role]:after {
-	background-image: none; /* removes default background from polyfill */
+    background-image: none;
+    /* removes default background from polyfill */
 }
 
 /* Ensure fallback text doesn't appear in polyfill */
 progress[role] strong {
-	display: none;
+    display: none;
 }
 
 /* ----------------- progress background start ------------------*/
-progress,                          /* Firefox  */
-progress[role][aria-valuenow] {    /* Polyfill */
-   background: #aaaaaa !important; /* !important is needed by the polyfill */
+progress,
+/* Firefox  */
+progress[role][aria-valuenow] {
+    /* Polyfill */
+    
+    background: #aaaaaa !important;
+    /* !important is needed by the polyfill */
 }
 
 /* Chrome */
 progress::-webkit-progress-bar {
     background: #aaaaaa;
 }
+
 /* ----------------- progress background start ------------------*/
 
 /* ----------------- progress bar color start ------------------*/
+
 /* IE10 */
 progress {
     color: #f1a165;
@@ -617,490 +516,396 @@ progress::-webkit-progress-value {
 }
 
 /* Polyfill */
-progress[aria-valuenow]:before  {
+progress[aria-valuenow]:before {
     background: #f1a165;
 }
-/* ----------------- progress bar color end ------------------*/
-
 
-.rotate-button
-{
+/* ----------------- progress bar color end ------------------*/
+.rotate-button {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
 }
-
-
-.zm-image-fit
-{
+.zm-image-fit {
     max-width: 100%;
     max-height: 100%;
 }
-
-.zm-image-crop
-{
-    width:100%;
+.zm-image-crop {
+    width: 100%;
 }
 
-
 /*
 
 .object-fit_cover { object-fit: cover; width:100%; height:auto;}
 .object-fit_contain { object-fit: contain; max-width:100%; height:auto; }
 */
-
-
-.object-fit_cover { object-fit: cover; width:100%; height:auto;}
-.object-fit_contain { object-fit: contain; max-width:100%; max-height:100%; }
-
+.object-fit_cover {
+    object-fit: cover;
+    width: 100%;
+    height: auto;
+}
+.object-fit_contain {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+}
 .list .item.item-accordion {
-  line-height: 200px;
-  padding-top: 0;
-  padding-bottom: 0;
-  transition: 3s all linear;
+    line-height: 200px;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: 3s all linear;
 }
 .list .item.item-accordion.ng-hide {
-  line-height: 0px;
+    line-height: 0px;
 }
 .list .item.item-accordion.ng-hide-add,
 .list .item.item-accordion.ng-hide-remove {
-  display: block !important;
+    display: block !important;
 }
-
 ul[rn-carousel] > li {
-  position: relative;
-  margin-left: -100%;
+    position: relative;
+    margin-left: -100%;
 }
-
 ul[rn-carousel] > li:first-child {
-  margin-left: 0;
+    margin-left: 0;
 }
-
 ul[rn-carousel] img {
-  max-width: 100%;
-}
-
-
-.content-banner .content-banner-close
-{
-    margin-top:-5px;
+    max-width: 100%;
 }
-
-.mySliderClass.jslider.sliderCSS div.jslider-pointer{
-left:50%;
-width:30px;
-height:30px;
-opacity:0.5;
-background-color:#615959;
-border-radius:50%;
-margin-left:-3px;
-margin-top:-8px;
+.content-banner .content-banner-close {
+    margin-top: -5px;
 }
-
-.mySliderClass div.jslider-scale ins
-{
-    color:red;
+.mySliderClass.jslider.sliderCSS div.jslider-pointer {
+    left: 50%;
+    width: 30px;
+    height: 30px;
+    opacity: 0.5;
+    background-color: #615959;
+    border-radius: 50%;
+    margin-left: -3px;
+    margin-top: -8px;
+}
+.mySliderClass div.jslider-scale ins {
+    color: red;
     /*background-color:red;
     border-radius:5%;
     line-height:5px;*/
 }
-
-.mySliderClass div.jslider-value
-{
-    position:absolute;
-    top:-29px;
-    left:0;padding:1px 2px 0;
-    background:#fff;font-size:9px;
-    line-height:12px;
-    white-space:nowrap;
-    -moz-border-radius:2px;
-    -webkit-border-radius:2px;
-    -o-border-radius:2px;
-    border-radius:2px
+.mySliderClass div.jslider-value {
+    position: absolute;
+    top: -29px;
+    left: 0;
+    padding: 1px 2px 0;
+    background: #fff;
+    font-size: 9px;
+    line-height: 12px;
+    white-space: nowrap;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -o-border-radius: 2px;
+    border-radius: 2px
 }
-
-
 input[type=range]::-webkit-slider-thumb {
-
-
-  background: #2980b9;
-
+    background: #2980b9;
 }
 
 /* this is for input = password and dialog = text */
 .pinCode input[type=number] {
     -webkit-text-security: disc;
 }
-
-
-.pinCode input[type=number]{
+.pinCode input[type=number] {
     height: 50px;
-    width:200px;
+    width: 200px;
     text-align: center;
     font-size: 2em;
     border: 1px solid #ddd;
     -webkit-appearance: none;
-} 
-
-
-.pin-background.scroll-content
- {
+}
+.pin-background.scroll-content {
     /*background: url('../img/background.png') no-repeat center center fixed;*/
+    
     background-size: cover;
-    background-color:#555555;
+    background-color: #555555;
     /*background-color:#16a085;*/
-    
 }
-
-#responsive-image{
-  width: 65%;
-  margin: 0 auto;
+#responsive-image {
+    width: 65%;
+    margin: 0 auto;
 }
-#responsive-image img{
-  width: 100%
-    
+#responsive-image img {
+    width: 100%
 }
 
 /* to avoid padding on delete in event list */
 .item-content {
     padding-right: 16px !important;
 }
-
-.eventDeleteSpeed
-{
+.eventDeleteSpeed {
     -webkit-animation-duration: 300ms;
 }
-
-
-.content-banner.alarm
-{
+.content-banner.alarm {
     background-color: forestgreen;
-    color:white;
-   
+    color: white;
 }
-
-.content-banner.net
-{
+.content-banner.net {
     background-color: #9b59b6;
-    color:white;
+    color: white;
 }
 
 /* This accordion list is used for event server monitor filter
  * http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
  */
 .list .item.item-accordion {
-  line-height: 45px;
-  padding-top: 0;
-  padding-bottom: 0;
-  transition: 0.09s all linear;
+    line-height: 45px;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: 0.09s all linear;
 }
 .list .item.item-accordion.ng-hide {
-  line-height: 0px;
+    line-height: 0px;
 }
 .list .item.item-accordion.ng-hide-add,
 .list .item.item-accordion.ng-hide-remove {
-  display: block !important;
+    display: block !important;
 }
-
 .custom-list i {
-  float: right;
+    float: right;
 }
 
-
-
 /* This is for quick scrub for H264 */
 .videogular-container {
-	height: 260px;
-    
-	margin: auto;
-	overflow: hidden;
-    float:left;
+    height: 260px;
+    margin: auto;
+    overflow: hidden;
+    float: left;
 }
-
-
 .videogular-full-container {
-	height:80%;
-    
-    z-index:100;
-    float:center;
-    
-	margin: auto;
-	overflow: hidden;
-    
+    height: 80%;
+    z-index: 100;
+    float: center;
+    margin: auto;
+    overflow: hidden;
 }
-
-
-
-
 #full-screen-event {
-  -webkit-animation-duration: 200ms;
-  
+    -webkit-animation-duration: 200ms;
 }
-
-#monitorimage
-{
-     -webkit-animation-duration: 200ms;
+#monitorimage {
+    -webkit-animation-duration: 200ms;
 }
-
-#firstuse
-{
+#firstuse {
     -webkit-animation-delay: 1s;
 }
-
-#transition-delay
-{
+#transition-delay {
     -webkit-animation-delay: 1s;
 }
 
 /* packery stuff */
-
-
-
-* { box-sizing: border-box; } 
-
-body { font-family: sans-serif; }
+* {
+    box-sizing: border-box;
+}
+body {
+    font-family: sans-serif;
+}
 
 /* ---- grid ---- */
-
-
-.dragborder
-{
-    border:2px dotted #3498db;
+.dragborder {
+    border: 2px dotted #3498db;
 }
-
-.dragborder-selected
-{
-    border:4px solid #e74c3c;
+.dragborder-selected {
+    border: 4px solid #e74c3c;
+}
+.grid-sizer {
+    width: 10%;
+}
+.grid-item {
+    width: 20%;
+}
+.grid-item-10 {
+    width: 10%;
+}
+.grid-item-20 {
+    width: 20%;
+}
+.grid-item-30 {
+    width: 30%;
+}
+.grid-item-40 {
+    width: 40%;
+}
+.grid-item-50 {
+    width: 50%;
+}
+.grid-item-60 {
+    width: 60%;
+}
+.grid-item-70 {
+    width: 70%;
+}
+.grid-item-80 {
+    width: 80%;
+}
+.grid-item-90 {
+    width: 90%;
+}
+.grid-item-100 {
+    width: 100%;
 }
-
-
-.grid-sizer {width:10%; }
-.grid-item { width: 20%; }
-.grid-item-10 {width: 10%; }
-.grid-item-20 { width: 20%; }
-.grid-item-30 { width: 30%; }
-.grid-item-40 { width: 40%; }
-.grid-item-50 { width: 50%; }
-.grid-item-60 {width:  60%; }
-.grid-item-70 { width: 70%; }
-.grid-item-80 { width: 80%; }
-.grid-item-90 {width:  90%; }
-.grid-item-100 {width:100%; }
-
-
-
-
 
 /* clear fix */
 .grid:after {
-  content: '';
-  display: block;
-  clear: both;
+    content: '';
+    display: block;
+    clear: both;
 }
-
-
 .grid-item img {
-  display: block;
-  width: 100%;
-    height:auto;
-  
+    display: block;
+    width: 100%;
+    height: auto;
 }
-/* ---- .grid-item ---- */
-
-
 
+/* ---- .grid-item ---- */
 .grid-item.is-dragging,
 .grid-item.is-positioning-post-drag {
-  background: #34495e;
-  z-index: 2;
+    background: #34495e;
+    z-index: 2;
 }
-
 .packery-drop-placeholder {
-  outline: 3px dashed hsla(0, 0%, 0%, 0.5);
-  outline-offset: -6px;
-  -webkit-transition: -webkit-transform 0.2s;
-          transition: transform 0.2s;
+    outline: 3px dashed hsla(0, 0%, 0%, 0.5);
+    outline-offset: -6px;
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
 }
-
-
 .wide-as-needed {
-  overflow: scroll;
-  white-space: nowrap;
+    overflow: scroll;
+    white-space: nowrap;
 }
-
-
 .visred {
-  fill:#FF0000;
+    fill: #FF0000;
 }
-
-.wizardtip
-{
-    margin-left:5px;
-    margin-right:5px;
-    margin-top:10px;
-    margin-bottom:5px;
+.wizardtip {
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-top: 10px;
+    margin-bottom: 5px;
     padding: 5px 5px 5px 5px;
     background-color: #cccccc;
-    color:#333232;
+    color: #333232;
     border-radius: 8px;
     border-width: 1px;
-    border-color:#8b8888;
+    border-color: #8b8888;
     border-style: solid;
 }
-
 .wiz-list {
-  list-style-type: disc;
-  list-style-position: inside;
+    list-style-type: disc;
+    list-style-position: inside;
 }
-
-
-.zmPullup
-{
-    background-color:#E3BE1C;
+.zmPullup {
+    background-color: #E3BE1C;
 }
-
 #flyoutmenu {
-  z-index:99;
-  
+    z-index: 99;
 }
-
 #flyoutmenu ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  color:white;
-  z-index:99;
- 
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    color: white;
+    z-index: 99;
     font-size: 0.7em;
     font-family: sans-serif;
     text-transform: uppercase;
 }
-
-
 #flyoutmenu ul li a i {
-  
     font-size: 2.5em;
     font-family: sans-serif;
     text-transform: uppercase;
 }
-
 #flyoutmenu li {
-  display: inline-block;
-   margin-bottom: .2em;
-   padding:0.7em;
-   margin-right: 4px;
-    
+    display: inline-block;
+    margin-bottom: .2em;
+    padding: 0.7em;
+    margin-right: 4px;
     line-height: 100%;
 }
-
-#flyoutmenu li:first-child
-{
+#flyoutmenu li:first-child {
     /*background: rgba(192, 57, 43, 0.7);*/
-    background:rgba(108, 122, 137, 0.7);
-     -webkit-border-radius: 5px 0 0  5px ;
- 
+    
+    background: rgba(108, 122, 137, 0.7);
+    -webkit-border-radius: 5px 0 0 5px;
 }
-
-#flyoutmenu li:only-child
-{
+#flyoutmenu li:only-child {
     /*background: rgba(192, 57, 43, 0.7);*/
-    background:rgba(108, 122, 137, 0.7);
-     -webkit-border-radius: 5px 5px 5px  5px ;
- 
+    
+    background: rgba(108, 122, 137, 0.7);
+    -webkit-border-radius: 5px 5px 5px 5px;
 }
-
-#flyoutmenu li:last-child
-{
-   -webkit-border-radius: 0 5px 5px 0;
+#flyoutmenu li:last-child {
+    -webkit-border-radius: 0 5px 5px 0;
 }
 
 /* make sure this is after last-child */
-#flyoutmenu li:only-child
-{
+#flyoutmenu li:only-child {
     /*background: rgba(192, 57, 43, 0.7);*/
-    background:rgba(108, 122, 137, 0.7);
-     -webkit-border-radius: 5px 5px 5px  5px ;
- 
+    
+    background: rgba(108, 122, 137, 0.7);
+    -webkit-border-radius: 5px 5px 5px 5px;
 }
-
- #flyoutmenu li:nth-child(n+2) {
-        background:rgba(108, 122, 137, 0.7);
-        z-index:-1;
-       
- }
-
-#flyoutmenu a
-{
-    text-decoration:none;
-    color:white;
+#flyoutmenu li:nth-child(n+2) {
+    background: rgba(108, 122, 137, 0.7);
+    z-index: -1;
+}
+#flyoutmenu a {
+    text-decoration: none;
+    color: white;
 }
 
 /* Overlay graph in event footage */
 #event_canvas {
-  position:absolute;
-  width: 80%;
-  height: 20px;
-  bottom:80px;
-  left:20px;
-  opacity:1;
-  z-index:99;
-   
+    position: absolute;
+    width: 80%;
+    height: 20px;
+    bottom: 80px;
+    left: 20px;
+    opacity: 1;
+    z-index: 99;
 }
-
-
 #event_canvas_video {
-  position:absolute;
-  width: 100%;
-  height: 20px;
-  bottom:140px;
-  left:0px;
-  opacity:1;
-  z-index:99;
-   
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    bottom: 140px;
+    left: 0px;
+    opacity: 1;
+    z-index: 99;
 }
-
-
-
 #event_slider {
-  position:absolute;
-  width: 80%;
-  height: 20px;
-  bottom:60px;
-  left:20px;
-  opacity:1;
-   z-index:9999;
-      
-   
+    position: absolute;
+    width: 80%;
+    height: 20px;
+    bottom: 60px;
+    left: 20px;
+    opacity: 1;
+    z-index: 9999;
 }
-
 #event_rate_text {
-  position:absolute;
-  width: 80%;
-  bottom:20px;
-  left:43px;
-  opacity:1;
-  color:#fff;
-  z-index:9998;
-   
-}
-
-.smallnote
-{
-    font-size:9px;
-    text-align:center;
-    background-color: rgba(0,0,0,0.3);
-    color:rgb(0,0,0);
-    border-top-left-radius:5px;
-    border-top-right-radius:5px;
-    
-}
-
-.white-button-text
-{
-    color:#fff !important;
-}
-
-
-
+    position: absolute;
+    width: 80%;
+    bottom: 20px;
+    left: 43px;
+    opacity: 1;
+    color: #fff;
+    z-index: 9998;
+}
+.smallnote {
+    font-size: 9px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    color: rgb(0, 0, 0);
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+.white-button-text {
+    color: #fff !important;
+}
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 5ca3042f..66f2c178 100644
--- a/www/index.html
+++ b/www/index.html
@@ -195,7 +195,7 @@
 
                     <ion-item href="#/montage" menu-close>
                         
-                        <span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;">&nbsp;<i class="icon ion-arrow-graph-down-left"></i>&nbsp;</span>
+                        <!--<span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;">&nbsp;<i class="icon ion-arrow-graph-down-left"></i>&nbsp;</span>-->
                         
                         <span class=" item-icon-left">
                             <i class="icon ion-ios-eye"></i>
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 711a301d..7d1e33ee 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -149,6 +149,7 @@
     "kLoginValidatedTitle"       :"Login Validated",
     "kLogs"                      :"Logs",
     "kLowBandwidth"              :"low bandwidth mode",
+    "kLowBWDisplay"              : "low bandwidth",
     "kManageServerGroups"        :"Manage Server Groups",
     "kMaxFPS"                    :"Max FPS",
     "kMaxItemsForTimeline"       :"Max. items for Timeline",
diff --git a/www/templates/events.html b/www/templates/events.html
index 9b0cd7ba..ac0e1a4f 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -34,7 +34,7 @@
         </ion-header-bar>
     </div>
 
- 
+
 
     <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll"  has-subheader="true" overflow-scroll="false" mouse-wheel-scroll>
 
@@ -278,7 +278,15 @@
             </ion-infinite-scroll>
         </div>
     </ion-content>
+    
+    
+    
     <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();">{{'kFilterOn'|translate}}</div>
+    
+     <div class="bwmode" ng-if="$root.runMode=='lowbw'">
+            {{ 'kLowBWDisplay' | translate }}
+     </div>
+    
 
     <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
 
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 9e0be000..f79db1ef 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -1,4 +1,5 @@
 <ion-view view-title="{{'kMontage' | translate}}" cache-view="false" hide-nav-bar="{{minimal}}">
+    
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
          <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();">&nbsp;
@@ -34,7 +35,8 @@
 
     <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate"  >
     
-
+        
+        
         <span  ng-if="!minimal && showSizeButtons">
             <!-- this is header -->
             
@@ -120,6 +122,11 @@
 
 
     </ion-content>
+    
+    <div class="bwmode" ng-if="$root.runMode=='lowbw'">
+            {{ 'kLowBWDisplay' | translate }}
+     </div>
+    
 
     <div ng-show="minimal">
         <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">