API tools faq
paste
Ewalt_fpv

Untitled

Ewalt_fpv
Apr 23rd, 2019
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.20 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head><title>
  7. RTIS Vivo
  8. </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" />
  9.  
  10.  
  11.  
  12. <script type="text/javascript"
  13. src="https://code.jquery.com/jquery-3.2.1.min.js"
  14. integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  15. crossorigin="anonymous"></script>
  16.  
  17.  
  18. <script type="text/javascript" src="https://use.fontawesome.com/07c2e0452a.js"></script>
  19.  
  20.  
  21. <script type="text/javascript" src="Scripts/timeline_091218_0.js"></script>
  22.  
  23.  
  24. <script type="text/javascript" src="Scripts/slick.js"></script>
  25.  
  26.  
  27. <!-- Global site tag (gtag.js) - Google Analytics -->
  28. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111742156-1"></script>
  29. <script>
  30. window.dataLayer = window.dataLayer || [];
  31. function gtag(){dataLayer.push(arguments);}
  32. gtag('js', new Date());
  33.  
  34. gtag('config', 'UA-111742156-1');
  35. </script>
  36.  
  37.  
  38. <style type="text/css">
  39.  
  40.  
  41. #vidClipsNav{
  42. position: relative;
  43. }
  44.  
  45. #VideoClipsSubMenu li{
  46. background: white;
  47. }
  48.  
  49. #vidClipsNav ul li a{
  50. color: grey;
  51. }
  52.  
  53. #vidClipsNav ul li a:hover{
  54. color: white;
  55. }
  56.  
  57. #vidClipsNav #VideoClipsSubMenu{
  58. position: absolute;
  59. top: 0;
  60. left: 100%;
  61. display: none;
  62. flex-direction: column;
  63. max-height: 500px;
  64. width: 100%;
  65. flex-wrap: wrap;
  66. background: transparent;
  67. }
  68.  
  69. #vidClipsNav:hover #VideoClipsSubMenu, #VideoClipsSubMenu:hover{
  70. display: flex;
  71. }
  72.  
  73. #VideoClipsSubMenu li:hover{
  74. background: #19af8c;
  75. }
  76.  
  77. </style>
  78.  
  79.  
  80. <meta name="viewport" content="width=device-width" />
  81.  
  82. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  83. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  84. <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-cyan.min.css" />
  85. <script src="Scripts/moment.js"></script>
  86. <link href="js/material-datepicker/bootstrap-material-datetimepicker.css" rel="stylesheet" />
  87. <script src="js/material-datepicker/bootstrap-material-datetimepicker.js"></script>
  88. <style type="text/css">
  89. .side-nav.hidden {
  90. display: inherit !important;
  91. }
  92.  
  93. body .page .main {
  94. overflow-y: scroll;
  95. }
  96.  
  97. .hidden {
  98. display: none;
  99. }
  100.  
  101. .card-wide {
  102. width: 60%;
  103. /*margin-bottom: 50px;*/
  104. }
  105.  
  106. .button-container {
  107. display: flex;
  108. justify-content: space-between;
  109. }
  110.  
  111. .card-container {
  112. display: flex;
  113. flex-wrap: wrap;
  114. justify-content: center;
  115. }
  116.  
  117. .card-container > .vid-card {
  118. margin: 20px;
  119. cursor: pointer;
  120. flex: 1 0 calc(33.333% - 40px);
  121. max-width: 300px;
  122. }
  123.  
  124. /*.card-background {
  125. height: 180px;
  126. background-color: rgb(0,150,136);
  127. }*/
  128. .card-image > .mdl-card__actions {
  129. height: 52px;
  130. padding: 16px;
  131. background: rgba(0, 0, 0, 0.2);
  132. }
  133.  
  134. .card-image__name {
  135. color: #fff;
  136. font-size: 25px;
  137. font-weight: 500;
  138. }
  139.  
  140. .form-warning {
  141. font-style: italic;
  142. color: rgb(128, 128, 128);
  143. text-align: left;
  144. }
  145.  
  146. .form-danger {
  147. color: red;
  148. }
  149.  
  150. .vid-card > .mdl-card__actions {
  151. text-align: left;
  152. }
  153.  
  154. .form-container {
  155. margin: 20px;
  156. }
  157.  
  158. #camThumHolder > .vid-card {
  159. width: 100%;
  160. cursor: pointer;
  161. }
  162.  
  163. #projectNameGroup {
  164. cursor: pointer;
  165. }
  166.  
  167. #projectNameGroup input {
  168. cursor: pointer;
  169. }
  170.  
  171. .card-container-title {
  172. padding: 20px;
  173. padding-left: 8%;
  174. }
  175.  
  176. #page-container {
  177. margin-bottom: 20px;
  178. }
  179.  
  180. .button-left {
  181. margin-left: 8%;
  182. }
  183.  
  184. .button-right {
  185. margin-right: 8%;
  186. }
  187.  
  188. .page-header {
  189. display: flex;
  190. justify-content: center;
  191. }
  192.  
  193. .mdl-checkbox {
  194. text-align: left;
  195. }
  196.  
  197. .checkboxWGroup {
  198. padding-top: 20px;
  199. }
  200.  
  201. .checkboxGroup {
  202. padding: 20px 0px;
  203. }
  204.  
  205. .mdl-card, .mdl-card__supporting-text {
  206. overflow: inherit;
  207. }
  208.  
  209. .dot {
  210. height: 8px;
  211. width: 8px;
  212. background-color: #fff;
  213. border-radius: 50%;
  214. display: inline-block;
  215. margin: 5px
  216. }
  217.  
  218. .dot-big {
  219. height: 12px;
  220. width: 12px;
  221. background-color: #fff;
  222. border-radius: 50%;
  223. display: inline-block;
  224. margin: 5px
  225. }
  226.  
  227. .dot-container {
  228. display: flex;
  229. align-items: center;
  230. padding-top: 10px;
  231. }
  232.  
  233. #dot-container1 {
  234. margin-right: 8%;
  235. }
  236.  
  237. #dot-container2 {
  238. justify-content: center;
  239. margin-bottom: 50px;
  240. }
  241.  
  242. #dot-container2 > .dot, #dot-container2 > .dot-big {
  243. background-color: lightgray;
  244. }
  245.  
  246. .text-transparent {
  247. color: transparent;
  248. }
  249.  
  250. .text-transparent:focus {
  251. color: inherit;
  252. }
  253. </style>
  254.  
  255.  
  256. <script type="text/javascript">
  257. var wizardPage = 1;
  258. var wizardPageMax = 3;
  259. var projectName;
  260. var timelapseData = {};
  261. var projStartDate;
  262. var projEndDate;
  263. $(document).ready(function () {
  264. getProjectData();
  265.  
  266.  
  267. $('#startDate').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
  268. document.querySelector('#startDateGroup').MaterialTextfield.checkDirty();
  269. $('#dateNullContainer').addClass('hidden');
  270. timelapseData.startDate = $('#startDate').val();
  271. calculateVideoLength(timelapseData);
  272. $('#endDate').bootstrapMaterialDatePicker('setMinDate', date);
  273. $('#endDateWizard').bootstrapMaterialDatePicker('setMinDate', date);
  274. });
  275. $('#endDate').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
  276. document.querySelector('#endDateGroup').MaterialTextfield.checkDirty();
  277. $('#dateNullContainer').addClass('hidden');
  278. timelapseData.endDate = $('#endDate').val();
  279. calculateVideoLength(timelapseData);
  280. $('#startDate').bootstrapMaterialDatePicker('setMaxDate', date);
  281. $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', date);
  282. });
  283. $('#startDateWizard').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
  284. document.querySelector('#startDateWGroup').MaterialTextfield.checkDirty();
  285. timelapseData.startDate = $('#startDateWizard').val();
  286. calculateVideoLength(timelapseData);
  287. $('#endDate').bootstrapMaterialDatePicker('setMinDate', date);
  288. $('#endDateWizard').bootstrapMaterialDatePicker('setMinDate', date);
  289. });
  290. $('#endDateWizard').bootstrapMaterialDatePicker({ time: false, switchOnClick: true }).on('change', function (e, date) {
  291. document.querySelector('#endDateWGroup').MaterialTextfield.checkDirty();
  292. timelapseData.endDate = $('#endDateWizard').val();
  293. calculateVideoLength(timelapseData);
  294. $('#startDate').bootstrapMaterialDatePicker('setMaxDate', date);
  295. $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', date);
  296. });
  297.  
  298. $('#submitForm').click(function (e) {
  299. e.preventDefault();
  300. var dataObj = {};
  301. dataObj.friendName = $('#friendName').val();
  302. dataObj.tl2Id = $('#tl2Id').val();
  303. dataObj.timelapseType = $('#timelapseType').val();
  304. dataObj.startTime = $('#startTime').val();
  305. dataObj.endTime = $('#endTime').val();
  306. dataObj.startDate = $('#startDate').val();
  307. dataObj.endDate = $('#endDate').val();
  308. dataObj.excludeWeekend = $('#weekend').is(':checked') ? true : false;
  309. dataObj.fps = $('#fps').val();
  310.  
  311. saveData(dataObj);
  312. });
  313.  
  314. function prevPage() {
  315. if (wizardPage > 1) {
  316. wizardPage--;
  317. changePage(wizardPage);
  318. }
  319. }
  320.  
  321. function nextPage() {
  322. if (wizardPage < wizardPageMax) {
  323. wizardPage++;
  324. changePage(wizardPage);
  325. }
  326. }
  327.  
  328. function changePage(page) {
  329. if (page < 1)
  330. page = 1;
  331. if (page > wizardPageMax)
  332. page = wizardPageMax;
  333.  
  334. for (var i = 1; i <= wizardPageMax; i++) {
  335. $('#wizardPage' + i).addClass('hidden');
  336. $('.dot' + i).removeClass('dot-big');
  337. }
  338.  
  339. $('#wizardPage' + page).removeClass('hidden');
  340. $('.dot' + page).addClass('dot-big');
  341.  
  342. if (page == 1) {
  343. $('#prevBtn').prop('disabled', true);
  344. } else {
  345. $('#prevBtn').prop('disabled', false);
  346. }
  347.  
  348. if (page == wizardPageMax) {
  349. $('#nextBtn').prop('disabled', true);
  350. $('#nextBtn').addClass('hidden');
  351. $('#submitWizard').removeClass('hidden');
  352. } else {
  353. $('#nextBtn').prop('disabled', false);
  354. $('#nextBtn').removeClass('hidden');
  355. $('#submitWizard').addClass('hidden');
  356. }
  357.  
  358. if (page == 1 || page == 2) {
  359. $('#nextBtn').prop('disabled', true);
  360. $('#MainContent_wizardContainer').addClass('card-wide');
  361. $('#dot-container1').removeClass('hidden');
  362. } else {
  363. $('#nextBtn').prop('disabled', false);
  364. $('#MainContent_wizardContainer').removeClass('card-wide');
  365. $('#dot-container1').addClass('hidden');
  366. }
  367. }
  368.  
  369. $('#prevBtn').click(function (e) {
  370. e.preventDefault();
  371. prevPage();
  372. });
  373.  
  374. $('#nextBtn').click(function (e) {
  375. e.preventDefault();
  376. nextPage();
  377. })
  378.  
  379. $('#submitWizard').click(function (e) {
  380. e.preventDefault();
  381.  
  382. // set form data and use MDL checkdirty() to render animation;
  383. $('#friendName').val(timelapseData.friendName);
  384. document.querySelector('#friendNameGroup').MaterialTextfield.checkDirty();
  385. $('#tl2Id').val(timelapseData.tl2Id);
  386. document.querySelector('#tl2IdGroup').MaterialTextfield.checkDirty()
  387. $('#timelapseType').val('Range');
  388. document.querySelector('.timelapseSelect').MaterialTextfield.checkDirty()
  389. $('#startTime').val(timelapseData.startTime);
  390. document.querySelector('#startTimeGroup').MaterialTextfield.checkDirty();
  391. $('#endTime').val(timelapseData.endTime);
  392. document.querySelector('#endTimeGroup').MaterialTextfield.checkDirty();
  393. $('#startDate').val(timelapseData.startDate);
  394. document.querySelector('#startDateGroup').MaterialTextfield.checkDirty();
  395. $('#endDate').val(timelapseData.endDate);
  396. document.querySelector('#endDateGroup').MaterialTextfield.checkDirty();
  397. $('#projectName').val(timelapseData.projectName);
  398. document.querySelector('#projectNameGroup').MaterialTextfield.checkDirty();
  399. $('#fps').val(timelapseData.fps);
  400. document.querySelector('.fps-select').MaterialTextfield.checkDirty();
  401.  
  402. if ($('#weekendWizard').is(':checked')) {
  403. document.querySelector('#checkWeekendGroup').MaterialCheckbox.check();
  404. } else {
  405. document.querySelector('#checkWeekendGroup').MaterialCheckbox.uncheck();
  406. }
  407.  
  408. // check if start time or start date are null.
  409. if (!timelapseData.startTime) {
  410. $('#timeNullContainer').removeClass('hidden');
  411. }
  412. if (!timelapseData.startDate) {
  413. $('#dateNullContainer').removeClass('hidden');
  414. }
  415.  
  416. // show confirmation form after submitting wizard
  417. $('#MainContent_confirmationForm').removeClass('hidden');
  418. $('#MainContent_wizardContainer').addClass('hidden');
  419.  
  420. $('#dot-container2').addClass('hidden');
  421. });
  422.  
  423. $("#proj-card-container").on('click', '.vid-card', function (e) {
  424. var key = $(this).attr('projectKey');
  425. projStartDate = $(this).attr('startdate');
  426. projEndDate = $(this).attr('endDate');
  427. projectName = $(this).attr('projectName');
  428. getCameraData(key);
  429.  
  430. // set min and max date for date pickers
  431. $('#startDate').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
  432. $('#startDateWizard').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
  433. $('#endDate').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
  434. $('#endDateWizard').bootstrapMaterialDatePicker('setMinDate', moment(projStartDate, 'MMDDYYYY'));
  435. if (projEndDate == 'CURRENT') {
  436. $('#startDate').bootstrapMaterialDatePicker('setMaxDate', moment());
  437. $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment());
  438. $('#endDate').bootstrapMaterialDatePicker('setMaxDate', moment());
  439. $('#endDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment());
  440. } else {
  441. $('#startDate').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
  442. $('#startDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
  443. $('#endDate').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
  444. $('#endDateWizard').bootstrapMaterialDatePicker('setMaxDate', moment(projEndDate, 'MMDDYYYY'));
  445. }
  446.  
  447.  
  448. nextPage();
  449. });
  450.  
  451. $("#cam-card-container").on('click', '.vid-card', function (e) {
  452. // creating clone of card to append to form
  453. var clone = $(this).clone();
  454. $("#camThumHolder").empty();
  455. $("#camThumHolder").append(clone);
  456.  
  457. // get name and id from thumbnail
  458. var id = $(this).attr('tl2id');
  459. var name = $(this).attr('friendname');
  460.  
  461. if (!$.isEmptyObject(timelapseData)) {
  462. renderWizardForm();
  463. timelapseData.friendName = name;
  464. timelapseData.tl2Id = id;
  465. timelapseData.projectName = projectName;
  466. } else {
  467. timelapseData.friendName = name;
  468. timelapseData.tl2Id = id;
  469. timelapseData.projectName = projectName;
  470.  
  471. // setting default time
  472. timelapseData.startTime = '11:00:00';
  473. timelapseData.endTime = '14:00:00';
  474.  
  475. // initializing fps on wizard with a value of 10
  476. $('#fpsWizard').val(10);
  477. document.querySelector('.fps-selectw').MaterialTextfield.checkDirty();
  478. timelapseData.fps = 10;
  479.  
  480. // hardcoding range to the timelapsetype for now
  481. timelapseData.timelapseType = 'Range';
  482.  
  483. // initializing excludeWeekend bool
  484. timelapseData.excludeWeekend = true;
  485. }
  486. calculateVideoLength(timelapseData);
  487. nextPage();
  488. });
  489.  
  490. // Renders wizard form if timelapseData exists
  491. function renderWizardForm() {
  492. $('#startTimeWizard').val(timelapseData.startTime);
  493. document.querySelector('#startTimeWGroup').MaterialTextfield.checkDirty();
  494. $('#endTimeWizard').val(timelapseData.endTime);
  495. document.querySelector('#endTimeWGroup').MaterialTextfield.checkDirty();
  496. $('#startDateWizard').val(timelapseData.startDate);
  497. document.querySelector('#startDateWGroup').MaterialTextfield.checkDirty();
  498. $('#endDateWizard').val(timelapseData.endDate);
  499. document.querySelector('#endDateWGroup').MaterialTextfield.checkDirty();
  500. $('#fpsWizard').val(timelapseData.fps);
  501. document.querySelector('.fps-selectw').MaterialTextfield.checkDirty()
  502.  
  503. if (timelapseData.excludeWeekend) {
  504. document.querySelector('#checkWeekendWizardGroup').MaterialCheckbox.check();
  505. } else {
  506. document.querySelector('#checkWeekendWizardGroup').MaterialCheckbox.uncheck();
  507. }
  508. }
  509.  
  510. // event handler for exclude weekend buttons
  511. $('#weekendWizard').click(function (e) {
  512. timelapseData.excludeWeekend = $(this).is(':checked') ? true : false;
  513. calculateVideoLength(timelapseData);
  514. });
  515. $('#weekend').click(function (e) {
  516. timelapseData.excludeWeekend = $(this).is(':checked') ? true : false;
  517. calculateVideoLength(timelapseData);
  518. });
  519.  
  520. // click even handler for project name on form
  521. $('.form-container').on('click', '#projectNameGroup', function (e) {
  522. wizardPage = 1;
  523. changePage(wizardPage);
  524. $('#MainContent_confirmationForm').addClass('hidden');
  525. $('#MainContent_wizardContainer').removeClass('hidden');
  526. $('#dot-container2').removeClass('hidden');
  527. });
  528.  
  529. // Click event handler for cam thumb nail on form
  530. $('.form-container').on('click', '.vid-card', function (e) {
  531. wizardPage = 2;
  532. changePage(wizardPage);
  533. $('#MainContent_confirmationForm').addClass('hidden');
  534. $('#MainContent_wizardContainer').removeClass('hidden');
  535. $('#dot-container2').removeClass('hidden');
  536. });
  537.  
  538. // Timepicker control
  539. $('.timePicker').change(function (e) {
  540. if ($(this).val()) {
  541. $(this).removeClass('text-transparent');
  542. } else {
  543. $(this).addClass('text-transparent');
  544. }
  545.  
  546. if ($(this).hasClass('start')) {
  547. timelapseData.startTime = $(this).val();
  548. } else {
  549. timelapseData.endTime = $(this).val();
  550. }
  551.  
  552. calculateVideoLength(timelapseData);
  553. });
  554.  
  555. function saveData(tlData) {
  556. $.ajax({
  557. type: "POST",
  558. url: 'CreateVideo.aspx/PostVideoData',
  559. data: JSON.stringify(tlData),
  560. contentType: 'application/json; charset=utf-8',
  561. success: function (data) {
  562. if (data.d > 1) {
  563. // API will return Id. If Id is 1 the action failed
  564. $("#MainContent_BTsubmit").click();
  565. } else {
  566. // change form data to say action has failed
  567. $("#MainContent_confirmationForm").removeClass('hidden');
  568. $('#failContainer').removeClass('hidden');
  569. }
  570. }
  571. });
  572.  
  573. }
  574.  
  575. function getProjectData() {
  576. $.ajax({
  577. type: "GET",
  578. url: 'CreateVideo.aspx/GetProjectData',
  579. contentType: 'application/json; charset=utf-8',
  580. success: function (data) {
  581. renderProjectTemplate(data.d);
  582. }
  583. });
  584. }
  585. function getCameraData(projectKey) {
  586. $.ajax({
  587. type: "GET",
  588. url: 'CreateVideo.aspx/GetCameraData',
  589. data: 'projectKey=' + projectKey,
  590. contentType: 'application/json; charset=utf-8',
  591. success: function (data) {
  592. renderCameraTemplate(data.d);
  593. }
  594. });
  595.  
  596. }
  597.  
  598. function renderProjectTemplate(dataArr) {
  599. var templ = $('#projectTemplate').find('.vid-card');
  600. for (var i = 0; i < dataArr.length; i++) {
  601. var clone = templ.clone();
  602. clone.find('.card-image__name').text(dataArr[i].ProjectName);
  603. clone.attr('projectKey', dataArr[i].ProjectKey);
  604. clone.attr('projectName', dataArr[i].ProjectName);
  605. clone.css('background', 'url(data:image/jpeg;base64,' + dataArr[i].Image + ') center / cover');
  606. clone.attr('startdate', dataArr[i].StartDate);
  607. clone.attr('enddate', dataArr[i].EndDate);
  608. $("#proj-card-container").append(clone);
  609. }
  610. }
  611.  
  612. function renderCameraTemplate(dataArr) {
  613. $('#cam-card-container').empty();
  614. var templ = $('#cameraTemplate').find('.vid-card');
  615. $('#camCardTitle').text(projectName);
  616. templ.find
  617. for (var i = 0; i < dataArr.length; i++) {
  618. var clone = templ.clone();
  619. clone.find('.card-image__name').text(dataArr[i].CamName);
  620. clone.attr('tl2Id', dataArr[i].TLcam_ID);
  621. clone.attr('friendName', dataArr[i].CamName);
  622. clone.css('background', 'url(data:image/jpeg;base64,' + dataArr[i].Image + ') center / cover');
  623. $("#cam-card-container").append(clone);
  624. }
  625. }
  626. });
  627.  
  628. function calculateVideoLength(obj) {
  629. fps = 10;
  630. // turn project start and end dates into momentjs objects
  631. var start = obj.startDate ? moment(obj.startDate) : start = moment(projStartDate, 'MMDDYYYY');
  632.  
  633. var end;
  634. if (obj.endDate) {
  635. end = moment(obj.endDate);
  636. } else {
  637. end = projEndDate == 'CURRENT' ? moment() : moment(projEndDate, 'MMDDYYYY');
  638. }
  639.  
  640. // get difference between start and end date
  641. var days = end.diff(start, 'days');
  642.  
  643. if (obj.excludeWeekend) {
  644. days = days - 2 * (days / 7);
  645. }
  646.  
  647. // get total time span
  648. var hours = moment(obj.endTime, 'hh:mm:ss').diff(moment(obj.startTime, 'hh:mm:ss'), 'hours');
  649.  
  650. var results = ((days * hours) * 6) / obj.fps;
  651.  
  652. var resultString = secondsToMinutesAndSeconds(results);
  653.  
  654. //return resultString;
  655.  
  656. $('.videoDuration').text(resultString);
  657. }
  658.  
  659. function secondsToMinutesAndSeconds(millis) {
  660. var minutes = Math.floor(millis / 60);
  661. var seconds = ((millis % 60)).toFixed(0);
  662. var units = minutes > 0 ? 'minutes' : 'seconds';
  663. return minutes + ":" + (seconds < 10 ? '0' : '') + seconds + ' ' + units;
  664. }
  665. </script>
  666. </head>
  667. <body>
  668. <form method="post" action="./CreateVideo.aspx" id="ctl01">
  669. <div class="aspNetHidden">
  670. <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
  671. <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  672. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTM2MTk3OTkPZBYCZg9kFgICAw9kFgQCCw9kFgICAQ9kFgJmD2QWAgIHDxYCHgdWaXNpYmxlaGQCDQ8PFgIeBFRleHQFDlY0LjcuMTI2LjI5MTU0ZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFKWN0bDAwJEhlYWRMb2dpblZpZXckSGVhZExvZ2luU3RhdHVzJGN0bDAxBSljdGwwMCRIZWFkTG9naW5WaWV3JEhlYWRMb2dpblN0YXR1cyRjdGwwMwUTY3RsMDAkSGVhZExvZ2luVmlldw8PZAIBZEf8gIY20V/y2rVKcerTCCECXra5tJtF+bt6DrbNJHBv" />
  673. </div>
  674.  
  675. <script type="text/javascript">
  676. //<![CDATA[
  677. var theForm = document.forms['ctl01'];
  678. if (!theForm) {
  679. theForm = document.ctl01;
  680. }
  681. function __doPostBack(eventTarget, eventArgument) {
  682. if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
  683. theForm.__EVENTTARGET.value = eventTarget;
  684. theForm.__EVENTARGUMENT.value = eventArgument;
  685. theForm.submit();
  686. }
  687. }
  688. //]]>
  689. </script>
  690.  
  691.  
  692. <script src="/vivo/WebResource.axd?d=3iB7WuZirBT0DDT6f-3JnAN2SFGO_CqnKrv9XmMRV__r6xr0AryL1wc-facokzGh6R3elVjBAql8F_NoTTWBo1pdchlILNXI2g2Rz7DIWQk1&amp;t=636475831203255666" type="text/javascript"></script>
  693.  
  694.  
  695. <script src="/vivo/ScriptResource.axd?d=ZXMEXQ9nEco1jedR7PnsnGCdZFltTBt-qPwuthtKSjJhiBSHN-4wiAeLtj1nJCUdQoyFyKfzqWvvjsv7AON5lTV20S8XK629lsa1Z-BPwN87AZu2vk8T_X_ofwPIEoP3Jggklbr6EboJrDvdMM5Kv5E0Kfu-AjDJ9Edqwft2ku01&amp;t=ffffffffad4b7194" type="text/javascript"></script>
  696. <script src="/vivo/ScriptResource.axd?d=fXels7I1Uools39JA9c7tL9C3eLRpkoQbg8roSRy0vNoDDuxpIsxv8LhmDXRGDMOe0W7pG_55jbxos6iFqk27Pl1UBBswDkOLKB5bGW3zlgXoPJ-68ldPQOIBbu9lOWX9zvm34SxTcrO5gbi_6zvIF-M0Wq8Fr9zgQBxT8scGtho94bkwFSZT-okfra4vxyK0&amp;t=ffffffffad4b7194" type="text/javascript"></script>
  697. <div class="aspNetHidden">
  698.  
  699. <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C0AC59A2" />
  700. <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAPRwMlZ7QjumfAOZNirKQ7srZoI3sbP0zFx3NWEa8WVvlXixDf38zDXTRnj55anIyvndEaBEeJe1/+WOMePgYgNcWTmrSo7AeV2x3BzVS5gQQ==" />
  701. </div>
  702.  
  703.  
  704. <div class="page">
  705.  
  706. <div class="header">
  707.  
  708. <header>
  709. <div class="left" style="left: 0;">
  710. <div class="side-nav hidden">
  711. <div class="nav-hider">
  712. <div class="burger">
  713. <span id="top-bun" class="spanBar burger-span"></span>
  714. <span id="patty" class="spanBar burger-span"></span>
  715. <span id="bottom-bun" class="spanBar burger-span"></span>
  716. </div>
  717. </div>
  718. <div class="side-nav-logo">
  719.  
  720. </div>
  721. <nav>
  722. <ul id="mobile-menu">
  723. <li>
  724. <a href="Default.aspx">Home</a>
  725. </li>
  726.  
  727. <li>
  728. <a href="LiveStreamV4.aspx">Live Stream</a>
  729. </li>
  730.  
  731.  
  732. <li id="nav-timeline">
  733. <a href="TimelineV2.aspx">Timeline</a>
  734. <ul id="TL2ulmenu">
  735.  
  736.  
  737. <li><a href='TimelineV2.aspx?tlvid=195'>Expo</a></li></ul>
  738. </li>
  739.  
  740.  
  741. <li id="nav-archive">
  742. <a href="TimelineV2.aspx?archive=1">Timeline - Archive</a>
  743. <ul id="TL2archiveMenu">
  744.  
  745. </ul>
  746. </li>
  747.  
  748.  
  749.  
  750. <li id="vidClipsNav">
  751. <a href="VideoClips.aspx">Video Clips</a>
  752. <ul id="VideoClipsSubMenu"><li><a href='VideoClips.aspx?tlvid=195'>Expo</a></li></ul>
  753. </li>
  754. <li>
  755. <a href="CreateVideo.aspx">Timelapse Creation Wizard</a>
  756. </li>
  757.  
  758. <li>
  759. <a href="InviteUser.aspx">Invite</a>
  760. </li>
  761. </ul>
  762. </nav>
  763. </div>
  764. </div>
  765. <div class="logo">
  766. <img src="Images/logo.png" alt="RTI Systems"/>
  767. </div>
  768. <div class="loginDisplay">
  769. <div class="user-stuff">
  770.  
  771. <span class="bold">
  772. <span id="HeadLoginView_HeadLoginName">jwormhoudt@standarddrywall.com</span>
  773. </span>
  774. <div class="user-nav">
  775. <div class="user-nav-icon"><i class="fa fa-caret-down" aria-hidden="true"></i></div>
  776. <div class="nav-dropdown">
  777. <nav>
  778. <ul>
  779. <li><a id="HeadLoginView_userSettings0" href="ChangePassword.aspx">Settings</a></li>
  780. <li><a id="HeadLoginView_HeadLoginStatus" href="javascript:__doPostBack(&#39;ctl00$HeadLoginView$HeadLoginStatus$ctl00&#39;,&#39;&#39;)">Log Out</a></li>
  781. </ul>
  782. </nav>
  783. </div>
  784. </div>
  785.  
  786. </div>
  787. <div class="theme-controls">
  788. <ul>
  789. <li id="day-theme">
  790. <i class="fa fa-sun-o" aria-hidden="true"></i>
  791. </li>
  792. <li id="night-theme">
  793. <i class="fa fa-moon-o" aria-hidden="true"></i>
  794. </li>
  795. </ul>
  796. </div>
  797. </div>
  798.  
  799. </header>
  800.  
  801. </div>
  802.  
  803.  
  804.  
  805.  
  806.  
  807.  
  808.  
  809.  
  810.  
  811.  
  812.  
  813.  
  814. <div class="main">
  815.  
  816. <table class="page-header" border="0">
  817. <tr class="table-hack">
  818. <td class="tdA">
  819. <h1 class="superbigA">Timelapse Creation
  820. </h1>
  821. </td>
  822. <td class="tdB">
  823. <h1 class="superbigB">|</h1>
  824. </td>
  825. <td class="tdC">
  826. <h1 class="superbigC">Create custom<br />
  827. timelapse videos</h1>
  828. </td>
  829. </tr>
  830. </table>
  831. <div id="MainContent_UpdatePanelVid">
  832.  
  833. <script type="text/javascript">
  834. //<![CDATA[
  835. Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$CreateVideo_ScriptManager', 'ctl01', ['tctl00$MainContent$UpdatePanelVid','MainContent_UpdatePanelVid'], [], [], 90, 'ctl00');
  836. //]]>
  837. </script>
  838.  
  839. <center>
  840. <div id="MainContent_wizardContainer" class="card-wide mdl-card mdl-shadow--4dp">
  841. <div id="page-container">
  842. <div id="wizardPage1">
  843. <div class="mdl-card__title card-container-title mdl-color--primary mdl-color-text--white">
  844. <h2 class="mdl-card__title-text">Select the project you wish to use</h2>
  845. </div>
  846. <div id="proj-card-container" class="card-container mdl-card__supporting-text">
  847. </div>
  848. </div>
  849. <div id="wizardPage2" class="hidden">
  850. <div class="mdl-card__title card-container-title mdl-color--primary mdl-color-text--white">
  851. <h2 id="camCardTitle" class="mdl-card__title-text">Select the camera you wish to use</h2>
  852. </div>
  853. <div id="cam-card-container" class="card-container mdl-card__supporting-text">
  854. </div>
  855. </div>
  856. <div id="wizardPage3" class="hidden">
  857. <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
  858. <h2 class="mdl-card__title-text">Select Time and Date Range</h2>
  859. </div>
  860. <div class="mdl-card__supporting-text">
  861.  
  862.  
  863. <div id="startTimeWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  864. <input class="mdl-textfield__input start timePicker" value="11:00" type="time" id="startTimeWizard">
  865. <label class="mdl-textfield__label" for="startTimeWizard">Start Time</label>
  866. </div>
  867. <div id="endTimeWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  868. <input class="mdl-textfield__input end timePicker" type="time" id="endTimeWizard" value="14:00"/>
  869. <label class="mdl-textfield__label" for="endTimeWizard">End Time</label>
  870. </div>
  871. <div class="form-warning">
  872. <span>We reccomend 11 am - 2 pm for best lighting.</span>
  873. </div>
  874. <div id="startDateWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  875. <input class="mdl-textfield__input" type="text" id="startDateWizard"/>
  876. <label class="mdl-textfield__label" for="startDate">Start Date Range</label>
  877. </div>
  878. <div id="endDateWGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  879. <input class="mdl-textfield__input" type="text" id="endDateWizard"/>
  880. <label class="mdl-textfield__label" for="endDate">End Date Range</label>
  881. </div>
  882. <div class="form-warning">
  883. <span>This video will span for the entire length of the project if the Start and End date are left empty.</span>
  884. </div>
  885. <div class="checkboxWGroup">
  886. <label id="checkWeekendWizardGroup" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="weekendWizard">
  887. <input id="weekendWizard" type="checkbox" class="mdl-checkbox__input" checked>
  888. <span class="mdl-checkbox__label">Exclude Weekends</span>
  889. </label>
  890. </div>
  891. <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select fps-selectw">
  892. <input type="text" value="" class="mdl-textfield__input" id="fpsWizard" name="fpsWizard" value="10" readonly>
  893. <input type="hidden" value="" name="fpsWizard">
  894. <label for="fpsWizard" id="typeLabel" class="mdl-textfield__label">Frames Per Second</label>
  895. <ul for="fpsWizard" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
  896. <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>
  897. <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>
  898. </ul>
  899. </div>
  900. <div class="form-warning">
  901. <span>Your video duration will be roughly <span class="videoDuration"></span> long with the current settings</span>
  902. </div>
  903. </div>
  904. </div>
  905. <div id="wizardPage4" class="hidden">
  906.  
  907. </div>
  908. </div>
  909. <div class="mdl-card__actions mdl-card--border button-container">
  910. <button id="prevBtn" class="mdl-button mdl-js-button mdl-js-ripple-effect button-left" disabled="disabled">
  911. Prev
  912. </button>
  913. <button id="nextBtn" class="mdl-button mdl-js-button mdl-js-ripple-effect button-right" disabled="disabled">
  914. Next
  915. </button>
  916. <button id="submitWizard" class="mdl-button mdl-js-button mdl-js-ripple-effect button-right hidden">
  917. Next
  918. </button>
  919. </div>
  920. <div id="dot-container1" class="dot-container mdl-card__menu">
  921. <span class="dot1 dot-big dot"></span>
  922. <span class="dot2 dot"></span>
  923. <span class="dot3 dot"></span>
  924. </div>
  925. </div>
  926. <div id="dot-container2" class="dot-container">
  927. <span class="dot1 dot-big dot"></span>
  928. <span class="dot2 dot"></span>
  929. <span class="dot3 dot"></span>
  930. </div>
  931. <div id="MainContent_confirmationForm" class="form-container hidden">
  932. <div class="mdl-card mdl-shadow--4dp">
  933. <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
  934. <h2 class="mdl-card__title-text">Confirm Video Settings</h2>
  935. </div>
  936. <div class="mdl-card__supporting-text">
  937. <form id="tlForm" action="#">
  938. <div id="friendNameGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label hidden">
  939. <input class="mdl-textfield__input" type="text" id="friendName" name="FriendName"/>
  940. <label class="mdl-textfield__label" for="friendName">FriendName</label>
  941. </div>
  942. <div id="tl2IdGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label hidden">
  943. <input class="mdl-textfield__input" type="text" id="tl2Id" name="TL2id"/>
  944. <label class="mdl-textfield__label" for="tl2Id">TL2Id.</label>
  945. </div>
  946. <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label timelapseSelect getmdl-select hidden">
  947. <input type="text" value="" class="mdl-textfield__input" id="timelapseType" name="TimeLapseType" readonly>
  948. <input type="hidden" value="" name="timelapseType">
  949. <label for="sample1" id="typeLabel" class="mdl-textfield__label">Timelape Type</label>
  950. <ul for="timelapseType" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
  951. <li class="mdl-menu__item" data-val="fullProject" onclick="$('#timelapseType').val('Full Project');document.querySelector('.getmdl-select').MaterialTextfield.checkDirty()">Full Project</li>
  952. <li class="mdl-menu__item" data-val="range" onclick="$('#timelapseType').val('Range');document.querySelector('.getmdl-select').MaterialTextfield.checkDirty()">Range</li>
  953. </ul>
  954. </div>
  955. <div id="projectNameGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  956. <input class="mdl-textfield__input" type="text" id="projectName" name="ProjectName" readonly/>
  957. <label class="mdl-textfield__label" for="projectName">Project Name</label>
  958. </div>
  959. <div id="camThumHolder">
  960. </div>
  961. <div id="startTimeGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  962. <input class="mdl-textfield__input start timePicker" type="time" value="11:00" id="startTime"/>
  963. <label class="mdl-textfield__label" for="startTIme">Start Time</label>
  964. </div>
  965. <div id="endTimeGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  966. <input class="mdl-textfield__input timePicker" type="time" id="endTime" value="14:00"/>
  967. <label class="mdl-textfield__label" for="endTime">End Time</label>
  968. </div>
  969. <div id="timeNullContainer" class="hidden form-warning">
  970. <span>We reccomend 11 am - 2 pm for best lighting. If left blank, this video will use these default values.</span>
  971. </div>
  972. <div id="startDateGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  973. <input class="mdl-textfield__input" type="text" id="startDate"/>
  974. <label class="mdl-textfield__label" for="startDate">Start Date Range</label>
  975. </div>
  976. <div id="endDateGroup" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  977. <input class="mdl-textfield__input" type="text" id="endDate"/>
  978. <label class="mdl-textfield__label" for="endDate">End Date Range</label>
  979. </div>
  980. <div id="dateNullContainer" class="hidden form-warning">
  981. <span>This video will span for the entire length of the project if the Start and End date are left empty.</span>
  982. </div>
  983. <div class="checkboxGroup">
  984. <label id="checkWeekendGroup" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="weekend">
  985. <input id="weekend" type="checkbox" class="mdl-checkbox__input" checked>
  986. <span class="mdl-checkbox__label">Exclude Weekends</span>
  987. </label>
  988. </div>
  989. <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select fps-select">
  990. <input type="text" value="" class="mdl-textfield__input" id="fps" name="fps" value="10" readonly>
  991. <input type="hidden" value="" name="fpsWizard">
  992. <label for="fps" id="fpsLabel" class="mdl-textfield__label">Frames Per Second</label>
  993. <ul for="fps" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
  994. <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>
  995. <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>
  996. </ul>
  997. </div>
  998. <div class="form-warning">
  999. <span>Your video duration will be roughly <span class="videoDuration"></span> long with the current settings</span>
  1000. </div>
  1001. <div id="failContainer" class="hidden formDanger">
  1002. <span>There was an erorr processing your request. Please try submitting the form again.</span>
  1003. </div>
  1004. </form>
  1005. </div>
  1006. <div class="mdl-card__actions mdl-card--border">
  1007. <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="submitForm">Submit</button>
  1008. </div>
  1009. </div>
  1010. </div>
  1011.  
  1012. <input type="submit" name="ctl00$MainContent$BTsubmit" value="Submit" id="MainContent_BTsubmit" class="hidden" />
  1013. </center>
  1014.  
  1015. </div>
  1016. <div id="projectTemplate" class="hidden">
  1017. <div class="vid-card card-image mdl-card mdl-shadow--2dp card-background">
  1018. <div class="mdl-card__title mdl-card--expand"></div>
  1019. <div class="mdl-card__actions">
  1020. <span class="card-image__name">Image.jpg</span>
  1021. </div>
  1022. </div>
  1023. </div>
  1024. <div id="cameraTemplate" class="hidden">
  1025. <div class="vid-card card-image mdl-card mdl-shadow--2dp card-background">
  1026. <div class="mdl-card__title mdl-card--expand"></div>
  1027. <div class="mdl-card__actions">
  1028. <span class="card-image__name">Image.jpg</span>
  1029. </div>
  1030. </div>
  1031. </div>
  1032.  
  1033.  
  1034. </div>
  1035.  
  1036.  
  1037.  
  1038. </div>
  1039. <div class="footer">
  1040. <table class="NewTable">
  1041. <tr>
  1042. <td class="NewTableSpace"> RTI Systems Inc. - <span id="LabelVersion">V4.7.126.29154</span> </td>
  1043. <td class="NewTableSpace"> Phone: 213 599 8470</td>
  1044. <td class="NewTableSpace">
  1045. <a href="http://www.rtisystems.com" >www.RTISystems.com</a>
  1046. </td>
  1047. </tr>
  1048. </table>
  1049. </div>
  1050. </form>
  1051.  
  1052.  
  1053. <script src="js/material.min.js"></script>
  1054.  
  1055. </body>
  1056. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!