novosibpano@yandex.ru  
Content
links

Discussion at the Forum krpano

Facebook group

Youtube channel

Plugin "Design Editor" for krpano. Without a flush, only XML.

Editor 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.
  • The ability to visually change the tone, saturation, brightness and transparency of the control panel, curb, shadows.
  • The 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.


Examples.

YouTube





Control panel.

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 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 and then input of the parameter from the keyboard (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".



    browser window 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

    For connection, please write 
    
    <include url="edit_skin/edit_skin.xml" />
    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)


    • Get the working version of the plug-in editor.

    If you liked the editor, you can get a working version with saving to an XML file by making a donation through PayPal (Pay Nov button) in the amount from 9 euros.
    Do not forget to provide an email address. After payment, I will send the full version of the editor to this address within one day.

    Interface design editor 9 EUR.

    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.