Leaves and UIWebView (1)

讨论了如何使用UIWebView与Leaves库来显示EPUB书籍,并实现了类似PDF的翻页效果。通过捕获UIWebView的内容为图片并利用Leaves的翻页动画展示这些图片,成功创建了一个动态的阅读体验。

From: http://groups.google.com/group/leaves-developers/browse_thread/thread/27e4bf5ff3c53113

 

 


Messages 1 - 25 of 53 - Collapse all
  Newer >
   
Varedis  
View profile  
 More options Jul 16, 6:13 am
I am not sure if Tom checks this page anymore, or even if he has time 
to work on Leaves anymore, however if he is around or if anyone would 
like to do a little brainstorming on how we can enhance Leaves, feel 
free to join me. 

I am trying to implement a UIWebView with Leaves in order to show epub 
books. Now I don't need the scrolling as the text that falls off 
screen will be passed to the next page, so basically it is just a 
dynamic PDF. 

Now in theory I believe it would be possible to capture what is 
displayed in the UIWebView to an image with: 

UIGraphicsBeginImageContext(webview.bounds.size); 
[webview.layer renderInContext:UIGraphicsGetCurrentContext()]; 
UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

and then animate this using the same code as the page flip. When the 
user is about to flip it would load up another UIWebView behind with 
the next bit of text. 

I am basically trying to hack and slash my way through the leaves code 
to implement this, and if anyone has anything to add, feel free


    Forward  
   
   
Saqib Saud  
View profile  
 More options Jul 16, 7:12 am

Wow! Im working on something else.... trying to zoom in/out pdf page ...and 
move it. 

for me time is short, Im stressing in finishing the job rather than adding 
perfection. 

On Fri, Jul 16, 2010 at 3:13 PM, Varedis <robert.scot...@btinternet.com>wrote: 

 


    Forward  
   
   
Melvin Dave Vivas  
View profile  
 More options Jul 16, 7:15 am

Hi Saqib, 

Will you be sharing the zoom implementation as well? I'm also interested in 
doing something similar. 

Melvin 

 


    Forward  
   
   
Saqib Saud  
View profile  
 More options Jul 16, 7:15 am

