Ihre Kommentare

I don't think it is anything you did. I logged a dev ticket for it, so they will look into it. Maybe your rotates were stepping on each other's toes, but that probably would have resulted in a different outcome than what we saw, so my guess is it is a bug proper.

Thanks.
I was able to replicate the issue. Not sure what is causing it to completely wipe PANELFLIP though. I will log a bug on this issue.

I think I found a work around though. basically I wrapped panel3 and 4 into a panel and 1 and 2 into a panel and used the new panels for the rotate. This keeps them all together, so the rotate won't forget their alpha state.

I also added some alpha tags to the rotate to ensure that only the tabs displaying were at "1".

Here is what I did:



<wire>

<datasources></datasources>

<styles></styles>

<classes></classes>

<main>
<panel name="container" width="1024" height="768">

<web name="bg" alias="BG" file="m1-dis-06.html" width="1024" height="768" ypos="0" transparent="yes" ignoretouches="yes" />
<!-- tab 1 and 4 content -->
<panel name="panelflip" alias="PANELFLIP" width="650" height="400" xpos="200" ypos="215" draggable="no">

<panel name="group2" alias="GROUP2" height="100%" width="100%">
<panel name="tabpanel3" alias="TABPANEL3" width="100%" height="100%" xpos="0" ypos="0" alpha="0" >
<web name="msltinfo" alias="MSLTINFO" file="m1-dis-06-03.html" width="643" height="400" valign="top" transparent="yes" draggable="no"/>
<panel name="tab3" width="269" height="40" xpos="307" ypos="20" onclick="showTab4" clicktarget="TABPANEL4" ></panel>
<panel name="tab3-hotspot" alias="TAB3-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipright"></panel>
<panel name="tab3large-open" alias="TAB3LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab3" clicktarget="TAB3-LARGE"></panel>
</panel>

<panel name="tabpanel4" alias="TABPANEL4" width="100%" height="100%" xpos="0" ypos="0" alpha="0">
<web name="info2" alias="INFO2" file="m1-dis-06-04.html" width="643" height="400" valign="top" transparent="yes" draggable="no" />
<panel name="lasttab-hotspot" width="269" height="40" xpos="45" ypos="20" onclick="showTab3" clicktarget="TABPANEL3"></panel>
<panel name="tab4-hotspot" alias="TAB4-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipright2"></panel>
<panel name="tab4large-open" alias="TAB4LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab4" clicktarget="TAB4-LARGE"></panel>
</panel>
</panel>

<panel name="group1" alias="GROUP1" height="100%" width="100%">
<panel name="tabpanel1" alias="TABPANEL1" width="650" height="400" xpos="0" ypos="0" alpha="1" >
<web name="msltpie" alias="MSLTPIE" file="m1-dis-06-01.html" width="643" height="400" valign="top" transparent="yes" draggable="no"/>
<panel name="msltpie-hotspot" width="269" height="40" xpos="307" ypos="20" onclick="showTab2" clicktarget="TABPANEL2"></panel>
<panel name="tab1-hotspot" alias="TAB1-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipleft"></panel>
<panel name="tab1large-open" alias="TAB1LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab1" clicktarget="TAB1-LARGE"></panel>
</panel>

<panel name="tabpanel2" alias="TABPANEL2" width="650" height="400" xpos="0" ypos="0" alpha="0" >
<web name="esspie" alias="ESSPIE" file="m1-dis-06-02.html" width="643" height="400" valign="top" transparent="yes" draggable="no"/>
<panel name="esspie-hotspot" width="277" height="40" xpos="45" ypos="20" onclick="showTab1" clicktarget="TABPANEL1"></panel>
<panel name="tab2-hotspot" alias="TAB2-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipleft2"></panel>
<panel name="ta2large-open" alias="TAB2LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab2" clicktarget="TAB2-LARGE"></panel>
</panel>
</panel>
</panel>

<!-- end of tab 1 content and tab 4-->

<panel name="buttonguy" alias="BUTTONGUY" ypos="60" xpos="895" width="85" height="230" onclick="guybutton" alpha="0">
<image name="guy-image" alias="GUY-IMAGE" valign="center" align="center" source="images/people-man.png" height="215" width="153" />
</panel>
<panel name="guy" alias="GUY" ypos="120" xpos="425" width="466" height="182" alpha="0" transparent="yes" onclick="guybuttonclose">
<image name="guy-talk-image" alias="GUY-TALK-IMAGE" valign="center" align="center" source="images/1_6-manQuote.png" height="182" width="466" />

</panel>
<panel name="buttonlady" alias="BUTTONLADY" ypos="60" xpos="895" width="85" height="230" onclick="ladybutton" alpha="0">
<image name="lady-image" alias="LADY-IMAGE" valign="center" align="center" source="images/people-woman.png" height="215" width="153" />
</panel>
<panel name="lady" alias="LADY" ypos="50" xpos="425" width="466" height="182" alpha="0" transparent="yes" onclick="ladybuttonclose">
<image name="lady-talk-image" alias="LADY-TALK-IMAGE" valign="center" align="center" source="images/1_6-womanQuote.png" height="192" width="487" />
</panel>

<!-- <panel name="buttonisi" alias="BUTTONISI" ypos="10" xpos="760" width="205" height="30" onclick="isibutton">
</panel>
<panel name="isi" alias="ISI" ypos="0" xpos="0" width="1024" height="768" alpha="0">
<web name="html" file="isi-popup.html" width="100%" height="100%" ypos="0" transparent="yes" pagetofit="no"/>
<panel name="button2" alias="BUTTON2" ypos="460" xpos="650" width="205" height="30" onclick="isibuttonclose">
<text name="bottom-label" width="100%" height="fit" color="#0071b9" font="Helvetica" size="16" alignment="center" valign="center" text="Close"></text>
</panel>
</panel>
<panel name="buttonref" alias="BUTTONREF" ypos="720" xpos="975" width="55" height="30" onclick="refbutton">
</panel>
<panel name="ref" alias="REF" ypos="100" xpos="130" width="805" height="500" alpha="0" background="#000000">
<web name="html" file="refs.html" width="835" height="500" ypos="0" transparent="yes" pagetofit="no"/>
<panel name="buttonref" alias="BUTTONREF" ypos="460" xpos="650" width="205" height="30" onclick="refbuttonclose">
<text name="bottom-label-ref" width="100%" height="fit" color="#0071b9" font="Helvetica" size="16" alignment="center" valign="center" text="Close"></text>
</panel>
</panel>-->
<panel name="buttonpresinfo" alias="BUTTONPRESINFO" ypos="10" xpos="560" width="205" height="30" onclick="presinfobutton" >
</panel>
<panel name="presinfo" alias="PRESINFO" ypos="100" xpos="130" width="805" height="500" alpha="0">
<pdf name="PDF" alias="PDF" source="documents/Full_Prescribing_Information.pdf" height="100%" width="100%" spreads="no" tile="no" covertile="no"></pdf>
<panel name="button2" alias="BUTTON2" ypos="460" xpos="650" width="205" height="30" onclick="presinfobuttonclose">
<text name="bottom-labelpres" width="100%" height="fit" color="#0071b9" font="Helvetica" size="16" alignment="center" valign="center" text="Close"></text>
</panel>
</panel>
<!-- enlarge tabs -->
<panel name="tab1-large" alias="TAB1-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab1" alias="LARGE-TAB1" valign="center" align="center" source="images/tab1_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab1large-close" alias="TAB1LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab1" clicktarget="TAB1-LARGE">
</panel>
</panel>
<panel name="tab2-large" alias="TAB2-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab2" alias="LARGE-TAB2" valign="center" align="center" source="images/tab3_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab2large-close" alias="TAB2LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab2" clicktarget="TAB2-LARGE">
</panel>
</panel>
<panel name="tab3-large" alias="TAB3-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab3" alias="LARGE-TAB3" valign="center" align="center" source="images/tab2_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab3large-close" alias="TAB3LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab3" clicktarget="TAB3-LARGE">
</panel>
</panel>
<panel name="tab4-large" alias="TAB4-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab4" alias="LARGE-TAB4" valign="center" align="center" source="images/tab4_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab4large-close" alias="TAB4LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab4" clicktarget="TAB4-LARGE">
</panel>
</panel>

<!-- end of close large tabs -->
</panel>
</main>

<actions>
<action name="setMe" oninit="yes">
<if lhs="male" operator="eq" rhs="female">
<alpha value="1" time="0" target="BUTTONLADY"/>
</if>
<action name="ladybutton">
<alpha value="1" time="0" target="LADY"/>
</action>
<action name="ladybuttonclose">
<alpha value="0" time="0" target="LADY"/>
</action>
<if lhs="male" operator="eq" rhs="male">
<alpha value="1" time="0" target="BUTTONGUY"/>

</if>
<action name="guybutton">
<alpha value="1" time="0" target="GUY"/>
</action>
<action name="guybuttonclose">
<alpha value="0" time="0" target="GUY"/>
</action>

</action>
<!-- Flip1 panel actions -->

<action name="showTab1">
<alpha value="0" time=".25" target="TABPANEL2" />
<alpha value="1" time=".25" target="TABPANEL1" />
</action>
<action name="showTab2">
<alpha value="0" time=".25" target="TABPANEL1" />
<alpha value="1" time=".25" target="TABPANEL2" />

</action>
<action name="showTab3">
<alpha value="1" time=".25" target="TABPANEL3" />
<alpha value="0" time=".25" target="TABPANEL4" />
</action>
<action name="showTab4">
<alpha value="1" time=".25" target="TABPANEL4" />
<alpha value="0" time=".25" target="TABPANEL3" />
</action>
<action name="flipleft">
<alpha value="1" target="TABPANEL3" />
<alpha value="0" target="TABPANEL1" />
<alpha value="0" target="TABPANEL2" />
<alpha value="0" target="TABPANEL4" />
<replace type="flipleft" replacement="GROUP2" target="GROUP1"/>
</action>
<action name="flipright">
<alpha value="1" target="TABPANEL1" />
<alpha value="0" target="TABPANEL3" />
<alpha value="0" target="TABPANEL2" />
<alpha value="0" target="TABPANEL4" />
<replace type="flipright" replacement="GROUP1" target="GROUP2"/>
</action>

<action name="flipleft2">
<alpha value="1" target="TABPANEL4" />
<alpha value="0" target="TABPANEL2" />
<alpha value="0" target="TABPANEL3" />
<alpha value="0" target="TABPANEL1" />
<replace type="flipleft" replacement="GROUP2" target="GROUP1"/>
</action>
<action name="flipright2">
<alpha value="1" target="TABPANEL2" />
<alpha value="0" target="TABPANEL4" />
<alpha value="0" target="TABPANEL3" />
<alpha value="0" target="TABPANEL1" />
<replace type="flipleft" replacement="GROUP1" target="GROUP2"/>
</action>

<!--<action name="isibutton">
<alpha value="1" time="0" target="ISI"/>
</action>
<action name="isibuttonclose">
<alpha value="0" time="0" target="ISI"/>
</action>
<action name="refbutton">
<alpha value="1" time="0" target="REF"/>
</action>
<action name="refbuttonclose">
<alpha value="0" time="0" target="REF"/>
</action>-->
<action name="presinfobutton">
<alpha value="1" time="0" target="PRESINFO"/>
</action>
<action name="presinfobuttonclose">
<alpha value="0" time="0" target="PRESINFO"/>
</action>

