Script Lesson 7

7/29/2019 Script Lesson 7

1/9

Home TI-Nspire Authoring TI-Nspire Scripting HQScripting Tutorial - Lesson 7

Scripting Tutorial - Lesson 7: Quick Start: Working with Images

Download supporting files for this tutorial

Texas Instruments TI-Nspire Scripting Support Page

Lua has quite powerful but simple image manipulation commands,

making it easy to import images into your Lua document and toactually "play" with these. While TI-Nspire 3.0 supports insertingimages into TI-Nspire documents, there are as yet no options forinteracting with these - making them change size, or even appear anddisappear on the fly. This functionality is available using Lua.

Lesson 7.1: Setting up and Displaying your Image

The first step inimporting an imageinto Lua is todigitize it - to turnit into a series ofcharacters whichcan be manipulateddigitally. This maybe done using TI'sown Scripting Toolsapplication,available from thelink above. Theaccompanyingvideo shows thesteps in thisprocess. Anotheroption is to use awonderful onlineimage converterthat will do thesame job.

As shown, thesemethods take animage (in mostcommon formats),convert it and (in

Click anywhere on this image for a video demonstration


2/9

the case of the TIScripting Tool)place the digitalcode on theclipboard. This maythen be pasted intoyour Lua scriptdocument. Notethe way in whichthis digital code is

defined as avariable in Luausing theimage.newcommand.

bridge1 =image.new("..digitalcode for image..")

Now all we have todo is to tell the

script to "paint" theimage to thescreen, using thenow-familiaron.paint function,along with thesimple drawImagecommand. If wehave defined theimage as a variablecalled bridge1,then displaying it is

achieved using thecode shown here:

function on.paint(gc)

gc:drawImage(bridge1, 0, 0)

end

That is actually the heavy lifting done. Everything else just builds onprevious lessons to "tweak" our image display - to ensure that it fitsthe window, for example, to center it in that window, and even tocontrol scale and to change images dynamically!

Lesson 7.2: Fitting our Image to the Window

We encountered thewindow dimensioncommands way back intutorial 1:

platform.window:widthandplatform.window:height.In our example, these maybe used to center the


local w =platform.window:width()

local h =platform.window:height()


3/9

image on the window,along with the equivalentdimension commands forimages:image.width(image) andimage.height(image).Study the code and makesure everything makessense.

Note particularly the waythat the image is centeredon the window.

local imw =image.width(bridge1)

local imh =image.height(bridge1)

gc:drawImage(bridge1,(w - imw)/2, (h - imh)/2)

end

This is great if our imagefits reasonably well to thewindow. But what if it istoo big, or too small? Forthis we create a copy ofthe image that is scaled.image.copy(my_image,scaleX *image.width(my_image),

scaleY *image.height(my_image))as implied creates a copyof the original image withthe option for differentscales for x and ydimensions. For ourexample, we will keep thesame aspect ratio as theoriginal image and definea single scale factor.

Note the double use ofimw and imh: first for ouroriginal image (bridge1)and then again for thescaled version.



local h =platform.window:height()

local sc = 0.5

local imw =

image.width(bridge1)

local imh =image.height(bridge1)

local im =image.copy(bridge1, sc *imw, sc * imh)

local imw =image.width(im)

local imh =image.height(im)

gc:drawImage(im, (w -imw)/2, (h - imh)/2)

end

Lesson 7.3: Making our Image Dynamic

So far so good. Youcould stop here andbe able to insert animage and playaround with thescale until it fitsnicely. Nicer,though, would beto be able tochange that scaleon the fly - perhapsby using the arrow

keys as we learnedin the last lesson!

Initially it is a goodidea to create the

function on.create()

timer.start(1/5)

end

function on.timer()

platform.window:invalidate()

end


4/9

variable that we willuse in our TI-Nspire document - Inormally insert aGeometry windowand hide the scale.Then insert a slidercalled scale, set torun between 0 and1 in steps of 0.1.

We can probablydispose of this latersince we willcontrol the valuesusing arrow keys -but if you wantedthe document to beworkable within thePlayer, then thearrow keys will beof no use and aslider would not go

astray!

function on.arrowUp()

sc = (var.recall("scale") or0.5)

var.store("scale", sc + 0.1)

end

function on.arrowDown()

sc = (var.recall("scale") or

0.5)

var.store("scale", sc - 0.1)

end

These functions canbe defined prior tothe on.paintfunction. As youcan see, they checkto see the value ofthe variable scalefrom the TI-Nspiresymbol table (if itdoes not exist thenthe value is set to

0.5). With eachpress of an arrowkey, then, this valueis changed by 0.1,either up or down,and this new valueis stored in thevalue ofscale backin TI-Nspire.

Note that the onlychange to the

on.paint function isto grab the currentvalue ofscale anddefine this as ournew Lua variablesc. And it neverhurts to refresh thescreen after eachchange - hence theplatform.invalidatecommands!



local h =

platform.window:height()


imw = image.width(bridge1)

imh =image.height(bridge1)

im = image.copy(bridge1,sc * imw, sc * imh)

imw = image.width(im)

imh = image.height(im)

gc:drawImage(im, (w -imw)/2, (h - imh)/2)

end

Now you can control the scale using the up and down arrow keys!


5/9

Lesson 7.4: Swapping Images on the Fly

Our final tweak is to defineseveral images and use the left

