HOME

OGI Systems Ltd.
Manual for gemstone Matrix Animators 360°

  1. Creator for Embed Gem - Simple Creator for Embed Gem Animator 360° with AUTO-resizig of gem's Frame for PC and Mobile device.
  2. Example of HTML-page with 2 gems - 2 embed gems from JavaScript Creator (other tab of Browser).
  3. Code of HTML-page with 2 gems (new tab of Browser)
  4. gemanim1.php - Animator for one Object with Matrix Images and additional Matrix for (optical) Zooming.
  5. gemonematr.php - Animator for one Object with Matrix for Images and for (digital) Zooming.
  6. gemcontrol.php - Animator for one Object 360°, Control Panel and Imahge Correction Panel - digital zooming
  7. multigemanim.php - Multi-Gem Animator to play sequence of gems in one canvas

Embed-Creator on your HTML-page:
Special JavaScript module to create Embed Gemstone for PC and Mobile Device

It is Simplest way to get Animator 360° in your HTML or PHP-page is to use our special JavaScript function.
See code below (html-tags are case-insensitive: small or big chars may be used as you desire):


How it View ? See below (2 gems):


It is one call JavaScript function "Embed.ogi_ShowEmbedGem()" for PC and Mobile device.
This function will detect Screen Size, Operation System of PC or Mobile device on Visitor side, and create embed iframe with correspond parameters.
This Creator uses module gemanim1.php
Common code:
Embed.ogi_ShowEmbedGemOnTag("UserID", "GemID", RotationTimeMsec, "TagID");
Parameters of Function:
UserID - name of folder of registered OGIDiaPix user (jeweller, manufacturer).
GemID - name of gemstone folder inside user's folder (../UserID/GemID/)
RotationTimeMsec - Time of one full Turn (or Shake) of gemstone [mSec].
   It is not a Frame Time.
   Rotation Time independent from number of Frames (images) in Animation Matrix.
   Minimal Rotation Time is 2000 mSec (20 mSec/Frame).
   Program will set this minimal time, if you set RotationTimeMsec < 2000;
TagID - html-tag on your web-page, where you need to place embed gem.

Page Top

Module gemanim1.php:
Animator for one Object with Matrix Images and Zooming

URL:
https://www.ogidiapix.com/box_anim3/gemanim1.php?U=userID&G=gemID&FS=frameSize&CW=canvasWidth&Dbg=enbDebug&RT=rotationTime&ZM=enbZoom&CP=enbControl

Order of Parameters in URL may be arbitrary.
NOTE: If you omit some parameter, the program will use or default value (1-st time),
or value of this parameter from other prevous gemstone, even from other page of the site.
Use full URL to prevent undesirable effects.
- You need to calculate IFRAME URL and Size Parameters for PC and Mobile Device versions of your web-page.
    URL Parameters:
  1. U=userID - name of folder of registered OGI DiaPix user (jeweller).

  2. G=gemID - name of gemstone folder inside user's folder (../userID/gemID/)

  3. FS=frameSize - type of animation Matrix with images (frames) to use by animator:
    FS=C - Reduced Matrix with small frames to use inside one cell of Catalog.
        Each frame size 306x248px (Width 306 px, Height 248 px).
        Matrix typ "C" contains 4-5 times less images (frames), than other matix types to reduce loading time.
    FS=S - Matrix with small frames. Each frame size 306 x 248 px
    FS=M - Matrix with Medium frames. Each frame size 530 x 430 px.
    FS=L - Matrix with Large frames. Each frame size 800 x 650 px.
        It used as usual for Zooming inside Small and Medium Animator.

  4. CW=canvasWidth [px] - visible canvas (frame) width around animator.
    Canvas Height will be proportional to animation frame height.
    It may be the same as width of frame (CW=306 or 530 or 800).
    If it has other value, image frame will be proportional stretch to width in CW.

  5. Dbg=enbDebugInfo: Dbg=0 - Disable debug info inside animation frame.
    Dbg=1 - Enable debug messages (Frame Size, Current Frame Number, Rotation Speed).

  6. RT=rotationTime [mSec] - time of one full turn of animated object [mSec].
    For Shake Style (no full turn), it is time of moving object (gemstone) between maximal left-right positions.

  7. ZM=enbZoom: ZM=0 - Disable Zooming (it is usefulmfor animation inmside cell, FS=C parameter).
    ZM=1 - Enable zooming. For Small and Medium Matix it will use Large Matrix for zoomong, that increases loading time.
    Zooming will work if control panle enabled (CP=1 - see below).

  8. CP=controlPanel: CP=0 - animator without Control Panel. It will use minimal space on web-page.
    CP=1 - Animator with control buttons (Rotate/Stop, Zoom Button, One Step Left-Right, Partial Rotation).
