webpage surfing with page curl animation ios - html

i have a html file that contains some data,since i display this in a webview the user has to scroll down to view the information,what i want to know is whether i can provide a page curl animation to view the contents of the html so that it becomes easier for the user to read the information by swiping across pages,
should i use pageviewcontroller? or are there any other libraries that let me have the page curl effect on a custom(webview)? how do i proceed? is it possible to show some amount of html information on one page and then user turns to the next page? how do i achieve that,its a single html file

If you want that sort of paging, then maybe you could try the leaves library https://github.com/brow/leaves You can use it to page through various UIWebView's
As you can see in the leaves sample you have to render the page in the renderPageAtIndex.
You can then use something like:
- (void) renderPageAtIndex:(NSUInteger)index inContext:(CGContextRef)ctx {
CGSize screensize = CGSizeMake(320,480);
UIGraphicsBeginImageContext(screensize);
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat scalingFactor = screensize.width/webView.frame.size.width;
CGContextScaleCTM(context, scalingFactor,scalingFactor);
[webView.layer renderInContext: ctx];
}
You do have to load the webview first.

Related

Rendering a pdf file from an html view to display it on a web page as a image preview

I need to create a pdf preview that should be displayed on a web page as an image. The pdf file is just a simple report build on almost plain HTML. Essentially I had a problem with displaying checkboxes, now I replaced them with pics of checkboxes but the issue remains the same.
Here how I create the pdf report from my HTML view with help of groovy and grails:
def html = htmlRenderService.getReport(info)
ByteArrayOutputStream out = new ByteArrayOutputStream()
HtmlImageGenerator htmlImageGenerator = new HtmlImageGenerator()
htmlImageGenerator.loadHtml(html)
BufferedImage bi = htmlImageGenerator.bufferedImage
ImageIO.write(bi, "PNG", out)
byte[] bytes = out.toByteArray()
String base64bytes = encoder.encodeToString(bytes)
String src = "data:image/png;base64," + base64bytes
out.flush()
def getReport(Info info) {
return groovyPageRenderer.render(view: REPORT_VIEW,
model: [info: info])
}
Then I send the src string to my view and render it as:<img src="${src}" alt=""/>
Then my checkbox pic looks like this: <div style="/*style stuff*/ background-image: url(data:image/png;base64,LINK_TO_THE_IMAGE"></div>
In the end, I received a picture of my pdf report rendered pretty well displaying as an image on my page, BUT without checkboxes. Here is the picture of one part of it:
And here is the same part but from the pdf document which I rendered all the same way, but just downloaded directed from my webapp:
Here is an example where I combined both options(input checkbox and image checkbox) and rendered it as an image:
So what could cause this issue? Thank you in advance.
UPDATE: I came across today to this comment under another issue with HtmlImageGenerator:
HtmlImageGenerator seems to use a JEditorPane for rendering the HTML. Swing HTML support does not extend to the ability to render data images. It might be possible by digging into the HTMLEditorKit and changing the image loading element to support data images, but then you'd need to find a way to get HtmlImageGenerator to use the altered editor pane.
Seems that HtmlImageGenerator doesn't work well with images inside HTML files, but it's still unclear why it doesn't render checkbox inputs as well.
Without seeing the code you end up with after page load, check the chrome dev tools panel to see if the image has actually loaded correctly to the page which will tell you it's at least accessible to use. Then check if the url is output correctly to the div as the background-image. If it looks correct and there aren't related errors in the console, it is likely a css setting.
With background images, your container will need to contain content or else you will need to specify:
width
height
a display setting
background-position, and a
background-size
If you can upload more info, I might be able to be more specific.

Fetching HTML or links from a website via Json/HtmlUnit

I have been trying to extract the html values from a page e.g. https://www.qwant.com/?q=cat&t=web but when I use jSoup or HtmlUnit I always get a basic page that doesn't compare to what is generated when I search via my normal browser.
My codes in general work on other websites but could someone explain to me why when I visit the above with code that I don't get the same results? I am trying to fetch all the url values on the page. Is it to do with javascript?
WebClient wb = new WebClient(BrowserVersion.FIREFOX_52);
wb.getPage(url);
wb.waitForBackgroundJavaScript(25000);
System.out.println(wb.getCurrentWindow().getEnclosedPage().getWebResponse().getContentAsString());
Some website just won't allow you to parse them headlessly (for obvious reasons). As I tried to curl the Qwant cat result page, the result was a blank page.
But you want to give a try at switching from Firefox to Chrome as your browser : It is not possible to detect and block Chrome headless

NSURLSession is not downloading full webpage

