User Tools

Site Tools


imageviewer

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

imageviewer [2015/09/18 13:48] (current)
glass created
Line 1: Line 1:
 +====== ImageViewer ======
  
 +The ImageViewer is a component that is primarily meant to display an Image on the front side and meta-data on the back side.
 +
 +{| style="​float:​right;​margin:​0 0 30px 20px;"
 +|+ An image viewer with a frame and interactive buttons.
 +|-
 +|{{:​oeimageviewer.jpg?​nolink&​325|ImageViewer screenshot}}
 +|}
 +
 +{| class="​wikitable"​
 +!
 +Characteristic
 +!
 +Definition
 +|-
 +| Type || Interactive Display Object
 +|-
 +| Category || Component
 +|-
 +| Scope || Local
 +|-
 +| Position || *
 +|-
 +| Parents || Container
 +|-
 +| Children || *
 +|-
 +| Gestures || *
 +|-
 +| Requirements || The nesting structure and class attributes must match the example below.
 +|}
 +
 +
 +{| class="​wikitable"​
 +!
 +Attribute
 +!
 +Type
 +!
 +Description
 +|-
 +|image || object reference ​ || the [[image]] element
 +|}
 +
 +See Also: [[Display Attributes]]
 +
 +<​code:​csharp linenums:​1>​
 +<​ImageViewer id="​image-viewer-1"​ x="​700"​ y="​120"​ rotation="​10">​
 +    <​TouchContainer id="​tc_img1"​ class="​image_container"​ visible="​true"​ targetParent="​true"​ mouseChildren="​false">​
 +        <Image id="​img1"​ class="​image_element"​ src="​images/​train.jpg"​ scale="​.4"/>​
 +    </​TouchContainer>​
 +
 +    <!-- Info panel container (back). -->
 +    <​TouchContainer id="​image_info"​ class="​info_container"​ visible="​false"​ targetParent="​true"​ mouseChildren="​false"​ >
 +        <Graphic color="​0x6699FF"​ alpha="​0.6"​ lineStroke="​0"​ class="​info_bg"​ shape="​rectangle"/>​
 +        <Text id="​title"​ class="​title"​ border="​false"​ selectable="​false"​ text="​The Gare Montparnasse"/>​
 +        <Text id="​description"​ x="​10"​ width="​580"​ wordWrap="​true"​ color="​0xFFFFFF"​ class="​info_description"​ selectable="​false"​ text="​The Gare Montparnasse became famous for the derailment on 22 October 1895 of the Granville–Paris Express, which overran the buffer stop."/>​
 +    </​TouchContainer>​
 +
 +    <!-- This is just the frame for the whole viewer. Thick frames are very useful for objects with context-specific touch, as it gives a touchable border. The ImageViewer does not have context specific touch, so feel free to style it however you like. -->
 +    <​TouchContainer id="​frame-c"​ class="​frame_container"​ visible="​true"​ targetParent="​true"​ mouseChildren="​false">​
 +        <Frame frameColor="​0x999999"​ frameAlpha="​0.3"​ frameThickness="​30"​ frameShape="​rectangle"​ class="​frame_element"/>​
 +    </​TouchContainer>​
 +
 +    <!-- Here is where the menu is structured.-->​
 +    <Menu id="​menu-1"​ class="​menu_container"​ x="​0"​ y="​0"​ alpha="​0.6"​ position="​bottomRight"​ paddingLeft="​0"​ paddingBottom="​-50"​ paddingRight="​20"​ autoHide="​true"​ visible="​false">​
 +        <Button id="​info-btn"​ class="​info_btn"​ dispatch="​down:​info"​ hit="​info-hit"​ initial="​info-up"​ down="​info-down"​ up="​info-up"​ out="​info-up">​
 +            <​Container id="​info-up">​
 +                <Graphic alpha="​1"​ shape="​circle"​ radius="​20"​ lineStroke="​1.5"​ color="​0x282E33"​ />
 +                <SWF alpha="​1"​ x="​15"​ y="​8"​ color="​0xFFFFFF"​ scale="​1.6"​ classRef="​org.openexhibits.assets.Info"​ />
 +            </​Container>​
 +            <​Container id="​info-down">​
 +                <Graphic id="​info-bg-down"​ shape="​circle"​ radius="​20"​ lineStroke="​1.5"​ color="​0x495E67"​ />
 +                <SWF alpha="​1"​ x="​15"​ y="​8"​ color="​0xCCCCCC"​ scale="​1.6"​ classRef="​org.openexhibits.assets.Info"​ />
 +            </​Container>​
 +            <​Container id="​info-hit">​
 +                <Graphic id="​info-hit-bg"​ shape="​circle"​ radius="​20"​ color="​0x666666"​ alpha="​0"​ />
 +            </​Container>​
 +        </​Button>​
 +        <Button id="​close-btn"​ class="​close_btn"​ dispatch="​down:​close"​ hit="​close-hit"​ initial="​close-up"​ down="​close-down"​ up="​close-up"​ out="​close-up">​
 +            <​Container id="​close-up"​ class="​up"​ >
 +                <Graphic alpha="​1"​ shape="​circle"​ radius="​20"​ lineStroke="​1.5"​ color="​0x282E33"​ />
 +                <SWF alpha="​1"​ x="​11"​ y="​11"​ color="​0xFFFFFF"​ scale="​1.6"​ classRef="​org.openexhibits.assets.Close"/>​
 +            </​Container>​
 +            <​Container id="​close-down"​ class="​down">​
 +                <Graphic alpha="​1"​ shape="​circle"​ radius="​20"​ lineStroke="​1.5"​ color="​0x495E67"​ />
 +                <SWF alpha="​1"​ x="​11"​ y="​11"​ color="​0xCCCCCC"​ scale="​1.6"​ classRef="​org.openexhibits.assets.Close"​ />
 +            </​Container>​
 +            <​Container id="​close-hit"​ class="​hit">​
 +                <Graphic id="​close-hit-bg"​ shape="​circle"​ radius="​20"​ alpha="​0"​ />
 +            </​Container>​
 +        </​Button>​
 +    </​Menu>​
 +    <​GestureList>​
 +        <Gesture ref="​n-drag"​ gestureOn="​true"/>​
 +        <Gesture ref="​n-scale"​ gestureOn="​true"/>​
 +        <Gesture ref="​n-rotate"​ gestureOn="​true"/>​
 +    </​GestureList>​
 +</​ImageViewer>​
 +</​code>​
imageviewer.txt · Last modified: 2015/09/18 13:48 by glass