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> 

  • Second we will add an input box.
    • This needs to have an id that matches the for in 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)
  • 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
• 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.
    • value is 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.