How to Setup
I did not create drawbox. However the Original guide site is gone, so I thought I would create a new one. Plus I have added a few new things to the code,
and wanted to add on to the guide for that.
You will need a google account, and 3 Drawbox files.
- drawbox.html The Canvas and input elements, as well as where the images get displayed.
- drawbox.js this is the code that makes the drawbox work, and uploads image to imgur.
- drawbox.css styling for the drawbox.
in the drawbox.js file you need to provide 5 variables. Below ill go over how to get these variables.
Step 1: create a google forms
you can call it whatever you like. add a "short answer" question. i called mine "imgur link". press the 3 dots up next to your pfp. press "pre-fill form". it will open a new tab in which your blank google form will be presented to you.
input something into the form and tap "get link". copy the link and open it up in a notes app.
- this is mine:
- https://docs.google.com/forms/d/e/1FAIpQLScbzFT1pxeIkp8yNB3fB7VD9V89Jbitr4h30Q3jXYjy54SlMQ/viewform?usp=pp_url&entry.258336726=imgur
Step 2: Create a google sheet
you then want to go back to the edit page of your form and click "responses". click "link to sheets" and create a sheet.
go to the sheet and create 3 more columns:
- Name
- Name of the Artist
- Approved
- make this a checkmark column type
- Comments
- So you can add little comments to drawings if you want :)
Then navigate to your responses on your google form and press "view in sheets". once on your sheet, press "share" and change General access to "anyone with link":
- You should get this link:
- https://docs.google.com/spreadsheets/d/16jUCXXinqztl3sFdtpWur9yFCAiASDsvmIsF3xHv-BU/edit?usp=sharing
Step 3: Fill in the following Variables in your drawbox.js file.
- GOOGLE_FORM_ID
- the long string of text is your google form URL. i highlighted mine in yellow. 1FAIpQLScbzFT1pxeIkp8yNB3fB7VD9V89Jbitr4h30Q3jXYjy54SlMQ
- ENTRY_ID
- your entry id will be formatted along the lines of this; i highlighted mine in blue entry.258336726
- DISPLAY_IMAGES
- simply set this to true or false depending if you wish to display your images on your page or not. For example, maybe you want to have a seperate page for the images.
- IMAGE_APPROVAL
- Set this to true or false depending if you want to moderate / approve submitted images. Good for high traffic sites / bad actors.
- GOOGLE_SHEET_ID
- copy your ID (my one is highlighted in green above in step 2) 16jUCXXinqztl3sFdtpWur9yFCAiASDsvmIsF3xHv-BU - and paste it into the GOOGLE_SHEET_ID variable
thats it! if youve set up everything correctly, it should work. This is my first tutorial. If anything is confusing, please let me know.