Shrink images

Today we will see how to create a program that reads an image, resizes it and saves it resized.
Let's create a new stack and let's put a button to ask for the file of the image we want. Livecode can import the following formats as images: GIF, JPEG, PNG, BMP, XWD, XBM, XPM, PBM, PGM, PPM, PICT, EPS.
To avoid overloading the code I limit myself to the most common formats, so the button code will be:

on mouseUp
   if there is an image 1 then
      delete the last image
   end if
   answer file "Select imaage, please:"
   put it into temp
   set itemdel to "."      
   if the last item of tolower(temp) is not among the items of "jpg.gif.png.jpeg.bmp" then
      answer "That file is not a supported format."
      exit MouseUp
   end if   
   import paint from file temp
   set the top of the last image to 75
   set the resizeQuality of last image to "best"
   set the inw of the last image to the width of the last image
   set the inh of the last image to the height of the last image
   set the intl of the last image to the topleft of the last image
end mouseUp

Let's explain it:

•      we delete a possible image already present
•      we ask for the location of the file
•      we check that the file extension is one of those we like
•      we import the image, this operation creates a new image
•      we move it so that it does not cover the button
•      we set the quality for image editing on best (best)
•      we save the initial width, height and position

Then we put a scrollbar we will call scale, and a button to save. If all went well, we will have something like this:

Scrollbar code is:

on scrollbarDrag newPosition
   put the inw of the last image into iniW
   put the inH of the last image into iniH
   put the inTl of the last image into iniTl
   set the width of the last image to round(iniW * newPosition / 100)
   set the height of the last image to round(iniH * newPosition / 100)
   set the topleft of the last image to iniTl
end scrollbarDrag

As you can see, original data are saved, so we can't lose image details.

Now let's see save button code:

on mouseUp
   ask file "New file name:"
   export last image to file it as JPEG
end mouseUp



The export command supports: PBM, JPEG, GIF, BMP, PNG .

 Now you can enjoy with this program

Moving an image along a path

When you have to move an object along a path or do an animation, many programmers lose days or weeks to calculate the formula that mathematically describes the path or animation.

Livecode allows you to avoid this and simply do it by hand!

As an example, I'll show you how to make a ball bounce in less than a minute.

First draw the ball directly in Livecode, just press the oval button, make a circle and then indicate the colors of the gradients, to have something like this:

Let's call it "ball".
Then we create a path, which we will call "mypath", by pressing the freehand button and drawing the trajectory of the ball by hand, obtaining something similar to this:

Make invisible the path and then create a Start button with this code:

on mouseUp
   move graphic "ball" to the points of graphic "mypath" in 10 sec
end mouseUp

Pushing the butto this will be the result:

Just one line of code! (thank livecode)

Photoroom

Today I'll show you a livecode program to edit images: PhotoRoom.

This software mad with livecode has hundreds of effects and show how is possible to edit image with livecode:
Here you can download the source, and here are the standalones that works without the IDE:

• Windows
• Linux
• Mac

Printing on multiple pages

If you need to print on multiple pages, the best way is to create a substack as a template. This template will be also the first pages, prepare the text and just change content with the text or htmltext property.
Then clone it, so you have the second page; change the text and so on...

clone this card

A the end, just use this to print (pdf or you preferred printer):

open printing to pdf nomefile
go to card 1
print this stack   
close printing

Now you have to delete all pages except the first one, just use this code:

put the number of cards into temp
repeat with temp2 = temp down to 2
   delete card temp2
end repeat

Using external fonts

You can incorporate fonts in your app or program in livecode, you can use on Windows and Mac the start using font, example:

start using font file "c:/myFont.ttf"

but you have also to add in the list of the file to copy:

On linux is different, you need to copy the font in the folder "~/.fonts/" and then launch fc-cache -f, for example:

create folder "~/.fonts"
revCopyFile "DroidSansMono.ttf", "~/.fonts/DroidSansMono.ttf"
put shell("fc-cache -fv") into temp

Animated scrolling text

Creating an animated scrolling text can be achieved by livecode in two ways:

• text manipulation
• graphic manipulation

We'll see both ways.

TEXT MANIPULATION

Just create a field and put this code in it:

on movingtext mytext, myspeed
   set the realtext of me to mytext
   set the realtext2 of me to mytext
   stripspaces
   set the text of me to empty
   createspaces
   put the realtext2 of me into temp
   put the text of me before temp
   #put the text of me after temp
   set the realtext2 of me to temp
   set the text of me to temp
   set the cyclet of me to true
   cycleText myspeed
end movingtext

on stopcycle
   set the cyclet of me to false
end stopcycle

on stripspaces
   put the realtext2 of me into temp
   if the last char of temp is space then
      delete the last char of me
      set the realtext2 of me to temp
      stripspaces
   end if
end stripspaces

