Installation
Clonez le dépôt sur GitHub dans le dossier à la racine du site web :
$ git clone https://github.com/objectivejs/objectivejs.git
Si vous n'utilisez pas Git, téléchargez le ZIP.
- tests
- objectivejs.css
- objectivejs.less
- Objective.js
- ...
Installez le fichier CSS objectivejs.css dans l'environnement de votre site. Si vous utilisez un compilateur Less, essayez le fichier objectivejs.less.
IMPORTANT : Aucun modèle graphique n'est imposé. Les programmes de test utilisent les icônes par Font Awesome. Si votre environnement de développement utilise un jeu d'icônes différent, adaptez simplement le HTML.
Le code qui utilise les cookies appelle les fonctions du module js-cookie. Téléchargez-le et installez-le dans un dossier du site web, e.g. /js/js.cookie.js.
Le code qui permet à un utilisateur de choisir une couleur utilise jQuery MiniColors.
Commencez par essayer tous les exemples sur la page d'accueil puis jouez avec les différents inspecteurs et les animations. Pour étudier le code, lisez la documentation sur la classe Once et la classe Responder. Continuez avec la classe BooleanInspector et tous les inspecteurs. Vous pouvez étudier la classe Objective et la classe Model plus tard afin de comprendre comment des objets communiquent entre eux. Prenez du temps pour lire comment un clip animé, un clip programmé et un clip vidéo est édité. L'article Écrire des données sur un serveur et les pages du manuel sur les classes AudioPlayer et Wall illustrent la manière d'échanger des données avec un serveur. L'article Configurer des graphiques par Plotly montre comment des graphiques réalisés avec la librairie fournie par Plotly peuvent être édités.
L'ensemble des classes Objective.js :
Tests
Les images et les fichiers audio ou vidéo qui sont utilisés par les programmes de test sont chargés à partir du dossier files à la racine du site. Téléchargez l'archive files.zip et copiez son contenu dans le répertoire racine du site. Vérifiez les droits d'accès aux fichiers.
- 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
Les programmes de test sont écrits en PHP avec iZend - Le moteur web.
La fonction head de la librairie est systématiquement utilisée pour ajouter une balise telle que <script src="/objectivejs/Objective.js"></script> à la section <head> du document HTML.
Adaptez le code à votre environnement de développement.
Si vous voulez simplement exécuter directement un programme de test en utilisant une URL qui retourne un document complet lu dans l'espace de votre serveur web, éditez le code du programme pour en retirer toutes les lignes qui appelle la fonction head d'iZend ou mieux, encadrez-les par un <?php if (false): ?>...<?php endif; ?> et écrivez un document HTML tel que :
<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>
Ce document HTML minimal exécute le programme de test de la classe ProgramClip.
Cliquez dans l'image pour démarrer l'animation. Cliquez de nouveau pour la mettre en pause. Laissez le pointeur de la souris sur le clip. Appuyez sur la barre d'espace. Utilisez les flèches droite et gauche pour avancer ou reculer d'une seconde. Appuyez sur la touche plus pour accélérer l'animation, sur la touche moins pour la ralentir, sur la touche astérisque pour revenir à la vitesse normale. NOTE : Ces commandes sont disponibles pour tous les types de clips.
Pour exécuter un autre test, éditez ce même fichier, ajoutez juste autant de lignes <script src="/objectivejs/*.js"></script> que nécessaire et retirez toutes les lignes <?php head('javascript', '/objectivejs/*.js'); ?> correspondantes dans le code du programme de test. Changez le nom du fichier inclus en PHP.
Commentaires