Kuukausi: syyskuu 2013

MID Android-laite toimimaan

Taistelin jonkin aikaa, että saisin kiinalaisen MID laitteen toimimaan linuxissani. Käytin Xubuntu-13.04 käyttöjärjestelmää. Tehtävä vaatii android sdk:n asennettuna tietokoneelle.
Katso tarkemmat ohjeet täältä.

Liittäminen

1. Laitteessa pitää olla aktivoituna usb debugging. Asetukset -> Usb debugging.
2. Liitä android tietokoneeseesi.

Usb Vendor ID

Jotta linux tunnistaa laitteesi on sinun saatava tietää sen usb id.

3. Avaa terminaali ja komento $lsusb
Terminaali-ikkuna näyttää kutakuinkin tältä:

$lsusb
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 002 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
Bus 003 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
Bus 004 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
Bus 005 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
Bus 001 Device 002: ID 18d1:0003 Google Inc.

Löydä laitteesi, minulla kiinanihme näytti olevan Google Incin.
Kopioi ID:n alkuosa (ennen kaksoispistettä).

4. Mene kansioon /etc/udev/rules.d
Luo sinne superuserina tiedosto 51-android.rules ja kirjoita sinne:

SUBSYSTEM==”usb”, ATTR{idVendor}==”18d1″, MODE=”0666″, GROUP=”plugdev”

Id vendorin kohdalle kirjoitat oman laitteesi id:n. Pitäisi löytyä komennolla lsusb (kohta 1).

Tee komento:
$chmod a+r /etc/udev/rules.d/51-android.rules

Ota laite irti tietokoneesta ja laita se uudelleen kiinni.

5. Tämän jälkeen pitäisi laite olla tunnistettu.
$cd android-sdk/platform-tools
$./adb devices

Jos laite ei näy adb devices komennon jälkeen kannattaa yrittää vielä sama rumba uudelleen. Minun täytyi jostain syystä kokeilla muutamaan otteeseen kaikki uudelleen.

Tämän jälkeen voit vaikka käynnistää eclipsestä ohjelmasi omalle laitteellesi.

Lähteet
http://www.hipatic.com/2012/08/chinese-android-debugging-how-to-use.html
http://developer.android.com/tools/device.html

Cordova APIt toimimaan

Pohjustus

Tehtävään tarvitset asennetun cordova-ympäristön. Tästä ohjeet Android kehitysalustan asennus. Minun tehtävänä oli vain kopioida edellinen tekemäni projekti, jossa cordova jo toimi. Tein tämän eclipsessä klikkaamalla tekemästäni projektista oikealla hiiren painikkeella copy -> paste. Valitsin projektille eri nimen ja poistin turhat tiedostot assetseista (omat testaustarpeisiin tehdyt html-tiedostot).

Tein uuden html-tiedoston nimeltä index.html. Tällä tiedostolla aion kokeilla cordova device APIa. Kopioin seuraavan Apachen virallisesta dokumentaatiosta:

<!DOCTYPE html>
<html>
  <head>
    <title>Device Properties Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        var element = document.getElementById('deviceProperties');

        element.innerHTML = 'Device Name: '     + device.name     + '<br />' + 
                            'Device Cordova: '  + device.cordova + '<br />' + 
                            'Device Platform: ' + device.platform + '<br />' + 
                            'Device UUID: '     + device.uuid     + '<br />' + 
                            'Device Version: '  + device.version  + '<br />';
    }

    </script>
  </head>
  <body>
    <p id="deviceProperties">Loading device properties...</p>
  </body>
</html>

Käynnistän ohjelman emulaattorissa ja hetken päästä siihen aukeaa laitteen tiedot näyttävä ohjelma.

cordovaapi

APIen toiminnan kannalta on cordovan kirjasto oltava käytössä. Minulla nämä edeltävyydet oli jo tehty kehitysympäristön asennuksen yhteydessä. On hyvä huomata myös muokata html tiedoston cordova.jar kutsu oikeaksi. Varsinkin kopioidessa suoraan dokumentaatiosta saattaa se jäädä vääräksi.

Lähteet

Pohjana Tero Karvisen Mobiilituotekehitys-kurssi, terokarvinen.com/

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html

Reaktioajan mittauspeli

ReactionGame
Tein javascriptiä ja jquerya hyödyntäen reaktionmittaus -pelin. Pelissä punaisen pallon muututtua vihreäksi, tulee käyttäjän klikata sitä. Tästä mitataan reaktioaika ja tulostetaan. Tämänhetkinen versio vielä hiukan kankea, mutta toiminnallisuus kunnossa.

Tästä kokeilemaan.

Koodi

Html-tiedosto sisältää:

