En este ejemplo añadimos la clase Drag and Drop a je5
Con la función getBrowser(): Capturamos el tipo de navegador.
Iniciamos con startNow(): Una vez capturado la posición del cursor Llamamos a los métodos: moving() movingOrder()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
</head>
<body>
<img src="https://www.je5.es/img/1.jpg" id="1" style="width:300px; top:100px; left:100px; position:absolute" />
<img src="https://www.je5.es/img/2.jpg" id="2" style="width:300px; top:150px; left:150px; position:absolute" />
<img src="https://www.je5.es/img/3.jpg" id="3" style="width:300px; top:200px; left:200px; position:absolute" />
<h1 style="font-family: Verdana; color: #fff; background-color: rgba(0, 0, 0, 0.3); padding-right: 10px; padding-left: 10px; font-size: 3.4em; margin-top: 0.5%;"> je5 Drag and Drop%</h1>
<script>
$('#1').je5({
sort:'dragDrop'
});
$('#2').je5({
sort:'dragDrop'
});
$('#3').je5({
sort:'dragDrop'
});
</script>
</body>
</html>
Save Cam Captures
En esta ocasión capturamos las imágenes de la web cam y las guardamos en una base de datos.
https://github.com/jschaves/je5/tree/master/examples/save_cam_captures
Ejemplo con Node.js:
capture.html
El objeto "media" con el valor capture es el encargado de activar la webcam
<script>
$('#video').je5({
sort:{media:'capture'},//select webcam
att:{
video:true,
audio:true,
width:450,
controls:false,
muted:true
},
capture:{
video_in:'video',//id capture
video_out:'output',//id output img
btton_id:'cap',//id button of capture img
scale:0.2,//scale img
x:0,//ini img x
y:0//ini img y
}
});
setInterval(
function () {
document.getElementById('cap').click();
$.post('https://localhost:8000/capture',{
img:dataStreaming
}, function(data, textStatus, jqXHR) {
console.log(data);
});
}, 9000);
</script>
El objeto "capture.video_in" selecciona la etiqueta video html5 que queremos guardar los frames
El objeto "capture.output" identidad de la etiqueta donde mostramos la captura
El objeto "capture.btton_id" identidad del disparador de la captura
El objeto "capture.scale" determina el tamaño de la imagen a capturar
Los objetos "capture.x" y "capture.y" determina la posición de inicio de la imagen
La función "setInterval" determinamos el tiempo que transcurre de una captura a otra y guardamos en la base de datos mediante la llamada al servidor https://localhost:8000/capture
Hay que crear una tabla ejemplo archivo db.sql
Lanzar el servidor con capture.js
Para ver capturas lanzar otro servidor con view.js https://localhost:8001/view
Hay otro ejemplo en php https://github.com/jschaves/je5/tree/master/examples/save_cam_captures/php
Save WebCam captures examples PHP & NODE.JS
Section "je5 Background Animate 100%"
Section "Canvas"
Section "SVG"
Section "Animate"
Section "Media"
Section "Stats"
Audio, video, webcam, Stats
Code example je5 Background Animate 100% Demo "je5 Background Animate 100%"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
</head>
<body>
<h1 style="font-family: Verdana; color: #fff; background-color: rgba(0, 0, 0, 0.3); padding-right: 10px; padding-left: 10px; font-size: 3.4em; margin-top: 0.5%;"> je5 Background Animate 100%</h1>
<script>
$('html').je5({
sort:'background',
attrs:{
type:'css',
//frames
src:[
'https://je5.es/images/img-frames/1.png',
'https://je5.es/images/img-frames/2.png',
'https://je5.es/images/img-frames/3.png',
'https://je5.es/images/img-frames/4.png',
'https://je5.es/images/img-frames/5.png',
'https://je5.es/images/img-frames/6.png',
'https://je5.es/images/img-frames/7.png',
'https://je5.es/images/img-frames/8.png'
],
change:{//optinal only animation mode
time:160,//Time-out to next frame in ms
rerun:100//Total repetitions of the animation
}
}
});
</script>
</body>
</html>
Code example Stats Pie Graph Demo "Media" Stats Pie Graph
<!DOCTYPE html>
<html>
<head>
<title>je5 "stats" Scalable Vector Graphics stats Pie Graph</title><meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
<style>
svg {
cursor: pointer;
}
</style>
</head>
<body>
<svg id="pie" style="display:none" width="100%" height="900" viewBox="193 8 710 1806"></svg>
<script type="text/javascript">
$('#pie').je5({
sort:'stats',
draw:{
type:'pie',
att:{
size:2,//scale pie
data:{
squares:{//colored squares, and titles
att:{
x:900,
y:200,
width:30,
height:30
},
separation:50
},
perc:[//sharing percentages
10,
20,
30,
10,
10,
20
],
'text-perc':{//style text percentages
att:{
fill:'#fff',
'font-size':'180%',
'font-family':'Arial',
'text-anchor':'middle'
},
position:1.1
},
'text-titles':{//style text titles
att:{
x:944,
y:226,
fill:'red',
'font-size':'180%',
'font-family':'Arial',
'text-anchor':'start'
},
separation:50
},
balloon:{//balloons over portions
att:{
width:540,
height:100,
fill:'#fff',
opacity:0.7,
stroke:'#41f',
'stroke-width':5,
rx:3,
ry:3
},
separation:50,
text:{//style text balloons
fill:'red',
'font-size':'135%',
'font-family':'Arial',
'text-anchor':'start'
},
text_separation:{
x:40,
y:30
},
comments:{
fill:'#000',
'font-size':'140%',
'font-family':'Arial',
'text-anchor':'start'
},
comments_separation:{
x:10,
y:60
}
},
attrs:{/* it is not mandatory, only if you want some specific colors
fill:[
'purple',
'blue',
'orange',
'#000',
'#ccc',
'#ddd'
],*/
'stroke':[
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
'#fff'
],
'stroke-width':[
2,
2,
2,
2,
2,
2
],
titles:[
'Cats:',
'Ducks:',
'Dolphins:',
'Horses:',
'Dogs:',
'Eagles:'
],
comments:[
' ■ Domestic carnivorous mammal round head',
' ■ Aquatic birds Anseriformes flattened peak',
' ■ Whales and 2-3 m long, with large head',
' ■ Mammal perissodactyle about 1,5 m. in height',
' ■ Domestic carnivorous mammal of the family Canidae',
' ■ raptors hawks, approximately 2 m wingspan'
]
}
}
}
}
}).show('slow');
</script>
</body>
</html>
Code example WebCam Demo "Media" WebCam je5
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
<title>Instant video and webcam with JE5 "MEDIA"</title>
<meta charset="utf8">
</head>
<body>
<table>
<tr>
<td></td>
<td colspan="2"><h1>Instant webcam photo with je5 "Media"
Chrome 32.0.1700.102 m Firefox 27.0</h1></td>
</tr>
<tr>
<td><video id="video" autoplay></video></td>
</tr>
</table>
<div style="border: solid 1px #ccc; padding: 10px; text-align: center;position:relative">
<p><button id="cap"><h2>Capture Photo</h2></button></p>
<div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;"></div>
</div>
<script type="text/javascript">deo:true,
$('#video').je5({
sort:{media:'capture'},//select webcam
att:{
video:true,
audio:true,
width:450,
controls:false,
muted:true
},
capture:{
video_in:'video',//id capture
video_out:'output',//id output img
btton_id:'cap',//id button of capture img
scale:0.7,//scale img
x:0,//ini img x
y:0//ini img y
}
});
</script>
</body>
</html>
Mores examples: je5 site