EasyCoder

Website coding for non-programmers

  • List of contents

    • Graphics example 2 - Calculator

    This example displays and runs a simple 4-function calculator.

    The script is quite long but mostly deals with drawing the graphics. In order to avoid creating too many graphic objects we use three 16-element arrays. Each button rectangle and its corresponding text reside inside a group that handles positioning and mouse clicks. To ensure the calculator shows properly on both PC and mobile screens there are quite a lot of calculations based on the width of the container DIV. All of the position and size values are based on this single value.

    Graphics - Intro
    Graphics example 3 - Wacky Drumkit
    Graphics example 4 - Solitaire
    Graphics example 5 - A factory simulation

    <div id="ec-container" style="width:256px;height:320px;border:1px solid black"></div>

<!-- EasyCoder script =========================================================-->
<pre id="easycoder-script" style="display: none;">!
! 4-Function Calculator

  img DuckThink
  div Container
  svg Stage
  group ButtonGroup
  rect ButtonRect
  svgtext ButtonText
  group ResultGroup
  rect ResultRect
  svgtext ResultText
  variable Width
  variable Height
  variable N
  variable X
  variable Y
  variable W
  variable H
  variable FS
  variable S
  variable Gap
  variable Sum
  variable Hold
  variable Text
  variable Operator
  variable InCalc

  attach Container to `ec-container`

  if mobile
  begin
    attach DuckThink to `ec-duckthink`
    remove DuckThink
    put the width of Container into Width
  end
  else
  begin
    put 256 into Width
    set style `width` of Container to Width cat `px`
  end

  set the elements of ButtonGroup to 16
  set the elements of ButtonRect to 16
  set the elements of ButtonText to 16

! Compute sizes and positions
  divide Width by 4 giving S
  add S to Width giving Height
! Get the size of a button
  multiply S by 8
  divide S by 10
! Get the size of 4 buttons
  multiply S by 4 giving W
! Get the size of the gaps
  take W from Width giving Gap
  divide Gap by 5
! Get the width of the result panel
  add Gap to W
  add Gap to W
  add Gap to W

  set style `height` of Container to Height cat `px`
  create Stage in Container

! Do the result field. FS is Font Size.
  create ResultGroup in Stage
  create ResultRect in ResultGroup
    style `x:0;y:0;width:` cat W cat `;height:` cat S cat `;fill:yellow;stroke:#808000;stroke-width:3`
  divide W by 2
  multiply S by 4 giving FS
  divide FS by 5
  take FS from S giving H
  take H from S giving H
  create ResultText in ResultGroup
    text ``
    style `x:` cat W cat `;y:` cat H cat `;text-anchor:middle;font-size:` cat FS cat `;font-family:mono`
  move ResultGroup to Gap Gap

! Get the center of a button.
  divide S by 2 giving W

! Do the top row.
  add Gap to S giving Y
  add Gap to Y
  put Gap into X
  put 12 into N
  while N is not greater than 14
  begin
    take 5 from N giving Text
    gosub to CreateButton
    add S to X
    add Gap to X
    add 1 to N
  end
  put 15 into N
  put `/` into Text
  gosub to CreateButton

! Do the second row.
  add S to Y
  add Gap to Y
  put Gap into X
  put 8 into N
  while N is not greater than 10
  begin
    take 4 from N giving Text
    gosub to CreateButton
    add S to X
    add Gap to X
    add 1 to N
  end
  put 11 into N
  put `x` into Text
  gosub to CreateButton

! Do the third row.
  add S to Y
  add Gap to Y
  put Gap into X
  put 4 into N
  while N is not greater than 6
  begin
    take 3 from N giving Text
    gosub to CreateButton
    add S to X
    add Gap to X
    add 1 to N
  end
  put 7 into N
  put `-` into Text
  gosub to CreateButton

! Do the bottom row.
  add S to Y
  add Gap to Y
  put Gap into X
  put 0 into N
  put `0` into Text
  gosub to CreateButton
  add S to X
  add Gap to X
  add 1 to N
  put `C` into Text
  gosub to CreateButton
  add S to X
  add Gap to X
  add 1 to N
  put `=` into Text
  gosub to CreateButton
  add S to X
  add Gap to X
  add 1 to N
  put `+` into Text
  gosub to CreateButton

  put 0 into Sum
  put 0 into Hold
  put `` into Operator
  clear InCalc

  on click ButtonGroup go to Click
  stop

! Create a button.
CreateButton:
  index ButtonGroup to N
  index ButtonRect to N
  index ButtonText to N
  create ButtonGroup in Stage
  create ButtonRect in ButtonGroup
    style `x:0;y:0;width:` cat S cat `;height:` cat S cat `;fill:yellow;stroke:#808000;stroke-width:3`
  create ButtonText in ButtonGroup
    text Text
    style `x:` cat W cat `;y:` cat H cat `;text-anchor:middle;font-size:` cat FS cat `;font-family:mono`
  move ButtonGroup to X Y
  return

Click:
  put the text of ButtonText into Text
  if Text is `+` go to DoOperator
  else if Text is `-` go to DoOperator
  else if Text is `x` go to DoOperator
  else if Text is `/` go to DoOperator
  else if Text is `C` go to Clear
  else if Text is `=`
  begin
    gosub to Calc
    clear InCalc
  end
  else
  begin
    if not InCalc
    begin
      put 0 into Sum
      set InCalc
    end
    put the value of Text into N
    multiply Sum by 10
    add N to Sum
    set the text of ResultText to Sum
  end
  stop

!  Deal with a click on an operator button.
DoOperator:
  gosub to Calc
  put Text into Operator
  put Sum into Hold
  put 0 into Sum
  set the text of ResultText to ``
  stop

Clear:
  put 0 into Sum
  set the text of ResultText to ``
  stop

! Do the calculation so far.
Calc:
  if Operator is `+` add Sum to Hold giving Sum
  else if Operator is `-` take Sum from Hold giving Sum
  else if Operator is `x` multiply Hold by Sum giving Sum
  else if Operator is `/` divide Hold by Sum giving Sum
  else return
  set the text of ResultText to Sum
  put `` into Operator
  return

</pre>