You are viewing an archive page. Click here to go to the current Open Exhibits website.
Log-in is disabled for the archived site
Software

Software: Templates

Templates allow novices to create their own floor or Web based exhibits. Universal Modules allow more advanced developers to combine, branch, and write their own modules that can act as building blocks for new Exhibits.

Collection Viewer

Collection Viewer

First Posted: November 15, 2010
v1.2.3-beta Updated: November 27, 2011

Project Summary

The Collection Viewer is a stand-alone media viewing application. It can use any combination of the six Open Exhibits core modules (Flickr Viewer, Key Viewer, Video Viewer, YouTube Viewer, Image Viewer and GMap Viewer) to create a rich application with image, video, and mapping objects and a customizable onscreen keyboard. Module styling and content can be set via the included XML files and pulled in from flickr and YouTube if desired; no programming necessary.

ABOUT THIS CONTRIBUTOR

Profile picture for Matthew Valverde

Matthew Valverde

Lead ActionScript Developer
Open Exhibits Staff

Total Activity:  2K
Downloads:  63
Article Views:  1K
Shared:  0
Tweets:  1

Uploads:  20
Comments:  24
Favorites:  12
Likes:  1
Emails:  0

Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
Are all of the templates in Flash CS5 format or are there any CS4 versions?
Profile picture for Erin Rose
Erin Rose commented
7 years ago
All of the templates are CS5. CS4 can still be used to develop applications with Open Exhibits, but you can't publish to Flash Player 10.1, which is the only Flash Player with multitouch support.
Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
Thanks Erin. I ended up installing CS5.
Profile picture for Javier Quevedo
Javier Quevedo commented
7 years ago
I am trying to run this demo using a standard TUIO hardware. I have modified the Application.xml and selected Flosc the . I have also tried with CCV version 1.3 and version 1.4. The collection Viewer doesn't even seem to be creating the TCP socket on port 3000 or be listening to any UDP data on 3333. This is starting to get very irritating. There is no documentation, or examples that one can walkthrough, the installers create broken links, or dont include some of the frameworks. I would really appreciate some help, at least so that we can get things running. Having a nice collection of gestures has no point if nobody can get things running at first. Thank you very much.
Profile picture for Matthew Valverde
Open Exhibits Staff
7 years ago
Hello Javier, Tuio works with the Collection Viewer just fine here. Please make sure you have filled your Application.xml correctly. You can find more info about the Input Provider Setting in the "GestureWorks User Manual". Also if you are having issues with Tuio please refer to http://www.tuio.org/?software. If you have another issue with the Collection Viewer please utilize the support / Issue Tracker. Thanks, Matthew
Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
Where in the code can the initial rotation, placement and boundaries of images be edited?
Profile picture for Erin Rose
Erin Rose commented
7 years ago

Hi Mike -


I apologize for the delayed response. If you open up the Main.as file in the Image Viewer (or Flickr Viewer, etc) folder, there is a block of code that looks like this:


for(var i in objects) {

objects[i].x=Math.random()*stage.stageWidth;

objects[i].y=Math.random()*stage.stageHeight;

objects[i].rotation=Math.random()*360 }


That code sets the initial rotation and placement of the images.


Thanks!

Erin

Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
Thanks for the reply, Erin. I've seen that code in the individual viewers but not in the collection viewer?
Profile picture for Matthew Valverde
Open Exhibits Staff
7 years ago

Hello Mike,


The code for the placement and rotation of objects is in the actionscript file "CollectionViewer.as", and not in the individual modules.

The path is id/template/CollectionViewer.as or id.template.CollectionViewer.


The code begins on line 190, and looks like this:

private function addModulesToStage():void {


for (var i:int=0; i

txt.Dispose();

addChild(objects[i]);

objects[i].rotation = Math.random()*360;

objects[i].x=Math.random()*ApplicationGlobals.application.stage.stageWidth;

objects[i].y=Math.random()*ApplicationGlobals.application.stage.stageHeight;

TweenLite.to(objects[i], 2, { alpha:1}); }

objects=[];

}


Thanks, Matthew
Profile picture for Marc Matteo
Marc Matteo commented
7 years ago
Awesome. I would like to ask two things. One. Can you make the collection view not show the info and close buttons when the image is enlarged (the Image Viewer Module)? For my clients I just want them to be able to resize it. And second, I would like to have a "book viewer" that is contained in it's own box (like Flickr Module) where my clients can flip pages like a book. Can that be done? Please email me at marcanthonyphotography@comcast.net if you have any questions.
Profile picture for Erin Rose
Erin Rose commented
7 years ago

Hi Marc,


Currently the buttons can't be removed, although you can make them smaller by changing the tag in the individual module XML files that are in the Collection Viewer folder (ImageViewer.xml, VideoViewer.xml, etc). We may include this functionality in a future release of Collection Viewer.


While we love to hear ideas for new modules, we do not plan to release one with the book functionality you described anytime soon. A third-party Flash developer or other Open Exhibits participant may be interested in creating it; you can check back and see if another user has built it, or contract with another developer to create it for you.


Best of luck with your projects.

Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
Thanks for the reply, Matt. Any more information available on troubleshooting the connection with Flickr. I keep getting a 1010 error when I plug in my api key# and ID name. Flickr doesn't seem to have anymore info either.
Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
Where in the code can I add extra gestures? I would like to use the FLICK gesture and I see it in the XML file, but it doesn't seem to work? I've also tried adding it into the collectionviewer.as using the objects array.
Profile picture for Julieta Aguilera
7 years ago
This may be so obvious... I have done this before without a problem. Now I can't compile the Collection Viewer application on a new Mac machine even though it says it is standalone. It says it cannot find Application. I looked around and I noticed someone said I needed to download the open exhibits core. Fine. But the core is an exe and I am developing on a Mac. Last but not least, to write this comment I had to manually type the link that appears at the bottom of the page because the link does not work in either Firefox or Safari.
Profile picture for Julieta Aguilera
7 years ago
Ok, so I noticed the SDK link for the Mac is in small letters to the right of the screen in the SDK page. Now when compiling, Collection Viewer cannot find the various modules (Image Viewer, Video Viewer, etc) The link seems to suggest they would be in the id/module directory, however, neither the core or CollectionViewer have a module directory. The core has a "modules" directory but it does not contain what CollectionViewer is looking for.
Profile picture for Julieta Aguilera
7 years ago
I tried a different Mac to no avail. This is what I get when I try to run it. It does seem like files are missing in the zipped directory (I removed the long address). CollectionViewer.as, Line 20 1120: Access of undefined property GMapViewer. CollectionViewer.as, Line 20 1172: Definition id.module:GMapViewer could not be found. CollectionViewer.as, Line 19 1120: Access of undefined property KeyViewer. CollectionViewer.as, Line 19 1172: Definition id.module:KeyViewer could not be found. CollectionViewer.as, Line 18 1120: Access of undefined property YouTubeViewer. CollectionViewer.as, Line 18 1172: Definition id.module:YouTubeViewer could not be found. CollectionViewer.as, Line 17 1120: Access of undefined property VideoViewer. CollectionViewer.as, Line 17 1172: Definition id.module:VideoViewer could not be found. CollectionViewer.as, Line 16 1120: Access of undefined property ImageViewer. CollectionViewer.as, Line 16 1172: Definition id.module:ImageViewer could not be found. CollectionViewer.as, Line 15 1120: Access of undefined property FlickrViewer. CollectionViewer.as, Line 15 1172: Definition id.module:FlickrViewer could not be found.
Profile picture for Charles Veasey
Charles Veasey commented
Open Exhibits Staff
7 years ago
It seems that the libraries aren't being found. What program are you using to compile (Flash, Flash Builder, Flash Develop, etc.)?
Profile picture for Charles Veasey
Charles Veasey commented
Open Exhibits Staff
7 years ago
I'm copying you on a thread under the forum section. Someone else was having a similar issue. I wrote: Sorry you are having troubles. Did you install the latest SDK? Can you tell me what operating system you are using? I'm wondering if our installer is set up correctly. Basically the installer copies the neccessary files into the default libraries directory for the Flash IDE. The library files can actually be located anywhere, but then you have to manually include them into your currect project. The way you do that is to go into Flash's ActionScript Settings and under the Library Path tab add these two files to your library:
1. openexhibitsCore.swc
2. touchComponents.swc

This should get you going for now. Thanks for bringing this to our attention.
Profile picture for Julieta Aguilera
7 years ago
hi, I could not see posts in the forum on the collection viewer so I posted what I had posted here. I also sent you an email. Yes, the libraries cannot be found, even if I manually add the action script files to the library...
Profile picture for Matthew Valverde
Open Exhibits Staff
7 years ago

