SlideView - Revealing Backpanels
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
SlideView - Revealing Backpanels
Hello Dear LiveCoders,
As you know, some paradigms get wide-spread attention regarding mobile app design.
One of them is slide view concept as seen in many apps like Path or Huffington Post.
You're familiar with it, swipe sideways and a panel reveals as it's underneath the main content.
It's very useful to overcome the limitations of a handheld device's restricted screen-estate.
For an in-depth review of the concept, please check out Ken's post:
http://kenyarmosh.com/ios-pattern-slide-out-navigation/
I don't know if anybody here has already developed an app using this style.
Anyways, I was coveting this for a long time and decided to roll up my sleeves.
Here is the result: As always, it's totally free to use in commercial or non-commercial projects;
free as in freedom and free as in free beer
EDIT:
~~~
Folks; this is an old, messy and buggy code.
Don't bother with downloading it.
Try the newer one, a couple of posts later below.
I can't claim that it's bug-free but it should work better compared to this.
~~~
Best,
~ Ender Nafi
As you know, some paradigms get wide-spread attention regarding mobile app design.
One of them is slide view concept as seen in many apps like Path or Huffington Post.
You're familiar with it, swipe sideways and a panel reveals as it's underneath the main content.
It's very useful to overcome the limitations of a handheld device's restricted screen-estate.
For an in-depth review of the concept, please check out Ken's post:
http://kenyarmosh.com/ios-pattern-slide-out-navigation/
I don't know if anybody here has already developed an app using this style.
Anyways, I was coveting this for a long time and decided to roll up my sleeves.
Here is the result: As always, it's totally free to use in commercial or non-commercial projects;
free as in freedom and free as in free beer
EDIT:
~~~
Folks; this is an old, messy and buggy code.
Don't bother with downloading it.
Try the newer one, a couple of posts later below.
I can't claim that it's bug-free but it should work better compared to this.
~~~
Best,
~ Ender Nafi
Last edited by endernafi on Sat Feb 01, 2014 4:26 pm, edited 2 times in total.
~... together, we're smarter ...~
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
-
- VIP Livecode Opensource Backer
- Posts: 142
- Joined: Thu Feb 21, 2013 8:47 am
Re: SlideView - Revealing Backpanels
Great stuff!
Thank you very much.
Marc
Thank you very much.
Marc
Re: SlideView - Revealing Backpanels
Hey Ender... Thanks for the post and sharing! I'm inspired to try this out!!
Laura
Laura
-
- Posts: 19
- Joined: Fri Dec 13, 2013 6:15 am
Re: SlideView - Revealing Backpanels
Hi Eder,
Please confirm we are able to use same code for android also ?
Please confirm we are able to use same code for android also ?
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: SlideView - Revealing Backpanels
Laura, Marc; thank you for your kind words.
Monika;
There isn't any iOS-specific code in it.
So, it should work in Android, too.
But I didn't test.
Btw, that was a messy script and had many bugs.
Try this one instead: This has considerably less lines of code {700+ vs. 200+}
and it's far more simple.
That means you can adopt it into your own project more easily.
Edit:
Some improvements, see the changes in the stack script's comment or in this post.
Best,
~ Ender Nafi
Monika;
There isn't any iOS-specific code in it.
So, it should work in Android, too.
But I didn't test.
Btw, that was a messy script and had many bugs.
Try this one instead: This has considerably less lines of code {700+ vs. 200+}
and it's far more simple.
That means you can adopt it into your own project more easily.
Edit:
Some improvements, see the changes in the stack script's comment or in this post.
Best,
~ Ender Nafi
Last edited by endernafi on Sun Feb 02, 2014 8:13 pm, edited 1 time in total.
~... together, we're smarter ...~
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
Re: SlideView - Revealing Backpanels
Elegant work, Ender, as usual. One comment - I imagine most use cases for this would call for only one direction (left to right), not both directions. Can you make a version (or have a flag set by the developer) to restrict this to one direction only?endernafi wrote: Try this one instead:
Gerry
14" MacBook Pro
Former LiveCode developer.
Now recovering.
Former LiveCode developer.
Now recovering.
-
- VIP Livecode Opensource Backer
- Posts: 2718
- Joined: Sat Dec 22, 2007 5:35 pm
- Location: Genève
- Contact:
Re: SlideView - Revealing Backpanels
hi Ender,
I played with slideView. Simple and elegant.
I feel strange when I do a mouserelease with a btn "GoPage"
All the best
Jean-Marc
I played with slideView. Simple and elegant.
I feel strange when I do a mouserelease with a btn "GoPage"
All the best
Jean-Marc
https://alternatic.ch
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: SlideView - Revealing Backpanels
I've made some changes to the stack and added it into the original post to keep the different versions together.
If you find any bugs or have ideas for improvement, feel free to tell me; I'll do my best.
Here are the major changes:
1.
I've added 2 variables to determine the active status of the panels.
The developer can now alter their values in the flow of the app, at start or using custom properties; whichever suits the needs of the particular project.
2.
mouseRelease was triggering mouseUp just to be fail-safe;
but it didn't occurred to me that this behavior will rise a confusion and it's bad design when dealing with active controls.
So, I excluded the panels' controls.
In an actual project, other controls {new buttons, switches, ...} should be excluded, too.
3.
Adding a drop shadow to the sliding view was dropping the performance significantly, even causing crashes on older devices.
So, I removed the effects and replaced the background images with newer ones.
Those have static shadows added via Photoshop.
But, that complicated the calculations and the code is less simple now, sorry for that.
Best,
~ Ender
If you find any bugs or have ideas for improvement, feel free to tell me; I'll do my best.
Here are the major changes:
1.
Thanks for the suggestion Gerry.Jellicle wrote:Can you make a version (or have a flag set by the developer) to restrict this to one direction only?
I've added 2 variables to determine the active status of the panels.
The developer can now alter their values in the flow of the app, at start or using custom properties; whichever suits the needs of the particular project.
2.
Thanks for reminding that Jean-Marc.jmburnod wrote:I feel strange when I do a mouserelease with a btn "GoPage"
mouseRelease was triggering mouseUp just to be fail-safe;
but it didn't occurred to me that this behavior will rise a confusion and it's bad design when dealing with active controls.
So, I excluded the panels' controls.
In an actual project, other controls {new buttons, switches, ...} should be excluded, too.
3.
Adding a drop shadow to the sliding view was dropping the performance significantly, even causing crashes on older devices.
So, I removed the effects and replaced the background images with newer ones.
Those have static shadows added via Photoshop.
But, that complicated the calculations and the code is less simple now, sorry for that.
Best,
~ Ender
~... together, we're smarter ...~
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
Re: SlideView - Revealing Backpanels
Just wanted to bring to your attention that when I downloaded the latest version of this; when I opened this in LiveCode I received the following error:
_compiling at 11:13:35 AM
Type_Expression: missing ')' before factor
Object_slideView
Line_put (the left of pageContent _ -(glowOffset)) into isPanelVisible
Hint__
this script is the one referenced
put (the left of pageContent _ -(glowOffset)) into isPanelVisible
put false into slidePermission
put the mouseH,the left of pageContent,the milliseconds into slideParams
end mouseDown
_compiling at 11:13:35 AM
Type_Expression: missing ')' before factor
Object_slideView
Line_put (the left of pageContent _ -(glowOffset)) into isPanelVisible
Hint__
this script is the one referenced
put (the left of pageContent _ -(glowOffset)) into isPanelVisible
put false into slidePermission
put the mouseH,the left of pageContent,the milliseconds into slideParams
end mouseDown
Re: SlideView - Revealing Backpanels
HI dandun,
Remoe the orphaned underscore and try again:
Best
Klaus
Code: Select all
put (the left of pageContent _ -(glowOffset)) into isPanelVisible
Code: Select all
put (the left of pageContent - (glowOffset)) into isPanelVisible
Best
Klaus
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: SlideView - Revealing Backpanels
Hi dandun,
The original script is as follows:
put (the left of pageContent ≠ -(glowOffset)) into isPanelVisible
But that *notEqual* sign might be not recognized by some systems and/or configurations.
Please replace it with this: <>,
then the whole line will look as follows:
P.S.: Klaus, nice guess
Best,
~ Ender
The original script is as follows:
put (the left of pageContent ≠ -(glowOffset)) into isPanelVisible
But that *notEqual* sign might be not recognized by some systems and/or configurations.
Please replace it with this: <>,
then the whole line will look as follows:
Code: Select all
put (the left of pageContent <> -(glowOffset)) into isPanelVisible
Best,
~ Ender
~... together, we're smarter ...~
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
Re: SlideView - Revealing Backpanels
AHA!
Your message contains 7 characters. The minimum number of characters you need to enter is 10.
Your message contains 7 characters. The minimum number of characters you need to enter is 10.
Re: SlideView - Revealing Backpanels
Hi Ender,
Thank you again for the slideview template, Even though I am still a newbie, I find this works great for my project.
I have what I think (hope) is a simple question, but can’t figure out the solution on my own.
In the few cases where I want a card on the main stack or utilizing a one from a substack (i.e modal card) that does not have the slider, I get the following error when opening the card:
stack "slideView": execution error at line 52 (Chunk: no such object) near "theSettings", char 20
Is there script I can add to the preopen card to remove this error?
Thanks in advance!
Dan
Thank you again for the slideview template, Even though I am still a newbie, I find this works great for my project.
I have what I think (hope) is a simple question, but can’t figure out the solution on my own.
In the few cases where I want a card on the main stack or utilizing a one from a substack (i.e modal card) that does not have the slider, I get the following error when opening the card:
stack "slideView": execution error at line 52 (Chunk: no such object) near "theSettings", char 20
Is there script I can add to the preopen card to remove this error?
Thanks in advance!
Dan
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: SlideView - Revealing Backpanels
Hi Dan,
Thanks for your kind words.
Since, this is merely a sample and I wanted to keep things as simple as I can, I didn't put control statements to deal with errors like that.
There are a couple of things you can do:
* Check every and each line of script if that particular control which I'd refer does exist:
* Update the names of controls to fit to your project.
For example, do you use "theSettings" as the name for your topRight hand button? If not, fix it.
* Create a custom property for your card to check whether it uses the panels or not:
* Remove all size references from buttons.
Change this:
To something like this:
Hope it helps...
Best,
~ Ender
Thanks for your kind words.
Since, this is merely a sample and I wanted to keep things as simple as I can, I didn't put control statements to deal with errors like that.
There are a couple of things you can do:
* Check every and each line of script if that particular control which I'd refer does exist:
Code: Select all
if exists(button "theSettings") then put the width of button "theSettings" - screenWidth into anchorLeft
For example, do you use "theSettings" as the name for your topRight hand button? If not, fix it.
* Create a custom property for your card to check whether it uses the panels or not:
Code: Select all
on preOpenCard
if the cShouldUsePanels of this card is "NO" then exit preOpenCard
...
..
.
end preOpenCard
* Remove all size references from buttons.
Change this:
Code: Select all
put the width of button "theSettings" - screenWidth into anchorLeft
put screenWidth - the width of button "thePageNav" into anchorRight
Code: Select all
put round(screenWidth / 16) into anchorLeft
put anchorLeft into anchorRight
Hope it helps...
Best,
~ Ender
~... together, we're smarter ...~
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
Re: SlideView - Revealing Backpanels
Ender, that is great!, thank you for the help!!
Dan
Dan