Command to insert image control

saratogacoach · Post by **saratogacoach** » Tue Jun 02, 2009 12:17 pm

Hi,

Is there a way to add code to a button that would allow runtime inserting of image controls?

I wanted to give the user the ability to click a button which would allow them to insert a jpeg, png, etc, and be able to pick the image from a Windows dialog open file configured for image file types.

Also need to do the same for a button that would allow the user to insert text input boxes so they can type labels into these.

Not sure where to look for the insert command and some sample code. Have just begun with RunRev.

Any help will be appreciated.

Kind Regards

Klaus · Post by **Klaus** » Tue Jun 02, 2009 12:38 pm

Hi saratogacoach,

this is so easy you sure gonna cry

...
create image "Name of new image here..."
...

So you could add this line right after the user has selected an image, see other thread.

Best

Klaus

saratogacoach · Post by **saratogacoach** » Tue Jun 02, 2009 1:26 pm

Hi Klaus,

Thanks for your reply.

I think the code I used needs to be "tweaked" a little.

(1) Once I remove the image control, which I had set to 150X150, and use the code below to insert a new Image1, the new image is no longer 150X150 but instead fills the entire stack window. So, I need to add code to make the inserted image control 150X150.

(2) (I think this may be more difficult) The user may add 20, 50 or more images. So how do I write code for the image insertion command in the button so that each new image control has a new name? Currently, the code only inserts Image1. How to I set up incrementing to a control's name in code so that the next click creates Image2, then next Image3, etc.? Maybe this is unnecessary?

What I want to give the user: ability to add as many images (and text input boxes for labels) as they need during runtime.

Here's the code I that needs "tweaking":

Code: Select all

on mouseUp
   ## 1. Open the file selection dialog:
  answer file "Select an image:" with type "Images|jpg,jpeg,gif,png,bmp|"
  ## "... with type..." will only show files with these suffixes "jpg" etc. in the dialog!
  ## In other words: Only Rev compatile image formats!

  ## 2. Store the path to the image in a variable:
  ## IT will conatin the filepath that the user selected
  ## It is always a good idea to store IT immediately in another variable,
  ## since the value of IT may change when you least exspect it ;-)
  put it into tUserSelection
 
  ## If the user clicked "Cancel" then it/tUserSelection = empty!
  ## So please go on, nothing to see here :-)
  if tUserSelection = empty then
     exit mouseup
  end if
 create image "Image1"
  ## 3. Now set the filename of your image object to the selection:
  set the filename of img "Image1" to tUserSelection
   
end mouseUp

Thanks for your help.

Kind Regards,

Klaus · Post by **Klaus** » Wed Jun 03, 2009 9:38 am

Hi coach,

1. What about resizing the image?
I am sure you know about setting the heigtht and width of an object?

Hint: using "the templateimage" (check the docs!) you can set many properties like height etc.
of a not yet created object, so you could set this BEFORE creating the image(s)

2. What would you do in real life?
I am sure you would COUNT all user created images, right?
And you can do this in Rev, too

OK, here the new and tweaked code:

Code: Select all

on mouseUp 
   ## 1. Open the file selection dialog: 
  answer file "Select an image:" with type "Images|jpg,jpeg,gif,png,bmp|" 
  ## "... with type..." will only show files with these suffixes "jpg" etc. in the dialog! 
  ## In other words: Only Rev compatile image formats! 

  ## 2. Store the path to the image in a variable: 
  ## IT will conatin the filepath that the user selected 
  ## It is always a good idea to store IT immediately in another variable, 
  ## since the value of IT may change when you least exspect it ;-) 
  put it into tUserSelection 
  
  ## If the user clicked "Cancel" then it/tUserSelection = empty! 
  ## So please go on, nothing to see here :-) 
  if tUserSelection = empty then 
     exit mouseup 
  end if 

  ## 1:
  ## prepare "the templateimge":
  set the height of the templateimage to 150
  set the width of the templateimage to 150

  ## IMPORTANT! To prevent resizing of images!
  set the lockloc of the templateimage to true

  ## You can set the script right here, but only up to 10 statements, see "scriptlimits" in the docs!
  set the script of the templateimage to "on mousedown" & CR & "grab me" & CR & " end mousedown"

  ## 2. As always there are many ways to skin a cat, but here I will use a global variable 
  ## to store the number of userimages

  global num_of_user_images
  if num_of_user_images = empty then
    put 1 into num_of_user_images
  end if
 
  ## create correctly numbered image:
  create image ("userimage" & num_of_user_images)

  ## Tidy up:
  reset the templateimge

   ## Increment num_of_user_images for the next use:
   add 1 to num_of_user_images

  ## 3. Now set the filename of your image object to the selection: 
  set the filename of img "Image1" to tUserSelection 
end mouseup

Hope that helps.

Best

Klaus

P.S.
Hint:
Stop trying to think too complicated

Try to explain in plain words to yourself what you are trying to do.
In most cases you can then translate this 1:1 into Revtalk.

You might want to check my "simple_memory1" stack from my website (-> X-Talk)
to learn more about this concept.

saratogacoach · Post by **saratogacoach** » Wed Jun 03, 2009 10:10 pm

Hi Klaus,

Thanks for your helpful suggestions and code. I will need to read up on templateimages, learn more about them.

I am still struggling with the code. I tried it with an Image1 control and without any image control in the stack, using the code in a button. In preview, if no Image1 control, the yellow code error is in this line:

Code: Select all

  set the filename of img "Image1" to tUserSelection

If I first create an image control named Image1, then run it, the size remains large, not 150X150, and not draggable.

So, I have some homework to do.

Kind Regards,

bn · Post by bn » Wed Jun 03, 2009 10:58 pm

Saratogacoach,

replace the last lines in Klaus last script with

Code: Select all

## Tidy up: 
   reset the templateimage 
   
   ## 3. Now set the filename of your image object to the selection: 
   set the filename of img ("userimage" & num_of_user_images) to tUserSelection 
   
   ## Increment num_of_user_images for the next use: 
   add 1 to num_of_user_images 
   
end mouseup

you get the idea, I just changed the naming part for the newly created image and moved it before Klaus increments the global variable num_of_user_images
you could just a well say

Code: Select all

## 3. Now set the filename of your image object to the selection:
set the filename of the last image to tUserSelection

It gives you pictures of the defined size in then topleft corner of the card piled up. You can drag them around.
The one you created manually could not be dragged around because it had no script for that. Klaus sets the script for the templateimage.
regards
Bernd

saratogacoach · Post by **saratogacoach** » Thu Jun 04, 2009 1:20 am

Hi Bernd,

Yes, I am beginning to slowly understand.

(The one item that I still do not understand is setting script for drag and drop for this and each new image created by the user.)

I have been reading about templateimage in the dictionary. Next, I will look for a tutorial with more examples, also drag and drop.

Thanks for your help.

Kind Regards,

Klaus · Post by **Klaus** » Thu Jun 04, 2009 8:31 am

Hi coach,

yes, my fault, the last line should of course read:
...
set the filename of img ("userimage" & num_of_user_images) to tUserSelection
...

Best

Klaus

saratogacoach · Post by **saratogacoach** » Thu Jun 04, 2009 12:05 pm

Hi Klaus,

Any way for the user to be able to drag and drop inserted images in runtime?

Kind Regards,

bn · Post by bn » Thu Jun 04, 2009 12:37 pm

What exactly is it you mean by drag and drop in runtime. What do you want to do. I am not shure I understand drag and drop in this context.

Usually drag and drop for me means you take text from a text field and drag it to another text field and drop it there. Or you select a file in the system and drag it over a control in Rev and drop it there and the control does something with the file, either display a picture or a text and so on.

Klaus has implemented a script that lets you grab an image and move it from a to b. Do you mean something like that?

could you explain a little?

regards
Bernd

Klaus · Post by **Klaus** » Thu Jun 04, 2009 1:19 pm

Hi coach,

you mean "draggable" right?
That's in my script, please read again!

If you mean REAL Drag'n'Drop (user can drag and drop image files onto your stack/card) well, that is a bit more complicated

saratogacoach · Post by **saratogacoach** » Thu Jun 04, 2009 2:12 pm