Hello Julieta,

Thanks for your patience and sorry for the confusion about the libraries.

I have fixed the library linkages and updated the CollectionViewer.

Please download this new version.

Thanks

Profile picture for Julieta Aguilera
7 years ago
Thank you so much Matthew! It works great :)
Profile picture for Julieta Aguilera
7 years ago

hi, I am trying to change the ratio of the movie size. Right now they are 4:3, I think, and I have wider movie formats. From what I can tell the xml file normalizes to a width value:

<imagesNormalize>500</imagesNormalize><!-- Sets the full size as an absolute pixel width; the height of the images are adjusted accordingly -->

Is there a way I can adjust them my way instead of "accordingly"?

thanks!

Profile picture for Charles Veasey
Charles Veasey commented
Open Exhibits Staff
7 years ago
Hi Julieta,

Can you tell me the format of your video files?
Profile picture for Julieta Aguilera
7 years ago

They are 960x540 .flv files. They play fine, just squeezed width-wise...

Profile picture for Charles Veasey
Charles Veasey commented
Open Exhibits Staff
7 years ago
First, I suggest using FV4 video instead of FLV. FV4 uses H.264 encoding, while FLV uses On2 Vp6. H.264 (FV4) will almost always provide better compression qualities at lower file sizes.

Second, your pixels should be square. Flash won't render DV widescreen pixels (1.21) correctly. In this case you have to convert pixel size and adjust aspect ratio accordingly.

Your video has a 16:9 aspect ratio, and you are right the video viewer is not configured to display 16:9 widescreen videos properly.

I've altered the VideoLoader class so that it defaults to 960x540. Therefore it will display 16:9 correctly. Use scale to adjust the size. Later we will update the module to support 16:9, but for now just replace the VideoLoader with the following:

package id.element
{
	import id.core.TouchComponent;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;
	import id.component.ControlBtns;
	import flash.events.Event;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.events.NetStatusEvent;

	/**
	 * This is the VideoLoader class.
	 * 
	 * @langversion 3.0
	 * @playerversion AIR 2
	 * @playerversion Flash 10
	 * @playerversion Flash Lite 4
	 * @productversion GestureWorks 2.0
	 */
	public class VideoLoader extends TouchComponent
	{
		public static var TIME:String = "Time";
		private var nc:NetConnection;
		public var timer:Timer;
		public var ns:NetStream;
		private var video:Video;
		private var _width:Number;
		private var _height:Number;
		private var _url:String;
		private var _scale:Number=1;
		private var videoObject:Object;
		private var _timerFormated:String="00:00";
		public var timerUpdate:Boolean;
		private var count:int;
		public var _pixels:Number;	

		
		public function VideoLoader()
		{
			super();
		}

		override public function Dispose():void
		{
			timer.stop();
			
			timer.removeEventListener(TimerEvent.TIMER, updateDisplay);
			timer=null;
			
			ns.close();
			ns = null;
			
			if (parent)
			{
				parent.removeChild(this);
			}
		}
		
		public function get pixels():Number
		{
			return _pixels;
		}
		public function set pixels(value:Number):void
		{
			_pixels=value;
		}

		public function get url():String
		{
			return _url;
		}
		public function set url(value:String):void
		{
			_url=value;
			createUI();
			commitUI();
		}

		public function get scale():Number
		{
			return _scale;
		}
		public function set scale(value:Number):void
		{
			_scale=value;
		}

		public function get time():String
		{
			return _timerFormated;
		}
		
		override protected function createUI():void
		{
			videoObject = new Object();
			timer=new Timer(10);
			timer.addEventListener(TimerEvent.TIMER, updateDisplay);
		}

		override protected function commitUI():void
		{
			var customClient:Object = new Object();

			nc=new NetConnection();
			nc.connect(null);
			ns=new NetStream(nc);
			video=new Video(960, 540);
			video.attachNetStream(ns);

			customClient.onMetaData=metaDataHandler;

			ns.client=customClient;
			ns.play(_url);
			ns.pause();
			ns.seek(0);

			addChild(video);

			video.width*=scale;
			video.height*=scale;
			width=video.width;
			height=video.height;

			ns.addEventListener(NetStatusEvent.NET_STATUS,onVideoStatus);
		}
		
		override protected function layoutUI():void
		{
		}
		override protected function updateUI():void
		{
		}

		private function metaDataHandler(info:Object):void
		{			
		
			videoObject=info;

			count++;

			if (count==2)
			{			
				super.layoutUI();
			}
		}

		public function play():void
		{
			ns.resume();
			timer.start();
		}

		public function pause():void
		{
			ns.pause();
			timer.stop();
		}

		public function back():void
		{
			timer.stop();
			ns.seek(0);
			ns.pause();
		}
		
		public function forward():void
		{
			ns.seek(ns.time+2);
			var stringForward:String=formatTime(ns.time+2);
			sendUpdate(stringForward);
		}
		
		private function onVideoStatus(evt:Object):void
		{
			if (evt.info.code=="NetStream.Play.Start")
			{
				/*if (parent is TouchComponent)
				{
					var par:TouchComponent=TouchComponent(parent);
					par.layoutUI();
					par.visible=true;
				}*/
			}
			if (evt.info.code=="NetStream.Seek.Notify")
			{
				sendUpdate("00:00");
			}
			if (evt.info.code=="NetStream.Play.Stop")
			{
				back();
				sendUpdate("00:00");
			}
		}

		private function updateDisplay(event:TimerEvent):void
		{
			var string:String=formatTime(ns.time);
			sendUpdate(string);
		}

		private function sendUpdate(string:String):void
		{
			_timerFormated=string;
			dispatchEvent(new Event(VideoLoader.TIME, true, true));
		}

		private function formatTime(t:int):String
		{
			var s:int=Math.round(t);
			var m:int=0;
			if (s>0)
			{
				while (s > 59)
				{
					m++;
					s-=60;
				}
				return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
				//return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
			}
			else
			{
				return "00:00";
			}
		}

	}
}
Profile picture for Julieta Aguilera
7 years ago
Thankyou so much Charles! I appreciate you make this available for the time being!
Profile picture for Charles Veasey
Charles Veasey commented
Open Exhibits Staff
7 years ago
I've just noticed a problem in the code and have altered my last post. Please update.
Profile picture for Sonia McMahon
Sonia McMahon commented
7 years ago

