Skip to content
Snippets Groups Projects
Commit f9b4e2e4 authored by George Salukvadze's avatar George Salukvadze
Browse files

v 0.25.2

- Added live stream from the detector
- Small fixes throughout the project
parent 0aa28b25
No related branches found
No related tags found
No related merge requests found
<link rel="stylesheet" href="css/crate.css">
<link rel="stylesheet" href="css/VLCPlayer.css">
<div class="crate_container">
<div id="pageTitle">{{$ctrl.pageTitle}}</div>
<img src="http://protodune-dp01.cern.ch/video1.mjpeg" style="position: absolute; top: 20%; left: 10%; width: 70%;"></img>
<vlcplayer vlc-url="rtsp://protodune-dp01.cern.ch:554" vlc-filename="live1.sdp" vlc-autoplay="true"></vlcplayer>
</div>
\ No newline at end of file
......@@ -7,8 +7,9 @@
margin-left: 10%;
width: 65%;"/>
<div id="outer_pressure">Outer pressure ABS:<br/><a href="#!/histogram/NP04_PT0104AI"><span class="value">{{ $ctrl.NP04_PT0104AI[0].Mnish | number: 2 }} bar</span></a><br/>Outer pressure Diff:<br/><a href="#!/histogram/NP04_PT0105AI"><span class="value">{{ $ctrl.NP04_PT0105AI[0].Mnish | number: 2 }} mbar</span></a></div>
<div id="inner_pressure">Inner pressure ABS:<br/><a href="#!/histogram/NP04_PT0100AI"><span class="value">{{ $ctrl.NP04_PT0100AI[0].Mnish | number: 2 }} bar</span></a><br/>Inner pressure Diff:<br/><a href="#!/histogram/NP04_PT0101AI"><span class="value">{{ $ctrl.NP04_PT0101AI[0].Mnish | number: 2 }} mbar</span></a></div>
<div id="outer_pressure">Outer pressure ABS:<br/><a href="#!/histogram/NP04_PT0104AI"><span class="value">{{ $ctrl.NP04_PT0104AI[0].Mnish | number: 4 }} bar</span></a><br/>Outer pressure Diff:<br/><a href="#!/histogram/NP04_PT0105AI"><span class="value">{{ $ctrl.NP04_PT0105AI[0].Mnish | number: 4 }} mbar</span></a></div>
<div id="inner_pressure">Inner pressure ABS:<br/><a href="#!/histogram/NP04_PT0100AI"><span class="value">{{ $ctrl.NP04_PT0100AI[0].Mnish | number: 4 }} bar</span></a><br/>Inner pressure Diff:<br/><a href="#!/histogram/NP04_PT0101AI"><span class="value">{{ $ctrl.NP04_PT0101AI[0].Mnish | number: 4 }} mbar</span></a></div>
<div id="ambient_diff"><span style="font-size: 3.0vmin">Difference with<br/>ambient pressure:</span><br/>Outer pressure:<br/><span class="value">{{ $ctrl.NP04_PT0106AI[0].Mnish - $ctrl.NP04_PT0104AI[0].Mnish | number: 4 }}</span><br/>Inner pressure:<br/><span class="value">{{ $ctrl.NP04_PT0106AI[0].Mnish - $ctrl.NP04_PT0100AI[0].Mnish | number: 4 }}</span><br/>Inner pressure 2:<br/><span class="value">{{ $ctrl.NP04_PT0106AI[0].Mnish - $ctrl.NP04_PT0102AI[0].Mnish | number: 4 }}</span></div>
<div id="beam_plug">Beam plug:<br/><a href="#!/histogram/NP04_2PT0100AIR"><span class="value">{{ $ctrl.NP04_2PT0100AIR[0].Mnish | number: 2 }} mbar</span></a></div>
<div id="lesker_vacuum_gauge">Lesker vacuum gauge:<br/><a href="#!/histogram/NP04_2TT0100AIR"><span class="value">{{ $ctrl.NP04_2TT0100AIR[0].Mnish | number: 2 }} V</span></a></div>
<div id="timestamp_label">Timestamp:<br/><span id="timestamp">{{ $ctrl.timestamp[0].Mnish }}</span></div>
......
/*! VLCPlayer 2014-12-30 05:12:06 */
.toolbar-vlc {
background: rgba(32, 32, 32, 1);
height: 30px;
margin-top: -35px; /* place in the player */
position: relative;
}
.toolbar-vlc-fullscreen{
background: rgba(32, 32, 32, 1);
height: 30px;
position: fixed;
bottom:0px;
left:0px;
z-index:10000;
}
.toolbar-disabled-vlc {
-webkit-animation: fadeout 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeout 3s; /* Firefox < 16 */
-ms-animation: fadeout 3s; /* Internet Explorer */
-o-animation: fadeout 3s; /* Opera < 11.5.1 */
animation: fadeout 3s;
opacity: 0;
}
.toolbar-active-vlc {
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 11.5.1 */
animation: fadein 1s;
opacity: 1;
}
.vlc-window{
position:relative;
width:640px;
height:360px;
}
.vlc-fullscreen{
position: fixed;
top: 0px;
left: 0px;
z-index:10000;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Firefox < 16 */
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Internet Explorer */
@-ms-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Opera < 12.1 */
@-o-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.progress-vlc {
height: 5px;
margin-bottom: 1px;
border-radius: 0px;
}
.error-vlc {
margin-top: -200px;
color: white;
position: relative;
}
.player-blur-vlc {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.btn-default-vlc {
background: rgba(32, 32, 32, 1);
border-color: rgba(32, 32, 32, 1);
color: rgba(212, 212, 212, 1);
}
.vlc-text-white {
color:white;
font-size: 12px;
}
.btn-default-vlc:hover, .btn-default-vlc:focus, .btn-default-vlc:active, .btn-default-vlc.active, .open>.dropdown-toggle.btn-default-vlc {
color: white;
-webkit-filter: brightness(150%);
background: rgba(32, 32, 32, 1);
border-color: rgba(32, 32, 32, 1);
outline:0px !important;
-webkit-appearance:none;
}
......@@ -27,6 +27,16 @@
font-size: 2.7vmin;
}
#ambient_diff {
position: fixed;
left: 6%;
top: 60%;
text-align: right;
color: gray;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 2.7vmin;
}
#inner_pressure_2 {
position:fixed;
right: 10%;
......
......@@ -9,7 +9,7 @@
#RES {
position: fixed;
left: 25%;
left: 20%;
top: 45%;
text-align: right;
color: gray;
......@@ -29,7 +29,7 @@
#mag {
position: fixed;
left: 45%;
left: 50%;
top: 45%;
text-align: right;
color: gray;
......@@ -39,7 +39,7 @@
#I {
position: fixed;
left: 55%;
left: 65%;
top: 45%;
text-align: right;
color: gray;
......@@ -49,7 +49,7 @@
#Q {
position: fixed;
left: 65%;
left: 80%;
top: 45%;
text-align: right;
color: gray;
......
/*! VLCPlayer 2014-12-30 05:12:06 */
angular.module('kdarcel.vlc-player', [])
.constant('VERSION', 'v1.1.2')
.run(function ($rootScope, VERSION) {
$rootScope.version = VERSION
})
.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++)
input.push(i);
return input;
};
})
.filter('time2String', function() {
return function duration(duration) {
if (!duration)
return "";
var seconds = parseInt((duration / 1000) % 60);
var minutes = parseInt((duration / (1000 * 60)) % 60);
var hours = parseInt((duration / (1000 * 60 * 60)) % 24);
var durationString = "";
if (hours) durationString += ((hours < 10) ? "0" + hours : hours) + ":";
durationString += ((minutes < 10) ? "0" + minutes : minutes) + ":";
durationString += (seconds < 10) ? "0" + seconds : seconds;
return durationString;
};
})
.factory("poollingFactory", function ($timeout) {
var timeIntervalInSec = 1;
function callFnOnInterval(fn, timeInterval) {
var promise = $timeout(fn, 1000 * timeIntervalInSec);
return promise.then(function(){
callFnOnInterval(fn, timeInterval);
});
};
return {
callFnOnInterval: callFnOnInterval
};
})
.directive('vlcplayer', function (poollingFactory) {
return {
restrict: 'E',
replace: true,
templateUrl: 'VLCPlayer.tpl.html',
link: function (scope, element, attributes) {
var setupVlcPlayer = function(vlcData) {
if (vlcData.url && vlcData.filename) {
scope.vlc = document.getElementById("vlc");
if (scope.vlc)
{
if (scope.vlc.playlist.items.count > 0)
scope.vlc.playlist.items.clear();
var options = [":vout-filter=deinterlace", ":deinterlace-mode=linear"];
var id = scope.vlc.playlist.add(vlcData.url, vlcData.filename, options);
if (vlcData.autoplay == 'true')
scope.vlc.playlist.playItem(id);
scope.vlc.version = scope.vlc.versionInfo();
scope.vlc.toolbarWidth = {"width": '640'};
scope.vlc.toolbarClass = 'toolbar-vlc';
scope.vlc.fullscreenClass = 'vlc-window';
}
}
}
scope.$watch(function () {
if (scope.vlc) {
// if the file is playing
if (vlc.input.state == 3) {
if (scope.videoDuration == null)
scope.videoDuration = scope.vlc.input.length;
scope.vlc.openning = false;
scope.vlc.buffer = false;
}
// if there is an error
if (vlc.input.state == 7 && scope.vlc.error == null)
scope.vlc.error = true;
// player is openning or is paused or is buffering or is stopping or is ended
if (vlc.input.state == 4 || vlc.input.state == 5 || vlc.input.state == 6) {
if (vlc.input.state == 2)
scope.vlc.buffer = true;
if (vlc.input.state == 1)
scope.vlc.openning = true;
scope.vlc.toolbar = true;
}
}
return {
'url': attributes.vlcUrl,
'filename': attributes.vlcFilename,
'autoplay': attributes.vlcAutoplay
};
}, setupVlcPlayer, true);
scope.vlcKeyEvent = function(event) {
if (event.keyCode == 32) // Keypress 'space'
scope.vlc.playlist.togglePause();
}
scope.vlcToolbarActive = function(isHover) {
scope.vlc.toolbar = isHover;
}
scope.vlcTogglePause = function() {
scope.vlc.playlist.togglePause();
}
scope.vlcToggleMute = function() {
scope.vlc.audio.toggleMute();
}
scope.vlcSwitchAudioTrack = function(trackNumber) {
scope.vlc.audio.track = trackNumber;
}
scope.vlcSwitchSubtitleTrack = function(trackNumber) {
scope.vlc.subtitle.track = trackNumber
}
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e){
var pos = scope.vlc.input.position;
scope.vlc.playlist.stop();
if ((!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement)) {
scope.vlc.embedFullscreen = { 'width': '640', 'height': '360'};
scope.vlc.toolbarWidth = {'width': '640'};
scope.vlc.toolbarClass = 'toolbar-vlc';
scope.vlc.fullscreenClass = 'vlc-window';
} else {
scope.vlc.embedFullscreen = {'width': screen.width, 'height': screen.height};
scope.vlc.toolbarWidth = {'width': screen.width};
scope.vlc.toolbarClass = 'toolbar-vlc-fullscreen';
scope.vlc.fullscreenClass = 'vlc-fullscreen';
}
scope.vlc.playlist.play();
scope.vlc.input.position = pos;
});
scope.vlcToggleFullscreen = function() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
var elem = document.getElementById("player");
if (elem.requestFullscreen)
elem.requestFullscreen();
else if (elem.msRequestFullscreen)
elem.msRequestFullscreen();
else if (elem.mozRequestFullScreen)
elem.mozRequestFullScreen();
else if (elem.webkitRequestFullscreen)
elem.webkitRequestFullscreen();
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
poollingFactory.callFnOnInterval(function () {
if (scope.vlc) {
scope.videoCurrentTime = scope.vlc.input.time;
scope.vlc.timer = ( scope.videoCurrentTime / scope.videoDuration ) * 100;
}
});
}
}
});
angular.module('kdarcel.vlc-player.tpl', ['VLCPlayer.tpl.html']);
angular.module("VLCPlayer.tpl.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("VLCPlayer.tpl.html",
"<div class=\"player-container\" id=\"player\" ng-keydown=\"vlcKeyEvent($event);\">\n" +
" <div ng-class=\"{true: 'player-blur-vlc' }[vlc.buffer == true]\" class=\"{{ vlc.fullscreenClass }}\">\n" +
" <object classid=\"clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921\" events=\"true\" width=\"100%\" height=\"100%\" tabindex=\"0\">\n" +
" <embed pluginspage=\"http://www.videolan.org\"\n" +
" type=\"application/x-vlc-plugin\"\n" +
" version=\"VideoLAN.VLCPlugin.2\"\n" +
" allowfullscreen=\"true\"\n" +
" width=\"640\"\n" +
" height=\"360\"\n" +
" toolbar=\"false\"\n" +
" branding=\"false\"\n" +
" windowless=\"true\"\n" +
" id=\"vlc\"\n" +
" ng-style=\"vlc.embedFullscreen\"\n" +
" ></embed>\n" +
" </object>\n" +
" </div>\n" +
" <div class=\"video-controls\" ng-mouseover=\"vlcToolbarActive(true);\" ng-mouseleave=\"vlcToolbarActive(false);\">\n" +
" <div class=\"{{ vlc.toolbarClass }}\" ng-class=\"{true: 'toolbar-active-vlc', false: 'toolbar-disabled-vlc'}[vlc.error == true || vlc.toolbar == true]\" ng-style=\"vlc.toolbarWidth\">\n" +
" <div class=\"progress-vlc\">\n" +
" <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"{{ vlc.timer }}\" aria-valuemin=\"0\" aria-valuemax=\"100\" ng-style=\"{width : ( vlc.timer + '%' ) }\">\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"form-inline pull-left\">\n" +
" <button type=\"button\" class=\"btn btn-default btn-default-vlc btn-xs\" tooltip=\"Play/Pause\" ng-click=\"vlcTogglePause()\">\n" +
" <span class=\"glyphicon\" ng-class=\"vlc.playlist.isPlaying ? 'glyphicon-pause' : 'glyphicon-play'\"></span>\n" +
" </button>\n" +
" <span class=\"vlc-text-white\">{{ videoCurrentTime | time2String }} / {{ videoDuration | time2String }}</span>\n" +
" </div>\n" +
" <div class=\"form-inline pull-right\">\n" +
" <div class=\"btn-group dropup\" ng-if=\"vlc.audio.count\" dropdown>\n" +
" <button type=\"button\" class=\"btn btn-default btn-default-vlc btn-xs dropdown-toggle\" tooltip=\"Audio language\" data-toggle=\"dropdown\">\n" +
" <span class=\"glyphicon glyphicon-sound-5-1\"></span>\n" +
" </button>\n" +
" <ul class=\"dropdown-menu\" role=\"menu\">\n" +
" <li ng-repeat=\"n in [] | range:vlc.audio.count\">\n" +
" <a href=\"\" ng-click=\"vlcSwitchAudioTrack(n)\">\n" +
" {{ vlc.audio.description(n) }}&nbsp;<span class=\"glyphicon glyphicon-ok\" ng-show=\"vlc.audio.track == n\"></span>\n" +
" </a>\n" +
" </li>\n" +
" </ul>\n" +
" </div>\n" +
" <div class=\"btn-group dropup\" ng-if=\"vlc.subtitle.count\" dropdown>\n" +
" <button type=\"button\" class=\"btn btn-default btn-default-vlc btn-xs dropdown-toggle\" tooltip=\"Subtitles\" data-toggle=\"dropdown\">\n" +
" <span class=\"glyphicon glyphicon-subtitles\"></span>\n" +
" </button>\n" +
" <ul class=\"dropdown-menu\" role=\"menu\">\n" +
" <li ng-repeat=\"n in [] | range:vlc.subtitle.count\">\n" +
" <a href=\"\" ng-click=\"vlcSwitchSubtitleTrack(n)\">\n" +
" {{ vlc.subtitle.description(n) }}&nbsp;<span class=\"glyphicon glyphicon-ok\" ng-show=\"vlc.subtitle.track == n\"></span>\n" +
" </a>\n" +
" </li>\n" +
" </ul>\n" +
" </div>\n" +
" <button type=\"button\" class=\"btn btn-default btn-default-vlc btn-xs\" tooltip=\"Audio Sounds\" ng-click=\"vlcToggleMute()\">\n" +
" <span class=\"glyphicon\" ng-class=\"vlc.audio.mute ? 'glyphicon-volume-off' : 'glyphicon-volume-up'\"></span>\n" +
" </button>\n" +
" <div class=\"btn-group dropup\" dropdown>\n" +
" <button type=\"button\" class=\"btn btn-default btn-default-vlc btn-xs dropdown-toggle\" tooltip=\"Parameters\">\n" +
" <span class=\"glyphicon glyphicon-cog\"></span>\n" +
" </button>\n" +
" <ul class=\"dropdown-menu\">\n" +
" <li><a href=\"https://github.com/Tuxity/angular-vlc/tree/{{ version }}\" target=\"blank\"> About angular-vlc </a></li>\n" +
" <li><a href=\"\"> VLC {{ vlc.version }}</a></li>\n" +
" </ul>\n" +
" </div>\n" +
" <button type=\"button\" class=\"btn btn-default btn-default-vlc btn-xs\" tooltip=\"Fullscreen\" ng-click=\"vlcToggleFullscreen()\">\n" +
" <span class=\"glyphicon glyphicon-resize-full\"></span>\n" +
" </button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"error-vlc\" ng-if=\"vlc.error\">\n" +
" <p>There is an error with the link your given...</p>\n" +
" </div>\n" +
" <div class=\"error-vlc\" ng-if=\"vlc.buffer\">\n" +
" <p>Video is actually buffering, please wait...</p>\n" +
" </div>\n" +
" <div class=\"error-vlc\" ng-if=\"vlc.openning\">\n" +
" <p>Video will be open in few seconds...</p>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
......@@ -14,6 +14,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
<script src="dependencies/ng-csv.js"></script>
<script src="dependencies/Chart.min.js"></script>
<script src="dependencies/VLCPlayer.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="home/home.module.js"></script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment