Icon Menu Swipe

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.

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]

No luck as of yet with this.

This is what I have tried:
I gave my footer a white background and gave it a fade action 'onclick' just to be sure the app was accepting commands. This worked, but the footer does not have images in it and is just a panel. So, I then tried the fade action on my header img and it worked fine as well. Next i tried it on my MENU panel and icon1 but received no results from either.

From here i tried the onswipe actions on my header img and voila! It gave me a result, but not quite as expected. Instead of just moving the MENU and MENU2 panels that were targeted, it moved everything.

So, could the problem be in how the images are nested in the panel that it is causing it not to be able to accept actions?

CODE AS FOLLOWS:
[main]
[panel name="mainarea" width="100%" height="100%" onswipeleft="menumoveleft" onswipelefttarget="MENU2"]

[image name="myBackground" style="myBackground-Image" align="center" valign="center"][/image]
[image name="header" source="images/Header.png" style="header" align="left" onclick="fade" onclickup="fill" onswipeleft="menumoveleft" onswipelefttarget="MENU2"][/image]

[panel name="iconsA" alias="MENU" xpos="0" ypos="0" leftmargin="10" rightmargin="10" onswipeleft="menumoveleft" onswipelefttarget="MENU2" onclick="fade" onclickup="fill"]
[image name="icon1" source="images/AnnouncementsIcon.png" style="icon" xpos="0" ypos="110" alpha="1" onswipeleft="menumoveleft" onswipelefttarget="MENU2" onclick="fade" onclickup="fill"][/image]
-- OTHER 8 ICONS --
[/panel]
[panel name="iconsB" alias="MENU2" xpos="320" ypos="0" leftmargin="10" rightmargin="10" onswiperight="menumoveright" onswiperighttarget="MENU"]
[image name="icon10" source="images/ScheduleIcon.png" style="icon" xpos="0" ypos="90" alpha="1" ][/image]
[/panel]

[panel name="footer" alias="FOOTER" style="footer" xpos="0" ypos="450" background="#ffffff" alpha="0.8" onclick="fade" onclickup="fill"][/panel]

[/panel]
[/main]

[actions]
[action name="menumoveleft"]
[translate time="0.5" curve="easeout" xpos="320" target="MENU" /]
[translate time="0.5" curve="easeout" xpos="0" target="MENU2" /]
[/action]
[action name="menumoveright"]
[translate time="0.5" curve="easeout" xpos="320" /]
[translate time="0.5" curve="easeout" xpos="0" target="MENU" /]
[/action]

[action name="fade"]
[alpha time="0.5" value="0.2" /]
[/action]
[action name="fill"]
[alpha time="0.5" value="0.8" /]
[/action]
[/actions]

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>


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.

Well, it looks like the missing height and width attributes was what was causing the issue. I assumed that those would be automatically filled, but since I used absolute positioning with the images I basically floated my images outside of a zero pixel panel. I'll be sure to include those from now on.

Also, thanks for the tip on the "code" tag for posting in this forum. That will come in handy.

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.