Civa.Cloud

Arduino, Onsen UI, Pubnub Uygulaması Arayüz Tasarımı

208 Views

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 thought on “Arduino, Onsen UI, Pubnub Uygulaması Arayüz Tasarımı

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.