Custom Buttons

You can currently add up to three custom buttons to My Coloring Book. The buttons appear after the Print button in the interface.

To add the buttons you need to edit your Configuration File (config/config.xml). The config file in the current version includes 3 sample buttons, which are hidden by default.

Here is an example of a custom button declaration that sends a picture to Facebook...

<button id="custom1" visible="true" tip="Post to Facebook"
message="Sending picture to Facebook" icon="facebook"
preload="./mcb/preload.html"
post="file" pixels="600" imgType="jpeg" imgQual="80"
url="./mcb/facebook/fbpost.php" method="POST"/>

id: Specifies the id of the custom button, and should be "customN", where N is from 1 to 3.

visible: Set to "true" to show or "false" to hide, (default = "false").

tip: Displays when the user hovers over the button.

message: The message that displays while the picture is prepared and sent to the script.

icon: Currently you can select from the following icons...

  • contest_ico32 = contest
  • fb_ico32 = facebook
  • gallery_ico32 = gallery
  • email_ico32 = email
  • goldstar_ico32 = goldstar
  • silverstar_ico32 = silverstar

You can also use custom graphics for the button icons - though we recommend for faster load times you use the built in icons.  To use a custom icon, include icon="filename.png", where filename.png is the png file of the correct size (32x32 for large, 16x16 for small).  You need to specify the location relative to the page that the coloring book is on.

preload: The URL of a page to pre-load while the picture is being prepared for the add-on.

  • To avoid pop-up blockers the program needs to preload an html (or other) page. The page should show a simple message to let the user know what is happening, for example "Your picture is being prepared for Facebook".
    The url is relative to the page that the coloring book is on. If your page is at the root level of your domain, then you will need to include "mcb" in the url.
    E.g. preload="./mcb/preload.html"

post: Can be one of the following...

  • file = Save the image as a file (in the "/save" directory), and pass the image name to the script in the "name" variable.
  • data = Send the image as base 64 encoded data in the "data" variable.
  • none = Do not save or send any image information.

pixels: The size that the image will be scaled to for sending to the script. Can be...

  • Leave blank or undefined, and no scaling occurs.
  • A number followed by a "%" sign, indicating the percentage by which to scale. E.g. "50%" to scale to half the size of the original coloring page.
  • A plain number indicating the length (in pixels) of the longest size. E.g. Setting to "600" would scale the image so that it was either 600 pixels wide, or 600 high, whichever was the smaller image.
    Note: The picture is NEVER scaled up, only ever down.

imgType: The type of image sent to the add-on.

  • Use imgType="jpeg" for JPEG (default).
  • Use imgType="png" for PNG.

imgQual: The quality of the image (JPEG only).

  • Use imgQual="N", where N is a value 0 to 100, 100 being maximum quality. Default 80.

url: The URL of the add-on script.

  • See the sample add-ons for details. The url is relative to the page that the coloring book is on. If your page is at the root level of your domain, then you will need to include "mcb" in the url.
    E.g. url="./mcb/facebook/fbpost.php"

method: The HTTP method to use when passing data to the add-on script.

  • Can be either POST or GET (the default is POST). POST if the preferred option, but if you have trouble with POST variables getting stripped, try GET.
    E.g. method="POST"

Notes

For addons that use post="file", be sure that "saveimage.php" is in your main "mcb" folder, and that the "/save" subdirectory exists and is writable by PHP.

The pictures that are saved are NOT automatically cleaned up. If you are concerned about disk-space you should clean out the directory from time to time.