diff options
Diffstat (limited to 'www/templates')
| -rw-r--r-- | www/templates/montage.html | 86 |
1 files changed, 30 insertions, 56 deletions
diff --git a/www/templates/montage.html b/www/templates/montage.html index 42294e09..46cbbd8b 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -20,94 +20,68 @@ <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> </button> - <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>--> - - </ion-nav-buttons> - <ion-content has-bouncing="false" style="background-color:#444444"> + <ion-content ng-cloak has-bouncing="false" style="background-color:#444444"> - <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> - </ion-refresher> + <!--<ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> + </ion-refresher>--> - <span ng-show="!minimal"> <div class="range range-positive"> <i style="color:#bbbbbb" class="icon ion-grid"></i> <input type="range" ng-model="slider.monsize" min="1" - max="9" ng-change="sliderChanged(slider.monsize)"> + max="5" ng-change="sliderChanged(slider.monsize)"> <i style="color:#bbbbbb" class="icon ion-image"></i> </div> </span> - - <div ng-style="packMontage ? { '-webkit-column-count':10-slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','-webkit-column-fill': 'balance', 'column-fill': 'balance'} : {'-webkit-column-count':10-slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','display':'-webkit-flex','-webkit-flex-direction':'row','flex-direction':'row', 'flex-wrap':'wrap' }"> - - <!--<div ng-style="packMontage ? { '-webkit-column-count':slider.monsize, '-webkit-column-gap':'0px','line-height':'0px' } : { 'flex':'display', '-webkit-column-count':slider.monsize }">--> - - + <div class="grid" id="mygrid"> + <div class="grid-sizer"></div> <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'"> - - <!-- back to ng-src. spinner was not updating when rand changes--> - <!-- moving to single so I can rely on rand for reloads --> - - - <!--src=" /zm/cgi-bin/nph-zms?source=event&mode=jpeg&event=7664&frame=1&scale=100&rate=100&maxfps=5&replay=gapless&auth=6b8c60f81fa2edff94f80f12bdebd98d&connkey=286643&rand=1453671607"--> - - <div style="position: relative;width:{{devWidth/(10-slider.monsize)}}px;"> - <div ng-if="!isModalActive"> + <div class="grid-item"> + <figure> + <div ng-if="!isModalActive" > <div ng-if="$root.authSession!='undefined' && !isBackground()"> <div ng-if = "!minimal"> - <img id="img-{{$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" style=" - width: 100% !important; - height: auto !important;" /> - </div> - + + <img id="img-{{$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" /> + + </div> + <div ng-if = "minimal"> - <img id="{{img-$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" style="margin-top:0px; - width: 100% !important; - height: auto !important;" /> + <img id="{{img-$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" /> </div> - - </div> <div ng-if="!$root.authSession=='undefined' || isBackground()"> - <img image-spinner-src="img/pausevideo.png" style="width: 100% !important; - height: auto !important;" /> + <img image-spinner-src="img/pausevideo.png" /> </div> - - <span ng-show="!minimal"> - <div id = "slowpulse" style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" - ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header animated infinite flash':'header'"> - <i class="ion-monitor"></i> - {{monitor.Monitor.Name}} - </div> - </span> - - <div id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div> - - - </div> - </div> + + <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-figcaption animated infinite flash':'normal-figcaption'" > - <div ng-if="isModalActive"> - <img image-spinner-src="img/pausevideo.png" style="margin-top:0px; - width: 100% !important; - height: auto !important;" /> - </div> + <i class="ion-monitor"></i> + {{monitor.Monitor.Name}} + </figcaption> - </span> + + </div> <!-- modal not active--> + <div ng-if="isModalActive"> + <img image-spinner-src="img/pausevideo.png" /> + </div> + </figure> + </div> + </span> <!-- ngrepeat --> </div> - <!-- ngrepeat --> + |