I've found in the documentation that a default width of the music is set to 740 pixels. Here is the link: https://code.google.com/p/abcjs/wiki/InstallationDocumentation Search for Basic abcjs I've found in your widget how you invoke the renderAbc
ABCJS.renderAbc(this.pNode, this.tid); Is there a way to retrieve the current tiddler size from the widget code such as I could pass it to the rederAbc ? But will it solve the issue as I guess that tiddly will not invoke the widget each time the tiddler size is changed, won't it ? Vpl Le dimanche 6 décembre 2015 12:47:49 UTC+1, BJ a écrit : > > 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/334c9cf8-a047-4f51-bc5f-5748c6b8ea2e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
