I want to integrate the PDF.js (including the viewer, which is a part of the PDF.js release) into my HTML application. But I don't want to use frames for this task. Instead I want the PDF viewer be included directly into a div.
It is possible without the viewer. PDF.js can render pages directly to canvas.
But I cannot find documentation about how the viewer can be integrated. The viewer itself seems to be a different project called "ViewerJS". But I haven't found much documentation for this project. The only way described there is using a frame (http://viewerjs.org/). I even did not find its source code although it has a Github repo (https://github.com/kogmbh/ViewerJS/)...
I would appreciate any help. Thanks!
You cannot do that with viewerJS.
Related
For a Blazor WASM project I have been working on, I used this great open-source projects called Blazor Diagrams. The client wants me to export a screenshot of the diagram, but with the catch that is that the screenshot should be at the full resolution of the graph which will almost always be higher resolution than the browser window. For example, imagine the div containing the diagram is 900px wide to fit in the browser, but the entire diagram width is 2500px. I would like to capture an image that is 2500px wide.
I have looked into various options like
html2canvas
getDisplayMedia
Html2canvas does not play nicely with Blazor and if I understand it right getDisplayMedia would be a pixel for pixel capture.
I don't think we would be able to use 3rd party API's due to confidentiality, so I am wondering what my options would be.
Most if not all of the javascript screen to image, Dom to image library's lack full svg support and has some quirks with in line css etc. Best is to get creative with either playwright or bunit to grab the output html in a staged environment for best results. Currently we had all the issues mentioned but have resolved it in other ways with no/minimal javascript dependencies.
Using Blazor serverside, webassembly might be a different case
In case anyone comes across this and finds this useful here is what I did. My project is a Blazor WASM hosted on an IIS server.
Created a console application that handles the Playwright logic
Created an API endpoint that when hit, fires up the console application.
Created a special viewing page for my diagram which does some maths to set the size of the container div to make sure the entire diagram is visible.
Used playwright to get a screenshot of that particular div.
Some IIS tips
In our scenario, I ended up placing the console app exe in the root Websites folder as Node needed read/write access and was throwing errors being inside a subfolder.
I used the following code to install only the chrome browser on first run. This way all the playwright code is located in my Diagram Export app folder.
string imagesFolderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "images");
string browserFolderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "browser");
if (!Directory.Exists(imagesFolderPath))
{
Directory.CreateDirectory(imagesFolderPath);
Console.WriteLine("Created images folder", imagesFolderPath);
}
if (!Directory.Exists(browserFolderPath))
{
Directory.CreateDirectory(browserFolderPath);
Console.WriteLine("Created browser'{0}'", browserFolderPath);
}
Console.WriteLine("Checking dependencies");
Environment.SetEnvironmentVariable("PLAYWRIGHT_BROWSERS_PATH", browserFolderPath);
Environment.SetEnvironmentVariable("PLAYWRIGHT_NODEJS_PATH", Path.Combine(AppDomain.CurrentDomain.BaseDirectory, ".playwright\\node\\win32_x64\\node.exe"));
Microsoft.Playwright.Program.Main(new[] { "install","chromium" });
Had to play around with the auto waiting features on playwright to make sure the page was completely rendered before taking the screenshot. In my case I used the HoverAsync API on the last element type to render in my diagram.
In function of an e-mail signature tool we're developing, we're building a feature to not only export the signature, but also make a screenshot of it.
We tried working with the Javascript library HTML2Canvas: https://html2canvas.hertzen.com/ but when using this solution, all of our images inside the HTML that are hosted elsewhere, are not shown in the screenshot.
This issue exists for a longer time, hence the question if there's any other solution to render a screenshot from HTML that includes external images.
You can use headless browser. This article provides all the necessary information for taking screenshots. https://bitsofco.de/using-a-headless-browser-to-capture-page-screenshots/
I'm using moodle 3.2 and trying to convert my html files into a scorm package. (A newbie)
As per my understanding moodle only supports scorm 1.2
I uploaded a scorm package (imsmanifest and a js file included which finds the api to start communication with LMS - LMSinitialize and LMSfinish) and it worked in moodle.
Then I uploaded a scorm package (included only imsfanifest file and not the js file) and this also worked in moodle.
Now, I'm unable to figure out if I need to use the api adapter finding js file with moodle or not.
I think this js ffile is required for features like bookmarking?
Please guide.
Thank you.
There is a algorithm to searching for "API" within windows in the browser. This makes it so a IFRAME or a Tab/Popup Window can search the LMS.
Some LMS's use framesets still so its nested pretty much anywhere in all that.
I've said more on this wiki than I could ever type here so hopefully it will give you a head start. https://github.com/cybercussion/SCOBot/wiki/The-Anti-Library. Feel free to check out the actual full library if you feel you'll benefit from that.
i currently have highcharts realtime graph working on a browser (e.g. http://www.highcharts.com/demo/dynamic-update ), but we now want to an iphone/ipad app so that the users dont have to go and type in the address (instead open an app) and they see the live graph.
is there an easy way to convert the existing webpage (with highcharts.js and jquery. js into an app?) i looked at real time plotting on iPhone using core plot? but looks a bit complex for me (i dont have any prev knowledge on building apps )
Also, http://code.google.com/p/core-plot/issues/detail?id=94 indicates there is a known problem with core-plot dynamically updating the data in real time. any live examples would be of great help.
thanks
You might want to check out Phonegap, on build.phonegap.com you can upload your web-assets and download a ready compiled (web-)app wich will run as a regular app on your device.
For a simple web-app tested on android this worked great (but do not count on anything outside the browser being available to you (phonebook/sms etc)).
I'd suggest to create a iOS web-application, so you can use Highcharts JS like in a normal webpage. The Highcharts homepage says it's compatible with iPhone/iPad.
Web-apps can be designed to look like native apps and can also be started directly from the homescreen without typing the URL.
This answer is very late, but here is a gist that embeds HighCharts into a UIWebView. Embed jQuery (I used jquery-1.9.1.min.js) and the HighCharts .js files in the app bundle and this will load them into the web view.
I'm writing a CKEditor plugin specific to my Web app. Until now, I've successfully kept my own files outside of the CKEditor code structure, but the only documentation I can find about the plugin creation process (being a user-made tutorial, no less) says to just shoehorn my plugin code into ckeditor/_source/plugins.
Is this really the only way to go? Am I stuck with commingling my code with CKEditor release code, or is there a way to tell it where to load plugins from? A PLUGINPATH setting, if you will?
Looking at the tutorial you posted, I see that the section called Plugin Configuration uses CKEDITOR.plugins.add to load the plugin resources. Have you tried using CKEDITOR.plugins.addExternal instead? The API documentation for it can be found here.
You want to load the uncompressed, unpacked plugins to load for debugging purposes right?
Just do this. Refer ckeditor_source.js instead of ckeditor.js. That way your created plugin inside the ckeditor/_source/plugins will run.
Read Minimum Setup for CKEditor with a microscope :)
There is a line like this here
_source — this directory contains CKEditor source code. It is needed
only if you intend to use the
ckeditor_source.js script and load
CKEditor from source files.
Too little documentation for a wonderful editor!
Update:
And inside the wonderful tutorial link you have provided, George Wu has mentioned that in the first paragraph also.
During development, you will want to
execute from source code by using
ckeditor_source.js instead of
ckeditor.js.
Now, create
ckeditor_source\plugins\footnote
folder and plugin.js under that
folder.
BTW, I found Tutorial create external plugin for CKEDITOR helpful too.