Canvas/ElementsAndLayout - Maple Help
For the best experience, we recommend viewing online help using Google Chrome or Microsoft Edge.

Online Help

All Products    Maple    MapleSim


Home : Support : Online Help : Canvas/ElementsAndLayout

Canvas Elements and Layout

This page describes the layout rules and basic elements of a canvas in Maple and Maple Learn.

 

Row/Column Layout

Groups

Pixel Position

Mixed Text and Math

Plots

CheckBoxes

Buttons

Data Tables

Sliders and Assignments

Images

Math Attributes

MathML and Inert Form

Special Characters

Appending to a Canvas

Next Steps

Row/Column Layout

The NewCanvas command accepts a list of elements as input.  Each element is its own row.  Use a sublist to place multiple items on the same row.

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Title",
     [ "Column 1", "Column 2"],
     [ "Next Row" ],
     [ "Another Row", x^1, x^2, x^3 ]
 ]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=HFOTLSIUGLCHCFHNPJDQLUFIOLFRDRBODTONFGEJOMJLBPFUEQAKOQOFLJIMNKANCKAMOSJSDNMKEOPRHPFPJUKTHTOFATNUDNPJ

 

 

Groups

A Group is denoted as a box around several items in the Maple Learn interface.  There is no visual indication of a group in the Maple interface, but grouped items do affect the id that might be used by Script:-SetActive.

By default, each item passed to NewCanvas will be put in its own group.  

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Title", 1, 2, 3 ]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=EQEPIPMFOHLHCOKRKMLLHMBMPIOIGNFOHHJHBPMPBMMROLEUGJMRLRGKBLEUMNJTGLFNAKKIEIPPGLIFJGGJEHDUOJAJMLAOIIPQ

To collect them together, wrap them in  Group([...]);

> 

cv := NewCanvas([ "Title", Group( [ 1, 2, 3] ) ]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The distinction is not immediately visible in Maple, but click the link and you will see how this is important to Maple Learn.

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=LKMHKNBFMJMPGJCUENGFHFDSITPTATJLBGJLBSJICMASPFBUAPIHIFMOAFCUMPAQIJLRFIKQCSKFFTEIMPFTKJNLOHDICSDJFGHF

Here is another example that shows groups in two columns.

> 

cv := NewCanvas([ "Title",
     [ "Column 1", "Column 2"],
     [ Group( [ "Group 1 Row 1", "Group 1 Row 2", "Group 1 Row 3"]),  Group( [ "Group 2 Row 1", "Group 2 Row 2", "Group 2 Row 3"]) ],
     [ "Another Row", 1, 2, 3 ]
 ]):

> 

ShowCanvas(cv);    

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=NRIKAUHRFPKNFTCSBQFPEHDQLUOSKRKFOMNFLUKSDRHGGHLODMKUEUJSFJCNJNJHNLGPHJBSMLOUBPOUKRGGINLFNGKOKQGKFPAL

 

 

  

Pixel Position

Items can be placed at a pixel position.  Only the Maple Learn interface respects the exact pixel placement; the Maple Interface finds an approximate position within its grid.

Note that the default for ShowCanvas is to locate items on a best-fit basis on a 2-column grid.  Use the size option to create a finer grid. 

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ Text( "Title @ [300,30]", position=[300,30]),
                  Math( p[400,400], position=[400,400] ),
                  Math( p[600,100], position=[600,100] ),
                  Math( p[100,200], position=[100,200] )
 ]):

The longest row in the input list above has a length of 1.  Therefore the default grid size of 2-columns will be used by ShowCanvas, and each of the elements will be adjusted into approximate boxes.

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The size is specified to have 4 rows and 10 columns here -- creating a finer grid.  The adjusted placement will be closer to the pixel position used by Maple Learn.  Note that we don't need to recreate the canvas, we are simply showing it again with a different size.

> 

ShowCanvas(cv,size=[4,10]);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The Maple Learn interface always uses the exact pixel position.

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=DJDMMMIHFHPNAKKQMTNGAGPGHRKOFRARINPMPPOLOSFLOPGKETJGNRPREHHKLTBTKJLSEOFIPNGSOLPIKGEOEMIFESLNLUMIMLDH

 

 

Mixed Text and Math

 

