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/dc8d0361-fe8b-4bdd-8837-0a87caa5e54b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
