You need to sign in to do that
Don't have an account?
ggarcia
<canvas> html5 element in visual force
Hey guys I'm a little new to this and I need some help. I need to make a visual force page using html5 and the <canvas> element. The canvas will create a modifiable box in which a user can draw something and then that will be stored elsewhere as a JSON file to be recalled later. I need to know if and how this would be possible. I can get a box to show up but I can't get it to be editable ( I can't draw inside of it).
HELP PLEASE
This works on account; adjust to suit your needs.
All Answers
This is just an example. It works verbatim in my Developer Org. Feel free to use a framework instead of writing your own code (and this code isn't cross-browser by any means).
this works, it gives me a box in which to draw just like i want but how to i capture that as an image and save it as an attachment?
Check out my tutorial video here which shows how to use HTML5 Canvas and Salesforce REST API to do this.
http://www.youtube.com/watch?v=1KILol_pa84
This is not in a Visualforce Page, but you could simply copy the HTML code and JavaScript into the VF Page to get it to work.
Added a "save" function that would work, so there is a complete example here.
end goal here is have a pdf display a signature and name depending once the pdf is rendered off of an object
pretty much allowing a person to sign off on a purchase order and when the pdf is printed out it will display that signature at the bottom with the name of that person in text.
so what i did is i created a button within the object that i wish to store the attachment in and had it open up the page that you litterally created for me (thanks again) and now it wont work. it will open the page just like if i was typing it directly into the address bar but the canvas element wont work i even tried to make the button run it was java script window.open("URL") but that didn't work either
nevermind i fixed it it was a simple syntax error. now onto adding the document you made to the object from which this visual force page was requested instead of to the documents tab
or should i just find a way to name the file in the documents tab as it is now some name that will reference the object from which the canvas page was called..... this will eventually lead to a signature option litterally allowing someone to go into an object ( be it a purchase order or a sales order and sign for it , think UPS signing for packages type stuff) but now that signature needs to be saved somewhere to be recalled whenever someone asks who signed for this or when that object is being turned into a pdf document
u seem very knowledgable and i was wondering what would be easier:
1) using javascript within the "sign" button i created to move the signature from documents to the object's notes and attachments tab, from there when the "print PDF" button is pressed it would jsut look for an attachment
or
2) leaving the signature file in the documents tab and naming it in some way that it would be easily recognizeable as to which object it belongs and use that in order to pull it onto the pdf without having to move it over to the object's attachments
you have helped this young programer very much and i appriciate it if you could just help a little more it would be wonderful thank you
P.S. personally i think option one is better bc then in the code to print the pdf i can just tell it to go to attachments and find a "my image/png" and not have it looking through all of the documents looking for a certain one named a certain thing
how would i change this to save as an attachment to the object that called this visual force page instead of to the documents tab ?
spesifically to the one that called it
Or, you could use Visualforce remoting to give it a more salesforce-y feel; simply have the remoteaction method accept a base64-encoded file and a parent ID, and have it commit the data for you (and save on API calls).
how do i do the remoting thing...i litterally have never done any apex before this project i kno im probably annoying the crap out of u sorry =/
i was also thinking of using ur exact page u gave me before to just save it directly into the PO that called that page in other words
object has sign button on layout
user clicks sign button
user taken to signing page (button just has redirect URL in it)
user signs and clicks save
when user saves it checks the page that called for the signature and saves as an attachment to that object
how would that be completed?
This works on account; adjust to suit your needs.
i get this error
Error: Required fields are missing: [Parent]
I fixed that error but now when I click on the "view" button on the attachment it doesn't show the image like it used to
I also need it to be able to output that image onto a visualforce page that will be rendered as a PDF
I'm assuming that to do this I would use
<apex:outputfield> inside of the VF page that will be rendered as PDF except I can't figure out how I would reference the 'Signature.png' file through a specific object's attachments
1) Not sure why it wouldn't view, it's working on my code. I updated the code (again) to account for the missing accountId:
2) Use an img tag to include it as an image:
In order to get the attachment ID to the parent object, I'd probably recommend a normal text field to store the attachment ID, then you can simply reference the ID directly:
Your VF page controller could also query the ID, etc.
it doesnt wanna show up on the pdf all i get is this error:
Error: Unknown property 'PBSI__PBSI_Purchase_Order__cStandardController.Parent
when i use this
<img src="/servlet/servlet.FileDownload?file={!Parent.Signature__c}"/>
if i take away parent i get a broken image link icon
ok i thought parent was a reference call
i finally got it working in my browser and i would like to thank you very much. you have helped me a lot, however do u have any idea how to make this be browser independent and mobile friendly ? I can get the canvas element to show up (i put a stroke around it to make it easier to see) but i can not draw on it.
You just have to add touch events to allow mobile support. Apparently this works on about 82% of devices. Note that I had to fiddle with some of the values, so your milage may vary. You can increase support percentage by adding support for msPointerEvent support as well. I don't have time to do this today, but I may post a further example later when I get time. Note: at least on my Andriod, I had to hold my touch briefly until the canvas "flickered", and then I could draw on it. This is probably platform specific.