A Little Interaction.
Notes
- We are going to add an input box, a push button and make these work with the canvas.
- The input box
- reference.
- Or just keep the code you have been working on.
- We will add two elements to do this.
- First add a label.
- this really needs a single attribute,
for = some_valid_id - The value of the label is the content
- It needs a
</label> -
<label for="inset">Inset Value</label>
- this really needs a single attribute,
- Second we will add an input box.
- This needs to have an id that matches the
forin the label. - In addition, we need to set the type to be
number - Finally we can give it an initial
value - Note, with the label, this can be declared
-
</canvas> <br> <label for="inset">Inset Value <input id="inset" type=number" value="0"/> <br> - Note: input is a void element and can be closed as above.
- Note: "The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes." (mdn documentation)
- This needs to have an id that matches the
- Second we need to add an action
- There are several ways to do this.
- But for now, we will tie it to a button.
- Add the button
-
button reference.
- We will need to give it an id.
-
<button id="doit">Redraw
- reference.
- This is nice, but now we need to tie it in.
- in the script grab the elements
- Declare a global variable inset and set it to 10
- Set the inset Box input value to be inset
const width = canvas.width // gui const doitButton = document.getElementById("doit") const insetDataArea = document.getElementById("inset") let inset = 10; insetDataArea.value = inset - Next we need to register a callback.
- This is a function that gets called when the button is pressed.
- We do this with addEventListener.
- We will add this to the button.
- It takes two parameters
- The event type (click)
- The function we wish to call (ChangePicture)
- We will discuss events later, but ...
insetDataArea.value = inset doitButton.addEventListener("click",ChangePicture)- I added a
console.log("in change picture")to change picture to make sure it works.
- Nearly done, in change picture we need to grab the data forom the input box.
-
valueis the field we want. - But it is a string
- So javascript has a parseInt function
- and parseFloat
- Note, I am also using a function (min) from the math library.
-
function ChangePicture() { let tmpInset = parseInt(insetDataArea.value); if (tmpInset > 0 && tmpInset < Math.min(height/2, width/2)) { inset = tmpInset } else { insetDataArea.value = inset } console.log("Changing the inset to be ", inset); X(inset); } - This doesn't work completely
- We need to clear the canvas.
- clearRect.
- And we can modify ChangePicture to not redraw if we don't have a new good value.
function ChangePicture() { let tmpInset = parseInt(insetDataArea.value); if (tmpInset > 0 && tmpInset < Math.min(height/2, width/2)) { inset = tmpInset console.log("Changing the inset to be ", inset); ctx.clearRect(0,0, width, height); X(inset); } else { insetDataArea.value = inset } }
-
- My final code for this is available.