I'm currently attempting to download a webpage using a NSURLSession in order to retrieve a status update on the download progress. Unfortunately, after downloading the webpage, when I go to load the webpage, there are visual issues (missing images, missing javascript, missing styles, etc), leaving the webpage looking broken and in complete. When loading directly to the webView, everything loads correctly. I would like to know if there is a way (or anything I'm missing) to download ALL aspects of the webpage and load them up so I may load the full webpage and display a loading bar while the page loads.
- (void)loadRequest:(NSURLRequest *)request
{
NSURLSessionConfiguration *sessionConfig = [NSURLSessionConfiguration defaultSessionConfiguration];
self.urlSession = [NSURLSession sessionWithConfiguration:sessionConfig delegate:self delegateQueue:[NSOperationQueue mainQueue]];
self.downloadTask = [self.urlSession downloadTaskWithRequest:request];
[self.downloadTask resume];
}
- (void)URLSession:(NSURLSession *)session downloadTask:(NSURLSessionDownloadTask *)downloadTask didFinishDownloadingToURL:(NSURL *)downloadURL
{
[_webView loadData:[NSData dataWithContentsOfURL:downloadURL] MIMEType:downloadTask.response.MIMEType textEncodingName:downloadTask.response.textEncodingName baseURL:nil];
}
I was having similar problems (missing images etc.). You need to provide a baseURL. Try:
[_webView loadData:[NSData dataWithContentsOfURL:downloadURL] MIMEType:downloadTask.response.MIMEType textEncodingName:downloadTask.response.textEncodingName baseURL:downloadTask.response.URL];
In order to display a loading bar you have to make some kind of workaround, because you are not able to know the progress of the resources that are being downloaded.
Many apps use tricks, to simulate that there is a loading ongoing.
Here is a simple example to ilustrate the idea:
Display loading bar with progress 30% for 1 second.
If the request did not finish, display progress 90% until the progress finishes
When the request finishes, animate progress to 100%.
You can have a look on this open source library to see how it's done. You can do it in a similar way.
https://github.com/ninjinkun/NJKWebViewProgress

Load a part of the page without AJAX

I'm developing a web site where I want the left menu to stay fix, while the content of the clicked option is loaded.
Actually, what I do is that each menu link using AJAX it return the requested content. Everything works fine but I would like to avoid it because then statistics are difficult to follow (among some other things like Google boots).
How can I do the same affect/similar (http://www.foundcrelamps.com/) without javascript?
What I would do is a bit different. I'd make the links on the menu valid links that point to the content. Eg Contacte to point to http://www.foundcrelamps.com/contacte so that if you paste that link in the browser, it will load the page directly.
Then keep the ajax, so that the user does not reload the whole page on every click.
You can use History.js to keep the browser history and modify the URL so that back/next buttons work, even with ajax.
Edit, if you use conventional a elements with standard href it might look like this:
$('a').click(function(){
$('YOUR CONTAINER').load($(this).attr('href'));
return false; // so that it does not load the whole page
});
Then on the server you should do something like this:
/* AJAX check */
$isAjax = false;
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest') {
$isAjax = true;
}
if (!$isAjax) {
outputHeader();
}
outputMainContent();
if (!$isAjax) {
outputFooter();
}
This way when you do ajax, you will load only the inner content. When not, it will load the whole page.
There is an alternative method - you might load the whole page with jQuery but only use inner part of the html to replace the original content.

How to handle HTML content in Windows 8 Metro App

I'm designing a Windows 8 Reader App, and I have to use a control to show the HTML content, which is fetched from some website feeds. Cause those HTML content may contains images or some other formatted text, now I'm using a richtextblock to show the HTML content, but it costs a lot of time to parse the HTML content.
So I'm wondering if there is any controls that can handle the HTML content except the WebView.
Thanks.
Updated:
The reason I can't use WebView is that I need to implement pagination, like the image belowed:
As JP Alioto mentioned you should use the WebView control.
You can use the NavigateToString method to load the HTML. Or use Navigate to request a URI.
There are issues however with using the WebView control, specifically it is rendered differently and is not a standard control, this means things like your app bar or settings pane will not render on top of the WebView, there is a workaround by using the WebViewBrush to "paint" the WebView to standard control such as a rectangle when needed.
Also you can make a screenshot of the webpage you want to display. But to make a screenshot of webpage it's also not easy to do, but I offer you to make it with some special sites wich are created to take screenshot of other websites. Then you can download an image this sites return and open and display it in your windows 8 app. I show You some example how to I did that:
StorageFolder screens = await Windows.ApplicationModel.Package.Current.InstalledLocation.CreateFolderAsync(#"Screens\" + folderName, CreationCollisionOption.GenerateUniqueName);
var downloader = new BackgroundDownloader();
IStorageFile file = await screens.CreateFileAsync(fname, CreationCollisionOption.GenerateUniqueName);
string my_uri = "http://api.snapito.com/web/e3c351d5994134eb1aea855ce78e296c3292d48a/lc/" + url + "?type=jpeg";
DownloadOperation download = downloader.CreateDownload(new System.Uri(my_uri), file);
await download.StartAsync();
I think there are only two options but none of them are really good:
Use WebView and transform your HTML with CSS and other techniques to look native. Use the ScriptNotify and NavigationStarting and other events to navigate to another page. In W8.1 the WebView is much better (eg. treated as regular control not floating over all other controls,...)
Parse your HTML and generate native elements. I started such an implementation and created a XAML control to display HTML with native controls (see https://mytoolkit.codeplex.com/wikipage?title=HtmlTextBlock). However if you have complex HTML (eg iframes, etc.) this may not work and you have no other choice than to use the WebView control.