Swap Cards-Script with Accordion- or Stack-Effect
Swap Cards-Script with Accordion- or Stack-Effect
Scripts and 2-Desktop-Demo-Template are ready for download here:
https://app.box.com/LLCardSwapDemo
The template can be merged with exiting setups, won’t leave much of a trace. Just remove the desktops and propably the scripts.
This video shows how to change basic settings in the scripts and how they influence the effect.
Main settings are:
var cardPanelPrefix=”pnlCard”; : Panels to be used for swapping must use this prefix in their name (“+”-tab), i.e. “pnlCard01”.
var cardElasticity = 0.5; : Amount of space between animated cards. Lower value=closer, higher vslue=further.
var fxAnim=”P”; : Animation Style/Curve: “L”inear, “P”ower (x^pow), “E”xponential (base 2), “B”ack (little bounce).
var animDelay = 0; : Animation delay per step in milliseconds
var animSteps = 32; : Steps to use for animation
Additional settings for Card Stack:
var cardFadeOut=true; : Fade out cards when removing from top of stack.
var cardSwapOutLength=0.75;var cardSwapInLength=0.5; : Duration of swap in/out (portion of animSteps).
How to use:
(1) add panels and name them properly with prefix (“pnlCard01”, etc)
(2) add shortcut that trigger the script to each panel
(3) add “run script” actions (i.e. to tap-event), choose SwapAccordion or SwapStack script
(4) position panels, align horizontally (same y-position) or vertically (same x-position) as you wish
(5) that’s all
Tipps and Tricks:
(1) One shortcut per panel with “tap”-event set to SwapAccordion and “swipe left”-event set to SwapStack works pretty good.
(2) Important is the panel’s alignment, but not their width/height; variations are pretty interesting.
The scripts:
Cards_SwapAccordion.js : Swaps cards with Accordion-effect. Prepares parameters for Animation Engine.
Cards_SwapStack.js : Swaps cards with Card Stack-effect. Prepares parameters for Animation Engine.
Cards_AnimateItems.js : Generic Animation Engine. To be called via RunScript with parameters passed defining the animations to perform (what? how? choreography etc).
Post with short demo video here: http://goo.gl/aAJZWl
Original thread that inspired here: http://goo.gl/MvWyMW
]]>
D5 Creation
< ![CDATA[
Very cool and thanks Lutz 👍👍🍺🍺
]]>
< ![CDATA[
Omg how do u come up with this shit lol
]]>
< ![CDATA[
Try, enjoy, feel free to use as basis for your own templates. You’re welcome.
]]>
< ![CDATA[
I hope I will find some time soon to document how to use the “Animation Engine” script in depth, but I can’t promise right now, sorry.
]]>
< ![CDATA[
Uh yea I gotta try this lol
]]>
< ![CDATA[
Corey Spell See the original thread (link above). I have to thank Pradeep Joshi who asked for a way to implement a three screen stack with LL. I took the challenge.
Animation Engine was already ready to use (just some little extensions).
Creating animation choreography was easy for Accordion, but CardStack was a bit harder because of the change of the card’s Z-order. But it was quite fun. And now I myself have an idea for a little “side project” (my wife’s tablet) I might use it for 🙂
]]>
< ![CDATA[
I’m very interested to see what you come up with, this is really good man
]]>
< ![CDATA[
Wow, this is really impressive!
Did you made it all?
I wish I had that engine when I made the save-layout script…maybe I should revise it (or you can do it if you want)
I’m speechless…you should add this into the wiki!
]]>
< ![CDATA[
Lutz, if you were around here I’d buy you a beer! Just great, man.
]]>
< ![CDATA[
TrianguloY Thanks, will do. Adding to Wiki that is. Trying to combine it with your save-layout script… another challenge… might take that one. Shouldn’t be too hard. The engine is capable of taking a list of object IDs and target position to move items smoothly from their current position to a given target location. Will check it.
Chris Chastain I like the idea. For now it seems I have to buy it myself tomorrow. I think I deserve it. Successful work business-wise as well. Cheers!
]]>
< ![CDATA[
Really nice and clean. Will definitely use this.
Good job
]]>
< ![CDATA[
Awesome, awesome, awesome!!!
]]>
< ![CDATA[
Don’t thanks me Lutz Linke
I have only thought to have this type of screen and i know i can’t make it as i don’t know anything about script..
You have executed it perfectly..thanks for sharing.
And can we change screen just by swipe?? Now we have to touch on that screen in which we want to go.
]]>
< ![CDATA[
Pradeep Joshi change by swiping is difficult.
We use panels. These have no “swipe”-events, only “position changed”. Possibly this might be used to determine swipe direction. Caveat is, the panel’s content scrolls, if even a bit. This has to be reverted, but it would be noticable.
That’s why I opted for shortcuts that have to be tapped. This allows to directly switch to that card/panel.
But it should be possible to add the script also to swipe gestures. I have to think about this. Like: if swiped left/right this should not change to the panel containing the shortcut but instead just switch panels by one left/right. Requires blocking successive execution of the script though, in case i.e. one swipes across multiple triggers.
One drawback of the shortcuts is still: the space they occupy can not be used in the panel. They might overlay i.e. a widget, but the space where the shortcut overlays would be not accessible. Tap and swipe events can be set on widgets, too, but it’s not reliable and the widget might as well handle that event.
A workaround would of course be to use only a small shortcut (1×1) to increase the accessible panel space, but it would naturally limit the area used for triggering the script.
]]>
< ![CDATA[
thanks a lot Lutz Linke. it’s really great !!
regarding swipe ( i haven’t looked on the script).
i would use the swipe action from desktop then you must determine which is the uppermost panel. depending on the swipe direction start the js maybe? with data.
i do it this way when i want swipes controlled by me 😉
]]>
< ![CDATA[
gerd reuter But swipe also on desktop can only be detected by PositionChanged event, or am I wrong?
[looking in API document]
[looking at desktop events]
You’re right… desktop HAS swipe events, panels do not. Will have to try that. Unsure if if would still fire when swiping over a panel. Also propably cancelFling() or resetting position to 0/0 would still be required.
Do you have a small sample/code snipplet as example?
]]>
< ![CDATA[
Lutz Linke if the panels can’t be scrolled the swipe action is passed to desktop.
i do it real simple (e.g. with pages on desktop).
i do not allow swipe and set swipe actions to a script.
i “count” the pages and calculate, by using the current position, which is the active page.
now on swipe action i set the new position.
you have to do it a little different. you need to know the nbr of active panel and + or -. …
an idea. may be i am wrong.
]]>
< ![CDATA[
Thank you file😄
Question download file 「Templates-2015-01-27_cardSwap_DEMO.zip」 file in folder name?
Do you put in where the holder?
]]>
< ![CDATA[
Yamada Yoshinori Put the template in /sdcard/Lightning Launcher. Then you can import it in LL. The scripts are just for those who want to view/use the code without importing the template.
]]>
< ![CDATA[
Lutz Linke
Thank you😄 Will challenge!!
]]>
< ![CDATA[
Do I have to put the .zip file LL into the template?
]]>
< ![CDATA[
Use the code without importing the template? What do you mean by that?
]]>
< ![CDATA[
Yamada Yoshinori Place the template in /sdcard/Lightning Launcher, then import in LL.
Scripts are for those who want to use the functionalities in own templates. So they do not need to import/merge mine first.
]]>
< ![CDATA[
Thank You
I understand.
]]>
< ![CDATA[
New version with lots of new features here: http://goo.gl/ERuwB8
]]>