Skip to content

Use a modal #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
winstliu wants to merge 9 commits into
base: gh-pages
Choose a base branch
from
Open

Use a modal #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
abc4009
Display a modal for entering the functions
winstliu Mar 5, 2016
15a65ca
Fix some style issues
winstliu Mar 5, 2016
6de5274
Add a reset button
winstliu Mar 5, 2016
8fe0ba5
Minor stylistic changes
winstliu Mar 5, 2016
709d9b2
Octicons!
winstliu Mar 5, 2016
f775090
Merge remote-tracking branch 'gh-pages' into wl-modal
winstliu Mar 7, 2016
3c35141
:shirt: Lint
winstliu Mar 7, 2016
98f9022
Merge remote-tracking branch 'gh-pages' into wl-modal
winstliu Mar 9, 2016
b420b94
Merge remote-tracking branch 'refs/remotes/origin/gh-pages' into wl-m…
winstliu Sep 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 39 additions & 10 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,56 @@
body
{
font-family: 'Helvetica Neue', 'Helvetica', 'Ubuntu', 'Verdana', 'Arial', 'Roboto', 'Open Sans', sans-serif;
font-size: 14px;
margin: 0;
overflow: hidden;
}

p
a:hover, a:focus
{
margin-left: 8px;
text-decoration: none;
}

.functionInput
hr
{
width: 67px;
margin-top: 0;
margin-bottom: 15px;
}

.boundInput
#modal
{
width: 55px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: default;
}

.rotationInput
#menu
{
width: 100px;
width: 550px;
position: relative;
margin: 10% auto;
padding: 15px;
border-radius: 10px;
background-color: white;
}

.tip
{
padding-top: 10px;
}

.control-label
{
padding-right: 3px;
}

.col-sm-9
{
padding-left: 0;
}
96 changes: 71 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
<title>A solids of revolution graphing calculator</title>

<link rel="shortcut icon" href="https://lh6.googleusercontent.com/-eJP7CsCRims/AAAAAAAAAAI/AAAAAAAAAOE/9fdQHCWUWQs/s32-c-k-no/photo.jpg"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="vendor/css/octicons.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/2.7.0/math.min.js"></script>
Expand All @@ -19,30 +21,74 @@
</head>

<body>
<p id="form">
Rotate <input id="function1" class="functionInput" type="text" autofocus="autofocus" placeholder="function 1" name="function">
and <input id="function2" class="functionInput" type="text" placeholder="function 2" name="function">
bounded by <input id="bound1" class="boundInput" type="text" placeholder="bound 1" name="bounds">
and <input id="bound2" class="boundInput" type="text" placeholder="bound 2" name="bounds">
around <input id="rotation" class="rotationInput" type="text" placeholder="axis of rotation" name="rotation">
<button type="button" onclick="submit()">Rotate!</button>
<!-- <input id="rotate" type="range" onchange="rotate()" min="0" max="360" value="360" step="30"/> -->

<select id="quality">
<option value="0.5">Select Quality
<option value="1">Low
<option value="0.5">Medium
<option value="0.25">High
<option value="0.1">Ultra
</select>

<button type="button" onclick="reset()">Reset</button>
</p>

