I have an application that auto-generates a report page.
I.e. a HTML5 webpage with plots and tables.
In some cases users need to edit mark certain details in the report, so they take screenshots/copy paste content into Microsoft Word or similar and then edit it.
I would like to enable the user to do annotation on top of the report inside the browser. For instance draw a circle on top of a spike in a plot. Or insert an arrow pointing at something important. and adding a comment next to it.
They can then print/save the report to pdf including their annotations.
This should not be too hard to do using canvas for drawing and so on. But I guess there should be some framework/library doing that. I just can't find it.
Do you think this makes sense to do and do you know any libraries that supports that?
I guess you mean something like Annotator.
Related
I am trying to make a seamless process for creating engineering part drawings that have interactive balloons that will somehow go to the part you clicked. A part balloon contains a part number, I want the user to be able to click that part number to go to that selected part number drawing.
What I am asking help for is if anyone knows or has any recommendations how to achieve this.
We use Solidworks as our CAD software. Currently we create save a copy of the drawing in Solidworks to PDF and that is then converted to an enlarged PNG programmatically. There are currently no hooks, anchors or tags associated with the PNG. The PNG is displayed on our parts browsing website. Currently you cannot interact with the drawing on the webpage other than zooming in and out.
I can change that process to whatever will work, but it needs to be almost completely automated. Any ideas would be appreciated.
So far I have looked into adding JavaScript to the actual PDF document programmatically, but I do not fully understand the interaction between web based JavaScript and PDF JavaScript. There is not much online either, or else I couldn't find it. I have also looked into adding links to the PDF, but i cannot get it to open in the current iFrame when a user clicks a link on the PDF, where i would normally user target="_self" to mitigate this.
Please let me know if I can clarify something, as there is a lot of information and it would be overwhelming to write on here.
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
i am on the search for ways and pointers to create a simple text editor(cant call it exactly a text editor).the functions of it are described as below...
a simple text area where user types commands.
commands are my own implementation and not specific to any programming languages..
basic commands such as
drawSqaure(side);
As the user progresses to the next line of code i want the above code to get reflected in a WYSIWYG panel(as of our example should draw a circle square) which is a part of editor.
Naturally as the editor matures it should help users with the commands(syntax hints) while they type.
can somebody help me out by providing pointers and valuable advices...
Actual motive is to let user type commands and to let them see the changes visually...
is it possible to develop this kind of application and if so is it feasible to use HTML+Javascript for development ????
or is it wise to use build upon some pre-built editors instead of starting from scratch???
This certainly can be done using HTML and javascript, but I doubt there is an out of the box tool that will do all of this for you. I would check out TinyMCE, but you will probably need to put in the work to make things like drawSquare actually render into a canvas.
There are frameworks out there to help with drawing on canvas. I don't know what exactly do you wish to allow your app to do, but there sure is a framework that would be helpful.
See if you like any of these: http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/
The idea I see here is surely possible to do with javascript and canvas object, but will require some proficiency to work fast when heavily used.
I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code
I'm looking for a way to create an interactive bullet graph, which will allow the user to click anywhere in the graph and set a marker, then calculate some simple values based on where this marker is at. For example, I'd like it to look similar to this:
http://www.usrecordings.com/test-lab/bullet-graph.htm
Yet, allow the user to click inside it and have it calculate values. I don't want the user limited to the axis values either, it should be able to figure out what the value is between them. Has this been done anywhere before or do I need to start something from scratch?
Flot may be able to do what you need.
Check out some of the examples, particularly the interactive one. It's open source, so you can add any functionality you need to it. This should be a good starting point.
HTML canvas is a great place to start. A brief google search showed there may not be many interactive charts available. These are a couple HTML canvas examples, the first being math, the second the w3c spec: Polynomials, HTML Canvas w3c. I've found that searching for HTML canvas game examples produce many more tutorials than straight HTML canvas examples. I don't know what your programming abilities are, so I'm giving you these links with the assumption you have javascript experience.
Have fun.
Oh and thanks for asking if it's been done before.