Plugin jquery to simplify the use of html5
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
.gitignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
plugin-jquery-je5-beta.0.2.1.3.js

README.md

je5

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