Loading.. Hold one one sec.

Whoops 404

page not found bruh.

What is Pixelator.js?

A quick pixel painter widget

A small pixel painter widget by Chris Malcolm. Originally I made this to facilitate a crowdsourced emoji website I was building. No pixel painter met my needs to I decided to build one myself.

FEATURES

Deadass Simple - not too much fuss, the way it should be
Customizablet - Customizable color pallete / module size of pixels
Export / Import - import + export PNGS

Adding the Library

Before starting make sure you have included jquery and the Pixelator.js library in the head of your script. If using the toolbar options make sure you include spectrum.js as a dependency.

{{addingLib}}

Basic example

Then we start an instance of documentron and parse the script using AJAX. Check Constructor for complete set of initial options and source inputs.

{{instantiate}}

Result

Now we have a editable canvas! See #export and #import for porting options.

Example with toolbar

This time we're going to include a toolbar and also import some data.

{{instantiate_toolbar}}

Result

Now we have a editable canvas! See import and .rawData for porting options.

DOWNLOAD Latest: {{github.version}}

You can download directly from github here, or check out the repository to contribute.

Visit Repo
{{github.files.fullSource.description}} ({{github.files.fullSource.size}})
{{github.files.compressed.description}} ({{github.files.compressed.size}})

DOCS

Nav Docs ▲

NAV Back to Top

DEMO

Below is a demo of how source code (shown immediately below here) is converted into documentation. In this case its documentation.js itself , and in the future I will likely offer other js scripts to try... change the dropdown tab to see some different parsed results (JSON/Html/Markdown/etc).

View Demo Src: documentron.js [+]

{{demoSrc}}

Result

News

Check here for all the latest news.

v0.0.500 12/19/17

Introducing a powerful tool for generating documentation. Feedback and questions are encouraged, updates to come!

About

Project Developed by Chris Malcolm

Grab + Contribute: github

This work is licensed under a MIT license.

{{#setPartial param}} {{name}} {{#if type}} ({{type}}) {{/if}} {{#if optional}}(optional){{/if}} - {{description}} {{#if sample || default}}...{{#if sample}}ex: {{sample}}{{/if}}{{#if default}} Default: {{default}}{{/if}}{{/if}} {{/setPartial}} {{#setPartial getNoUnderscoresIfInfo}}{{#if ~.info }}{{#replace ~.name,_, }}{{else}}{{~.name}}{{/if}}{{/setPartial}} {{#setPartial functionItem}}

{{#partial getNoUnderscoresIfInfo, ~}}{{#if ~.function}}(){{/if}} {{#if ~.Constructor==true}} Constructor {{/if}} {{#if ~.property && ~.property!=true}} Property {{~.property}} {{/if}} {{#if ~.returns}} Returns: {{~.returns.type}} {{/if}}

{{~.name}} ({{#each ~.param}} {{#if ($FIRST && $LENGTH>1)}} {{#if this.optional}} [{{this.name}},] {{else}} {{this.name}}, {{/if}} {{elif $LAST}} {{#if this.optional}} [{{this.name}}] {{else}} {{this.name}} {{/if}} {{else}} {{#if this.optional}} [{{this.name}},] {{else}} {{this.name}}, {{/if}} {{/if}} {{/each}})

{{#each el.param}}
{{#partial param, this}}
{{#if this.subparams}}
- {{#each this.subparams as subparamName,subparamObj}}
- {{#partial param, subparamObj}}
- {{/each}}
{{/if}} {{/each}}

Returns ({{~.returns.type}}) -{{~.returns.description}} {{#if ~.returns.subparams}}

{{#partial param, subparamObj}}

Example {{$INDEX+1}}: {{this.id}}

{{#trim this.code}}

{{#setPartial groups2}} {{#log running groups2 with $~}} {{#each ~ as elName,el}} {{#if el.isDocObject}} {{#partial functionItem, el}} {{else}}

{{#setPartial getNoUnderscoresIfInfo}}{{#if ~.info }}{{#replace ~.name,_, }}{{else}}{{~.name}}{{/if}}{{/setPartial}} {{#setPartial menu}} {{#each ~ as elName, el }}{{#if el.isDocObject}} - [{{#partial getNoUnderscoresIfInfo, el}}{{#if el.function}}(){{/if}}](#{{el.anchorLink}}) {{#if el.Constructor}} *Constructor* {{/if}}{{else}} - **{{#replace elName,_, }}**{{#partial menu, el}}{{/if}}{{/each}} {{/setPartial}} {{libTitle}} ============ *{{libDescription}}* ** *Menu* ** {{#partial menu, ~}} {{#setPartial param}}**{{name}}** {{#if type}}*{{type}}*{{/if}} {{#if optional}}*(optional)*{{/if}} - {{description}} {{#if sample || default}}... {{#if sample}}*e.g: * *{{sample}}*{{/if}}{{#if default}} *Default:* **{{default}}**{{/if}}{{/if}}{{/setPartial}} {{#setPartial functionItem}} {{#partial getNoUnderscoresIfInfo, ~}}{{#if ~.function}}(){{/if}} ----- --- {{#if ~.Constructor == true}} *Constructor* {{/if}} {{#if ~.property && ~.property!=true }} *Property {{~.property}}* {{/if}} {{#if ~.returns}} #### Returns: *{{~.returns.type}}* {{/if}} {{#if ~.function}} ``` {{name}}({{#if paramNamesArr}}{{#join paramNamesArr, , }}{{/if}}) ```{{/if}} {{~.description}} {{#each el.param}} + {{#partial param, this}} {{#if this.subparams}}{{#each this.subparams as subparamName,subparamObj}} + {{#partial param, subparamObj}}{{/each}}{{/if}}{{/each}} {{#if ~.returns}} **Return -->** *{{~.returns.type}}* - {{~.returns.description}} {{#if ~.returns.subparams}}{{#each ~.returns.subparams as subparamName,subparamObj}} + {{#partial param, subparamObj}}{{/each}}{{/if}} {{/if}} {{#each ~.example}} *Example {{$INDEX+1}}: {{this.id}}{{#if this.lang}} ({{this.lang}}){{/if}}* ```{{this.lang}} {{#trim this.code}} ``` {{/each}} {{/setPartial}} {{#setPartial groups2}} {{#log running groups2 with $~}} {{#each ~ as elName,el }} {{#if el.isDocObject}} {{#partial functionItem, el}} {{else}} #### >> {{#replace elName,_, }} {{#partial groups2, el}} {{/if}} {{/each}} {{/setPartial}} {{#partial groups2, ~}}

PIXELATOR.JS BETA

Whoops 404

What is Pixelator.js?

A quick pixel painter widget

FEATURES

Adding the Library

Basic example

Result

Example with toolbar

Result

DOWNLOAD Latest: {{github.version}}

DOCS

NAV Back to Top

DEMO

View Demo Src: documentron.js [+]

Result JSON HTML (body) HTML (body, sort by group) HTML (menu) HTML (menu, sort by group) Markdown (raw) Markdown (raw, sort by group) Markdown (rendered) Markdown (rendered, sort by group)

News

v0.0.500 12/19/17

About

{{#partial getNoUnderscoresIfInfo, ~}}{{#if ~.function}}(){{/if}} {{#if ~.Constructor==true}} Constructor {{/if}} {{#if ~.property && ~.property!=true}} Property {{~.property}} {{/if}} {{#if ~.returns}} Returns: {{~.returns.type}} {{/if}}

Example {{$INDEX+1}}: {{this.id}}

{{#replace elName,_, }}

{{#replace elName,_, }}

PIXELATOR.JS ^BETA

Result