tag:blogger.com,1999:blog-46854626974786371652024-02-08T05:07:31.868-05:00PhyloGeoVizJournal for the Google Summer of Code project, <a href="http://phylogeoviz.org/">"Visualizing phylogeographic information"</a>.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.comBlogger84125tag:blogger.com,1999:blog-4685462697478637165.post-17473141622215079982008-01-14T21:15:00.000-05:002008-01-14T21:17:46.776-05:00fixed a bug in the haplotype groupsFixed a bug that was causing the haplotype data in the pop_hap array to sort incorrectly. Basically there was an extra for loop in there that was causing the pop_hap array to be jumbled an extra X times. We're now up to version 2.3.1.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-39263746807305416102007-08-27T13:43:00.001-04:002007-08-27T14:09:26.901-04:00missing table in IEHelp! I can't figure out why <a href="http://phylogeoviz.org/testing/test3.php">this table</a> won't show up in Internet Explorer (v. 7, in Windows). The table (id="popsizelegendtable") is viewable in Firefox but totally disappears in IE. I have no idea what's going on. Here's the <a href="http://phylogeoviz.org/testing/test3.txt">unprocessed source</a>. Is it a CSS style issue? Or is some of my javascript overwriting some styles? The nodes and data are still there in the HTML tree, but it just isn't viewable. I feel like I've turned every display to block and zoom to 1 and am out of ideas.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com1tag:blogger.com,1999:blog-4685462697478637165.post-63338339150507854002007-08-27T13:39:00.000-04:002007-08-27T13:41:51.371-04:00Works in Firefox and IE (almost)<a href="http://phylogeoviz.org/version_2.3">Version 2.3</a> is now up! Now it works in Firefox on Windows, Linux, and Mac, and has almost all functionality in IE in Windows and Mac. The only thing missing it not being able to draw the sample size legend in IE.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-90077331509635656112007-08-27T11:48:00.001-04:002007-08-27T13:39:45.930-04:00Aha! Getting google to return svg's instead of img's solvedSo thanks to <a href="http://groups.google.com/group/Google-Maps-API/browse_thread/thread/ae4bd21676d4f19d/75f65c4ab61991e2?lnk=gst&q=overlapping&rnum=1#75f65c4ab61991e2">Mike William's post</a> to the Google Maps API Google Group, I can get GPolygon to return svg's instead of img's in Firefox in Linux. Yay!<br /><br />Basically, you have to set these two parameters, <span style="font-family:courier new;">_mSvgEnabled</span> and <span style="font-family:courier new;">_mSvgForced</span> to <span style="font-family:courier new;">true </span>in order to force Google to return SVG's. Here's the code snippet that made everything better:<br /><br /><span style="font-family:courier new;">function load() {</span><br /><span style="font-family:courier new;">if (GBrowserIsCompatible()) {</span><br /><span style="font-family:courier new;"> // Initialize</span><br /><span style="font-family:courier new;"> if(document.implementation.hasFeature(</span><br /><span style="font-family:courier new;"> "http://www.w3.org/TR/SVG11/feature#SVG","1.1")){</span><br /><span style="font-family:courier new;"> _mSvgEnabled = true;</span><br /><span style="font-family:courier new;"> _mSvgForced = true;</span><br /><span style="font-family:courier new;">} </span>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-66606071311996112762007-08-24T10:50:00.000-04:002007-08-24T10:52:11.200-04:00VML - link to referenceA useful link to VML documentation:<br /><br /><a href="http://www.w3.org/TR/NOTE-VML">w3 VML specifications</a>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-4943730147049616922007-08-24T10:43:00.000-04:002007-08-24T10:52:41.718-04:00Conflicts between jQuery and Prototype objects in IEI'm not sure that I have this problem correctly diagnosed, but I've been noticing a lot of errors in IE when I have lines of code that combine jQuery objects with Prototype functions. I guess this means that I've been sloppy with my JS and Firefox has been letting me get away with it! Here's an example of code that works in Firefox, but not IE:<br /><br /><span style="font-family: courier new;"></span><blockquote><span style="font-family: courier new;"> var block = jQuery(".widgetBody", $(elementid))[0];</span><br /><span style="font-family: courier new;"> var blockstatus = block.getStyle('display'); </span></blockquote><span style="font-family: courier new;"></span><br />It seems like the problem is mixing the jQuery object, block, with the prototype function, getStyle(). The error is removed when I replace the second line with a call to a jQuery function instead:<br /><br /><span style="font-family: courier new;"><blockquote> var blockstatus = jQuery(block).css("display");</blockquote></span><br />I guess it makes sense that combining jQuery and Prototype code is a bad idea. I was using Prototype to begin with then started using more and more jQuery, and never went back to clean out all the Prototype. Heck there's even Prototype in the line with the jQuery search! Anyways...laziness is costing me now.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com1tag:blogger.com,1999:blog-4685462697478637165.post-65614675679553370102007-08-24T09:35:00.000-04:002007-08-24T09:47:28.485-04:00Addition of VML line critical to getting things working in IEI can't believe I missed this until now. To get the polylines and, thus, polygons to render correctly in IE, you have to include a reference to the vml namespace. The top of your document should look like this:<br /><blockquote><br /><span style="font-family:courier new;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</span><br /><span style="font-family:courier new;"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span><br /><span style="font-family:courier new;"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><br /><br /></span></blockquote><span style="font-family:courier new;"></span>See the <a href="http://www.google.com/apis/maps/documentation/#XHTML_and_VML">documentation on XHTML</a> for slightly more info.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-40523850056165698572007-08-23T15:41:00.000-04:002007-08-23T15:53:55.109-04:00Internet Explorer -- pain in the assI've started debugging the program in Internet Explorer (v. 7.0.5730.11) on a Windows machine. I've been using <a href="http://www.getfirebug.com/lite.html">Firebug Lite</a> and the <a href="http://urltea.com/1874">IE developer toolbar</a> to help debug. Even put together, neither of these is remotely useful compared to the awesomeness of <a href="http://www.getfirebug.com/">Firebug</a> in Firefox. Anyone out there have a recommendation for anything better for IE development and debugging?<br /><br /><a href="http://www.westciv.com/xray/">XRay</a> is another interesting CSS viewer tool that works in any browser.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-19328736845571015202007-08-23T10:27:00.000-04:002007-08-23T15:41:43.073-04:00Fixing svg/img bugsSo I got a bug report that said that the site didn't work in Firefox in Linux. Only one wedge was being drawn. Turns out that for some reason the call to GPolygon that usually produces svg's produces 'img' elements instead. This caused a bunch of problems. Now I've fixed it so that I check if img's or svg's are produced, then modify the event handling of those objects. I suspect that this img/svg problem may be at the heart of the app's bad behavior in Internet Explorer and Safari as well. But there are more bugs to take care of there... Just a note: Gmaps in Firefox in Windows and Mac DOES produce svgs.<br /><br />By producing img's instead of svg's certain features of the site become impractical to implement. The biggest problem is that the img's must be completely redrawn each time there's a change. With svg's I can easily change the style (fill color, stroke width, etc.) of the element without having to redraw the graphic. The drawing of the pies is time consuming, so with img's I've disabled the dynamic updating of the pie wedge colors. Now the user must click the 'ok' button to submit their new color requests.<br /><br />Note: I'm not sure who's 'fault' it is for not being able to use svg's on Firefox in Linux. The documentation for Firefox states that svg support is now built in to the latest release, so maybe it's Google Map API's fault for returning the wrong img datatypes when it should return svg's. In any case, img's are what's being rendered on the page.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-70628545815082316022007-08-23T10:23:00.000-04:002007-08-23T10:45:54.921-04:00Development environment in LinuxSo getting my development environment set up in linux was no small task. I'm using Fedora 6. Here were some of the obstacles:<br /><br />1) The distribution's version of Firefox doesn't come compiled with the necessary debug flags for Firebug to work properly. I downloaded a new version of Firefox directly from the website and that seemed to have solved most of the debug problems. I've heard that you may need to download the source and compile it by hand with some special flags, but luckily the downloaded tarball worked for me.<br /><br />2) The php-json package was missing from my installation of php. A simple yum install fixed that problem.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-48197559821642168922007-08-20T16:28:00.001-04:002007-08-20T16:29:44.630-04:00Last weekly updateI've just uploaded my code that I'll be evaluated for Summer of Code experience (version 2.2.2). Whew! I really enjoyed the summer and learned a lot. There still are many more features I'd like to add, but I feel pretty happy about the product at this stage.<br /><br />Thanks, everyone!Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-42494912125282281852007-08-20T16:11:00.000-04:002007-08-20T16:27:51.396-04:00Phyloinformatics Summer of Code Meetup at NESCentAt the end of last week the NESCent SoCoders all met up in Durham, NC for a wrap up conference. It was really neat to see what others had been doing all summer long. The diversity of projects was to be expected, though there were some common threads between us. <br /><br />One message that was hammered home to me was the need for file standards in evolutionary biology. The amount of time spent massaging your data into different formats to interface with interesting programs is many times prohibitive to actually using the programs. I was struck by all the development going on with NEXUS (ex: <a href="http://www.molevol.org/nexplorer/cgi-bin/index.cgi">Nexplorer</a>, <a href="https://www.nescent.org/wg_phyloinformatics/PhyloSoC:Phylogenetic_XML">NEXML</a>, and <a href="https://www.nescent.org/wg_phyloinformatics/PhyloSoC:Multi-language_bindings_to_the_NEXUS_Class_Library">libraries for NEXUS</a>) in particular, and I feel like I need to jump on this bandwagon too! I was quick to realize that I'm part of the problem in that PhyloGeoViz currently doesn't accept NEXUS (or anything else for that matter besides my own special format). Well, being able to work with NEXUS files is now on the top of my list of priorities.<br /><br />Another common theme of the meeting was the visualization of tree data. Multiple projects were coming at this problem using different languages and in different contexts. <br /><br />A great meeting! I had a lot of fun hearing other students' and mentors' experiences. Hope to run into you again soon!Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-36501312528700086942007-08-20T11:59:00.000-04:002007-08-20T12:04:56.351-04:00LicensingI decided to use the <a href="http://www.gnu.org/licenses/">GNU GPL</a>. It seemed the most broad. <br /><br />I'm not sure if I did this correctly, but my Google SVN project repository contains other people's scripts (like Prototype, YUI Color Picker, jQuery, etc.) that have their own licenses, etc. All the scripts I used are open source libraries, but I'm not sure if including them in my own repository is ok. Should I have just told the user to download them themselves or is it ok to package everything together like I've done? In any case, I think it's ok to put everything in one place.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-13326686617649940972007-08-20T11:54:00.001-04:002007-08-20T11:59:05.205-04:00New features addedLast week I tried to code up as many of the features as possible prior to the meet-up at NESCent. Here are some I managed to add by the end of this past weekend:<br /><br />Expandable/collapsible menu widgets for the legend.<br />Outline pie wedges option.<br />Enlarge/reduce map window size.<br /><br />I also got all the pages prettied-up with the same css styles, which I think made a huge difference to the look and usability of the site. Thanks, Jack for helping me feel my way around CSS this week!<br /><br />Newest version is up. <a href="http://www.phylogeoviz.org/version_2.2.2/">Version 2.2.2.</a>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-32690774391557030112007-08-20T11:49:00.000-04:002007-08-20T11:53:35.471-04:00IconsHere's a nice icon set that I found. Very good looking. But it didn't have the +/- icons (for expand/collapse a tree) that I needed.<br /><br /><a href="http://www.famfamfam.com/lab/icons/silk/">Silk icons</a><br /><br />I did, however, use this nifty site that generates pretty ajax loading icons (animated gifs) for you. <br /><br /><a href="http://www.ajaxload.info/">ajaxload.info</a>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-63336514125429617182007-08-20T11:47:00.001-04:002007-08-20T11:49:36.705-04:00Uploading to google repositoryI finally got my local source code uploaded into <a href="http://code.google.com/p/phylogeoviz/source">Google's subversion repository</a>. It was a bit of a chore to figure out how. And I couldn't figure out how to keep all my own repository history alive. Ah well.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-29228404564281691902007-08-13T11:57:00.000-04:002007-08-13T12:00:55.192-04:00Weekly updateI've spent most of the week tying my pages together. Now the user can input haplotype group data as well as the basic input data. Also, the edit data page now integrates with the rest of the site. The color picker that dynamically updates the pie wedge colors has been tested as well.<br /><br />Things to do this week:<br /><ul><li>Clean up code for repository.</li><li>Include comments on the license, etc.</li><li>Get code into repository.</li><li>Write documentation and user instructions.</li><li>Edit CSS and make site look prettier.</li><li>Prepare presentation for NESCent meet-up at the end of the week.</li></ul>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-70396882336039567702007-08-13T11:51:00.000-04:002007-08-13T11:57:36.932-04:00Version 2.0 up and runningI've uploaded my latest version. Still need to fiddle with css to make it look nice, but the basic functionality is there. New features:<br /><ul><li>When changing color the pie wedges update with new colors in real time.</li><li>An edit data page, where the user can include/exclude populations or haplotypes and edit data fields.</li><li>Users can now group haplotypes by specifying haplotype groups.</li></ul>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-29788391313368538132007-08-13T10:07:00.000-04:002007-08-13T10:12:33.837-04:00Stuck on image creationI'm trying to output the legend (of haplotype colors and of sample sizes) to some sort of image format (*.png for example). However, I'm quickly realizing that I'm in over my head. Anyone out there know of any javascript libraries that can help me?<br /><br />So I'm putting this on the back-burner for now. I guess if you want to save the legend info, your simplest bet is to do a print-screen + crop.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-79906408146817838212007-08-07T21:03:00.000-04:002007-08-07T21:20:17.838-04:00How to auto-submit a formSometimes it's useful to pass data to a hidden page that processes the data then passes the new data to another page. To pass the data through forms, use javascript. Set a body onload function with $("form_name").submit() to submit the form when the page finishes loading.<br /><br />Example:<br /><pre><br /><span style="font-family: courier new;"><?php</span><br /><span style="font-family: courier new;"> ....data processing code here</span><br /><span style="font-family: courier new;">?></span><br /><span style="font-family: courier new;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\n<br /></span><span style="font-family: courier new;"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /></span><span style="font-family: courier new;"><html xmlns="http://www.w3.org/1999/xhtml"></span><br /><span style="font-family: courier new;"> <head><br /></span><span style="font-family: courier new;"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></span><br /><span style="font-family: courier new;"> <script type="text/javascript" src="javascripts/prototype.js"></script><br /></span><span style="font-family: courier new;"></span><span style="font-family: courier new;"> </head></span><br /><span style="font-family: courier new;"> <body onload="$('newdata').submit()"></span><br /><span style="font-family: courier new;"> <form id="newdata" name="newdata" method="post" action="newviewer.php"></span><br /><span style="font-family: courier new;"> <input type="hidden" id="data1" name="data1" value="x1"><br /></span><span style="font-family: courier new;"> </form></span><br /><span style="font-family: courier new;"> </body><br /></span><span style="font-family: courier new;"></html></span><br /></pre>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com2tag:blogger.com,1999:blog-4685462697478637165.post-30385186667240757982007-08-07T20:54:00.001-04:002007-08-07T21:03:25.331-04:00JSON, php, and html formsSo I've been working on a data processing page that is hidden from the user, takes form data from an input page, processes the data, encodes the data using json in a new form, then auto submits the form to a new page. Here are a few helpful functions that got it working properly:<br /><br />1. The <a href="http://us2.php.net/json_encode">json_encode()</a> function in php doesn't escape some html special characters like quotes. It's helpful to wrap it with the function <a href="http://us2.php.net/htmlspecialchars">htmlspecialchars()</a> so that it plays nice with your html.<br /><br />2. php line breaks are '\r'. I had inadvertently included some line breaks in my string variables. To fix that problem use the <a href="http://us2.php.net/trim">trim()</a> function.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-12880166344261323902007-08-06T01:03:00.000-04:002007-08-06T01:12:04.547-04:00Weekly updateThis week I've spent hacking away at the data management page. I've got all (cross you fingers) the bugs smoothed out from transferring the changed data from the data management page to the viewer page. A new feature of note is that the program now sorts the haplotypes by groups and the user can color all haplotypes in a group at once. (Note, I haven't uploaded the newest version to the website yet, sorry).<br /><br />Features added this week:<br /><ul><li>Can include/exclude haplotypes and populations.</li><li>Can edit data.</li><li>Can specify haplotype groups.</li><li>Can color by haplotype group.</li><li>Changing colors in the colorpicker now changes the associated pie wedge colors in real time.</li></ul>Next week:<br /><ul><li>Meet with David about the remaining goals for the project, and project timeline.</li><li>Update the export function to allow grouping by haplotype groups, etc.</li><li>Tie the data management page to the input data page.</li><li>Update website with latest release.</li><li>Research copyright laws and permissions concerning the maps.</li></ul>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-46338004908708427412007-08-06T00:37:00.000-04:002007-08-06T01:03:05.034-04:00onChange handler for the colorpicker<a href="http://www.knallgrau.at/code/colorpicker">Knallgrau's color picker</a> has been a really useful library, but it took a bit to figure out syntax for the onchange handler. Each colorbox shares the same colorpicker, so I was having trouble deciphering which of the DOM elements was the calling element, so I set an 'onclick' handler on the 'ok' button then had a big loop through all the possible elements to see which one changed. Besides being ugly, the user doesn't have to click on the 'ok' button to exit the colorpicker, so this implementation fails to register a lot of events.<br /><br />Turns out I was going about this all the wrong way. Knallgrau has an 'onUpdate' attribute that you can set. Here's the syntax when initializing the colorpicker:<br /><br /><span style="font-family:courier new;">new Control.ColorPicker("inputid", { IMAGE_BASE : "javascripts/colorpicker/img/", "swatch" : "buttonid", "onUpdate" : changeColor });</span><br /><br />where 'inputid' is the id of the <input> element, 'buttonid' is the id of the <button> element, and 'changeColor' is the function called when the color is updated.<br /><br />In the changeColor function, this.field gives you the input element. Example:<br /><br /><span style="font-family: courier new;">function changeColor ()</span><br /><span style="font-family: courier new;">{</span><span style="font-family: courier new;"><br /> console.log (this.field); //prints <input type="hidden" id="hapcolor1" name="hapcolor1" value="B71919"/></span><br /><span style="font-family: courier new;"> console.log (this.field.id); //prints "inputid"</span><br /><span style="font-family: courier new;">}</span>Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-59498990291442937772007-08-06T00:34:00.001-04:002007-08-06T00:37:31.872-04:00jQuery!So I've been trying to update all of the pie wedge colors in real time as the color picker runs. To do so I have to have a quick and efficient way of grabbing, traversing, and setting specific DOM elements. <a herf="http://jquery.com/">jQuery</a>, this fabulous javascript library does all that and more! It's super fast. But the documentation is a little harder to understand than for prototype.Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0tag:blogger.com,1999:blog-4685462697478637165.post-78438156295674622212007-08-01T12:34:00.001-04:002007-08-01T12:36:31.250-04:00another bug to fixFart! If you click away from the default map type on the viewer screen (say go from 'satellite' to 'map') you lose the ability to drag the pies and color them. It's bizarre, but if you resize the pies you get back some of the draggability and can recolor them....Ericahttp://www.blogger.com/profile/06212880434950195764noreply@blogger.com0