HomeProductsDownloadOrderSupportSearch
  
Myriad Forum « Integrer myrweb dans une autre page »
 Welcome, Guest.
 You can read all messages, but to be able to post,
 please Login or Register.
Dec 7th, 2022, 12:36am 
   Myriad Forum
   Myrweb / Melody Player & other freeware programs
(Moderator: Forum Administrator)
   Integrer myrweb dans une autre page
« No topic | Next topic »
Pages: 1 2 3 4  Reply | Notify of replies | Print
   Author  Topic: Integrer myrweb dans une autre page  (Read 2860 times)
Gaz
Board Newbie
*





   
WWW |

Gender: male
Posts: 46
Re: Integrer myrweb dans une autre page  
« Reply #15 on: Oct 18th, 2022, 1:52pm »
Quote | Modify

Pour intégrer un myrweb dans une page, on peut aussi utiliser une page php (et non plus html) et réaliser un include de la page myrweb que l'on souhaite, c'est à dire, dans cette page php, insérer un code de ce genre:
Code:

<?php include("../myrweb/Chant.myrweb.html");?>

 
On peut même utiliser des variables pour faire un modèle de page dynamique à utiliser avec des fichier myrweb.html différents, avec, par exemple, des variables d'URL:
 
Code:

<?php $Chant= $_GET['titre'];
include("../myrweb/".$Chant.".myrweb.html");?>

 je vous ai mis un exemple ici: http://graindphonie.moumour.free.fr/test.php?titre=Hosanna1
 
Il est d'ailleurs dommage que le myrweb soit en page html et non en php: si par exemple, dans un fichier myrweb.html,  on veut ajouter un bouton d'aide qui ouvre une pop-up, on est obligé de le faire "en dur" dans le html lors de la génération du fichier, ce qui veut dire que si on veut modifier le contenu de la pop-up, il faut le faire sur tous les fichiers déjà émis, un par un, alors que si la page avait été en php, on faisait un include et pour les modifications on ne modifiait que le code nécessaire dans un seul fichier, au leu de 36.
Bien sûr, l'include dans une page php permet de contourner ça, mais c'est un peu plus lourd.
 
Pour ma part, justement pour éviter la lourdeur, je modifie le html d'origine en ne gardant que la div de classe myrweb et les scripts utiles, ça me permet ensuite de l'inclure dans mes pages php comme un morceau de HTML et non plus comme une page entière.
 
« Last Edit: Nov 24th, 2022, 11:29pm by Gaz » offline
Sylvain Machefert
Administrator
*****






   
WWW |

Gender: male
Posts: 6620
Re: Integrer myrweb dans une autre page  
« Reply #16 on: Oct 18th, 2022, 6:43pm »
Quote | Modify

PHP: attention aux include sans aucun contrôle!
si on modifie le paramètre en mettant ../../../un_fichier_systeme,
PHP pourra peut-être sortir des données qui n'auraient rien à faire sur internet.
 
Donc on éclate (explode) $chant pour ne garder que ce qu'il y a après le dernier / ou \
puis on vérifie que le fichier (file_exists?) dans le répertoire myrweb
et ensuite on include, sinon on met un message d'erreur.
offline

VS languages|demos on MUSL
HA+PdfToM + Reaper+Audiveris+Transcribe Win10+Focusrite Scarlet 4i4
Accordion,drums,flutes,keyboard
Gaz
Board Newbie
*





   
WWW |

Gender: male
Posts: 46
Re: Integrer myrweb dans une autre page  
« Reply #17 on: Oct 19th, 2022, 12:47am »
Quote | Modify

on Oct 18th, 2022, 6:43pm, Sylvain Machefert wrote:
PHP: attention aux include sans aucun contrôle!
si on modifie le paramètre en mettant ../../../un_fichier_systeme,
PHP pourra peut-être sortir des données qui n'auraient rien à faire sur internet.
 
Donc on éclate (explode) $chant pour ne garder que ce qu'il y a après le dernier / ou \
puis on vérifie que le fichier (file_exists?) dans le répertoire myrweb
et ensuite on include, sinon on met un message d'erreur.

Oui bien sûr, j'aurais dû préciser qu'il faut sécuriser tout ça : mais j'ai fait ce code simplifié uniquement pour montrer le principe.  
Je n'ai pas indiqué par exemple qu'on teste si la variable get existe: if (isset($_GET['titre'])  
Et plutôt que l'explode etc, je vérifie que la variable saisie en URL est bien dans la base de données, et si elle n'y est pas, une page d'erreur s'affiche. Je trouve cela plus sûr. En plus, si la variable est dans la base de données, vu comme je gère, c'est que le fichier existe, donc ça fait d'une pierre deux coups.
offline
Sylvain Machefert
Administrator
*****






   
WWW |

Gender: male
Posts: 6620
Re: Integrer myrweb dans une autre page  
« Reply #18 on: Oct 19th, 2022, 4:39am »
Quote | Modify

OK, oui une base de données ça assure la sécurité.
Je vois que tu maîtrise le sujet, tout va bien, mais l'alerte reste valable à qui voudrait s'en inspirer.
offline

VS languages|demos on MUSL
HA+PdfToM + Reaper+Audiveris+Transcribe Win10+Focusrite Scarlet 4i4
Accordion,drums,flutes,keyboard
FF
Board Newbie
*




H.A. depuis 2000 et fier de l'être

   


Gender: male
Posts: 15
Re: Integrer myrweb dans une autre page  
« Reply #19 on: Oct 23rd, 2022, 6:19pm »
Quote | Modify

Bonjour à tous,
je réponds d'abord à AndréB au sujet du présumé bug que j'avais trouvé sur le myrweb généré par HA9.9.5 : tout est rentré dans l'ordre, merci pour tes conseils.
Ensuite à tous ceux qui souhaitent intégrer un myrweb dans une page html, je conseille vivement d'utiliser la balise object au lieu de la balise iframe. "Object" à les avantages de
-1- ne pas afficher une bordure noire
-2- être responsive en hauteur et en largeur
Personnellement je règle width:98% (98% de la largeur de l'écran) et height:80vh (80% de la hauteur de l'écran) ce qui fonctionne correctement sur ordi et sur mobile tenu verticalement ou horizontalement.
Malheureusement le myrweb généré par HA est à taille fixe (700x200 px) : il faut donc bricoler un petit peu son code html pour le rendre responsif en modifiant les paramètres width:98%  height:80vmax pour bien remplir l'affichage dans "objet".
On peut aussi imposer background-color:none pour incruster la partition sans couleur de fond.
Le résultat est correct et, surtout, fonctionne sur les mobiles, soit en position verticale que couchée  
Tous mes tests avec des myrweb générés par HA9.8.1 et HA9.9.5 (sous mac OsX10.11) et affichés par 'iframe" et "objet" sont ici : http://www.fat78.net/spip.php?article67
offline

Artisan numérique
MacOs - iOs - Android
Gaz
Board Newbie
*





   
WWW |

Gender: male
Posts: 46
Re: Integrer myrweb dans une autre page  
« Reply #20 on: Nov 25th, 2022, 11:30am »
Quote | Modify

C'est peut-être bête, mais je ne comprends pas bien l'intérêt de mettre une balise iframe ou object, pour insérer le myrweb, alors qu'il suffit dans celui-ci d'enlever tout le code d'en-tête, ne laissant que les liens vers le script et bien sur, la div de classe myrweb dont on va préciser la taille en pourcentage afin qu'elle dépende de la taille de son parent (et encore, si on veut 100% de la taille du parent, on peut ne rien indiquer).  
le mieux est d'ailleurs de faire ça en modifiant le modèle html, lors de la génération du fichier: c'est plus facile et après on peut toujours revenir au template d'usine (attention à ne pas aller dans le dossier d'Harmony pour modifier directement le template !).  
 
 C'est ce que j'ai finalement fait dans la page dont j'ai donné l'exemple plus haut, et elle est responsive. Mieux même, si l'envie me prend un jour de modifier la taille de l'affichage de la div myrweb, je n'ai pas besoin de modifier cette dernière: il suffit de jouer sur la taille de son parent, c'est-à-dire celle qui la contient.
 
Par contre, je ne sais pas quoi faire pour réduire le temps d'affichage qui, au moins chez moi, est très long: au moins 20 secondes ( ce qui est très long pour un utilisateur lambda).
Le fait de déplacer le script qui permet de lire en local sans internet, en le mettant à la fin, ou même le supprimer carrément ne semble guère modifier ce temps.  
 
 Qu'en est-il chez vous ?
« Last Edit: Nov 26th, 2022, 8:02pm by Gaz » offline
FF
Board Newbie
*




H.A. depuis 2000 et fier de l'être

   


Gender: male
Posts: 15
Re: Integrer myrweb dans une autre page  
« Reply #21 on: Nov 25th, 2022, 2:08pm »
Quote | Modify

Tu as raison, il n'y a pas vraiment besoin des balises objet ou iframe, on peut intégrer le myrweb directement par sa div ...
Pour ce qui est du temps de chargement, je pense que c'est le temps nécessaire au script pour décoder l'affichage da la partition, plus il y a de pages plus c'est long. Et ça doit dépendre de la config hard (CPU, fréquence, ram) et de l'OS qui fait l'affichage : ce qui s'affiche sur mon iMac (i5 8G de ram) en quelque secondes met 10 fois plus sur mon téléphone Android.
Je m'en contente... c'est déjà formidable de pouvoir échanger des partitions sans se soucier si les copains musiciens ont ou non le bon logiciel à la bonne version  
offline

Artisan numérique
MacOs - iOs - Android
Gaz
Board Newbie
*





   
WWW |

Gender: male
Posts: 46
Re: Integrer myrweb dans une autre page  
« Reply #22 on: Nov 26th, 2022, 8:08pm »
Quote | Modify

Le seul truc qui m'ennuie dans ce système de page myrweb - qu'elle soit d'origine ou non - c'est que pendant le chargement, le spinner animé ne s'affiche pas forcément tout de suite, ce qui fait que parfois les choristes me signalent qu'ils ont renoncé en se disant que "ça ne fonctionne pas".
 
offline
JP
Board Master
*****






   
WWW | Email

Gender: male
Posts: 3154
Re: Integrer myrweb dans une autre page  
« Reply #23 on: Nov 27th, 2022, 12:49pm »
Quote | Modify

Voici le modèle de HTML que j'ai mis dans HA:
Code:

<html>
<head>
<!-- Mise à jour 23/10/2022 18:44:22 -->
<meta charset="UTF-8">
<script src="https://www.myriad-users.com/cgi-bin/js.pl?myrweb"/></script>
<title>$TITRE$</title>
<style type="text/css">
html, body {width:100%;height:100%;}
body {font-family:sans-serif;text-align:center;}
h1 {font-size:1.2em;}
.myrweb {width:80%;min-width:700px;margin:auto;height:80%;}
*[onclick] {cursor:pointer;}
h1 button {
position: relative;
height:1.6em;
width:1.6em;
border:none;
vertical-align: middle;
border:2px solid #0172cc;
color:#0172cc;
border-radius:50%;
text-align:center;
text-decoration:none;
font-size:0.8em;
padding:2px;
margin-left:1em;
margin-top:-0.25em;
}
h1 button::after {content:"?"}
div.myrweb {width:80%;}
</style>
 
</head>
<body>
<h1>
<script>document.write(document.title)</script>
<button onclick="window.open('https://www.alma-musica.net/html/partitions/myrweb /myrweb.html')"> </button>
</h1>
<div class="myrweb" data-myrweb="" data-id="$ID$">
 
<script>var data_$ID$_varb64="$DATA$";</script>
 
</div>
</body>
</html>

La page s'affiche en deux fois: d'abord le titre, puis  la  partition.
Cela permet aux personnes qui  ouvrent la page de distinguer une page qui ne se charge pas du tout d'une page qui se charge lentement.
Vous pouvez regarder ce que cela donne par exemple en chargeant le fichier https://www.alma-musica.net/html/partitions/Bateson/Love-is-a-fire.myrwe b.html
Le ? après le titre permet d'afficher un fichier d'aide aux utilisateurs.
« Last Edit: Nov 27th, 2022, 12:51pm by JP » offline
Gaz
Board Newbie
*





   
WWW |

Gender: male
Posts: 46
Re: Integrer myrweb dans une autre page  
« Reply #24 on: Nov 27th, 2022, 6:55pm »
Quote | Modify

Merci pour le partage
 
M'autorisez vous à copier votre page d'aide que je trouve fort bien faite ?
 