on cycletext myspeed
   put the realtext2 of me into temp
   put the number of chars of temp into nt
   set the text of me to temp
   repeat for nt times
      delete char 1 of me
      if not the cyclet of me then exit repeat
      wait mySpeed sec with messages
   end repeat
   if the cyclet of me then send "cycletext " & myspeed to me in 0 sec
end cycletext

on createspaces
   set the dontwrap of me to true
   put space after me
   if the formattedwidth of me < the width of me then
      createspaces
   end if
end createspaces



Now you have the following messages to use:

• movingtext TEXT,SPEED: you use this message to change text, start scrolling setting the scroll speed
• stopcycle to stop scrolling text

GRAPHIC MANIPULATION

Create a field and put this code inside it:

on cycleText myText, mySpeed
   lock screen
   set the locktext of me to true
   set the dontwrap of me to true
   set the pcontinue of me to true
   set the text of me to myText
   clone me as "clonefield"
   put the ID of the last field into tID
   set the pcloneid of me to tID
   set the width of fld id tid to the formattedwidth of fld id tid
   set opaque of field id tid to false
   set showFocusBorder of field id tid to false
   set threeD of field id tid to false
   set showborder of field id tid to false
   set lockText of field id tid to true
   set the left of fld id tid to the right of me
   set the top of fld id tid to the top of me
   create graphic "cycleR"
   put the id of the last graphic into tID2
   set the pgr of me to tID2
   set the style of graphic id tid2 to "rectangle"
   set the rect of graphic id tid2 to the rect of fld id tid
   set the opaque of graphic id tid2 to true
   set the backgroundcolor of graphic id tid2 to the backgroundcolor of this card
   set the linesize of graphic id tid2 to 0
   clone graphic id tid2
   put the id of the last graphic into tid3
   set the pgL of me to tid3
   set the right of graphic id tid3 to the left of me
   set the top of the graphic id tid3 to the top of me
   set the prealText of me to the text of me
   set the text of me to empty
   set the pmyspeed of me to myspeed
   unlock screen
   cycle2 mySpeed
end cycleText

on cycle2 mySpeed
   put the pcloneid of me into temp
   if exists(field id temp) then   
      set the left of fld id temp to (the left of field id temp - 1)
      wait myspeed sec
      if the right of fld id temp < the left of me then
         set the left of fld id temp to the right of me
      end if
   end if
   if the pcontinue of me then send "cycle2 "& mySpeed to me in 0 sec
end cycle2

on StopCycle
   set the pcontinue of me to false
   set the text of me to the pRealText of me
   put the pcloneid of me into tid
   put the pgr of me into tid2
   put the pGL of me into tid3
   delete field id tid
   delete graphic id tid2
   delete graphic id tid3
end StopCycle



RESULTS

You can see results in the following video, the text mode is confinde in it's space but it sn't constant due the difference in size of each letter, on the other hand the gaphic mode is smother but needs on the left and on the righe no other object, because we have to cover the text:

Driving a car

If you need to create a car videogame, the controls are always relative where the car point to, so you need a little of geometry and trigonometry to do a correct work, let's see an example.
Let's create a stack with the image of a car, call the image car:

In order to rotate it, you just need to use the angle property, but how to move when it's rotated?

Now add this code to the card:

on arrowkey puls      
   put the keysdown into temp2
   repeat for each item tItem in temp2
      switch tItem
         case "65362"
            put the angle of image "car" into temp         
            #creaimo una strina del tipo x,y
            put -5 * sin( pi / 180 * temp) into movimento
            put "," after movimento
            put -5 * cos( pi / 180 * temp) after movimento
            move image "car" relative movimento      
            break         
         case "65364"
            #dobbiamo muoverla in indietro rispetto al verso del muso
            #prendiamo l'angolo della direzione
            put the angle of image "car" into temp         
            #creaimo una strina del tipo x,y
            put 5 * sin( pi / 180 * temp) into movimento
            put "," after movimento
            put 5 * cos( pi / 180 * temp) after movimento
            move image "car" relative movimento      
            break         
         case "65361"
            put the angle of image "car" into temp
            add 1 to temp
            set the angle of image "car" to temp
            break               
         case "65363"
            put the angle of image "car" into temp
            add -1 to temp      
            set the angle of image "car" to temp
            break                        
      end switch
   end repeat
end arrowkey



Finished! Explanation:
First of all, the angle property is always between 0 and 360, if you put the value out of this, livecode reconvert it, i.e. 361 becomes 1.
The same for position values, livecode convert to the nearest integer.
Just to keep in mind that angle is in degree, but sine and cosine use radians, so there is the conversion formula n/180.
The keydown is better for contemporary buttons pressed.
Finally, these are the coordinate systems on computers:

• origin in the top left
• X to the right
• Y to the bottom
• image angle at 12.00 and clockwise

like this:

Sudoku game

Today I'll show you a very good game made in livecode: a sudoku game.
You can download the livecode source from here: http://www.maxvessi.net/pmwiki/uploads/Site/Sudoku.zip
So you can play and see the code. You have transparencies, dragging images, and sudoku generation algorithm.
This is a screenshot:

