MONITOO

 Un monitoring s’interprétant sur la durée, il peut être frustrant, voire partiel, de juger un tracé sur une fraction même sélectionnée de quelques centimètres,

 Monitoo permet de dérouler à l’écran une bande de grande longueur, et de la manipuler en avant et en arrière, comme si on visualisait un magnétoscope

 L’intérêt de Monitoo est qu’il est écrit en HTML dynamique (HTML + JavaScript ou AJAX), et donc lu par n’importe quel navigateur et n’importe quel système sans l’aide d’aucun plugin vidéo de la série flash,

 Il nécessite bien sûr d’autoriser JAVASCRIPT pour la page en cours.

 Le code d’une simplicité déroutante est issu de l’excellent site :

• Javascript.Internet.Com

 Largement adapté et francisé par l’auteur à l’usage des médecins

LE POIDS DES IMAGES, LE CHOC DES KILOS

 Le premier obstacle des bandes de monitoring de grande longueur est le poids de l’image que l’on décline en méga octets, avec comme corollaire négatif un temps de chargement de plusieurs longues secondes, (comme dans la pub)

 Ce tableau résume le gain de taille obtenu avec les différents formats de compression, à partir d’une image JPG de 1 méga 3

 Et le score est sans appel

• Le Format GIF divise presque le poids de l’image par 10 !!!

• A noter que le JPG noir et blanc divise la taille par 2 (mais on perd la couleur des tracés)

LE PROGRAMME

 Le programme est visualisable ici, composé de 3 fichiers

1. Une page HTML de présentation du tracé

1. Un Script JavaScript qui contient les codes des Boutons du Magnétoscope

1. Un Exemple de tracé en GIF

 Visualiser / télécharger Monitoo

LES CODES

 Les codes font intervenir la bibliothèque JavaScript SCROLL appliquée à un conteneur HTML (ici un DIV)

 Positionnement au début de l’image :

• scrollLeft = 0 ;

 Positionnement à la fin de l’image :

• scrollLeft = scrollWidth ;

 Avance d’un Cran :

• scrollLeft += 1 ;

 Recule d’un Cran :

• scrollLeft -= 1 ;

 L’horloge système relançant l’incrément de façon récursive et automatique pour faire avancer ou reculer la bande automatiquement par un simple clic.

• setTimeout

 La minuterie est désactivée par :

• clearTimeout

 L’appel du conteneur "mobile" contenant l’image se fait par la syntaxe :

• document.getElementById(id).scrollLeft = position ;

• ID étant le nom du conteneur DIV

• • Ici #container

 Le conteneur doit être désolidarisé du flux de positionnement par défaut des conteneurs HTML par l’instruction CSS :

• position:relative ;

 Avec masquage forcé de tout ce qui en déborde

• overflow:hidden ;

 Enfin le nom de l’image par défaut doit être

• rcf.gif