Hi.

I really need to be able to change the font (buttons and text in back). Is it possible? How would I go about it?

Thanks for your help.

 



Summary

 

The CollectionViewer is a Template that uses a collection of Modules to load various types of media

and display the content on stage in the form of interactive windows. Media can be dynamically

displayed from local bitmap and video files and streamed via Youtube, Flickr or Google Maps.

All videos have custom touch buttons controls, map windows have targeted 3D gesture control

and metadata for media windows can be dynamically displayed along with thumbnail images and

QR images. Each window object can be manipulated using the TAP, DRAG, SCALE, ROTATE

multitouch gestures. All multitouch gestures can be activated and deactivated using the module

XML settings.

 

Features

Loads Flickr and YouTube.

Loads local Images and Videos.

Loads Google maps viewer module.

Loads KeyBoard module.

Example Code

Using this

package 
{
	import id.core.Application;
	import id.core.ApplicationGlobals;
	import id.template.CollectionViewer;
	
	public class Main extends Application
	{		
		public function Main()
		{
			settingsPath="Application.xml";
		}

		override protected function initialize():void
		{
			stage.frameRate=ApplicationGlobals.dataManager.data.Template.FrameRate;
			
			var collectionViewer:CollectionViewer = new CollectionViewer();
			addChild(collectionViewer);
		}
	}
}

Properties and Customization

Included XML tags and functions:

Name Description Notes
FrameRate Sets the frame rate for the entire application Default @ 60.
background Sets background image for application. jpeg or png
module A list of modules to be included in the template. For a new module to appear in the template, it must have been compiled into the source.
mouseHide Hides mouse. Default @ true.

Included AS3 Classes and customization:

Name Superclass Notes
CollectionViewer TouchComponent
Name Type Description Notes
id int Access the identification number for each object added to the stage
loadingTime loadingTime loadingTime
moduleName moduleName moduleName
Name Description Notes
createUI()
createUI()
layoutUI()
updateUI()
Name Description Notes

This material is based upon work supported by the National Science Foundation under Grant Number Division of Research on Learning in formal and informal settings #1010028. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the authors and do not necessarily reflect the views of the National Science Foundation.


Open Exhibits was developed by Ideum, makers of GestureWorks. Open Exhibits SDK is free for non-commercial use.

Connect
YouTube Twitter Flickr