Skip to content

Instantly share code, notes, and snippets.

@Crista2019

Crista2019/overlay_graphics.html

Last active July 31, 2018 20:57
Show Gist options
  • Save Crista2019/8cca370781f086f31b5b9e79effc85c9 to your computer and use it in GitHub Desktop.
Save Crista2019/8cca370781f086f31b5b9e79effc85c9 to your computer and use it in GitHub Desktop.
Download ZIP
A few prototype dynamic visuals to model later (potentially in nicer, more professional sass)
Raw
overlay_graphics.html
<!DOCTYPE>
<HTML>
<head>
</head>
<body onload="runAllChanges()">
<style>
.bar {
height: 200px;
border: 5px solid black;
width: 90px;
}
#insideBlue {
max-height: 200px;
width: 85px;
margin-left: 2.5px;
height: 100px;
background-color: blue;
position: relative;
margin-top: 100px;
}
input {
width: 95px;
margin: 30px auto 0;
}
#blueText, #redText {
text-align: center;
color: white;
padding: 10px;
margin: 0px;
}
#greenText {
display: inline;
color: black;
padding: 10px;
margin: 0px;
}
.sphereContainer {
display: block;
width: 200px;
height: 200px;
}
#sphere {
display: block;
margin: 100px auto;
width: 200px;
height: 200px;
background-color: #990000;
border-radius: 50%;
background-image: -webkit-linear-gradient(-45deg, rgba(220,255,255,.45) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(220,255,255,.45) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(220,255,255,.45) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(220,255,255,.45) 0%, transparent 100%);
}
canvas {
display: block;
}
</style>
<script>
function runAllChanges() {
changeBlue();
changeRed();
changeGreen();
changeLine()
}
function changeBlue() {
document.getElementById("insideBlue").style.height = document.getElementById('rangeBlue').value+"px";
document.getElementById("insideBlue").style.marginTop = (200 - document.getElementById('rangeBlue').value)+"px";
if (document.getElementById('rangeBlue').value > 35) {
document.getElementById("blueText").innerHTML = document.getElementById('rangeBlue').value;
} else {
document.getElementById("blueText").innerHTML = "";
}
}
function changeRed() {
document.getElementById("sphere").style.width = document.getElementById('rangeRed').value+"px";
document.getElementById("sphere").style.height = document.getElementById('rangeRed').value+"px";
document.getElementById("sphere").marginTop = 200 - document.getElementById('rangeRed').value+"px";
document.getElementById("sphere").marginBottom = 200 - document.getElementById('rangeRed').value+"px";
if (document.getElementById('rangeRed').value > 50) {
document.getElementById("redText").innerHTML = document.getElementById('rangeRed').value;
} else {
document.getElementById("redText").innerHTML = "";
}
}
function changeGreen() {
var rect = dots.getBoundingClientRect();
var pointSize = document.getElementById('rangeGreen').value/20 + 1;
var ctx = document.getElementById("dots").getContext("2d");
ctx.fillStyle = "#49796B";
ctx.clearRect(0, 0, dots.width, dots.height);
document.getElementById("greenText").innerHTML = document.getElementById('rangeGreen').value;
for (var i = document.getElementById('rangeGreen').value; i--; i >= 0) {
var x = Math.floor(Math.random() * 300);
var y = Math.floor(Math.random() * 300);
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}
}
function changeLine() {
var xTop = document.getElementById("xLineTop").value;
var yTop = document.getElementById("yLineTop").value;
var xAvg = document.getElementById("xLineAvg").value;
var yAvg = document.getElementById("yLineAvg").value;
var xToe = document.getElementById("xLineToe").value;
var yToe = document.getElementById("yLineToe").value;
var c=document.getElementById("line");
var ctx=c.getContext("2d");
ctx.clearRect(0, 0, line.width, line.height);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(xTop,yTop);
ctx.lineTo(xAvg,yAvg);
ctx.lineTo(xToe,yToe);
ctx.shadowBlur=20;
ctx.shadowColor="black";
var gradient=ctx.createLinearGradient(0,0,300,200);
gradient.addColorStop("0","brown");
gradient.addColorStop("0.5","black");
gradient.addColorStop("1.0","gray");
ctx.strokeStyle=gradient;
ctx.lineWidth=10;
ctx.stroke();
}
</script>
<div class="bar">
<div id="insideBlue">
<h2 id="blueText"></h2>
</div>
</div>
<input onchange="changeBlue()" type="range" id="rangeBlue" min="0" max="200" value="100">
<h2>Visualization Overlay Option One (Bar)</h2>
<div class="sphereContainer">
<div id="sphere">
<h2 id="redText"></h2>
</div>
</div>
<input onchange="changeRed()" type="range" id="rangeRed" min="0" max="200" value="100">
<h2>Visualization Overlay Option Two (Sphere)</h2>
<canvas id="dots" width="300" height="300">
</canvas>
<input onchange="changeGreen()" type="range" id="rangeGreen" min="0" max="200" value="100">
<h2 id="greenText"></h2>
<h2>Visualization Overlay Option Three (Dots)</h2>
<canvas id="line" width="300" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<p>X1: <input type="number" id="xLineTop" min="0" max="300" value="100"></p>
<p>Y1: <input type="number" id="yLineTop" min="0" max="200" value="20"></p>
<p>X2: <input type="number" id="xLineAvg" min="0" max="300" value="200"></p>
<p>Y2: <input type="number" id="yLineAvg" min="0" max="200" value="180"></p>
<p>X3: <input type="number" id="xLineToe" min="0" max="300" value="300"></p>
<p>Y3: <input type="number" id="yLineToe" min="0" max="200" value="200"></p>
<button onmousedown="changeLine()">See</button>
<h2>Visualization Overlay Option Four (Line)</h2>
</body>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment