Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
Alex Kon  
#1 Posted : Thursday, March 27, 2008 2:43:14 PM(UTC)
Alex Kon

Rank: Advanced Member

Groups: Member
Joined: 1/31/2005(UTC)
Posts: 458

Was thanked: 5 time(s) in 5 post(s)
Hi everybody,

There was a question from one of our customers - how to create "overview" window for AJAX BitmapViewer control - something like "Navigator" control in Photoshop but simpler, just to indicate which part of large image is currently displayed in the viewer.

Maybe it will be interesting for somebody else, so I posted the answer here.

The idea is very simple - place small thumbnail on the same page and handle all zoom & scroll events of the BitmapViewer to reflect viewport changes. You can find the sample project in the attachment. It was created with VS2005 and you will need to set references to GraphicsMill and AjaxControls DLLs (they were excluded from the archive to decrease its size).

Few words about implementation: in server-side code we load bitmap into the BitmapViewer control and also we create small thumbnail and put it into the AJAX controls public cache. Later it will be linked with a simple "Image" element on the page. The frame on the thumbnail is just a transparent "div" element with visible border. So all other manipulations are performed on client.

As usual - any feedback is greatly appreciated, so feel free to comment this post ;)

Edited by moderator Monday, May 28, 2012 8:36:35 PM(UTC)  | Reason: Not specified

File Attachment(s):
ImageZooming.zip (211kb) downloaded 34 time(s).
Alex Kon attached the following image(s):
resized_screenshot.png
Alex Kon  
#2 Posted : Sunday, April 6, 2008 4:32:36 PM(UTC)
Alex Kon

Rank: Advanced Member

Groups: Member
Joined: 1/31/2005(UTC)
Posts: 458

Was thanked: 5 time(s) in 5 post(s)
Hi everybody,

And here is second version of the same sample. Now it not only displays current position in overview window, but also allows user to change it by dragging frame. And we added slider-bar which changes BitmapVievew zoom, so it now looks like Photoshops's Navigator pane.

This sample uses slider-bar from AJAX controls toolkit which can be found on official Microsoft ASP.NET site.

Edited by user Sunday, April 6, 2008 4:36:34 PM(UTC)  | Reason: Not specified

File Attachment(s):
ImageZooming_v2.zip (213kb) downloaded 29 time(s).
Alex Kon attached the following image(s):
screenshot_resized.jpg
Praveen@citdigital.com  
#3 Posted : Wednesday, July 23, 2008 1:15:49 AM(UTC)
Praveen@citdigital.com

Rank: Newbie

Groups: Member
Joined: 2/7/2008(UTC)
Posts: 4

hi Alex,

1) How can i disable right click on the bitmapviewer control. i want to prevent the users right clicking on the bitmapviewer and click 'save picutre as' and get the visible portion of image.

2)Mouse drag on the overview window in firefox doesn't work. If you have any known browser issues please let me know.


Thanks
Praveen

Fedor  
#4 Posted : Monday, July 28, 2008 12:56:38 PM(UTC)
Fedor

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 7/28/2003(UTC)
Posts: 1,556

Thanks: 5 times
Was thanked: 62 time(s) in 61 post(s)
Quote:
1) How can i disable right click on the bitmapviewer control. i want to prevent the users right clicking on the bitmapviewer and click 'save picutre as' and get the visible portion of image.


You should modify _addTiles method of BitmapViewer class (BitmapViewer.js):

Code:
	_addTiles : function(s) {
		for (var z = 0; z < s.tiles.length; z++) {
			var t = s.tiles[z];

			//Add the tile
			var cl = new GraphicsMill.Rectangle(t.x, t.y, t.w, t.h);
			var wl = this.workspaceToControlRectangle(cl).round();
			wl = this.controlToContentRectangle(wl);
			var url = String.format(s.baseName, z);	
			
			var i = this._doc.createElement("img");
			i.galleryImg = "no";
			
			i.width = wl.width;
			i.height = wl.height;
			i.style.position = "absolute";
			i.style.left = wl.x + "px";
			i.style.top = wl.y + "px";
			i.display = "none";

			//i.style.borderWidth = "1px";
			//i.style.borderColor = "red";
			//i.style.borderStyle = "solid";

			i.ondrag = function() {
				return false
			};

			//NEW CODE
			i.oncontextmenu = function() {
				return false
			};
			//END NEW CODE

			this._tilesCtx.appendChild(i);

			this._tiles.push({location : cl, zoom : s.zoom, url : url, img : i});
		}
	},
Best regards,
Fedor Skvortsov
Dmitry  
#5 Posted : Tuesday, July 29, 2008 5:02:19 PM(UTC)
Dmitry

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070

Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
Hello,

To get rid of the problem with drag operation on overview window in Firefox3 you need to disable selection for frame1 element (rectangle in the overview window). Here is the code that you need to append to initialize: function() method in OverviewWindow.js:
Code:
        var r = this.get_frame();
        r.unselectable = "on";
        r.style.MozUserSelect = "none";
        r.style.cursor = "default";

I have attached the modified project to this post.

Edited by user Tuesday, July 29, 2008 5:03:14 PM(UTC)  | Reason: Not specified

File Attachment(s):
ImageZooming_v3.zip (214kb) downloaded 22 time(s).
Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.