In the html/javascript widget, don't paste in all your source libs. If you have a static place to host these libs. Then simply:
[script type="text/javascript" src=".."][script] xml not hapy with greater than and less than. :S
It works! =D Now i can add tons of custom functions to Blogspot. The code-ability of this hosting is unbeatable.
Tuesday, September 16, 2008
Home Theater + PC Gaming System
To build this whole system requires a lot of PhD research. :)
Display Panels:
Samsung 50" 720p Plasma.
Samsung 22" 1050p LCD.
Power house 1:
Core Duo 2 E8500 3.16GHz
Radeon 4870 HD 512Mb
650G HDD
Eclipse Keyboard + MX518 mouse
Power house 2:
Xbox 360, Playstation 2
Audio: Logitech/Creative 5.1 + 2.1
Controllers:
Key+mouse * 2 sets, PS2 controllers * 2, Logitech Dual Shock * 1, Driving Force * 1, XB360 Controllers * 2, Guitar * 1.
I <3 my den!
Display Panels:
Samsung 50" 720p Plasma.
Samsung 22" 1050p LCD.
Power house 1:
Core Duo 2 E8500 3.16GHz
Radeon 4870 HD 512Mb
650G HDD
Eclipse Keyboard + MX518 mouse
Power house 2:
Xbox 360, Playstation 2
Audio: Logitech/Creative 5.1 + 2.1
Controllers:
Key+mouse * 2 sets, PS2 controllers * 2, Logitech Dual Shock * 1, Driving Force * 1, XB360 Controllers * 2, Guitar * 1.
I <3 my den!
Google Summer of Code Summary
Project: code name GLay, Cytoscape plugin for community structure detection.
Source code is here:
GenMAPP Repository
Video Tutorials:
Part 1.
Part 2.
Other presentation materials, slides, recipes:
Demo Materials for ICSB(International Conference on Systems Biology, 2008)
Details will be updated later.
Source code is here:
GenMAPP Repository
Video Tutorials:
Part 1.
Part 2.
Other presentation materials, slides, recipes:
Demo Materials for ICSB(International Conference on Systems Biology, 2008)
Details will be updated later.
Dgb Log: Sep.11, 2008
Buttons, buttons!
Various bug fixes. It seems that the optimal running environment of this browser is: Google chrom! Their svg efficiency is just plain awesome. Maybe i should try opera as well, they are leading the SVG benchmark now.
Attached a latest screenshot.
- Added more buttons to the track controls.
- Fixed bugs when refreshing tracks, missed one multiplicity factor [my bad].
- Other bugs.. i need a more powerful pesticide
Various bug fixes. It seems that the optimal running environment of this browser is: Google chrom! Their svg efficiency is just plain awesome. Maybe i should try opera as well, they are leading the SVG benchmark now.
Attached a latest screenshot.
Dgb Log: Sep.10, 2008
Major updates:
:D
1. Fixed zoom-in/out bugs, fixed the caching
2. Added zooming masks, updated button logos
3. Keep the slider further away to avoid mouse event failures. The default Ext slider did not register 'onmouseout' events, so what happens is if you hold your mouse down and move it out of the thumb, then let it up, it will go crazy, because the 'onmouseup' event was registered for the thumb, now mouse is out of the thumb. A fix is dynamically bind the 'onmouseout' event with 'onmousedown', and unregister this event in 'onmouseup' to avoid regular mouse in/out triggers.
This has been added to my new track meachnism.
4. Still seem to have bugs in the proxy dragging :S
:D
1. Fixed zoom-in/out bugs, fixed the caching
2. Added zooming masks, updated button logos
3. Keep the slider further away to avoid mouse event failures. The default Ext slider did not register 'onmouseout' events, so what happens is if you hold your mouse down and move it out of the thumb, then let it up, it will go crazy, because the 'onmouseup' event was registered for the thumb, now mouse is out of the thumb. A fix is dynamically bind the 'onmouseout' event with 'onmousedown', and unregister this event in 'onmouseup' to avoid regular mouse in/out triggers.
This has been added to my new track meachnism.
4. Still seem to have bugs in the proxy dragging :S
Dgb Log: Sep.8, 2008
To save the poky.
The SVG version of the genome browser now actually works. But in order to provide dynamic zooming i have to put all annotations into the tile, which makes the xml tile data quite large. I think it's the render model needs to be improved: in the png implementation I put lots of image map data in the tile too. It can be smaller because if at a certain zooming level, if the track figure width is smaller than 1 pixel, that annotation will not be incorporated into the tile. In this case I will have to make each tile covers smaller regions, the desired length for now is 200kb. So in order to display 1MB i will need 5 tiles, and they could be very poky. The hybrid design says that I use png tiles instead of svg tile when you want to look at very dense annotations globally. The question is: will this actually be necessary? I probably will just forget the performance tuning for now.
Summary
Damn i worked on this for around 1 year already. There were lots of side-kick projects and my prelim in between, which slowed things down quite a bit.
Technology has evolved a lot too.
The SVG version of the genome browser now actually works. But in order to provide dynamic zooming i have to put all annotations into the tile, which makes the xml tile data quite large. I think it's the render model needs to be improved: in the png implementation I put lots of image map data in the tile too. It can be smaller because if at a certain zooming level, if the track figure width is smaller than 1 pixel, that annotation will not be incorporated into the tile. In this case I will have to make each tile covers smaller regions, the desired length for now is 200kb. So in order to display 1MB i will need 5 tiles, and they could be very poky. The hybrid design says that I use png tiles instead of svg tile when you want to look at very dense annotations globally. The question is: will this actually be necessary? I probably will just forget the performance tuning for now.
Summary
- Performance issues. When svgs are rendered, the tile size determines performance. If tile is too large it can be poky.The solution is to introduce a proxy mechanism. Setting opacity to 1 won't help, the svg has to be removed entirely from the svg dom tree. There are still some issues with the 'updateTile Height mechanism, enabling proxy can set the track height to 0 when updating'. Remove the tile while dragging, add it back when dragging is done.
- The solution works. Use proxy to hide tiles when dragging.
- Add expand/collapse functions to dynamically show/hide annotation names. One funny story: I can't find the text bounding box measure property in SVG! Even it calculates the character/letter width internally can i can get the text bounding box width programmatically. The work around is to pre calculate the letter width of tahoma letters at size 10, then initialize them into the array to calculate display text bounding box width, which is critical when show/hide ids. For those on the boundaries, some off-screen portions will be rendered to maintain consistency.
- must expand/collapse accordingly with new tiles moving in [jumpTo, scrolling functions]
- Height Synchrononization accomplished, however, a case can happen is tile is updated after mouse is released.
- this case, height need to be synced. Otherwise, height will be synced after.
As this function is pretty fast, can call it whenever. Ok, that was my rant when kept the original blog. The new browser sync track height precisely, no need to manually fine-tune track heights - toggle buttons added, add icons later. To show/hide masks, expand/collapse, use proxy, refresh track... lots of button controls
Damn i worked on this for around 1 year already. There were lots of side-kick projects and my prelim in between, which slowed things down quite a bit.
Technology has evolved a lot too.
Dgb Log: Sep.7, 2008
Just two major improvements.
I guess only me could make sense of these work logs. :)
- Finished the new zooming model. It turned out that the rounding error of few pixels resulted merely from missing one-line of code. It was a very subtle bug and totally ruined my weekend.
- Add a cache to store the tiles: a queue of predefiend size. When the limit of cache is reached, the first cached tile will be removed. This avoids repeated go the server to fetch the same tiles.[Even the browser may cache tile data too, but as this is not raw image material, better cache them on the fly.]
I guess only me could make sense of these work logs. :)
Dgb Log: Sep.5, 2008
I spend the whole day on revising a zooming in/out model. The current google map model is to use fixed size tiles but rendered at different levels. However, google map doesn't have the issue of Multiple Track Scrolling Synchronization (MTSS, oh yeah, i just coined a term) issues.
1,2,3 have been implemented so far.
- 1. Tiles will only be rendered at 1 zooming level. The scaling is done by scaling tiles rather than continuously fetching data from the server.
- 2. Buffer tiles are added automatically to the left and right of the track when scrolling and changing zooms.
- 3. Rounding errors. If the user drag on the zoomed in tracks, this could cause the tracks with high zooming with 0 pixel movement. This should be corrected, as the cumulative errors could be significant for alignment.
- 4. JumpTo: if adding 1 track buffer won't help, the entire track will fetch new data by jumpTo the desired locus directly. However, the ajax calls should be buffered and delayed, as the user may crazily click on 'jumpTo', could result in the effect that when the tiles data are retrieved, they have been removed from DOM already.
The new model design is to fully use the advantage of SVG:
1,2,3 have been implemented so far.
Dgb Log: Sep.3, 2008
1. Tried foreignObject tag in inline svg, it seems it's not working. It is working in referred svg tho. The original post was on Ajaxian: Link.
The only advantage to use foreignObject is considering text wraps. SVG has great graphic scalability but relatively poor in text display. FF 3.1 ...
2. Decided to give the Dgb a version number 2.0. Well, it's just too much.
A sneak peek of version 1.0 Dynamic Genome Browser with the png implementation.
The only advantage to use foreignObject is considering text wraps. SVG has great graphic scalability but relatively poor in text display. FF 3.1 ...
2. Decided to give the Dgb a version number 2.0. Well, it's just too much.
A sneak peek of version 1.0 Dynamic Genome Browser with the png implementation.
Dgb Log: Sep.2, 2008
Issues:
1. For some reason the dom query doesn't work for svg tags with class attributes using ExtJS.[This is due to the html parser, as inline svg document is not part of xhtml; the 'class' attribute is therefore not appended. Solution: use custom attribute names, or use the prototype dom query, which works very well.]
2. Drag and Drop completed, use the Ext sortable implementation. It's not perfect but it works. Have to use the Ext.ux.Sortables, but it's still not as good as the scriptaculous implementation.
The issue with Scriptaculous with xhtml is the default loader is not compliant. Bug Link. The solution is to load scripts separately, but care the loading order. Both solved, still prefer scriptaculous implementation of Sortable.
Note the Sortable handle issue: if there are multiple elements all assigned the handle class, it seems that only the first in the dom is effective. Haven't done more research yet but should take extra care.
3. SVG file size may be too big, try to bring the file size down; this is the downside of the verbosity of XML. Also, the dragging is very inefficient when tile size is big (~200kb) in the genome browser. After discussed with Scooter this is because it's very inefficient to drag the huge chunk of XML...
So png and svg both have their edges though. I was thinking about a hybrid design but that could just be too much for now. (Need one day to think about it).
1. For some reason the dom query doesn't work for svg tags with class attributes using ExtJS.[This is due to the html parser, as inline svg document is not part of xhtml; the 'class' attribute is therefore not appended. Solution: use custom attribute names, or use the prototype dom query, which works very well.]
2. Drag and Drop completed, use the Ext sortable implementation. It's not perfect but it works. Have to use the Ext.ux.Sortables, but it's still not as good as the scriptaculous implementation.
The issue with Scriptaculous with xhtml is the default loader is not compliant. Bug Link. The solution is to load scripts separately, but care the loading order. Both solved, still prefer scriptaculous implementation of Sortable.
Note the Sortable handle issue: if there are multiple elements all assigned the handle class, it seems that only the first in the dom is effective. Haven't done more research yet but should take extra care.
3. SVG file size may be too big, try to bring the file size down; this is the downside of the verbosity of XML. Also, the dragging is very inefficient when tile size is big (~200kb) in the genome browser. After discussed with Scooter this is because it's very inefficient to drag the huge chunk of XML...
So png and svg both have their edges though. I was thinking about a hybrid design but that could just be too much for now. (Need one day to think about it).
Subscribe to:
Posts (Atom)
