Je5
  • je5
  • GitHub Download

je5

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 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, family Canidae', ' ■ raptors hawks, approximately 2 m wingspan' ] } } } } }).show('slow'); </script> </body> </html>
Code example Stats Bars Demo "Media" Stats Bars 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>je5</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
	</head>
	<body>
		<svg id="bar" style="display:none" height="230" width="100%"></svg>
		<svg id="text" style="display:none" height="183" width="50%"></svg>
	<script type="text/javascript">
		$('#bar').je5({
			sort:'stats',
			draw:{
				type:'bar',//bar type
				att:{
					orientation:'v',//orientation horizontal (h) orientation vertical (v) 
					spacing:45,//spacing between bars
					thickness:40,//thickness of the bars
					x:10,//x position
					y:10,//y position
					ry:5,//Rounding the start and end bars
					rx:5,//Rounding the start and end bars
					transform:'rotate(0, 0, 0)',//Rotate the bars. rotate to any values ??(0, 0, 0)
					style:'stroke:pink;stroke-width:2;fill-opacity:0.5;stroke-opacity:0.9',//styles bars
					percentage:[//Percentage of each bar. the total must be 100
						'10%',
						'20%',
						'30%',
						'40%'
					],
					color:[//bar colors
							'red',
							'blue',
							'gray',
							'green'
					],
					text:[//Text data
						'Value Red',
						'Value Blue',
						'Value Grey',
						'Value Green'
					],
					id:[//id bars
						'Value1',
						'Value2',
						'Value3',
						'Value4'
					],
					idtext:'text',//svg text id
					textstyle:'font-size:15px;font-family:Arial'//svg text style
				}	
			}
		});
		$('#bar').fadeIn(3000);
		$('#text').show(3000);
	</script>
	</body>
</html>
Code example Stats Lines Demo "Media" Stats Lines
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>je5 lines Stats</title>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="//je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
	</head>
	<body>
		<canvas width="520" height="250" id="line"></canvas>
		<script type="text/javascript">
			////create the canvas
			$('#line').je5({ 
				sort:'canvas', 
				draw:'rectangle',
				x:40, 
				y:40, 
				width:520, 
				height:165,
				fillStyle:'grey'
			});
			
			$('#line').je5({
				sort:'stats',
				draw:{
					type:'line',
					att:{
						zoomIn:40,//Adjust the size of the line
						center:{//adjusting the canvas coordinates to the start point to draw lines
							x:0,
							y:241
						},
						data:{
							valuesy:[1, 3, 2, 5, 2, 4, 1, 2, 2, 4, 4, 1],
							//the total number of elements in the array indicates the number of x fields, the values of each of the elements 
							//are the y coordinates. These values will be added to the value of zoomin. valuesy:[1  = 'Jan','$100'
							lineCap:'round',//values ??of the lines 
							strokeStyle:'yellow',
							lineWidth:6,
							x:{//Text values of the x coordinate
								textx:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct','Nov','Dez'],
								font:'12pt Calibri',
								fillStyle:'blue',
								adjust:20//used to adjust the distance between text and canvas
							},
							y:{//Text values of the y coordinate
								texty:['$100', '$200', '$300', '$400', '$500'],
								font:'12pt Calibri',
								fillStyle:'red'
							}
						}
					}	
				}
			});

			//create the grid background
			for(a = 0; a < 7; a++) {
				b = a + 1;
				$('#line').je5({ 
					sort:'canvas', 
					draw:'line', 
					strokeStyle:'#fff', 
					lineWidth:0.8, 
					lineCap:'round',
					moveTo_x:40, 
					moveTo_y:b * 40, 
					lineTo_x:520, 
					lineTo_y:b * 40
				});
			}

			for(a = 0; a < 13; a++) {
				b = a + 1;
				$('#line').je5({ 
					sort:'canvas', 
					draw:'line', 
					strokeStyle:'#fff', 
					lineWidth:0.8, 
					lineCap:'round',
					moveTo_x:b * 40, 
					moveTo_y:40, 
					lineTo_x:b * 40, 
					lineTo_y:250, 
					shadow_c:'red'
				});
			}
		</script>
	</body>
</html>
Instant webcam photo Demo "Media" Instant webcam photo
<!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>
Media Audio Demo "Media" Audio
<!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>Audio JE5 "MEDIA"</title>
    <meta charset="utf8">
  </head>
  <body>
	<audio id="audio" ></audio>
	<script type="text/javascript">
	$('#audio').je5({
		sort:{media:'audio'},
		att:{
			source:{
				src:'https://je5.es/je5_media/NO_PAIN_NO_GAME.mp3',
				tipe:'audio/mp3'
			},
			video:{
				controls:true,
				auto:true,
				muted:false,
				loop:false,
				preload:'auto'
			}
		}			
	}).je5({
		att:{
			source:{
				src:'https://je5.es/je5_media/NO_PAIN_NO_GAME.ogg',
				tipe:'audio/ogg'
			},
			alert:'Your browser does not support the audio tag'					
		},		
	});	
	</script>   
  </body>
</html>
Media Video Demo "Media" Video
<!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>Video JE5 "MEDIA"</title>
    <meta charset="utf8">
  </head>
  <body>
	<audio id="audio" ></audio>
	<script type="text/javascript">        
		$('#video').je5({
			sort:{media:'video'},
			att:{
				source:{
					src:'https://je5.es/je5_media/salvador.webm',
					codecs:'VP8'
				},
				video:{
					controls:true,
					auto:true,
					muted:true,
					loop:true,
					preload:'auto'			
				}
			}			
		}).je5({
			att:{
			source:{
				src:'https://je5.es/je5_media/salvador_x264.mp4',
				codecs:'H.264'
			},
				alert:'Your browser does not support the video tag'					
			}		
		});
	</script>   
  </body>
</html>
Any text goes here