As seen previously, string input will be added as text and expressions will be added as math.  The Text() and Math() commands can also be used, and are needed when you want to specify options.  The Text() constructor can also be used to create a message that mixes formatted math into the text message.  Use %1, %2, etc. as placeholders, and add the expression to fill in at the end.

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([
   Text("Sample Problem",'bold','fontsize'=40,color="brown"),
   Text("A rocket follows a path given by %1 (distances in miles). If the horizontal velocity is given by %2, find the magnitude and direction of the velocity when the rocket hits the ground (assume level terrain) if time is in minutes.",
         y=x-1/90*x^3, v[x]=x, 'container'="group", 'color'="#0cAA19"
   )     
 ]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=BSAMOQBGJOOSFFLQMPOGFLOSIQPKGMNRIMNOAHIUMSCRBPJRPMAJPTHKCIDPONOSOTJNAPEUKGIFIIGLPPBNCLNLAQFTCRDROUIF

 

 

 

 

Plots

Use the StaticPlot command to insert a 2-D plot into a canvas.

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Sample Problem",
     "A rocket follows a path given by:",
     y=x-1/90*x^3,
     Text("If the horizontal velocity is given by %1",v[x]=x),
     "Find the magnitude and direction of the velocity when the rocket hits the ground (assume level terrain) if time is in minutes.",
     StaticPlot( plot([x-1/90*x^3,-2*x+6*sqrt(10)], color=[blue,red], linestyle=[solid,dash],view=[0..10,0..8])  )
 ]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=IHELHNANNSIIDTJILPLGBUMGFTBKFHJHCPNNLIILIUEUMIMHASFQLTKONUDHAKMGIFAMIJGHLOBTPNNNDICNHPOHITJLDNAOJKPH

 

Use the Plot3D command to insert a 3-D plot.

> 

cv := NewCanvas( ["3D-Plot", Plot3D("plot3d(x*y^2)") ] ):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=MHNOCOKGJSOUMJEHCUFGIOMFIJJJNJPLJJDNDNEHFHCRCKMGGHHSFGCPKMCQDPCTIPOHBGGREJFTBMJNKOKJNRPTCMJMALKJKRPL

 

 

CheckBoxes

Check-boxes are elements that can be queried in a Script.  

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas(["Is 1+1 = 2?",ScriptCheckBox("True"),ScriptCheckBox("False")]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=CSIMBSLNNFHOOUFPEFIQISMKNOFOEJGLOFKKMIDTANJQKSKHIUPIFRGIBKKSHHOTFUOGHREUIPDSLQILORDFMRHPGROOGIOMAMPI

 

Buttons

Buttons can trigger actions that invoke a Script.

> 

with(DocumentTools:-Canvas):

> 

ButtonPress := proc( canvas )
    local M := GetMath(canvas):
    local sc := Script();
    SetActive(sc,M[1]);
    SetMath(sc,M[1]:-math+1);
    ToString(sc);
end proc:

> 

cv := NewCanvas(["Sample Button",
                  0,
                  ScriptButton("Increment Counter", ButtonPress)
 ]):

> 

ShowCanvas(cv, 'entrybox'=false);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

More about buttons, scripting and state later!

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=IKLQFRPQOQFQNQEKPPFFGNNNEUNKEMFGELMUDIDGHTOIAFCNIJJRCUIMLFPLGFHSJUBUHGMGLQEGNNFIKGPHCFATBRFMOPMLDNPP

 

Data Tables

A table of elements is a powerful feature in Maple Learn.  Use a DataFrame to insert a table.  
Note: In Maple, the row labels will be visible, but not in Maple Learn.

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Data Table",
                   DataFrame(Matrix(5,2,(i,j)->10*i+j),'columns' = [ 'x', 'y' ])
]):

> 

ShowCanvas(cv);

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=LTDGFIJMJLISPKLMDMITEQDMHGLQARDMJQJLEUCTKKKHDKMINKBQGOHFGQOJNFJPFPLKFKMHCGJHIKDOCHOQJQNMKLOQGTCFILLN

 

Sliders and Assignments

