Hi! New to Bubble. I’ve searched through the forum as well as googled and youtube for tutorials, but can’t find anything for what I’m looking for.
I’d like to build an app that allows the user to make changes to an uploaded image and see those changes in realtime as they use sliders.
I’ve tried the Croppie plugin, but I also need the sliders to adjust things like brightness and contrast. I also need the user to be able to add/overlay text on top of the image and be able to manipulate the text in realtime. The user should then be able to download the resulting image.
There’s more to the app, but perhaps it’s best to start with these issues.
Making something like this isn’t really what Bubble is for. But nevertheless it’s possible to rig something up through the use of plugins.
For editing brightness and contrast (both not free) -
I haven’t used these before, but they may be useful to you. Also note that the imgix plugin will have a delay because the image effects processing are done on another server and not on the user’s browser.
For placing text -
Also theres another free one called draggable elements by Bubble (it won’t let me link the plugin). Using the paid plugin, you can probably make an input draggable, and set the input BG to invisible.
@tim12333 thanks for your reply and help. Yeah, I’ve looked at the demo for both Imgix and Image Filters, but both of them seem to require a button to be clicked to show the result, whereas I’m interested in the user being able to see the result in realtime as they move the slider back and forth, if that makes sense.
The Mouse & Element positions plugin looks sweet! Thank you!
The Element to Image plugin looks like it may work, although I’m having trouble implementing it. I can move the element onto the page, but it doesn’t look like I can change it’s dimension, only it’s X / Y coordinates, and I can’t seem to tie it to anything like an image source. Again, I’m new, so likely just need to trial and error everything.
I’ll keep working on this and circle back, thanks again!
You can make a workflow for when the slider input value is changed. That is the same as clicking a button. The workflow gets ran every time the slider value gets updated.
And for the element to image plugin, I believe your supposed to use an element ID for that. Look up on the forum for exposing element IDs.