<!doctype html>
<html>
	<head>
		<title>Reaction Game</title>
	  	<link rel='stylesheet' type='text/css' href='styles/stylesheet.css'/>
		<script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
	
	</head>
	<body>
		<div id="container">	
			<p>Click the circle when it turns green! <br> Click ready when you want to start!</p>		
			<div id="circle"><h2></h2></div>
			<button id="start" onclick="startGame()">Ready?</button>
			<button id="restart" onclick="restart()">Restart the game</button>
			<div id="result"></div>
		</div>

		<script type="text/javascript">
			var maxTimer = 3 * 1000;  
			var clickable = false;
			var started;
			var clicked = false; 
			$('#restart').hide();		
			
				function startGame(){
					var randTimer = Math.random() * maxTimer;
					$('#circle').click(checkClickable);
					setTimeout ( "toGreen()", randTimer );
					$('#start').hide();

				}
				
				function toGreen(){
					started = new Date().getTime();
					clickable = true;
					$('#circle').click(checkClickable);					
					$('h2').html("NOW!");
					$('#circle').css("background-color","#00FF00");
					$('#circle').toggleClass('highlighted');
				}

				function calcTime(){
                	var elapsed = new Date().getTime() - started;
					elapsed = elapsed / 1000; /* to seconds */
					return elapsed;
					
				}

				function checkClickable(){
					if(clickable == false){
						$('h2').html("Not yet!");
					}else if(clicked == false){
						var timeElapsed = calcTime();
						$('#result').html("Your reaction time was " + timeElapsed + " seconds.");				
						$('#restart').show();
						clicked = true;
					}
				}
				
				function restart(){
					window.location.reload();
				}			
				
		</script>
	</body>
</html>

Css:

h2 {
text-align: center;
vertical-align: middle;
line-height: 90px;
cursor:pointer;
color:#FFFFFF;
}

button {
height:50px;
width:100px;
}

#circle {
height: 100px;
width: 100px;
border-radius: 100%;
background-color: #FF0000;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;

}

.highlighted {
-webkit-box-shadow: 0 0 8px green;
-moz-box-shadow: 0 0 8px green;
box-shadow: 0 0 8px green;
}

#container {
margin-left:auto;
margin-right:auto;
width:300px;

}

#result {
margin-top: 20px;
margin-bottom:20px;
}

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html
Pohjana Tero Karvisen kurssi Mobiilituotekehitys, http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013

jQuery Salasanan Testaaja

Mitä tein?
Tein harjoitusmielessä jQueryllä salasanan testaajan. Testausmenetelmä on alkeellinen ja se vertaa kahta merkkijonoa toisiinsa. Jos annettu salasana on sama kuin koodiin on kirjoitettu, tulee ilmoitus salasana oikein ja toisinpäin. Lisäksi tein kirjaudu painikkeeseen efektin, joka muuttaa painikkeen läpinäkyvyyttä, kun hiiri laitetaan sen päälle.

Tästä kokeilemaan

HTML tiedosto
Loin index.html tiedoston ja sinne tavaran:

<DOCTYPE! html>
<html>
    <head>
	<title>jQuery Harjoitus</title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="scripts/script.js"></script>
    <link href="style/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
	<div><strong>Salasana on erittäin salainen.</strong></div>
        <form name="passCheck"><input type="text" name="passCheck" /></form>
        <div id="button">Kirjaudu</div>
        <div id="result"></div>
    </body>
</html>

Scripti

Loin erillisen scriptitiedoston jonne tuli jQueryt ja javascriptit.

$(document).ready(function(){
    $('#button').click(function(){
            var pass = $('input[name=passCheck]').val();
	    if(pass === "salainen"){ // === turvallinen tapa, ei tee tyyppimuunnoksia
                $('#result').html('
Salasana oikein!

');
            }else{
                $('#result').html('
Salasana väärin!

');
            }
    });
       $('#button').mouseenter(function(){
            $(this).fadeTo('fast',1);
       });
       $('#button').mouseleave(function(){
        $(this).fadeTo('fast',0.5);
      });
});

Css
Tässä vielä css tiedosto. Huomion arvoinen asia on, että koska tein divistä buttonin, kursori ei muutu ”kädeksi” kun hiiri viedään sen päälle. Sen takia lisäsin Css:ään cursor pointterin, joka muuttaa hiiren kuvaketta.

#button {
    height:40px;
    width:80px;
    padding-top:15px;
    border-radius: 5px;
    background-color: #FF0000;
    text-align: center;
    color: #FFFFFF;
    opacity: 0.5;
    cursor:pointer;
}

 

 

Kuvakaappaus:

query

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html
Pohjana Tero Karvisen kurssi Mobiilituotekehitys, http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013

jQuery Hei Maailma

jQery Asennus
jQueryn toimivuuden kannalta kannattaa ladata jQueryn kirjasto virallisilta sivuilta http://jquery.com/download/ ja sieltä Download the compressed, production jQuery 1.10.2. Tätä klikataan hiiren oikella ja valitaan Save Link As. Linkki tallennetaan polkuun mihin aiot käyttää jQuerya. Itse tein tiedostolle erillisen kansion polkuun missä on html tiedostoni.

jQuery ja Html

Html tiedosto. Polkuna kannattaa käyttää kansiota missä sijaitsee jQuery kirjaston kansio. Itse loin HelloQuery.html tiedoston.

Tiedostoon laitetaan:

<html>
<head>
<title>jQuery Hello World</title>
 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 
</head>
 
<body>
 
<script type="text/javascript">
 
$(document).ready(function(){
 $("#msgid").html("This is Hello World by JQuery");
});
 
</script>
 
This is Hello World by HTML
 
<div id="msgid">
</div>
 
</body>
</html>

Tiedosto tallennetaan ja avataan selaimessa:

Screenshot from 2013-09-10 16:00:47

Jos selaimeesi ilmestyy hello jquery niin jQuery tosiaan toimii!