add mouse events example

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

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>

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'));
});
});

Binary file not shown.

Before

Width:  |  Height:  |  Size: 387 KiB

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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

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>

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);
});
});
});

View file

@ -4,7 +4,7 @@ Load the image module.
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>).
*/
Ox.Image('png/lenna256.png', function(image) {

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);
}

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>

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);
});
});
});