0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add mouse events example

Browse source
This commit is contained in:
rolux 2012-04-14 12:12:09 +02:00
parent c8e25562db
commit f324320f89
12 changed files with 84 additions and 222 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demos/image/index.html
View file

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>OxJS Image Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/image.js"></script>
</head>
<body></body>
</html>

71
demos/image/js/image.js
View file

@ -1,71 +0,0 @@
Ox.load('Image', function() {
// see http://en.wikipedia.org/wiki/Lenna
Ox.Image('png/lenna256.png', function(image) {
var body = Ox.element('body'),
select = Ox.element('<select>').appendTo(body);
[
'Method...', 'src("png/lenna256.png")',
'blur(1)', 'blur(5)',
'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
'channel("h")', 'channel("s")', 'channel("l")',
'contour()',
'depth(1)', 'depth(2)', 'depth(4)',
'drawCircle([128, 128], 64, {"fill": "rgba(0, 0, 0, 0.5)"})',
'drawLine([[64, 64], [192, 192]], {"color": "red", "width": 2})',
'drawPath([[64, 64], [192, 64], [64, 192]], {"close": true, "fill": "rgba(0, 0, 0, 0.5)", "width": 2})',
'drawRectangle([64, 64], [128, 128], {"fill": "rgba(0, 0, 0, 0.5)"})',
'drawText("?", [128, 160], {"font": "64px Arial", "outline": "2px white"})',
'edges()', 'emboss()',
'encode("secret")', 'decode()',
'encode("secret", false)', 'decode(false)',
'encode("secret", 1)', 'decode(1)',
'encode("secret", false, 15)', 'decode(false, 15)',
'encode("secret", 127)', 'decode(127)',
'hue(-60)', 'hue(60)',
'invert()',
'lightness(-0.5)', 'lightness(0.5)',
'mosaic(4)', 'motionBlur()', 'photocopy()', 'posterize()',
'resize(256, 256)', 'resize(512, 512)',
'saturation(-0.5)', 'saturation(0.5)',
'scale(0.5, -1)',
'sharpen()', 'solarize()'
].forEach(function(filter) {
Ox.element('<option>').html(filter).appendTo(select);
});
select[0].onchange = function() {
if (select[0].value[0] == select[0].value[0].toLowerCase()) {
//Ox.print(select[0].value.match(/^(\w+)\((.+)\)$/))
var match = select[0].value.match(/^(\w+)\((.*?)\)$/),
fn = match[1],
args = JSON.parse('[' + match[2] + ']');
//Ox.print('??', fn, args, image.drawLine)
if (fn == 'encode' || fn == 'src') {
image[fn].apply(null, Ox.merge(args, function(image) {
Ox.element('#image').attr({
src: image.src()
});
}));
} else if (fn == 'decode') {
image[fn].apply(null, Ox.merge(args, function(str) {
alert(str);
}));
} else {
Ox.element('#image').attr({
src: image[fn].apply(null, args).src()
});
Ox.print('DONE')
}
select[0].selectedIndex = 0;
}
}
Ox.element('<br>').appendTo(body);
Ox.element('<img>').attr({
id: 'image',
src: image.src()
}).appendTo(body);
//Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));
});
});

BIN
demos/image/png/Netherlandish Proverbs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 387 KiB

66
demos/image2/index.html
View file

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>OxJS Image Encode Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script>
Ox.load('Image', function() {
var fixmeOxelement;
var body = Ox.element('body'),
button = Ox.element('<input>').attr({type: 'button', value: 'Encode'}).click(function() {
button.attr({disabled: 'disabled'})
if (button.attr('value') == 'Encode') {
button.attr({value: 'Encoding...'});
encode(function(image) {
fixmeOxelement = image;
button.removeAttr('disabled').attr({value: 'Decode'});
});
} else {
button.attr({value: 'Decoding...'});
setTimeout(function() {
decode(fixmeOxelement, function() {
button.attr({value: 'Done'})
});
}, 0);
}
}).appendTo(body);
Ox.element('<br>').appendTo(body);
function encode(callback) {
var lines = [
'The first image he told me about was of three children on a road in Iceland in 1965.',
'He said for him it was the image of happiness, and that he had often tried to link it to other images, but it had never worked.'
];
Ox.Image('png/vietnam.png', function(vietnam) {
vietnam.encode(lines[1], false, 1, function(vietnam) {
Ox.Image('png/iceland.png', function(iceland){
iceland.encode(lines[0], false, 1, function(iceland) {
Ox.print('src.length', vietnam.src().length)
iceland.encode(vietnam.src(), -1, function(image) {
Ox.element('<img>').attr({src: image.src()}).appendTo(body);
callback(image);
});
});
});
});
});
}
function decode(iceland, callback) {
iceland.decode(false, 1, function(str) {
Ox.element('<div>').html(str).appendTo(body);
iceland.decode(-1, function(src) {
Ox.element('<img>').attr({src: src}).appendTo(body);
Ox.Image(src, function(vietnam) {
vietnam.decode(false, 1, function(str) {
Ox.element('<div>').html(str).appendTo(body);
callback();
});
});
});
});
}
});
</script>
</head>
<body></body>
</html>

