AS RUBIK DOCUMENTATION

JSON-based implementation guide for all plans

Our Mission: To Make Your Journey as Smooth as Possible

Revolutionary tools should be accessible to everyone. We've designed ANTI SWIPER RUBIK to be intuitive despite its advanced multi-directional capabilities. This guide will walk you through the new JSON-based setup, which makes configuration easier and more powerful than ever.

— AS RUBIK TEAM

Media Preparation & Optimization

For the best performance and fastest loading times, it’s crucial to optimize your media files before uploading.

Image Optimization

For best results, images should be optimized with the following requirements:

  • Target Size: Under 500KB
  • Max Resolution: 1920x1080
  • Format: JPG (using MozJPEG) or WebP
Recommended Method: Squoosh.app

We recommend using Squoosh.app, which was used to create the demo assets.

  1. Open your image in Squoosh.
  2. Enable "Resize" and set dimensions if needed.
  3. Select "MozJPEG" as the format.
  4. Adjust the quality slider to get the file size under 500KB, then save.

Video Optimization

For Pro and Enterprise plans, videos must be heavily optimized to meet the following requirements:

  • Target Size: Under 500KB
  • Max Duration: 4 seconds (can be changed by setting duration in the JSON)
  • Format: MP4 (H.264)
Recommended Method: Automated Optimization

We recommend using FFmpeg and a simple batch script to automate this process.

  1. Download FFmpeg: Download the latest version of FFmpeg from the official FFmpeg website. Unzip it and place the ffmpeg.exe file in a new folder (e.g., my_video_optimizer).
  2. Create a Batch File: In the same folder, create a new text file, paste the code below, and save it as optimize.bat.
@echo off
chcp 65001 >nul
echo [ VideoSanitizer: 4s cut + Web optimization ]

for %%F in (%*) do (
  echo Input: %%~nxF
  ffmpeg.exe -i "%%~fF" -ss 0 -t 4 -vf "scale=854:480" -c:v libx264 -b:v 1000k -preset fast -an -movflags +faststart "%%~dpnF_optimized.mp4"
  echo ✔ Output: %%~dpnF_optimized.mp4
)

echo --- All tasks completed. ---
pause
  1. Run the script: Drag and drop your video files directly onto the optimize.bat icon. Optimized versions will be created in the same folder.

Once optimized, upload your media to a folder (e.g., /images, /videos) on your server. You will reference these paths in your JSON configuration file.

File Uploading & Directory Structure

Once your media is optimized and your HTML/JSON files are ready, you need to upload them to your web server. Here’s a recommended structure and explanation of how paths work.

Example Directory Structure

A simple and effective way to organize your files on the server:

/ (your website's root)
|
├── index.html  (Your page with the grid)
├── pro-grid-config.json (Your config file)
|
└───/images/
|   ├── image-01.jpg
|   └── image-02.jpg
|
└───/videos/
    ├── video-01.mp4
    └── video-02.mp4

Writing Paths in JSON

The src paths in your JSON file are relative to your HTML file. Based on the example structure, your paths would look like this:

"media_pool": [
    {
        "type": "image",
        "src": "images/image-01.jpg"
    },
    {
        "type": "video",
        "src": "videos/video-01.mp4"
    }
]
FTP Clients

To upload files, use an FTP client like FileZilla or WinSCP.

JSON-Based Implementation Guide

Implementation is a simple 3-step process. No more inline JavaScript required!

1Create Your HTML File

First, create an HTML file (e.g., `index.html`) with the following structure. The script works by finding the .grid-carousel-viewport container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Rubik Grid</title>
    <!-- Add required CSS for layout -->
    <style>
        .grid-carousel-viewport {
            width: 100%;
            max-width: 800px;
            height: 450px;
            margin: auto;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h1>My Rubik Grid</h1>
    
    <div class="grid-carousel-viewport">
        <div class="grid-carousel-sheet">
            <!-- Content is loaded from JSON -->
        </div>
    </div>
    
    <!-- Replace YOUR_API_KEY_HERE with your actual key -->
    <script src="https://www.as-rubik.com/saas-backend/cdn-server.php?key=YOUR_API_KEY_HERE"></script>
</body>
</html>

Replace YOUR_API_KEY_HERE with the key you received upon purchase.

2Create a JSON Configuration File

In the same directory as your HTML file, create a JSON file named according to your plan:

This file controls everything. Here is a basic example for the Pro Plan:

{
    "move_interval": 3000,
    "media_pool": [
        {
            "type": "image",
            "src": "images/photo1.jpg"
        },
        {
            "type": "video",
            "src": "videos/intro.mp4"
        },
        {
            "type": "image",
            "src": "images/photo2.jpg",
            "duration": 5000
        }
    ]
}

move_interval

Default time (in milliseconds) between transitions if a specific duration isn't set on a media item.

media_pool

An array of objects, where each object represents a slide (image, video, or HTML).

3Choose Your Mode: Random or Sequence

AS Rubik offers two powerful operational modes, controlled from your JSON file.

Random Mode (Default)

If you do not specify a mode, the grid will randomly select items from the media_pool. This is the default and simplest way to get started.

{
    "move_interval": 3000,
    "media_pool": [
        { "type": "image", "src": "images/01.jpg" },
        { "type": "image", "src": "images/02.jpg" },
        { "type": "image", "src": "images/03.jpg" }
    ]
}

Sequence Mode (Enterprise Plan)

For precise, choreographed patterns, use Sequence Mode. Define a "mode": "sequence" and add a sequence array. Each step in the sequence specifies the grid coordinates (x, y) and duration.

{
    "mode": "sequence",
    "sequence": [
        { "x": 7, "y": 7, "duration": 2000 },
        { "x": 8, "y": 7, "duration": 500 },
        { "x": 8, "y": 8, "duration": 1500 }
    ],
    "media_pool": [
        { "type": "image", "src": "images/background.jpg" },
        { "type": "video", "src": "videos/feature.mp4" },
        { "type": "html", "html_content": "<div>Hello</div>" }
    ]
}

Note: In sequence mode, the media_pool still provides the content, but the sequence array dictates the camera movement and timing.

Plan Differences

The new JSON-based system simplifies plan features. Your API key automatically enables the correct feature set.

Standard Plan

  • Max Media: 20 items
  • Media Types: image
  • Mode: Random only
  • Recommended Size: Under 500KB per file
Get Standard Plan

Pro Plan

  • Max Media: 30 items
  • Media Types: image, video
  • Mode: Random only
  • Recommended Size: Under 500KB per file
Get Pro Plan

Enterprise Plan

  • Max Media: Unlimited
  • Media Types: image, video, html
  • Mode: Random or Sequence
Get Enterprise Plan

Troubleshooting

Quick Navigation