Sample 1 of Embed Code - no Control Panel, Medium Animator, Canvas Width = 400px, No Zooming.
Iframe Width = 400+20px; Iframe Height = (430/530)*400 + 20 = 345px;


Note than tag Embed IFRAME should contain additional space around animation border to prevent cutting the animation canvas and scroll.
(+10px around each border in this case, that is Width of Frame +20px and Height + 20px).
HOW it will visible:


Sample 2 of Embed Code with Control Panel, Debug Info with Medium Animator.


Note than tag Embed IFRAME should contain additiona space around animation frame to prevent cutting the animation canvas.
(+10px around each border in this case, that is Width of Frame +20px and Height + 20px).
HOW it will visible:

Page Top

Module gemonematr.php:
Animator for one Object with one Matrix for rotation and digital Zooming

URL:
https://www.ogidiapix.com/box_anim3/gemonematr.php?U=userID&G=gemID&FS=frameSize&CW=canvasWidth&Dbg=enbDebug&RT=rotationTime&ZM=enbZoom&CP=enbControl&IMC=enbImageCorrection

It is analog of module gemanim1.php, but it does not use Large Animation Matrix for Zooming.
It reduces loading time (especially for mobile device, smartphone etc.)/
The URL parameters are the same as gemanim1.php - see above.
Additional URL Parameter:
IMC=enbImageCorrection
IMC=0-disable; IMC=1-enable Image Correction Panel under canvas of animator.
NOTE than Image Correction will not save in gem's data. It is only for current animation.
You should reserve additiona vertical space in your embed code for Image Correction Panel (approx.90px with default font size in the Browser).

Sample 3 of Embed Code for Cell Animator inside Catalog.


How it visible:


Sample 4 of Embed Code for Medium Animator with debug info and control panel.


How it visible:


Sample 5 of Embed Code for Medium Animator with debug info, Control Panel and Image Correction Panel.


How it visible:

Page Top

Module gemcontrol.php:
Animator for one Object 360°, Control Panel and Imahge Correction Panel - digital zooming

URL:
https://www.ogidiapix.com/box_anim3/gemcontrol.php?U=userID&G=gemID&FS=frameSize&CW=canvasWidth&Dbg=enbDebug&RT=rotationTime&ZM=enbZoom&CP=enbControl&IMC=enbImageCorrection

URL Parameters are the same as in module gemanim1.php - see above.
This module contains extended control panel with image correction
for low contrast images (frames), for very light or very dark images.

Sample 6 of Embed Code for Medium Animator with debug info and full control panel.


How it visible (G=magic004):


Sample 7 of Embed Code for Medium Animator with debug info and full control panel.


How it visible (G=magic002):

Page Top

Module multigemanim.php Multi-Gem Animator to play sequence of gems in one canvas

URL: https://www.ogidiapix.com/box_anim3/ multigemanim.php?U=user&FS=frameSize&CW=canvasWidth&Dbg=enbDebug&RT=gemTimeMs&ZM=enbZoom&CP=enbControl&IMC=enbImgCorrection&GLS=gemsCSV
This animator can play sequence of some object (gems) &360deg; from one User Catalog with Control Panel and Image Correction.
Current Gem with auto-change to next one from gems list after full turn (or shake).
Mouse Wheel will also change current gem.
It allows to play sequence of the same gem with different "vertical" positions in DiaPix device, to simulate its "vertical" moving besides rotation (as Gem 3D).
Additional URL Parameter:
GLS=gemsListCSV (1-16 gems)
Example: &GLS=00050,0010,0027,0132
NOTES:
- First gem in list (demo/00050 in this case) Must present.
Besides Animator will ignore all list of gems.
- All gems in list must contain image matrix with the same size and number of frames (snap images).
- If not all gems arrive into animator, use temporary debug mode (URL Parameterr &Dbg=1).



How it visible (4 gems from User=demo):


Page Top