<p id="wip">
This calculator is a <a href="https://github.com/saxocellphone/Three" target="_blank"><b>work in progress</b></a> and things may not work as expected!
In addition, please note that some solids may take longer to graph than others.
</p>
<div id="modal">
<div id="menu">
<div class="form-horizontal">
<div class="form-group">
<label for="function1" class="col-sm-3 control-label">Rotate</label>
<div class="col-sm-9">
<input id="function1" class="form-control" type="text" autofocus="autofocus" placeholder="function 1" name="function">
</div>
</div>
<div class="form-group">
<label for="function2" class="col-sm-3 control-label">and</label>
<div class="col-sm-9">
<input id="function2" class="form-control" type="text" placeholder="function 2" name="function">
</div>
</div>
<div class="form-group">
<label for="bound1" class="col-sm-3 control-label">bounded by</label>
<div class="col-sm-9">
<input id="bound1" class="form-control" type="text" placeholder="bound 1" name="bounds">
</div>
</div>
<div class="form-group">
<label for="bound2" class="col-sm-3 control-label">and</label>
<div class="col-sm-9">
<input id="bound2" class="form-control" type="text" placeholder="bound 2" name="bounds">
</div>
</div>
<div class="form-group">
<label for="rotation" class="col-sm-3 control-label">around</label>
<div class="col-sm-9">
<input id="rotation" class="form-control" type="text" placeholder="axis of rotation" name="bounds">
</div>
</div>
<div class="form-group form-inline">
<div class="col-sm-offset-3">
<button type="submit" class="btn btn-primary" onclick="submit()">Rotate!</button>
<select id="quality" class="form-control">
<option value="1">Low</option>
<option value="0.5" selected="selected">Medium</option>
<option value="0.25">High</option>
<option value="0.1">Ultra</option>
</select>
<!-- <input id="rotate" type="range" onchange="rotate()" min="0" max="360" value="360" step="30"/> -->
<button type="button" class="btn btn-default" onclick="reset()">Reset</button>
<div class="text-muted tip">Tip: Press <kbd>Esc</kbd> to toggle this dialog</div>
</div>
</div>
</div>

<hr/>

<center><span class="text-muted footer">
This calculator is a <a href="https://github.com/saxocellphone/Three" target="_blank"><b>work in progress</b></a> and may not work as expected!
<br/>
In addition, please note that some solids may take longer to graph than others.
<br/><br/>
<a href="https://github.com/saxocellphone/Three"><span class="octicon octicon-pencil"></span></a>
with
<span class="octicon octicon-heart"></span>
by
<a href="https://github.com/saxocellphone">Victor</a>
and
<a href="https://github.com/50Wliu">Winston</a>
on
<a href="https://github.com/saxocellphone/Three"><span class="octicon octicon-logo-github"></span></a>.
</span></center>
</div>
</div>

<noscript>
<div id="javascript-error-message" style="font-family: monospace; font-size: 13px; font-weight: normal; text-align: center; background: none repeat scroll 0% 0% rgb(255, 255, 255); color: rgb(0, 0, 0); padding: 1.5em; width: 400px; margin: 5em auto 0px;">
Expand Down
55 changes: 40 additions & 15 deletions js/graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ class Graph
if(bound1 === bound2)
{
sweetAlert("Oh noes!", "We're still working on creating the solid when the bounds are equal.\nSorry about that :(", "warning");
toggleModal();
Graph.clear();
return;
}
Expand All @@ -245,6 +246,7 @@ class Graph
if(intersection !== undefined)
{
sweetAlert("Invalid bounds", "An intersection point was detected at approximately " + math.round(intersection, 2) + " which cannot be between the bounds", "warning");
toggleModal();
this.drawSupplementaryLine(intersection, {color: "red", dashSize: 1, gapSize: 1});
return;
}
Expand Down Expand Up @@ -283,6 +285,7 @@ class Graph
else
{
sweetAlert("Oh noes!", "Axis of rotation cannot be between the functions", "warning");
toggleModal();
Graph.clear();
return;
}
Expand Down Expand Up @@ -462,19 +465,15 @@ function init()
return;
}

const formID = document.getElementById("form");
const wipID = document.getElementById("wip");
const formHeight = formID.clientHeight + parseInt(window.getComputedStyle(formID).marginTop); //Bottom is already covered by wip's top margin
const wipHeight = wipID.clientHeight + parseInt(window.getComputedStyle(wipID).marginTop) + parseInt(window.getComputedStyle(wipID).marginBottom);
const totalHeight = formHeight + wipHeight;
window.addEventListener("keyup", onKeyUp, false);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / (window.innerHeight - totalHeight), 1, 1000);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 75;

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight - totalHeight);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

Expand Down Expand Up @@ -519,6 +518,7 @@ function submit() // eslint-disable-line
if(type1 !== type2 && type1 !== EquationType.EQUATION_NONE && type2 !== EquationType.EQUATION_NONE)
{
sweetAlert("Invalid equation type", "The second function should be a function of " + (type === EquationType.EQUATION_X ? "x" : "y"), "error");
toggleModal();
return;
}

