Arduino, Onsen UI, Pubnub ile Kontrol Uygulaması Arayüz Tasarımı
11. Hafta Derste Yapılan Arayüzün Kodları İndir
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="list-title"><h4>Arduino Değerler</h4></div>
<ul class="list">
<li class="list-item">
<div class="list-item__center">
Aydınlık
</div>
<div class="list-item__right">
<div class="list-item__label" id="aydinlik_deger">Değer</div>
</div>
</li>
<li class="list-item">
<div class="list-item__center">
Düğme
</div>
<div class="list-item__right">
<label class="switch">
<input type="checkbox" class="switch__input" disabled id="dugme_deger">
<div class="switch__toggle">
<div class="switch__handle"></div>
</div>
</label>
</div>
</li>
</ul>
<div class="list-title"><h4>Arduino Kontrol</h4></div>
<ul class="list">
<li class="list-item">
<div class="list-item__center">
Led Yak/Söndür
</div>
<div class="list-item__right">
<label class="switch">
<input type="checkbox" class="switch__input" id="led_yak_sondur">
<div class="switch__toggle">
<div class="switch__handle"></div>
</div>
</label>
</div>
</li>
<li class="list-item">
<ons-row style="margin-top: 20px;">
<ons-col width="40px" style="text-align: center; line-height: 31px;">
<ons-icon icon="md-brightness-low"></ons-icon>
</ons-col>
<ons-col>
<ons-range style="width: 100%;" value="50" id="led_parlaklik_ayarla"></ons-range>
</ons-col>
<ons-col width="40px" style="text-align: center; line-height: 31px;">
<ons-icon icon="md-brightness-high"></ons-icon>
</ons-col>
</ons-row>
</li>
</ul>
<script>
$( document ).ready(function() {
$("#aydinlik_deger").html(150);
$("#dugme_deger").prop('checked', true);
$('#led_yak_sondur').on('change', function(e) {
if (this.checked)
console.log("Led yandı...");
else
console.log("Led söndü...");
});
$('#led_parlaklik_ayarla').on('input', function(e) {
console.log("Led Parlaklığı : "+this.value);
});
});
</script>
</body>
</html>
1.662 Gösterim
[…] Hafta: Arduino, Onsen UI, Pubnub Uygulaması Arayüz Tasarımı […]