<action name="enlargetab1">
<alpha value="1" time="0" target="TAB1-LARGE"/>
</action>
<action name="closelargetab1">
<alpha value="0" time="0" target="TAB1-LARGE"/>
</action>
<action name="enlargetab2">
<alpha value="1" time="0" target="TAB2-LARGE"/>
</action>
<action name="closelargetab2">

<alpha value="0" time="0" target="TAB2-LARGE"/>
</action>
<action name="enlargetab3">
<alpha value="1" time="0" target="TAB3-LARGE"/>
</action>
<action name="closelargetab3">
<alpha value="0" time="0" target="TAB3-LARGE"/>
</action>
<action name="enlargetab4">
<alpha value="1" time="0" target="TAB4-LARGE"/>
</action>
<action name="closelargetab4">
<alpha value="0" time="0" target="TAB4-LARGE"/>
</action>
</actions>

</wire>
Glad you figured it out.

Panels will always require width and height, while images do not. If you don't define that on an image, it will display in its own dimensions by default.
Which project in the Assets folder should I look at? Having some trouble locating the wire file.
Another option is to place these panels with children icons in a pager tag and that will give you the desired effect as well without needing to use an action.
First off, it doesn't look like you have defining a height and width on your panels? This might be in just your example? (which FYI if you wrap your code in a < code>CODE HERE < /code> block you don't have to use square brackets in the forum).

You do not have to include the action on the image tags, as long as they are children to your panels, they will move with it. Nor do you need to invoke the action on the background panel.

All you need to do is tell the WIRE, when the panel is swiped, move it off the screen and reveal the other one. Here is a simplified version using only panels.


<wire>

<main>
<panel name="iconsA" width="500" height="400" alias="MENU" xpos="0" ypos="0" leftmargin="10" rightmargin="10" onswipeleft="menumoveleft" background="ffffff">
<panel name="icon1" width="30" height="40" xpos="0" ypos="110" alpha="1" background="ff0000"></panel>
</panel>
<panel name="iconsB" width="500" height="400" alias="MENU2" xpos="1000" ypos="0" leftmargin="10" rightmargin="10" onswiperight="menumoveright" background="ff00ff">
<panel name="icon10" width="30" height="40" xpos="0" ypos="90" alpha="1" background="ff0000"></panel>
</panel>
</main>

<actions>
<action name="menumoveleft">
<translate time="0.5" curve="easeout" xpos="-1000" />
<translate time="0.5" curve="easeout" xpos="0" target="MENU2" />
</action>
<action name="menumoveright">
<translate time="0.5" curve="easeout" xpos="1000" />
<translate time="0.5" curve="easeout" xpos="0" target="MENU" />
</action>
</actions>

</wire>
Ok, I will take a look
You might do it this way.

[main]
[panel name="iconsA" alias="MENU" xpos="0" ypos="0" leftmargin="10" rightmargin="10" onswipeleft="menumoveleft" onswipelefttarget="MENU2"]
---the 9 icons---
[/panel]
[panel name="iconsB" alias="MENU2" xpos="640" ypos="0" leftmargin="10" rightmargin="10" onswiperight="menumoveright" onswiperighttarget="MENU"]
---the 2nd 9 icons---
[/panel]
[/main]
[actions]
[action name="menumoveleft"]
[translate time="0.5" curve="easeout" xpos="-320"/]
[translate time="0.5" curve="easeout" xpos="0" target="MENU2" /]
[/action]
[action name="menumoveright"]
[translate time="0.5" curve="easeout" xpos="640" /]
[translate time="0.5" curve="easeout" xpos="0" target="MENU" /]
[/action]

[/actions]
It looks like you have a pretty good start here. The one thing I see is in your panel there is no attribute called "action="menuswipe" you will need to rename that "onswipeleft="menuswipe"" and you should get the desired action to work.

Let me know if you are still having trouble.

Thanks.
Brandon,

Would it be possible for you to add me as a collaborator to the project? I want to see what this looks like with your content.

Add icahill@rarewire.com

Thanks.