Breakfast (modified)

├── .gitignore ├── .gitattributes ├── js ├── build │ └── .gitignore ├── src │ ├── .htaccess │ ├── module │ │ └── GradientCreatorApp.coffee │ ├── directive │ │ ├── killContextMenuArea.coffee │ │ ├── onDomReady.coffee │ │ ├── tooltip.coffee │ │ ├── prettify.coffee │ │ ├── newColorHandleClickArea.coffee │ │ ├── colorPicker.coffee │ │ ├── resizableCanvas.coffee │ │ ├── colorHandle.coffee │ │ ├── slider.coffee │ │ └── previewCanvas.coffee │ ├── model │ │ ├── ColorHandle.coffee │ │ └── GradientPreset.coffee │ └── controller │ │ └── MainCtrl.coffee ├── .htaccess ├── prettify │ ├── lang-go.js │ ├── lang-ml.js │ ├── lang-vb.js │ ├── lang-lua.js │ ├── lang-scala.js │ ├── lang-sql.js │ ├── lang-tex.js │ ├── lang-vhdl.js │ ├── lang-wiki.js │ ├── lang-apollo.js │ ├── lang-proto.js │ ├── lang-yaml.js │ ├── lang-hs.js │ ├── prettify.css │ ├── lang-lisp.js │ ├── lang-css.js │ ├── lang-n.js │ ├── lang-clj.js │ ├── sunburst.css │ ├── prettify.js │ └── lang-xq.js ├── jpicker │ ├── images │ │ ├── Bars.png │ │ ├── Maps.png │ │ ├── AlphaBar.png │ │ ├── NoColor.png │ │ ├── mappoint.gif │ │ ├── picker.gif │ │ ├── bar-opacity.png │ │ ├── map-opacity.png │ │ ├── rangearrows.gif │ │ └── preview-opacity.png │ ├── jPicker.css │ ├── ReadMe.txt │ ├── css │ │ ├── jPicker-1.1.6.min.css │ │ └── jPicker-1.1.6.css │ └── ChangeLog.txt ├── build.sh ├── local-storage │ ├── localStorageModule.min.js │ └── localStorageModule.js └── qtip │ └── jquery.qtip.min.css ├── img ├── disk.png ├── delete.png ├── canvas-bg.png ├── resizable.png ├── blog-thumb.jpg └── disk_multiple.png ├── css ├── iconic_fill.eot ├── iconic_fill.otf ├── iconic_fill.ttf ├── iconic_fill.woff ├── iconic_fill.css ├── iconic_fill.afm ├── style.css └── iconic_fill_demo.html ├── VERSION ├── LICENSE ├── test-gradient.html ├── README.md └── index.php /.gitignore: -------------------------------------------------------------------------------- 1 | Thumbs.db -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.sh eol=lf -------------------------------------------------------------------------------- /js/build/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore -------------------------------------------------------------------------------- /js/src/.htaccess: -------------------------------------------------------------------------------- 1 | Order allow,deny 2 | Deny from all -------------------------------------------------------------------------------- /js/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | Order allow,deny 3 | Deny from all 4 | -------------------------------------------------------------------------------- /img/disk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/img/disk.png -------------------------------------------------------------------------------- /img/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/img/delete.png -------------------------------------------------------------------------------- /img/canvas-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/img/canvas-bg.png -------------------------------------------------------------------------------- /img/resizable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/img/resizable.png -------------------------------------------------------------------------------- /css/iconic_fill.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/css/iconic_fill.eot -------------------------------------------------------------------------------- /css/iconic_fill.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/css/iconic_fill.otf -------------------------------------------------------------------------------- /css/iconic_fill.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/css/iconic_fill.ttf -------------------------------------------------------------------------------- /css/iconic_fill.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/css/iconic_fill.woff -------------------------------------------------------------------------------- /img/blog-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/img/blog-thumb.jpg -------------------------------------------------------------------------------- /img/disk_multiple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/img/disk_multiple.png -------------------------------------------------------------------------------- /js/prettify/lang-go.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-go.js -------------------------------------------------------------------------------- /js/prettify/lang-ml.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-ml.js -------------------------------------------------------------------------------- /js/prettify/lang-vb.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-vb.js -------------------------------------------------------------------------------- /js/prettify/lang-lua.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-lua.js -------------------------------------------------------------------------------- /js/prettify/lang-scala.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-scala.js -------------------------------------------------------------------------------- /js/prettify/lang-sql.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-sql.js -------------------------------------------------------------------------------- /js/prettify/lang-tex.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-tex.js -------------------------------------------------------------------------------- /js/prettify/lang-vhdl.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-vhdl.js -------------------------------------------------------------------------------- /js/prettify/lang-wiki.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-wiki.js -------------------------------------------------------------------------------- /js/jpicker/images/Bars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/Bars.png -------------------------------------------------------------------------------- /js/jpicker/images/Maps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/Maps.png -------------------------------------------------------------------------------- /js/prettify/lang-apollo.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/prettify/lang-apollo.js -------------------------------------------------------------------------------- /js/jpicker/images/AlphaBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/AlphaBar.png -------------------------------------------------------------------------------- /js/jpicker/images/NoColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/NoColor.png -------------------------------------------------------------------------------- /js/jpicker/images/mappoint.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/mappoint.gif -------------------------------------------------------------------------------- /js/jpicker/images/picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/picker.gif -------------------------------------------------------------------------------- /js/src/module/GradientCreatorApp.coffee: -------------------------------------------------------------------------------- 1 | window.GradientCreatorApp = angular.module('GradientCreatorApp', ['LocalStorageModule'], ->); -------------------------------------------------------------------------------- /js/jpicker/images/bar-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/bar-opacity.png -------------------------------------------------------------------------------- /js/jpicker/images/map-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/map-opacity.png -------------------------------------------------------------------------------- /js/jpicker/images/rangearrows.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/rangearrows.gif -------------------------------------------------------------------------------- /js/jpicker/images/preview-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evictor/html5-canvas-gradient-creator/HEAD/js/jpicker/images/preview-opacity.png -------------------------------------------------------------------------------- /VERSION: -------------------------------------------------------------------------------- 1 | 1.0.1 2 | ===== 3 | - Fixed CoffeeScript build script line endings. 4 | - Note in readme about CS build script. 5 | 6 | 1.0 7 | === 8 | - Initial release. -------------------------------------------------------------------------------- /js/build.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/bash 2 | SCRIPT_PATH=$0 3 | SCRIPT_DIR=$(dirname $SCRIPT_PATH) 4 | BUILD_DIR=$SCRIPT_DIR"/build/" 5 | SRC_DIR=$SCRIPT_DIR"/src/" 6 | coffee -o $BUILD_DIR -cw $SRC_DIR 7 | -------------------------------------------------------------------------------- /js/prettify/lang-proto.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.sourceDecorator({keywords:"bytes,default,double,enum,extend,extensions,false,group,import,max,message,option,optional,package,repeated,required,returns,rpc,service,syntax,to,true",types:/^(bool|(double|s?fixed|[su]?int)(32|64)|float|string)\b/,cStyleComments:!0}),["proto"]); 2 | -------------------------------------------------------------------------------- /js/src/directive/killContextMenuArea.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Apply this to an element to prevent the right-click context menu within that element. 3 | 4 | Usage: 5 | 6 | ... 7 | ### 8 | GradientCreatorApp.directive 'killContextMenuArea', -> 9 | return (scope, elem) -> 10 | elem.bind 'contextmenu', false -------------------------------------------------------------------------------- /js/src/directive/onDomReady.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Eval's a scope expression on DOM ready. 3 | 4 | Usage: 5 | ... 6 | 7 | onDomReady - {expression} - Eval'd on scope. 8 | ### 9 | GradientCreatorApp.directive 'onDomReady', -> 10 | (scope, elem, attrs) -> 11 | jQuery -> scope.$apply attrs.onDomReady -------------------------------------------------------------------------------- /js/src/model/ColorHandle.coffee: -------------------------------------------------------------------------------- 1 | GradientCreatorApp.factory 'ColorHandle', -> 2 | class ColorHandle 3 | ### 4 | @param {String} color Color string in CSS rgba(0-255, 0-255, 0-255, 0-1) format. 5 | @param {Number} stop Value 0-1, the gradient color stop. 0 means the color appears at 0%, 0.5 means 50%, etc. 6 | ### 7 | constructor: (@color, @stop) -> -------------------------------------------------------------------------------- /js/prettify/lang-yaml.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:>?|]+/,a,":|>?"],["dec",/^%(?:YAML|TAG)[^\n\r#]+/,a,"%"],["typ",/^&\S+/,a,"&"],["typ",/^!\S*/,a,"!"],["str",/^"(?:[^"\\]|\\.)*(?:"|$)/,a,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,a,"'"],["com",/^#[^\n\r]*/,a,"#"],["pln",/^\s+/,a," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\n\r]|$)/],["pun",/^-/],["kwd",/^\w+:[\n\r ]/],["pln",/^\w+/]]),["yaml","yml"]); 3 | -------------------------------------------------------------------------------- /js/src/directive/tooltip.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Uses qTip and title attribute to make a tooltip. 3 | 4 | Usage: 5 | ... 6 | 7 | title - {String} - Tooltip text. 8 | tooltip - {expression} - qTip options. 9 | ### 10 | GradientCreatorApp.directive 'tooltip', -> 11 | (scope, elem, attrs) -> 12 | throw 'qTip not loaded.' if !jQuery.fn.qtip? 13 | 14 | elem.qtip scope.$eval(attrs.tooltip || '{}'); -------------------------------------------------------------------------------- /js/prettify/lang-hs.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t-\r ]+/,null,"\t\n\r "],["str",/^"(?:[^\n\f\r"\\]|\\[\S\s])*(?:"|$)/,null,'"'],["str",/^'(?:[^\n\f\r'\\]|\\[^&])'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:--+[^\n\f\r]*|{-(?:[^-]|-+[^}-])*-})/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^\d'A-Za-z]|$)/, 2 | null],["pln",/^(?:[A-Z][\w']*\.)*[A-Za-z][\w']*/],["pun",/^[^\d\t-\r "'A-Za-z]+/]]),["hs"]); 3 | -------------------------------------------------------------------------------- /js/prettify/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /js/src/directive/prettify.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Basic wrapper for Mike Samuel's Prettify plugin (code syntax highlighter). Code language is inferred by Prettify. 3 | 4 | Usage: 5 |