Expand Down Expand Up @@ -551,6 +551,7 @@ function submit() // eslint-disable-line
{
const name = !bound1 ? "first bound" : !bound2 ? "second bound" : "axis of rotation";
sweetAlert("Missing " + name, "Please specify the " + name, "warning");
toggleModal();
drawSolid = false;
}
else
Expand Down Expand Up @@ -607,11 +608,13 @@ function getEquationType(equation, name)
else if(equation.length > 2)
{
sweetAlert("Malformed equation", "The " + name + " cannot have more than one equals sign", "error");
toggleModal();
return EquationType.EQUATION_INVALID;
}
else if(equation[0].trim() !== "")
{
sweetAlert("Invalid equation type", "The " + name + " should be a function of x or y", "error");
toggleModal();
return EquationType.EQUATION_INVALID;
}
return EquationType.EQUATION_NONE;
Expand Down Expand Up @@ -643,6 +646,7 @@ function parseEquation(equation, name, equationType, constant = true)
if(type !== equationType && name.includes("rotation") || type === equationType && !name.includes("rotation"))
{
sweetAlert("Incorrect equation type", "The " + name + " should be a function of " + (type === EquationType.EQUATION_X ? "y" : "x"), "error");
toggleModal();
return false;
}

Expand All @@ -652,13 +656,15 @@ function parseEquation(equation, name, equationType, constant = true)
if(math.abs(value) > size)
{
sweetAlert("Invalid " + name, "The " + name + " must be within " + -size + " to " + size + ", inclusive", "warning");
toggleModal();
return false;
}
return value;
}
catch(error)
{
sweetAlert("Invalid " + name, "Please enter a valid number for the " + name, "warning");
toggleModal();
return false;
}
}
Expand All @@ -672,6 +678,7 @@ function parseEquation(equation, name, equationType, constant = true)
catch(error) // Parsing can fail if unexpected values are passed in, eg '!', '(', '@', '.', etc.
{
sweetAlert("Invalid " + name, "Please enter a valid equation", "error");
toggleModal();
return false;
}

Expand All @@ -688,6 +695,7 @@ function parseEquation(equation, name, equationType, constant = true)
case "ObjectNode":
case "RangeNode":
sweetAlert("Invalid " + name, "Please make sure your equation is a valid function (detected " + node.type + ")", "error");
toggleModal();
valid = false;
return;
case "SymbolNode":
Expand All @@ -700,6 +708,7 @@ function parseEquation(equation, name, equationType, constant = true)
else
{
sweetAlert("Invalid " + name, "Unknown variable " + node.name, "error");
toggleModal();
valid = false;
return;
}
Expand All @@ -711,11 +720,13 @@ function parseEquation(equation, name, equationType, constant = true)
else
{
sweetAlert("Invalid " + name, "Unknown function " + node.name, "error");
toggleModal();
valid = false;
return;
}
case "FunctionAssignmentNode":
sweetAlert("Invalid " + name, "f(x) syntax is currently unsupported. Check back later!", "warning");
toggleModal();
valid = false;
return;
}
Expand All @@ -725,6 +736,26 @@ function parseEquation(equation, name, equationType, constant = true)
}
}

function toggleModal()
{
if(document.getElementById("modal").style.display === "none")
{
document.getElementById("modal").style.display = "block";
}
else
{
document.getElementById("modal").style.display = "none";
}
}

function onKeyUp(event)
{
if(event.keyCode === 27) //Escape
{
toggleModal();
}
}

function reset() //eslint-disable-line
{
Graph.clear();
Expand All @@ -740,15 +771,9 @@ function reset() //eslint-disable-line

window.onresize = function()
{
const formID = document.getElementById("form");
const wipID = document.getElementById("wip");
const formHeight = formID.clientHeight + parseInt(window.getComputedStyle(formID).marginTop); //Bottom is already covered by wip's top margin
const wipHeight = wipID.clientHeight + parseInt(window.getComputedStyle(wipID).marginTop) + parseInt(window.getComputedStyle(wipID).marginBottom);
const totalHeight = formHeight + wipHeight;

camera.aspect = window.innerWidth / (window.innerHeight - totalHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight - totalHeight);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
Graph.render();
};
Loading