1. App Creation Studio
  2. Preguntas
0
En revisión

Displaying Large Graphics with Zoom

dpotter05 hace 11 años • actualizado por icahill (Administrator) hace 11 años • 10
I'm trying to build an app that allows users to select from a menu of large images for them to view and zoom.  So far I've been able to create this functionality for the android version by having menu clicks swap in new sources for the main image.  It works as long as the images are taller than they are wide.

For the iOS version though I've been having much more difficulty.  With the image source swapping method the original image looks fine but every image after that that is swapped in is displayed with distorted dimensions (squished vertically), including the original image its source is swapped back in.

I've tried displaying the large images in a panel and then having menu clicks hide/reveal different panels but nothing I've tried in this area has worked.  If the panel appears lower in the wire its graphic will display and zoom fine, but if it's behind any of the other panels in the wire containing large images then it will show up but it can't be zoomed.  I've tried hiding the offending panels by setting their alphas to zero, I've tried moving the panels far off screen, and I've tried unloading the images and also unloading the containing panels.  No matter what, if a panel A has a panel appearing after it in the wire code then I won't be able to zoom the large image in panel A.

Any ideas?  Either with how to solve the panel over panel zooming issue or with how to solve the image source swapping distorted dimensions issue?

David
En revisión
icahill (Administrator) hace 11 años
Have you tried using the ignoretouches attribute on panels that you don't want to zoom? 
dpotter05 hace 11 años
It's not that there are panels I don't to zoom, it's that there are panels I want to zoom but they won't.  If I have one panel set to zoom then it seems there is nothing I can do in the iOS version to reveal another panel and have it be able to zoom.
icahill (Administrator) hace 11 años
David, 

Could you post a small sample wire so I can get an idea of what you are seeing? 

Thanks.
dpotter05 hace 11 años
Sure, this first example is trying to make the switch via toggling the panels' alpha settings.  In the example, when you press the menu icon in the upper right the map image will switch back and forth between map01.gif and map02.gif.  The first map zooms and the second does not.  If you change the order of the panels so that map02.gif is listed last then it will zoom and map01.gif will not.  It seems in Wire only one graphic can be set to zoom.

<wire name="testAlphaToggle">
<main>

<!-- Background -->
<panel name="bg" width="100%" height="100%" background="#a0c4ee">
</panel>

<!-- Maps display here -->

<panel name="map02" alias="MAP02" width="100%" height="1136" lheight="100%" zoomable="yes" draggable="yes" zoommin="1" zoommax="60" alpha="0">
<image name="map02IMG" alias="MAP02IMG" source="map02.gif" width="100%" ypos="40" lypos="0" lwidth="480"></image>
</panel>

<panel name="map01" alias="MAP01" width="100%" height="1136" lheight="100%" zoomable="yes" draggable="yes" zoommin="1" zoommax="60" alpha="1">
<image name="map01IMG" alias="MAP01IMG" source="map01.gif" width="100%" ypos="40" lypos="0" lwidth="480"></image>
</panel>

<!-- Header -->
<panel name="header" alias="HEADER" width="100%" height="40" background="#1d54e5" ypos="0" lypos="-5000">
<image name="showMap01" alias="SHOWMAP01" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="0" onclick="showMap01"></image>
<image name="showMap02" alias="SHOWMAP02" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="1" onclick="showMap02"></image>

</panel>

</main>
<actions>
<action name="showMap01">
<alpha value="0" target="MAP02" />
<alpha value="1" target="MAP01" />
<alpha value="0" target="SHOWMAP01" />
<alpha value="1" target="SHOWMAP02" />
</action>

<action name="showMap02">
<alpha value="0" target="MAP01" />
<alpha value="1" target="MAP02" />
<alpha value="0" target="SHOWMAP02" />
<alpha value="1" target="SHOWMAP01" />
</action>

</actions>
</wire>
dpotter05 hace 11 años
To toggle the panels, if instead of changing their alpha settings you use the translate action you get a negative result as well.  In this example the map02.gif panel is declared first followed by map01.gif.  map01.gif is zoomable and when map02.gif is revealed, by moving the map01 panel off screen, map02.gif is not zoomable.  If you do try to pinch zoom it map01.gif will pop back onto the screen.

<wire name="testTranslateToggle">
<main>

<!-- Background -->
<panel name="bg" width="100%" height="100%" background="#a0c4ee">
</panel>

<!-- Maps display here -->

<panel name="map02" alias="MAP02" width="100%" height="1136" lheight="100%" zoomable="yes" draggable="yes" zoommin="1" zoommax="60" alpha="1">
<image name="map02IMG" alias="MAP02IMG" source="A2.00.05.Z3.02.gif" width="100%" ypos="40" lypos="0" lwidth="480"></image>
</panel>

