You could reduce the number of button clicks
in the original code increasing these values…
``
c += 10; /* adjust value to suit /
c -= 10; / adjust value to suit */
_coothead_In other words, how would you put them side by side?
How would I move this to the right of the image?
It’ll be easier to operate zoom when the controls are to the right of the image.
<style>
#zoomer {
display: flex;
padding: 0.5em;
}
#playButton5 {
position: relative;
display: inline-block;
background-size: 100% auto;
background-image: url("https://i.imgur.com/qaEvk4G.png");
border: 3px solid blue;
}
[type="number"] {
width: 5em;
}
</style>
<div id="zoomer">
<label for="zoom">zoom</label>
<input id="zoom" type="range" step="1" min="0" max="1000" value="0">
<span id="rv">0</span>
</div>
<div id="playButton5" onclick="">
<svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">
<line stroke="red" x1="4" y1="122" x2="29" y2="122"></line>
<line stroke="orange" x1="38" y1="122" x2="108" y2="122"></line>
<line stroke="yellow" x1="83" y1="91" x2="188" y2="151"></line>
<line stroke="green" x1="135" y1="61" x2="135" y2="182"></line>
<line stroke="cyan" x1="82" y1="152" x2="187" y2="91"></line>
<line stroke="blue" x1="148" y1="98" x2="183" y2="38"></line>
<line stroke="purple" x1="187" y1="31" x2="199" y2="9"></line>
<line stroke="violet" x1="148" y1="145" x2="183" y2="205"></line>
<line stroke="magenta" x1="188" y1="213" x2="200" y2="233"></line>
<circle stroke="red" fill="black" cx="135" cy="122" r="24.5"></circle>
<rect stroke="lime" fill="orange" x="50" y="20" width="44" height="44"></rect>
</svg>
</div>
<p >
<select id="lines">
<option value="">Select a line</option>
</select>
<div id="shapes">
<p>Line
<label>x1:
<input type="number" id="x1">
</label>
<label>y1:
<input type="number" id="y1">
</label>
<label>x2:
<input type="number" id="x2">
</label>
<label>y2:
<input type="number" id="y2">
</label>
</p>
<p>Circle
<label>cx:
<input type="number" id="cx">
</label>
<label>cy:
<input type="number" id="cy">
</label>
<label>r:
<input type="number" id="r" step="0.01" min="0" max="800">
</label>
</p>
<p>Square
<label>x:
<input type="number" id="x">
</label>
<label>y:
<input type="number" id="y">
</label>
<label>width:
<input type="number" id="width">
</label>
<label>height:
<input type="number" id="height">
</label>
</p>
</div>
<div id="stroke">
<p>Stroke
<label> Viewed:
<input type="number" id="viewed" value="2" min="1" max="6">
</label>
<label> Active:
<input type="number" id="active" value="6" min="1" max="6">
</label>
</p>
</div>
<pre id="result">
</pre>
<pre id="result">
</pre>
<script>
var select = document.querySelector("#lines");
var isShiftedKey = false;
document.querySelectorAll("svg *").forEach(function(shape) {
var option = document.createElement("option");
if (shape.nodeName === "line") {
option.value = shape.getAttribute("stroke");
option.text = shape.getAttribute("stroke");
}
if (shape.nodeName === "circle") {
option.value = shape.getAttribute("fill");
option.text = shape.getAttribute("fill");
}
if (shape.nodeName === "rect") {
option.value = shape.getAttribute("stroke");
option.text = shape.getAttribute("stroke");
}
select.add(option);
});
function getShape(color) {
var shapeSelector = "svg [stroke='" + color + "']";
var shape = document.querySelector(shapeSelector);
if (!shape) {
shapeSelector = "svg [fill='" + color + "']";
shape = document.querySelector(shapeSelector);
}
return shape;
}
function setShapeWidth(line, size) {
line.setAttribute("stroke-width", size);
}
select.addEventListener("change", function(evt) {
var shape;
shape = getShape(this.value);
var fieldsToClear = ["x1", "y1", "x2", "y2", "cx", "cy", "r", "x", "y", "width", "height"];
fieldsToClear.forEach(id => document.getElementById(id).value = "");
if (shape.nodeName === "line") {
document.getElementById("x1").value = shape.getAttribute("x1");
document.getElementById("y1").value = shape.getAttribute("y1");
document.getElementById("x2").value = shape.getAttribute("x2");
document.getElementById("y2").value = shape.getAttribute("y2");
}
if (shape.nodeName === "circle") {
document.getElementById("cx").value = shape.getAttribute("cx");
document.getElementById("cy").value = shape.getAttribute("cy");
document.getElementById("r").value = shape.getAttribute("r");
}
if (shape.nodeName === "rect") {
document.getElementById("x").value = shape.getAttribute("x");
document.getElementById("y").value = shape.getAttribute("y");
document.getElementById("width").value = shape.getAttribute("width");
document.getElementById("height").value = shape.getAttribute("height");
}
var svg = document.querySelector(".initial");
var strokeWidth = svg.getAttribute("stroke-width") || document.getElementById("viewed").value;
document.getElementById("viewed").value = strokeWidth;
});
function escapeHTML(html) {
return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
}
function showSVGCode() {
var code = document.querySelector("svg").innerHTML;
document.getElementById("result").innerHTML = escapeHTML(code);
}
function updateShape(evt) {
var input = evt.target;
var shape = getShape(select.options[select.selectedIndex].value);
if (!shape) {
return;
}
shape.setAttribute(input.id, input.value);
showSVGCode();
return;
}
function strokeHandler(evt) {
var viewed = document.getElementById("viewed").value;
document.querySelector(".initial").setAttribute("stroke-width", viewed);
}
Array.from(document.querySelectorAll("#shapes input")).forEach(function(input) {
input.addEventListener("click", updateShape);
input.addEventListener("keyup", updateShape);
});
Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
input.addEventListener("click", strokeHandler);
input.addEventListener("mousewheel", strokeHandler);
input.addEventListener("DOMMouseScroll", strokeHandler);
input.addEventListener("keyup", strokeHandler);
});
/*************************** Zoom code ***************************/
var svg = document.getElementsByTagName('svg')[0];
var w = parseFloat(svg.getAttribute('width'));
var h = parseFloat(svg.getAttribute('height'));
document.getElementById('zoom').addEventListener('change',
function() {
document.getElementById('rv').textContent = this.value;
svg.setAttribute('width', w + this.valueAsNumber);
svg.setAttribute('height', h + this.valueAsNumber * h / w);
}, false);
/******************************************************************/
</script>
Are you saying that you want this…
…to be positioned to the right of the svg?
coothead
yes, exactly.
<style>
#zoomer {
display: flex;
padding: 0.5em;
}
#playButton5 {
position: relative;
display: inline-block;
background-size: 100% auto;
background-image: url("https://i.imgur.com/qaEvk4G.png");
border: 3px solid blue;
}
[type="number"] {
width: 5em;
}
#labels-container {
display: inline-block;
margin-left: 1em;
vertical-align: top; /* or middle or bottom depending on your taste */
}
</style>
<div id="zoomer">
<label for="zoom">zoom</label>
<input id="zoom" type="range" step="1" min="0" max="1000" value="0">
<span id="rv">0</span>
</div>
<div id="playButton5">
<svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">
<line stroke="red" x1="4" y1="122" x2="29" y2="122"></line>
<line stroke="orange" x1="38" y1="122" x2="108" y2="122"></line>
<line stroke="yellow" x1="83" y1="91" x2="188" y2="151"></line>
<line stroke="green" x1="135" y1="61" x2="135" y2="182"></line>
<line stroke="cyan" x1="82" y1="152" x2="187" y2="91"></line>
<line stroke="blue" x1="148" y1="98" x2="183" y2="38"></line>
<line stroke="purple" x1="187" y1="31" x2="199" y2="9"></line>
<line stroke="violet" x1="148" y1="145" x2="183" y2="205"></line>
<line stroke="magenta" x1="188" y1="213" x2="200" y2="233"></line>
<circle stroke="red" fill="black" cx="135" cy="122" r="24.5"></circle>
<rect stroke="lime" fill="orange" x="50" y="20" width="44" height="44"></rect>
</svg>
</div>
<div id="labels-container">
<p>
<select id="lines">
<option value="">Select a line</option>
</select>
<div id="shapes">
<p>Line
<label>x1:
<input type="number" id="x1">
</label>
<label>y1:
<input type="number" id="y1">
</label>
<label>x2:
<input type="number" id="x2">
</label>
<label>y2:
<input type="number" id="y2">
</label>
</p>
<p>Circle
<label>cx:
<input type="number" id="cx">
</label>
<label>cy:
<input type="number" id="cy">
</label>
<label>r:
<input type="number" id="r" step="0.01" min="0" max="800">
</label>
</p>
<p>Square
<label>x:
<input type="number" id="x">
</label>
<label>y:
<input type="number" id="y">
</label>
<label>width:
<input type="number" id="width">
</label>
<label>height:
<input type="number" id="height">
</label>
</p>
</div>
<div id="stroke">
<p>Stroke
<label> Viewed:
<input type="number" id="viewed" value="2" min="1" max="6">
</label>
<label> Active:
<input type="number" id="active" value="6" min="1" max="6">
</label>
</p>
</div>
<pre id="result"></pre>
</div>
<script>
var select = document.querySelector("#lines");
var isShiftedKey = false;
document.querySelectorAll("svg *").forEach(function(shape) {
var option = document.createElement("option");
if (shape.nodeName === "line") {
option.value = shape.getAttribute("stroke");
option.text = shape.getAttribute("stroke");
}
if (shape.nodeName === "circle") {
option.value = shape.getAttribute("fill");
option.text = shape.getAttribute("fill");
}
if (shape.nodeName === "rect") {
option.value = shape.getAttribute("stroke");
option.text = shape.getAttribute("stroke");
}
select.add(option);
});
function getShape(color) {
var shapeSelector = "svg [stroke='" + color + "']";
var shape = document.querySelector(shapeSelector);
if (!shape) {
shapeSelector = "svg [fill='" + color + "']";
shape = document.querySelector(shapeSelector);
}
return shape;
}
function setShapeWidth(line, size) {
line.setAttribute("stroke-width", size);
}
select.addEventListener("change", function(evt) {
var shape;
shape = getShape(this.value);
var fieldsToClear = ["x1", "y1", "x2", "y2", "cx", "cy", "r", "x", "y", "width", "height"];
fieldsToClear.forEach(id => document.getElementById(id).value = "");
if (shape.nodeName === "line") {
document.getElementById("x1").value = shape.getAttribute("x1");
document.getElementById("y1").value = shape.getAttribute("y1");
document.getElementById("x2").value = shape.getAttribute("x2");
document.getElementById("y2").value = shape.getAttribute("y2");
}
if (shape.nodeName === "circle") {
document.getElementById("cx").value = shape.getAttribute("cx");
document.getElementById("cy").value = shape.getAttribute("cy");
document.getElementById("r").value = shape.getAttribute("r");
}
if (shape.nodeName === "rect") {
document.getElementById("x").value = shape.getAttribute("x");
document.getElementById("y").value = shape.getAttribute("y");
document.getElementById("width").value = shape.getAttribute("width");
document.getElementById("height").value = shape.getAttribute("height");
}
var svg = document.querySelector(".initial");
var strokeWidth = svg.getAttribute("stroke-width") || document.getElementById("viewed").value;
document.getElementById("viewed").value = strokeWidth;
});
function escapeHTML(html) {
return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
}
function showSVGCode() {
var code = document.querySelector("svg").innerHTML;
document.getElementById("result").innerHTML = escapeHTML(code);
}
function updateShape(evt) {
var input = evt.target;
var shape = getShape(select.options[select.selectedIndex].value);
if (!shape) {
return;
}
shape.setAttribute(input.id, input.value);
showSVGCode();
return;
}
function strokeHandler(evt) {
var viewed = document.getElementById("viewed").value;
document.querySelector(".initial").setAttribute("stroke-width", viewed);
}
Array.from(document.querySelectorAll("#shapes input")).forEach(function(input) {
input.addEventListener("click", updateShape);
input.addEventListener("keyup", updateShape);
});
Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
input.addEventListener("click", strokeHandler);
input.addEventListener("mousewheel", strokeHandler);
input.addEventListener("DOMMouseScroll", strokeHandler);
input.addEventListener("keyup", strokeHandler);
});
/*************************** Zoom code ***************************/
var svg = document.getElementsByTagName('svg')[0];
var w = parseFloat(svg.getAttribute('width'));
var h = parseFloat(svg.getAttribute('height'));
document.getElementById('zoom').addEventListener('change',
function() {
document.getElementById('rv').textContent = this.value;
svg.setAttribute('width', w + this.valueAsNumber);
svg.setAttribute('height', h + this.valueAsNumber * h / w);
}, false);
/******************************************************************/
</script>
coothead
1 Like
How would I place the results below the image?
<line stroke="red" x1="4" y1="122" x2="29" y2="122"></line>
<line stroke="orange" x1="38" y1="122" x2="108" y2="122"></line>
<line stroke="yellow" x1="83" y1="91" x2="188" y2="151"></line>
<line stroke="green" x1="135" y1="61" x2="135" y2="182"></line>
<line stroke="cyan" x1="164" y1="208" x2="187" y2="91"></line>
<line stroke="blue" x1="148" y1="98" x2="183" y2="38"></line>
<line stroke="purple" x1="187" y1="31" x2="199" y2="9"></line>
<line stroke="violet" x1="148" y1="145" x2="183" y2="205"></line>
<line stroke="magenta" x1="188" y1="213" x2="200" y2="233"></line>
<circle stroke="red" fill="black" cx="135" cy="122" r="24.5"></circle>
<rect stroke="lime" fill="orange" x="50" y="20" width="44" height="44"></rect>
Change this…
</div>
<pre id="result"></pre>
</div>
…to this…
</div>
</div>
<pre id="result"></pre>
coothead
1 Like
How would I make the inputs wrap when they get too close to the right of the screen?
You could do this…
<style>
#zoomer {
display: flex;
padding: 0.5em;
}
#playButton5 {
position: relative;
float:left;
margin-right:1em;
background-size: 100% auto;
background-image: url("https://i.imgur.com/qaEvk4G.png");
border: 3px solid blue;
}
[type="number"] {
width: 5em;
}
label{
display: inline-block;
vertical-align: top;/* or middle or bottom depending on your taste */
}
</style>
<div id="zoomer">
<label for="zoom">zoom</label>
<input id="zoom" type="range" step="1" min="0" max="1000" value="0">
<span id="rv">0</span>
</div>
<div id="playButton5">
<svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">
<line stroke="red" x1="4" y1="122" x2="29" y2="122"></line>
<line stroke="orange" x1="38" y1="122" x2="108" y2="122"></line>
<line stroke="yellow" x1="83" y1="91" x2="188" y2="151"></line>
<line stroke="green" x1="135" y1="61" x2="135" y2="182"></line>
<line stroke="cyan" x1="82" y1="152" x2="187" y2="91"></line>
<line stroke="blue" x1="148" y1="98" x2="183" y2="38"></line>
<line stroke="purple" x1="187" y1="31" x2="199" y2="9"></line>
<line stroke="violet" x1="148" y1="145" x2="183" y2="205"></line>
<line stroke="magenta" x1="188" y1="213" x2="200" y2="233"></line>
<circle stroke="red" fill="black" cx="135" cy="122" r="24.5"></circle>
<rect stroke="lime" fill="orange" x="50" y="20" width="44" height="44"></rect>
</svg>
</div>
<p>
<select id="lines">
<option value="">Select a line</option>
</select>
</p>
<div id="shapes">
<p>Line
<label>x1:
<input type="number" id="x1">
</label>
<label>y1:
<input type="number" id="y1">
</label>
<label>x2:
<input type="number" id="x2">
</label>
<label>y2:
<input type="number" id="y2">
</label>
</p>
<p>Circle
<label>cx:
<input type="number" id="cx">
</label>
<label>cy:
<input type="number" id="cy">
</label>
<label>r:
<input type="number" id="r" step="0.01" min="0" max="800">
</label>
</p>
<p>Square
<label>x:
<input type="number" id="x">
</label>
<label>y:
<input type="number" id="y">
</label>
<label>width:
<input type="number" id="width">
</label>
<label>height:
<input type="number" id="height">
</label>
</p>
</div>
<div id="stroke">
<p>Stroke
<label> Viewed:
<input type="number" id="viewed" value="2" min="1" max="6">
</label>
<label> Active:
<input type="number" id="active" value="6" min="1" max="6">
</label>
</p>
</div>
<pre id="result"></pre>
<script>
var select = document.querySelector("#lines");
var isShiftedKey = false;
document.querySelectorAll("svg *").forEach(function(shape) {
var option = document.createElement("option");
if (shape.nodeName === "line") {
option.value = shape.getAttribute("stroke");
option.text = shape.getAttribute("stroke");
}
if (shape.nodeName === "circle") {
option.value = shape.getAttribute("fill");
option.text = shape.getAttribute("fill");
}
if (shape.nodeName === "rect") {
option.value = shape.getAttribute("stroke");
option.text = shape.getAttribute("stroke");
}
select.add(option);
});
function getShape(color) {
var shapeSelector = "svg [stroke='" + color + "']";
var shape = document.querySelector(shapeSelector);
if (!shape) {
shapeSelector = "svg [fill='" + color + "']";
shape = document.querySelector(shapeSelector);
}
return shape;
}
function setShapeWidth(line, size) {
line.setAttribute("stroke-width", size);
}
select.addEventListener("change", function(evt) {
var shape;
shape = getShape(this.value);
var fieldsToClear = ["x1", "y1", "x2", "y2", "cx", "cy", "r", "x", "y", "width", "height"];
fieldsToClear.forEach(id => document.getElementById(id).value = "");
if (shape.nodeName === "line") {
document.getElementById("x1").value = shape.getAttribute("x1");
document.getElementById("y1").value = shape.getAttribute("y1");
document.getElementById("x2").value = shape.getAttribute("x2");
document.getElementById("y2").value = shape.getAttribute("y2");
}
if (shape.nodeName === "circle") {
document.getElementById("cx").value = shape.getAttribute("cx");
document.getElementById("cy").value = shape.getAttribute("cy");
document.getElementById("r").value = shape.getAttribute("r");
}
if (shape.nodeName === "rect") {
document.getElementById("x").value = shape.getAttribute("x");
document.getElementById("y").value = shape.getAttribute("y");
document.getElementById("width").value = shape.getAttribute("width");
document.getElementById("height").value = shape.getAttribute("height");
}
var svg = document.querySelector(".initial");
var strokeWidth = svg.getAttribute("stroke-width") || document.getElementById("viewed").value;
document.getElementById("viewed").value = strokeWidth;
});
function escapeHTML(html) {
return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
}
function showSVGCode() {
var code = document.querySelector("svg").innerHTML;
document.getElementById("result").innerHTML = escapeHTML(code);
}
function updateShape(evt) {
var input = evt.target;
var shape = getShape(select.options[select.selectedIndex].value);
if (!shape) {
return;
}
shape.setAttribute(input.id, input.value);
showSVGCode();
return;
}
function strokeHandler(evt) {
var viewed = document.getElementById("viewed").value;
document.querySelector(".initial").setAttribute("stroke-width", viewed);
}
Array.from(document.querySelectorAll("#shapes input")).forEach(function(input) {
input.addEventListener("click", updateShape);
input.addEventListener("keyup", updateShape);
});
Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
input.addEventListener("click", strokeHandler);
input.addEventListener("mousewheel", strokeHandler);
input.addEventListener("DOMMouseScroll", strokeHandler);
input.addEventListener("keyup", strokeHandler);
});
/*************************** Zoom code ***************************/
var svg = document.getElementsByTagName('svg')[0];
var w = parseFloat(svg.getAttribute('width'));
var h = parseFloat(svg.getAttribute('height'));
document.getElementById('zoom').addEventListener('change',
function() {
document.getElementById('rv').textContent = this.value;
svg.setAttribute('width', w + this.valueAsNumber);
svg.setAttribute('height', h + this.valueAsNumber * h / w);
}, false);
/******************************************************************/
</script>
…if you like, but it all looks rather messy to me. 
coothead
1 Like
Zooming In/Out instantaneously
from this:
document.getElementById('zoom').addEventListener('change',
to this:
document.getElementById('zoom').addEventListener('input',
Hi there asasass,
very well “Googled”. 
We can learn something new everyday!!! 
It certainly makes the zoom 100% better. 
coothead
I believe that was inspired from work that he and I were doing yesterday where several events like mousewheel, DOMMouseScroll, and keyup where all able to be replaced with only one single input event. 
3 Likes
It was sadly remiss of asasass not to credit you with the
discovery of this, unbeknown to me, event handler. 
He/she is a very, very, naughty boy/girl. 
/ 
On the other hand you are a… 
coothead
2 Likes
As seem on here where you can drag the circles around with your mouse.
Can this be set up so that the controls can be dragged across the screen with the mouse?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.