Image where sections can be circled

On this forum you can see a list of new features requested by users and you can also cast your own vote (you need to login to vote).
Post Reply
Maxo42
Posts: 46
Joined: Sun Dec 04, 2022 11:13 pm

Image where sections can be circled

Post by Maxo42 »

Hello, I need to be able to click on an image in a form to then be able to circle sections of the image and then save it so I can review it later. Here in the photos an example of another application.
Attachments
Here is the image after clicking on it
Here is the image after clicking on it
ImageClique.png (67.17 KiB) Viewed 15453 times
Here is the image before I clicked on it
Here is the image before I clicked on it
Capture d’écran 2023-02-06 141852.png (29.37 KiB) Viewed 15453 times
joben
Posts: 224
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Image where sections can be circled

Post by joben »

We used Fabric.js to accomplish this sort of stuff.
http://fabricjs.com/

I am pretty sure it is impossible to draw circles on images in AwareIM.
Regards, Joakim

Image
Maxo42
Posts: 46
Joined: Sun Dec 04, 2022 11:13 pm

Re: Image where sections can be circled

Post by Maxo42 »

Excellent, do you know how to embed Fabric.js in Aware IM to make it work. Thanks for your help :)
joben
Posts: 224
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Image where sections can be circled

Post by joben »

You can download the latest fabric file here: https://unpkg.com/[email protected]/dist/fabric.min.js
Save it as fabric.min.js

Put it in this folder in you AwareIM installation folder on the server (this assumes that your application name is "acme":
Tomcat/webapps/AwareIM/Custom/JS/acme/

The "acme" folder is not there by default and has to be created.

Then reload your "acme" application, and have a look at the source code in your browser (CTRL+U)
Search for "fabric", and you should see a link to the fabric.min.js.
Regards, Joakim

Image
Maxo42
Posts: 46
Joined: Sun Dec 04, 2022 11:13 pm

Re: Image where sections can be circled

Post by Maxo42 »

Good morning and thanks for your help. I succeeded with Fabric.JS to do this. When I click this button
Button.png
Button.png (6.48 KiB) Viewed 15376 times
When i click i see that
Image.png
Image.png (255.86 KiB) Viewed 15376 times
I can circle the sections like that
ImageEncercle.png
ImageEncercle.png (232.74 KiB) Viewed 15376 times
My only issue is that when I save the edits to SVG the file saves to my computer and I'd rather like it to save to the application and be able to see the circled sections from there application. Here is the Javascript code that saves SVG. Can you please help me modify this code so that I can save in the app instead of in my computer.

const downloadSVG = () => {
const svg = canvas.toSVG();
const a = document.createElement("a");
const blob = new Blob([svg], { type: "image/svg+xml" });
const blobURL = URL.createObjectURL(blob);
a.href = blobURL;
a.download = "ImageCircle.svg";
a.click();
URL.revokeObjectURL(blobURL);
};

Thanks again for your help.
joben
Posts: 224
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Image where sections can be circled

Post by joben »

Great to see you found it useful.

I have personally never written a single line of FabricJS code, but I think the way we solved it was saving the result image in an AwareIM plain text attribute as Base64.

Another option, If you still want the layers and editing capabilities when loading the image, you would save the JSON output in an AwareIM attribute instead.

Forum user margor has experience with FabricJS. Perhaps he will help you if you get stuck if you ask him nicely 8)
Regards, Joakim

Image
Maxo42
Posts: 46
Joined: Sun Dec 04, 2022 11:13 pm

Re: Image where sections can be circled

Post by Maxo42 »

Thank you very much. I sent a message to Margor.

Have a nice day.
ACDC
Posts: 1141
Joined: Sat Jun 30, 2007 5:03 pm
Location: California, USA

Re: Image where sections can be circled

Post by ACDC »

I once considered the supported signature pad feature for this purpose, but never followed through with it. I think with some customization of the signature_pad.js file u could get it working, albeit very basic..Set your image as a background image with some css and the user makes the marks on re invented signature pad (sized accordingly) the image as a signature :)

However, getting the fabric.js to work and play nicely with AwareIm would be a great feature
Post Reply