DrawingField provides a field type to create HTML5 based drawing.
What this module Provides:
- Rich drawing tools
- Exporting drawings to PNG
- Saving and loading JSON
- Constant-size or infinite canvases
It achieves this using the literallycanvas API plugin from:
https://www.versioneye.com/javascript/literallycanvas:literallycanvas/0.4.0
literallycanvas API depends on react.js library, go to below URL to download:
http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react-with-addons.js
Browser support: Firefox 3+, Safari1.4+, Chrome, IE10+, Opera 9.5+ support the HTML5 canvas tag.
Requirements:
Libraries API
Jquery Update
Installation:
• Download literallycanvas API extract contents to libraries/literallycanvas
• Download react.js library and rename as react.js, add to
libraries/reactjs.
• Install and enable Libraries API module
• Install and enable Jquery Update module and configure it with jquery1.7+ version.
• Install and enable DrawingField module
Usage:
• Create a content type, entity form with a drawingfield widget.
• Customize the canvas background color, width and height of the drawingfield instance to your needs
• Start creating drawings
Go to readme.txt to get more details regarding installation.
Similar Modules
How is it different from other canvas base field type:
* Provides a field type to create canvas based drawing for web and touch devices and drawing can be edited once created.
* Drawing can be rotated left to right and top to bottom.
* Text or contents can be provided on the drawing.
* It has option like undo/redo/clear to perform on the drawing to get effective image.
* We can change pencil line size at various level from thinner to thick.
* Line/rectangle/Circle can be provided on the canvas with various background color.
Module Link:
https://www.drupal.org/sandbox/rashid_786/2340611
Link to git Repository:
git clone --branch 7.x-1.x http://git.drupal.org/sandbox/rashid_786/2340611.git drawingfield
cd drawingfield
Automated Review
http://pareview.sh/pareview/httpgitdrupalorgsandboxrashid7862340611git
Manual reviews of other modules:
| Comment | File | Size | Author |
|---|---|---|---|
| #44 | form_type_hook.png | 25.39 KB | rashid_786 |
| #36 | canvas_field.png | 11.08 KB | rashid_786 |
| #36 | drawingfield.png | 26.89 KB | rashid_786 |
Comments
Comment #1
guardiola86 commentedI get the following errors: http://pareview.sh/pareview/httpgitdrupalorgsandboxrashid7862340611git
Basically you need to:
-Set default branch
-Prefix all your functions with your module name
-Check why opcache.so cannot be opened
-Fix some issues related with coding standards
Comment #2
guardiola86 commentedComment #3
gaurav.pahuja commentedThere seems to be dependency on literallycanvas API. Please add hook_requirements to install / module file so that site builders get notification if something is required for this module.
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/func...
Comment #4
rashid_786 commented@guardiola86,
Thank you for your valuable reviews. I have fixed the following issues:
-Set default branch Done
-Prefix all your functions with your module name
function form_type_drawingfield_value($element, $edit, $form_state) {Above function is a hook and module name is required in between in this hook, please go through http://api.drupalhelp.net/api/multiselect/multiselect.module/7, https://www.drupal.org/node/169815 to know more about the same.
-Check why opcache.so cannot be opened Done
-Fix some issues related with coding standards Done
Thanks,
Rashid
Comment #5
rashid_786 commented@gaurav,
Thanks for your valuable review. As suggested by you, i have implemented hook_requirements in .install file and mentioned details about required libraries.
Thanks,
Rashid
Comment #6
rashid_786 commentedComment #7
naveenvalechaHi @rashid_786
First Thanks for your contribution.
Automated Review
Best practice issues identified by pareview.sh / drupalcs / coder.Please follow the best practices identified here. http://pareview.sh/pareview/httpgitdrupalorgsandboxrashid7862340611git
Manual Review
drawingfield.field.incso that the file name should be as per the module name.drawingfield.system.incAlso would you please let me know can't we write these hooks inside the .module file.if yes then do so else would you please let me know why you have kept in the seperate file.Similar is for the field.incWould you please let me know what is the need of requiring all modules inc files ? if you only want to include your module inc file then simply inlude it using include_once or require_once .
Thanks Again!
This review uses the Project Application Review Template.
Comment #8
naveenvalechaComment #9
joachim commentedThis sounds very neat!
> description = Drawing Field allows you to collect HTML5 canvas based drawing in cck and in your custom modules via fapi
CCK doesn't exist in D7, also, it's best not to use a developer acronym like 'fapi' in UI text.
> * Install, update, and uninstall functions for the field_example module.
Not quite true ;)
> * Implements hook_field_requirements().
This is hook_requirements() surely!
Hook implementations shouldn't repeat the docs from the hook definition.
This array in hook_schema() isn't laid out the same as the others.
> define('DRAWINGFIELD_IMAGE_PATH', variable_get('file_public_path', NULL) . '/drawing/');
There's a stray space at the start of this line. Also, do you really need to define a constant for this, when it's a value you only use once? And in fact, what about allowing the user to set the image path, same as the way core file and image fields do?
This is a fairly expensive operation to do, given it's every single page load!! You only have two .inc files, so just load them explicitly by filename.
Wonky indentation.
> * Implementation of helper function which converts base64 data into image.
'Implementation' refers to hooks and callbacks. Is this one of those? If so, it needs to name the thing it's implementing. If it's just a helper function for this module, it needs param docs.
A number of functions are missing blank lines between them.
What's this for? The clearfix class goes on the container of things you want to clearfix, not as a clearer after them.
> Literally Canvas v0.3.0 depends on jQuery (tested on 1.8.2) can be found at http://code.jquery.com/jquery-1.8.2.min.js and add it inside literallycanvas directory.
Don't do this! Add a dependency on http://drupal.org/project/jquery_update instead.
Comment #10
rashid_786 commentedComment #11
rashid_786 commented@naveen,
Thanks for your detailed review, as per your suggestion i have renamed inc templates as
drawingfield.field.incanddrawingfield.system.incand included only these file in module file.Thanks,
Rashid
Comment #12
rashid_786 commented@joachim,
Thanks for your very detailed review of the module, I have done all the changes as suggested and pointed by you.
Thanks,
Rashid
Comment #13
rashid_786 commentedComment #14
PA robot commentedWe are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)
Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).
I'm a robot and this is an automated message from Project Applications Scraper.
Comment #15
joachim commentedYour README needs to say which jQuery version to set in JQUpdate.
The widget doesn't work for me. I see a blue rectangle (which overflows and covers up things below). Also, it's breaking Admin Menu.
> * Implements hook_form_type_hook_value().
I can't find anything about this hook. Which module does it belong to?
> * Implements hook_after_build().
> * Implements hook_preprocess().
Not hooks, but a Form API callbacks. If in doubt, check the docs on api.d.org.
Code and comment disagree.
You don't need to do this any more now you have JQuery Update working for you! This might be what's breaking Admin Menu.
> Implements theme function
'Implements' refers to hooks, not theme function.
Comment #16
rashid_786 commentedComment #17
rashid_786 commented@jaochim,
Thanks for your valuable reviews, I have updated literallycanvas library with lastest version which have no dependency on Jquery.js. Hence i have removed the dependency of jquery_update module.
> * Implements hook_form_type_hook_value() has replaced with Implements form_type_hook_value, please go through http://api.drupalhelp.net/api/multiselect/multiselect.module/7, https://www.drupal.org/node/169815 to know more about the same.
updated below with appropriate comments.
> * Implements hook_after_build().
> * Implements hook_preprocess().
below are the steps to install and configure module:
* download literallycanvas library at https://www.versioneye.com/javascript/literallycanvas:literallycanvas/0.4.0 and react.js at http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react-with-addons.js. Add these to
your sites/all/libraries directory as sites/all/libraries/literallycanvas and sites/all/libraries/literallycanvas/js/react.js respectively.
* Install and enable Libraries API module
* Install and enable DrawingField module
* Create a content type, entity form or custom form with a drawingfield
* Customize the canvas background color, width, height and directory path of the
drawingfield instance to your needs
* Start creating drawings
Thanks,
Rashid
Comment #18
rashid_786 commentedComment #19
joachim commented> and react.js at http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react-with-addons.js.
This is missing from the README and from hook_requirements(). It should also be a URL to a page rather than directly to the script.
Also, I still can't get this to work I'm afraid.
Comment #20
rashid_786 commentedreact.js URL already mentioned in readme and hook_requirements(). It only provides script directly, will have to copy script and save as react.js and include into librarycanvas/js/ directory.
Kindly let me know what kind of issues you are facing because it's working fine for me.
Thanks,
Rashid
Comment #21
rashid_786 commentedneed review
Comment #22
joachim commented> react.js URL already mentioned in readme and hook_requirements
In hook_requirements I only see the check for literally_canvas. In the README you need a URL to a download page rather than to the script, if possible.
I get these JS errors which I presume prevent the widget from working:
Comment #23
rashid_786 commentedI have put the check for react.js in hook_requirements. There is a page http://cdnjs.com/libraries/react where a lots of versions listed on the page but it would be difficult for user to download the file because it provides the direct scripts here also. I have updated readme file with more information to understand user easily.
above error may occur due to unavailability of react.js.
Please download fresh code of this module and then install.
Thanks,
Rashid
Comment #24
pingwin4egRemoving bonus tag, you did not make 3 manual reviews of other applications. You only mentioned the automated review results and other obvious things. Please read the Review bonus program page carefully and do a manual line-by-line walkthrough other projects.
Comment #25
rashid_786 commentedComment #26
rashid_786 commented@pingwin4eg
Manual reviews of 3 other applications are done.
Thanks,
Rashid
Comment #27
mpdonadioAssigning to myself for my next full review.
Comment #28
mpdonadioAutomated Review
Review of the 7.x-1.x branch (commit ae82c3c):
This automated report was generated with PAReview.sh, your friendly project application review script. You can also use the online version to check your project. You have to get a review bonus to get a review from me.
Manual Review
(*) height, width, and possibly background(?) are going through directly to output without plaining. See https://www.drupal.org/node/28984 This is not currently exploitable because of the length limits but this should be handled properly. Test your input fields with escapable strings to see what happens.
The README should outline the exact path to the two JS libraries once they have been installed. This will cut down on problems and issues.
(+) In drawingfield_requirements(), don't split the translated string across lines. This makes translation harder. Also elsewhere.
Did you run into an instance where you have to explicitly load the libraries module in drawingfield_requirements?
Personally, I would only do the library check at runtime and not hard fail during installation.
drawingfield_base64_to_image() needs a proper docblock with @param and @return
(+) You are using two different libraries, so these should really be two different library definitions in two different places.
(+) Your field options should be validated. Also, consider that people may want to use rgb() syntax for the background color or percentages for the height/width, and also big values for the canvas size.
(+) In drawingfield_after_build(), #attached is preferred over drupal_add_library and drupal_add_js and drupal_add_css.
Your JS needs to use the context and settings that get passed to the behavior.
(+) .on was added to jQuery 1.7. but Drupal 7 ships with 1.4.4. You need to figure out how to handle this. Look into jQuery update.
(+) localStorage doesn't work in old browsers. You need to figure out how you want to handle this so the JS doesn't error.
(+) I got JS errors in a stock Drupal 7 install.
The starred items (*) are fairly big issues and warrant going back to Needs Work. Items marked with a plus sign (+) are important and should be addressed before a stable project release. The rest of the comments in the code walkthrough are recommendations.
If added, please don't remove the security tag, we keep that for statistics and to show examples of security problems.
This review uses the Project Application Review Template.
Comment #29
rashid_786 commentedComment #30
rashid_786 commentedHi mpdonadio,
Thanks for detailed reviews and suggestions . Here are my points in italic.
Automated Review
>./includes/drawingfield.system.inc: all functions should be prefixed with your module/theme name to avoid name clashes. See https://www.drupal.org/node/318#naming
function form_type_drawingfield_value($element, $edit, $form_state) {> * form_type_hook_value is a hook not a function it can't be prefixed with module name as module and is being used in middle of hook name. Please go through http://api.drupalhelp.net/api/multiselect/multiselect.module/7, https://www.drupal.org/node/169815 to know more about the same.
Manual Review
Secure Code
* Check plain has been implemented for height,width and background color.
Coding style & Drupal API usage
(+) In drawingfield_requirements(), don't split the translated string across lines. This makes translation harder. Also elsewhere.
* Split lines have been reduced.
Did you run into an instance where you have to explicitly load the libraries module in drawingfield_requirements?
Personally, I would only do the library check at runtime and not hard fail during installation.
* As suggested Check has been implemented only for runtime.
drawingfield_base64_to_image() needs a proper docblock with @param and @return
* @param and @return docblock is done.
(+) You are using two different libraries, so these should really be two different library definitions in two different places.
* As per suggestion, two different library definitions have been created in two different places.
(+) Your field options should be validated. Also, consider that people may want to use rgb() syntax for the background color or percentages for the height/width, and also big values for the canvas size.
* field options have been validated. Background color will hexa code and color name, height will have in px and width will have in px, would like go with rgb and percentage in next version release of the module.
(+) In drawingfield_after_build(), #attached is preferred over drupal_add_library and drupal_add_js and drupal_add_css.
* As suggested, #attached is implemented instead of drupal_add_library and drupal_add_js and drupal_add_css.
Your JS needs to use the context and settings that get passed to the behavior.
(+) .on was added to jQuery 1.7. but Drupal 7 ships with 1.4.4. You need to figure out how to handle this. Look into jQuery update.
* As suggested, dependency of jQuery update module has been made on the module.
(+) localStorage doesn't work in old browsers. You need to figure out how you want to handle this so the JS doesn't error.
* Canvas tag is a HTML5 which is being used to draw paint like drawing and older browser does not support most of HTML5 tags. Below are browsers version supporting canvas tag.
[IE10+, Firefox4.0+, Chrome latest, Opera9.5 and safari4.0+]
(+) I got JS errors in a stock Drupal 7 install.
* Kindly test on the expected browser and make sure all required library is included in expected directory.
Comment #31
rashid_786 commentedComment #32
naveenvalechaI have not seen the changes done by you in the code.
A little thing
Please specify this on your project page as well as project application issue summary.
Comment #33
rashid_786 commentedHi Naveen,
Browser support information mentioned already in project page and application issue summary with title "Browser Support".
Could please let me know what are the changes missing in the code?
Thanks,
Rashid
Comment #34
naveenvalechacool :)
Comment #35
klausiThank you for your reviews. When finishing your review comment also set the issue status either to "needs work" (you found some problems with the project) or "reviewed & tested by the community" (you found no major flaws).
https://www.drupal.org/project/canvas_field
This sounds like a feature that should live in the existing canvas_field project. Module duplication and fragmentation is a huge problem on drupal.org and we prefer collaboration over competition. Please open an issue in the canvas_field issue queue to discuss what you need. You should also get in contact with the maintainer(s) to offer your help to move the project forward. If you cannot reach the maintainer(s) please follow the abandoned project process.
If that fails for whatever reason please get back to us and set this back to "needs review".
Comment #36
rashid_786 commentedHi Klausi,
Thanks for your reviews, But Drawingfield module is completely different from canvas field except both use canvas html tag. Here are the comparison:
As you can see in attached images both have different tools and different libraries. Drawingfield come with large number of tools much more like paint in windows.
Features in Drawingfiled:
* Pencil
* Eraser
* Line/rectangle/Circle
* Text option on the image
* image rotation
* Undo/redo/clear
* Different mode of color e.g. Background/foreground/color with circle/rectangle
* We can change pencil line size at various level from thinner to thick.
Where as Canvas field come up with very limited feature that can not fulfill user expectations for drawing point of view and it is still in unstable mode. So according to me to drawingfield cant be integrated with canvas field.
So i request you to make it as need reviews and provide your valuable feedback on this module.
Thanks,
Rashid
Comment #37
naveenvalecha@rashid_786,
Would you also specify the same difference on the issue summary page as well as project page similarly like this project https://www.drupal.org/project/jquery_carousel
Also change the status after doing the same.
Comment #38
joachim commented> Drawingfield come with large number of tools much more like paint in windows.
Those could be added to Canvass Field maybe?
> it is still in unstable mode.
That's not a reason not to combine the two projects.
Comment #39
rashid_786 commented@naveen,
Thanks for suggestion, i will mention difference details on summary and project details page.
@joachim,
Both modules are using different libraries with different features and are conflicting with each other by merging them. In such scenario would be difficult to combine.
Thanks,
Rashid
Comment #40
rashid_786 commentedComment #41
rashid_786 commented@Naveen,
Suggested changes on project summary and issue summary page are done.
Thanks,
Rashid
Comment #42
naveenvalechaThanks! @rashid_786
Fix the suggestions suggested by pareview :
Review of the 7.x-1.x branch (commit 5519f94):
This automated report was generated with PAReview.sh, your friendly project application review script. You can also use the online version to check your project. You have to get a review bonus to get a review from me.
Source: http://pareview.sh/ - PAReview.sh online service
Manual Review :
drawingfield.module : Its better to use module_load_include to load inc files instead of require_once dirname(__FILE__) . "/includes/drawingfield.field.inc";
require_once dirname(__FILE__) . "/includes/drawingfield.system.inc";
Rest seems good to me.
Comment #43
joachim commented> * Implements form_type_hook_value().
That's not a hook.
Comment #44
rashid_786 commentedHi Naveen,
Thanks for your reviews,
Automated Review
many discussion has happened on this hook in above threads. Kindly go through below URL to know more about this hook and also attached image for reference.
https://www.drupal.org/node/169815
http://api.drupalhelp.net/api/multiselect/multiselect.module/7
Manual Review
can not use this function (module_load_include) in a global context since it requires Drupal to be fully bootstrapped, hence it is recommended to use require_once to include the global file.
Kindly go through https://api.drupal.org/api/drupal/includes!module.inc/function/module_load_include/7 to know more on the same.
Thanks,
Rashid
Comment #45
rashid_786 commentedHi jaochim
Kindly go through below URL to know more about this hook and would welcome any suggestion.
https://www.drupal.org/node/169815
http://api.drupalhelp.net/api/multiselect/multiselect.module/7
Thanks,
Rashid
Comment #46
naveenvalechaThanks! That's fine then.
Setting to RTBC :)
Comment #47
mpdonadio@rashid_786, @joachim is correct here in #43 (and the dude has over 3000 commits to contrib modules...).
That is not a hook. Hooks are called by module_invoke() or module_invoke_all().
That is the value callback for your element. It gets called by _form_builder_handle_input_element() to build #value for the form element itself, which then gets assigned to $form_state['values'].
See the docblocks in includes/form.inc for how to properly document this function.
Comment #48
klausiReview of the 7.x-1.x branch (commit 5519f94):
This automated report was generated with PAReview.sh, your friendly project application review script. You can also use the online version to check your project. You have to get a review bonus to get a review from me.
manual review:
But that are not application blockers, so ...
Thanks for your contribution, rashid_786!
I updated your account so you can promote this to a full project and also create new projects as either a sandbox or a "full" project.
Here are some recommended readings to help with excellent maintainership:
You can find lots more contributors chatting on IRC in #drupal-contribute. So, come hang out and stay involved!
Thanks, also, for your patience with the review process. Anyone is welcome to participate in the review process. Please consider reviewing other projects that are pending review. I encourage you to learn more about that process and join the group of reviewers.
Thanks to the dedicated reviewer(s) as well.
Comment #49
rashid_786 commentedHi klausi,
Thanks for your valuable reviews, i have fixed points 1,3,4,5 and take rest of the points as an enhancement.
Thanks,
Rashid
Comment #50
rashid_786 commentedThanks a lot to all the reviewers for contributing their valuable reviews to improve the code quality and making this module a success :).
Thanks,
Rashid
Comment #51
joachim commented> @rashid_786, @joachim is correct here in #43 (and the dude has over 3000 commits to contrib modules...).
It does look like this is one I didn't know about! I've had a read of https://www.drupal.org/node/169815 and it's all rather mysterious. Filed an issue to improve the documentation of this: #2391605: document (and rename?) form_type_hook_value() callback.
Comment #52
rashid_786 commentedOkay cool, however i have updated my doc comments for this callback.
Thanks,
Rashid