BIN
demos/image2/png/iceland.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 250 KiB

BIN
demos/image2/png/vietnam.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

10
demos/mouse/index.html
View file

@ -1,10 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>OxJS Mouse Events Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/mouse.js"></script>
</head>
<body></body>
</html>

64
demos/mouse/js/mouse.js
View file

@ -1,64 +0,0 @@
Ox.load('UI', {
debug: true
}, function() {
var $target = Ox.Element()
.css({
position: 'absolute',
width: '256px',
top: 0,
bottom: 0,
background: 'rgb(255, 0, 0)'
})
.html('Click here')
.appendTo(Ox.UI.$body),
$clear = Ox.Element()
.css({
position: 'absolute',
left: '256px',
right: 0,
height: '16px',
background: 'rgb(192, 192, 192)'
})
.html('Clear log')
.click(function() {
$log.empty();
})
.appendTo(Ox.UI.$body);
$log = Ox.Element()
.css({
position: 'absolute',
left: '256px',
right: 0,
top: '16px',
bottom: 0,
overflowY: 'auto'
})
.appendTo(Ox.UI.$body);
[
'anyclick', 'singleclick', 'doubleclick', 'mousedown', 'mouserepeat',
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
].forEach(function(event) {
$target.bindEvent(event, function(e) {
var date = new Date();
$('<div>')
.html(
Ox.formatDate(date, '%H:%M:%S') + '.' + (Ox.pad(date % 1000, 3)) +
' <span style="font-weight: bold">' + event + '</span> ' +
JSON.stringify(
Ox.extend(e.clientX ? {
clientX: e.clientX,
clientY: e.clientY,
} : {}, e.clientDX ? {
clientDX: e.clientDX,
clientDY: e.clientDY
} : {})
)
.replace(/"/g, '')
.replace(/:/g, ': ')
.replace(/,/g, ', ')
)
.prependTo($log.$element);
event == 'anyclick' && Ox.print(e);
});
});
});

2
examples/lenna/js/example.js
View file

@ -4,7 +4,7 @@ Load the image module.
Ox.load('Image', function() { Ox.load('Image', function() {
/* /*
Load our image (about which you can read more on Load a sample image (about which you can read more on
<a href="see http://en.wikipedia.org/wiki/Lenna">Wikipedia</a>). <a href="see http://en.wikipedia.org/wiki/Lenna">Wikipedia</a>).
*/ */
Ox.Image('png/lenna256.png', function(image) { Ox.Image('png/lenna256.png', function(image) {

26
examples/mouse_events/css/example.css Normal file
View file

@ -0,0 +1,26 @@
#clear {
position: absolute;
left: 256px;
right: 0px;
height: 16px;
padding-left: 2px;
background: rgb(224, 224, 224);
}
#log {
position: absolute;
left: 256px;
top: 16px;
right: 0;
bottom: 0;
background: rgb(255, 255, 255);
overflow-y: auto;
}
#target {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 256px;
padding-left: 2px;
background: rgb(192, 192, 192);
}

13
examples/mouse_events/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script>
</head>
<body>
</body>
</html>

44
examples/mouse_events/js/example.js Normal file
View file

@ -0,0 +1,44 @@
Ox.load({UI: {theme: 'classic'}}, function() {
var $target = Ox.Element()
.attr({id: 'target'})
.html('click/hold/drag here')
.appendTo(Ox.$body),
$log = Ox.Element()
.attr({id: 'log'})
.appendTo(Ox.$body),
$clear = Ox.Element()
.attr({id: 'clear'})
.html('clear log')
.bind({click: function() {
$log.empty();
}})
.appendTo(Ox.$body);
[
'anyclick', 'singleclick', 'doubleclick', 'mousedown', 'mouserepeat',
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
].forEach(function(event) {
$target.bindEvent(event, function(e) {
var date = new Date();
$('<div>')
.html(
Ox.formatDate(date, '%H:%M:%S')
+ '.' + (Ox.pad(date % 1000, 3))
+ ' <span style="font-weight: bold">' + event + '</span> '
+ JSON.stringify(
Ox.extend(e.clientX ? {
clientX: e.clientX,
clientY: e.clientY,
} : {}, e.clientDX ? {
clientDX: e.clientDX,
clientDY: e.clientDY
} : {})
)
.replace(/"/g, '')
.replace(/,/g, ', ')
.replace(/:/g, ': ')
)
.prependTo($log);
});
});
});