Create Image from n images

Need help
1

Hi all,

I want to create an image from 3 uploaded image (pictureupload).

The new image shoud display the source images side by side horizontally without any spaces between.

Another question:
Is there a way to take multiple pictures via mobile device camera? I just can take 1 photo using the PictureUpload. I want to take more than 1 photo in 1 action.
Any ideas?

Thanks a lot,
jupxi

2

Answering question 1:
You can add 3 image elements of Bubble in a group, set the source of each element to each of your 3 uploads respectively and use this plugin to generate and save a screenshot of that group - Screenshot the Group Plugin | Bubble

Let me know if this helps :slight_smile:

Answering question 2:

3

Hi, thanks for this great tips. I use he screenshot group plugin.

I used a worklow “Export image Screenshot A” to

  1. create the image via plugin and
  2. (next step:) Now I want to create a new Database item and store the Screenshot A’s Generated File URL. BUT I don’t have a variable like "From Step 1 → ImageFileNameURL). If I use the variable given from the plugin, the variable is empty. I think it will need a while to generate the image in the background, so I tried to use a “PAUSE” (5sec.) between both worflow steps, but the screenshot’s file url variable is still empty :-/
    I also tried to :
  3. step: create a item in the database
  4. step: create the picture via plugin and use the STEP1’s uniqueID for the filename.
  5. now I want to display the result and I thought that there would be a possibility to do it like that: insert an image and ponit the dynamic image path to DO A SEARCH FOR FILE (in the bubble file system), WHERE FILENAME LIKE “%uniqueID%” … or something like that. but this is also no possible function availaiable.

Any ideas how to:

  1. klick on a button
  2. generate the image via plugin
  3. create a item in the DB including the file’s name.

Thanks so much ,
jupxi

4

Sure, no problem. So I checked the plugin and this is what you can do.

When the button is clicked, add an action to the workflow event → Export image screenshot and check the save to Bubble DB

Add a workflow event called A screenshot image exported success. In this workflow event, add the actions to save this in your DB table, and refer to the Screenshot image element’s saved image

Screenshot 2024-07-11 at 6.18.24 PM
Screenshot 2024-07-11 at 6.18.24 PM1402Ă—576 30.9 KB

This should work perfectly

5

Ok. Thanks.

But if I run the 1st worklow triggered by a button, I create the new element in the database and also start to export the screenshot.

Now I created a new workflow triggered by SCREENSHOT IMAGE EXPORT SUCESS event. In this worklow I want to set a field called “ImagePath” with the exported screenhot’s URL (Update existing DB element). But in this workflow I don’t know the unique id given in the 1st workflow.

Notice: If the user clicks the button, the first workflow will run. Now it needs some seconds to create the image export in the background and meanwhile the user could maybe click the button again. and again… So I have to know the appropriate unqiue id each time the second workflow will run and set the appropriate created image url (path).

any ideas?
best, jupxi

6

Sure, in that case, you can set a custom state (calling it isGenerating as an example) on the button with type yes/no

When they click the button, set the custom state to yes and put a conditional on the button that it should be disabled/not clickable when the isGenerating custom state is yes.

When the image is generated, the last action in your SCREENSHOT IMAGE EXPORT SUCESS event should be to set the custom state back to no.

Let me know if this makes sense.

7

This makes so much sense. Thank you!!!

8

Awesome! Glad I could help out :slight_smile:

1 Like
9

This topic was automatically closed after 70 days. New replies are no longer allowed.