Connect a floorplan app to espoCRM

[shalmaxb]

This might be interesting for anyone, who needs a floorplan app integrated into espoCRM.

In my contacts I have an address group which saves addresses, where there are storing places for artwork. Because of the many possibilities, where you could store artwork - shelves, cabinets of different kind and so on, it was my wish to attach a floorplan to any of these adresses, so that the artist could exactly map, where which piece would be stored.

I did not need a fully fledged floorplan app with 3D and also not a library of thousands of furniture objects.

Whenever I try to find something, that could come handy to my app, I search on Github, where actually are lots of floorplan scripts in various languages, some better, some abandoned. But I was lucky, when I found one, nearly to be perfect for my purpose.

You may find it here: https://github.com/ekymoz/homeRoughEditor and a bit further developed fork here: https://github.com/Niush/floorplanjs

I use the second one, because it has some important features enhanced from the original.

To install it, it is ridiculously easy, because you merely have to copy the whole folder to your app and link to it. That`s it.
I only made some adaptions, mostly translating to my language and some modifications of terms used.
To open the floorplan I created a bootstrap button with a link in a WYSIWYG field to link to the folder.

This script is simple, only 2D (does not have 3D, which I do not need), but works as it shloud.
Here the limitations:
The script generates the floorplan and objects as svg-Files, but you cannot save out of the script. I have a workaround to use a browser extension to make a screenshot, save the generated image as png, which I then upload to my record in contacts.
Perhaps someone skilled could enhance the script by that function, as I am not that one.

Regarding the furniture objects, there actually is only one object, called "Bed", being a mere square/rectangle. For me it serves as any kind of shelf, cabinet, desk and so on, because I do not need any elaborated, detailed furniture. You can use text to label the objects.

You can export your floorplans as json-files and import them later for further working on it. There is also measuring and color function to use for the different rooms, there are windows and doors, even stairs. You can generate walls of various thickness and even partial walls.
All in all for me - and I guess for many other purposes - a valuable script, that enhances my app a lot.

[esforim]

Very good find, going to give it a try.

Looking at the screenshot, and reading your post it does seem to have weakness that hopefully we can solve together.
But it better than nothing. I tried a few other floorplan software on Desktop but never seem to work properly for me.

[jakov]

Great idea @shalmaxb

Thank you very much to share this idea with us. Can you pleas share in more detail how to create bootstrap button with a link in a WYSIWYG and write a script that save floorplan as .svg file. Is File name always the saime. I would place this button on property entity and also save .svg floorplan picture in this entity as document attachement

Ths

[shalmaxb]

Hi,
first I put the script in a folder in the espoCRM folder "public". The script itself is accessed by the included index.html. To this URL I added an unique number, so that it would be more difficult to access it for people, who do not know the address.
This URL I link in the bootstrap button, which I create in the WYSIWYG field. Here the code:

createFloorplan = string\concatenate('<button type="button" class="btn btn-primary">
<a rel="noopener noreferrer" href="/floorplan/index.html', '8f658a10-e5d5-4592-a9c0-675b8053df9a','"',' ', 'target="_blank">
<span style="color: #fff; text-decoration: none;">create floorplan</span></a></button>');

createFloorplan is the field name, floorplan is the folder, and as link text, which appears on the button I used "create floorplan"
When you click the button, the floorplan script opens in a blank browser tab. You can create the floorplan. The floorplan itself will be saved as a json-file, which you may specify by file name and being able to reload it later for further editing.
The image of the floorplan unfortunately cannot be saved as extra file from out of the script. So I have the workaround with a screenshot plugin, save the screenshot and can load it to the record afterwards.

I guess, that anybody with javascript skills could enhance the script, but that one is not me.

By the way: You can create this type of button, whenever you want a link designed as button, no javascript needed.

[jakov]

thank you very much for your help