Merhaba Sevgili Dostlar;
Bugün sizlere Html ile Cihazın Batarya Durumunu Öğrenme Projesini Göstereceğim.
İlk olarak "battery.html" adında veya başka bir ad ile bir html dosyası oluşturuyoruz.
Daha sonra aşağıdaki html kodunu sayfanıza kopyalayın.
<html>
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="h
ttp://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="350 -250 800 600" >
<style type="text/css">
.st0{fill:none;}
.st1{fill:#01354D;}
.st2{fill:none;}
.st3{fill:transparent;}
.st4{opacity:0.9;}
.st5{fill:#FFFFFF;}
.dragger{opacity:5.000000e-002;fill:#FFFFFF;enable-background:new ;}
</style>
<pattern x="1050" y="1050" width="2" height="2" patternUnits="userSpaceOnUse" id
="grid" viewBox="0 -2 2 2" style="overflow:hidden;">
<g>
<polygon class="st0" points="0,0 2,0 2,-2 0,-2 "/>
<polygon class="st1" points="1,-1 2,-1 2,-2 1,-2 "/>
</g>
</pattern>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="750" y1="-250" x
2="750" y2="350" gradientTransform="matrix(0 1 0 0 -1 0 1 0 0)">
<stop offset="0" style="stop-color:#000"/>
<stop offset="0.5" style="stop-color:#111"/>
<stop offset="1" style="stop-color:#211"/>
</linearGradient>
<rect x="350" y="-250" class="st2" width="800" height="600"/>
<pattern id="SVGID_2_" xlink:href="#grid" patternTransform="matrix(0.7071 0.7071
0.7071 -0.7071 3723.2515 -8890.0732)">
</pattern>
<defs>
<filter id="glow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#06BFCC" flood-opacity="1"></feFlood
>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="glowGreen" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#AED581" flood-opacity="1"></feFlood
>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="yellowglow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#D3B343" flood-opacity="1"></feFlood
>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="redglow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#D04759" flood-opacity="1"></feFlood
>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect x="350" y="-250" class="st3" width="800" height="600"/>
<g class="segGroup" opacity="0.9" >
<path class="st5" d="M676.3-88l11.5,19.9c16.7-8.8,35.4-14.2,55.2-15.2v-23C719
-105.3,696.3-98.8,676.3-88z"/>
<path class="st5" d="M665.9-81.9c-19.6,12.5-36.2,29.3-48.6,49l19.9,11.5c10.3-
16.2,24-30.1,40.1-40.6L665.9-81.9z"/>
<path class="st5" d="M611.3-22.5c-10.5,20-16.8,42.6-17.7,66.5h23c0.9-19.8,6.1
-38.4,14.7-55L611.3-22.5z"/>
<path class="st5" d="M616.6,56h-23c0.9,23.9,7.2,46.5,17.7,66.5l19.9-11.5C622.
7,94.4,617.5,75.8,616.6,56z"/>
<path class="st5" d="M637.3,121.4l-19.9,11.5c12.4,19.7,29,36.5,48.6,49l11.5-1
9.9C661.3,151.5,647.6,137.7,637.3,121.4z"/>
<path class="st5" d="M676.3,188c20,10.8,42.7,17.3,66.8,18.4v-23c-19.9-1-38.6-
6.4-55.2-15.2L676.3,188z"/>
<path class="st5" d="M810.7,168.9c-16.8,8.6-35.7,13.8-55.7,14.5v23c24.2-0.8,4
7-7,67.2-17.6L810.7,168.9z"/>
<path class="st5" d="M862.2,122.3c-10.6,16.4-24.6,30.2-41.1,40.6l11.5,19.9c19
.9-12.5,36.9-29.3,49.5-49.1L862.2,122.3z"/>
<path class="st5" d="M883.4,56c-0.9,20.1-6.3,39.1-15.1,55.9l19.9,11.5c10.8-20
.3,17.3-43.1,18.2-67.4H883.4z"/>
<path class="st5" d="M888.2-23.4l-19.9,11.5c8.9,16.9,14.2,35.8,15.1,55.9h23C9
05.5,19.7,899-3.2,888.2-23.4z"/>
<path class="st5" d="M832.6-82.9l-11.5,19.9c16.5,10.4,30.5,24.3,41.1,40.6l19.
9-11.5C869.5-53.6,852.6-70.4,832.6-82.9z"/>
<path class="st5" d="M755-106.4v23c20,0.7,38.9,5.9,55.7,14.5l11.5-19.9C802-99
.4,779.2-105.7,755-106.4z"/>
</g>
<circle class="dragger" cx="750" cy="50" r="122"/>
<g class="volIcon" filter="url(#glow)">
<rect x="731.6" y="6" transform="matrix(-6.792688e-003 1 -1 -6.792688e-003 805.09
34 -699.6431)" class="st5" width="36.9" height="88"/>
<rect x="798.7" y="42" class="st5" width="10.6" height="15.9"/>
<g id="warningGroup" fill="#FFFFFF" opacity="1">
<rect x="731.5" y="17.5" class="st5" width="37" height="11"/>
<rect x="731.5" y="72.4" class="st5" width="37" height="11.3"/>
<rect x="747.5" y="-3.5" class="st5" width="5" height="18.5"/>
<rect x="747.5" y="86" class="st5" width="5" height="18.5"/>
</g>
</g>
</svg>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap
/1.18.5/TweenMax.min.js"></script>
Bu html Kodunu Kopyaladıktan sonra bir Javascript kodu yazmamız gerekiyor ve onun için,
<script>
</script>
Bu kodların arasına şu kodları yazın,
var count;
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
volIcon = select('.volIcon'),
dragger = select('.dragger'),
segGroup = select('.segGroup'),
allSegs = selectAll('.segGroup path'),
segsArray = nodeListToArray(allSegs).reverse(),
numSegs = segsArray.length,
step = 360/numSegs,
oldSegId = 0,
currSegId = 0,
currSeg = segsArray[currSegId]
TweenMax.set('svg', {
visibility: 'visible'
})
var tl = new TimelineMax({paused:true}).timeScale(5);
tl.staggerFrom(segsArray, 1, {
alpha:0.1
}, 1)
.staggerTo(segsArray, 1, {
cycle:{
filter:function(j){
// var j=i-100;
if(j >=3&&j<7){
return 'url(#yellowglow)'
}
if(j < 3){
return 'url(#redglow)'
}
if(j>=7)
return 'url(#glowGreen)';
},
fill:function(j){
console.log(j);
//var j=i-100;
if(j >=3 && j<7){
return '#D3B343'
}
if(j<3){
return '#D04759'
}
if(j>=7)
return '#8BC34A'
}
}
},1, '-=12')
// .addLabel('volMax',1)
.from('#warningGroup', 1, {
alpha:0,
scale:0.5,
transformOrigin:'50% 50%',
ease:Back.easeOut.config(2)
}, 'volMax')
.to('.volVibe', 1, {
alpha:0
}, 'volMax')
function hello(batteryString,cso){
// console.log(""+batteryString+" "+cso);
var leveler=batteryString*0.12;
var status;
if (cso===0)
status="Kullanılıyor";
else
status="Şarj Oluyor";
document.getElementById ("status").innerText="Batarya:"+batteryString+"%"+"\n \
n Batarya "+status;
// var t2 = new //TimelineMax({paused:true}).timeScale(5);
// t2.addLabel('maxVol',1);
tl.tweenFromTo(1, leveler, {});
}
function nodeListToArray(list){
return Array.prototype.slice.call(list);
}
TweenMax.set([dragger, segGroup], {
transformOrigin:'50% 50%',
scale:0.8
})
Bu kodların hemen altına yani </script> altına bir p oluşturun ve ona bir ıd olarak status yazın,
<p id="status"></p>
Bundan sonra ortama biraz renk ve şekil katmak için css kodu ekleyelim,
body {
background-color:rgb(24, 24, 24);
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:100%;
height:100%;
overflow:visible;
}
svg{
width:100%;
height:100%;
visibility:hidden;
overflow:hidden;
}
path{
pointer-events:none;
}
p
{
color:white;
text-align:center;
font-size:24px;
}
Şimdi ise tekrar Javascript kodu yazmamız gerekiyor o yüzden bir <script> oluşturun ve içine bu kodları kopyalayın,
window.onload = function() {
//hello();
function formatTime(s) {
var h = Math.floor(s / 60 / 60);
var m = Math.floor((s - (h * 60 * 60)) / 60);
if (m < 10) m = '0' + m;
return h + ':' + m;
}
function updateBatteryStatus(battery) {
var cso = (battery.charging) ? 1 : 0;
var batteryString = Math.round(battery.level * 100);
hello(batteryString,cso);
// if (!battery.charging && (battery.dischargingTime !== Number.POSITIVE_INFI
NITY)) {
// batteryString += + formatTime(battery.dischargingTime) + ' until empty)'
;
// }
// else if (battery.charging && (battery.chargingTime !== 0) && (battery.char
gingTime !== Number.POSITIVE_INFINITY)) {
// batteryString += ' (' + formatTime(battery.chargingTime) + ' until full)
';
// }
// update graphic etc
// document.querySelector('p').textContent = batteryString;
// document.querySelector('.batterylevel').style.transform = 'scaleY(' + batt
ery.level + ')';
var chargeSymbolOpacity = (battery.charging) ? 1 : 0;
// document.querySelector('.chargingsymbol').style.opacity = chargeSymbolOpac
ity;
}
// new getBattery() method (Chrome, Opera)
if ('getBattery' in navigator) {
navigator.getBattery().then(function(battery) {
updateBatteryStatus(battery);
battery.onchargingchange = function() {
updateBatteryStatus(battery);
};
battery.onlevelchange = function() {
updateBatteryStatus(battery);
};
battery.onchargingtimechange = function() {
updateBatteryStatus(battery);
};
battery.ondischargingtimechange = function() {
updateBatteryStatus(battery);
};
});
}
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBatt
ery || navigator.msBattery;
if (battery) {
updateBatteryStatus(battery);
battery.onchargingchange = function() {
updateBatteryStatus(battery);
};
battery.onlevelchange = function() {
updateBatteryStatus(battery);
};
battery.onchargingtimechange = function() {
updateBatteryStatus(battery);
};
battery.ondischargingtimechange = function() {
updateBatteryStatus(battery);
};
}
};
Html ile Batarya Durumu Öğrenme Dersi Bitti.
Sonuç olarak bir ekran görüntüsü:
Tüm Kod:
<html>
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="h
ttp://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="350 -250 800 600" >
<style type="text/css">
.st0{fill:none;}
.st1{fill:#01354D;}
.st2{fill:none;}
.st3{fill:transparent;}
.st4{opacity:0.9;}
.st5{fill:#FFFFFF;}
.dragger{opacity:5.000000e-002;fill:#FFFFFF;enable-background:new ;}
</style>
<pattern x="1050" y="1050" width="2" height="2" patternUnits="userSpaceOnUse" id
="grid" viewBox="0 -2 2 2" style="overflow:hidden;">
<g>
<polygon class="st0" points="0,0 2,0 2,-2 0,-2 "/>
<polygon class="st1" points="1,-1 2,-1 2,-2 1,-2 "/>
</g>
</pattern>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="750" y1="-250" x
2="750" y2="350" gradientTransform="matrix(0 1 0 0 -1 0 1 0 0)">
<stop offset="0" style="stop-color:#000"/>
<stop offset="0.5" style="stop-color:#111"/>
<stop offset="1" style="stop-color:#211"/>
</linearGradient>
<rect x="350" y="-250" class="st2" width="800" height="600"/>
<pattern id="SVGID_2_" xlink:href="#grid" patternTransform="matrix(0.7071 0.7071
0.7071 -0.7071 3723.2515 -8890.0732)">
</pattern>
<defs>
<filter id="glow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#06BFCC" flood-opacity="1"></feFlood
>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="glowGreen" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#AED581" flood-opacity="1"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="yellowglow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#D3B343" flood-opacity="1"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="redglow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#D04759" flood-opacity="1"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect x="350" y="-250" class="st3" width="800" height="600"/>
<g class="segGroup" opacity="0.9" >
<path class="st5" d="M676.3-88l11.5,19.9c16.7-8.8,35.4-14.2,55.2-15.2v-23C719
-105.3,696.3-98.8,676.3-88z"/>
<path class="st5" d="M665.9-81.9c-19.6,12.5-36.2,29.3-48.6,49l19.9,11.5c10.3-
16.2,24-30.1,40.1-40.6L665.9-81.9z"/>
<path class="st5" d="M611.3-22.5c-10.5,20-16.8,42.6-17.7,66.5h23c0.9-19.8,6.1
-38.4,14.7-55L611.3-22.5z"/>
<path class="st5" d="M616.6,56h-23c0.9,23.9,7.2,46.5,17.7,66.5l19.9-11.5C622.
7,94.4,617.5,75.8,616.6,56z"/>
<path class="st5" d="M637.3,121.4l-19.9,11.5c12.4,19.7,29,36.5,48.6,49l11.5-1
9.9C661.3,151.5,647.6,137.7,637.3,121.4z"/>
<path class="st5" d="M676.3,188c20,10.8,42.7,17.3,66.8,18.4v-23c-19.9-1-38.6-
6.4-55.2-15.2L676.3,188z"/>
<path class="st5" d="M810.7,168.9c-16.8,8.6-35.7,13.8-55.7,14.5v23c24.2-0.8,4
7-7,67.2-17.6L810.7,168.9z"/>
<path class="st5" d="M862.2,122.3c-10.6,16.4-24.6,30.2-41.1,40.6l11.5,19.9c19
.9-12.5,36.9-29.3,49.5-49.1L862.2,122.3z"/>
<path class="st5" d="M883.4,56c-0.9,20.1-6.3,39.1-15.1,55.9l19.9,11.5c10.8-20
.3,17.3-43.1,18.2-67.4H883.4z"/>
<path class="st5" d="M888.2-23.4l-19.9,11.5c8.9,16.9,14.2,35.8,15.1,55.9h23C9
05.5,19.7,899-3.2,888.2-23.4z"/>
<path class="st5" d="M832.6-82.9l-11.5,19.9c16.5,10.4,30.5,24.3,41.1,40.6l19.
9-11.5C869.5-53.6,852.6-70.4,832.6-82.9z"/>
<path class="st5" d="M755-106.4v23c20,0.7,38.9,5.9,55.7,14.5l11.5-19.9C802-99
.4,779.2-105.7,755-106.4z"/>
</g>
<circle class="dragger" cx="750" cy="50" r="122"/>
<g class="volIcon" filter="url(#glow)">
<rect x="731.6" y="6" transform="matrix(-6.792688e-003 1 -1 -6.792688e-003 805.09
34 -699.6431)" class="st5" width="36.9" height="88"/>
<rect x="798.7" y="42" class="st5" width="10.6" height="15.9"/>
<g id="warningGroup" fill="#FFFFFF" opacity="1">
<rect x="731.5" y="17.5" class="st5" width="37" height="11"/>
<rect x="731.5" y="72.4" class="st5" width="37" height="11.3"/>
<rect x="747.5" y="-3.5" class="st5" width="5" height="18.5"/>
<rect x="747.5" y="86" class="st5" width="5" height="18.5"/>
</g>
</g>
</svg>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap
/1.18.5/TweenMax.min.js"></script>
<script>
var count;
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
volIcon = select('.volIcon'),
dragger = select('.dragger'),
segGroup = select('.segGroup'),
allSegs = selectAll('.segGroup path'),
segsArray = nodeListToArray(allSegs).reverse(),
numSegs = segsArray.length,
step = 360/numSegs,
oldSegId = 0,
currSegId = 0,
currSeg = segsArray[currSegId]
TweenMax.set('svg', {
visibility: 'visible'
})
var tl = new TimelineMax({paused:true}).timeScale(5);
tl.staggerFrom(segsArray, 1, {
alpha:0.1
}, 1)
.staggerTo(segsArray, 1, {
cycle:{
filter:function(j){
// var j=i-100;
if(j >=3&&j<7){
return 'url(#yellowglow)'
}
if(j < 3){
return 'url(#redglow)'
}
if(j>=7)
return 'url(#glowGreen)';
},
fill:function(j){
console.log(j);
//var j=i-100;
if(j >=3 && j<7){
return '#D3B343'
}
if(j<3){
return '#D04759'
}
if(j>=7)
return '#8BC34A'
}
}
},1, '-=12')
// .addLabel('volMax',1)
.from('#warningGroup', 1, {
alpha:0,
scale:0.5,
transformOrigin:'50% 50%',
ease:Back.easeOut.config(2)
}, 'volMax')
.to('.volVibe', 1, {
alpha:0
}, 'volMax')
function hello(batteryString,cso){
// console.log(""+batteryString+" "+cso);
var leveler=batteryString*0.12;
var status;
if (cso===0)
status="Kullanılıyor";
else
status="Şarj Oluyor";
document.getElementById ("status").innerText="Batarya:"+batteryString+"%"+"\n \
n Batarya "+status;
// var t2 = new //TimelineMax({paused:true}).timeScale(5);
// t2.addLabel('maxVol',1);
tl.tweenFromTo(1, leveler, {});
}
function nodeListToArray(list){
return Array.prototype.slice.call(list);
}
TweenMax.set([dragger, segGroup], {
transformOrigin:'50% 50%',
scale:0.8
})
</script>
<p id="status"></p>
<style>
body {
background-color:rgb(24, 24, 24);
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:100%;
height:100%;
overflow:visible;
}
svg{
width:100%;
height:100%;
visibility:hidden;
overflow:hidden;
}
path{
pointer-events:none;
}
p
{
color:white;
text-align:center;
font-size:24px;
}
</style>
<script>
window.onload = function() {
//hello();
function formatTime(s) {
var h = Math.floor(s / 60 / 60);
var m = Math.floor((s - (h * 60 * 60)) / 60);
if (m < 10) m = '0' + m;
return h + ':' + m;
}
function updateBatteryStatus(battery) {
var cso = (battery.charging) ? 1 : 0;
var batteryString = Math.round(battery.level * 100);
hello(batteryString,cso);
var chargeSymbolOpacity = (battery.charging) ? 1 : 0;
}
if ('getBattery' in navigator) {
navigator.getBattery().then(function(battery) {
updateBatteryStatus(battery);
battery.onchargingchange = function() {
updateBatteryStatus(battery);
};
battery.onlevelchange = function() {
updateBatteryStatus(battery);
};
battery.onchargingtimechange = function() {
updateBatteryStatus(battery);
};
battery.ondischargingtimechange = function() {
updateBatteryStatus(battery);
};
});
}
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBatt
ery || navigator.msBattery;
if (battery) {
updateBatteryStatus(battery);
battery.onchargingchange = function() {
updateBatteryStatus(battery);
};
battery.onlevelchange = function() {
updateBatteryStatus(battery);
};
battery.onchargingtimechange = function() {
updateBatteryStatus(battery);
};
battery.ondischargingtimechange = function() {
updateBatteryStatus(battery);
};
}
};
</script>
</html>
0 Yorumlar