novosibpano@yandex.ru  

Creating Floor Plans v1.4.


  • only HTML5. krpano-1.19-pr16.
  • Capabilities.

    • EEvery operation is done in the browser window and does not require code writing and editing.
    • Create floor plans, dot them with radars. Add drawings, diagrams, images and set icons on them, which open the chosen tour places.
    • To select plans or documents, there is a drop-down list. Customize the window (location, size, positioning, show / hide at startup).
    • Customize the window design (color, transparency, border, rounding, shadows).
    • Enable compass in the plan and view windows, (there are options to show/hide or disable the compass).
    • Select the dot images before and after viewing the scene, adjust their scale.
    • Enable captions, they appear when hovering over the dots.
    • The moving effect. When moving to the next scene, the view direction and the viewing angle are saved
    • The plan image is scaled in respect to the cursor location on the plan, not to the plan center (the place under the cursor does not shift).
    • The plan image is moved with the mouse inside the window.
    • When moving to the next scene, the plan is automatically centered in the window in respect to the spot of this scene.
    • The window with the plan moves around the screen, its size changes if you pull the corner of the window. No need to specify the coordinates and size of the window, just save in the selected position.


    Editing points with radars on the plan.
    YouTube


    Example in 3D tour.




    How to connect.

    To connect the editor, place folder "floorplan_SM" fin the root folder with the tour and install in the main file tour.xml:

    
        <krpano .... >
        <include url="floorplan_SM/editor/floorplan_SM.xml" />
      
        .
        .
        </krpano>
    	
    To create a new project, change the file "floorplan_SM/param_EFR.xml" by a file without hot-spots which lies in the folder "floorplan_SM/new project/param_EFR.xml"

    PIN code.

    After connecting Plugin at the first start, press the key combination "E + F" , the line to enter a 4-digit pin code will open.
    Enter the code and press "Enter" (the system is sensitive to capitals), the minimized panel of the plug-in will appear. Expand the panel and click "Save" , the Explorer window will open, specify the path to save "floorplan_SM / param_EFR.xml"
    Important! After saving, always reload the browser window!
    When you re-open the tour, the Plugin panel will be available, no PIN is required.

    When the work is over, press the "Delete PIN"
    The window will open, save the file "param_EFR.xml" Restart the browser - to open the Plugin, you will need to enter the PIN code.



    Creating a plan.

    Place the plan images in the folder floorplan_SM / plan.

  • Select an image. Click the thumbnail with the plan image – the Explorer window will open. Select the plan image from floorplan_SM / plan. folder and it will appear in the plan window.
  • "Add plan" To add the plan, click the "Add plan" button. A default plan image named "plansm_№" will appear, where No. is the plan number. Set your image and enter the name of the created plan.
    Drop-down list of names is created in the upper left corner. Click of the triangle opens list, click of the name from the list opens the respective plan.
  • "Add dct" Add a document (drawing, image, etc.). Locate icons on them with references to show specific places in the tour with the specific angle of view. Details…
  • "Assign an open scene" Selection of the scene that will start when you open the plan. Open the plan, start the desired/needed scene belonging to the plan. Click the "Assign an open scene" button, and the current scene name will appear next to it. The next time you open this plan, the selected scene starts.
  • "Open start" The green indicator shows that the plan window is opened when starting the tour, the gray indicator shows that the window is minimized.
  • "Close plan on click in empty space" The green indicator – to close the plan by clicking in an empty area of the screen.
  • "Open plan when you hover over plan button" The green indicator – to deploy the plan when you hover over the plan-open button.
  • "align left" The window is positioned is respect to the upper left corner. Click of the button changes positioning to the upper right corner. The button displays "align right".
  • Plan window position and size Before saving the project, place the window with the plan in the right place by dragging it with the mouse over its top part. Move the cursor to the bottom right corner of the window - a triangle will be selected; grasp it to resize the window. Save the project and reload the browser - the window with the plan? will open with the changes made.
  • "Delete plan" Deletes the current plan.
  • "editor design" Opens an additional panel to edit design of window. More detailed information here .



  • Creating spots, setting up the compass and radar.

    "start" - Select the point image before viewing the scene. Click of the thumbnail of point image will open the explorer, select the image in the folder floorplan_SM/iconPoint.
    "onclick" - Select the point image after viewing the scene in same folder.
    "active" - The active point image (with the radar).
    "Active spot" - to show or not to show the active point image.
    "scale" - Scales the point. Press the button and move it to left (zoom out), to right (zoom in).

    • Open the scene in the current plan.

    • Turn on the editing mode – the button "Editor on", there will be overlapping red lines for easy positioning.
    • Turn the scene in the required direction (to south for example).

    • Grasp the compass bar in upper screen, shift it to align the direction (south) with the vertical red line.


    • Press the "Add spot" button - a dot with the radar icon with a "lock" icon and a red line (radar direction) will appear on the plan (the top left corner).
      The lock near the point blocks its motion, radar correction or cancel.
      Use the mouse to move the point to the plan scene location. Grasp the red dot on the line to unfold the radar on the plan in accordance with the chosen direction (south).
      For each scene, you can create only one point . On the "Add spot" button, the red indicator means that the scne already has a point, the green one shows that the scene is free and you can create a point for it.
      Next created points do not require the compass to be set if they belong to the current plan.

    • Saving the same direction of the current scene view, open a new scene of the current plan and turn in the chosen direction (south). The point is that the new spot is created with the same direction as in the previous scene (south). If you turn the current scene, the new spot radar in the new scene will also unfold accordingly, and it will need corrections. Sometimes it is more convenient. Rotate the scene by aligning the target with a window, door, angle or other clearly positioned object in the scene. Grasp the point on the red line of the radar. Expand it on the plan in respect to the scene place.

    • Press the "Add spot" button. The radar is already pointed to south. Move the appearing point to the plan scene location.
      Create the other points of the current plan in the same way.
      I recommend that you watch the video fof plans and points creating.


    • Title scene
    • - Enter the scene name. If the display settings are set, the title will be displayed in the thumbnail bar and when hovering the cursor to navigation arrows.
    • Clicking a point closes the plan- Active - click on the point to minimize the window with the plan.

    • Delete spot- removes the selected point. "Lock must be opened".
  • Compass
    • "enabled" - the compass is off. The compass opening button and compass on floor plans are removed.
      "start open" - the compass is deployed at the start.
      "on plan" - the display compass in the plan window.
  • Keepwiew
  • Creates the motion effect. When switching to the next scene, the view direction and viewing angle are saved. No prior equal align all panoramas during stitching is required.



    Create the points to show the selected views.



    You can create icons (hereinafter – the points) and assign them the panorama opening with a preset zoom-in and view direction. Place them on plans, drawings, documents, diagrams which you can add to the plans window.

    "add" - Add a point on the plan or in the document.
    "editor off" - Enable/disable point editing, a lock icon appears next to the point.
    "scale" - Changes the point image scale. Press the button and move in the pressed state to the left (zoom out), to the right (zoom in).

    Select an image:

    • start - Select the point image before viewing the scene. Click of the thumbnail image of the point will open the Explorer, select the image in the floorplan_SM/iconPoint folder.
    • onclick - Selection of the point image after viewing the scene in the same folder.

    "Show text" - Show the text as the mouse is there (active – the green dot).

    "text entry line" - Enter text to display on hover.

    "Clicking a point closes the plan"- Active – click of thepoint will minimize the plan window.

    "delete" - Delete the point.

    • Create and open a plan(document).
    • Open the desired panorama.
    • Enable edit mode - "Editor off"button
    • Press "add", a dot will appear on the plan(document) with an opened lock icon, move it with the mouse to the desired position. Click of the lock closes it and blocks the point motion.
    • Set the desired direction and zoom-in in the panorama.
    • In the plan window (the document), click the appearing "set view" button.
    • Select the image icon until you hear a click and then click in the line "Select an image".
    • Complete the editing by pressing "editor on".
    • Now when you click on the created point, the view you have set will open.



    Window editing panel for plans.

    Window under plan is divided into two parts. The window under the plan is divided into two parts.
    1. The bar-shaped upper part (heading) in which the drop-down list of plans is placed, and the "minimize plan" button. Grasp the "heading" and move the plan window.
    2. The window itself for the plan image.

    How to change settings.
    Select an element by clicking on it , the name of the item being edited will appear above, "Edit top" or “Edit widows”.
    The parameter changes via pressing the left mouse button and shifting to left (decrease parameter), to right (increase parameter). The farther away the mouse is from the point of pressing, the faster the parameter changes.
    Click of the button highlights it with a green frame, direct input from the keyboard becomes available - all digits, percent (button "5" of the top keyboard row), letters A, B, C, D, E to enter the color value in sexidecinal system. In case of an input error, the "Backspace" key clears the button.


  • height - change in height (in pixels).
  • alpha - change transparency (from 0 to 1)
  • ox is displacement along x-axis. (in pixels).
  • oy is y-offset.(in pixels).

  • Color editing "Color".

    Press the button activates the selected item and permits changing the color settings with sliders below.

    • bgcolor - fill.
    • border - border.
    • shadow - shadow of the hotspot.
    • Color change color sliders.
      • Tone - Changing a color tone.
      • Saturation is a variation of saturation.
      • Brightness - change the brightness.
      • Transparency change of the transparency.

      Attention!
      If saturation is zero (gray), you cannot adjust the tone. First you need to withdraw from the "gray" via raising the saturation.

    Width of the borders (in pixels).
    • all - Change in the radius of every angle simultaneously.
    • lefttop - Top left corner.
    • righttop - Top right corner.
    • rightbottom - Bottom right corner.
    • leftbottom - Bottom left corner.
    Radius of angles (pixels).
    • all - Change in the radius of every angle simultaneously.
    • lefttop - Top left corner.
    • righttop - Top right corner.
    • rightbottom - Bottom right corner.
    • leftbottom - Bottom left corner.
    Shadow.
    • xoffset - indentation of the shadow along the x axis.
    • yoffset - indentation of the shadow along the y axis.
    • blur - shadow blur.
    • Speed - shadow size.


    Download demo-version.

    Completely working demo version with a time limit of 14 days. Send to the e-mail novosibpano@ya.ru request for a demo version and I will send a download link.



    Get creating plans plugin .

    Test Plugin by downloading demo version or by this link . If you liked plugin, You can get it by making a donation through PayPal.
    Do not forget to specify e-mail address and specify 4-digit desired pin code. The
    I will send to this address a link to download an archive with an example and a plugin for one day.
    Updates plug-in for free!

    Donate 34 EUR.




    Changes

    08.10.2019

    Version 1.42

    • When you enter the PIN code, a blocking window appears with a warning about the restart of the tour.
    03.10.2019

    Version 1.41

    • Fixed bug when creating the first point.
    • Fixed bug when positioning the window on the right.
    • Important! After saving, always reload the browser window!
    26.08.2019

    Version 1.4

    • Now, when saving a project without a PIN code, the editor files are not loaded.
      Finished project loads faster, increased productivity.
    • When moving to a new scene, the point with the radar on the map moves smoothly.
    • The ability in the mobile version to set the window size for the plans in proportion to the height and width of the viewport. (file param_EFR.xml - width_mobile and height_mobile)
    03.08.2019

    Version 1.3

    • A panel has been added for creating and editing points that open specified views.
    08.07.2019

    Version 1.2

    • Added button to change the active point.
    • Partially modified interface.
    • Created an individual drop-down list.
    • Changed the name of the folder with the plugin.
    • Changed the location of the folder with icons points.
    • Fixed some bugs and optimized code.
    07.11.2018

    Version 1.1

    • Added a button to select the opening scene when switching between plans.
    • Added the button "collapse plan by clicking in the empty space of the screen" (Yes/no).
    • Added the button "expand the plan when hovering the mouse over the button to open the plan" (Yes/no).
    • Added the ability to select the icons of the image points before and after viewing the scene individually for each point.
    • Added the ability to zoom the icon for each point.
    • Fixed some bugs in the executing code.
    17.07.2018

    Version 1.0



    Notice

    Plugin is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will author of plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not plugin author have been advised of possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event plugin author will have no liability arising out of this agreement.