none
Building a Room Diagram / Floorplan control RRS feed

  • Question

  • Hello everyone!

    I was hoping to not have to reinvent the wheel here, but I haven't had any luck finding a control that I could build off of.  If anyone knows of one, please let me know!

    I need a floorplan / room diagram control for a small project that I am working on and I'm genuinely not even sure where to begin.

    I have never done anything like this at all, so I am open to any suggestions or recommendations.

    I want to be able to have the user resize / define the dimensions of the rooms and for them to be able to be dragged and / or moved around.

    Where do I start with a project like this?  I have found precious little online and I'm wondering if that's because I'm searching for the wrong thing.

    Thank you for your help, I greatly appreciate it.
    Monday, June 4, 2018 3:48 PM

All replies

  • I would consider looking at a off the shelve product such as this one.

    https://www.nwoods.com/

    Otherwise consider options with a WPF type of project as WPF is feature rich for UI work while Windows desktop apps are the opposite,


    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    Monday, June 4, 2018 4:07 PM
    Moderator

  • Otherwise consider options with a WPF type of project as WPF is feature rich for UI work while Windows desktop apps are the opposite,

    Karen,

    In my humble opinion is that not true. I lack the knowledge of some others here about drawing in this forum like Ray, John and Tommy. However, afaik is WPF more around media with images and sound than with drawing tools.

    If the real drawing experts say I'm wrong, I've nothing to discuss :-)

    Ah, I had given a link with code from me to WPF imaging. It did however, not add much so I deleted it again. With WPF and Windows media I've experience. Just not with drawing in the way of those I mention above . 


    Success
    Cor







    Monday, June 4, 2018 4:24 PM
  • It sounds like what you want is basically a scale drawing CAD engine.

    Like Google Sketch UP?

    Why do you want to code your own? You are going to do something special that only you can do? Can you build it into AutoCad (there api ways)?. Viso? Sketch up?

    And then I am not that familiar with WPF so I cant say much there.

    After that you get to code your own and you can go a long way with vb gdi drawing etc.

    How much $$ do you want to spend on the project? How fancy does the app need to be? Draw a pool house or the Taj Mahal?

    Search for floor plan CAD architecture etc.

    So the game is can you find a control that makes sense and does what you want and is in the budget etc verses code your own.

    With 3rd party tools you are bound to the limits of what they do and their long term future support and etc.

    Code your own you can fine tune exactly what you want and you always have the tech support number and latest version.

    Monday, June 4, 2018 5:21 PM
  • Thank you for your response Karen, I really appreciate your help.

    I hadn't heard of nwoods, so I took a look at it, and unfortunately it's a bit out of my price range.  :(

    I'm hoping to get into something that I could maybe add to over time.  Perhaps start with square rooms and then address more complex things like different shaped rooms, doors, windows, etc.

    I haven't worked with WPF at all.  Am I able to use a WPF control in a winforms application?  I've been developing this software for a number of years so migrating it to WPF would be a very large undertaking.

    I obviously haven't been thinking about this the right way at all.  I was figuring I would be able to handle everything through manipulating a panel in winforms (each panel would be a room?)...  :/

    Thanks Again!

    Monday, June 4, 2018 5:22 PM
  • Thank you for your response Karen, I really appreciate your help.

    I hadn't heard of nwoods, so I took a look at it, and unfortunately it's a bit out of my price range.  :(

    I'm hoping to get into something that I could maybe add to over time.  Perhaps start with square rooms and then address more complex things like different shaped rooms, doors, windows, etc.

    I haven't worked with WPF at all.  Am I able to use a WPF control in a winforms application?  I've been developing this software for a number of years so migrating it to WPF would be a very large undertaking.

    I obviously haven't been thinking about this the right way at all.  I was figuring I would be able to handle everything through manipulating a panel in winforms (each panel would be a room?)...  :/

    Thanks Again!

    I kind of thought that software might be spendy but as complexity rises generally with drawing, manipulation, saving and editing it's best to find a library or as Tommy suggested doing this outside of your app.

    In regards to using WPF in a windows app, sure but limited to what is possible. The main thing about WPF is not the language be it VB.NET or C# (and most examples are in C#) but the XAML. See the following.

    When working desktop solutions I only use WPF as of the last six months as mostly do web. With that said it takes time to learn and time to learn is dependent on you, everyone has a different rate of learning.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    Monday, June 4, 2018 5:32 PM
    Moderator
  • Hi

    To build a simple drawing/sketching application is possible, you would still have a fairly steep learning curve.

    To draw straight lines/rectangles/circles etc is very straightforward, it becomes rather more complex when you wish to have features such as Undo/Redo/Delete, and also if you would like to incorporate complex paths and images.

    If you are truly determined to start such an application, then there a few forum members that would be delighted to assist - but - you would probably be expected to show the code you are building as you go.

    If you choose not to follow Karen's suggestion, then please start by showing any code you have so far, and outline the aspect of the code you are working on at the moment.

    NOTE: nothing wrong in reinventing wheels!


    Regards Les, Livingston, Scotland


    • Edited by leshay Monday, June 4, 2018 5:48 PM
    Monday, June 4, 2018 5:46 PM
  • Lyons,

    "I was figuring I would be able to handle everything through manipulating a panel in winforms (each panel would be a room?)... "

    You can do something like that. But its going to be limited. It will quickly become awkward to deal with many picturebox controls (if thats what you mean) verses drawing with gdi and memory code. For example instead of four pictureboxes you draw four graphic line rectangles on one picturebox (or even the form).

    What are you making? ie An estimators worksheet? Each page has the quote text in a grid table and a picture drawing of the floor plan showing two dimensions?

    Can you show an image of the result you want? Even just an outline realizing maybe you dont know yet.

    Monday, June 4, 2018 6:07 PM
  • Thank you everyone for your responses and help.  I found them all extremely informative.

    I'll try to answer everyone's questions here.

    Tommytwotrain:

    Thank you for your insight, I realize that my approach was not the right way to go about this.  I have made some custom controls in the past and thought that the right way to go was to design a custom "canvas" control and then a custom control for the room, etc.  I am definitely interested in doing this right and appreciate your insight.

    I'm trying not to design anything that is too crazy.  It would be 2D only and would essentially be boxes representing the individual rooms with the ability to move and resize them.  My father runs a construction business and I built a simple line item estimator for some of his simpler projects, but I'm trying to expand it so that he can use it for other things as well.  I would like for him to be able to easily layout and dimension the rooms and from that I would want to be able to calculate sf of ceiling, walls, floor, etc.  I can handle the math and everything, but I'm not sure where to begin or how I should build this layout component.  If I draw graphic line rectangles, will I be able to then iterate through or otherwise get the size of each?

    Here's a picture of what I am trying to do:

    I was thinking I would start with square rooms at first and then add support for more complex rooms like the Master Bedroom in this example.  Then things like Windows and Doors.  Now, this I just drew in Paint.NET.  My demo project is mostly a bunch of things I've tried that hasn't worked...

    Leshay:

    Thank you for your response.  I have been looking at some of the options that are available.  While I have seen some software that does what I want, most of it is not available through API's and things for developer use.  I even asked a couple...  Also, what I've found is that some of the products are really, really complex and have way more features than I would ever need or use.  I'm looking for something much more simple and figure I may add something here or there over time.  I've also found a lot of products that don't "specifically" do this, and as a result, don't really do it well.

    I would be thrilled to have some help on this, and would be happy to share and provide any and all code that I put together.  I am not looking for someone to do all of the work.  I want to develop this, and I want to learn how something like this comes together.  I've never done anything like this, and will be upfront there, but I genuinely do want to learn.

    So far, none of the code I have works.  I have been able to place some panels on a form and move them around using code like this:

            Point PanelMouseDownLocation;
            private void panelEx1_MouseDown(object sender, MouseEventArgs e)
            {
                if (e.Button == MouseButtons.Left) PanelMouseDownLocation = e.Location;
            }
    
            private void panelEx1_MouseMove(object sender, MouseEventArgs e)
            {
                if (e.Button == MouseButtons.Left)
    
                {
    
                    panelEx1.Left += e.X - PanelMouseDownLocation.X;
    
                    panelEx1.Top += e.Y - PanelMouseDownLocation.Y;
    
                }
            }
    While this does work in moving the panel around, I wasn't sure this was the way to go and ended up abandoning it.  That code is in C#, but I could work in VB as well.  That's one of the reasons I decided to ask on here what people thought.  I had started working on stretch to resize the panel, but that's when I started thinking in terms of having each room be its own usercontrol.

    Kareninstructor:

    Thank you very much for your help.  I completely understand what you're saying and I do not disagree.  An out of the box solution would be great.  Last year I needed to add reporting support to the application, and I did purchase a product to do this.  With that said, I've noticed two things about products that I've looked at for doing this.  They're either a fortune and do a ton of things that I will never need (3D, walkthroughs, furniture placement), or they try to be a swiss army knife and do a whole bunch of things, but neither of them particularly well.  I'm hoping with this to do something very specific well (hopefully).

    I've never worked with WPF, so that would definitely be a learning curve as well.  I have played around with it at Microsoft Developer Events in the past (remember those?), but nothing real serious.

    I hope I got everyone's questions / points.  I want to thank everyone for all of your help with this.  I'm still not sure I'm even asking all of the right questions, but I am committed to making this happen and learning whatever I need to learn to do that.

    Thanks Again!


    • Edited by MLyons10 Monday, June 4, 2018 7:27 PM
    Monday, June 4, 2018 7:25 PM
  • In my humble opinion is that not true. I lack the knowledge of some others here about drawing in this forum like Ray, John and Tommy. However, afaik is WPF more around media with images and sound than with drawing tools.


    I would agree with this.  Something like the basic floor plan functionality provided by Visio would be fairly easy to create in Windows Forms using GDI+.  When you break it down, the core functionality is actually quite simple to implement, given the fundamental knowledge of what needs to be done.  I don't think the learning curve is very steep to gain this knowledge, however, it may be a fairly long, gentle slope.  But once you understand how to model the problem into appropriate classes and create a basic rendering canvas with your own renderable components, the rest is just some basic user control development and Graphics methods.

    I'm also not sure that you would gain much from WPF since this kind of application is pretty much just lines and images.  WPF doesn't really bring anything special to the table (for this purpose) until you get into animation, 3D rendering or other advanced media features.


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    Monday, June 4, 2018 7:30 PM
    Moderator
  • Hi MLyons10,

    I would recommend that you search these forums for threads about making video games in VB.Net.  Many of the same principles will apply, but what you are doing is easier in that you will not need a continuously running loop for a game engine.  You can perform all of your rendering based on user input.

    Essentially you are going to create a Canvas control and a DrawingElement class.  The DrawingElement class will have properties to describe what the element represents in the drawing, it's dimension, color, image, text, etc., whatever is necessary to describe any drawing element in general.  This class will also have a Draw(graphics) method that takes an instance of Drawing.Graphics and uses it to draw itself.

    You might have other kinds of document elements that inherit from DrawingElement and represent more specific objects.  You would then create a collection of DrawingElements on the Canvas control and simply loop through it in the Canvas.Paint event handler, calling Draw(e.Graphics) on each element in the collection.  You would have toolbars or menus to allow the user to select and place new elements, adding them to the collection in your code.

    If you want to print the drawing, you simply pass the graphics argument from the print event handler to all of the elements in the collection.

    The rest of the program is mostly mouse event handlers on the canvas to let you select elements from the collection and manipulate their size, position and other properties.

    Does that make sense/seem helpful?


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    Monday, June 4, 2018 7:41 PM
    Moderator
  • Hi

    Here is some very simple code to illustrate one (of many) ways to go about it. This example is only a demo to show some of the simple methods etc. In reality, the object properties would likely be stores in a file and loaded for the project (different sets of objects for different projects)

    ' blank Form1
    ' copy/replace default code
    ' with this code
    Option Strict On
    Option Explicit On
    Public Class Form1
      ' a structure to hold all rect
      Dim rects As New List(Of rect)
      Private Sub Form1_Load(sender As Object, e As EventArgs) Handles Me.Load
    
        ' create some random rectangles
        Dim nr As New rect
        With nr
          .location = New Point(10, 10)
          .size = New Size(100, 100)
          .linepen = New Pen(Color.Blue, 2)
          rects.Add(nr)
        End With
    
        Dim nr2 As New rect
        With nr2
          .location = New Point(10, 110)
          .size = New Size(50, 150)
          .linepen = New Pen(Color.Red, 4)
          rects.Add(nr2)
        End With
    
        Dim nr3 As New rect
        With nr3
          .location = New Point(60, 110)
          .size = New Size(80, 60)
          .linepen = New Pen(Color.Green, 3)
          rects.Add(nr3)
        End With
    
        Dim nr4 As New rect
        With nr4
          .location = New Point(140, 70)
          .size = New Size(40, 120)
          .linepen = New Pen(Color.Black, 1)
          rects.Add(nr4)
        End With
    
      End Sub
      Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
        ' all drawing done here
        ' in this event handler
        For Each r As rect In rects
          With r
            e.Graphics.DrawRectangle(.linepen, New Rectangle(.location, .size))
          End With
        Next
      End Sub
    End Class
    ' a simple class for rectangles
    ' other objects could also be
    ' done in a similar fashion
    ' properties for each rect
    Class rect
      Property location As New Point
      Property size As New Size
      Property linepen As New Pen(Color.Black)
    End Class


    Regards Les, Livingston, Scotland

    • Proposed as answer by Stanly Fan Thursday, June 21, 2018 5:58 AM
    Monday, June 4, 2018 7:54 PM
  • Lyons,

    Very good summary.

    Hmmm. Ok so one goal is:

       " easily layout and dimension the rooms "


    I can write:

     6' 2-1/16" x 8' 4 27/8"

    fairly easily. Why would I need a picture of it? You must have something specific in mind that will simplify the process? This is what you are creating right?

    "I built a simple line item estimator for some of his simpler projects, but I'm trying to expand it "

    What is this a datagridview? Should it be? Should the floor plan be in the datagridview?

    I know, how big is the floor plan? Can you scale it resize it? How do you spec the dimensions by dragging handles on the arrows or just typing in the dimension line or just typing in the datagridview (spreadsheet)? Numericupdown controls?

    Just things to think about.

    You need a basic CAD shell which I can show you or you can do you own.

    Then you need your drawing objects lines rectangles ellipse etc Class. these use the basic drawing object classes as Reed says and etc.

    And as mentioned tools like delete, copy etc so that is a tool bar or menu etc.

    Just throwing ideas at you.

    :)


    PS Oh, well one thing it does is minimize errors like the one I made typing in the dimensions above.
    Monday, June 4, 2018 8:23 PM
  • For drawing something as in the image you have grab bars for moving the blocks around and resizing them. Then you have lines displaying dimensions of sides of objects. If this is all you want to do perhaps look into creating a control that can perform these requirements.

    However you would need some method to draw the distances on the sides of the control where you want those drawn. Unless the distances were separate controls.

    Other than that a CAD type shell as TommyTwoTrain advises would be the way to go as it's complex what you want to do really and not IMO simple drawings in GDI but rather complex geometry to size things and provide dimentions in the way that you display.


    La vida loca

    Monday, June 4, 2018 8:45 PM
  • Where do I start with a project like this?  I have found precious little online and I'm wondering if that's because I'm searching for the wrong thing.

    A custom control is not necessary.

    Start by constructing a 'dimensioned line' object that takes information about the two end points and draws a line.  The first iteration is a simple line that you can place with two mouse clicks. Then add handles and the ability to drag it and resize it. Then add arrow ends.  Then add automatic dimensioning text printed below it: the dimension comes from a global scaling factor that converts pixels to feet and inches (metric would be much simpler). That conversion will get more complex later on.

    Once you have a simple dimensioned line working, so that you can place it anywhere on the drawing surface, drag it, resize it etc, you can apply most of the same code to a dimensioned rectangle.  Then a circle, and so on.

    The point is, to work in simple steps, building in complexity only after you have the basic concept working. Take advantage of the way that VB and .Net makes it easy to add functionality in small increments.

    Monday, June 4, 2018 11:55 PM
  • Since you have not worked with WPF before and others are against this I took a C# code sample, did a few modifications and implemented it in a VB.NET desktop project. It's not complete.

    Here is what it does currently.

    • Although the class was designed for all controls I focused on a GroupBox.
    • You can move and resize a GroupBox
    • Save the size and position of each GroupBox

    Here is where it needs work (I don't have the time and depending on how far you want to take it dictates how much of an effort it would be to finish)

    • Restore GroupBox controls after closing the app but does remember size and position.

    Original source on Code Project.

    My solution

    Full source code for the above done in VS2017. 

    https://1drv.ms/u/s!AtGAgKKpqdWjiktmMwHzvvhiwwBs


    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    Tuesday, June 5, 2018 12:04 AM
    Moderator
  • My father runs a construction business and I built a simple line item estimator for some of his simpler projects<

    Many years ago I was working on a printer device driver and the neighbor spent all day working in his garage doing something with blueprints. I asked him about it and he said he was doing take-offs or something like that.  He would analyze the blueprints for the purpose of estimating and then he would bid on the ones he was interested in. That might be what you are talking about. I considered developing something to help him but never did.



    Sam Hobbs
    SimpleSamples.Info

    Tuesday, June 5, 2018 4:04 AM
  • I think you should not be thinking in terms of controls. Some people have indicated that you just need a canvas and I think that is the basic idea. Whether you use Windows Forms or WPF or UWP the important part will be graphics that is relatively independent of the UI.

    I am not a graphics expert; far from that. But probably you want graphics articles. Perhaps graphics books will help. You need a system that is object-oriented; you say you want to be able to more things around. Graphics people can do things like that. You need a way to both draw something and undraw it. The drawing and undrawing is relevant to the dragging,. which you will want to do, right?

    Many years ago I found an online sample of doing that kind of thing; I liked it and I had trouble finding it again and I went through that a few times until I finally was sure to bookmark it. And then I realized it is sample code from a book. It has been so long ago that again I am not sure where the sample is at but I think the book is Practical object-oriented development in C++ and Java. Unfortunately the code is neither C# nor VB.

    Regardless, I think you should look for stuff about object-oriented graphic drawing.



    Sam Hobbs
    SimpleSamples.Info


    Tuesday, June 5, 2018 4:13 AM
  • I have posted a basic CAD drawing shell here.

    If you think you want to go that direction then its a good start. You just need to add the rest.

    However as I thought about your specific need maybe its a bit more than you need.

    Perhaps you can make a more basic thing for your purpose using parts of the example. Maybe that is what you had in mind.

    Tuesday, June 5, 2018 9:26 AM
  • Thank you everyone for all of your ideas, insight, and code examples.  I'm reading and rereading everything and looking at all of these suggestions and ideas.

    It looks like there are a few different ways of doing this, and I'm trying to figure out which way may be best and also trying to understand as best I can the different ideas mentioned.

    I want to go through and read up on all of the things that everyone has suggested I read up on as well.

    Please give me a couple of days just to go through and read up on everything and I will post back.

    Thank you all for your help, I REALLY appreciate it.

    Wednesday, June 6, 2018 5:35 PM
  • Hi MLyona10,

    It seems that you have got some help from these replies.

    Please remember to close your thread by marking the helpful post as answer, it is beneficial to other community members who face the same issue.

    Thanks for your understandiang.

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, June 19, 2018 8:06 AM
    Moderator