add mouse events example
This commit is contained in:
parent
c8e25562db
commit
f324320f89
12 changed files with 84 additions and 222 deletions
|
@ -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>
|
|
@ -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 |
|
@ -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 |
|
@ -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>
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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) {
|
||||
|
|
26
examples/mouse_events/css/example.css
Normal file
26
examples/mouse_events/css/example.css
Normal 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
13
examples/mouse_events/index.html
Normal 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
44
examples/mouse_events/js/example.js
Normal 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);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue