Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
Intall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="jumbotron text-center"> <h1>How long will it render?!</h1> <p>Calculate your rendertime.</p></div><div class="container"> <div class="row"> <div class="col-md-4"> <h3>Time to render 1 frame:</h3> <div class="row"> <div class="col-sm-6"> <p>Minutes</p> <input type="text" class="form-control" id="curMin" value="0"> </div> <div class="col-sm-6"> <p>Seconds</p> <input type="text" class="form-control col-xs-4" id="curSec" value="50"> </div> </div> </div> <div class="col-md-4"> <h3>Duration of animation:</h3> <div class="row"> <div class="col-sm-6"> <p>From (frame)</p> <input type="text" class="form-control calculateFrameFirst" id="frameFrom" value="0"> </div> <div class="col-sm-6"> <p>To (frame)</p> <input type="text" class="form-control col-xs-4 calculateFrameFirst" id="frameTo" value="250"> </div> <div class="col-sm-12"> <p> </p> </div> <div class="col-sm-4"> <p>Minutes</p> <input type="text" class="form-control calculateTimeFirst" id="minuteTo" value="0"> </div> <div class="col-sm-4"> <p>Seconds</p> <input type="text" class="form-control col-xs-4 calculateTimeFirst" id="secondTo" value="10"> </div> <div class="col-sm-4"> <p>FPS</p> <input type="text" class="form-control col-xs-4 calculateTimeFirst" id="fps" value="25"> </div> </div> </div> <div class="col-md-4"> <h3>Total time rendering</h3> <div class="row"> <div class="col-sm-12 text-center"> <h3 class="alert alert-success" id="totalTime"></h3> </div> </div> </div> </div> <div class="row"> <h3> </h3> </div> <div class="row"> <div class="col-md-4"> <h3>When will you start</h3> <div class="row"> <div class="col-sm-4"> <p>Year</p> <input type="text" class="form-control" id="startYear" value=""> </div> <div class="col-sm-4"> <p>Month</p> <input type="text" class="form-control col-xs-4" id="startMonth" value=""> </div> <div class="col-sm-4"> <p>Day</p> <input type="text" class="form-control col-xs-4" id="startDate" value=""> </div> </div> </div> <div class="col-md-4"> <h3> </h3> <div class="row"> <div class="col-sm-4"> <p>Hour</p> <input type="text" class="form-control" id="startHour" value="0"> </div> <div class="col-sm-4"> <p>Minutes</p> <input type="text" class="form-control col-xs-4" id="startMinute" value=""> </div> <div class="col-sm-4"> <!-- <p>Seconds</p> <input type="text" class="form-control col-xs-4" id="startSecond" value=""> --> <p> </p> <input type="button" class="btn btn-dark" id="resetNow" value="Now"> <!-- <input type="text" class="form-control col-xs-4" id="startSecond" value=""> <div> <a class="btn btn-dark" href="#" role="button">Now</a></div> --> </div> </div> </div> <div class="col-md-4"> <h3>End</h3> <div class="row"> <div class="col-sm-12 text-center"> <!-- <p>Last frame will be rendered</p> --> <!-- <p> </p> --> <h3 class="alert alert-success" id="finishTime"></h3> <!-- <input type="text" class="form-control" value="0" > --> </div> </div> </div> <div class="col-md-12"> <input type="text" class="form-control invisible" id="debugInput"> <h3> </h3> </div> </div> </div> <div class="jumbotron text-center"> <h1>But also BPM magic!</h1> <p>Calculate bpm and frame stuff.</p> </div><div class="container"> <div class="row"> <div class="col-md-3"> <h3>BPM to frames</h3> <div class="row"> <div class="col-sm-6"> <p>BPM</p> <input type="text" class="form-control" id="BPM" value="120"> </div> <div class="col-sm-6"> <p>FPS</p> <input type="text" class="form-control col-xs-4 calculateBpmFpsFirst" id="bpmfps" value="25"> </div> </div> </div> <div class="col-md-9"> <h3> </h3> <div class="row"> <div class="col-sm-4 text-center"> <!-- <p>Last frame will be rendered</p> --> <!-- <p> </p> --> <h3 class="alert alert-success" id="framesPerBeat"></h3> <!-- <input type="text" class="form-control" value="0" > --> </div> <div class="col-sm-4 text-center"> <!-- <p>Last frame will be rendered</p> --> <!-- <p> </p> --> <h3 class="alert alert-success" id="framesPerBar"></h3> <!-- <input type="text" class="form-control" value="0" > --> </div> <div class="col-sm-4 text-center"> <!-- <p>Last frame will be rendered</p> --> <!-- <p> </p> --> <h3 class="alert alert-success" id="framesPer4Bars"></h3> <!-- <input type="text" class="form-control" value="0" > --> </div> </div> </div> </div> </div> </body></html>xxxxxxxxxx@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);*,:after,:before { box-sizing: border-box; padding: 0; margin: 0;}@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700'; button { padding: 5px; font-family: "Open Sans", "Helvetica", "Arial", sans-serif; position: absolute; color: white; background-color: black; left: 50vw; transform: translate(-50%,-50%); }xxxxxxxxxxconsole.log("Event Fired")$(document).ready(function() { initiateTime(); var frameFrom = 0; var frameTo = 250; var minuteTo = 0; var secondTo = 10; var fps = 25; var now; calculateTime(); i = 0; $(".calculateBpmFpsFirst").on("change paste keyup", function() { fps = +$("#bpmfps").val(); $("#fps").val(fps); }); $("input").change(function() { calculateTime(); }); $("input").keyup(function() { calculateTime(); }); $("#resetNow").click(function() { initiateTime(); calculateTime(); }); $(".calculateFrameFirst").on("change paste keyup", function() { // alert($(this).val()); frameFrom = +$("#frameFrom").val(); frameTo = +$("#frameTo").val(); fps = +$("#fps").val(); var totalSecondDuration = Math.floor((frameTo - frameFrom + 1) / fps); minuteTo = Math.floor(totalSecondDuration / 60); secondTo = totalSecondDuration - (minuteTo * 60); $("#minuteTo").val(minuteTo); $("#secondTo").val(secondTo); calculateTime(); }); $(".calculateTimeFirst").on("change paste keyup", function() { minuteTo = +$("#minuteTo").val(); secondTo = +$("#secondTo").val(); fps = +$("#fps").val(); var totalFrameDuration = (secondTo + (minuteTo * 60))*fps; frameTo = frameFrom + totalFrameDuration; $("#frameTo").val(frameTo); calculateTime(); }); function calculateTime() { adjustStartTime(); var curMin = +$("#curMin").val(); var curSec = +$("#curSec").val(); //+ converts string to number var curTotal = curMin * 60 + curSec; // var frameFrom = +$("#frameFrom").val(); //THIS // var frameTo = +$("#frameTo").val(); //THIS var frameTotal = frameTo - frameFrom + 1; //$('#fromFrame').val(i += 1); var totalTime = curTotal * frameTotal; $("#debugInput").val( "curMin: " + curMin + " curSec: " + curSec + " curTutal: " + curTotal + " frameFrom: " + frameFrom + " frameTo: " + frameTo + " frameTotal: " + frameTotal + " totalTime: " + totalTime ); totalTimeFormat = secondsTimeSpanToHMS(totalTime); $("#totalTime").text(totalTimeFormat); var finishTime = moment(now) .add(totalTime, "s") .format("dddd, MMM Do YYYY, HH:mm"); $("#finishTime").text(finishTime); $("#bpmfps").val(fps); calculateBPM(); } function calculateBPM(){ var BPM = +$("#BPM").val(); fps = +$("#bpmfps").val(); var BeatsPerSecond = BPM / 60; var FramesPerBeat = fps/BeatsPerSecond; console.log ("bps = " + BPM + " fr per beat = " + fps); var FramesPerBeatRounded = FramesPerBeat.toFixed(2); var FramesPerBarRounded = (FramesPerBeat.toFixed(2)) * 4; var FramesPer4BarsRounded = (FramesPerBeat.toFixed(2)) * 4 * 4; $("#framesPerBeat").text("1 beat = " + FramesPerBeatRounded + " frames."); $("#framesPerBar").text("1 bar = " + FramesPerBarRounded + " frames."); $("#framesPer4Bars").text("4 bars = " + FramesPer4BarsRounded + " frames."); } function initiateTime() { now = moment(); $("#startYear").val(moment().year()); $("#startMonth").val(moment().month() + 1); $("#startDate").val(moment().date()); $("#startHour").val(moment().hour()); $("#startMinute").val(moment().minute()); // $("#startSecond").val(moment().second()); } function adjustStartTime() { // now = moment({year: $("#startYear").val(), month: ($("#startMonth").val()-1), date: $("#startDate").val(), hour: $("#startHour").val(), minute: $("#startMinute").val(), seconds: $("#startSecond").val()}); now = moment({ year: $("#startYear").val(), month: $("#startMonth").val() - 1, date: $("#startDate").val(), hour: $("#startHour").val(), minute: $("#startMinute").val() }); }});function secondsTimeSpanToHMS(s) { var d = Math.floor(s / 86400); //Get whole days s -= d * 86400; var h = Math.floor(s / 3600); //Get whole hours s -= h * 3600; var m = Math.floor(s / 60); //Get remaining minutes s -= m * 60; return ( (d == 0 ? "" : d + " day" + (d == 1 ? "" : "s") + " ") + (h == 0 ? "" : h + " hour" + (h == 1 ? "" : "s") + " ") + (m == 0 ? "" : m + " minute" + (m == 1 ? "" : "s") + " ") + (s == 0 ? "" : s + " second" + (s == 1 ? "" : "s") + " ") ); //zero padding on minutes and seconds}