VisualEyes

setdot(displayID, bandNum, dotNum, field, value)

This method will set a field (attribute) of a <dot> element within an element that uses dots, such as paths, timeviews, concept and picture maps. This is useful for highlighting a particular dot by changing it’s color or size. The displayID is the id name of the display containing the dot to change, the bandNum sets which band to the dots are in if a timeview (the first band is 0), the dotNum is the index number of the dot to change (starting with 0), the field is the name of the attribute to change (i.e. x, y, col, wid, etc.) and value is the value to set that dot’s field to.

We’ve added a new kind of concept map that uses pictures that can be rolled over and clicked on to call <glue> scripts. Picture maps are very similar to radial concept maps, but the pictures are not structured around a circle, but are placed by setting the dot x and y attributes where you want them. You can add a background image by setting the backImg attribute to an image’s url. The <frame> specifies the extent of the map with the usual background and frame color options.

 With the <pmap> element, <dot> elements are added that will show up in the frame.  As your mouse glides over one of the dots, it will go from the transparency you set in the [pmap]‘s alpha attribute to full visible as you near the center of the image.

 <pmap  id=”topMap” backImg=”arch.jpg” alpha=”20″>
            <frame left=”4″ top=”20″ wid=”792″ hgt=”492″ corner=”8″ />
            <textFormat col=”0×006600″ size=”11″ font=”_sans” bold=”true” />
            <dot style=”leaf.gif” wid=”120″ glue=”showBot” x=”400″ y=”300″ />
            <dot style=”tearoom.jpg” lab=”Dining room” wid=”80″ labelPos=”bot” frameWid=”3″ frameCol=”0xffffff” x=”200″ y=”300″ />
</pmap>

 There is a working example where one picture map calls up a second as you click on one of the embedded dots, ultimately pulling up an <infobox> about the

http://www.viseyes.org/show/?id=51989

You can easily add a blank table as a resource item as follows:

 <resource src=”name,age,sex” id=”myTable”/>

This will create a new table resource called “myTable” with 3 fields, “name”, “age”, and “sex”. Rows of data can be added using the table() method within a glue element script,

 table() method

 table(action, tableID, row, field, value)

 This method will modify the contents of a table resource. There are a number of actions you can do to the table, controlled by setting the action parameter.

Set the tableID to the table to change, the row number (starting at 0). Setting the action to set allows you to set a single value in the table. Set the tableID to the table to change, the row number (starting at 0), the field name, and the value to set it to. You can add a row using the addrow action. If you put in -1 as the row number, it will add a new row. The field parameter should be a list of field values you want to add. Remember to put a 0 in the value parameter for this action.

You can dynamically show .KML and KMZ Google Earth files in a browser page by using the link() glue method and calling the kml.php file as the url. To call a Google Earth file from a glue script, add a link() method to the script. The link() method has two primary parts, the url and the target.

The url consists of 2 required and one option parts to it: 1) the KML web page: http://www.viseyes.org/kml.php, 2) the url of the KMZ or KML file: ?url=http://…

and optionally 3) display option letter: &show=xxx.

There are a number of options we can set by adding letters in place of the x’s :

r          Show the roads
b          Show country/state borders
t           Show terrain
3          Show 3D buildings (if any)
s           Show status bar on bottom with lat/lon
l           Show scale legend

