Graphics example 2 - Wacky Drumkit

Graphics can also be used to add clickable "hotspots" to an image. In the example, each of the drums has an invisible rectangle in front of it. Because graphical elements are regular HTML components they can detect mouse clicks, so when you click the drum it runs another part of the script, in this case to play a sound.

Here's the script for the page. It sets up 2 arrays - Sound and Button - each with 7 elements, one for each of the drums. Each drum has a different sound; these are MP3 files loaded from the server. When on click is applied to an array, each of the elements of the array will be set up to handle a click on the corresponding element. When this happens the system sets the index of the array to the element clicked and performs the actions specified for the array; in this case to play a sound. The Sound array has the same number of elements as the Button array, so the script gets the index of the clicked element, sets the Sound array to that index and plays the sound.

On a mobile device the graphic is smaller than on a PC, so the script first finds the actual width of the page. From that point on, all sizes and positions are related to that width. The code starts with a square of 500x500 pixels and bases all calculations on the button sizes and positions for that width.

Graphics - Intro
Graphics example 2 - Calculator
Graphics example 4 - Solitaire
Graphics example 5 - A factory simulation

<div id="ec-container" style="margin:0 auto;background-image:url(https://easycoder.software/public/drumkit.jpg);background-size:500px"></div>

<!-- EasyCoder script =========================================================-->
<pre id="easycoder-script" style="display: none;">!
! Wacky Drumkit

  audioclip Sound
  div Container
  svg Stage
  rect Button
  variable Width
  variable X
  variable Y
  variable W
  variable H

  attach Container to `ec-container`

  put 500 into Width
  set style `width` of Container to Width cat `px`
  set style `height` of Container to Width cat `px`
  set style `background-size` of Container to Width cat `px`

  set the elements of Sound to 7
  set the elements of Button to 7

! Build the array of sounds
  index Sound to 0
  create Sound from `https://easycoder.software/public/sounds/quack.mp3`
  index Sound to 1
  create Sound from `https://easycoder.software/public/sounds/honk.mp3`
  index Sound to 2
  create Sound from `https://easycoder.software/public/sounds/huh.mp3`
  index Sound to 3
  create Sound from `https://easycoder.software/public/sounds/boing.mp3`
  index Sound to 4
  create Sound from `https://easycoder.software/public/sounds/glass.mp3`
  index Sound to 5
  create Sound from `https://easycoder.software/public/sounds/bell.mp3`
  index Sound to 6
  create Sound from `https://easycoder.software/public/sounds/bark.mp3`

  create Stage in Container

! Button 0
  multiply Width by 78 giving X
  divide X by 500
  multiply Width by 10 giving Y
  divide Y by 500
  multiply Width by 110 giving W
  divide W by 500
  multiply Width by 80 giving H
  divide H by 500
  index Button to 0
  gosub to CreateButton

! Button 1
  multiply Width by 353 giving X
  divide X by 500
  multiply Width by 29 giving Y
  divide Y by 500
  multiply Width by 115 giving W
  divide W by 500
  multiply Width by 80 giving H
  divide H by 500
  index Button to 1
  gosub to CreateButton

! Button 2
  multiply Width by 20 giving X
  divide X by 500
  multiply Width by 118 giving Y
  divide Y by 500
  multiply Width by 115 giving W
  divide W by 500
  multiply Width by 70 giving H
  divide H by 500
  index Button to 2
  gosub to CreateButton

! Button 3
  multiply Width by 180 giving X
  divide X by 500
  multiply Width by 108 giving Y
  divide Y by 500
  multiply Width by 90 giving W
  divide W by 500
  multiply Width by 80 giving H
  divide H by 500
  index Button to 3
  gosub to CreateButton

! Button 4
  multiply Width by 274 giving X
  divide X by 500
  multiply Width by 117 giving Y
  divide Y by 500
  multiply Width by 95 giving W
  divide W by 500
  multiply Width by 80 giving H
  divide H by 500
  index Button to 4
  gosub to CreateButton

! Button 5
  multiply Width by 93 giving X
  divide X by 500
  multiply Width by 218 giving Y
  divide Y by 500
  multiply Width by 110 giving W
  divide W by 500
  multiply Width by 80 giving H
  divide H by 500
  index Button to 5
  gosub to CreateButton

! Button 6
  multiply Width by 370 giving X
  divide X by 500
  multiply Width by 218 giving Y
  divide Y by 500
  multiply Width by 110 giving W
  divide W by 500
  multiply Width by 80 giving H
  divide H by 500
  index Button to 6
  gosub to CreateButton

! Respond to clicks
  on click Button
  begin
    index Sound to the index of Button
    play Sound
  end
  stop

CreateButton:
  create Button in Stage
  style `x:` cat X cat `;y:` cat Y cat `;width:` cat W cat `;height:` cat H cat `;fill:transparent`
  return
</pre>