On Wednesday, March 5, 2014 7:17:46 AM UTC+5:30, Adolfo Delorenzo wrote: > > Hello, > > As much as I like D3.js and have managed to display some very interesting > bar graphs, I do miss being able to generate other types of graphs. I tried > to insert Chart.js (https://raw.github.com/nnnick/Chart.js/master/Chart.js) > as a plugin/module copying the code into an empty TW5 file with no avail. > Unfortunately my limited coding skills and ability to understand the inner > structure of TW5 rendered all my attempts useless. > > If some kind soul of this great community could show me how to do this I > would be very grateful and in eternal moral debt. > > Thank you very much. > > Best regards, > > Adolfo Delorenzo >
I can describe roughly how I Integrated ckeditor (cke) into tw5. I knew nothing of how Tw5 worked at first, so I hacked the ckeditor lib into Tw5. I read the cke example code, which shows how to use it within a simple webpage. I saw from the example code how cke took control of an existing html textarea on a web page in order to edit content. In Tw5 I saw that the edit-text widget used the html textarea, so I modified the edit-text widget source code according the cke example code (only the part that was involved with the textarea). using node,js I build the index.html(including my changes to the edit-widget) then treating it as a simple webpage, I loaded the whole file into a code editor and modified it with the remaining pieces of code as show in the cke example html files (the parts to include the ckeditor.js and initialisation of the lib). Note you need to disable autosave in your index.html as saving a tw5 file will overwrite any manually made changes to the tw5 file. Once I was able to edit and save content(not to disk) in this modified (hybrid) Tw5 file, I then looked at the tw5 plugins D3 and codemirror for inspiration, I also looked at the examples html files that come with D3 and codemirror libraries, which show how to integrate them in simple webpages. comparing the codemirror library examples html files with the codemirror plugin gave me enough pointers to start converting my hybrid tw5 into a real tw5 plugin. I used codemirroreditor.js as a rough guide to creating my plugin, and at first extracted my direct changes to the edit-text widget into overriding functions as in the codemirror plugin. I saw that library files with .js extensions needed to be moved into tiddlers and these need to be of type json/javascript so that they will be loaded as modules (and thus converted in to runnable javascript) and then made accessible via call to the 'require()' function in my plugin's code. After properly integrating the main library file (putting into a tid) and its initialisation (in my ckedit.js file) into tw5 I have moved all my code (the stuff in edit-text.js and directly add to index.html) into my plugin and from this point I no longer need to hack the index.html file or edit the tiddlywiki5 edit-text widget - i.e. my plugin had been created. Next I tackled the other external javascript, CSS and other configurations files, due to the larger number of files to convert to tids, I created a tool (a shell script) to create a "tiddlywiki.files". Next the code to initialise the library was modified to make the library work with tiddlers instead of external files. I then created the edit-html widget (and stopped overriding the edit-text widget's function) using the D3 plugin as a guide, then worked out from the tw5 source code and docs how to integrate the edit-html widget with the edit widget. I took this 'hacking' approach because I knew nothing about tw5 internals, and doing it like this broken the processes down into manageable cycles of 'getting something working' then 'learn a bit more and modify my code'. By the end of the process I had my first plugin and had learnt a lot about Tw5 internals. Note: to include code in the header section, put the code into a tiddler and tag it with $:/core/wiki/rawmarkup. I WOULD use this method now instead of hacking the index.html. I WOULD NOT RECOMMEMD looking at the details of the ckeditor plugin - ckeditor is very Tw5 unfriendly and its integration is complex. I would expect that the chart.js integration to be much less complex. I WOULD compare the example html files that come with the chart.js lib with those that come with the D3.js lib - if they work in a similar way I would make a copy of the D3 plugin, rename the files, and modify they contents to work with chart.js. -- 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. For more options, visit https://groups.google.com/d/optout.
