Permalink
Browse files

add animation function step 1

  • Loading branch information...
LunchBox committed Jun 8, 2009
1 parent 994c0d8 commit bd6561053f6ec3c37ab1a57def3821590ad86d42
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -13,11 +13,21 @@
</head>
<body>
<div id="image_viewer">
- <img src="images/concept_6.jpg" id="image" />
</div>
<script type="text/javascript">
- var viewer = new ImageViewer("image_viewer", "image", {
+ var images = new Array();
+ for(var i = 1; i <= 20; i++){
+ var str;
+ if(i<10){
+ str = "0" + i;
+ }else{
+ str = i;
+ }
+ images.push("dcm_images/dicom_images_brain_0" + str + ".jpg");
+ }
+ var viewer = new ImageViewer("image_viewer", {
+ images: images
//onDistanceCreate: function(pointPairs){alert(pointPairs.toJSON());},
//onDistanceRemove: function(pointPairs){alert(pointPairs.length);},
//onROICreate: function(rois){alert(rois.toJSON());},
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
@@ -12,10 +12,10 @@ Array.prototype.remove = function(from, to) {
var ImageWrapper = Class.create({
initialize: function(image) {
- this.image = $(image);
- this.src = this.image.src;
- this.originalWidth = parseInt(this.image.width);
- this.originalHeight = parseInt(this.image.height);
+ // this.image = $(image);
+ this.src = image.src;
+ this.originalWidth = parseInt(image.width);
+ this.originalHeight = parseInt(image.height);
this.currentWidth = this.originalWidth;
this.currentHeight = this.originalHeight;
this.currentPercentage = 1;
@@ -314,32 +314,73 @@ var ImageWrapper = Class.create({
}
});
+var animation = null;
+var animationIndex = 0;
+var animationControlBar = null;
+function prePage(){
+ animationIndex = ( animationIndex - 1) % images.length;
+ if(animationIndex < 0) animationIndex = images.length - 1;
+// $("iv_info").innerHTML = animationIndex;
+ changePage();
+}
+function nextPage(){
+ animationIndex = ( animationIndex + 1) % images.length;
+// $("iv_info").innerHTML = animationIndex;
+ changePage();
+}
+function changePage(){
+ var images = viewer.options.images;
+ viewer.image.operator.attr({
+ src: images[animationIndex]
+ })
+ animationControlBar.setValue(animationIndex/images.length);
+}
+function playAnimation(){
+ stopAnimation();
+ animation = setInterval("nextPage()", 1000/6);
+ $("play_animation").hide();
+ $("stop_animation").show();
+}
+function stopAnimation(){
+ clearInterval(animation);
+ $("stop_animation").hide();
+ $("play_animation").show();
+}
+
var viewer;
var ImageViewer = Class.create({
- initialize: function(viewerID, imageID) {
+ initialize: function(viewerID) {
var defaults = {
width: 640,
height: 480,
+ images: new Array(),
onDistanceCreate: Prototype.emptyFunction,
onDistanceRemove: Prototype.emptyFunction,
onROICreate: Prototype.emptyFunction,
onROIRemove: Prototype.emptyFunction
};
- this.options = Object.extend(defaults, arguments[2] || { });
+ this.options = Object.extend(defaults, arguments[1] || { });
- this.image = new ImageWrapper(imageID);
- this.width = Math.max(this.options.width, this.image.originalWidth);
- this.height = Math.max(this.options.height, this.image.originalHeight);
+ var imageWrapperID = "image_wrapper";
+ var img = new Element('img', {
+ id: imageWrapperID,
+ src: this.options.images[0],
+ style: "display: none"
+ });
+
+ this.element = $(viewerID);
+ this.element.appendChild(img);
+
+ this.image = new ImageWrapper(img);
+ this.width = Math.max(this.options.width, img.width);
+ this.height = Math.max(this.options.height, img.height);
- var imageViewer = $(viewerID);
- this.element = imageViewer;
- var offset = imageViewer.cumulativeOffset();
+ var offset = this.element.cumulativeOffset();
this.left = offset[0];
this.top = offset[1];
this.centerX = this.left + this.width/2;
this.centerY = this.top + this.height/2;
- imageViewer.innerHTML = "";
this.builder = Raphael(viewerID, this.width, this.height);
var box = this.builder.rect(0, 0, this.width, this.height);
box.attr({
@@ -350,13 +391,12 @@ var ImageViewer = Class.create({
var initY = (this.height - this.image.originalHeight)/2 ;
this.image.buildOperator(this, initX, initY);
- // this.selector = new DragSelector(viewer);
-
-
this.buildViewer();
-
viewer = this;
+
+
+ playAnimation();
},
include: function(pointer){
if(pointer[0] > this.left && pointer[1] > this.top && pointer[0] < (this.left + this.width) && pointer[1] < (this.top + this.height)){
@@ -434,6 +474,55 @@ var ImageViewer = Class.create({
this.element.appendChild(infoArea);
+
+ // play control bar
+ var controlBar = new Element('div', {
+ id: 'control_bar'
+ });
+
+ var prePage = new Element("a", {
+ id:"pre_page",
+ href:"javascript: prePage();"
+ }).update("Pre");
+ controlBar.appendChild(prePage);
+ var playAnimation = new Element("a", {
+ id:"play_animation",
+ href:"javascript: playAnimation();"
+ }).update("Play");
+ controlBar.appendChild(playAnimation);
+ var stopAnimation = new Element("a", {
+ id:"stop_animation",
+ href:"javascript: stopAnimation();"
+ }).update("Stop");
+ controlBar.appendChild(stopAnimation);
+ var nextPage = new Element("a", {
+ id:"next_page",
+ href:"javascript: nextPage();"
+ }).update("Next");
+ controlBar.appendChild(nextPage);
+ var animationSlider = new Element("div", {
+ id:"animation_slider"
+ });
+ var animationLine = new Element("div", {
+ id:"animation_line"
+ });
+ animationSlider.appendChild(animationLine);
+ var animationHandle = new Element("div", {
+ id:"animation_handle"
+ });
+ animationSlider.appendChild(animationHandle);
+ controlBar.appendChild(animationSlider);
+
+ this.element.appendChild(controlBar);
+ animationControlBar = new Control.Slider("animation_handle", "animation_slider", {
+ sliderValue: 0.5,
+ onSlide: function(v) {
+
+ },
+ onChange: function(v) {
+ }
+ });
+
initImageViewerZoomSlider(zoomSlider);
},
initializeDistances: function(jsonStr){
@@ -779,13 +868,13 @@ var ROIPainter = Class.create({
var marker = this.drawPoint(pointer, this.currentColor);
this.pointMarkers.push(marker);
-// if(this.preMarker){
-// this.preMarker.attr({
-// fill: this.currentColor
-// });
-// }
-//
-// this.preMarker = marker;
+ // if(this.preMarker){
+ // this.preMarker.attr({
+ // fill: this.currentColor
+ // });
+ // }
+ //
+ // this.preMarker = marker;
}
},
drawROILine: function(event){
View
@@ -52,3 +52,59 @@
#graph_list a{
margin-left: 0.5em;
}
+
+
+ #next_page,
+ #pre_page,
+ #stop_animation,
+ #play_animation{
+ text-indent: -9999px;
+ float: left;
+ width: 16px;
+ height: 16px;
+ outline-style: none;
+ }
+ #animation_line{
+ -moz-box-sizing:content-box;
+ background:#BDBEBD none repeat scroll 0 0;
+ border:1px solid #5A615A;
+ font-size:0.01mm;
+ overflow:hidden;
+ position:absolute;
+ left:15.5px;
+ top: 5px;
+ width:393px;
+ height: 3px;
+ }
+ #animation_slider{
+ -moz-user-focus:normal;
+ -moz-user-select:none;
+ background-color:#E6E6E6;
+ cursor:default;
+ width: 430px;
+ height: 16px;
+ float:left;
+ margin-left: 4px;
+ position:relative;
+ }
+ #animation_handle{
+ -moz-user-select:none;
+ cursor:default;
+ background-image:url(../images/slider_handle_horizontal.png);
+ height:14px;
+ width:31px;
+ top: 1px;
+ }
+
+ #pre_page{
+ background:transparent url(../images/slider_stepleft.jpg) no-repeat scroll left top;
+ }
+ #next_page{
+ background:transparent url(../images/slider_stepright.jpg) no-repeat scroll left top;
+ }
+ #stop_animation{
+ background:transparent url(../images/slider_pause.jpg) no-repeat scroll left top;
+ }
+ #play_animation{
+ background:transparent url(../images/slider_play.jpg) no-repeat scroll left top;
+ }

0 comments on commit bd65610

Please sign in to comment.