Android port using PhoneGap
This commit is contained in:
Mahdi Dibaiee
20
Android/config.xml
Normal file
20
Android/config.xml
Normal file
@ -0,0 +1,20 @@
|
||||
<widget id='com.mdibaiee.sketchy' version='1.2.1'>
|
||||
|
||||
<name>Sketchy</name>
|
||||
<description>
|
||||
Free full-featured Sketch app
|
||||
</description>
|
||||
<author email='mdibaiee@aol.com' href='http://dibaiee.ir'>
|
||||
Mahdi Dibaiee
|
||||
</author>
|
||||
<content src='index.html'/>
|
||||
<access origin='*'/>
|
||||
|
||||
<preference name='KeepRunning' value='false'/>
|
||||
<preference name='SplashScreen' value='sketchy'/>
|
||||
<preference name='SetFullScreen' value='true'/>
|
||||
<preference name='FullScreen' value='true'/>
|
||||
<preference name='DisallowOverscroll' value='true'/>
|
||||
</widget>
|
||||
|
||||
|
||||
275
Android/index.html
Normal file
275
Android/index.html
Normal file
@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Sketchy</title>
|
||||
<meta charset='UTF-8'>
|
||||
<link rel='stylesheet' href='css/main.css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<button class='menu'></button>
|
||||
<span class='separator long left menu'></span>
|
||||
<p id='title'>Sketchy</p>
|
||||
<button class='save'></button>
|
||||
<span class='separator small right'></span>
|
||||
<button class='load'></button>
|
||||
</header>
|
||||
|
||||
<div id='container'>
|
||||
<canvas></canvas>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
|
||||
<div id='menu'>
|
||||
<div class='options'>
|
||||
<p class='icon-settings'>Settings</p>
|
||||
<div class='general'>
|
||||
<button id='settype'>Brush Type<span>Sketch</span></button>
|
||||
<button id='setcolor'>Color<span>#000000</span></button>
|
||||
<button id='setbg'>Background<span>#ffffff</span></button>
|
||||
<p id='lineWidth'>Line Width <span>2</span></p>
|
||||
<div role="slider" class='lineWidth'>
|
||||
<div>
|
||||
<progress value="2" min="1" max="100"></progress>
|
||||
<button style='left: 2%'>handler</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<hr>
|
||||
<div class='sketch'>
|
||||
<p class='icon-settings'>Sketch</p>
|
||||
<p id='connectTelorance'>Telorance<span>40</span></p>
|
||||
<div role="slider" class='connectTelorance'>
|
||||
<div>
|
||||
<progress value="40" min="1" max="100"></progress>
|
||||
<button style='left: 40%'>handler</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='fur hidden'>
|
||||
<p class='icon-settings'>Fur</p>
|
||||
<p id='connectTelorance'>Telorance<span>40</span></p>
|
||||
<div role="slider" class='connectTelorance'>
|
||||
<div>
|
||||
<progress value="40" min="10" max="100"></progress>
|
||||
<button style='left: 40%'>handler</button>
|
||||
</div>
|
||||
</div>
|
||||
<p id='furLength'>Fur Length<span>50</span></p>
|
||||
<div role="slider" class='furLength'>
|
||||
<div>
|
||||
<progress value="50" min="1" max="100"></progress>
|
||||
<button style='left: 50%'>handler</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='line hidden'>
|
||||
<button id='setlineJoin'>Line Join<span>Round</span></button>
|
||||
<button id='setlineCap'>Line Cap<span>Round</span></button>
|
||||
|
||||
<p class='fill'>Fill<span>No</span></p>
|
||||
<p class='stroke'>Stroke<span>Yes</span></p>
|
||||
</div>
|
||||
|
||||
<div class='shape hidden'>
|
||||
<p class='icon-settings'>Shape</p>
|
||||
<button id='setshape'>Type<span>Circle</span></button>
|
||||
<p class='fill'>Fill<span>No</span></p>
|
||||
<p class='stroke'>Stroke<span>Yes</span></p>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='bottom'>
|
||||
<button id='clear' class='icon-clear'>Clear</button>
|
||||
<button id='undo' class='icon-undo'>Undo</button>
|
||||
<button id='redo' class='icon-redo'>Redo</button>
|
||||
<hr>
|
||||
<button id='about'>About</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='type' class='hidden single'>
|
||||
<section class='scrollable'>
|
||||
<h1>Brush Type</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true' data-target='sketch'><label><span>Sketch</span></label></li>
|
||||
<li data-target='fur'><label><span>Fur</span></label></li>
|
||||
<li data-target='pencil'><label><span>Pencil</span></label></li>
|
||||
<li data-target='line'><label><span>Line</span></label></li>
|
||||
<li data-target='shape'><label><span>Shape</span></label></li>
|
||||
<!--<li><label><span>Eraser</span></label></li>-->
|
||||
</ol>
|
||||
</section>
|
||||
<menu>
|
||||
<button class='affirmative full'>Cancel</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='lineJoin' class='hidden single'>
|
||||
<section class='scrollable'>
|
||||
<h1>Line Join</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true'><label><span>Round</span></label></li>
|
||||
<li><label><span>Bevel</span></label></li>
|
||||
<li><label><span>Miter</span></label></li>
|
||||
</ol>
|
||||
</section>
|
||||
<menu>
|
||||
<button class='affirmative full'>Cancel</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='shape' class='hidden single'>
|
||||
<section class='scrollable'>
|
||||
<h1>Shape Type</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true' data-target='shape'><label><span>Circle</span></label></li>
|
||||
<li data-target='shape'><label><span>Rectangle</span></label></li>
|
||||
<li data-target='shape'><label><span>Square</span></label></li>
|
||||
<li data-target='shape'><label><span>Triangle</span></label></li>
|
||||
</ol>
|
||||
<menu>
|
||||
<button class='affirmative full'>Cancel</button>
|
||||
</menu>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='lineCap' class='hidden single'>
|
||||
<section class='scrollable'>
|
||||
<h1>Line Cap</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true'><label><span>Round</span></label></li>
|
||||
<li><label><span>Square</span></label></li>
|
||||
<li><label><span>Butt</span></label></li>
|
||||
</ol>
|
||||
</section>
|
||||
<menu>
|
||||
<button class='affirmative full'>Cancel</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='save' class='hidden confirm'>
|
||||
<section class='scrollable'>
|
||||
<h1>Save</h1>
|
||||
<h1>Type</h1>
|
||||
<ol role='listbox'>
|
||||
<li id='exp' aria-selected='true'><label><span>Export to Image</span></label></li>
|
||||
<li id='pro'><label><span>Sketchy Project</span></label></li>
|
||||
</ol>
|
||||
<h1>Background</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true'><label><span>White</span></label></li>
|
||||
<li><label><span>Current Color</span></label></li>
|
||||
<li><label><span>Transparent</span></label></li>
|
||||
</ol>
|
||||
<h1>File Name</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true' data-input><label><span contenteditable>My Sketch</span></label></li>
|
||||
</ol>
|
||||
<br>
|
||||
<span class='special'>Note: You must disable pop-up blocker to save your sketch.</span>
|
||||
</section>
|
||||
<menu>
|
||||
<button class='affirmative' type='button'>Cancel</button>
|
||||
<button class='affirmative' type='button'>Save</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='load' class='hidden confirm'>
|
||||
<section class='scrollable'>
|
||||
<h1>Load</h1>
|
||||
<h1 class='hidden'>file</h1>
|
||||
<ol role='listbox'>
|
||||
</ol>
|
||||
</section>
|
||||
<menu>
|
||||
<button class='affirmative' type='button'>Cancel</button>
|
||||
<button class='affirmative' type='button'>Load</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
|
||||
<!-- COLOR PICKER -->
|
||||
<div class='picker overlay hidden'>
|
||||
<div class='color-picker'>
|
||||
<input value='Hex' class='format' type='hidden' selected>
|
||||
<input class='color' val='#000000'>
|
||||
<div class="spectrum">
|
||||
<div>
|
||||
<div class="pin"></div>
|
||||
</div>
|
||||
</div>
|
||||
<input class="luminosity" type="range" min="0" max="100" />
|
||||
</div>
|
||||
<button class='close'>x</button>
|
||||
</div>
|
||||
|
||||
<div class='about overlay hidden'>
|
||||
<p>Sketchy</p>
|
||||
<span>Sketchy is a free sketch / paint application for Firefox.<br />Current version: 1.2</span>
|
||||
<p>Developer</p>
|
||||
<span>Sketchy was found by Mahdi Dibaiee. More info: <a href='http://about.me/mdibaiee'>About.me</a>
|
||||
<br><br>
|
||||
Contact: <br>
|
||||
<a href='https://twitter.com/mdibaiee'>Twitter</a> •
|
||||
<a href='mailto:mdibaiee@aol.com'>Email</a>
|
||||
<br><br>
|
||||
<a href='http://mdibaiee.github.io/Sketchy/changelog.html'>Changelog</a>
|
||||
</span>
|
||||
<button class='close'>x</button>
|
||||
</div>
|
||||
|
||||
<div class='tour overlay hidden'>
|
||||
<p>Tips</p>
|
||||
<span>Hey! Let me give you some tips to help you along the way,</span><br /><br />
|
||||
<span>To finish a line, hold your finger for 1 second on mobile, or double click on desktop.</span><br />
|
||||
<span>Line join, fill / stroke are applied when the line is finished.</span><br /><br />
|
||||
<span>If you found something missing, please get in touch with us.</span>
|
||||
<button class='button'>Gotcha!</button>
|
||||
<button class='close'>x</button>
|
||||
</div>
|
||||
|
||||
<div class='vote overlay hidden'>
|
||||
<p>King of Firefox OS Apps</p>
|
||||
<span>Hey! FirefoxOSGuide.com has started a competition, judging the best Firefox OS application by users' vote.</span><br /><span>Would you consider taking a few minutes to vote for us, please?</span><br /><br />
|
||||
<span>We're working to add new features to Sketchy like sharing and maybe some 'hosted' addons.</span><br /><br />
|
||||
<span>If you would like to see something in Sketchy's new version, please get in touch with us.</span>
|
||||
<br /><br />
|
||||
<a href='http://bit.ly/1irTueS'>What's your Favorite Firefox OS application?</a>
|
||||
<br />
|
||||
<a href='http://bit.ly/1hosWbM'>Original post on Firefox OS Guide</a>
|
||||
<button class='button'>OK!</button>
|
||||
<button class='close'>x</button>
|
||||
</div>
|
||||
|
||||
<!-- PRELOADER -->
|
||||
<div class='hidden'>
|
||||
<img src='css/value_selector/images/ui/pattern.png'>
|
||||
<img src='css/value_selector/images/ui/gradient.png'>
|
||||
<img src='css/value_selector/images/ui/shadow.png'>
|
||||
<img src='css/value_selector/images/ui/shadow-invert.png'>
|
||||
<img src='css/value_selector/images/icons/checked.png'>
|
||||
<img src='css/value_selector/images/ui/default.png'>
|
||||
<img src='css/value_selector/images/ui/affirmative.png'>
|
||||
</div>
|
||||
|
||||
<script src='js/libs/zepto.min.js'></script>
|
||||
<script src='js/libs/touch.js'></script>
|
||||
<script src='js/libs/color-picker-touch.js'></script>
|
||||
<script src='js/functions.js'></script>
|
||||
<script src='js/shared.js'></script>
|
||||
<script src='js/events.js'></script>
|
||||
<script src='js/diff.js'></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
123
Android/js/diff.js
Normal file
123
Android/js/diff.js
Normal file
@ -0,0 +1,123 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
$('*').off('click mousemove mousedown mouseup mouseleave').on('click mousemove mousedown mouseup mouseleave', function(e) {
|
||||
e.preventDefault;
|
||||
})
|
||||
|
||||
/*$('a[href^="http"]').tap(function(e) {
|
||||
e.preventDefault();
|
||||
var href = $(this).attr('href');
|
||||
var view = new MozActivity({
|
||||
name: 'view',
|
||||
data: {
|
||||
type: 'url',
|
||||
url: href
|
||||
}
|
||||
})
|
||||
return false;
|
||||
}).click(function(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})*/
|
||||
|
||||
/*$('a[href^="mailto"]').tap(function(e) {
|
||||
e.preventDefault();
|
||||
var mail = new MozActivity({
|
||||
name: 'new',
|
||||
data: {
|
||||
type: 'mail',
|
||||
url: $(this).attr('href')
|
||||
}
|
||||
})
|
||||
return false;
|
||||
}).click(function(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})*/
|
||||
|
||||
window.save = function() {
|
||||
var f = c.getImageData(0, 0, width(), height());
|
||||
switch(save.background) {
|
||||
case 'white': {
|
||||
c.fillStyle = 'white';
|
||||
c.globalCompositeOperation = 'destination-over';
|
||||
c.fillRect(0, 0, width(), height());
|
||||
c.fillStyle = settings.color;
|
||||
c.globalCompositeOperation = settings.composite;
|
||||
break;
|
||||
}
|
||||
case 'current color': {
|
||||
c.fillStyle = settings.bg;
|
||||
c.globalCompositeOperation = 'destination-over';
|
||||
c.fillRect(0, 0, width(), height());
|
||||
c.globalCompositeOperation = settings.composite;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var data = $c[0].toDataURL();
|
||||
if( save.type == 'sketchy project' ) {
|
||||
var list = JSON.parse(localStorage.getItem('projects'));
|
||||
var index;
|
||||
if( list && list.some(function(a, i) { if( a.name == save['file name'] ) {index = i; return true} return false }) ) {
|
||||
if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name'] + '?') ) {
|
||||
console.log(index);
|
||||
list[index] = {
|
||||
name: save['file name'],
|
||||
data: data,
|
||||
points: window.points,
|
||||
settings: settings
|
||||
}
|
||||
localStorage.setItem('projects', JSON.stringify(list));
|
||||
}
|
||||
}
|
||||
else {
|
||||
list ? list.push({
|
||||
name: save['file name'],
|
||||
data: data,
|
||||
points: window.points,
|
||||
settings: settings
|
||||
}) : list = [{
|
||||
name: save['file name'],
|
||||
data: data,
|
||||
points: window.points,
|
||||
settings: settings
|
||||
}];
|
||||
localStorage.setItem('projects', JSON.stringify(list));
|
||||
}
|
||||
} else {
|
||||
var sd = window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
|
||||
var fdata = dataToBlob(data);
|
||||
var req = fs.root.getFile(save['file name'] + '.png', {create: true}, function(file) {
|
||||
file.createWriter(function(writer) {
|
||||
writer.write(fdata);
|
||||
alert('Your Sketch was saved successfuly: ' + this.result);
|
||||
}, function() {
|
||||
alert('Something bad happened trying to save your sketch ' + save['file name'] + '\n Possible reasons:\n Duplicate Name \n Not enough permission')
|
||||
})
|
||||
})
|
||||
}, function(error) {
|
||||
alert('Couldn\'t access filesystem\n' + error.message);
|
||||
});
|
||||
}
|
||||
c.putImageData(f, 0, 0);
|
||||
}
|
||||
window.load = function() {
|
||||
var file = JSON.parse(localStorage.getItem('projects')).filter(function(a) { return a.name == load.file })[0];
|
||||
var img = document.createElement('img');
|
||||
img.src = file.data;
|
||||
img.onload = function() {
|
||||
c.clearRect(0, 0, width(), height());
|
||||
c.drawImage(img, 0, 0);
|
||||
window.points = file.points;
|
||||
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}, { data: c.getImageData(0, 0, width(), height()), points: file.points}];
|
||||
$c.first().css('background', file.settings.bg);
|
||||
window.settings.bg = file.settings.bg;
|
||||
}
|
||||
}
|
||||
|
||||
if( !localStorage.getItem('sawVote') ) {
|
||||
$('.vote').removeClass('hidden');
|
||||
localStorage.setItem('sawVote', true);
|
||||
}
|
||||
|
||||
})
|
||||
BIN
Android/res/drawable/sketchy.png
Normal file
BIN
Android/res/drawable/sketchy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Reference in New Issue
Block a user