cstahr Posted March 12, 2015 Share Posted March 12, 2015 (edited) I have a Form that prompts for number values to calculate a number and draw circles on a grid, supposedly a silicon wafer and all the possible devices that can fit on a wafer of a given diameter. How can I pass dieX and dieY values to the drawShape() function below. Thank you. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title> DPW Calculator </title> <style> canvas { border: 2px solid black; } label, input { display: block; } label { padding-top: 20px; } </style></head><body><canvas id="mycanvas" width="445px" height="445px" ></canvas> <form onsubmit="return false" oninput="GDPW.value = parseInt(((parseInt(waferSize.value)/2 - parseInt(edgeLoss.value)) * (parseInt(waferSize.value)/2 - parseInt(edgeLoss.value)) * 3.1416) / (parseFloat(dieX.value)* parseFloat(dieY.value)));GDC.value= (parseInt(waferCost.value)/parseInt(GDPW.value)).toFixed(2);"> <b> <label>Wafer Size (mm) </label> <input name="waferSize" type="number" min=150 max=300 step=50 value="200"> <label>Edge Loss (mm)</label> <input name="edgeLoss" type="number" value="5" min=0 max=6> <label>Die Width (mm)</label> <input name="dieX" id="dieX" type="number" min=0 max=70> <label>Die Height (mm)</label> <input name="dieY" id="dieY" type="number" min=0 max=70 oninput="drawShape(dieX, dieY)"> <label>Wafer Cost</label> <input name="waferCost" type="number"> <label>Gross Dies Per Wafer</label> = <output name="GDPW" for="GDPW"></output> <label>Gross Cost per Die</label> = <output name="GDC" for="GDC"></output> </form><script type="text/javascript">function drawShape(dieX, dieY){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); //var dieX = 10 //var dieY = 10 var edgeLoss = 5 var waferSize = 200 var edgeLoss = 5 // Draw Wafer ctx.beginPath(); ctx.arc(220,220,waferSize,0,Math.PI*2,true); // Outer Edge ctx.arc(220,220,(waferSize-edgeLoss),0,Math.PI*2,true); // Good die edge ctx.stroke(); // Draw Dies for (var x = 1; x < 450; x += dieX) { ctx.moveTo(x, 0); ctx.lineTo(x, 440); } for (var y = 1; y < 450; y += dieY) { ctx.moveTo(0, y); ctx.lineTo(440, y); } ctx.strokeStyle = "#a9a9a9"; ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); }}</script></body></html> Edited April 16, 2015 by cstahr Link to comment Share on other sites More sharing options...
Ingolme Posted March 13, 2015 Share Posted March 13, 2015 There's no oninput event that I know of. You can use the onkeyup event. onkeyup="drawShape()" Inside the event handler you have to access the element and get its value: function drawShape() { var dieX = document.getElementById("dieX").value; var dieY = document.getElementById("dieY").value; Link to comment Share on other sites More sharing options...
cstahr Posted March 13, 2015 Author Share Posted March 13, 2015 Thank you, I tried your suggestion but did not work. onkeyup did not work for me, but I kept the oninput in HTML5, to invoke the function without the arguments ... <input name="dieY" id="dieY" type="number" min=0 max=70 oninput="drawShape()"> ... and used the getElementById suggestion: var dieX = document.getElementById("dieX").value; var dieY = document.getElementById("dieY").value; ... this started the grid drawing (good) but did not draw it correctly. Link to comment Share on other sites More sharing options...
Ingolme Posted March 14, 2015 Share Posted March 14, 2015 Whether it draws it correctly or not depends on if you gave it the right values. Link to comment Share on other sites More sharing options...
cstahr Posted March 16, 2015 Author Share Posted March 16, 2015 Thanks, I wish it was that. If I set the var var= value inside of the function it works OK. Howvere, if I enter the value in teh web page, using the form, the value I enter does not trickle down into the function. Feel free to try the HTML and javascript code Link to comment Share on other sites More sharing options...
Ingolme Posted March 16, 2015 Share Posted March 16, 2015 What does your current code look like? Link to comment Share on other sites More sharing options...
cstahr Posted March 17, 2015 Author Share Posted March 17, 2015 This is teh current code, with teh dieX and dieY values given inside the function. I would like dieX and dieY values to be taken from the form input. Thank you !! <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Dies per Wafer Calculator</title> <style> canvas { border: 2px solid black; } label, input { display: block; } label { padding-top: 20px; } </style></head><body><canvas id="mycanvas" width="445px" height="445px" ></canvas> <form onsubmit="return false" oninput="GDPW.value = parseInt(((parseInt(waferSize.value)/2 - parseInt(edgeLoss.value)) * (parseInt(waferSize.value)/2 - parseInt(edgeLoss.value)) * 3.1416) / (parseFloat(dieX.value)* parseFloat(dieY.value)));GDC.value= (parseInt(waferCost.value)/parseInt(GDPW.value)).toFixed(2);"> <b> <label>Wafer Size (mm) </label> <input name="waferSize" type="number" min=150 max=300 step=50 value="200"> <label>Edge Loss (mm)</label> <input name="edgeLoss" type="number" value="5" min=0 max=6> <label>Die Width (mm)</label> <input name="dieX" id="dieX" type="number" min=0 max=70> <label>Die Height (mm)</label> <input name="dieY" id="dieY" type="number" min=0 max=70 oninput="drawShape()"> <label>Wafer Cost</label> <input name="waferCost" type="number"> <label>Gross Dies Per Wafer</label> = <output name="GDPW" for="GDPW GDC"></output> <label>Gross Cost per Die</label> = <output name="GDC" for="GDPW GDC"></output> </form><script type="text/javascript">function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); var dieX = 10 var dieY = 8 var edgeLoss = 5 var waferSize = 200 var edgeLoss = 5 // Draw Wafer ctx.beginPath(); ctx.arc(220,220,waferSize,0,Math.PI*2,true); // Outer Edge ctx.arc(220,220,(waferSize-edgeLoss),0,Math.PI*2,true); // Good die edge ctx.stroke(); // Draw Dies for (var x = 1; x < 450; x += dieX) { ctx.moveTo(x, 0); ctx.lineTo(x, 440); } for (var y = 1; y < 450; y += dieY) { ctx.moveTo(0, y); ctx.lineTo(440, y); } ctx.strokeStyle = "#a9a9a9"; ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); }}</script></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted March 18, 2015 Share Posted March 18, 2015 I want to know what code you used to get the values from the form inputs. The one that's not working. I can't debug code that already works. Link to comment Share on other sites More sharing options...
davej Posted March 18, 2015 Share Posted March 18, 2015 Taken from the form inputs when? On what event? Why not add a button? Link to comment Share on other sites More sharing options...
cstahr Posted March 20, 2015 Author Share Posted March 20, 2015 (edited) I want to know what code you used to get the values from the form inputs. The one that's not working. I can't debug code that already works. This is the HTML5 input to acquire the dieX and dieY values: <label>Die Width (mm)</label> <input name="dieX" id="dieX" type="number" min=0 max=70> <label>Die Height (mm)</label> <input name="dieY" id="dieY" type="number" min=0 max=70 oninput="drawShape()"> ... once the dieY value is entered in the web page, the drawShape() function is invoked. I want to send the values in dieX and dieY into the function so it can draw a grid with dieX step and dieY step. As the code is now, I have set values inside of the function so it always draws a grid with steps of 8 and 10: var dieX = 10 var dieY = 8 ... therefore, I want these vars not to be set inside of the function but to bring them from the users' input in the form. Thank you again. I hope this is more clear now. Edited March 20, 2015 by cstahr Link to comment Share on other sites More sharing options...
Ingolme Posted March 21, 2015 Share Posted March 21, 2015 Yes, I already told you how to do that: There's no oninput event that I know of. You can use the onkeyup event. onkeyup="drawShape()" Inside the event handler you have to access the element and get its value: function drawShape() { var dieX = document.getElementById("dieX").value; var dieY = document.getElementById("dieY").value; You said it wasn't working, so I want you to show me the code you tried to use. Link to comment Share on other sites More sharing options...
cstahr Posted March 25, 2015 Author Share Posted March 25, 2015 Here is the code, as you suggested, but unfortunately id does not complete the drawing of the grid: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Dies per Wafer Calculator</title> <style> canvas { border: 2px solid black; } label, input { display: block; } label { padding-top: 20px; } </style></head><body><canvas id="mycanvas" width="445px" height="445px" ></canvas> <form onsubmit="return false" oninput="GDPW.value = parseInt(((parseInt(waferSize.value)/2 - parseInt(edgeLoss.value)) * (parseInt(waferSize.value)/2 - parseInt(edgeLoss.value)) * 3.1416) / (parseFloat(dieX.value)* parseFloat(dieY.value)));GDC.value= (parseInt(waferCost.value)/parseInt(GDPW.value)).toFixed(2);"> <b> <label>Wafer Size (mm) </label> <input name="waferSize" type="number" min=150 max=300 step=50 value="200"> <label>Edge Loss (mm)</label> <input name="edgeLoss" type="number" value="5" min=0 max=6> <label>Die Width (mm)</label> <input name="dieX" id="dieX" type="number" min=0 max=70> <label>Die Height (mm)</label> <input name="dieY" id="dieY" type="number" min=0 max=70 onkeyup="drawShape()"> <label>Wafer Cost</label> <input name="waferCost" type="number"> <label>Gross Dies Per Wafer</label> = <output name="GDPW" for="GDPW GDC"></output> <label>Gross Cost per Die</label> = <output name="GDC" for="GDPW GDC"></output> </form><script type="text/javascript">function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); //var dieX = 5 //var dieY = 7 var dieX = document.getElementById("dieX").value; var dieY = document.getElementById("dieY").value; var edgeLoss = 5 var waferSize = 200 // Draw Wafer ctx.beginPath(); ctx.arc(220,220,waferSize,0,Math.PI*2,true); // Outer Edge ctx.arc(220,220,(waferSize-edgeLoss),0,Math.PI*2,true); // Good die edge ctx.stroke(); // Draw Dies for (var x = 1; x < 450; x += dieX) { ctx.moveTo(x, 0); ctx.lineTo(x, 440); } for (var y = 1; y < 450; y += dieY) { ctx.moveTo(0, y); ctx.lineTo(440, y); } ctx.strokeStyle = "#a9a9a9"; ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); }}</script></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted March 25, 2015 Share Posted March 25, 2015 It looks like in your loop, x += dieX is actually doing a string operation. First x is "1", then it's "15" and then it's "155". To solve this, case dieX and dieY to numbers when you get their value from the field. var dieX = Number(document.getElementById("dieX").value);var dieY = Number(document.getElementById("dieY").value); You probably should have a button to activate the drawing function. Link to comment Share on other sites More sharing options...
cstahr Posted March 25, 2015 Author Share Posted March 25, 2015 Thank you, your assessment makes sense. I'll try it out. Link to comment Share on other sites More sharing options...
cstahr Posted March 28, 2015 Author Share Posted March 28, 2015 The only way I could see the numerical values go correctly into the function was to place them on the function call: For example: <button onclick="drawShape(8,9)">Draw Wafer</button> ... and the function would have the variable names: function drawShape(dieX, dieY){ As shown above, the drawing of the wafer in the canvas happens correctly. However, the values are not extracted correctly inside of the function when using getElementById var dieX = Number(document.getElementById("dieX").value);var dieY = Number(document.getElementById("dieY").value); I tried also using the above 2 lines outside of the function to try and send the dieX and dieY vars as follows: <label>Die Width (mm)</label> <input name="dieX" id="dieX" type="number" min=0 max=70> <label>Die Height (mm)</label> <input name="dieY" id="dieY" type="number" min=0 max=70> var dieX = Number(document.getElementById("dieX").value); var dieY = Number(document.getElementById("dieY").value); <button onclick="drawShape(dieX, dieY)">Draw Wafer</button> function drawShape(dieX, dieY){ . . . ... any further ideas? There has to be an easy way to do this but I'm probably not explaining my problem clearly enough. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2015 Share Posted March 28, 2015 You can't pass the elements as parameters to the function, but you can access them using getElementById(). This function should work: function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); var dieX = Number(document.getElementById("dieX").value); var dieY = Number(document.getElementById("dieY").value); var edgeLoss = 5; var waferSize = 200; // Draw Wafer ctx.beginPath(); ctx.arc(220,220,waferSize,0,Math.PI*2,true); // Outer Edge ctx.arc(220,220,(waferSize-edgeLoss),0,Math.PI*2,true); // Good die edge ctx.stroke(); // Draw Dies ctx.beginPath(); // Added this line for (var x = 1; x < 450; x += dieX) { ctx.moveTo(x, 0); ctx.lineTo(x, 440); } for (var y = 1; y < 450; y += dieY) { ctx.moveTo(0, y); ctx.lineTo(440, y); } ctx.strokeStyle = "#a9a9a9"; ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); }} Link to comment Share on other sites More sharing options...
cstahr Posted April 16, 2015 Author Share Posted April 16, 2015 Thank you Foxy Mod for your help. The getElementById worked just fine: var dieX = Number(document.getElementById("dieX").value); You can see it working here: www.andix.com Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now