Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head><title>
- RTIS Vivo
- </title><link href="Styles/css/darktheme_091218_0.css" rel="stylesheet" type="text/css" /><link href="Styles/css/styles_051618_2.css" rel="stylesheet" type="text/css" /><link id="lighttheme" href="Styles/css/lighttheme_091218_0.css" rel="stylesheet" type="text/css" /><link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet" /><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
- <script type="text/javascript"
- src="https://code.jquery.com/jquery-3.2.1.min.js"
- integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
- crossorigin="anonymous"></script>
- <script type="text/javascript" src="https://use.fontawesome.com/07c2e0452a.js"></script>
- <script type="text/javascript" src="Scripts/timeline_091218_0.js"></script>
- <script type="text/javascript" src="Scripts/slick.js"></script>
- <!-- Global site tag (gtag.js) - Google Analytics -->
- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111742156-1"></script>
- <script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'UA-111742156-1');
- </script>
- <style type="text/css">
- #vidClipsNav{
- position: relative;
- }
- #VideoClipsSubMenu li{
- background: white;
- }
- #vidClipsNav ul li a{
- color: grey;
- }
- #vidClipsNav ul li a:hover{
- color: white;
- }
- #vidClipsNav #VideoClipsSubMenu{
- position: absolute;
- top: 0;
- left: 100%;
- display: none;
- flex-direction: column;
- max-height: 500px;
- width: 100%;
- flex-wrap: wrap;
- background: transparent;
- }
- #vidClipsNav:hover #VideoClipsSubMenu, #VideoClipsSubMenu:hover{
- display: flex;
- }
- #VideoClipsSubMenu li:hover{
- background: #19af8c;
- }
- </style>
- <meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
- <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-cyan.min.css" />
- <script src="Scripts/moment.js"></script>
- <link href="js/material-datepicker/bootstrap-material-datetimepicker.css" rel="stylesheet" />
- <script src="js/material-datepicker/bootstrap-material-datetimepicker.js"></script>
- <style type="text/css">
- .side-nav.hidden {
- display: inherit !important;
- }
- body .page .main {
- overflow-y: scroll;
- }
- .hidden {
- display: none;
- }
- .card-wide {
- width: 60%;
- /*margin-bottom: 50px;*/
- }
- .button-container {
- display: flex;
- justify-content: space-between;
- }
- .card-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- }
- .card-container > .vid-card {
- margin: 20px;
- cursor: pointer;
- flex: 1 0 calc(33.333% - 40px);
- max-width: 300px;
- }
- /*.card-background {
- height: 180px;
- background-color: rgb(0,150,136);
- }*/
- .card-image > .mdl-card__actions {
- height: 52px;
- padding: 16px;
- background: rgba(0, 0, 0, 0.2);
- }
- .card-image__name {
- color: #fff;
- font-size: 25px;
- font-weight: 500;
- }
- .form-warning {
- font-style: italic;
- color: rgb(128, 128, 128);
- text-align: left;
- }
- .form-danger {
- color: red;
- }
- .vid-card > .mdl-card__actions {
- text-align: left;
- }
- .form-container {
- margin: 20px;
- }
- #camThumHolder > .vid-card {
- width: 100%;
- cursor: pointer;
- }
- #projectNameGroup {
- cursor: pointer;
- }
- #projectNameGroup input {
- cursor: pointer;
- }
- .card-container-title {
- padding: 20px;
- padding-left: 8%;
- }
- #page-container {
- margin-bottom: 20px;
- }
- .button-left {
- margin-left: 8%;
- }
- .button-right {
- margin-right: 8%;
- }
- .page-header {
- display: flex;
- justify-content: center;
- }
- .mdl-checkbox {
- text-align: left;
- }
- .checkboxWGroup {
- padding-top: 20px;
- }
- .checkboxGroup {
- padding: 20px 0px;
- }
- .mdl-card, .mdl-card__supporting-text {
- overflow: inherit;
- }
- .dot {
- height: 8px;
- width: 8px;
- background-color: #fff;
- border-radius: 50%;
- display: inline-block;
- margin: 5px
- }
- .dot-big {
- height: 12px;
- width: 12px;
- background-color: #fff;
- border-radius: 50%;
- display: inline-block;
- margin: 5px
- }
- .dot-container {
- display: flex;
- align-items: center;
- padding-top: 10px;
- }
- #dot-container1 {
- margin-right: 8%;
- }
- #dot-container2 {
- justify-content: center;
- margin-bottom: 50px;
- }
- #dot-container2 > .dot, #dot-container2 > .dot-big {
- background-color: lightgray;
- }
- .text-transparent {
- color: transparent;
- }
- .text-transparent:focus {
- color: inherit;
- }
- </style>
- <script type="text/javascript">
- var wizardPage = 1;
- var wizardPageMax = 3;
- var projectName;
- var timelapseData = {};
- var projStartDate;
- var projEndDate;
- $(document).ready(function () {
- getProjectData();
- $('#startDate').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
- document.querySelector('#startDateGroup').MaterialTextfield.checkDirty();
- $('#dateNullContainer').addClass('hidden');
- timelapseData.startDate = $('#startDate').val();
- calculateVideoLength(timelapseData);
- $('#endDate').bootstrapMaterialDatePicker('setMinDate', date);
- $('#endDateWizard').bootstrapMaterialDatePicker('setMinDate', date);
- });
- $('#endDate').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
- document.querySelector('#endDateGroup').MaterialTextfield.checkDirty();
- $('#dateNullContainer').addClass('hidden');
- timelapseData.endDate = $('#endDate').val();
- calculateVideoLength(timelapseData);
- $('#startDate').bootstrapMaterialDatePicker('setMaxDate', date);
- $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', date);
- });
- $('#startDateWizard').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
- document.querySelector('#startDateWGroup').MaterialTextfield.checkDirty();
- timelapseData.startDate = $('#startDateWizard').val();
- calculateVideoLength(timelapseData);
- $('#endDate').bootstrapMaterialDatePicker('setMinDate', date);
- $('#endDateWizard').bootstrapMaterialDatePicker('setMinDate', date);
- });
- $('#endDateWizard').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
- document.querySelector('#endDateWGroup').MaterialTextfield.checkDirty();
- timelapseData.endDate = $('#endDateWizard').val();
- calculateVideoLength(timelapseData);
- $('#startDate').bootstrapMaterialDatePicker('setMaxDate', date);
- $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', date);
- });
- $('#submitForm').click(function (e) {
- e.preventDefault();
- var dataObj = {};
- dataObj.friendName = $('#friendName').val();
- dataObj.tl2Id = $('#tl2Id').val();
- dataObj.timelapseType = $('#timelapseType').val();
- dataObj.startTime = $('#startTime').val();
- dataObj.endTime = $('#endTime').val();
- dataObj.startDate = $('#startDate').val();
- dataObj.endDate = $('#endDate').val();
- dataObj.excludeWeekend = $('#weekend').is(':checked') ? true : false;
- dataObj.fps = $('#fps').val();
- saveData(dataObj);
- });
- function prevPage() {
- if (wizardPage > 1) {
- wizardPage--;
- changePage(wizardPage);
- }
- }
- function nextPage() {
- if (wizardPage < wizardPageMax) {
- wizardPage++;
- changePage(wizardPage);
- }
- }
- function changePage(page) {
- if (page < 1)
- page = 1;
- if (page > wizardPageMax)
- page = wizardPageMax;
- for (var i = 1; i <= wizardPageMax; i++) {
- $('#wizardPage' + i).addClass('hidden');
- $('.dot' + i).removeClass('dot-big');
- }
- $('#wizardPage' + page).removeClass('hidden');
- $('.dot' + page).addClass('dot-big');
- if (page == 1) {
- $('#prevBtn').prop('disabled', true);
- } else {
- $('#prevBtn').prop('disabled', false);
- }
- if (page == wizardPageMax) {
- $('#nextBtn').prop('disabled', true);
- $('#nextBtn').addClass('hidden');
- $('#submitWizard').removeClass('hidden');
- } else {
- $('#nextBtn').prop('disabled', false);
- $('#nextBtn').removeClass('hidden');
- $('#submitWizard').addClass('hidden');
- }
- if (page == 1 || page == 2) {
- $('#nextBtn').prop('disabled', true);
- $('#MainContent_wizardContainer').addClass('card-wide');
- $('#dot-container1').removeClass('hidden');
- } else {
- $('#nextBtn').prop('disabled', false);
- $('#MainContent_wizardContainer').removeClass('card-wide');
- $('#dot-container1').addClass('hidden');
- }
- }
- $('#prevBtn').click(function (e) {
- e.preventDefault();
- prevPage();
- });
- $('#nextBtn').click(function (e) {
- e.preventDefault();
- nextPage();
- })
- $('#submitWizard').click(function (e) {
- e.preventDefault();
- // set form data and use MDL checkdirty() to render animation;
- $('#friendName').val(timelapseData.friendName);
- document.querySelector('#friendNameGroup').MaterialTextfield.checkDirty();
- $('#tl2Id').val(timelapseData.tl2Id);
- document.querySelector('#tl2IdGroup').MaterialTextfield.checkDirty()
- $('#timelapseType').val('Range');
- document.querySelector('.timelapseSelect').MaterialTextfield.checkDirty()
- $('#startTime').val(timelapseData.startTime);
- document.querySelector('#startTimeGroup').MaterialTextfield.checkDirty();
- $('#endTime').val(timelapseData.endTime);
- document.querySelector('#endTimeGroup').MaterialTextfield.checkDirty();
- $('#startDate').val(timelapseData.startDate);
- document.querySelector('#startDateGroup').MaterialTextfield.checkDirty();
- $('#endDate').val(timelapseData.endDate);
- document.querySelector('#endDateGroup').MaterialTextfield.checkDirty();
- $('#projectName').val(timelapseData.projectName);
- document.querySelector('#projectNameGroup').MaterialTextfield.checkDirty();
- $('#fps').val(timelapseData.fps);
- document.querySelector('.fps-select').MaterialTextfield.checkDirty();
- if ($('#weekendWizard').is(':checked')) {
- document.querySelector('#checkWeekendGroup').MaterialCheckbox.check();
- } else {
- document.querySelector('#checkWeekendGroup').MaterialCheckbox.uncheck();
- }
- // check if start time or start date are null.
- if (!timelapseData.startTime) {
- $('#timeNullContainer').removeClass('hidden');
- }
- if (!timelapseData.startDate) {
- $('#dateNullContainer').removeClass('hidden');
- }
- // show confirmation form after submitting wizard
- $('#MainContent_confirmationForm').removeClass('hidden');
- $('#MainContent_wizardContainer').addClass('hidden');
- $('#dot-container2').addClass('hidden');
- });
- $("#proj-card-container").on('click', '.vid-card', function (e) {
- var key = $(this).attr('projectKey');
- projStartDate = $(this).attr('startdate');
- projEndDate = $(this).attr('endDate');
- projectName = $(this).attr('projectName');
- getCameraData(key);
- // set min and max date for date pickers
- $('#startDate').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
- $('#startDateWizard').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
- $('#endDate').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
- $('#endDateWizard').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
- if (projEndDate == 'CURRENT') {
- $('#startDate').bootstrapMaterialDatePicker('setMaxDate', moment());
- $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment());
- $('#endDate').bootstrapMaterialDatePicker('setMaxDate', moment());
- $('#endDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment());
- } else {
- $('#startDate').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
- $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
- $('#endDate').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
- $('#endDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
- }
- nextPage();
- });
- $("#cam-card-container").on('click', '.vid-card', function (e) {
- // creating clone of card to append to form
- var clone = $(this).clone();
- $("#camThumHolder").empty();
- $("#camThumHolder").append(clone);
- // get name and id from thumbnail
- var id = $(this).attr('tl2id');
- var name = $(this).attr('friendname');
- if (!$.isEmptyObject(timelapseData)) {
- renderWizardForm();
- timelapseData.friendName = name;
- timelapseData.tl2Id = id;
- timelapseData.projectName = projectName;
- } else {
- timelapseData.friendName = name;
- timelapseData.tl2Id = id;
- timelapseData.projectName = projectName;
- // setting default time
- timelapseData.startTime = '11:00:00';
- timelapseData.endTime = '14:00:00';
- // initializing fps on wizard with a value of 10
- $('#fpsWizard').val(10);
- document.querySelector('.fps-selectw').MaterialTextfield.checkDirty();
- timelapseData.fps = 10;
- // hardcoding range to the timelapsetype for now
- timelapseData.timelapseType = 'Range';
- // initializing excludeWeekend bool
- timelapseData.excludeWeekend = true;
- }
- calculateVideoLength(timelapseData);
- nextPage();
- });
- // Renders wizard form if timelapseData exists
- function renderWizardForm() {
- $('#startTimeWizard').val(timelapseData.startTime);
- document.querySelector('#startTimeWGroup').MaterialTextfield.checkDirty();
- $('#endTimeWizard').val(timelapseData.endTime);
- document.querySelector('#endTimeWGroup').MaterialTextfield.checkDirty();
- $('#startDateWizard').val(timelapseData.startDate);
- document.querySelector('#startDateWGroup').MaterialTextfield.checkDirty();
- $('#endDateWizard').val(timelapseData.endDate);
- document.querySelector('#endDateWGroup').MaterialTextfield.checkDirty();
- $('#fpsWizard').val(timelapseData.fps);
- document.querySelector('.fps-selectw').MaterialTextfield.checkDirty()
- if (timelapseData.excludeWeekend) {
- document.querySelector('#checkWeekendWizardGroup').MaterialCheckbox.check();
- } else {
- document.querySelector('#checkWeekendWizardGroup').MaterialCheckbox.uncheck();
- }
- }
- // event handler for exclude weekend buttons
- $('#weekendWizard').click(function (e) {
- timelapseData.excludeWeekend = $(this).is(':checked') ? true : false;
- calculateVideoLength(timelapseData);
- });
- $('#weekend').click(function (e) {
- timelapseData.excludeWeekend = $(this).is(':checked') ? true : false;
- calculateVideoLength(timelapseData);
- });
- // click even handler for project name on form
- $('.form-container').on('click', '#projectNameGroup', function (e) {
- wizardPage = 1;
- changePage(wizardPage);
- $('#MainContent_confirmationForm').addClass('hidden');
- $('#MainContent_wizardContainer').removeClass('hidden');
- $('#dot-container2').removeClass('hidden');
- });
- // Click event handler for cam thumb nail on form
- $('.form-container').on('click', '.vid-card', function (e) {
- wizardPage = 2;
- changePage(wizardPage);
- $('#MainContent_confirmationForm').addClass('hidden');
- $('#MainContent_wizardContainer').removeClass('hidden');
- $('#dot-container2').removeClass('hidden');
- });
- // Timepicker control
- $('.timePicker').change(function (e) {
- if ($(this).val()) {
- $(this).removeClass('text-transparent');
- } else {
- $(this).addClass('text-transparent');
- }
- if ($(this).hasClass('start')) {
- timelapseData.startTime = $(this).val();
- } else {
- timelapseData.endTime = $(this).val();
- }
- calculateVideoLength(timelapseData);
- });
- function saveData(tlData) {
- $.ajax({
- type: "POST",
- url: 'CreateVideo.aspx/PostVideoData',
- data: JSON.stringify(tlData),
- contentType: 'application/json; charset=utf-8',
- success: function (data) {
- if (data.d > 1) {
- // API will return Id. If Id is 1 the action failed
- $("#MainContent_BTsubmit").click();
- } else {
- // change form data to say action has failed
- $("#MainContent_confirmationForm").removeClass('hidden');
- $('#failContainer').removeClass('hidden');
- }
- }
- });
- }
- function getProjectData() {
- $.ajax({
- type: "GET",
- url: 'CreateVideo.aspx/GetProjectData',
- contentType: 'application/json; charset=utf-8',
- success: function (data) {
- renderProjectTemplate(data.d);
- }
- });
- }
- function getCameraData(projectKey) {
- $.ajax({
- type: "GET",
- url: 'CreateVideo.aspx/GetCameraData',
- data: 'projectKey=' + projectKey,
- contentType: 'application/json; charset=utf-8',
- success: function (data) {
- renderCameraTemplate(data.d);
- }
- });
- }
- function renderProjectTemplate(dataArr) {
- var templ = $('#projectTemplate').find('.vid-card');
- for (var i = 0; i < dataArr.length; i++) {
- var clone = templ.clone();
- clone.find('.card-image__name').text(dataArr[i].ProjectName);
- clone.attr('projectKey', dataArr[i].ProjectKey);
- clone.attr('projectName', dataArr[i].ProjectName);
- clone.css('background', 'url(data:image/jpeg;base64,' + dataArr[i].Image + ') center / cover');
- clone.attr('startdate', dataArr[i].StartDate);
- clone.attr('enddate', dataArr[i].EndDate);
- $("#proj-card-container").append(clone);
- }
- }
- function renderCameraTemplate(dataArr) {
- $('#cam-card-container').empty();
- var templ = $('#cameraTemplate').find('.vid-card');
- $('#camCardTitle').text(projectName);
- templ.find
- for (var i = 0; i < dataArr.length; i++) {
- var clone = templ.clone();
- clone.find('.card-image__name').text(dataArr[i].CamName);
- clone.attr('tl2Id', dataArr[i].TLcam_ID);
- clone.attr('friendName', dataArr[i].CamName);
- clone.css('background', 'url(data:image/jpeg;base64,' + dataArr[i].Image + ') center / cover');
- $("#cam-card-container").append(clone);
- }
- }
- });
- function calculateVideoLength(obj) {
- fps = 10;
- // turn project start and end dates into momentjs objects
- var start = obj.startDate ? moment(obj.startDate) : start = moment(projStartDate, 'MMDDYYYY');
- var end;
- if (obj.endDate) {
- end = moment(obj.endDate);
- } else {
- end = projEndDate == 'CURRENT' ? moment() : moment(projEndDate, 'MMDDYYYY');
- }
- // get difference between start and end date
- var days = end.diff(start, 'days');
- if (obj.excludeWeekend) {
- days = days - 2 * (days / 7);
- }
- // get total time span
- var hours = moment(obj.endTime, 'hh:mm:ss').diff(moment(obj.startTime, 'hh:mm:ss'), 'hours');
- var results = ((days * hours) * 6) / obj.fps;
- var resultString = secondsToMinutesAndSeconds(results);
- //return resultString;
- $('.videoDuration').text(resultString);
- }
- function secondsToMinutesAndSeconds(millis) {
- var minutes = Math.floor(millis / 60);
- var seconds = ((millis % 60)).toFixed(0);
- var units = minutes > 0 ? 'minutes' : 'seconds';
- return minutes + ":" + (seconds < 10 ? '0' : '') + seconds + ' ' + units;
- }
- </script>
- </head>
- <body>
- <form method="post" action="./CreateVideo.aspx" id="ctl01">
- <div class="aspNetHidden">
- <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
- <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
- <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTM2MTk3OTkPZBYCZg9kFgICAw9kFgQCCw9kFgICAQ9kFgJmD2QWAgIHDxYCHgdWaXNpYmxlaGQCDQ8PFgIeBFRleHQFDlY0LjcuMTI2LjI5MTU0ZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFKWN0bDAwJEhlYWRMb2dpblZpZXckSGVhZExvZ2luU3RhdHVzJGN0bDAxBSljdGwwMCRIZWFkTG9naW5WaWV3JEhlYWRMb2dpblN0YXR1cyRjdGwwMwUTY3RsMDAkSGVhZExvZ2luVmlldw8PZAIBZEf8gIY20V/y2rVKcerTCCECXra5tJtF+bt6DrbNJHBv" />
- </div>
- <script type="text/javascript">
- //<![CDATA[
- var theForm = document.forms['ctl01'];
- if (!theForm) {
- theForm = document.ctl01;
- }
- function __doPostBack(eventTarget, eventArgument) {
- if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
- theForm.__EVENTTARGET.value = eventTarget;
- theForm.__EVENTARGUMENT.value = eventArgument;
- theForm.submit();
- }
- }
- //]]>
- </script>
- <script src="/vivo/WebResource.axd?d=3iB7WuZirBT0DDT6f-3JnAN2SFGO_CqnKrv9XmMRV__r6xr0AryL1wc-facokzGh6R3elVjBAql8F_NoTTWBo1pdchlILNXI2g2Rz7DIWQk1&t=636475831203255666" type="text/javascript"></script>
- <script src="/vivo/ScriptResource.axd?d=ZXMEXQ9nEco1jedR7PnsnGCdZFltTBt-qPwuthtKSjJhiBSHN-4wiAeLtj1nJCUdQoyFyKfzqWvvjsv7AON5lTV20S8XK629lsa1Z-BPwN87AZu2vk8T_X_ofwPIEoP3Jggklbr6EboJrDvdMM5Kv5E0Kfu-AjDJ9Edqwft2ku01&t=ffffffffad4b7194" type="text/javascript"></script>
- <script src="/vivo/ScriptResource.axd?d=fXels7I1Uools39JA9c7tL9C3eLRpkoQbg8roSRy0vNoDDuxpIsxv8LhmDXRGDMOe0W7pG_55jbxos6iFqk27Pl1UBBswDkOLKB5bGW3zlgXoPJ-68ldPQOIBbu9lOWX9zvm34SxTcrO5gbi_6zvIF-M0Wq8Fr9zgQBxT8scGtho94bkwFSZT-okfra4vxyK0&t=ffffffffad4b7194" type="text/javascript"></script>
- <div class="aspNetHidden">
- <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C0AC59A2" />
- <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAPRwMlZ7QjumfAOZNirKQ7srZoI3sbP0zFx3NWEa8WVvlXixDf38zDXTRnj55anIyvndEaBEeJe1/+WOMePgYgNcWTmrSo7AeV2x3BzVS5gQQ==" />
- </div>
- <div class="page">
- <div class="header">
- <header>
- <div class="left" style="left: 0;">
- <div class="side-nav hidden">
- <div class="nav-hider">
- <div class="burger">
- <span id="top-bun" class="spanBar burger-span"></span>
- <span id="patty" class="spanBar burger-span"></span>
- <span id="bottom-bun" class="spanBar burger-span"></span>
- </div>
- </div>
- <div class="side-nav-logo">
- </div>
- <nav>
- <ul id="mobile-menu">
- <li>
- <a href="Default.aspx">Home</a>
- </li>
- <li>
- <a href="LiveStreamV4.aspx">Live Stream</a>
- </li>
- <li id="nav-timeline">
- <a href="TimelineV2.aspx">Timeline</a>
- <ul id="TL2ulmenu">
- <li><a href='TimelineV2.aspx?tlvid=195'>Expo</a></li></ul>
- </li>
- <li id="nav-archive">
- <a href="TimelineV2.aspx?archive=1">Timeline - Archive</a>
- <ul id="TL2archiveMenu">
- </ul>
- </li>
- <li id="vidClipsNav">
- <a href="VideoClips.aspx">Video Clips</a>
- <ul id="VideoClipsSubMenu"><li><a href='VideoClips.aspx?tlvid=195'>Expo</a></li></ul>
- </li>
- <li>
- <a href="CreateVideo.aspx">Timelapse Creation Wizard</a>
- </li>
- <li>
- <a href="InviteUser.aspx">Invite</a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- <div class="logo">
- <img src="Images/logo.png" alt="RTI Systems"/>
- </div>
- <div class="loginDisplay">
- <div class="user-stuff">
- <span class="bold">
- <span id="HeadLoginView_HeadLoginName">jwormhoudt@standarddrywall.com</span>
- </span>
- <div class="user-nav">
- <div class="user-nav-icon"><i class="fa fa-caret-down" aria-hidden="true"></i></div>
- <div class="nav-dropdown">
- <nav>
- <ul>
- <li><a id="HeadLoginView_userSettings0" href="ChangePassword.aspx">Settings</a></li>
- <li><a id="HeadLoginView_HeadLoginStatus" href="javascript:__doPostBack('ctl00$HeadLoginView$HeadLoginStatus$ctl00','')">Log Out</a></li>
- </ul>
- </nav>
- </div>
- </div>
- </div>
- <div class="theme-controls">
- <ul>
- <li id="day-theme">
- <i class="fa fa-sun-o" aria-hidden="true"></i>
- </li>
- <li id="night-theme">
- <i class="fa fa-moon-o" aria-hidden="true"></i>
- </li>
- </ul>
- </div>
- </div>
- </header>
- </div>
- <div class="main">
- <table class="page-header" border="0">
- <tr class="table-hack">
- <td class="tdA">
- <h1 class="superbigA">Timelapse Creation
- </h1>
- </td>
- <td class="tdB">
- <h1 class="superbigB">|</h1>
- </td>
- <td class="tdC">
- <h1 class="superbigC">Create custom<br />
- timelapse videos</h1>
- </td>
- </tr>
- </table>
- <div id="MainContent_UpdatePanelVid">
- <script type="text/javascript">
- //<![CDATA[
- Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$CreateVideo_ScriptManager', 'ctl01', ['tctl00$MainContent$UpdatePanelVid','MainContent_UpdatePanelVid'], [], [], 90, 'ctl00');
- //]]>
- </script>
- <center>
- <div id="MainContent_wizardContainer" class="card-wide mdl-card mdl-shadow--4dp">
- <div id="page-container">
- <div id="wizardPage1">
- <div class="mdl-card__title card-container-title mdl-color--primary mdl-color-text--white">
- <h2 class="mdl-card__title-text">Select the project you wish to use</h2>
- </div>
- <div id="proj-card-container" class="card-container mdl-card__supporting-text">
- </div>
- </div>
- <div id="wizardPage2" class="hidden">
- <div class="mdl-card__title card-container-title mdl-color--primary mdl-color-text--white">
- <h2 id="camCardTitle" class="mdl-card__title-text">Select the camera you wish to use</h2>
- </div>
- <div id="cam-card-container" class="card-container mdl-card__supporting-text">
- </div>
- </div>
- <div id="wizardPage3" class="hidden">
- <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
- <h2 class="mdl-card__title-text">Select Time and Date Range</h2>
- </div>
- <div class="mdl-card__supporting-text">
- <div id="startTimeWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input start timePicker" value="11:00" type="time" id="startTimeWizard">
- <label class="mdl-textfield__label" for="startTimeWizard">Start Time</label>
- </div>
- <div id="endTimeWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input end timePicker" type="time" id="endTimeWizard" value="14:00"/>
- <label class="mdl-textfield__label" for="endTimeWizard">End Time</label>
- </div>
- <div class="form-warning">
- <span>We reccomend 11 am - 2 pm for best lighting.</span>
- </div>
- <div id="startDateWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input" type="text" id="startDateWizard"/>
- <label class="mdl-textfield__label" for="startDate">Start Date Range</label>
- </div>
- <div id="endDateWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input" type="text" id="endDateWizard"/>
- <label class="mdl-textfield__label" for="endDate">End Date Range</label>
- </div>
- <div class="form-warning">
- <span>This video will span for the entire length of the project if the Start and End date are left empty.</span>
- </div>
- <div class="checkboxWGroup">
- <label id="checkWeekendWizardGroup" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="weekendWizard">
- <input id="weekendWizard" type="checkbox" class="mdl-checkbox__input" checked>
- <span class="mdl-checkbox__label">Exclude Weekends</span>
- </label>
- </div>
- <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select fps-selectw">
- <input type="text" value="" class="mdl-textfield__input" id="fpsWizard" name="fpsWizard" value="10" readonly>
- <input type="hidden" value="" name="fpsWizard">
- <label for="fpsWizard" id="typeLabel" class="mdl-textfield__label">Frames Per Second</label>
- <ul for="fpsWizard" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
- <li class="mdl-menu__item" data-val="10" onclick="$('#fpsWizard').val(10);document.querySelector('.fps-selectw').MaterialTextfield.checkDirty();timelapseData.fps=10;calculateVideoLength(timelapseData);">10</li>
- <li class="mdl-menu__item" data-val="20" onclick="$('#fpsWizard').val(25);document.querySelector('.fps-selectw').MaterialTextfield.checkDirty();timelapseData.fps=25;calculateVideoLength(timelapseData);">25</li>
- </ul>
- </div>
- <div class="form-warning">
- <span>Your video duration will be roughly <span class="videoDuration"></span> long with the current settings</span>
- </div>
- </div>
- </div>
- <div id="wizardPage4" class="hidden">
- </div>
- </div>
- <div class="mdl-card__actions mdl-card--border button-container">
- <button id="prevBtn" class="mdl-button mdl-js-button mdl-js-ripple-effect button-left" disabled="disabled">
- Prev
- </button>
- <button id="nextBtn" class="mdl-button mdl-js-button mdl-js-ripple-effect button-right" disabled="disabled">
- Next
- </button>
- <button id="submitWizard" class="mdl-button mdl-js-button mdl-js-ripple-effect button-right hidden">
- Next
- </button>
- </div>
- <div id="dot-container1" class="dot-container mdl-card__menu">
- <span class="dot1 dot-big dot"></span>
- <span class="dot2 dot"></span>
- <span class="dot3 dot"></span>
- </div>
- </div>
- <div id="dot-container2" class="dot-container">
- <span class="dot1 dot-big dot"></span>
- <span class="dot2 dot"></span>
- <span class="dot3 dot"></span>
- </div>
- <div id="MainContent_confirmationForm" class="form-container hidden">
- <div class="mdl-card mdl-shadow--4dp">
- <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
- <h2 class="mdl-card__title-text">Confirm Video Settings</h2>
- </div>
- <div class="mdl-card__supporting-text">
- <form id="tlForm" action="#">
- <div id="friendNameGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label hidden">
- <input class="mdl-textfield__input" type="text" id="friendName" name="FriendName"/>
- <label class="mdl-textfield__label" for="friendName">FriendName</label>
- </div>
- <div id="tl2IdGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label hidden">
- <input class="mdl-textfield__input" type="text" id="tl2Id" name="TL2id"/>
- <label class="mdl-textfield__label" for="tl2Id">TL2Id.</label>
- </div>
- <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label timelapseSelect getmdl-select hidden">
- <input type="text" value="" class="mdl-textfield__input" id="timelapseType" name="TimeLapseType" readonly>
- <input type="hidden" value="" name="timelapseType">
- <label for="sample1" id="typeLabel" class="mdl-textfield__label">Timelape Type</label>
- <ul for="timelapseType" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
- <li class="mdl-menu__item" data-val="fullProject" onclick="$('#timelapseType').val('Full Project');document.querySelector('.getmdl-select').MaterialTextfield.checkDirty()">Full Project</li>
- <li class="mdl-menu__item" data-val="range" onclick="$('#timelapseType').val('Range');document.querySelector('.getmdl-select').MaterialTextfield.checkDirty()">Range</li>
- </ul>
- </div>
- <div id="projectNameGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input" type="text" id="projectName" name="ProjectName" readonly/>
- <label class="mdl-textfield__label" for="projectName">Project Name</label>
- </div>
- <div id="camThumHolder">
- </div>
- <div id="startTimeGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input start timePicker" type="time" value="11:00" id="startTime"/>
- <label class="mdl-textfield__label" for="startTIme">Start Time</label>
- </div>
- <div id="endTimeGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input timePicker" type="time" id="endTime" value="14:00"/>
- <label class="mdl-textfield__label" for="endTime">End Time</label>
- </div>
- <div id="timeNullContainer" class="hidden form-warning">
- <span>We reccomend 11 am - 2 pm for best lighting. If left blank, this video will use these default values.</span>
- </div>
- <div id="startDateGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input" type="text" id="startDate"/>
- <label class="mdl-textfield__label" for="startDate">Start Date Range</label>
- </div>
- <div id="endDateGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
- <input class="mdl-textfield__input" type="text" id="endDate"/>
- <label class="mdl-textfield__label" for="endDate">End Date Range</label>
- </div>
- <div id="dateNullContainer" class="hidden form-warning">
- <span>This video will span for the entire length of the project if the Start and End date are left empty.</span>
- </div>
- <div class="checkboxGroup">
- <label id="checkWeekendGroup" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="weekend">
- <input id="weekend" type="checkbox" class="mdl-checkbox__input" checked>
- <span class="mdl-checkbox__label">Exclude Weekends</span>
- </label>
- </div>
- <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select fps-select">
- <input type="text" value="" class="mdl-textfield__input" id="fps" name="fps" value="10" readonly>
- <input type="hidden" value="" name="fpsWizard">
- <label for="fps" id="fpsLabel" class="mdl-textfield__label">Frames Per Second</label>
- <ul for="fps" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
- <li class="mdl-menu__item" data-val="10" onclick="$('#fps').val(10);document.querySelector('.fps-select').MaterialTextfield.checkDirty();timelapseData.fps=10;calculateVideoLength(timelapseData);">10</li>
- <li class="mdl-menu__item" data-val="20" onclick="$('#fps').val(25);document.querySelector('.fps-select').MaterialTextfield.checkDirty();timelapseData.fps=25;calculateVideoLength(timelapseData);">25</li>
- </ul>
- </div>
- <div class="form-warning">
- <span>Your video duration will be roughly <span class="videoDuration"></span> long with the current settings</span>
- </div>
- <div id="failContainer" class="hidden formDanger">
- <span>There was an erorr processing your request. Please try submitting the form again.</span>
- </div>
- </form>
- </div>
- <div class="mdl-card__actions mdl-card--border">
- <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="submitForm">Submit</button>
- </div>
- </div>
- </div>
- <input type="submit" name="ctl00$MainContent$BTsubmit" value="Submit" id="MainContent_BTsubmit" class="hidden" />
- </center>
- </div>
- <div id="projectTemplate" class="hidden">
- <div class="vid-card card-image mdl-card mdl-shadow--2dp card-background">
- <div class="mdl-card__title mdl-card--expand"></div>
- <div class="mdl-card__actions">
- <span class="card-image__name">Image.jpg</span>
- </div>
- </div>
- </div>
- <div id="cameraTemplate" class="hidden">
- <div class="vid-card card-image mdl-card mdl-shadow--2dp card-background">
- <div class="mdl-card__title mdl-card--expand"></div>
- <div class="mdl-card__actions">
- <span class="card-image__name">Image.jpg</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="footer">
- <table class="NewTable">
- <tr>
- <td class="NewTableSpace"> RTI Systems Inc. - <span id="LabelVersion">V4.7.126.29154</span> </td>
- <td class="NewTableSpace"> Phone: 213 599 8470</td>
- <td class="NewTableSpace">
- <a href="http://www.rtisystems.com" >www.RTISystems.com</a>
- </td>
- </tr>
- </table>
- </div>
- </form>
- <script src="js/material.min.js"></script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment