Friday, October 24, 2008
Sunday, October 12, 2008
ExtJS learning notes
Useful tips.
1. 'mousewheel' event indeed can be removed. Something is messed up in my code. Need to figure out a way to avoid functions registered twice.
2. Ext.apply, Ext.applyIf, can quickly apply options to a given object;
3. function.call(this), execute the function under a specific scope.
4. Ext.reg(), register custom xtypes
5. EventManger.onWindowResize(), add custom window resize functions, which are performed right AFTER the viewport sync functions.
6. Function.createSequence can create a function that call same params with the original
Btw, !important in CSS means immutable..and non-overidable D:
1. 'mousewheel' event indeed can be removed. Something is messed up in my code. Need to figure out a way to avoid functions registered twice.
2. Ext.apply, Ext.applyIf, can quickly apply options to a given object;
3. function.call(this), execute the function under a specific scope.
4. Ext.reg(), register custom xtypes
5. EventManger.onWindowResize(), add custom window resize functions, which are performed right AFTER the viewport sync functions.
6. Function.createSequence can create a function that call same params with the original
Btw, !important in CSS means immutable..and non-overidable D:
Friday, October 10, 2008
Updates
Updates:
1. Added column names and rownames into index, remote loading data.
2. Added the mini map...no click & go functions yet
3. Mousewheel in/out
Weird ext bugs:
1. mousewheel event can't be removed! annoying.
2. same function if registered twice will be performed twice. Trying to sort this out.
3. Weird behavior of selection models. I will get back to this when i have more time.
Wednesday, October 8, 2008
Time Stamp
偶然在Google的右下角看到一个链接:
'try a search from our early days.'
点击进入了2001年的Google。那个时候，我不上百合，也几乎不知网络为何物。
好奇心驱使下，在搜索栏里填入了自己的名字和南京大学。第一个hit，也是
唯一一个和我有关的hit，却打开了我记忆的盒子。
原始的网站早已404了；一个在我活跃在浦口的时代的网站，也许它的一生也不到4位数的
访问量。它默默消失之后，在Google的故纸堆里，如此期待之外的出现。这里面有的人，
早已天各一方；有的人，若干年后在美国偶遇；有些人，也许大家早已互相忘记，只是看
到这个名字，脑海中浮现出一个模糊的影子，然后一瞬间这些画面就清晰了起来。8年前青
涩而充满激情的校园生活，和那其间的我，现在完全feels like a dream.
What has been lost, should not be forgotten.
'try a search from our early days.'
点击进入了2001年的Google。那个时候，我不上百合，也几乎不知网络为何物。
好奇心驱使下，在搜索栏里填入了自己的名字和南京大学。第一个hit，也是
唯一一个和我有关的hit，却打开了我记忆的盒子。
原始的网站早已404了；一个在我活跃在浦口的时代的网站，也许它的一生也不到4位数的
访问量。它默默消失之后，在Google的故纸堆里，如此期待之外的出现。这里面有的人，
早已天各一方；有的人，若干年后在美国偶遇；有些人，也许大家早已互相忘记，只是看
到这个名字，脑海中浮现出一个模糊的影子，然后一瞬间这些画面就清晰了起来。8年前青
涩而充满激情的校园生活，和那其间的我，现在完全feels like a dream.
What has been lost, should not be forgotten.
Tuesday, October 7, 2008
Quick Chip viewer
Around 6-7 hrs of dev time including debugging and fine tuning.
Some new experiences with Ext:
The hidden Ext.lib.Dom provides some handy functions like to calculate the size of the browser window, thanks Jack, it's not in the documentation but i was able to dig it out :)
Viewport is neat but it may take a while to get it work properly; everytime add/remove elements don't forget to call viewport.doLayout()
Some new experiences with Ext:
The hidden Ext.lib.Dom provides some handy functions like to calculate the size of the browser window, thanks Jack, it's not in the documentation but i was able to dig it out :)
Viewport is neat but it may take a while to get it work properly; everytime add/remove elements don't forget to call viewport.doLayout()
Tuesday, September 16, 2008
Adding Javascript Libs to Blogspot
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.
[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.
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)
