Telegram: Aleksandr

Creating Floor Plans v1.48.

HTML5. krpano-1.20.10 - 1.20.11


  • Every operation is done in the browser window and does not require code writing and editing.
  • Creating floor plans, placing transition points on panoramas. 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.

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" />

Make sure you have the radar plugin in plugins/radar.js !

PIN code.

Open file "floorplan_SM/setting_FP.xml", enter the 4-digit pin code in the line pin_cod="****".
Open the tour in the browser - the plugin will be connected.
Save and restart the browser - the plugin editor panel will be available, no PIN code entry is required.
When finished, press "Delete PIN" A window will open, save the file"setting_FP.xml"
Or clear the line pin_cod = "" in "floorplan_SM/setting_FP.xml".

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).

• Turn on the editing mode - the "Editor on" button, intersecting red lines will appear (for ease of positioning).

• Open the scene and turn north. The point is that a new spot is created with the direction of the radar on the plan up (this is usually north)

• We click on the plan in the place where you need to put a point, a point with a radar with a "lock" icon and a red line (radar direction) will appear.
The lock next to the point blocks its movement, radar correction, removal.
Move the point with the mouse to the location of the scene on the plan.
Grasping the red dot on the line, you can turn the radar for fine adjustments.
Only one point can be created for each scene.
On the "Editor on" button, the red indicator indicates that the point has already been created in the open scene, green - the point has not yet been created.

• Grasping the compass strip at the top of the screen, move it to alignment of the direction (north) with the vertical red line.

I recommend watching video to create plans and points.

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".

  • 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.

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.

editor off - enable/disable point editing.
Clicking on the plan creates a point icon. A red circle will appear next to the active 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 the point 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 - сhanging a color tone.
    • Saturation is a variation of saturation.
    • Brightness - change the brightness.
    • Transparency - change of the transparency.

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.
  • xoffset - indentation of the shadow along the x axis.
  • yoffset - indentation of the shadow along the y axis.
  • blur - shadow blur.
  • Speed - shadow size.

Settings in the file setting_FP.xml.

When you finish working with the plan, you save all the parameters in this file. You can change some parameters in this file manually.

pin_cod - Enter the PIN code.
start_open_plan - Open the plan at startup (true/false).
start_open_plan_mobila- Open the plan at launch on mobile devices (true/false).

Below are the images of the points on the plan (document) by default. The placement of the images must be in the folder floorplan_SM/iconPoint/.

point_url_1 - Name of the image of the point on the plan (the scene that was not viewed).
point_url_2 - Name of the image of the active point on the plan.
point_url_3 - The name of the image of the point on the plan (the scene that was already viewed).
pointV_url_1 - The name of the point in the document (the scene that has not yet been viewed).
pointV_url_2 - The name of the point in the document (the scene that was viewed).
point_current - Show the image of the active point (true/false).
point_scale - Changing the point size.
radar_scale - Changing the size of the radar.
compass_enabled - Turn on the compass (true/false).
start_open_compass - Launch the compass at the start(true/false).
compass_on_plan - Show the compass on the plan (true/false).
keep_viev - Enable saving the view when navigating through scenes (true/false).
design_bgcolor_cb - The fill color of the container with the list of plans. When you adjust the color of the header, the fill color of the container with the list of plans is set to the same. If necessary, you can change it manually.
click_spot_close_plan - Close the plan by clicking on the point (true/false).
click_V_close_plan - Close the document by clicking on the point (true/false).
click_close_plan - Close the plan by clicking on an empty place on the screen (true/false).
onhover_button_open_plan - When you hover over the "open plan" button, open the plan (true/false).
width_mobile - Width of the window with a plan on mobile devices (0-1). The value 1 = 100%.
height_mobile- Height of the window with a plan on mobile devices (0-1). The value 1 = 100%.
name_FIRSTXML - If the main XML file has a different name and path, enter the path, for example: indexdata/index
list_plan - Disabling the Plan list (true/false).
button_fullscreen - Disabling the full-screen disclosure button (true/false).
angle_placemark - on/off The corner for resizing the window with a plan (true/false).

open_plan_resetting_size - When reopening the plan, fit the entire plan into the window (true/false).

After the above list, there are layers with images of plans and layers of points on the plan. Layers are created in edit mode.

At the end, the layers are spelled out: top_container_plan - Window title container with a plan.
container_plan1 - Container for the plan/document image.

Download demo-version.

Download demo archive with example and plugin. You can connect it to your tour and test it.
The demo version is fully working and differs from the full one by the presence of the inscription "DEMO version".
pin code 1111.

Purchase plugin.

Test Plugin by downloading demo version or by this link . The plugin costs 42 EUR.
Do not forget to specify e-mail address and specify 4-digit desired pin code.
The archive for download will be sent within 24 hours after payment is received.
Updates plug - in for free!

Pay-Pal payment

Send your Pay-Pal address to and write the name of the plugin,
I will send you an invoice for payment via Pay-Pal.

Pay via Payoneer with any Bank card without registering on the site.

If you have questions about the purchase of a plug-in or have difficulties with payment - send me an email at I will surely answer!
You can also use the feedback form (in the lower left corner of the site), or leave information in the "Comments" section.


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.