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/efc1f2fc-5f8e-438f-825c-70bce12d5340%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
