ekymoz/homerougheditor

Floorplan editor SVG to create houseplan and homeplan with Javascript for client

homeRoughEditor Version 0.95

Help me to make this project an essential and free resource for all, so that any developer / integrator can propose to create plans for house, apartment, etc. online. Full Javascript, No external library with Jquery (only for Bootstrap), Boostrap 5 and FontAwesome. For cons, forgive me for my English, it is very rusty !!!

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installing

You just have to copy the files into a directory and open the index.html file in your browser. Version 0.93 of homeRoughtEditor is operational from Mozilla 39!

See example

]

Running the tests

Personally I only test all this with the mozilla debug console

TODO

• Make TouchScreen functions for tablet (or smartphone, but too tiny screen i think...)
• Make interoperability for browsers (actually good for Moz.)
• Refine the CSS and buttons behavior
• Refine the Historical system (use LocalStorage)
• Complete the translation (i'm French)
• Make your own system/functions to export plan to any database

Built With

• Atom.io - My code editor. Simple and free.
• Bootstrap - Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

License

This project is licensed under the MIT License - see the LICENSE.md on Web file for details

homerougheditor's Issues

does it support mobile devices

and how will it support mobile devices

How to set Y axis position start from bottom to top

save model

how can save and load model?

Minimal version

What a fantastic app, I would like to integrate a part of this into my app. The only thing I really need is the "free" drawing (initHistory("boot"), or in other words; starting with a blank stage. Since my main focus is on drawing floor plans, adding elements (except perhaps doors and windows) is not necessary. When the page is opened (in my case, it will be a modal with 90% width), drawing should be possible immediately. Hence my question; what components and functions are minimally required to achieve this? And; what divs and svgs are minimally needed? I am willing to pay for such a "minimal" version (of course, depending on the costs). I can figure some things out myself, but this takes time, I assume you already have the code much clearer in view. Looking forward to hearing from you! Regards, Sake

Donating to project

@ekymoz, awesome project!! Is there a way to donate to this project? More specifically, how do I buy you a beer?

Thanks.

How to create new windows and doors

Hi, I would like to use this project, can you explain how to generate the code for a new design of window or door? I see the code in func.js but I would like to know if you use some kind of program to generate this SVG code. I am very interested in collaborate. Please let me know.

Touch

hello plese an example how to touch move lines

Can we create circle or we add shape button where we can add shapes like rectangle, circle pentagon

Please contact me!

Hello Patrick Raspino,

Thanks for sharing your amazing project, we're learning a lot through your code.

We are a software company from Brazil (SlabWare.com), and we have a project very similar to the one you developed.

We are having some problems solving some features of our Drawing, I tried to find some contact with you but I couldn't.

Can you send me an email or get in touch with us?

Maybe you can help us.

[email protected]
Whatsapp: [phone]

I'm waiting.

converting this to vue.js

i like this repo, i would like to convert this code to vue.js, how possible is that do you think?

homeRoughEditor Release Package

I'd like to request a homeRoughEditor javascript package as single mini-fied package.

Resize wall on click, the finishing point doesn't position the wall correctly

Hello, first off thanks your amazing software, it really helps a lot. We are currently developing a website that uses your tool and we would like to click on top of each wall dimension and allows the user to input a given size for each wall. Even with the information of the starting point (x1, y1), the angle associated with it and the new size of the wall, we can't find the correct finishind point (x2, y2). When positioning a given finishing point, the wall doesn't move the expected position. If you could help us with this issue, we would really apreeciate it.
Thank you,
Diogo Salvador
Hugo Carrulo

how to add a download SVG option in this project

Load external SVG.

I have created an SVG file from an IFC file, the SVG has everything implemented as paths. Can you guide me on how to load that SVG into your editor. I have bigger SVG files, I cannot afford to draw them from scratch.

Add Text

how can add some text to model for descriptive purpose?

Export/import an XML of the floorplan

Hi, I would like to export/import an XML of the floorplan. Can you point at where this could be made? Any suggestion?

Define distances for walls and partions with value entry by keyboard: enhancement

Hi,
would be great to be able to define any length (walls/partitions) by selecting the tool, clicking on placemente and defining the length with keyboard to have exact measurement like most 2d CADs do.

homeRoughEditor

How to changed Energy item image

Translate to English

If you create a pull request for func.js, I can contribute to the translations

I've created an alternative version

In order to integrate this wonderful project into an open source privacy protecting smart home controller, Candle, I modified your code a bit. I've added a number of new features that were on your wish list, so perhaps (some of) these changes could be integrated back into the original project. I wil be integrating my code into a Candle addon now, but I purposefully worked on it as a stand-alone project first so that it was as simple as possible to move code back to your project.

Code here:
https://github.com/createcandle/homeRoughEditor

Demo here:
https://createcandle.github.io/homeRoughEditor/

Big changes:

• Removed all dependencies on jQuery, Bootstrap, icons and other third party sources for privacy reasons.
• Made touch and mobile friendly (responsive).
• Expanded objects list (lots of new furniture).
• Users can now manage multiple floorplans.
• Object can be cloned, and their Z-position is moved 'to the top' when you drag them.
• I've put specific attention to allowing users to create fire safety maps.
• More...

I've hidden some features, but they can be revealed by having a developer tag in the html body. There is also an unfinished object layers feature which I've disabled for now.

I ran into a few minor bugs, which I fixed. But I've also introduced some new ones that I couldn't (quickly) solve. For example, I tried to get measurements to go into a separate g element, but they wouldn't properly recreate somehow. My 'solution' was to just only allow one measurement at a time. I also had trouble creating object outlines when scaling objects.

My code is far from clean, and the CSS is an unordered mess. But it works.

Again, thank you for your wonderful work! When I went looking to see if there was a projects I could use I never expected to find something so great.

which format should be input for draw walls?

Door drag option

hi i wanted to change some functionality for drag & drop on door by clicking anywhere in door area please help where should i modify code

Is there a way to save the current state and submit it as part of a form or project?

Love this!

Is there any way to add to an existing form and allow users to attach with a form submission?

Curved walls

I'm wondering if it's possible to add curved walls.

I want something that looks like this:

https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/2_Curves_Curve_2_ico.svg/240px-2_Curves_Curve_2_ico.svg.png

The steps would be, draw a straight line --> click the line --> bend it by dragging the mouse. it Bends from the middle of the line.

I have already played with paperjs-offset and Parallel curves, but it's not an easy problem.

how did you calculate the area of the room ? can you share with us

Request. Wall on angle show degree of angle.

Add degree of angle. Wall on angle show degree of angle.
Also curved wall or wall ends.
Thank you

Bootstrap fonts missing (solution attached)

homeRoughEditor-master.zip

mouse negative issue

when you try to draw measure or wall in negative mouse position, the wall's size and middle is going draw to wrong place. you should not change to absolute when check qSVG.measure returns. and return should be qSVG.middle ->
var middleX = (x1 + x2) / 2;
var middleY = (y1 + y2) / 2;
Then you can give wall size and measure position correctly

how to stop draw wall out side of room (rectangular and L Shape )

Programatically change the color of doors.

Hi,
I am using homeRoughEditor. I want to programatically change the color of doors. Please assist me how can I acheive this.

Regards,
Imran

Save as SVG

Hey man you're code is insane and I wanna use it but the plans can't be save so can you do a save as svg format pls

doors like wall (resize)

Hi! It's very cool project, i modify it to myself. But here's one thing, i can't do - to make resize doors and windows like walls - by stretching points. Can you explain, please?