Swiping between cards - metaphor end-of-the-road?

[Alejandro Tejada via use-livecode]

Hi Richard, :D

Richard Gaskin wrote:
> Your headache won't end
> until your RAM chips arrive. :)\

Thankfully, a small cup of coffee with half lemon
reduced the headache to a minimum of discomfort.
It's there, the headache is still there but in a
second or third plane... :D

> I like DIY solutions that don't require waiting for
> the engine team, but I wonder how smoothly performant
> this would feel in actual use?
> On modern high-end phones those bitmaps will be pretty big.

Good point, but the engine team would do something
very similar but at a lower level. Right?

Does LiveCode always creates 32 bit images,
{24 bit for RGB image plus 8 bits for Alpha channel]
even when you are displaying a 4 bit PNG?
If these images had a lower bit count (like 4 or 8)
memory requirements were much lower. Much lower.
Look these PNGs displayed at 1, 2, 4, 8 and 32 bits.
https://commons.wikimedia.org/wiki/File:4_bit.png

By the way, now that I think about it, ink effects
adds a nice touch for displaying the previous
and next card images :)

About big images in mobile devices, previously I though
that in iOS and Android every current app could use
all resources of the device (all memory, all processors)
while other running apps started to "sleep" until
the user starts using them again.

Al
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Richard Gaskin via use-livecode]

Alejandro Tejada wrote:

> Check this script. This code would be a starting point for a script
> that implement this swiping card feature. Maybe I will try to code it
> myself when my headache ends.

Your headache won't end until your RAM chips arrive. :)\


> After we have 3 images (from previous, current and next card,) the
> script of top image (image of current card) just have to change
> the layer of previous and next card images, depending of movement
> direction:
>
> a) moving the image to left or down or diagonally to the left
> will show the image of next card
>
> b) moving the image to right or up or diagonally to the right
> will show the image of next card
>
> In countries that reads from right to left, like Japan,
> these movements would be reversed.
>
> on mouseup
>lock screen
>
>put the rect of this cd into q
>export snapshot from rect q of this cd to myVar as PNG
>create img
>set the text of it to myVar
>
>go prev -- previous card
> put the rect of this cd into q
> export snapshot from rect q of this cd to myVar as PNG
> go back -- we return to the card where we started
>create img
>set the text of it to myVar
>
>
>go next
>put the rect of this cd into q
>export snapshot from rect q of this cd to myVar as PNG
>go back
>create img
>set the text of it to myVar
>
>put the number of images of this card into w
>put the number of controls of this card into r
>
>set the layer of img (w-2) of this card to r
>-- image of current card is moved to top layer
>
>unlock screen
> end mouseup

I like DIY solutions that don't require waiting for the engine team, but 
I wonder how smoothly performant this would feel in actual use?


On modern high-end phones those bitmaps will be pretty big.

--
 Richard Gaskin
 Fourth World Systems
 Software Design and Development for the Desktop, Mobile, and the Web
 
 ambassa...@fourthworld.comhttp://www.FourthWorld.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Swiping between cards - metaphor end-of-the-road?

[Alejandro Tejada via use-livecode]

Hi All,

Check this script. This code would be a starting point for a script that
implement this swiping card feature. Maybe I will try to code it myself
when my headache ends.

After we have 3 images (from previous, current and next card,) the script
of top image (image of current card) just have to change the layer of
previous and next card images, depending of movement direction:

a) moving the image to left or down or diagonally to the left
will show the image of next card

b) moving the image to right or up or diagonally to the right
will show the image of next card

In countries that reads from right to left, like Japan,
these movements would be reversed.

on mouseup
   lock screen

   put the rect of this cd into q
   export snapshot from rect q of this cd to myVar as PNG
   create img
   set the text of it to myVar

   go prev -- previous card
put the rect of this cd into q
export snapshot from rect q of this cd to myVar as PNG
go back -- we return to the card where we started
   create img
   set the text of it to myVar


   go next
   put the rect of this cd into q
   export snapshot from rect q of this cd to myVar as PNG
   go back
   create img
   set the text of it to myVar

   put the number of images of this card into w
   put the number of controls of this card into r

   set the layer of img (w-2) of this card to r
   -- image of current card is moved to top layer

   unlock screen
end mouseup

Al
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Matt Maier via use-livecode]

That's a good point. Android apps commonly uses "swipe down" to trigger a
refresh. The swipe still physically happens, but there's just a gray
background behind it, and it pops back into place and resets.

The main problem seems to be what happens during a swipe. Part of the
effect is the feedback of seeing one card move on top of another. After the
swipe is completed we can just use regular messages to do whatever.

Another swipe effect would be pulling the next card in to fill the space
left by the moving card, rather than the next card being stationary
underneath.

