UIWebView

[Varedis]

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

[Saqib Saud]

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.

[Melvin Dave Vivas]

Hi Saqib,

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

Melvin

[Saqib Saud]

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

[Varedis]

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:
> 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:
>
> > Hi Saqib,
>
> > Will you be sharing the zoom implementation as well? I'm also interested in
> > doing something similar.
>
> > Melvin
>

> > On Fri, Jul 16, 2010 at 7:12 PM, Saqib Saud <wisesa...@gmail.com> wrote:
>
> >> 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.
>

[Varedis]

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.

[Varedis]

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

[Melvin Dave Vivas]

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

[Carlo]

I am VERY interested too!
But I am a beginner, and for me Xcode and ObjC are unfamiliar...

I'll follow your progress!

[Varedis]

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:
> 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

[Varedis]

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)

[Varedis]

Forgot to include the new vid:

http://screencast.com/t/Yjg5NGU2N

[Carlo]

Wow! Good work!

Can you release the source code?

[Varedis]

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.

[Carlo]

But is it possible to use pinchzoom and tapzoom with pdf files?

[Varedis]

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.

[Varedis]

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

> ...
>
> read more »

[Varedis]

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.

> ...
>
> read more »

[Varedis]

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.

> ...
>
> read more »

[tbashir]

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

> ...
>
> read more »

[Varedis]

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.

> ...
>
> read more »

[Josh]

Varedis,

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

> ...
>
> read more »

[sneha]

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.

> ...
>
> read more »

[Varedis]

Hi,

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

> ...
>
> read more »

[snehal..............]

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) .

--
--
Thanks & Regards
Sneha S

[Varedis]

My soultion involves using CSS to cut up the file into columns so no
javascript is used.

However I worked with trying to implement javascript paginating for a
while, there are a few opensource javascript readers on the internet
that you can look at the code for and disect.

Getting the font size I implemented at a point the code I used was:

[self.webView stringByEvaluatingJavaScriptFromString:@"var who =
document.createElement('div');"
"who.id = 'tem';"
"who.style.padding = '0px';"
"who.style.margin = '0px';"
"who.style.lineHeight = '1';"
"who.style.position = 'absolute';"
"who.style.visibility = 'hidden';"
"who.appendChild(document.createTextNode('M'));"
"document.getElementsByTagName('body')[0].appendChild(who);"];

float mHeight = [[self.webView
stringByEvaluatingJavaScriptFromString:@"document.getElementById('tem').offsetHeight;"]
intValue];

NSLog(@"M HEIGHT: %f", mHeight);

This will get the current eM size of the font and return it as pixels.

On Sep 2, 9:36 am, "snehal.............." <jacksn...@gmail.com> wrote:
> 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) .
>

> ...
>
> read more »

[snehal..............]

Hi Varedis,

Thanks for your quick reply and thanks for sharing the code too .

 I have implemented paging via java script and its working good :) not the way i want . Actually we need the bar in the bottom like the iBook have where a person can directly scroll and go and tht's basically a paging thing. Now i m working on the font size and the image sizes :) still no luck with a proper way . Do you have a idea how to do that i mean currently i am just going at that path and taking the image height and width which is like very much time consuming.

And I just want your opinion on something like . I mean do you think the iBook is merging all the html files into a single one and making that paging possible for them I just need a opinion on this :) .Because how they are showing the page numbers and the things ?

Sorry i mean i ask lots and lots of questions :) .

[dBonates]

Hi all,

Varedis, great work! I'm curious abou the results at end :)

And about the question above, I dont think iBooks uses html at all...
I seems to me that they use UITextInput and CoreText. I could be
wrong, but with this aproach, rendering pages as images, they couldnt
get that selection feature and any others related to texto
manipulation.

By the way, Im trying to figure how it can be done, I mean, write
pages full of selectable texts on Leaves Views...

Cheers :)

