"Design Editor" for Krpano.

HTML

Features

For those, who want to change their native skin easily and quickly without editing the code.

For work, you do not need to open the XML file and edit the code.
Ability to visually change the tone, saturation, brightness and transparency of the control panel, curb, shadows.
Ability to visually control the result during changes.
The original system for changing parameters, there is no accumulation of buttons.
Ability to enter parameters from the keyboard, numbers, percent 16th code for color.
Changes are saved to a XML file.

The editor is a panel with inside buttons for changing parameters. For convenience, the panel is moved by the mouse inside the viewport. By clicking on the top of the panel (with a triangle), it collapses.
Inside the panel, there are blocks in which the adjustments of color parameters, curb widths, radius of the corners of the corners are grouped, working with the shadow.
Bottom button - save changes to the XML file.

Switching the editing mode of the thumbnail panel and the thumbnail frame:

To change, click on the button, it will display the editing mode. Button bar - panel editor mode.
Thumbnail - thumbnail frame editor.

Color change block:

bgcolor - container background selection(FFFFFF).
border - curb selection (FFFFFF).
shadow - shadow layer selection (FFFFFF).

Buttons for changing color settings. There are risks that show the relative value of the parameter.
1. Changing the color (tone).
2. Changing the saturation. The shift to the left changes the saturation to 0, i.e. the color becomes gray (R = G = B). By default, the output from gray occurs by decreasing the value of R, the values of G and B remain unchanged. After the appearance of the difference between R and G, B, it becomes possible to change the color (tone).
3. Change the brightness. From 0 to the maximum.
At zero brightness (000000) it is necessary to lift it to the right, the resulting gray color can be output in color by raising the saturation.
4. Changing the transparency.
Clicking on the corresponding button selects the editing element (background, border, shadow), after selection you can adjust the parameters of the element (color, saturation, brightness, transparency).

BLOCK BURDWORK WIDTH SETTING:

all - changes the width of the borders at the same time on four sides. If the sides are initially of different sizes, the width of the border on the left side is taken as a basis (the width of the other borders becomes equal to the left). The remaining buttons change the width of the curbs according to the sides, respectively.
left - border on the left (pixels).
right - border to the right (pixels).
top - border from above (pixels).
bottom - border from below (pixels).

BLOCK BURDWORK RADIUS SETTING:

all - changes at the same time all curves of corners of a container. If initially radiuses of the different size, the curve of the left top corner is taken as a basis (radius of other corners becomes equal left top). The remaining buttons change the radius of the curvature. lefttop - top left corner (pixels).
righttop - top right corner (pixels).
rightbottom - bottom right corner (pixels).
leftbottom - bottom left corner (pixels).

BLOCK OF SHADOW SETTING:

xoffset - indentation of the shadow along the x-axis (pixels).
yoffset - indentation of the shadow along the y-axis (pixels).
blur - shadow blur.
Spread - shadow size.

Offset of the miniature frame:

border padding - margin of frame (pixels).
The button appears when the editing mode of the thumbnail border is selected.
Moving to the left - to the right, respectively, increases or decreases the frame around the thumbnail.

Save button:

Save settings XML - save the changed layer parameters in the skin_set.xml file.

How to connect the editor.

To connect the editor, put the folder "edit_skin" in the root folder with the tour.

An example of connecting a plugin in the main xml:


    <krpano .... >
   
    <include url="edit_skin/edit_skin.xml" />
    <include url="edit_layer/skin_set.xml" />
    .
    .
    </krpano>

Work with the editor.

How to edit.

Parameter changes occur by pressing the left mouse button on the button and shifting to the left (decrease the parameter), to the right (increase the parameter). The further the mouse is removed from the point of pressing, the faster the parameter changes.
Changes are immediately applied to the layer and you can visually control the result.
Inside the editing panel, there are 4 blocks - the color editor, the curb width editor, the corners round editor, the shadow editor.
Clicking on the parameter setting button highlights it with a green border. Keyboard input becomes possible (the numbers on the right side of the keyboard). All digits, percent (button "5" of the top row of the keyboard) and a hex code for entering color parameters are available. After typing the parameter for input, press "Enter", if an input error is entered, the "Delete" key clears the button.

Saving changed settings.

After editing, click the button in the panel "Save settings to XML".

The Explorer window opens, in which you need to specify the "edit_skin" folder to save the file "skin_set.xml".
We select the file "skin_set.xml" in the window, click "save" and confirm "replace the file".

Reboot! browser window - changes accepted.

Download editor.

Download the demo version of the editor with an example. The difference from the full only is that the button "Save settings XML" is not turned on The archive includes:

Working example of use. In the example folder "edit_skin" with the files of the editor in which:

edit_skin.xml(Executing file. closed code)
picture(icon)

Purchase plugin.

You can purchase the plugin by paying by the methods indicated below. The archive for download will be sent within 24 hours after payment is received.
Do not forget to provide an email address.

The plugin costs 12 EUR.

Pay via Payoneer with any Bank card without registering on the site.
Send information by email novosibpano@yandex.ru to get an invoice

If you are paying as an individual, please include your first and last name, country, email address.
If you are paying as a legal entity, please include your company name, country, website, contact person's first and last name and email address.

Pay via Pay-Pal

If you have questions about the purchase of a plug-in or have difficulties with payment - send me an email at novosibpano@yandex.ru. 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.

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.

Work in krpano

Contents

links

Changes