A slider shows up in Maple Learn when you assign a variable to a numeric value.  The Slider constructor takes the variable name, and initial value as an equation.

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Slider",
                   Group( [ m*x+b,
                            Slider('m'=2,'bounds'=-5..5,'continuous'=true),
                            Slider('b'=0,'bounds'=-20..20)
                   ])
]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This example is much more impactful in Maple Learn as there is automatically a plot displayed for the mx+b line, and the sliders automatically control the slope and intercept.  The elements are put into the same Group to make this work.

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=PTBOJSINHHBMGPFOETCJHSOJOLJQPPIPFOLSARFMCIEGOQCSBMJNJLHKEILLOHGRBMCJDQJSATAJNMNOPPEFPTGQJKHGPONSMMBF

 

Sliders are a special case of a variable assignment.  To create an assignment without a slider, use the `&coloneq`(n,3) to set n := 3;  

> 

cv := NewCanvas([ "Assignment",
                   `&coloneq`( n, 3 ),
                   x^n
]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=GTJTGSGODTOUCUPFHLJLCRKGGONRIJPPAOHHEFCLAPKLDUCPFTPSLOPROOJGLSALMQFJLFOIHFHQESLTERAMIFJMNSKQJKLPAHCQ

 

Slider properties can also be set using a Math constructor with additional options.

> 

cv := NewCanvas([ "Assignment",
                   Group( [
                       Math(`&coloneq`( n, 3 ),attributes=[slider="true", minSlider="0", maxSlider="5", incSlider="0.1"]),
                       x^n
                   ] )
]):

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=PJLKLJKHKOPKGLCRKKCKBUFRCOJNHIDPBKESBSHTGFAMIKDODQLSBOOGONLNJLHJFPGLPNMTMGFPIRKOAMMQCIKIKLKNKGJLLKEH

  

Images

Images can be embedded into a canvas.  In order to upload an image you need to be signed into the MapleCloud.  There are also options to pick an Image out of an existing canvas.

 

> 

with(DocumentTools:-Canvas):

> 

file := cat(kernelopts(datadir),"/images/antennas.jpg"):

> 

cv := NewCanvas( [ "Sample Image", Image(file) ] ):

> 

ShowCanvas(cv);

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=MMMTMMFKAGLFANDREOJKLRCTGGAPBIGFGQJSBGNGNUPKKLDGLOGUJRBOPLKRNLAQLIFLCQENHMGUEQDPLNANCOESLSPMJSBIIKOG

 

Math Attributes

The Math constructor accepts a variety of options.

> 

with(DocumentTools:-Canvas):

> 

m3 := Math( x[3]+y[3], annotation="Annotation Example" ):

> 

ShowCanvas( NewCanvas( [m3] ) );

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Here are some other options.  Some of these control behavior only visible in the Maple Learn environment.  

> 

cv := NewCanvas( [ Group( [
   Text("Math Attributes:"),
   Math( `%+`(x,1,1) ),
   Math( `%+`(x,1,1), readonly=true, annotation="Read-only" ),
   Math( `%+`(x,1,1), result=false, annotation="Turn off computation result" ),
   Math( `%+`(x,1), plot=false, annotation="Don't plot" ),
   Math( `%+`(x,1), "text"="true", annotation="Text" ),
   Math( `%+`(x,1), mathbackground="red", annotation="Background color" ),
   Math( `%+`(x,1), mathcolor="#32a8a2", annotation="Font color" )
] ) ] ):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=OMNOIOGKPINMAUITBUALAMKRPFJFCFMSGLKRIPIPEPPOAPFTGKKRMQLFNGHRCUCKLRIGLOLSOFILLHPLCFAPASMHIIASBSDTLILH

 

 

When fetching a canvas from Maple Learn, the GetMath command calls Math(...) to create record structures.  

> 

url := "https://learn.maplesoft.com/#/?d=OULPGFDHIFNKDLJJGGMKJKNOARBJLHGRPOOKHKCQHPMFKMOTBFEHCUBUCQFNOGKSAMDOCUEFGMAJMQELFLEQEGOMETNULHFSCUGU":

> 

cv := GetCanvas(url):

> 

M:=GetMath(cv):

> 

M[3]:-math;

y+z

(11.1)
> 

M[3]:-id;

3:0

(11.2)
> 

M[3]:-annotation;

sample

(11.3)
> 

M[3]:-position;

153.75,285.75

(11.4)
> 

exports(M[3]);

readonly,xmlns,result,custom,gridpos,plot,groupnum,mathml,position,dependency,exception,annotation,math,istext,slider,type,container,border,id,box,cid

(11.5)

 

 

MathML and Inert Form

Some tricks can be used to format the math, such as using InertForm to prevent automatic simplification.  Here Typesetting:-mspace() is also used to create a blank:

> 

with(DocumentTools:-Canvas):

> 

m4 := Math( `%+`(1,1) = Typesetting:-mspace(), readonly=true ):

> 

ShowCanvas( NewCanvas( [m4] ) );

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Incomplete expressions that can't be represented as a Maple data structure can be written directly in MathML.  Here is an example that leaves the numerator of a fraction blank.

> 

m5 := Math( "<math><mfrac><mspace/><mn>2</mn></mfrac></math>" ):

> 

ShowCanvas( NewCanvas( [m5] ) );

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Special Characters

Greek letters and math symbols can usually be spelled out, or their entity name used, or the character itself can be pasted in as input.  Here are some examples:

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Special Characters",
       [ "Blank (empty string)", Math("",border=true) ],
       [ Text("Math Symbols (%1,%2,%3,etc)",infinity,alpha,beta), Int(sqrt((sqrt(x^n)+1/(alpha+beta^gamma))),x=-infinity..infinity) ],
       [ Text("Quadratic Formula (%1)","&pm;"), x = `&pm;`(-b,sqrt(b^2-4*a*c))/(2*a) ],
       [ "Checkmark", Group(["#"]) ]
]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=OOGFNIGKETGIGIMRFJFGFTNPHPAOMLCLGPNPOTNIKMMFINKFJHBRLQPLHGLOEPLOFTDKMJORJGMMGPOFGPHKKUPHKPDMKMNHJUHU

 