On 2 set, 09:45, "snehal.............." <jacksn...@gmail.com> wrote:
> Hi Varedis,
>
> Thanks for your quick reply and thanks for sharing the code too .
>
>  I have implemented paging via java script and its working good :) not the
> way i want . Actually we need the bar in the bottom like the iBook have
> where a person can directly scroll and go and tht's basically a paging
> thing. Now i m working on the font size and the image sizes :) still no luck
> with a proper way . Do you have a idea how to do that i mean currently i am
> just going at that path and taking the image height and width which is like
> very much time consuming.
>
> And I just want your opinion on something like . I mean do you think the
> iBook is merging all the html files into a single one and making that paging
> possible for them I just need a opinion on this :) .Because how they are
> showing the page numbers and the things ?
>
> Sorry i mean i ask lots and lots of questions :) .
>

> ...
>
> mais »- Ocultar texto das mensagens anteriores -
>
> - Mostrar texto das mensagens anteriores -

[snehal..............]

Hi Varedis,

Finally I got a break through :) . And now i know how iBook must have been done :) . What i asked in the previous question is r8 . After completion of that thing i would like to share the code with you for the further processing of that with the rendering part and some other features which i would like to do .. Finally i m happy :) ... I will post the video of it soon :) .

[Varedis]

Hi Snehal,

I look forward to seeing what you have achieved.

dBonates:

While I haven't extensively tested the subject of text selection I did
briefly brainstorm it, without any tested I would say that the
interactionLocked method needs to be looked at and utilized in Leaves

On Sep 2, 4:15 pm, "snehal.............." <jacksn...@gmail.com> wrote:
> Hi Varedis,
>

> Finally I got a break through :) . And now i know how iBook must have been
> done :) . What i asked in the previous question is r8 . After completion of
> that thing i would like to share the code with you for the further
> processing of that with the rendering part and some other features which i
> would like to do .. Finally i m happy :) ... I will post the video of it
> soon :) .
>

> ...
>
> read more »

[ashraf]

I also tried the css3 multi columns support, I started my tests on
Safari and it worked like a charm. I was disappointed when I moved my
code to iPad, it seems that mobile safari does not support the columns
module fully.

If you can guide me a little bit on this, I will esteem it a favor.

The second approach is to fill a div with the content word by word
until scrollHieght equals the offsetHieght.

NSArray * contentArray = [chapter.Content
componentsSeparatedByString:@" "];

<script language="JavaScript" type="text/javascript">

var content = "";

function setContent(){

theObj = document.getElementById("foo");
theObj.innerHTML = content;
if(theObj.offsetHeight == theObj.scrollHeight)
return "OK";

return "NO";
}
</script>

still this way is slow and it is not the most efficient.
Now I paginate the content for each font size and store the positions
in a database.
Still I want a dynamic solution.


-----------------------------------------

> > > > > > > > > > > > > > > > In my...
>
> read more »

[Varedis]

Mobile Safari does support multi columns, however it needs a little
helping hand to make it think in the right way.

The Css File:

html {
width:100%; // Do Not Change
height: 480px; // Height of Screen, could be set to 100% maybe
margin: 0px;
padding: 0px;
font-size:16px;
}
body {
margin: 0px;
padding: 0px;
}
#viewer {
width: 320px; // SCREEN WIDTH
height: 480px; // SCREEN HEIGHT
}
#book {
width: 630px; //DOUBLE SCREEN WIDTH MINUS WHATEVER MARGIN YOU
WANT - THIS IS THE KEY
height:470px; //SCREEN HEIGHT MINUS MARGIN
padding:5px;
-webkit-column-width:300px;
-webkit-column-gap:10px;
text-align:justify;
padding-right: 10px;
}


Your content will need to be wrapped by the two divs like so:

<div id="viewer">
<div id="book">
....Content....
</div>
</div>

Then everything should work.

The width of the book div is the key to forcing the content to
transfer into columns correctly

[ashraf]

Many thanks for sharing this piece of innovation, I really liked it.

How did you solved the problem of memory consumption?

Although I use background rendering, still RenderPageAtIndex method
eats the memory in seconds, the NSAutoRealsePool trick didn't work
here.

Thank you again

[Varedis]

Haven't had a problem with memory consumption here

[Mohammed Al-Ashraf Osman]

Thanks for your answer, the problem which I am talking about is this:

Hi Max!

This is because application use all memory :(

I fixed this bug locally (you should release all hidden layers) but by now I'm unable to do a commit :(

Just few days ;)

Salvatore

Please tell us which hidden layer must be released in LeavesView class.

The sooner is better.

Sent from my iPad

[Varedis]

Been trying to set up a GitHub account but it won't let me push any
changes into it, if anyone could help me sort this out that would be
awesome.

For now here is the complied source for this

http://www.robsanimate-studio.co.uk/UIWebView_leaves.zip

Warning: As it stands this will not work with any other type of
rendering like the pdf or image rendering seen in the normal leaves.
There may be a slight bug on the Simulator when you change the text
size and part of the screen retains the old text size. This seems to
be just a simulator bug and from my testing it works fine on the
device.

[Madhu Bhilwadi]

this app is crashing. and one more thing , i observed is ,
  i edited the xhtml file and inserted some hyperlinked content with Tag <a href> ---- </a>.

it highlighted that text, but after clicking that is is not responding to following method.
May i know y ?


- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
   
    if(navigationType == UIWebViewNavigationTypeLinkClicked) {
        NSLog(@" link clicked");
     
            [myWebView stopLoading];
            
            return YES;
      }
   
    return YES;

--

This is my profile:
http://www.google.com/profiles/madhu.bhilwadi88

Madhu Bhilawadi

[Varedis]

Can you give me anymore info on the crash? any errors or warnings?
where exactly does it crash what is it logging in the console?

The hyperlink problem is that all touches are passed to Leaves and not
the UIWebView. You would have to find a way to build your touches to
know what is a hyperlink touch and what is a page turn touch.

[Madhu Bhilwadi]

it works fine wen i am in debugging mode
but it crashes if i run

One more thing is , u are using xhtml file, is it possible for me to use pdf instead??

[Varedis]

Is it crashing on the device or the simulator?

I haven't tried using a pdf in a webview before, if you want to try go
ahead and let me know the results

On Sep 21, 1:14 pm, Madhu Bhilwadi <bhilwadi.ma...@gmail.com> wrote:
> it works fine wen i am in debugging mode
> but it crashes if i run
>
> One more thing is , u are using xhtml file, is it possible for me to use pdf
> instead??
>

[Madhu Bhilwadi]

in simulatior

[Varedis]

Try adding:

gpdfpass= [NSString stringWithFormat:@"The Colour of Magic"];

to the top of the init method in WebViewController just above where it
hides the bottom bar.

Thats the only thing I can think of that it is not getting, which is
the name of the book.

Also there are a couple of deprieciated statements throughout the code

If you get warnings change:

[[UIApplication sharedApplication] setStatusBarHidden:NO animate:YES];
[[UIApplication sharedApplication] setStatusBarHidden:YES
animate:YES];

to

[[UIApplication sharedApplication] setStatusBarHidden:NO
withAnimation:YES];
[[UIApplication sharedApplication] setStatusBarHidden:YES
withAnimation:YES];

On Sep 22, 2:17 pm, Madhu Bhilwadi <bhilwadi.ma...@gmail.com> wrote:
> in simulatior
>

[Madhu Bhilwadi]

ok thanq fir the good response :)


I actually not using web view to display pdf, i have used http://github.com/ole/leaves/tree/twopages for my project

 Now i want pdf internal URL to work
How can i proceed , after clicking URL , how should i get the link?

[Tony]

Has the code been moved? This link doesn't work for me. Thanks

[Madhu Bhilwadi]