6 | 7 | prettify - {expression} - Code to prettify (probably given as a variable or function on your scope). 8 | 9 | @link http://code.google.com/p/google-code-prettify/ 10 | ### 11 | GradientCreatorApp.directive 'prettify', ($timeout) -> 12 | scope: prettify: '=' 13 | template: '

' 14 | link: (scope, elem, attrs) -> 15 | $pre = elem.find 'pre' 16 | 17 | # Redraw on content change 18 | scope.$watch 'prettify', (content) -> 19 | $pre.text content 20 | prettyPrint() -------------------------------------------------------------------------------- /js/prettify/lang-lisp.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["opn",/^$+/,a,"("],["clo",/^$+/,a,")"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,a], 3 | ["lit",/^[+-]?(?:[#0]x[\da-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[de][+-]?\d+)?)/i],["lit",/^'(?:-*(?:\w|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?)?/],["pln",/^-*(?:[_a-z]|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?/i],["pun",/^[^\w\t\n\r "'-);\\\xa0]+/]]),["cl","el","lisp","scm"]); 4 | -------------------------------------------------------------------------------- /js/prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n"]],[["str",/^"(?:[^\n\f\r"\\]|\$?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)$/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", 2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /js/jpicker/jPicker.css: -------------------------------------------------------------------------------- 1 | @media all 2 | { 3 | #jPicker { margin: 0px 8px; text-align: left; } 4 | #jPicker ul { font-size: 15px; margin: 0px 0px 0px 15px; padding: 0px; } 5 | #jPicker ul li { list-style: disc; padding: 2px 0px; } 6 | #jPicker ul li ul { margin-bottom: 10px; } 7 | #jPicker ul li ul li { list-style: circle; } 8 | #jPicker p { font-size: 13px; padding: 0px 10px; } 9 | #jPicker hr { clear: both; } 10 | #jPicker h2.jPicker { font-size: 16px; padding: 20px 10px; } 11 | #jPicker code { color: #8bd; font-size: 14px; font-weight: bold; } 12 | #jPicker pre { background: #eee; border: 1px solid #000; color: #000; display: block; font-size: 11px; margin: 10px 5px; padding: 5px; } 13 | #jPicker span { font-size: 13px; text-align: center; } 14 | #jPicker a { color: #ff8050; } 15 | #jPicker input { font-size: 13px; padding: 2px 5px; } 16 | #jPicker h2 { font-size: 16px; margin: 10px 0px; } 17 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2013 Ezekiel Victor 2 | http://ezekielvictor.com/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining 5 | a copy of this software and associated documentation files (the 6 | "Software"), to deal in the Software without restriction, including 7 | without limitation the rights to use, copy, modify, merge, publish, 8 | distribute, sublicense, and/or sell copies of the Software, and to 9 | permit persons to whom the Software is furnished to do so, subject to 10 | the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/src/directive/newColorHandleClickArea.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Area beneath the working canvas where you can click to add additional color handles. 3 | 4 | Usage: 5 | 6 | ### 7 | GradientCreatorApp.directive 'newColorHandleClickArea', ($document) -> 8 | template: '' 9 | link: (scope, elem) -> 10 | # Get and hide icon 11 | addHandleIcon = elem.find('.addHandleIcon').hide() 12 | 13 | # Track global mousedown/up status 14 | mouseIsDown = false 15 | $document.mousedown -> mouseIsDown = true 16 | $document.mouseup -> mouseIsDown = false 17 | 18 | # Show icon if hovering over click area while mouse is up 19 | elem.mouseover -> addHandleIcon.show() unless mouseIsDown 20 | elem.mouseout -> addHandleIcon.hide() 21 | elem.mousemove (event) -> addHandleIcon.css left: event.offsetX, top: event.offsetY - 5 22 | 23 | # Add color handle on left-mousedown 24 | elem.mousedown (event) -> 25 | leftClicked = event.which == 1 26 | if leftClicked 27 | scope.$apply -> scope.addColorHandle (event.pageX - elem.offset().left) / elem.width() 28 | addHandleIcon.hide() -------------------------------------------------------------------------------- /test-gradient.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Breakfast (modified) 6 | 11 | 12 | 13 |

14 | 38 | 39 | -------------------------------------------------------------------------------- /js/prettify/lang-n.js: -------------------------------------------------------------------------------- 1 | var a=null; 2 | PR.registerLangHandler(PR.createSimpleLexer([["str",/^(?:'(?:[^\n\r'\\]|\\.)*'|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,a,'"'],["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,a,"#"],["pln",/^\s+/,a," \r\n\t\xa0"]],[["str",/^@"(?:[^"]|"")*(?:"|$)/,a],["str",/^<#[^#>]*(?:#>|$)/,a],["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,a],["com",/^\/\/[^\n\r]*/,a],["com",/^\/\*[\S\s]*?(?:\*\/|$)/, 3 | a],["kwd",/^(?:abstract|and|as|base|catch|class|def|delegate|enum|event|extern|false|finally|fun|implements|interface|internal|is|macro|match|matches|module|mutable|namespace|new|null|out|override|params|partial|private|protected|public|ref|sealed|static|struct|syntax|this|throw|true|try|type|typeof|using|variant|virtual|volatile|when|where|with|assert|assert2|async|break|checked|continue|do|else|ensures|for|foreach|if|late|lock|new|nolate|otherwise|regexp|repeat|requires|return|surroundwith|unchecked|unless|using|while|yield)\b/, 4 | a],["typ",/^(?:array|bool|byte|char|decimal|double|float|int|list|long|object|sbyte|short|string|ulong|uint|ufloat|ulong|ushort|void)\b/,a],["lit",/^@[$_a-z][\w$@]*/i,a],["typ",/^@[A-Z]+[a-z][\w$@]*/,a],["pln",/^'?[$_a-z][\w$@]*/i,a],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,a,"0123456789"],["pun",/^.[^\s\w"-$'./@`]*/,a]]),["n","nemerle"]); 5 | -------------------------------------------------------------------------------- /js/prettify/lang-clj.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (C) 2011 Google Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | var a=null; 17 | PR.registerLangHandler(PR.createSimpleLexer([["opn",/^[([{]+/,a,"([{"],["clo",/^[)\]}]+/,a,")]}"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:def|if|do|let|quote|var|fn|loop|recur|throw|try|monitor-enter|monitor-exit|defmacro|defn|defn-|macroexpand|macroexpand-1|for|doseq|dosync|dotimes|and|or|when|not|assert|doto|proxy|defstruct|first|rest|cons|defprotocol|deftype|defrecord|reify|defmulti|defmethod|meta|with-meta|ns|in-ns|create-ns|import|intern|refer|alias|namespace|resolve|ref|deref|refset|new|set!|memfn|to-array|into-array|aset|gen-class|reduce|map|filter|find|nil?|empty?|hash-map|hash-set|vec|vector|seq|flatten|reverse|assoc|dissoc|list|list?|disj|get|union|difference|intersection|extend|extend-type|extend-protocol|prn)\b/,a], 18 | ["typ",/^:[\dA-Za-z-]+/]]),["clj"]); 19 | -------------------------------------------------------------------------------- /js/src/directive/colorPicker.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Wrapper of jPicker color picker. 3 | 4 | Usage: 5 | 6 | 7 | colorPicker - {expression} - Options object for jPicker. 8 | ngModel - {expression} - Committed color will be bound to or read from this model. 9 | cancel - {expression} - Optional expression to eval on color picker cancel. 10 | 11 | Color model will always be set to rgba color or null; will only accept rgba and null input. 12 | ### 13 | GradientCreatorApp.directive 'colorPicker', ($timeout) -> 14 | require: 'ngModel' 15 | link: (scope, elem, attrs, ngModelCtrl) -> 16 | domElem = elem[0] 17 | 18 | # Init jPicker 19 | opts = angular.extend {images: clientPath: 'js/jpicker/images/'}, scope.$eval attrs.colorPicker 20 | commitColor = (color) -> scope.$apply -> 21 | rgba = color.val 'rgba' 22 | ngModelCtrl.$setViewValue if rgba then "rgba(#{rgba.r}, #{rgba.g}, #{rgba.b}, #{rgba.a / 255})" else null 23 | elem.jPicker opts, commitColor, null, -> if attrs.cancel? then scope.$apply -> scope.$eval attrs.cancel 24 | 25 | # Color model change 26 | ngModelCtrl.$formatters.push (color) -> 27 | if color 28 | colorParts = color.replace(/[^\d.,]/g, '').split(',') 29 | 30 | rgba = 31 | r: parseInt colorParts[0] 32 | g: parseInt colorParts[1] 33 | b: parseInt colorParts[2] 34 | a: 255 * parseFloat colorParts[3] 35 | domElem.color.active.val 'rgba', rgba 36 | domElem.color.current.val 'rgba', rgba 37 | 38 | # Honor ngShow 39 | scope.$watch attrs.ngShow, (show) -> $timeout -> elem.toggle show -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Live app 2 | 3 | https://zeke.blog/html5-canvas-gradient-creator-app/ 4 | 5 | # HTML5 Canvas Gradient Creator 6 | 7 | There are plenty of CSS3 gradient creators out there, but much to my surprise there was not a single gradient creator for HTML5 `

Name	Iconic Icon	Unicode Icon	Hexidecimal Code
lightbulb			e063
equalizer			e052
brush_alt			e01c
move			e03e
tag_fill			e02b
book_alt2			e06a
layers			e01f
chat_alt_fill			e007
layers_alt			e020
cloud_upload			e045
chart_alt			e029
fullscreen_exit_alt			e051
cloud_download			e044
paperclip			e08a
heart_fill			2764
mail			2709
pen_alt_fill			e005
check_alt			2718
battery_charging			e05d
lock_fill			e075
stop			e04a
arrow_up			2191
move_horizontal			e038
compass			e021
minus_alt			e009
battery_empty			e05c
comment_fill			e06d
map_pin_alt			e002
question_mark			003f
list			e055
upload			e043
reload			e030
loop_alt4			e035
loop_alt3			e034
loop_alt2			e033
loop_alt1			e032
left_quote			275d
x			2713
last			e04d
bars			e06f
arrow_left			2190
arrow_down			2193
download			e042
home			2302
calendar			e001
right_quote_alt			e012
unlock_fill			e076
fullscreen			e04e
dial			e058
plus_alt			e008
clock			e079
movie			e060
steering_wheel			e024
pen			270e
pin			e067
denied			26d4
left_quote_alt			e011
volume_mute			e071
umbrella			2602
list_nested			e056
arrow_up_alt1			e014
undo			e02f
pause			e049
bolt			26a1
article			e053
read_more			e054
beaker			e023
beaker_alt			e010
battery_full			e073
arrow_right			2192
iphone			e06e
arrow_up_alt2			e018
cog			2699
award_fill			e022
first			e04c
trash_fill			e05a
image			e027
comment_alt1_fill			e003
cd			e064
right_quote			275e
brush			e01b
cloud			2601
eye			e025
play_alt			e048
transfer			e041
pen_alt2			e006
camera			e070
move_horizontal_alt2			e03a
curved_arrow			2935
move_horizontal_alt1			e039
aperture			e026
reload_alt			e031
magnifying_glass			e074
calendar_alt_fill			e06c
fork			e046
box			e06b
map_pin_fill			e068
bars_alt			e00a
volume			e072
x_alt			2714
link			e077
move_vertical			e03b
eyedropper			e01e
spin			e036
rss			e02c
info			2139
target			e02a
cursor			e057
key_fill			26bf
minus			2796
book_alt			e00b
headphones			e061
hash			0023
arrow_left_alt1			e013
arrow_left_alt2			e017
fullscreen_exit			e050
share			e02e
fullscreen_alt			e04f
comment_alt2_fill			e004
moon_fill			263e
at			0040
chat			e05e
move_vertical_alt2			e03d
move_vertical_alt1			e03c
check			2717
mic			e05f
book			e069
move_alt1			e03f
move_alt2			e040
document_fill			e066
plus			2795
wrench			e078
play			e047
star			2605
document_alt_fill			e000
chart			e028
rain			26c6
folder_fill			e065
new_window			e059
user			e062
battery_half			e05b
aperture_alt			e00c
eject			e04b
arrow_down_alt1			e016
pilcrow			00b6
arrow_down_alt2			e01a
arrow_right_alt1			e015
arrow_right_alt2			e019
rss_alt			e02d
spin_alt			e037
sun_fill			2600

19 | HTML5 Canvas Gradient Creator 20 | 21 | by Ezekiel Victor 22 | – learn more 23 | 24 |

Pro Tips

Basic Instructions

My presets

Presets

Built-in presets

Just for fun

HTML and JS for Your Gradient