# 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>