IOS Scroller with Remote Image

[kbirand]

Hi Everyone

I have been trying to create an IOS Native Scroller with remote content inside.
What I am doing is creating images (from http images), creating buttons and fields in a group called "scrollGroup"
and then create a Native IOS Scroller to scroll inside the group.

But Unfortunately I am way out of succeeding. So Need your help here is my code and I have also attached my sample file.

Thanks Folks....

Code: Select all

on preOpenCard
    if environment() is not "mobile" then exit preOpenCard
   set the width of the templateImage to 1
   set the height of the templateImage to 1
   set the left of the templateImage to 0
   set the top of the templateImage to 23
   create image "koko0" in group "scrollGroup"
   
   set the width of the templateImage to 400
   set the height of the templateImage to 545
   set the left of the templateImage to 175
   set the top of the templateImage to 23
   create image "koko" in group "scrollGroup"
   set the filename of image "koko" to "http://koraybirand.co.uk/kb_newsstand/0001_Main%20Portfolio_cover.jpg"
   
   set the width of the templateField to 400
   set the height of the templateField to 100
   set the left of the templateField to 575  + (1024 * 0)
   set the top of the templateField to 300
   set the opaque of the templateField to false
   set the selected of the templateField to false
   set the locktext of the templateField to true
   set the threeD of the templateField to false
   set the borderwidth of the templateField to 0
   set the textSize of the templateField to 24
   set the textStyle of templateField to "bold" --"italic,bold"
   set the text of the templateField to "Main Portfolio" --& return & "selected works from all portfolios"
   create field "KOKO" in group "scrollGroup"
   
   set the script of the templateButton to "on mouseUp" & cr & "beep" & cr & "end mouseUp"
   set the width of the templateButton  to 70
   set the height of the templateButton  to 20
   set the left of the templateButton to 580 + (1024 * 0)
   set the top of the templateButton to 335
   set the label of the templateButton to "Download"
   create button in group "scrollGroup"
   
   
   ---
   set the width of the templateImage to 1
   set the height of the templateImage to 1
   set the left of the templateImage to 1024 *1
   set the top of the templateImage to 23
   create image "02" in group "scrollGroup"
   
   set the width of the templateImage to 400
   set the height of the templateImage to 545
   set the left of the templateImage to (1024 *1) +175
   set the top of the templateImage to 23
   create image "koko2" in group "scrollGroup"
   set the filename of image "koko2" to "http://koraybirand.co.uk/kb_newsstand/0002_Editorial%20Works_cover.jpg"
   
   --set the focusable of the templateField to false
   set the width of the templateField to 400
   set the height of the templateField to 100
   set the left of the templateField to 575  + (1024 * 1)
   set the top of the templateField to 300
   set the opaque of the templateField to false
   set the selected of the templateField to false
   set the locktext of the templateField to true
   set the threeD of the templateField to false
   set the borderwidth of the templateField to 0
   set the textSize of the templateField to 24
   set the textStyle of templateField to "bold" --"italic,bold"
   set the text of the templateField to "Editorial Portfolio" --& return & "selected works from all portfolios"
   create field "KOKO" in group "scrollGroup"
   
   set the script of the templateButton to "on mouseUp" & cr & "beep" & cr & "end mouseUp"
   set the width of the templateButton  to 70
   set the height of the templateButton  to 20
   set the left of the templateButton to 580 + (1024 * 1)
   set the top of the templateButton to 335
   set the label of the templateButton to "Download"
   create button in group "scrollGroup"
   
   ---
   set the width of the templateImage to 1
   set the height of the templateImage to 1
   set the left of the templateImage to 1024 *2
   set the top of the templateImage to 23
   create image "03" in group "scrollGroup"
   
   set the width of the templateImage to 400
   set the height of the templateImage to 545
   set the left of the templateImage to (1024 *2) + 175
   set the top of the templateImage to 23
   create image "koko3" in group "scrollGroup"
   set the filename of image "koko3" to "http://koraybirand.co.uk/kb_newsstand/0003_Advertisement%20Works_cover.jpg"
   
   --set the focusable of the templateField to false
   set the width of the templateField to 400
   set the height of the templateField to 100
   set the left of the templateField to 575  + (1024 * 2)
   set the top of the templateField to 300
   set the opaque of the templateField to false
   set the selected of the templateField to false
   set the locktext of the templateField to true
   set the threeD of the templateField to false
   set the borderwidth of the templateField to 0
   set the textSize of the templateField to 24
   set the textStyle of templateField to "bold" --"italic,bold"
   set the text of the templateField to "Advertisement Portfolio" --& return & "selected works from all portfolios"
   create field "KOKO" in group "scrollGroup"
   
   set the script of the templateButton to "on mouseUp" & cr & "beep" & cr & "end mouseUp"
   set the width of the templateButton  to 70
   set the height of the templateButton  to 20
   set the left of the templateButton to 580 + (1024 * 2)
   set the top of the templateButton to 335
   set the label of the templateButton to "Download"
   create button in group "scrollGroup"
   ---
   
   set the width of the templateImage to 1
   set the height of the templateImage to 1
   set the left of the templateImage to 1024 *3
   set the top of the templateImage to 23
   create image "04" in group "scrollGroup"
   
   set the width of the templateImage to 400
   set the height of the templateImage to 545
   set the left of the templateImage to (1024 *3) + 175
   set the top of the templateImage to 23
   create image "koko4" in group "scrollGroup"
   set the filename of image "koko4" to "http://koraybirand.co.uk/kb_newsstand/0004_Covers_cover.jpg"
   
   --set the focusable of the templateField to false
   set the width of the templateField to 400
   set the height of the templateField to 100
   set the left of the templateField to 575  + (1024 * 3)
   set the top of the templateField to 300
   set the opaque of the templateField to false
   set the selected of the templateField to false
   set the locktext of the templateField to true
   set the threeD of the templateField to false
   set the borderwidth of the templateField to 0
   set the textSize of the templateField to 24
   set the textStyle of templateField to "bold" --"italic,bold"
   set the text of the templateField to "Recent Covers" --& return & "selected works from all portfolios"
   create field "KOKO" in group "scrollGroup"
   
   set the script of the templateButton to "on mouseUp" & cr & "beep" & cr & "end mouseUp"
   set the width of the templateButton  to 70
   set the height of the templateButton  to 20
   set the left of the templateButton to 580 + (1024 * 3)
   set the top of the templateButton to 335
   set the label of the templateButton to "Download"
   create button in group "scrollGroup"
   
   --dummy
   set the width of the templateImage to 1
   set the height of the templateImage to 1
   set the left of the templateImage to (1024 *3) + 1024
   set the top of the templateImage to 23
   create image "koko5" in group "scrollGroup"
   
   ----scroller
   put the rect of group "scrollGroup"  into fldRect
   answer fldRect
   
   set the unboundedVScroll of group "scrollGroup"  to true
   set the unboundedHScroll of group "scrollGroup"  to true
   
   iphoneControlCreate "scroller"
   put the result into scrollid
   
   iphoneControlSet scrollid, "rect", fldRect
   iphoneControlSet scrollid, "contentRect", (0, 0, 1024*4, 574)
   iphoneControlSet scrollid, "visible", true
   iphoneControlSet scrollid, "canBounce", true
   iphoneControlSet scrollid, "declerationRate", fast
   iphoneControlSet scrollid, "scrollingEnabled", true
   iphoneControlSet scrollid, "canScrollToTop",true
   iphoneControlSet scrollid, "canCancelTouches",true
   iphoneControlSet scrollid, "delayTouches", true
   iphoneControlSet scrollid, "vIndicator", true
   iphoneControlSet scrollid, "indicatorStyle", black
   iphoneControlSet scrollid, "indicatorInsets",  "0,0,5,0"
   iphoneControlSet scrollid, "hscroll", 0
   iphoneControlSet scrollid, "vscroll", 0
  
end preOpenCard


on closeCard
   if environment() is not "mobile" then exit closeCard
   iphoneControlDelete scrollid
end closeCard

[endernafi]

Hi Koray,

You've created a scroller but didn't tell what to do with it.
Put this code into your card script, then it works.

Code: Select all

on scrollerDidScroll pX, pY
   set the hScroll of group "scrollGroup" to pX
   set the vScroll of group "scrollGroup" to pY
end scrollerDidScroll

Best,

~ Ender Nafi

[kbirand]

Hi Koray,

You've created a scroller but didn't tell what to do with it.
Put this code into your card script, then it works.

Code: Select all

on scrollerDidScroll pX, pY
   set the hScroll of group "scrollGroup" to pX
   set the vScroll of group "scrollGroup" to pY
end scrollerDidScroll

Best,

~ Ender Nafi

Oh I am so embarrassed now... Do everything and do not put the real lines of code

Thanks, Ender ....

[endernafi]

Hi Koray,

No need to embarrassment, really, it happens to even the best
It's a learning curve, after all.

Btw, yours look like a nice promising app.
Could you share iTunes Store link of final version, when it's finished?
I'm sure that many of us would glad to have a look of it, well including me.


Best,

~ Ender Nafi

[kbirand]

Sure when it is finished, I am going to make it open source so that people can use it and develop it.
But it is going to take a while since I am just coding as a hobby.