Okay I will, For now im running in alot of problems :( 

On Fri, Jul 16, 2010 at 4:15 PM, Melvin Dave Vivas <melvind...@gmail.com>wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 19, 7:55 am
Ok, got the UIWebView working somewhat by using: 

- (void) renderPageAtIndex:(NSUInteger)index inContext: 
(CGContextRef)ctx { 
        UIGraphicsBeginImageContext(webView.bounds.size); 
        [webView.layer renderInContext:UIGraphicsGetCurrentContext()]; 
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 
        UIGraphicsEndImageContext(); 

        CGRect imageRect = CGRectMake(0, 0, image.size.width, 
image.size.height); 
        CGAffineTransform transform = aspectFit(imageRect, 
                                                                                        CGContextGetClipBoundingBox(ctx)); 
        CGContextConcatCTM(ctx, transform); 
        CGContextDrawImage(ctx, imageRect, [image CGImage]); 

 



It does show the WebView flipping over just as it would for a pdf, 
however in most cases it is throwing up an error, and because of this 
missing pages out. 

the error: 

bool _WebTryThreadLock(bool), 0x4b3d7a0: Tried to obtain the web lock 
from a thread other than the main thread or the web thread. This may 
be a result of calling to UIKit from a secondary thread. Crashing 
now... 

Apparently this is caused by trying to interact with UI elements on a 
background thread. 

Anybody with a little bit more experience know a way around this? 

On Jul 16, 12:15 pm, Saqib Saud <wisesa...@gmail.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 19, 11:55 am
For anyone that may be interested in this here is a little video: 

http://screencast.com/t/ZmM5MjI1 

This demo is basically taking an xml file, loading it up in a 
UIWebView and then rendering it to a static image. 

The first view you see in the video is the actual UIWebView that 
displays the content, this is a subview that is then hidden (this is 
obviously going to be a static page as well but there are a few coding 
issues to work around first. 

The blank page is also caused by the same issue mentioned above 

The third and fourth pages are the data from the UIWebView that has 
been rendered static by Leaves 

Just for fun: 

http://screencast.com/t/MDAyMWM1 

Loading up a webpage, as you can see same initial problem with the 
first two pages. But then the website basically becomes a book. 

On Jul 19, 12:55 pm, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 19, 5:24 pm
Hi again, 

Not sure if anyone is even interested in this but might as well keep 
documenting it. 

I have managed to fix it so the first page is actually rendered, but 
the first and second page are both the same. 

This is because where I should be taking the image of the next page, I 
am actually taking the current page, so it is offsetting everything by 
one page. 

The PDFExample implements this in the render method: 

CGPDFPageRef page = CGPDFDocumentGetPage(pdf, index + 1); 

I need to figure a way to implement the same thing for a UIWebView 

On Jul 19, 4:55 pm, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Melvin Dave Vivas  
View profile  
 More options Jul 19, 11:57 pm

I'm interested! If you get to implement this then you can even put all of 
your content online and still have the book effect. 

Melvin 
--- 
Follow me in Twitter! - http://twitter.com/donvito 

On Tue, Jul 20, 2010 at 5:24 AM, Varedis <robert.scot...@btinternet.com>wrote: 

 


    Forward  
   
   
Carlo  
View profile  
 More options Jul 20, 3:18 am
I am VERY interested too! 
But I am a beginner, and for me Xcode and ObjC are unfamiliar... 

I'll follow your progress! 

On 19 Lug, 23:24, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 20, 3:31 am
While the possibility is there, you would be neglecting the part of 
the market that are on Ipod touches, and anyone without a data plan. 

I am developing on an Ipod touch and I find it frustrating when I need 
to connect to the internet to use an app. Especially something that 
are supposed to be portable like books. 

In my opinion, it shouldn't matter if I am at home, or up mount 
Everest, I should still be able to use the app. 

I am using in app purchasing in my app to download the book to the 
users document folder and then it will be stored in there for use at 
any time. 

On Jul 20, 4:57 am, Melvin Dave Vivas <melvind...@gmail.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 20, 7:05 am
Ok I am making some headway now, 

New video: 

http://screencast.com/t/ZDc3NWNmMDct 

Now I have chosen to show a cover image first as this is how I am 
going to want my books to work anyway, the flash of text you see at 
the start is the webview loading up, I need to try and hide that. 

The pages are then all rendered correctly, till the end of the book. 

You may also notice on my last page I have a bit of overlapped text 
from the last page, this is caused by the UIWebView not having enough 
content to scroll down far enough, so it is scrolling down to its 
limit and then repeating some text. 

I have sorted this by using javascript to insert a spacer at the end 
and sizing it to the discrepancy. 

The new video of that: 

To do still: 

Make sure that no text can be cut in half by sitting on the edge of 
the webview frame. (the biggest problem) 

Implement overlays when the user touches the middle of the screen (I 
have done this for PDF already so that should be a quick port) 

Slider to change font size (maybe also two finger pinch and pull) 

On Jul 20, 8:31 am, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 20, 7:06 am
Forgot to include the new vid: 

http://screencast.com/t/Yjg5NGU2N 

On Jul 20, 12:05 pm, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Carlo  
View profile  
 More options Jul 20, 9:41 am
Wow! Good work! 

Can you release the source code? 

On 20 Lug, 13:06, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 20, 9:51 am
Once I have added the last remaining bits I will be releasing the 
source code to you guys. 

One note however, I have broken the ability to view websites as books, 
in order for me to delay the immediate firing of the renderpageatindex 
method I had to change a tiny bit of leaves code. 

This seems to have stopped websites from rendering properly but for my 
included code it seems to be working fine. 

I will not be fixing this issue, unless it causes problems related to 
my app. 

On Jul 20, 2:41 pm, Carlo <carlo.ge...@gmail.com> wrote: 

 


    Forward  
   
   
Carlo  
View profile  
 More options Jul 20, 10:06 am
But is it possible to use pinchzoom and tapzoom with pdf files? 

On 20 Lug, 15:51, Varedis <robert.scot...@btinternet.com> wrote: 

 


    Forward  
   
   
Varedis  
View profile  
 More options Jul 21, 3:55 am
Carlo, I am not really dealing with the PDF side of leaves however you 
could take my code as an example and work on a solution for yourself, 
I will be honest and say I don't know much about the IPhone SDK, but 
working on this has really helped to broaden my knowledge and think 
outside the box to problems. 

New Video: 

http://screencast.com/t/ZjFjNTFiOT 

Done: 

Slider to resize text (Going to change this to two buttons to step the 
text size as I am finding it annoying to find the default value again 
or get back to a certain value) 

Overlays are done. 

Still to do: 

Make sure text doesn't fall off the page 

Use the slider already implemented to allow flipping to a certain 
page. 

On Jul 20, 3:06 pm, Carlo <carlo.ge...@gmail.com> wrote: 

 

...

read more »


    Forward  
   
   
Varedis  
View profile  
 More options Jul 22, 10:06 am
Hey Guys, 

Another video update: 

http://screencast.com/t/NDNjODFkODMt 

The two images in the bottom left of the overlay will represent the 
text sizes plus and minus. 

The bottom right image is for changing the colour styles as you can 
see. 

Issues: 

If you resize the text will in black and white mode the text 
disappears. 
Noticed in the video as well that colour switching will make the text 
smaller or larger. 
Also need to sort out returning to the page on these switches 

On Jul 21, 8:55 am, Varedis <robert.scot...@btinternet.com> wrote: 

 

...

read more »


    Forward  
   
   
Varedis  
View profile  
 More options Jul 27, 10:58 am
Its been a slow few days but it looks like I have found a solution to 
the text sitting on the page correctly and not falling of the edge. 

I will hopefully be able to get a video of this tonight. 

On Jul 22, 3:06 pm, Varedis <robert.scot...@btinternet.com> wrote: 

 

...

read more »


    Forward  
   
   
Varedis  
View profile  
 More options Aug 4, 4:43 am
Cracked it! 

Finally after days and weeks of attempts and hacking and slashing code 
together I found out how to paginate the code correctly so nothing 
hangs of the edge no matter the size, video: 

http://screencast.com/t/ZTRjMzk4NmEt 

A bit of tidy up and sorting a few things out like opening at page and 
auto bookmarking and we are ready to go. 

On Jul 27, 3:58 pm, Varedis <robert.scot...@btinternet.com> wrote: 

 

...

read more »


    Forward  
   
   
tbashir  
View profile  
 More options Aug 12, 2:32 pm
Your latest version looks excellent. Are you planning to share the 
updates you've made to the code to get this extra functionality? Would 
really appreciate it. 

Tariq 

On Aug 4, 9:43 am, Varedis <robert.scot...@btinternet.com> wrote: 

 

...

read more »


    Forward  
   
   
Varedis  
View profile  
 More options Aug 12, 5:09 pm
Hi Tariq, 

I do plan on releasing the source, but it is no where near ready yet, 
There is a very big problem with page indexing. 

At the minute, the only solution is to keep the page cache and never 
flush it, but of course this fills up memory very quick and crashes 
after 50 pages. 

So I need to devise a way to set up rendering so it can pick out 
proper pages. 

On Aug 12, 7:32 pm, tbashir <tbashi...@gmail.com> wrote: 

 

...

read more »


    Forward  
   
   
Josh  
View profile  
 More options Aug 13, 5:09 pm
Varedis, 

Ive got to say, that is pretty impressive. Excellent work! 

On Aug 12, 4:09 pm, Varedis <robert.scot...@btinternet.com> wrote: 

 

...

read more »


    Forward  
   
   
sneha  
View profile  
 More options Sep 2, 3:16 am
Hi Varedis, 

I am tryng to create a epub reader (i checked out the video its 
amazing) . I have already changed the font and the color and 
everything via a CSS file in the html pages. I am stuck up with the 
paging of the webPage (html file) i mean dynamically analyze the 
everything and prevent the images for cropping .  I tried using the 
scrollToTop (javascript) one but its not working the way i want to :(. 
Any help is appreciated. 

On Aug 13, 2:09 am, Varedis <robert.scot...@btinternet.com> wrote: 

 

...

read more »


    Forward  
   
   
Varedis  
View profile  
 More options Sep 2, 3:53 am
Hi, 

Are you using images in your html file or just text? 

On Sep 2, 8:16 am, sneha <jacksn...@gmail.com> wrote: 

 

...

read more »


    Forward  
   
   
snehal..............  
View profile  
 More options Sep 2, 4:36 am

Hi, 

I am using images + text . I know its very difficult to do that with the 
images inside it  :) . But atleast i want to get started so i can improve it 
. Currently i m looking at something like finding the pixel height of the 
font via javascript but i just wanted to know how you have done the chunking 
of the HTML file (when you change the font also) . Can you help me atleast 
getting started via guiding me in a right direction . Because i will be 
ending up doing wht you have shown in your final video :) .  And can work on 
the other features like playing a video embedded inside it or the 
interactivity of the reader. (like a digital magazine) . 

On Thu, Sep 2, 2010 at 1:23 PM, Varedis <robert.scot...@btinternet.com>wrote: 

 

...

read more »


    Forward  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值