Creating Floor Plans. HTML5. krpano-1.19-pr16

by Alexandr Mikhailov - novosibpano@ya.ru

krpano Forum Discussion Thread

Creating Floor Plans.

Description

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

    <krpano .... >
    <include url="floorplan_SM/editor/floorplan_SM.xml" />  
    .
    .
    </krpano>
	

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

The window under the plan is divided into two parts.
1. The bar-shaped upper part (cap) in which the drop-down list of plans is placed, and the "minimize plan" button. Grasp the "cap" 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.
Changes are immediately applied to the element, and you can visualize the result.
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 displacement along the x-axis. (in pixels).

oy displacement along the 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
• 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.

Information on purchasing the plugin is available here:
Get creating plans plugin