On Thu, Apr 27, 2017 at 10:30 AM, Richard Gaskin via use-livecode <
use-livecode@lists.runrev.com> wrote:

> Matt Maier wrote:
>
> > Maybe each card could have a parameter like "swipeTo" which would be
> > the id of another card. Default could be nothing, which would disable
> > swipe. But if there's a card id in there then swiping would put that
> > card "underneath" so it's visible as the current card moves and if
> > the swipe gesture completes the stack moves to that new card.
> >
> > The swipe gesture might be just a scroll that's handled as a swipe
> > when the card can't scroll in that direction. Like if you swipe
> > up/down the content scrolls, but if you swipe left/right, since
> > there's no scroll in that direction, you get a swipe to another card.
>
> I like where you're going with that.  But it also suggests other options
> that would be useful, more stuff to think over before submitting a request.
>
> Rather than a single swipeDestination property to designate which card we
> go to during a swipte, ideally we'd want that for each of the four cardinal
> directions, e.g. swipeLeftDestination, swipeTopDestination, etc.
>
> Also, it would be nice to be able to specify the origin threshold, since
> sometimes we'd want to initiate a drag from any part of the card and other
> times only from a certain edge.
>
> Hmmm...not so simple once we dive into the full range of use-cases, but I
> do think it's worth exploring this here because it would be SO much
> simpler to use LC's card metaphor for modern apps if we had more fluid
> transition capabilities.
>
> --
>  Richard Gaskin
>  Fourth World Systems
>  Software Design and Development for the Desktop, Mobile, and the Web
>  
>  ambassa...@fourthworld.comhttp://www.FourthWorld.com
>
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Richard Gaskin via use-livecode]

Matt Maier wrote:

> Maybe each card could have a parameter like "swipeTo" which would be
> the id of another card. Default could be nothing, which would disable
> swipe. But if there's a card id in there then swiping would put that
> card "underneath" so it's visible as the current card moves and if
> the swipe gesture completes the stack moves to that new card.
>
> The swipe gesture might be just a scroll that's handled as a swipe
> when the card can't scroll in that direction. Like if you swipe
> up/down the content scrolls, but if you swipe left/right, since
> there's no scroll in that direction, you get a swipe to another card.

I like where you're going with that.  But it also suggests other options 
that would be useful, more stuff to think over before submitting a request.


Rather than a single swipeDestination property to designate which card 
we go to during a swipte, ideally we'd want that for each of the four 
cardinal directions, e.g. swipeLeftDestination, swipeTopDestination, etc.


Also, it would be nice to be able to specify the origin threshold, since 
sometimes we'd want to initiate a drag from any part of the card and 
other times only from a certain edge.


Hmmm...not so simple once we dive into the full range of use-cases, but 
I do think it's worth exploring this here because it would be SO 
much simpler to use LC's card metaphor for modern apps if we had more 
fluid transition capabilities.


--
 Richard Gaskin
 Fourth World Systems
 Software Design and Development for the Desktop, Mobile, and the Web
 
 ambassa...@fourthworld.comhttp://www.FourthWorld.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Richard Gaskin via use-livecode]

Paul Dupuis wrote:

> On 4/26/2017 3:02 PM, Richard Gaskin via use-livecode wrote:
>> Either way, the gestures themselves are only part of the challenge.
>> In fact, for card swiping we need only one, a swipe. The bigger part
>> is handling the dual-card render during the gesture.
>
>
> This would work (in theory) for the visualization except that didn't
> visual effect end in LC 8 with deprecating quicktime?
>
>   visual effect wipe left slowly
>   go next cd

That will give us an appearance suitable for a discrete action, like a 
button click, but it won't track the user's finger.


A true swipe follows the user's finger, and even cancels by swiping back 
into the original position if the user releases their finger before a 
certain horizontal threshold is reached.


--
 Richard Gaskin
 Fourth World Systems
 Software Design and Development for the Desktop, Mobile, and the Web
 
 ambassa...@fourthworld.comhttp://www.FourthWorld.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Matt Maier via use-livecode]

Maybe each card could have a parameter like "swipeTo" which would be the id
of another card. Default could be nothing, which would disable swipe. But
if there's a card id in there then swiping would put that card "underneath"
so it's visible as the current card moves and if the swipe gesture
completes the stack moves to that new card.

The swipe gesture might be just a scroll that's handled as a swipe when the
card can't scroll in that direction. Like if you swipe up/down the content
scrolls, but if you swipe left/right, since there's no scroll in that
direction, you get a swipe to another card.

On Wed, Apr 26, 2017 at 1:41 PM, Paul Dupuis via use-livecode <
use-livecode@lists.runrev.com> wrote:

