[New Plugin] :framed_picture: TUI - Image Editor by EzCode

marcos · 2021-09-24T16:19:27.703Z

@ezdev, I would love to have the white version of it!

For some reason, on my end, using the default theme, it’s only loading very low-quality images JPG dynamically when pointing to a parent group or custom state source.

But I can load any size and format of images with the custom theme via workflows.

technoswift · 2021-11-28T20:55:29.138Z

Hi @ezdev ,

I really like your default UI, we have a use case

we want to provide graphics/ clipart options from
Database to our users so that they can create posters.

Is menu like this in custom UI or default UI possible

Select Background image / color
Add icons / cliparts / graphics (colors change as shapes)
Add image
Add text
Draw free hand
Add shapes

Thanks

ezdev · 2021-11-29T08:10:25.115Z

technoswift:

Is menu like this in custom UI or default UI possible

Hello, this is possible in the custom UI, try to experiment on our demo page, you could add background, icons, text or draw free

r.sorrell · 2022-03-07T13:22:58.174Z

Hey,

Is it possible to limit which fonts are displayed? So we could perhaps show 5 fonts and not every one?

condocrm · 2022-04-04T15:26:28.750Z

How do I remove the DOWNLOAD and LOAD buttons from the default UI?

condocrm · 2022-04-04T15:34:30.134Z

Also, on the custom UI I can’t find a ZOOM IN, ZOOM OUT workflow. Could you point me where is it?

condocrm · 2022-04-04T19:14:36.147Z

Hello @thomas.gounot , I’m having the same issue, how do did you solve it?

ezdev · 2022-04-06T08:59:52.665Z

condocrm:

How do I remove the DOWNLOAD and LOAD buttons

The standard library doesn’t provide such feature to remove them. We will see if there’s a way to workaround it, if so, we will do an update.

condocrm:

Also, on the custom UI I can’t find a ZOOM IN, ZOOM OUT workflow.

It will be added in the next update, thank you for the feedback!

ron2 · 2022-04-07T01:59:53.678Z

Hi, @ezdev!

Just bought the plugin, but cannot figure out how to save to DB. I fill in the fields, but not clear on the Thing., and what relationship it has to the image. For example, I have a thing called a Shot. It has a name field and an image field. I specify in the TUI workflow params a Thing of type Shot.

Does this mean the TUI workflow action will create a new Shot thing and add the image to the new Shot thing’s image field?

Or do I have to somehow tell the TUI action which existing Shot to save the Image to?

Bottom line is I cannot puzzle out how to save an image to the DB. Is there a step by step walkthrough? There is no option to do save to DB in the Demo editor, so stuck. Otherwise, great plugin! (But I do need to save to DB and be able to get the URL of the saved image).

trouble uploading TUI image to DB

Thanks! - Ron

ezdev · 2022-04-07T11:07:40.445Z

Update v.1.6

Added Brightness settings for filter
Added Remove Filter action

All updates are for custom UI element.

ron2:

Just bought the plugin, but cannot figure out how to save to DB. I fill in the fields, but not clear on the Thing., and what relationship it has to the image. For example, I have a thing called a Shot. It has a name field and an image field. I specify in the TUI workflow params a Thing of type Shot.

If you don’t want to overcomplicate things, just use the state Image base64, it can be saved in database in a image field
Use the action Download and choose Base64 in the action type, you will see there a small documentation that explains it.
So your workflow could look like this:

Run download action
Event Base64 ready is triggered
2.2 Save the Image base64 in the database.

ron2 · 2022-04-07T15:00:31.253Z

Okay, thanks. But doesn’t the download action cause the user’s browser to initiate a download? I just want to save the image to a DB, not download to user. Make sense?

ron2 · 2022-04-07T15:06:28.452Z

I see the base64 state. This is the part that I do not get:
2.2 Save the Image base64 in the database.

I can see how to reference the base64 state but how do I specify where to save it? I can choose a thing and a field, but do I need to create a thing to put it into or does the workflow create a thing? Could you possibly screenshot the workflow steps and parameters perhaps?

Sorry, not trying to overcomplicate. Trying to do the simplest thing, which is save the image to the DB and obtain its URL thereafter for future processing.

Where and how do I receive the URL for the saved image? Was expecting to reference the TUI image element, and save the image as a .png to the DB and receive the URL as a state, perhaps as Result of Step 1. I could then use the URL for further processing. But I don’t see any of this kind of thing in the workflow actions. To me, this would be keeping things simple, not converting to Base64 and writing to…where?! Referencing how?

Big fan and frequent purchaser of your plugins, so don’t get me wrong. Just trying to get this done.

Thanks again!

ezdev · 2022-04-08T09:10:53.427Z

ron2:

Okay, thanks. But doesn’t the download action cause the user’s browser to initiate a download?

That’s why I said that you should choose the base64 state from the dropdown of this action, it won’t download the file in this case but will generate and publish the Image base64 state.

I will do a separate example with saving to DB.
I will post the link here.

Edited:
Here is a simple demo with Base64

ron2 · 2022-04-09T21:31:38.288Z

Okay, thank you. I will study that!

ron2 · 2022-04-12T18:37:39.484Z

That helped, thank you! Was able to make it work using your example. I wonder about the efficiency of Base64. Believe general calculus says a Base64 image is roughly 1/3rd larger than a .png for example. So it will increase storage and bandwidth fees. Perhaps the answer is to render it in Base64 then use something like Element To PNG plugin to convert that to a PNG and save it to DB.

Ideal would be just render as a png but I recognize that may not be straightforward using the TU codebase.

Thanks for your help!

Ron

ezdev · 2022-04-13T14:14:50.346Z

ron2:

bandwidth fees

You could try to compress it before uploading to database, using our plugin Image Compressor , it can compress from an URL and the Base64 can be used as a URL

ron2 · 2022-04-13T20:41:59.034Z

Thanks, will check that out as well. Another approach is to convert it to a PNG before saving it. There’s a plugin called Element to PNG which is simple but works pretty well. May try that as well.

The Base64s are very slow loading compared to other formats and definitely taking up space as well as bandwidth.

MarkusB · 2022-10-26T13:42:53.757Z

Hi,
Having a problem with showing a dynamic image from external url in the plugin.

image2142×1262 154 KB

Passed url from the DB, see it in inspector, but the plugin don’t show this image.
What can be the reason?

yongjun · 2023-05-16T06:26:01.459Z

hi.

The element ‘TUI-ImageEditorcustom’ is always invisible in my app.
Do you know why?

image1906×903 50.8 KB

eazycode · 2023-05-20T07:21:59.282Z

hello @yongjun, custom editor gives You posibility to style it(how it will look), empty field because no magic happened yet. You must add buttons and add some actions (crop, resize, rotate etc) from element actions tab

image779×835 56.3 KB