Myriad Blog 1.3.0 Thursday, Nov 23rd, 2017 at 03:14am 

Friday, Jan 29th, 2016 at 05:10pm
Myriad Plug-in, et après ? -4-

 
Le Tracé des pages
 
Nous nous sommes tout d'abord attaqués à la partie censée poser le moins de problème: l'affichage graphique des partitions.
 
Avant de se décider sur une solution ou une autre, nous avons besoin de savoir ce qui est faisable, ce qui fonctionne, et sur quels navigateurs. Nous avons donc exploré plusieurs possibilités, en créant pour chacune une page Web de démonstration, nous permettant de savoir si les concepts tenaient la route.
 
I- Les polices
 
Le premier problème était celui des polices. Le logiciel embarque des polices musicales, et laisse le système se charger de leur affichage. Comment faire sur le Web?
Il nous faut utiliser le système des Webfonts, qui permet d'ajouter une police spécifique à une page Web. Le système n'est pas encore complètement standardisé, et demande de fournir les polices en question en plusieurs formats alternatif afin que chaque navigateur y trouve son compte.  
Nous avons utilisé l'un des multiples services en ligne pour convertir ainsi toutes les polices incluses dans Harmony Assistant.
 
Démonstration des Webfonts

 
II- L'affichage des pages
 
Les pages devront être pré-calculées par le programme (ce qui empêchera les transpositions graphiques, à moins de stocker toutes les alternatives transposées).  
Ces pages doivent ensuite être affichées dans le navigateur. On peut envisager leur stockage dans plusieurs formats:
 
A- Le format PNG
 
Il s'agit d'un format d'image non vectoriel, qui peut être affiché directement dans un navigateur. Pas besoin de page de démo ici; Harmony Assistant exporte directement à ce format, et ces images peuvent être affichées très facilement, n'importe où (c'est le format généralement utilisé pour les illustrations de ce blog).
 
Problème:  
- Format d'image point à point, donc impossible de zoomer à volonté, à moins de stocker de très grands format
- Fichiers relativement gros (une centaine de Ko par page)
 
B- Le format PICT
 
C'est le format interne à Harmony Assistant, basé sur les spécifications du QuickDraw (Macintosh). Les tracés graphiques de la page sont, dans Harmony Assistant, collectés dans ce format, pour être ensuite imprimées ou converties dans un autre format graphique.
Il était donc naturel de chercher à afficher directement ce format, et d'écrire en Javascript un visualiseur de PICT.
C'est chose faite :  
 
Démonstration d'affichage de PICT

 
C'est un format vectoriel (donc zoomable à l'infini).
Pas de problème particulier, si ce n'est que cela demande un code Javascript assez complexe (les technophiles pourront le consulter en regardant le code source de la page de démo). Cela a l'air assez rapide, et les données sont plutôt courtes (23 Ko compressées).
 
C- Le format SVG
 
C'est le format de dessin vectoriel conçu pour Internet. De mieux en mieux pris en compte par les différents navigateurs, il a l'avantage d'être pris en compte directement par ces derniers, ce qui est la garantie d'un affichage très rapide. Quelques problèmes de standardisation subsistent, notamment quant à l'usage de polices externes.
Nous avons écrit, dans Harmony Assistant, un export graphique SVG (en fait, un convertisseur PICT->SVG) qui inclut directement dans le fichier les tracés des caractères musicaux utilisés dans la page.
On obtient un fichier un peu plus long, mais qui au final se compresse mieux que le PICT (18Ko compressés pour la même page).
 
Démonstration d'affichage de SVG

 
Cela semble, à première vue, le format le plus pratique. Seuls quelques navigateurs très anciens (Safari sur iOS 6) rencontrent des problèmes d'affichage. Sur Internet Explorer, il y a des problèmes de débordement du cadre lors des zooms. Nous avons trouvé la solution sur Internet, mais ne l'avons pas encore essayée.
 
Le format SVG serait probablement celui que nous retiendrions. Dans tous les cas, l'export graphique SVG sera proposée dans la prochaine version d'Harmony.
by Olivier Guillion
Comments

Comment from Oliveira Friday, Jan 29th, 2016 at 05:41pm
SVG
Quote:
Dans tous les cas, l'export graphique SVG sera proposée dans la prochaine version d'Harmony

 
Estupenda la inclusión en H.A de Exportar en SVG. También seria importante la importación de imágenes SVG, ya que al redimensionarlas no se pixelan.  

Comment from JP Friday, Jan 29th, 2016 at 06:12pm
Format image
Personnellement, j'utilise un serveur Apache avec PHP, ce qui me permet d'utiliser une librairie PHP qui sait générer des images à la volée à partir d'un texte.
Cela permet de ne pas avoir à générer à l'avance les différents formats. On doit même pouvoir en PHP générer complètement une partition, voire la transposer graphiquement, à partir d'un fichier MusicXML ou similaire. Avec les serveurs actuels, la génération d'une image se fait très rapidement.
Par contre je ne sais rien de ce qui peut se faire côté sons, ni comment on pourrait synchroniser le son et l'image.
 
La proposition de Pepe, à savoir utiliser du SVG serait également à mon sens une très bonne solution, permettant facilement de zoomer l'image, mais pas de transposer.

Comment from JP Friday, Jan 29th, 2016 at 06:16pm
SVG
Je n'avais pas regardé la démo SVG avant d'envoyer ma réponse, je pense que c'est très bien et qu'on n'a pas besoin d'autre chose.

Comment from Antoine Bautista Friday, Jan 29th, 2016 at 09:23pm
SVG avec IE10 et FF44.0
SVG
Sur IE10    problème :du Titre et du soupir;
Sur FF44.0 problème :du soupir;
 
A+

Comment from Geo Saturday, Jan 30th, 2016 at 05:10pm
IE11
Bonjour
 
Si vous parlez du silence de la première mesure, il y a un soupir au lieu d'une pause, ce n'est pas bien gênant.
Par contre il est décalé par rapport aux notes.
 
Ce format est libre de droits ?

Comment from Antoine Bautista Saturday, Jan 30th, 2016 at 08:49pm
@Geo
Bonsoir
_Mon IE11 se nomme IE10 ?
_Non pas la première mesure ,mais la septième le soupir est de couleur blanche et le titre de la seconde page se trouve sur la première page. ?
 
A+


Most recent first
Oldest first

Top of page
Legal information Last update:  (c) Myriad