<panel name="map01" alias="MAP01" width="100%" height="1136" lheight="100%" zoomable="yes" draggable="yes" zoommin="1" zoommax="60" alpha="1">
<image name="map01IMG" alias="MAP01IMG" source="00.00.Choose.Area.Z3.01.gif" width="100%" ypos="40" lypos="0" lwidth="480"></image>
</panel>

<!-- Header -->

<panel name="header" alias="HEADER" width="100%" height="40" background="#1d54e5" ypos="0" lypos="-5000">
<image name="showMap01" alias="SHOWMAP01" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="0" onclick="showMap01"></image>
<image name="showMap02" alias="SHOWMAP02" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="1" onclick="showMap02"></image>
</panel>

</main>

<actions>

<action name="showMap01">
<translate xpos="0" time="0" target="MAP01"/>
<alpha value="0" target="SHOWMAP01" />
<alpha value="1" target="SHOWMAP02" />
</action>

<action name="showMap02">
<translate xpos="-5000" time="0" target="MAP01"/>
<alpha value="1" target="SHOWMAP01" />
<alpha value="0" target="SHOWMAP02" />

</action>

</actions>
</wire>
dpotter05 hace 11 años
It seems settings all the map panels to ignoretouches = "no" except the current one being displayed for zooming would work, except that ignoretouches isn't an object property so it can't be turned on and off.

RareWire seems so amazing.  I'm really hoping to find a solution.
dpotter05 hace 11 años
The only other way I can think of to switch from one large zoomable graphic to another would be to an assign property action to change the source of the main image, but when I do this the second image is indeed zoomable but is displayed in a way that it is squished vertically.


<wire name="testToggleSource">
<main>

<!-- Background -->

<panel name="bg" width="100%" height="100%" background="#a0c4ee">
</panel>

<!-- Maps display here -->

<panel name="map01" alias="MAP01" width="100%" height="1136" lheight="100%" zoomable="yes" draggable="yes" zoommin="1" zoommax="60" alpha="1">
<image name="map01IMG" alias="MAP01IMG" source="map01.gif" width="100%" ypos="40" lypos="0" lwidth="480"></image>
</panel>

<!-- Header -->

<panel name="header" alias="HEADER" width="100%" height="40" background="#1d54e5" ypos="0" lypos="-5000">
<image name="showMap01" alias="SHOWMAP01" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="0" onclick="showMap01"></image>
<image name="showMap02" alias="SHOWMAP02" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="1" onclick="showMap02"></image>
</panel>

</main>

<actions>

<action name="showMap01">
<assign property="object:MAP01IMG.source" value="map02.gif" />
<alpha value="0" target="SHOWMAP01" />
<alpha value="1" target="SHOWMAP02" />
</action>

<action name="showMap02">
<assign property="object:MAP01IMG.source" value="map01.gif" />
<alpha value="1" target="SHOWMAP01" />
<alpha value="0" target="SHOWMAP02" />
</action>

</actions>

</wire>
icahill (Administrator) hace 11 años
Try this option.

<wire>
<classes>
	<class name="map">
    	<panel name="map01" alias="MAP01" width="100%" height="1136" lheight="100%" zoomable="yes" draggable="yes" zoommin="1" zoommax="60" alpha="1">
			<image name="map01IMG" alias="MAP01IMG" source="[param:mapsource]" width="100%" ypos="40" lypos="0" lwidth="480"></image>
		</panel> 
    </class>    
</classes>    
<main>


<!-- Background -->


<panel name="bg" width="100%" height="100%" background="#a0c4ee"></panel>
<panel name="map-container" alias="MAPCONTAINER" width="100%" height="1136">


</panel>
<!-- Header -->


<panel name="header" alias="HEADER" width="100%" height="40" background="#1d54e5" ypos="0" lypos="-5000">
<image name="showMap01" alias="SHOWMAP01" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="0" onclick="showMap01"></image>
<image name="showMap02" alias="SHOWMAP02" source="menu.icon.04.png" valign="top" xpos="0" lxpos="-5000" width="40" height="40" alpha="1" onclick="showMap02"></image>
</panel>


</main>


<actions>
<action name="on" oninit="yes">
	<create class="map" mapsource="map01.gif" target="MAPCONTAINER"/>	    
</action>
<action name="showMap01">
<delete target="MAP01"/>
<create class="map" mapsource="map01.gif" target="MAPCONTAINER"/>
<alpha value="0" target="SHOWMAP01" />
<alpha value="1" target="SHOWMAP02" />
</action>

<action name="showMap02">
<delete target="MAP01"/>
<create class="map" mapsource="map02.gif" target="MAPCONTAINER"/>
<alpha value="1" target="SHOWMAP01" />
<alpha value="0" target="SHOWMAP02" />
</action>

</actions>
</wire>


dpotter05 hace 11 años
This is working!  Thank you so much Ian.  I really appreciate all your efforts to help me.
icahill (Administrator) hace 11 años
Oh I am so glad we got on the same page. Congrats.

Servicio de atención al cliente por UserEcho