SilverlightOnly Show your photos with hotspots in style Home   Contents

Silverlight  Hotspot Editor

Get Microsoft Silverlight


Overview

The Editor is used to name, position, copy and delete hotspots and also to create contour hotspots. Hotspot's visual elements are built separately, outside the Editor. These visual elements are coded in XAML, which is an XML-based language by Microsoft. It includes controls (TextBox, ComboBox, CheckBox, RadioButton, Grid, etc.), shapes (Ellipse, Line, Path, Polygon, Polyline), path geometries, images, text, animations, video and more. The natural design environment for XAML is Expression Blend, but you can also use XamlPad or any text editor to build XAML elements.

Commands and Usage

      You can also view these commands by clicking button "Help" in the Editor menu.
Switch to FullScreen and back with double-click.
Load local or remote XML hotspot file. Load also local or remote JPEG files, with or without embedded hotspots.
Save to a local XML file, or JPG file with embedded hotspots (XML content limited to 65KB). You can always save to XML, but only save to a JPG you loaded.
Move around the image with mouse or arrow keys.
Zoom with mouse-wheel or keys PageUp and PageDown

The Editor has two modes - Edit and Test.
Edit Mode - to add, delete, edit, copy and move hotspots
Add New: first select a hotspot type (default, contour, ellipse, rectangle or image) by pressing one of the small buttons, then click on your image to place it.
A new contour can include both straight and curved lines. Click and release to start. A red line will follow your mouse movement. Click again on the starting position to finish by closing the contour.
You can begin a straight line anywhere in the contour - hold down the Shift key, click and release the mouse button. End the straight line by releasing the Shift key and clicking. Cancel a contour by clicking anywhere except the starting position.
You can cancel ellipse and rectangle hotspots by clicking the starting position again.
Select: click on a hotspot - a rotating yellow marker confirms the selection
Edit: on select, the menu will show current parameter values, you can then edit them.
Delete: select and hit button Delete (or key 'Delete' if enabled)
Copy: select a hotspot, copy with keys Ctrl / C, then paste with Ctrl / V
Move a hotspot - click to select and hold, then drag and drop to new location
Test Mode - to test hotspot's events Enter, Leave and Click.

Miscellaneous
The Editor currently supports only JPEG panorama images and only parameters Zoom and LookAt are recognized.
You can load remote (ex: http://silverlightonly.com/gdlp13.xml) or local (ex: http://localhost/your.xml) XML files. When working with remote files, you need to have (or add) file crossdomain.xml in the website root.
Editor will save files locally. XML files contain a reference to the loaded panorama file. A JPEG output file is the originally loaded JPEG file with hotspots embedded in it.
You can click on a hotspot to edit it. Its name will appear in the Name box. Edited values are applied instantly. Hotspot events Enter and Click are disabled in Edit Mode.


Example 1 - add a simple hotspot

  1. Hit menu button "Load", a standard open-file dialog appears
  2. Copy a valid image URL, like http://www.nadula.info/images/Wallpapers/NatureWide/Nature025.jpg, and paste it in the "File name" box
  3. Hit button "Open" - photo will load in the Editor
  4. Click button "Edit" to switch to Edit Mode and start adding simple hotspots
  5. Select the hotspot type with button "Default". Click anywhere on the image to place it. A green circle hotspot will show up. A yellow rotating marker confirms that this is your current hotspot.
  6. Select option button "Web" and copy/paste this http://www.mountainmancountry.com (or another) URL in the "Click" box below.
  7. Click button "Test" to switch to Test Mode
  8. Click on the green circle hotspot and see how the selected URL opens in the browser
  9. To save, click on button "XML" - a new box appears "Enter JPEG URL" where you should copy/paste again the URL from step 2.
  10. Finally click on button "XML" again to save the XML file on your computer

Example 2 - add a contour hotspot

  1. Follow steps 1 to 4 from Example 1, or continue if image is already loaded and Edit Mode is activated
  2. Select the hotspot type with button "contour". Click anywhere on the image and release the mouse button. A small yellow circle is the starting point of your contour. If you begin holding down the Shift key before clicking, you may draw a polyline instead of a curved contour.
  3. Move the mouse "drawing" your contour with red color. Finish by clicking again in the yellow circle - the contour is filled with green color. If you click anywhere else, the contour is cancelled (except when you have started a polyline).
  4. Select bottom option "Xml" and copy/paste this URL http://silverlightonly.com/gdlp13.xaml in the "Click" box below.
  5. Click button "Test" to switch to Test Mode
  6. Hit upper button "XML" and save the XML file on your computer
  7. Click on your contour hotspot and see how another panorama opens in the Editor
  8. Hit button "Load" and select your saved XML file to open it again

Test and share hotspot-enabled panoramas

Once you have your XML file(s) saved, you can test it also with the Pro Viewer. Due to Issue #1 (below), loading files from http://localhost won't work, but loading from a public website will. So, copy the XML files to your public website, add a crossdomain.xml (at the root), and you'll be able to manually load XMLs in the Pro Viewer (like http://yoursite.net/your.xml). And even share them with others through our viewer page - http://www.silverlightonly.com/hotview1.htm?http://yoursite.net/your.xml.

Known issues