Koray

[kbirand]

Hi Koray,

No need to embarrassment, really, it happens to even the best
It's a learning curve, after all.

Btw, yours look like a nice promising app.
Could you share iTunes Store link of final version, when it's finished?
I'm sure that many of us would glad to have a look of it, well including me.


Best,

~ Ender Nafi

Ender or Anyone out there,

Can you please check the attached file with the IOS Simulator,

I am having problems with
flip image xxx vertical

The flipped images right side has a corrupted border. If I do not flip the
image everything seems to be fine. Is this a bug of LiveCode ?

And also simulator scrolling is really smooth but on an actual iPad 3 the
scroll is really sloppy.

Thanks,
Koray

[endernafi]

Hi Koray,

And also simulator scrolling is really smooth but on an actual iPad 3 the
scroll is really sloppy.

There are some commands to tweak the performance of LiveCode engine.
One of them is set the acceleratedRendering of this stack to true
The others are compositorCacheLimit, compositorTileSize, compositorType.
Please check'em out in the dictionary.
Last three commands require some experimentation to find the right values.
{An experienced LiveCoder maybe can help us about this issue?}
I've put them in preOpenStack handler of your stack.
But acceleratedRendering and compositorType commands
create a giant black button under the cover images in your case.
I absolutely don't know why.
You may check your card script for possible reasons, thus more and more experimentation and debugging...

The flipped images right side has a corrupted border.

I've encountered a similar problem with blendLevel property of an image.
I don't know true reason
{An experienced LiveCoder maybe can help us about this issue, too?}
but I've found a solution through many experimentations.
It's something about your original image file's quality and/or properties.
* Use png files.
* Try to export them with different settings {size, dpi, etc.}
* Try to convert the image to a jpeg, then to a png.
* Try to use a button instead of an image. You can set the icon of button to the image.


Some other changes I've made to your stack:
* It's an iPad app, I understand.
Then set the Build for option to iPad in Standalone Application Settings.
* You play around with the template controls, you should reset them after you've done with them.
reset the templateImage; reset the templateField; reset the templateButton
It's a good coding habit.
* A mistake which most LiveCoders make: it's not declerationRate, it's decelerationRate
as in iphoneControlSet scrollid, "decelerationRate", normal


I've attached tweaked stack.
All my changes are between #enderNafi tags.


Hope it helps


Best,

~ Ender Nafi

scroll_test.zip

(164.71 KiB) Downloaded 324 times