Newbie Question: Inserting Images Using Button in Runtime

saratogacoach · Post by **saratogacoach** » Mon Jun 01, 2009 1:18 pm

Hi,

Just getting started with Studio 3.5 on a first project. Trying to begin with how to insert images (jpeg, png, etc.) using a button in runtime.

The interface would be basic: user clicks a button and Windows "open dialog" would display; user can choose image file and it would open in the main stack's window.

Giving the user the ability to resize the inserted image using handles, while maintaining image proportions, would be the next step.

Any suggestions, leads would be much appreciated.

Kind Regards,

jmburnod · Post by **jmburnod** » Mon Jun 01, 2009 1:43 pm

Hi saratogacoach,

Maeby this one is useful for you, this function return the width and the height for a proportional resizing.

Code: Select all

function PourCrop pWidthSource,pHeightSource,pWidthDest,pHeightDest
  if pWidthSource â‰¤ pWidthDest and pHeightSource â‰¤ pHeightDest then
      put pWidthSource into LaWdef
       put pHeightSource into LaHdef
   else
      put (pWidthDest/pWidthSource) into LeDivW
      put (pHeightDest/pHeightSource) into LeDivH
      put min(LeDivW,LeDivH) into LeDiv
      put trunc(pWidthSource*LeDiv) into LaWdef
      put trunc(pHeightSource*LeDiv) into LaHdef 
   end if
   return LaWdef,LaHdef
end PourCrop

Regards

Jean-Marc

saratogacoach · Post by **saratogacoach** » Mon Jun 01, 2009 1:49 pm

Hi Jean-Marc,

Thanks for your reply. As a beginner (just installed RunRev 3 days ago), I have still having difficulty with the first step: how to create the button code to let the user (1) choose an image from the open file dialog box and (2) insert it into the canvas.

Kind Regards,

edljr · Post by **edljr** » Mon Jun 01, 2009 1:55 pm

There is also a great resource in the Revolution Resource Center under Tutorials / General / Image Viewer.

Klaus · Post by **Klaus** » Mon Jun 01, 2009 2:03 pm

Hi saratogacoach,

given you have an empty image object "Image1" on your card with the button.

Put this into the script of your button:

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 ito 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

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

Done

Hope that helps.

Best form germany

Klaus

saratogacoach · Post by **saratogacoach** » Mon Jun 01, 2009 2:51 pm

Hi Klaus,

Thanks. I appreciate the commenting since this aids learning.

OK, I found the empty image control and dragged it onto the screen, named it Image1, then coded the button as you suggested. That works.

And this code in Image1 seems to set up drag/drop:

Code: Select all

on mouseDown
grab me
end mouseDown

Progress! Again thanks.

Kind Regards,

saratogacoach · Post by **saratogacoach** » Mon Jun 01, 2009 5:25 pm

Hi,

Is there a way for a button to first add the image control, then call the open file dialog, let the user choose the image and insert?

The drawing project needs to let the user insert as many images (from an image file library that can be included in the app folder) as they need, then drag them to where needed. So, the image insertion button needs to include creating image objects, each uniquely named (for example by incrementing +1 to the name, or some other way).

Not knowing how many images a user may need to insert, image controls cannot be added in advance, but need to be added by the user in runtime. I think this is very complex coding, especially for a beginner. Whew!

Any suggestions would be welcome.

Kind Regards,