> On 4/26/2017 3:02 PM, Richard Gaskin via use-livecode wrote:
> > Either way, the gestures themselves are only part of the challenge.
> > In fact, for card swiping we need only one, a swipe. The bigger part
> > is handling the dual-card render during the gesture.
>
>
> This would work (in theory) for the visualization except that didn't
> visual effect end in LC 8 with deprecating quicktime?
>
>   visual effect wipe left slowly
>   go next cd
>
>
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Paul Dupuis via use-livecode]

On 4/26/2017 3:02 PM, Richard Gaskin via use-livecode wrote:
> Either way, the gestures themselves are only part of the challenge. 
> In fact, for card swiping we need only one, a swipe. The bigger part
> is handling the dual-card render during the gesture. 


This would work (in theory) for the visualization except that didn't
visual effect end in LC 8 with deprecating quicktime?

  visual effect wipe left slowly
  go next cd


___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Sannyasin Brahmanathaswami via use-livecode]

This is an important subject, I've been meaning to write this for a couple of 
weeks, but Richard got here first.

our current app.

(if anyone is interested I can send you the git repo link off line…it is 
public;  I just don't want to post It public)

use click and swipe "everywhere"

the model is simple: group of rows (smaller groups) whole "portal" group is 
scrollable

each row is a "hyper link" to 
a) a dynamic rebuild of the card with differernt rows
b) open another *module.livecode binary stack
c) open a stack that has a browser widget on it the URL to view pass to it 
dynamically.

Seeims simple enough, works great on desk top… so much promise for a highly 
scalable modular app. 

 but are are getting major failures on mobile and I have been wrestling for 
weeks with the the simple problem of just opening and closing stacks without 
crashing or render issuea (mostly on Android) and performance (super slow on 
some android devices) Once any given stack is actually opened and rendering 
correctly, it works great.  

Anyway, the need to respond to a touch/aka/mouseup  OR swipe the group up and 
down.

That's the tricky bit

Currently we are (pseudo code)

 using locals to get the tStartLoc on mousedown and using

if the  abs(the endloc) > 10  # assume swipe
else
assume tap: fire the hyper link

I'm having issue with this. can't quite figure out why, but I have to tap twice 
to fire the touch event… could be the code needs top be optimized there.  and 
standard mouse/widget/icon/image with just a mouseup alone, fires instantly.

This is not exactly focusing on the card metaphor… but the issues are the same. 
(I think)  Because you might want to trap the touch on a card and not actually 
swipe left or right, group up/down/sideways


Suffice it so say we do need improvements here.  I have a lot of design 
requirements that would use this algorithm

all modern apps do this… verycommon now to load (sometimes over load IMHO) a 
single interface with scrolling groups going sideways… all of which are 
basically create a giant TOC/Index to dive into some other screen/list/listen 
to music (Spotify is a very good model)


" While apps are generally built in
a hierarchical fashion, there are instances where
horizontal navigation can flatten vertical hierarchies
and make access to related data items faster and more
enjoyable."


Anyone else doing the 

touch or swipe  thing?  on a scrolling group/card can you share your code 
methods for this?  I would like to test and improve what we have if possible.



BR



 

On 4/26/17, 8:50 AM, "use-livecode on behalf of Richard Gaskin via 
use-livecode"  wrote:

Mike Kerner wrote:

> So you'd like a swipe event instead of using nav buttons.

Button where appropriate, swiping where appropriate.


iOS:
Use touch gestures to create fluidity. Make it easy to move
through your interface with minimum friction. For example,
you could let people swipe from the side of the screen to
return to the previous screen.




Android:
Efficient navigation is one of the cornerstones of a
well-designed app. While apps are generally built in
a hierarchical fashion, there are instances where
horizontal navigation can flatten vertical hierarchies
and make access to related data items faster and more
enjoyable. Swipe views allow the user to efficiently
move from item to item using a simple gesture and
thereby make browsing and consuming data a more
fluent experience.


___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Richard Gaskin via use-livecode]

Mike Kerner wrote:
> On Wed, Apr 26, 2017 at 2:50 PM, Richard Gaskin wrote:
>
>> Mike Kerner wrote:
>> > So you'd like a swipe event instead of using nav buttons.
>>
>> Button where appropriate, swiping where appropriate.
...
> so bug 9320?

I suppose it's related, but indirectly.  That request is for access to 
iOS-specific gesture APIs.  Those should be accessible through FFI, no?


Either way, the gestures themselves are only part of the challenge.  In 
fact, for card swiping we need only one, a swipe. The bigger part is 
handling the dual-card render during the gesture.


--
 Richard Gaskin
 Fourth World Systems
 Software Design and Development for the Desktop, Mobile, and the Web
 
 ambassa...@fourthworld.comhttp://www.FourthWorld.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Mike Kerner via use-livecode]