the link download source is there at the top

[wesam Taha]

the link is not working

The page cannot be found

The page you are looking for might have been removed, had its name
changed, or is temporarily unavailable.

> > http://www.robsanimate-studio.co.uk/UIWebView_leaves.zip

[Daniel Bonates]

the host does really exist? Someone ghot the zip???

thanks in advance :)

2010/10/2 wesam Taha <bus...@gmail.com>:

--
Daniel Bonates
=========================
msn: daniel...@hotmail.com

[Raj]

Varedis/Madhu,

I'm working on similar webview issue. Can you please share the zip
file?

Appreciate your help,

Thanks,
Raj
basa...@gmail.com

On Oct 5, 10:26 am, Daniel Bonates <dbona...@gmail.com> wrote:
> the host does really exist? Someone ghot the zip???
>
> thanks in advance :)
>

> 2010/10/2 wesam Taha <busb...@gmail.com>:

> msn: danielbona...@hotmail.com

[Varedis]

Hi Guys,

I have reuploaded the file again, I have made a few changes and put
some comments in so you know what bit does what, its not the cleanest
code in the world but it gets the job done.

What this code does:

Renders Epub books to a UIWebView
Paginates written content correctly

What this does not do currently:

This will not paginate images correctly

Issues:

None on the device
Simulator has an issue if you are changing the text size on the second
page but I can't see where that is coming from.
The leaves code will not work with other forms of content like PDF or
Images.


I will not provide debugging tips for any other part of leaves as this
is not my project, I will provide debugging for my UIWebView parts
however.


If you like my code I would appreciate any donation you can give for
the hours I have put in to this:

https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=48CZEM9ZTWB7Y

On Oct 14, 3:47 pm, Raj <basav...@gmail.com> wrote:
> Varedis/Madhu,
>
> I'm working on similar webview issue. Can you please share the zip
> file?
>
> Appreciate your help,
>
> Thanks,
> Raj

> basav...@gmail.com

[Varedis]

I forgot to put the link to the file in, that may help:

http://www.robsanimate-studio.co.uk/leaves.zip

On Oct 20, 9:48 am, Varedis <robert.scot...@btinternet.com> wrote:
> Hi Guys,
>
> I have reuploaded the file again, I have made a few changes and put
> some comments in so you know what bit does what, its not the cleanest
> code in the world but it gets the job done.
>
> What this code does:
>
> Renders Epub books to a UIWebView
> Paginates written content correctly
>
> What this does not do currently:
>
> This will not paginate images correctly
>
> Issues:
>
> None on the device
> Simulator has an issue if you are changing the text size on the second
> page but I can't see where that is coming from.
> The leaves code will not work with other forms of content like PDF or
> Images.
>
> I will not provide debugging tips for any other part of leaves as this
> is not my project, I will provide debugging for my UIWebView parts
> however.
>
> If you like my code I would appreciate any donation you can give for
> the hours I have put in to this:
>

> https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=...

[Xianwen Lin]

The donation link doesn't work for me
Thanks for sharing your code

[Upendra Tripathi]

What do I need to change to make it iPad compatible (current version is not compatible). And one more thing if the same I have to do for the Images, how can I achieve this.

Looking forward to hear back from you.
Thanks a lot for sharing this code.

[Varedis]

By compatible do you mean the size?

In Globals.h you will see some defines at the top just comment out the
IPhone sizes and uncomment the IPad sizes. There may be a better way
to do that so you can switch between both depending on the device but
it was something I never tested.

For images I would assume you would need to look into javascript in
order to detect image size and shrink it to fit on the page.

On Oct 21, 9:07 am, Upendra Tripathi <upt...@gmail.com> wrote:
> What do I need to change to make it iPad compatible (current version is not
> compatible). And one more thing if the same I have to do for the Images, how
> can I achieve this.
>
> Looking forward to hear back from you.
> Thanks a lot for sharing this code.
>