j'ai aussi dans mes sites quelque chose qui s'affiche avant la partition (peut-être pas assez gros ?), mais ça n'empêche pas le genre de réflexion dont je parlais plus haut:"ça ne fonctionne pas": la dernière personne chez qui je suis allée, la partition mettait 30 secondes pour s'afficher (il est vrai que 8 pages de partition c'est lourd), et on ne dirait pas, mais pour certains, 30 secondes, cela leur suffit pour se décourager...
 
A propos de votre code, je ne sais pas si les width=80% et  height=80% pour la class=myrweb sont bien utiles ? En effet, les consoles d'inspection des navigateurs semblent montrer qu'ils ne servent pas...
 
Ensuite j'ai une question: je n'arrive pas à voir exactement ce qu'apporte de mettre ou non  width: 100%;  height: 100% aux balises html et  body ?
offline
JP
Board Master
*****






   
WWW | Email

Gender: male
Posts: 3154
Re: Integrer myrweb dans une autre page  
« Reply #25 on: Nov 27th, 2022, 7:27pm »
Quote | Modify

on Nov 27th, 2022, 6:55pm, Gaz wrote:
Merci pour le partage
 
M'autorisez vous à copier votre page d'aide que je trouve fort bien faite ?

Bien entendu, si vous trouvez des améliorations à y apporter, faites le et tenez moi au courant
on Nov 27th, 2022, 6:55pm, Gaz wrote:

j'ai aussi dans mes sites quelque chose qui s'affiche avant la partition (peut-être pas assez gros ?), mais ça n'empêche pas le genre de réflexion dont je parlais plus haut:"ça ne fonctionne pas": la dernière personne chez qui je suis allée, la partition mettait 30 secondes pour s'afficher (il est vrai que 8 pages de partition c'est lourd), et on ne dirait pas, mais pour certains, 30 secondes, cela leur suffit pour se décourager...

Peut-être un texte disant que les partitions peuvent être longues à charger? Je n'ai pas ce problème avec mes choristes.
on Nov 27th, 2022, 6:55pm, Gaz wrote:

A propos de votre code, je ne sais pas si les width=80% et  height=80% pour la class=myrweb sont bien utiles ? En effet, les consoles d'inspection des navigateurs semblent montrer qu'ils ne servent pas...

J'ai l'impression que ce que le script génère a changé : quand j'ai écrit ce code la largeur et la hauteur définies dans le code standard étaient Code:
style="width:700px; height:200px;"

Je constate que ce qui est généré maintenant donne
Code:
style="user-select: none; overflow: visible; position: relative; border: 1px solid; width: 1010px; height: 775.28px;"

Je ne sais pas comment sont calculées ces valeurs, je suppose que c'est généré dynamiquement par le script  
Au moment où je l'ai fait, cela s'est immédiatement traduit par un agrandissement de la zone d'affichage de la partition.
En tout cas il faut conserver "margin:auto;" pour centrer la zone d'affichage dans la page.
on Nov 27th, 2022, 6:55pm, Gaz wrote:

Ensuite j'ai une question: je n'arrive pas à voir exactement ce qu'apporte de mettre ou non  width: 100%;  height: 100% aux balises html et  body ?

Ça fait partie de mes standards de programmation depuis des années. À l'époque, c'était plus ou moins nécessaire pour assurer l'adaptation à la taille de l'écran. On doit pouvoir s'en passer mais ça ne fait pas de mal...  
« Last Edit: Nov 27th, 2022, 7:35pm by JP » offline
Gaz
Board Newbie
*





   
WWW |

Gender: male
Posts: 46
Re: Integrer myrweb dans une autre page  
« Reply #26 on: Nov 27th, 2022, 8:28pm »
Quote | Modify

Quote:
Code:
Code:
style="user-select: none; overflow: visible; position: relative; border: 1px solid; width: 1010px; height: 775.28px;"

 
Je ne sais pas comment sont calculées ces valeurs, je suppose que c'est généré dynamiquement par le script

Pour overflow et position, oui, j'ai vérifié dans le script ( MyrCompleteStyle(a.unclippedFather,"overflow:visible;position:relative;border:solid 1px")), mais pas pour le width et le height: si c'était le script qui les déterminait , je devrais avoir les mêmes valeurs, or ce n'est pas le cas:  chez moi, l'inspecteur donne width: 2182px; height: 1628.5px; pour votre div myrweb
 je pense que ça dépend de la taille de l'écran ?
 
Quote:
En tout cas il faut conserver "margin:auto;" pour centrer la zone d'affichage dans la page

dans votre cas, oui, mais ça dépend du squelette qu'on utilise: pour moi, par exemple, ça ne change rien.
 
Finalement, j'ai réussi à mettre un script d'attente à l'endroit du fichier, dans la page où j'inclus le myrweb, ça devrait améliorer pour mes utilisateurs, voyez plutôt :
http://graindphonie.moumour.free.fr/test.php?titre=Hosanna1
 
j'avais essayé précédemment mais ça ne fonctionnait pas, car j'utilisais onload au lieu de DOMContentLoaded  
« Last Edit: Nov 27th, 2022, 8:30pm by Gaz » offline
JP
Board Master
*****






   
WWW | Email

Gender: male
Posts: 3154
Re: Integrer myrweb dans une autre page  
« Reply #27 on: Nov 27th, 2022, 11:01pm »
Quote | Modify

Voilà qui me semble une bonne solution
Pour les dimensions je pense effectivement qu’elles sont calculées par le script en fonction de la taille de l’écran. Je faraîle test demain en changeant d’écran.
offline
JP
Board Master
*****






   
WWW | Email

Gender: male
Posts: 3154
Re: Integrer myrweb dans une autre page  
« Reply #28 on: Nov 28th, 2022, 11:28am »
Quote | Modify

Voici ce que donne la comparaison entre mes deux écrans avec le même fichier myrweb :
Écran 1  1280×1024
Code:
style="...width: 1010px; height: 1484.3px;"

 
Écran 2  1920×1080
Code:
style="...width: 1188px; height: 1738.84px;"

 
Il est clair que ces dimensions sont calculées par script au chargement de la page.
 
Si je prends le "HTML d'usine" j'obtiens
Code:
style="width: 700px; height: 1041px;"

 
Il est clair que modifier les dimensions standard joue un rôle dans ce calcul.
 
Il est clair que le fait de modifier le HTML a une influence sur ce calcul.
 
Si je reprends mon propre modèle HTML en supprimant la définition de div.myrweb  j'obiens
Code:
width: 800px; height: 1184px;
« Last Edit: Nov 28th, 2022, 11:56am by JP » offline
JP
Board Master
*****






   
WWW | Email

Gender: male
Posts: 3154
Re: Integrer myrweb dans une autre page  
« Reply #29 on: Nov 28th, 2022, 12:10pm »
Quote | Modify

Après quelques essais, j'obtiens le code suivant :
Code:
<html>
<head>
<!-- Mise à jour 15/10/2022 10:08:14 -->
<meta charset="UTF-8">
<script src="https://www.myriad-users.com/cgi-bin/js.pl?myrweb"/></script>
<title>$TITRE$</title>
<style type="text/css">
html, body {width:100%;height:100%;}
body {font-family:sans-serif;text-align:center;}
h1 {font-size:1.2em;}
div.myrweb {width:80%;min-width:700px;margin:auto;height:80%;}
h1 button {
position: relative;
height:1.6em;
width:1.6em;
border:none;
vertical-align: middle;
border:2px solid #0172cc;
color:#0172cc;
border-radius:50%;
text-align:center;
text-decoration:none;
font-size:0.8em;
padding:2px;
margin-left:1em;
margin-top:-0.25em;
cursor:pointer;
}
h1 button::after {content:"?"}
</style>
 
</head>
<body>
<h1>
<script>document.write(document.title)</script>
<button onclick="window.open('https://www.alma-musica.net/html/partitions/myrweb /myrweb.html')"> </button>
</h1>
<div class="myrweb" data-myrweb="" data-id="$ID$">
 
<script>var data_$ID$_varb64="$DATA$";</script>
 
</div>
</body>
</html>

J'ai conservé Code:
html, body {width:100%;height:100%;}

J'ai réduit les propriétés de div.myrweb  à  
Code:
div.myrweb {width:80%;min-width:700px;margin:auto;height:80%;}

après des essais divers qui montrent que si on ne définit pas height cela a une influence sur la largeur  
min-width:700px est là pour l'utilisation sur mobiles.
Le reste du code CSS est destiné au bouton d'aide.
offline
Pages: 1 2 3 4  Reply | Notify of replies | Print

« No topic | Next topic »

« Myriad Forum » Powered by YaBB 1 Gold - SP 1.1!
YaBB © 2000-2002,
Xnull. All Rights Reserved.

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