+1
Answered
Icon Menu Swipe
I have a grid 3x3 of nine icons. I need to be able to show an extended menu (3x3 as well) on swipe left. The idea is that the first 9 icons would slide off the screen to the left and the next nine would slide onto the screen. I have set up an action for the menu [panel]s so that their xpos should change on swipe.
[main]
[panel name="iconsA" alias="MENU" xpos="0" ypos="0" leftmargin="10" rightmargin="10" action="menuswipe"]
---the 9 icons---
[/panel]
[/main]
[actions]
[action name="menumoveleft"]
[translate time="0.5" curve="easeout" xpos="-320"/]
[/action]
[action name="menumoveright"]
[translate time="0.5" curve="easeout" xpos="320" /]
[/action]
[action name="menuswipe"]
[set onswipeleft="menumoveleft" onswipelefttarget="MENU" /]
[set onswiperight="menumoveright" onswiperighttarget="MENU" /]
[/action]
[/actions]
So far, this has had zero results, good or bad. Any thoughts?
[main]
[panel name="iconsA" alias="MENU" xpos="0" ypos="0" leftmargin="10" rightmargin="10" action="menuswipe"]
---the 9 icons---
[/panel]
[/main]
[actions]
[action name="menumoveleft"]
[translate time="0.5" curve="easeout" xpos="-320"/]
[/action]
[action name="menumoveright"]
[translate time="0.5" curve="easeout" xpos="320" /]
[/action]
[action name="menuswipe"]
[set onswipeleft="menumoveleft" onswipelefttarget="MENU" /]
[set onswiperight="menumoveright" onswiperighttarget="MENU" /]
[/action]
[/actions]
So far, this has had zero results, good or bad. Any thoughts?
Customer support service by UserEcho
Let me know if you are still having trouble.
Thanks.
[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]
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]
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>
Also, thanks for the tip on the "code" tag for posting in this forum. That will come in handy.
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.