Placement is relative to the math above.  We have a mismatch of height on the left and right.  Sometimes you have to try alternative layouts.

 

> 

with(DocumentTools:-Canvas):

> 

cv := NewCanvas([ "Special Characters",
       Math("", annotation="blank"),
       Math( Int(sqrt((sqrt(x^n)+1/(alpha+beta^gamma))),x=-infinity..infinity), annotation="special characters"),
       Math( x = `&pm;`(-b,sqrt(b^2-4*a*c))/(2*a), annotation="quadratic formula" ),
       Math( "#", istext=true, annotation="checkmark" ),
       Math(  cat(  convert([226, 150, 188],bytes),  convert([226, 150, 171],bytes), convert([226, 128, 162],bytes), convert([226, 151, 166],bytes) ), istext=true, annotation="bullets" )
]):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv);

https://learn.maplesoft.com/#/?d=ATNKNFDMMQMFFKDQMRBHGSBPGNHPLLIHCQLRMPATPHPMIHOLEOKPNJGUGIFSEUEKLQFLLILFIKNSPHGOATGHJIHHESDHNQKHNJAN

Appending to a Canvas

Sometimes it is easiest to use the Maple Learn interface to create your layout and add appropriate elements.  You can create it in Maple Learn, share the document, and then pull it into Maple.  Here's an example:

 

> 

with(DocumentTools:-Canvas):

> 

url := "https://learn.maplesoft.com/index.html#/?d=MRENAMFLDICHHGCNBKHQLJEJAGPKKQDQGIFUIINNKPDSJSDUAGGTGHMQOTIRGKOGEOCSPTLKOKEJLLENFLNRNUCTJOIGOUIKMSMM":

> 

cv := GetCanvas(url):

> 

ShowCanvas(cv);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Add a button:

> 

cv2 := AppendToCanvas(cv,[ScriptButton("Click Here",DoNothing)]):  

> 

ShowCanvas(cv2);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

> 

ShareCanvas(cv2);

https://learn.maplesoft.com/#/?d=HTPJDUAUCFOHISHONKGNOUPSCNBKKOHPIHLPCMBINRFSKJAHJKJSEUKSINDKGLCFJSDMIGDGDLMREJGQBFALCFDHGTAIINJFJOFS

 

 

Next Steps

Introducing the Script Button

Return to DocumentTools[Canvas] Overview Page