June 12th - Dynamically Updating HTML Content

On June 8th, I managed to make an extension that adds its own button to Mediawiki toolbar. However, this did not work on my Windows machine. It never came to me that it might be a version issue (thanks Maria for pointing this out). I will check what version I have and try to install a different one. Anyway, I am mentioning that because I decided to find a another way for adding an edit button. Instead of setting hooks, I am editing the HTML content of the page by searching for the id "toolbar" and adding an image tag that opens a popup window when clicked. I am really thankful for the author of The Tex Box because I found this method through tracing his code (although the code was hard to follow).
Another thing I started to work on yesterday was finding a way to link several pages to the same URL and navigating through them using next and previous buttons. Cameron (thank you) suggested that I use a counter, and by giving each page a number, I can display the proper tags. I have never tried to dynamically update HTML pages before. Using document.write() in Javascript to update the page content turned out not to be a good idea.I finally discovered DOM. Following this quick tutorial, I managed to write a webpage with a counter that gets incremented or decremented when next or previous buttons are clicked. I was so happy when it worked.
Now I have all the tools I need to start coding the extension. Let me recap:

1. A php class for parsing Spreadsheets (excel and csv only).
2. A customized button in Mediawiki's toolbar.
3. A popup window.
4. A dynamically updated content.
5. A pretty awsome visulization API (Google Vizuailzation).

A few challenged ahead:

1. Designing a friendly user interface.
2. Passing variables between HTML pages.
3. Findnig a way to create a Mediawiki Special Page and link it to the popup window.
   

Working from Home - Popup windows

One of the things I did yesterday was making a Mediawiki toolbar button. Today, I am working from home and surprise surprise, the button isn't working on my Windows wiki. I tried several other extensions that add a toolbar button (which I tested yesterday on ubuntu) and none of them are working in Windows. I finally gave up and decided to work on something else. Before I forger, here is a list of the names I have come up with for the tool so far (the motto for the tool is "Graphing Made Easy":

• EasyViz
• VizExpress
• ExpressGraph
• ProntoViz

June 8th - Implementing user interface

I decided to call the data insertion tool "quickViz" for now. The final name will be something within this scope but definitely more creative. Here's my progress so far:

1. Reading spreadsheets: Since I am not sure whether to use python or php for the extension, I decided to look into both. Both of them have modules for reading .xls and .csv files, which is good. Though Python is easier to read.
   
2. Copying and pasting from an existing table: I tried tables from excel, csv , pdf, word, power point, and web pages of course. In all cases, when you copy and paste a table, the items become separated by spaces and the rows get preserved nicely. I guess for the first version I will just parse the input using space as delimiter.
3. Adding quickViz button to the toolbar: I spent about 3 hours on that, but I finally managed to add a customized button to my mediawiki toolbar, see the picture below:
4. Browsing to a file: Here's a simple way to do it.
5. Creating a textbox with default value.
6. Creating a popup window: After the user clicks the quickViz button, I would like a popup window to appear. This part is crucial because it'll contain all the previous stuff that I managed to find/solve/make. I am currently looking at Javascript and http://javascript.internet.com/generators/popup-window.html.
   
   
   

June 2nd - Linking Visualization

I have decided to begin my work the "data insertion tool" by finding a way to link visualizations (like manyeyes) to the wiki. I am not sure how to write a code that connects to a website, supplys my data, uses their visulization functionaity, then copies and pastes the 'share link" to my wiki. Gchart4mw is a graphing tool that uses Google Graphs. The way it does its visulization is by converting input data into one long URl and supply it as a source to the HTML img tag. For example, the graph below is just an image with the following URL (note how the various data is included like country names and title):

http://chart.apis.google.com/chart?chs=300x150&chtt=Arabic+Countries&cht=p3&chd=t:75,13,100,63&chl=Iraq|Syria|UAE|Egypt

GoogleCalendar uses the same approach.




How can I write a code that connects to a website, supplys my data, uses their visualization functionality, then copies and pastes the 'share link" to my wiki?

----------------------------------------------------------------------------------------------------------------------------------
According to today's meeting, I have to design the user interface for my tool. The problem is, I am still not sure what features it should exactly have. A feature which I know will extremely helpful is browsing to a spreadsheet to insert it in the wiki.

• This tool, which I believe is developed in Harvard, does that; you copy and past cells from excel and it converts it to a proper wiki markup table format. I might try to contact the author, or I might be able to develop something similar myself.
  
• This is another tool. It is written in Perl and you have to have it to populate the wiki with data. You also have to supply your wiki page URL, user name, and password.
• A third tool. It lets you copy and paste data or upload it from a file.

Interesting data visualization toolkits:

• Flare. But it requires flash.
• Prefuse.
• Google Motion Chart.
  

Idea: Related to Steve's user case. You insert a char, say temperature over 100 years. But you only focus on 50 years. So you set that scale in the tool. The user after that can scale the years from 1 to 100. We can read the limit on the x-axis and set a range.

June 1st

Maria and I have been trying to make statsjam run properly on our wikis since morning with no luck. I followed all the steps in the README file but when I add the , it attemps to create a new wikipage called Main_Page/extensions/statsjam/statsjam_to_HTML.py. The bold part is the statsjam path in my mediawiki directory. I guess I have to bebug the .py files to see what is going wrong.

The first extension that is finally working nicely in my wiki is Wiki3D. It lets you insert one or more 3D objects (box, cylinder, sphere, and cone) in your wiki page with the dimensinos and motions you specify. Here is an example. I looked at the source code. It uses a Java applet and provides the user specifications as input to the applet. To insert that applet in the wiki page, it uses the HTML APPLET tag and inserts it directly into the page. I will try to apply this idea to applets taken from maneyes.

Other interesting extensions:

• Graphviz extension and many example here.
• Gchart4mw.