Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

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

About

Plugin jquery to simplify the use of html5

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.