and right arrow keys to switchbetween these! back to theScripting Tool and digitize acouple of other images - I amusing the stock bridge imagesthat are installed in your TI-Nspire Images folder when 3.0is installed. I define these asbridge2 and bridge3.

Create a slider variable, calledchoose in your Geometry

window, and set it to run from1 to 3.

As we just did for the scale, wedefine the left and right arrowkeys to increment the values ofour variable choose and referto it in the Lua script as ch.

function on.create()

timer.start(1/5)

end

function on.timer()


end

function on.arrowLeft()

ch = (var.recall("choose") or1)

var.store("choose", ch - 1)


end

function on.arrowRight()


var.store("choose", ch + 1)


end

Within our paint function, then,once again recall the currentvalue ofchoose and thendefine the image using anif..then..elseif..end loop.

You should now be able toswitch between images usingthe left and right arrow keys!

Click anywhere on this image to view ashort video demonstration


local W =platform.window:width()

local H =platform.window:height()



if ch == 1 then

show =bridge1

elseif ch == 2 then

show =bridge2

else

show =bridge3

end

local imw =image.width(show)

local imh =


6/9

Congratulations! You now haveall the ingredients you need todigitize, define, insert, scaleand manipulate images usingLua. Our final lessons in thissequence will look at creatingyour own graphics using Lua.

image.height(show)

local im =image.copy(show, Scale *imw, Scale * imh)

local imw = image.width(im)


gc:drawImage(im, (W -

imw)/2, (H - imh)/2)


end

Lesson 7.5: Controlling the Image Position

What if you want to

move the imagearound on thescreen? While thiscan be done entirelywithin Lua using thearrow commands asdescribed previously,another neat optionmight be to split thewindow, place aGraph windowunderneath, and

control the image bymoving a pointaround on the Graphwindow. To do this,store the x- and y-coordinates of thepoint (say px and py)and then use thesewith your arrowcommands in Lua tomove the image.

This is demonstratedin theshuttlecock.tns filethat is included withthis lesson'sdownloads. Includedtoo you will find theimage that was usedand the Lua scriptfor you to study. Inproblem 2 of thisTNS file, the point P

is linked to aparabola so that themotion of theshuttlecock can bemodelled and even

Click anywhere on this image for a video demonstration


7/9

animated!

NOTE: Oneadvantage of addingsliders anddraggable points isthat the document isthen able to be usedwith the Player. If we

just rely on arrow

keys and keyboardcontrols, then thePlayer is not anoption.

Lesson 7.6: A Simpler Approach

Using arrow keys and

general keyboardcontrols (includingenterKey, escapeKey andtabKey) are great ways toensure that a documentyou create will workseamlessly on thehandheld. I cannot stressthis enough, because itmay be a simple thingbut it is a significant wayin which Lua-based

documents can be writtento be much more user-friendly than "native"documents.

Even though theapplications shown in thelessons all involve usingthe arrow keys to grab avariable from TI-Nspire,make some change andthen store back to that

variable, this is not theonly way to set upkeyboard controls. Infact, it is much simpler to

just use Lua's ownvariables and not have toreply on "outside" ones atall.

Suppose you havecreated the digitalversions of the three

bridge images referred toin Lesson 7. so at thestart of our document, wehave definitions forbridge1, bridge2 and

function on.resize()

W =platform.window:width()

H =platform.window:height()

Scale = 1

Choose = 1

end

function on.arrowUp()

Choose = Choose + 1

end

function on.arrowDown()

Choose = Choose - 1

end


8/9

bridge3.

Then we could do thefollowing for theremainder of our script:

Define two variables forscale and choose: thesedays I tend to do this in a"resize" function, since

this always gets calledwhen the page is created,and also when anychange in size occurs -like switching betweenhandheld and computerview. Here I am going tostart a good habit ofnaming Global variableswith a Capital letter.

Do you see how much

simpler this approach is?

So why go to all thetrouble of using var.recalland var.store to movevariables back and forthbetween Lua and TI-Nspire? One reason isthat, while keyboardcontrols are great for thehandheld, they areactually useless if you

want your document torun on the Player, since itonly supports grabbingand dragging things. Nokeyboard input.

So for the moment, weare leaving TI-Nspiresliders in place andlinking to them as well asadding keyboardcommands. This allows

our document to be usedanywhere.

Later (lessons 11-15) youwill learn how to enablemouse controls, so thatyou can create your owncontrols and use theseinstead of TI-Nspiresliders. Put thesetogether with ourkeyboard controls that

you have just learned andyou have an optimaldocument. Have a look atthe sample documents onthe Scripting HQpage

function on.arrowLeft()

Scale = Scale - 0.1

end

function on.arrowRight()

Scale = Scale + 0.1

end


if Choose == 1 then

show =bridge1

elseif Choose == 2 then

show =bridge2

else

show =

bridge3

end

local imw =image.width(show)

local imh =image.height(show)

local im =image.copy(show, Scale *imw, Scale * imh)

local imw = image.width(im)


gc:drawImage(im, (W -imw)/2, (H - imh)/2)


end


9/9

where you access thesetutorials and you will seeexamples of exactly this.

Next we learn how to use Lua's own graphics capabilities to create ourown images.

Home TI-Nspire Authoring TI-Nspire Scripting HQScripting Tutorial - Lesson 7

Script Lesson 7

Documents

Transcript of Script Lesson 7