Target sets where the page will open, which can be set to the frame’s name or the preset values of _blank, _self, _parent, or _overlay (which opens an iFrame over the screen area.

For example, if we wanted to show the following KMZ file at http://www.viseyes.org/map.kmz, in an overlay window,the url would be:

link(http://www.viseyes.org/kml.php?url=http://www.viseyes.org/map.kmz,_overlay)

If we wanted to show roads and the scale in a new brower page:

link(http://www.viseyes.org/kml.php?url=http://www.viseyes.org/map.kmz&show=rl,_blank)

 (NOTE: you will need to have the Google Earth Plug-in installed on your web browser, from http://earth.google.com/plugin)

You can now link to YouTube videos in addition to FLV files. Instead of putting the URL to an .flv file, put the YouTube movie id, such as “SzSwnbxb9TY” as the src attribute. You can find the movie id by looking at the video’s URL and copyingthe part after “v=” and before a “&” or the end, i.e http://www.youtube.com/watch?v=SzSwnbxb9TY would yield “SzSwnbxb9TY”:

 <resource autoPlay=”true” src=”SzSwnbxb9TY” id=”myMovie” end=”600000″ type=”movie”>
   <frame backCol=”0×999999″ top=”100″ left=”100″ corner=”4″ hgt=”240″ wid=”320″ />
  </resource>
  <glue from=”myMovie” init=”true” />

Besides being able to pull up an website in a new browser window by clicking on a link in infoBox and docViewer items, you can now call a glue item to do something within VisualEyes:

The link(url,text) maco will add a link to url when the text in the parentheses is clicked. If the url starts with http://, a new browser window will open and display the page, otherwise, VisualEyes assumes it is the name of a item and calls that item.

The magnifier style widget will put magnified area of the screen atop a an image resource and let you drag it around as you would a real magnifying glass. Use the same image in the src attribute as the base image you want to magnify.

 A <frame> item set the size and color of the frame and the top and left attributes set its initial screen position. Clicking on the “+” and “-” on the handle scale the zoom up and down.

See the “Appraisals” tab in the Vinegar Hill project to see on in action.

Example:

<resource type="widget" style="magnifier" id="myMag" src="http://mypic.jpg">
    <frame wid="100" hgt="60" corner="20" top="100" left="200" frameCol="0x000099" frameWid="4"/>
</resource>
<glue init="true" from="myMag"/>

There are two kinds of undo in VisEdit.

1. When editing in the Main Tree View, you can click on the Undo item in the Edit menu to go back to a previous step. This works similarly as in programs like Microsoft Word. You can go back to your last 100 actions. Selecting the Redo item in the Edit menu will “undo” the undo.

2. In the XML Edit View, you can undo the last 32 keyboard actions by hitting the Ctrl-Z key. This key is also available when editing <glue> and <infoBox> script areas.

The Timeline object can now be rendered as a 3D cylinder, as well as flat. Setting the rot attribute will set the angle of the cylinder from 0-45, with 0 being flat. This option may or not be useful in projects, but the ability to texture map images in 3D will surely find its was into many useful widgets. You will need version 10 or higher of the Flash player.

I put up an interactive version of it here: http://www.viseyes.org/show?id=55336 You can find the script to it underneath the visualization by clicking on the “XML document for this project” link.

Some people complained that the default method of scrolling to other pages in Information Boxes (the 3 dots on the top and bottom of the text) was too obscure, so a new attribute has been added to put more traditional scroll bars up when the text exceeds the page height.

Setting the scroller attribute to “true” will show a scroll bar on the right side of the text. You can drag the green bar to slide the text, or click above or below the slider to scroll up or down one page.

In both modes, the mouse scroll wheel will also scroll the text.

A TimeView is a display that shows events that are timed to occur at particular dates. It is similar to a traditional graphic timeline like MIT’s Simile. A timeview item can have any number of bands, each one having it’s own time scale, allowing you to show events that occur in vastly different time scales, such as decades, years and days. All the bands are linked, so scrolling one, scrolls the others.

The bands are made up of individual events, each with a date, a label, an icon type, etc, just like dots are used in the path and cmap (concept map) displays:

<resource dateSize=”12″ min=”1800″ max=”1820″ close=”true”
   backImg=”greyparchment.jpg” title=”A TimeView” subtitle=”A new way to see time”>
    <frame wid=”600″ frameWid=”1″ corner=”8″ left=”100″ top=”100″ backCol=”0×9999999″ />
 

   <band hgt=”100″ tickWid=”1″  corner=”9″ backImg=”WatchPan.jpg” ratio=”25″ 
        <dot style=”cir” wid=”8″ date=”1803″  labelPos=”right” lab=”Marbury” y=”60″ />
    </band>
    <band hgt=”100″ tickWid=”1″ col=”0×990000″ corner=”9″ ratio=”50″ tickDatePos=”bot”>
        <dot style=”but” wid=”100″ hgt=”16″  date=”1801″ end=”1809″ lab=”Jefferson” y=”30″ />
        <dot style=”but” wid=”100″ hgt=”16″ date=”1809″ end=”1817″ lab=”Madison” y=”60″ />
        <dot style=”but” wid=”100″ hgt=”16″ date=”1817″ end=”1821″  lab=”Monroe” y=”30″ />
        <dot style=”cir” wid=”8″ date=”1803 labelPos=”right” lab=”Marbury vs. Madison” y=”60″ />
        <dot style=”icon:document” wid=”15″ date=”1806″ labelPos=”bot” lab=”Letter to Madison” y=”50″ />
        <dot style=”cir” wid=”8″ date=”1811″ labelPos=”right” lab=”Battle of Tippecanoe” y=”30″ />
    </band>

    <band hgt=”25″ tickWid=”1″ col=”0xffffff” corner=”9″ ratio=”100″ tickDatePos=”bot”" />

</resource>

<glue init=”true” from=”myTimeview” />

You can specify dot coordinates in longitude and latitude, instead of specifying  the coordinates in x and y pixel values. This makes it easier to use locations from Google Maps and other GIS-aware applications. To do this, we need geo-rectify the map that the dots will be placed over to correlate the longitude and latitude values to their position on the map or image.  

NOTE:  The longittude and latitude needs to be expressed as decimal values, not degrees and minutes (i.e -52.456432 vs.  52 40″ 23″)

1. Choose two points on the map, one in the upper left corner, and one in the bottom right.
2. Get the pixel position for each point by clicking on the point and pressing the “Alt” key when viewing the project. The screen position will appear in the bottom right of the screen.
3. Find the latitude and longitude and for each point. The longitude (a negative number for US locations).
4. Add 4 new attributes to the image or map item, matching a pixel value to a geo coordinate, separated by a colon. The gl is the left side, gr the right side, gt the top, and gb the bottom  (i.e. gl=”49:-78.500488″ gt=”41:38.041771″ gr=”759:-78.46872″ gb=”460:38.027124″).
5. You can now specify the dots x and y attribute in longitude and latitude coordinates (i.e. x=”-78.500488″ y=”38.027124).
6. In the path item, add an attribute called res to tell the path to rectify the dots the base resource you added the gl/gt/gb/gr attributes to (i.e. res=”myMap”).

InfoBoxes can be subdivided into multiple tabbed pages, to make it easier to display larger amounts of information in a smaller space. Each section has its text divided by a header() tag. The name with the tag’s parenthesis will show up in the tab. For example:

<resource position=”south” tail=”solid”>
       <frame backCol=”0xFFCC33″ corner=”6″ hgt=”200″ wid=”160″ />
       header(Info)This is information within the b(first) tab
       header(Pict)This is information within the b(second)tab with a  picture of James Smithson
       img(http://www.viseyes.org/smithson/sm-icon-tran.gif)
       header(Data)This is information within the b(third) tab
</resource>

There are a number of icons that can be used on dots and markers. By adding icon: to the name (i.e. icon:comment) they can be used as vectorbased artwork. They can be scaled up and down by setting the wid attribute to the desired width, and rotated any angle using the rot attribute.

If you think of any icons that would be useful for your projects, please let me know by commenting to this post.

You can now import CSV (comma space delimited) data files in VisEdit. This is a better choice than importing tabbed files because a CSV file will open as directly  a spreadsheet in Excel, while tabbed files need to be imported before showing up in Excel.