Skip to content

Commit 572052d

Browse files
CaptainCodemanCaptainCodeman
committed
Initial commit
0 parents  commit 572052d

File tree

9 files changed

+461
-0
lines changed

9 files changed

+461
-0
lines changed

‎.editorconfig‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# http://editorconfig.org
4+
5+
root = true
6+
7+
[*]
8+
# Change these settings to your own preference
9+
indent_style = space
10+
indent_size = 2
11+
12+
# We recommend you to keep these unchanged
13+
end_of_line = lf
14+
charset = utf-8
15+
trim_trailing_whitespace = true
16+
insert_final_newline = true
17+
18+
[*.md]
19+
indent_size = 4

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
_[Demo and API docs](http://captaincodeman.github.io/sign-here/)_
2+
3+
##<sign-here>
4+
5+
`sign-here` is a polymer element that provides smooth signature drawing with HTML5 Canvas by wrapping
6+
the [signature_pad](https://github.com/szimek/signature_pad) library.
7+
8+
Example:
9+
10+
<sign-here width="400" height="200" image="{{image}}"></sign-here>
11+
12+
The `image` property will be updated after any interaction with the data-uri encoded value of the image.
13+
The encoding method and quality can be controlled, as can the color of the paper and ink.

‎bower.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "sign-here",
3+
"version": "0.0.1",
4+
"description": "Smooth signature drawing with HTML5 Canvas",
5+
"authors": [
6+
"Simon Green <simon@captaincodeman.com>"
7+
],
8+
"main": "sign-here.html",
9+
"repository": {
10+
"type": "git",
11+
"url": "git://github.com/github.com/CaptainCodeman/sign-here.git"
12+
},
13+
"homepage": "http://captaincodeman.github.io/sign-here/",
14+
"keywords": [
15+
"polymer",
16+
"web-components",
17+
"signature_pad",
18+
"signature",
19+
"sign",
20+
"canvas"
21+
],
22+
"dependencies": {
23+
"polymer": "Polymer/polymer#^1.4.0",
24+
"signature_pad": "^1.5.3"
25+
},
26+
"devDependencies": {
27+
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
28+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
29+
"web-component-tester": "^4.0.0",
30+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
31+
},
32+
"license": "MIT"
33+
}

‎demo/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>sign-here demo</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
7+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
8+
9+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
10+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
11+
12+
<link rel="import" href="x-sign-here.html">
13+
<link rel="import" href="../sign-here.html">
14+
15+
<style is="custom-style" include="demo-pages-shared-styles">
16+
</style>
17+
</head>
18+
<body>
19+
20+
<div class="vertical-section-container centered">
21+
<h3>Basic sign-here Demo</h3>
22+
<demo-snippet>
23+
<template>
24+
<sign-here id="signhere" width="360" height="180"></sign-here>
25+
</template>
26+
</demo-snippet>
27+
28+
<h3>With Bound Properties</h3>
29+
<x-sign-here></x-sign-here>
30+
</div>
31+
</body>
32+
</html>

‎demo/x-sign-here.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<link rel="import" href="../../polymer/polymer.html">
2+
<link rel="import" href="../sign-here.html">
3+
4+
<dom-module id="x-sign-here">
5+
<template>
6+
<style>
7+
sign-here, img {
8+
border: 1px solid #ccc;
9+
width: 400px;
10+
height: 200px;
11+
}
12+
pre {
13+
white-space: pre-wrap;
14+
word-wrap: break-word;
15+
}
16+
</style>
17+
<sign-here id="signhere" width="400" height="200" image="{{image}}" active="{{active}}" empty="{{empty}}" type="[[type]]" pen-color="[[color]]" background-color="#fffff7"></sign-here>
18+
<ul>
19+
<li>Active: [[active]]</li>
20+
<li>Empty: [[empty]]</li>
21+
</ul>
22+
<button on-tap="clear">Clear</button>
23+
<button on-tap="jpeg">Jpeg</button>
24+
<button on-tap="png">Png</button>
25+
<button on-tap="webp">Webp</button>
26+
<button on-tap="red" style="color: #a33">Red</button>
27+
<button on-tap="green" style="color: #3a3">Green</button>
28+
<button on-tap="blue" style="color: #33a">Blue</button>
29+
<h3>Captured Image</h3>
30+
<img src$="[[image]]">
31+
<h3>Image Data</h3>
32+
<p>[[len(image)]] bytes</p>
33+
<pre>[[image]]</pre>
34+
</template>
35+
<script>
36+
Polymer({
37+
is: "x-sign-here",
38+
39+
properties: {
40+
image: String,
41+
type: {
42+
type: String,
43+
value: 'image/png'
44+
},
45+
color: {
46+
type: String,
47+
value: '#33a'
48+
}
49+
},
50+
clear: function() {
51+
this.$.signhere.clear();
52+
},
53+
jpeg: function() {
54+
this.type = 'image/jpeg';
55+
},
56+
png: function() {
57+
this.type = 'image/png';
58+
},
59+
webp: function() {
60+
this.type = 'image/webp';
61+
},
62+
red: function() {
63+
this.color = '#a33';
64+
},
65+
green: function() {
66+
this.color = '#3a3';
67+
},
68+
blue: function() {
69+
this.color = '#33a';
70+
},
71+
len: function(image) {
72+
return image.length;
73+
}
74+
});
75+
</script>
76+
</dom-module>

‎index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
3+
<html>
4+
<head>
5+
<title>sign-here</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
9+
<link rel="import" href="../iron-component-page/iron-component-page.html">
10+
</head>
11+
<body>
12+
<iron-component-page src="sign-here.html"></iron-component-page>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)