wheel.json (eng)

Romain Gay edited this page Mar 24, 2016 · 7 revisions

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

It looks like this :


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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.