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>