How To Create Image by Script?

[Cheong]

Hi readers,

I am a beginner in LiveCode scripting but I have experiences in Unity C# coding. Is there anyway I can create Image using script in LiveCode with an image source? Because when I try to create images using the code segment below and group them with buttons:

create group "CCTVObject"
repeat with x=1 to 22
create image "LiveCodeBar.png" in grp "CCTVObject"
create button "Button" & x in grp "CCTVObject"
add 35 to y
set the width of Button x to 50
set the height of Button x to 25
set the width of image "LiveCodeBar.png" to 100
set the height of image "LiveCodeBar.png" to 30
set the location of Button x to 50, 50+y
set the location of image "LiveCodeBar.png" to 50, 50+y

The images create using the script above cant be seen except its space taken in the stack, and the location scripted for them are totally off.
If anyone can help me here, I am really grateful!

[jmburnod]

Hi Cheong,

Is there anyway I can create Image using script in LiveCode with an image source?

Yes. You can import one image file with data or use one valid filename.
This script create an image with reference file :

Code: Select all

on mouseup
answer  file "open an image file"
if it = empty then exit mouseup
put it into tPathFile
create image "LiveCodeBar.png" in grp "CCTVObject"
set the filename of image "LiveCodeBar.png" to tPathFile
end mouseup

Best regards
Jean-Marc

[bn]

Hi Cheong,

welcome to the forum.

There are a couple of problems with your script. In Livecode you can refer to an object by number or name (or it's id).

If you refer to an object by number e.g. 1 Livecode assumes you mean the layer of the object. And it addresses the type of object with the lowest number on that card. If there is a button with a lower layer (because it was there before you created the group and populate it with buttons) then button 1 would be outside of the group and you don't get the result you expect. It is easier to give controls a unique name and address the control by that name.

Furthermore when you create image "LiveCodeBar.png" in grp "CCTVObject" you create an empty image object with the given name. You have then to either set "the filename" of the image (see dictionary) or put an imported image into that newly created image object.

Please also note how to set the location of objects and don't forget the parenthesis when constructing a name for an object "objectName" & x. You can get away with this but it will not work with some commands and might be confusing then.

In the script below I made some changes to your script in what I think you want it to do and I make it take snapshots (dictionary) to fill the images.

Code: Select all

on mouseUp
   lock screen
   
   create group "CCTVObject"
   put "0,0,100,30" into tSnapshotRect
   
   repeat with x=1 to 22
      
      export snapshot from rect tSnapshotRect to tImg as png -- put snapshot into variable
      add 30 to item 2 of tSnapshotRect -- add to top value for next snapshot
      add 30 to item 4 of tSnapshotRect -- add to bottom value for next snapshot
      
      create image ("LiveCodeBar.png" & x) in grp "CCTVObject"
      create button ("Button" & x) in grp "CCTVObject"
      add 35 to y
      set the width of Button ("Button" & x) to 50
      set the height of Button ("Button" & x) to 30
      set the width of image ("LiveCodeBar.png" & x) to 100
      set the height of image ("LiveCodeBar.png" & x) to 30
      set the location of button ("Button" & x) to 50,y
      set the location of image ("LiveCodeBar.png" & x) to 140,y
      
      put tImg into image ("LiveCodeBar.png" & x) -- put snapshot into current image
      
   end repeat
   unlock screen
end mouseUp

Kind regards
Bernd

[Cheong]

Thanks for the quick replies Bernd and Jean-Marc,

I've tried the coding suggested by Bernd and it works well, but still using snapshot on screen. Is there anyway like I import myself an image (the import is not done by users, but done by me, the developer) then use it for the images generation as the buttons background? Is it necessary to create a preset image created into the stack before the start of the app to be referenced when generating the button backgrounds? Or is there a way to import myself the image into the app's library? Is there a library for the image to be stored for referencing?

Really grateful for your help, Bernd and Jean-Marc.

[bn]

Hi Cheong,

glad it helped.

I don't really understand what exactly you are trying to do.

Do you want to use an image as the icon of a button? Like here
http://lessons.runrev.com/m/4603/l/4414 ... und-images

Then yes you will have to import the image into the stack beforehand. You can not use referenced images (that are those you only point to by their pathname and are not imported).

To import an image you can use Menu File -> Import as Control -> Image File...

This places the image onto the current card. Once the image is placed on the card you look at the ID of the image in the Properties Inspector at the very top next to the name. Then use this id (just the number) in the Properties Inspector -> Border and Icons and use it for "Icon"

Or you code

Code: Select all

 set the icon of button "myButton" to the short id of image "myImage"

Many people use one card in the stack for storing images used as icons or a card on a substack.

It would be good if you could explain in more detail what exactly you are trying to achieve, what effect you are after. Here I am only guessing that you want this, maybe you want something different altogether?



Kind regards
Bernd

[Cheong]

Hi Bernd,

This is roughly what I want to do in LiveCode. (I've done this in Unity)

[bn]

Hi Cheong,

If I understand you correctly you already have the red "background images" as for example .png files?
Or do you want to create the red background images on the fly?

If you have the images already you could import them and place them in the group.

If you want to do them on the fly (because the text of them changes) you could just have the red background and place a field on top of this.

Anyways, I unfortunately don't have time over the weekend(traveling) and maybe someone else could offer some ideas. Otherwise I will be back next week.

Kind regards

Bernd

[bn]

Hi Cheong,

here a quick example stack which may give you ideas

I just use one image and copy it to the group to show the principle. Have a look at the code.

Kind regards
Bernd

[Cheong]

Wow Bernd, Thanks so much!

Your help is the best! Now I understand how to do it exactly.