so bug 9320?

On Wed, Apr 26, 2017 at 2:50 PM, Richard Gaskin via use-livecode <
use-livecode@lists.runrev.com> wrote:

> Mike Kerner wrote:
>
> > So you'd like a swipe event instead of using nav buttons.
>
> Button where appropriate, swiping where appropriate.
>
>
> iOS:
>Use touch gestures to create fluidity. Make it easy to move
>through your interface with minimum friction. For example,
>you could let people swipe from the side of the screen to
>return to the previous screen.
>  interaction/navigation/>
>
>
> Android:
>Efficient navigation is one of the cornerstones of a
>well-designed app. While apps are generally built in
>a hierarchical fashion, there are instances where
>horizontal navigation can flatten vertical hierarchies
>and make access to related data items faster and more
>enjoyable. Swipe views allow the user to efficiently
>move from item to item using a simple gesture and
>thereby make browsing and consuming data a more
>fluent experience.
> 
>
>
>
> --
>  Richard Gaskin
>  Fourth World Systems
>  Software Design and Development for the Desktop, Mobile, and the Web
>  
>  ambassa...@fourthworld.comhttp://www.FourthWorld.com
>
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>



-- 
On the first day, God created the heavens and the Earth
On the second day, God created the oceans.
On the third day, God put the animals on hold for a few hours,
   and did a little diving.
And God said, "This is good."
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Richard Gaskin via use-livecode]

Mike Kerner wrote:

> So you'd like a swipe event instead of using nav buttons.

Button where appropriate, swiping where appropriate.


iOS:
   Use touch gestures to create fluidity. Make it easy to move
   through your interface with minimum friction. For example,
   you could let people swipe from the side of the screen to
   return to the previous screen.



Android:
   Efficient navigation is one of the cornerstones of a
   well-designed app. While apps are generally built in
   a hierarchical fashion, there are instances where
   horizontal navigation can flatten vertical hierarchies
   and make access to related data items faster and more
   enjoyable. Swipe views allow the user to efficiently
   move from item to item using a simple gesture and
   thereby make browsing and consuming data a more
   fluent experience.



--
 Richard Gaskin
 Fourth World Systems
 Software Design and Development for the Desktop, Mobile, and the Web
 
 ambassa...@fourthworld.comhttp://www.FourthWorld.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Swiping between cards - metaphor end-of-the-road?

[Mike Kerner via use-livecode]

So you'd like a swipe event instead of using nav buttons.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Swiping between cards - metaphor end-of-the-road?

[Richard Gaskin via use-livecode]

I stumbled across this thread and it got me thinking:
http://forums.livecode.com/viewtopic.php?f=7&t=29184

LC has cards, which are great for many things but somewhat limited.

For example, as the OP asks about there: how does one swipe between them?

That seems a perfectly reasonable expectation, given what cards are and 
the central role they play in LC's object model and language.


And yet we don't really have any way of doing that.

Doing it right on mobile would mean some drag-triggered transition which 
responds to the drag movement itself, and could be canceled if the user 
releases their finger before a certain mid-screen threshold is reached.


Of course we can do that with groups, but consider what that means:

We'd have to construct all of our layouts on a single card, and have 
some means of moving the groups on and off screen as needed, both during 
development and at runtime.


All doable, and not too much of a brain-bender.

But it's work.  And non-obvious to newcomers.  And even for experienced 
devs it's tedious.


And at that point, the beautiful simplicity of the card metaphor breaks 
down.  Indeed, it's no longer even relevant because we're not using 
cards at all, but groups on a single card.


At that point, some of the advantage of choosing LiveCode is lost, 
because one of the most central elements of its object model is no 
longer a best fit for today's designs.


Modern UIs (most mobile and increasingly on desktop as well) benefit 
from providing a sense of unifying flow with, among other things, 
interactive drag actions as transitions between screen layouts.


I was considering putting in a feature request for a new drag 
transition, but before I do I think we need some design work to figure 
out exactly what it should do and how we work with it.


It's not even a transition per se, since those are discrete visual 
operations performed after a user action has been completed (e.g., a 
mouses click or a menu selection).


This seems perhaps a good candidate for a property, maybe something like 
"the dragTransitions" of a stack.  When true, any drag actions not 
handled by any script would be handled by the engine by dragging a 
transition from card to card according to the direction of the drag.


That may be too simplistic, though. Do we really want free travel 
between all cards in a stack?  If not, how do we specify what happens in 
response to a drag when we want a card-to-card transition?


--
 Richard Gaskin
 Fourth World Systems
 Software Design and Development for the Desktop, Mobile, and the Web
 
 ambassa...@fourthworld.comhttp://www.FourthWorld.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode