Installation
Clone the deposit on GitHub in the folder at the root of a website:
$ git clone https://github.com/objectivejs/objectivejs.git
If you don't use Git, download the ZIP.
- tests
- objectivejs.css
- objectivejs.less
- Objective.js
- ...
Install the CSS file objectivejs.css in the environment of your website. If you use a Less compiler, try the file objectivejs.less.
IMPORTANT: No graphical design is imposed. The test programs use the icons by Font Awesome. If your development environment uses a different set of icons, simply adapt the HTML.
The code which uses cookies, calls the functions of the module js-cookie. Download it and install it in a folder of the web site, e.g. /js/js.cookie.js.
The code which lets a user select a color uses jQuery MiniColors.
Start by trying all the examples on the home page then play with the different inspectors and the animations. To study the code, read the documentation on the Once class and the Responder class. Continue with the BooleanInspector and all the inspectors. You may study the Objective class and the Model class later in order to understand how objects communicate in an editor. Take some time to read how an animated clip, a program clip and a video clip is edited. The article Write data on a server and the manual pages on the AudioPlayer and the Wall classes illustrate how data is exchanged with a server. The article Configure charts by Plotly shows how charts made with the library provided by Plotly can be edited.
The set of classes of Objective.js:
Tests
The images and the audio or video files used by the test programs are loaded from the folder files at the root of the website. Download the archive files.zip and copy its content in the root directory of the website. Check the access rights to the files.
- images
- htmlcssjs.jpg
- loadimage.png
- sounds
- smoke.mp3
- smoke.ogg
- thanatos.mp3
- thanatos.ogg
- djduppy
- bigbeat.mp3
- bigbeat.ogg
- electro.mp3
- electro.ogg
- garage.mp3
- garage.ogg
- hardtrance.mp3
- hardtrance.ogg
- hipfunk.mp3
- hipfunk.ogg
- ragga.mp3
- ragga.ogg
- videos
- Horloge.webm
The test programs are written in PHP with iZend - The web engine.
The function head of the library is used systematically to add a tag such as <script src="/objectivejs/Objective.js"></script> to the <head> section of the document in HTML.
Adapt the code to your development environment.
If you simply want to directly run a test program using a URL which points to a complete document read in the space of your web server, edit the code of the program to remove all the lines which call the head function of iZend or better, surround them with a <?php if (false): ?>...<?php endif; ?> and write an HTML document such as:
<head>
<link rel="stylesheet" href="/objectivejs/objectivejs.css" media="all" />
<script src="/objectivejs/Objective.js"></script>
<script src="/objectivejs/Responder.js"></script>
<script src="/objectivejs/View.js"></script>
<script src="/objectivejs/Clip.js"></script>
<script src="/objectivejs/ProgramClip.js"></script>
<script src="/objectivejs/tests/SolarSystemClip.js"></script>
<title>Objective.js</title>
</head>
<body>
<?php include 'objectivejs/tests/testProgramClip.phtml'; ?>
</body>
</html>
This minimal HTML document runs the test program of the class ProgramClip.
Click in the image to start the animation. Click again to pause it. Leave the pointer of the mouse over the clip. Press the spacebar. Use the right and left arrows to move forward or backward by one second. Press the plus key to play the animation faster, the minus key to play it slower, the asterisk key to come back to the normal speed. NOTE: These commands are available for all types of clips.
To run another test, edit this same file, just add as many <script src="/objectivejs/*.js"></script> lines as necessary and remove all the corresponding <?php head('javascript', '/objectivejs/*.js'); ?> lines in the code of the test program.
Comments