Hi,

The stack is used for drawing diagrams. What I would like to do is let the user insert images from files (can insert as many as they need). Once inserted into the diagram, the user needs to move these around to where they need to place them. So, possibly I am using incorrect terms.

The diagram is drawn by the user by inserting images, inserting text input boxes (again as many as they need) for labels, and then needs to draw connecting lines between images to display their relationship. (This is a family tree diagram--pedigree/genogram).

The code I am currently using does not seem to work to allow the user to move inserted images:

Code: Select all

on mouseUp 
   ## 1. Open the file selection dialog: 
  answer file "Select an image:" with type "Images|jpg,jpeg,gif,png,bmp|" 
  ## "... with type..." will only show files with these suffixes "jpg" etc. in the dialog! 
  ## In other words: Only Rev compatile image formats! 

  ## 2. Store the path to the image in a variable: 
  ## IT will conatin the filepath that the user selected 
  ## It is always a good idea to store IT immediately in another variable, 
  ## since the value of IT may change when you least exspect it ;-) 
  put it into tUserSelection 
  
  ## If the user clicked "Cancel" then it/tUserSelection = empty! 
  ## So please go on, nothing to see here :-) 
  if tUserSelection = empty then 
     exit mouseup 
  end if 

  ## 1: 
  ## prepare "the templateimge": 
  set the height of the templateimage to 150 
  set the width of the templateimage to 150 

  ## IMPORTANT! To prevent resizing of images! 
  set the lockloc of the templateimage to true 

  ## You can set the script right here, but only up to 10 statements, see "scriptlimits" in the docs! 
  set the script of the templateimage to "on mousedown" & CR & "grab me" & CR & " end mousedown" 

  ## 2. As always there are many ways to skin a cat, but here I will use a global variable 
  ## to store the number of userimages 

  global num_of_user_images 
  if num_of_user_images = empty then 
    put 1 into num_of_user_images 
  end if 
  
  ## create correctly numbered image: 
  create image ("userimage" & num_of_user_images) 

  ## Tidy up: 
   reset the templateimage 
    
   ## 3. Now set the filename of your image object to the selection: 
   set the filename of img ("userimage" & num_of_user_images) to tUserSelection 
    
   ## Increment num_of_user_images for the next use: 
   add 1 to num_of_user_images 
end mouseup

An example (but these examples are more complex than what I am trying to develop for student education; my diagram drawing is more basic): http://www.genograph.com/

HTH

Kind Regards

Klaus · Post by **Klaus** » Thu Jun 04, 2009 2:58 pm

Hi coach,

I just copied the script and it worked right "out of the box"!
Please clean your glasses and try again

This is the line that you doubt:
...
## You can set the script right here, but only up to 10 statements, see "scriptlimits" in the docs!
set the script of the templateimage to "on mousedown" & CR & "grab me" & CR & " end mousedown"
...

Best

Klaus

saratogacoach · Post by **saratogacoach** » Thu Jun 04, 2009 3:50 pm

Hi Klaus,

Staring over with a new rev file with new main stack and button helped to "clean the glasses." Once I started over and used the code, it worked beautifully.

OK. Now I need to do the same thing for text entry fields. which need to be draggable like the images and have incrementing (+1) names. These text entry fields are for the user top create and place labels wherever they need them.

So, I tried a code:

Code: Select all

on mouseUp
   set the height of the templatefield to 30 
   set the width of the templatefield to 150
   set the lockloc of the templatefield to true 
   set the script of the templatefield to "on mousedown" & CR & "grab me" & CR & " end mousedown" 
   global num_of_user_fields 
  if num_of_user_fields = empty then 
    put 1 into num_of_user_fields 
 end if
 create Field ("userfield" & num_of_user_fields)
 reset the templatefield
 add 1 to num_of_user_fields
end mouseUp

This works to create new text entry fields. Progress!

But these newly created text entry fields cannot be dragged. I think this is because mouse down on a text entry field is already used to enter text.

So, I have been searching for another type of mouse command for dragging, like right mouse down/up. But with no success.

Any suggestions will be appreciated. Thanks.

Kind Regards,