Call for a contributor: LC Server enhancement

Message from  Richard Gaskin

I've obtained approval from the LC team for an enhancement that can improve performance and reduce system resource use for LC Server and faceless standalones.


This would seem an easy fix for someone who knows their way around the code base, described here:

https://quality.livecode.com/show_bug.cgi?id=14115#c5

Background
----------
By default, LC initializes all fonts available on a system at startup.

For the GUI this is usually what we want.

On a server, it us usually what we don't want.

Although it is possible to generate custom graphics in LC Server, which may depend on assigning fonts to specific objects, most server work doesn't involve any graphics at all.


On some hosts, this is not a problem because they have few fonts installed. But on others, like the popular Dreamhost, this has become a problem, as DH makes a wide range of fonts available.


Each fonts initialized by the LC engine consumes time and memory. Roughly 3/4 of the LC boot sequence is related to font initialization. Keep in mind that as a CGI or any command line use, LC's boot sequence comes into play with each request.


Whether using LC Server or running an LC standalone facelessly, using it as a CGI or calling from the command line is impacted in both CPU time and memory requirements by having so much font activity.


On some systems, the additional memory required has made LC Server and even LC standalones prohibitive, disallowing them to run under certain load conditions. Indeed, this issue came to my attention while attempting some LC work on Dreamhost, ultimately diagnosed with the help of DH's excellent support staff, along with Mark Waddingham and Peter Brett.




Proposed Solution
-----------------

We value backward compatibility and maximizing options with minimal extra work. For this reason, the proposed change preserves all existing LC Server and LC standalone use in any CGI or other command line context.


The request is for the addition of an optional flag, "-f", which would cause LC's boot sequence to bypass the font loading sequence.


For LC Server, this would look like this:

    ./livecode-server-community -f

For standalones, it compliments the existing "-ui" flag to allow a standalone to run facelessly, and would ideally be available either by itself or added to the "-ui" flag:



   ./MyFacelessApp -ui -f

   ./MyFacelessApp -uif



Next Steps
----------

The team is supportive of his enhancement, but currently has other priorities. I'm quite keen for anything that expands the range of ways LiveCode can do powerful work on par with other scripting languages on servers and in the command line, but my C skills are so rusty I'm sure no one wants my C code in the code base.


So what we need is anyone with the intersection of skills, interest, and time to find the entry point for the font initialization, and ad a condition which would bypass font initialization if "-f" is among the arguments passed to the engine from the command line.


By making LC more more performant and less resource-intensive, it would expand the scope of ways it can be used where other scripting languages are.


I'm afraid that's the only motivation I can offer. My need here is mostly for the benefit of LC adoption and usage, and I have nothing to offer by way of a bounty beyond perhaps a beer at the upcoming conference.


But on the upside, I believe that as changes go, this one would be reasonably straightforward to implement.


Any takers?

--
 Richard Gaskin
 LiveCode Community Liaison

bnGuides has been updated

bnGuides a tool to visually aid in alignment of controls has been updated to 
version 0.5.0

if fixes some instances where bnGuides did not delete temporary graphics on the 
target stack.

Additionally it adds the optional display of distances to nearest neighbors. 
(capsLock-key toggles display of distances)
Thanks to bogs from the forum for suggesting "distances" and beta testing.

You can download it from within Livecode -> Sample Stacks
or 
http://livecodeshare.runrev.com/stack/918/BnGuides

see also 
https://forums.livecode.com/viewtopic.php?p=178245#p178244 

Fonts and links

Using the property inspector of livecode you can set many effects for your font:

Here the explanations:

• textFont is the font used
• textSize is the size of the fonr
• textStyle can be:
• bold
• italic
• underlined
• boxed
• 3D boxed
• link
• strikethrough
• textAling is the alignof the text
• fixedLineHeight is to permit or not the custom height of each line
• textHeight is the distance between lines
• margins is the distance of text from box around it

However you can mix  all styles using the htmlText property, for example if you have a field named label1 and put this code in a button:

on mouseUp
   put "<h1>Titolo 1</h1>" after temp
   put "<h2>Titolo 2</h2>" after temp   
   put "Questo e' un esempio di testo con piu' stili contemporaneamente. Ecco un elenco puntato:" after temp
   put "<ul>" after temp
   put "<li>primo elemento</li>" after temp
   put "<li>secondo elemento</li>" after temp
   put "</ul>" after temp
   put "Ecco un link: <a >www.livecode.com</a>" after temp
   set the htmltext of field "label1" to temp
end mouseUp

Clicking the button, you'll obtain this:

The link www.livecode.com is just text, to activate it you have to use the message linkCLicked, like this:

on linkClicked pLink
   launch url pLink
end linkClicked

The linkClicked will launch the browser to the url of the text of the link, so you can have different links on the same text and all will work correctly.