wheel.json (eng)

The wheels' position is defined by a file called "wheel.json" placed in the database folder of the desired system.

It looks like this :

wheel.json

{
  "transitionTime": 400,
  "selectPosition": 2,
  "hide": false,
  "hideStart": 1500,
  "hideDuration": 1500,
  "type": "horizontal",
  "points": [
    {"x":35, "y":80, "rotation": 70, "scale":1, "zIndex":1},
    {"x":40, "y":80, "rotation": -70, "scale":1, "zIndex":2},
    {"x":60, "y":80, "rotation": 0,   "scale":2, "zIndex":3},
    {"x":80, "y":80, "rotation": -70, "scale":1, "zIndex":2},
    {"x":85, "y":80, "rotation": -70, "scale":1, "zIndex":1}
  ]
}

You can validate your json file with JSON Lint.

So you can act on :

1. transitionTime: The transition time for the passage of a wheel to another.

2. selectPosition: designates the active wheel, knowing that the numbering starts from 0. So in our example the wheel 14 is designated by the position of the index 15

3. hide: true / false, indicates if you want to activate the hide or not.

4. hideStart: designates from how long the hide will begin.

5. hideDuration: refers to the period that the wheels disappear.

6. type: changes the navigation orientation of the wheel (can be horizontal or vertical).

7. points: Moves on your screen, the dots that make up your wheel.

• x: location on the horizontal axis as a percentage.
• y: location on the vertical axis in percent.
• transform: transformations for the element (see CSS Transforms).
• scale: zoom on the element.
• index: numbering of the element. Warning selectPosition + 1

What gives in our example: