JADSDS

JADSDS engine is a friendly tag based JavaScript animator created to make easier web projects using the power of HTML5.

At the moment the engine includes features like color cycling, scale and rotation, animated GIF support, multiple layers for parallax effects, capturing events and trigger actions and much more.

All your web projects run on Android as well, an app is included with the engine allowing you run your project on an Android device.

This is just the first step, more functions will be included in the future. All will depend if the people fall in love with the project.

A pdf file with the complete documentation is available here.

How can I open or create xml files?

All the animations are created using an xml file. It is where all the instructions are stored and used later by the engine. Also, it includes the basic settings used to prepare the environment to run your animation.

The easiest way to create or edit these files is using your Windows Notepad, TextEdit on Mac or Visual Studio Code.

Any other text editor will be ok too.

Where to save the files?

In HTML, all your animations need to be saved inside a folder named “animations” in your website. The name of the folder can be changed but the default will be always “animations”.

Create a another new folder inside "animations" folder, pick a name and include all your images and the xml inside this folder. The xml file must have the same name as the new folder.

In Android, all your animations need to be saved inside a folder named “JadsdsEngine”. After installing the app and running it for the first time, the app will create the folder. Inside this folder, an animation will be created too. The name of this animation is "main".

Keep in mind that the app will always run first the animation "main". You can't delete this folder and it will be the start animation for all your projects. Also, inside the folder “JadsdsEngine” you have another folder “loading”. It has the animation used during the loading times.

You can edit the file main.xml (found inside the folder "main") and start making your animation.

In HTML or Android, you can create as many folders as you need. You can jump from one animation to another anytime.

The xml file used in your animation is divided into sections, where "Basic" and "Images" are the most important.

Remember all the tags are case sensitive.

Creating a Hello World animation

Download hello world here.

File structure:

[Folder] animations
---[Folder] helloworld
------[File] helloworld.png
------[File] helloworld.xml
---[File] dummy.png
[File] helloworld.htm
[File] JadsdsEngine_min.js

Let's check the files helloword.htm and helloworld.xml

helloword.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JadsdsEngine_min.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            var jadsdsEngine = new JadsdsEngine('mycanvas');
            jadsdsEngine.loadAnimation("helloworld");
        };
    </script>
</head>
<body>
    <canvas id="mycanvas" width="320" height="480" style="border-style: solid; border-width: 1px"></canvas>
</body>
</html>

Important things here are:

1 - Loading the jadsds engine (JadsdsEngine_min.js).
2 - Adding a tag "canvas".
3 - Loading the animation after the page is fully loaded (you can use window.onload).

The way your animation is loaded is by creating an instance of Jadsds engine and loading it with the function "loadAnimation". You need the canvas ID to create an instance of Jadsds engine. Also, you can add multiple animations creating multiple instances. Each of the instances needs a different canvas ID.

Remember the "loadAnimation" function needs the name of your animation. As mentioned before, it is the name of the folder where your animation is stored.

helloword.xml

<?xml version="1.0"?>
<doc>
    <basic type="animations">
        <screenCanvasResolution>
            <width>320</width>
            <height>480</height>
        </screenCanvasResolution>
        <canvasResolution>
            <maxWidth>144</maxWidth>
            <maxHeight>72</maxHeight>
        </canvasResolution>
        <bgColor>#ffffffff</bgColor>
        <camera>
            <autoHorizontalScroll>true</autoHorizontalScroll>
            <iniPosition>0;0</iniPosition>
            <pixelsMove>2</pixelsMove>
            <cameraSpeed>1</cameraSpeed>
        </camera>
    </basic>
    <images>
    <image>
        <frames>
        <colorCycling>
            <fileName>helloworld.png</fileName>
            <basicPaletteColor>255,0,0,0-255,235,20,46-255,185,0,174-255,68,23,197-255,175,226,255-255,102,122,115-255,30,252,140-255,108,255,0-255,185,179,0-255,235,111,20</basicPaletteColor>
        </colorCycling>
        </frames>
        <left>10</left>
        <top>30</top>
    </image>
    </images>
</doc>

Important things here are:

1 - screenCanvasResolution & canvasResolution tags
2 - At least one image

screenCanvasResolution (AKA screenPhoneResolution) is the visible area. It is the size of your canvas tag in html or the screen's resolution in your Android device.
canvasResolution is the size of your animation. Do not confuse it with the html's canvas tag. If your animation is 1024x1024 pixels, only the area declared in "screenCanvasResolution" will be visible. You can use the tag "camera" to move the visible area to any point.

The "image" tag allows you to add an image to your animation. In this Hello World example, it is combined with the tag "colorCycling" to create an animated image.

Running your animation

Running the animations on your computer requires installing Visual Studio Code and the extension "Live Server".

Open Visual Studio Code, select "open folder" and select the folder where your animation is located.

Select the file ending in ".htm" (in this case is helloword.htm), open file properties, and in the menu select "Open with Live Server".

Android Pixels Live Wallpaper

Pixels Live Wallpaper is an application that allows you use your projects created with Jadsds engine as live wallpaper in your smartphone.