The music is an svg image with a fixed width determined by %%staffwidth (if used) within the abc notation, If the staffwidth is set greater than the width of the tiddler then it will overflow the tiddler. (actually overflow the containing html element)
I have no idea how it chooses a default width, maybe it is in the abc documentation? You could also have on the github of abc - do a search of the issues... ,maybe there is some css that can be set? On Sunday, December 6, 2015 at 10:12:46 AM UTC, vpl wrote: > > Hi, > > > Look at the below example. > > The music sheet size is exeeding the tiddler normal frame > > > VIncent > > > > > <https://lh3.googleusercontent.com/-HuYv901pYlM/VmQJ7ofDqHI/AAAAAAAAAD0/JDqmDh83JC8/s1600/ex-abc-pb.PNG> > > > > Le dimanche 6 décembre 2015 10:17:19 UTC+1, BJ a écrit : >> >> I am not sure what you are referring to, if its the width of the music >> image then this is controlled by (eg) >> >> >> %%staffwidth 500 >> >> >> >> On Sunday, December 6, 2015 at 8:29:33 AM UTC, vpl wrote: >>> >>> Hi BJ, >>> >>> I was able to make it running based on your contribution. THanks a lot ! >>> The issue I see here is that the rendering size is not reduced according >>> to the window size (when I reduce the tiddly size). >>> FOr example >>> When we display the tt1 of your example and reduce the browser windows, >>> below a certain size the music sheet is not reduced correctly. >>> Where does it come from ? >>> >>> Regards >>> >>> >>> Le dimanche 6 décembre 2015 06:16:08 UTC+1, vpl a écrit : >>>> >>>> Hi BJ, >>>> >>>> This is exactly what I was looking for. >>>> How did you do that ? >>>> On my side I was blocked at the following stage >>>> I'm not a plugin expert and much more confortable at the moment with >>>> the macro option (at least I can make running a small one..) >>>> It seems that you developed a plugin to solve that ? >>>> Will appreciate any description as I need to use this capabilities now >>>> and would like to understand how it is integrated with tiddlyWiki >>>> >>>> Regards >>>> >>>> >>>> >>>> -------------------------------------------------------------------------------------------- >>>> What I've done >>>> - copy the abcjs_basic_latest-min.js file in the same directory as my >>>> tiddlywiki >>>> - created a "abcjs_basic_latest-min.js" tiddler, tagged with >>>> $:/tags/RawMarkup and containing >>>> <script src="abcjs_basic_latest-min.js" type="text/javascript"></script> >>>> - created a tiddly called "$:/inmysocks/macros/render-abc.js" >>>> - of type application/javascript >>>> - with an attribute module-type called macro >>>> - containing >>>> /* >>>> Run the macro >>>> */ >>>> exports.run = function(music) { >>>> //Make each date object. >>>> var result; >>>> result = ABCJS.renderAbc('notation', music); >>>> >>>> //result = 'ABC'; >>>> return result; >>>> >>>> - created a test-abc tiddler containing >>>> <<render-abc "%%staffwidth 500\nX: 1\nT: Chorus\nV: T1 clef=treble >>>> name="Soprano"\nV: T2 clef=treble name="Alto"\nV: B1 clef=bass >>>> name="Tenor"\nV: B2 clef=bass name="Bass"\nL:1/8\nK:G\nP:First Part\n[V: >>>> T1]"C"ed"Am"ed "F"cd"G7"gf |\n[V: T2]GGAA- A2BB |\n[V: B1]C3D- DF,3 |\n[V: >>>> B2]C,2A,,2 F,,2G,,2 |">> >>>> >>>> - the macro is running in the sense that when I comment the result = >>>> ABCJS.renderAbc ... and uncomment the result = 'ABC' I get the ABC display >>>> - But when I do the reverse I don't have anything displayed. >>>> >>>> The Dev tools does nott give me any error ... >>>> >>>> I've also tried to copy paste the full content of >>>> abcjs_basic_latest-min.js file into bcjs_basic_latest-min.js tiddler. >>>> In this case, when I close and re-open tiddlyWiki I get the content >>>> of the .js displayed just below the getting-start tiddler ... >>>> >>>> ----------------------------------------------- >>>> >>>> >>>> Le vendredi 4 décembre 2015 19:29:57 UTC+1, BJ a écrit : >>>>> >>>>> Hi vpl, >>>>> I have put a widget together that could be used as a starting point: >>>>> >>>>> http://abcmusic.tiddlyspot.com/ >>>>> >>>>> view it in ff (chrome won't load the lib from github) >>>>> >>>>> Feel free to use this if you want to develop abc as a plugin, if you >>>>> don't then maybe I will push it forward a bit more. >>>>> >>>>> cheers >>>>> BJ >>>>> >>>>> On Friday, December 4, 2015 at 9:10:11 AM UTC, vpl wrote: >>>>>> >>>>>> Hi, >>>>>> >>>>>> I'm trying to render abcjs music notation in tiddlywiki >>>>>> Bopland.org is closed now and Vexflow licensing model is not adapted. >>>>>> abcjs (http://abcjs.net/) looks very interesting and maintained. >>>>>> >>>>>> Looking at other thread I understand that >>>>>> - I have to create a tiddler containing the >>>>>> abcjs_basic_latest-min.js content (available here >>>>>> https://raw.githubusercontent.com/paulrosen/abcjs/master/bin/abcjs_basic_2.2-min.js >>>>>> ) >>>>>> - tag it with systemConfig >>>>>> >>>>>> Then I block as I don't understand how to render the music content >>>>>> using abcjs >>>>>> >>>>>> I've tested on a html page the following code and it works >>>>>> >>>>>> <html> >>>>>> <head> >>>>>> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> >>>>>> <meta name="viewport" content="width=device-width, initial-scale=1.0"> >>>>>> <title>abcjs basic demo</title> >>>>>> <script src="abcjs_basic_latest-min.js" >>>>>> type="text/javascript"></script> >>>>>> </head> >>>>>> <body> >>>>>> <h1>abcjs basic demo page</h1> >>>>>> <div id="notation"></div> >>>>>> >>>>>> <script type="text/javascript"> >>>>>> var chorus = '%%staffwidth 500\nX: 1\nT: Chorus\nV: T1 clef=treble >>>>>> name="Soprano"\nV: T2 clef=treble name="Alto"\nV: B1 clef=bass >>>>>> name="Tenor"\nV: B2 clef=bass name="Bass"\nL:1/8\nK:G\nP:First Part\n[V: >>>>>> T1]"C"ed"Am"ed "F"cd"G7"gf |\n[V: T2]GGAA- A2BB |\n[V: B1]C3D- DF,3 >>>>>> |\n[V: >>>>>> B2]C,2A,,2 F,,2G,,2 |'; >>>>>> </script> >>>>>> >>>>>> <div> >>>>>> <script type="text/javascript"> >>>>>> ABCJS.renderAbc('notation', chorus); >>>>>> </script> >>>>>> </div> >>>>>> >>>>>> </body> >>>>>> </html> >>>>>> >>>>>> >>>>>> As you see, abcjs renders the content using ABCJS.renderAbc(). >>>>>> But we have to pass to this method a string content (in our case a >>>>>> javascript variable) representing the music I want to render. >>>>>> >>>>>> >>>>>> Could somebody help me here, >>>>>> I'm block on tiddly and need an expert to unlock me .. >>>>>> >>>>>> With regards >>>>>> >>>>>> Vpl >>>>>> >>>>> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fe0f8fe6-cedd-49c2-b6b5-22489d0ea366%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
