ブレッドボード体験

ブレッドボード体験

基盤をブレッドボードから外せるので
基盤を一番したへ動かす

次に
配線をつけていく
配線の名前はジャンパケーブル

次にスイッチ
これはブレッドボードのセンターのみぞをまたいで設置する

次にスイッチと同じ縦列に抵抗をつけ
抵抗とスイッチの間にジャンパケーブルをさし
それを基盤のGNDの横につける

次に ArduBlock の導入
http://blog.ardublock.com/engetting-started-ardublockzhardublock/

を参考にやったけどうまくいかなかった

とりあえず

chmod +x ardublock-all-20130712.jar

で権限を与え

Find “Sketchbook location:”
とかかれていたので
http://onlyopen.wordpress.com/2012/07/12/getting-started-with-ardublock/
を参考に

mkdir -p sketchbook/tools/ArduBlockTool/tool/
 cp ardublock-all-20130712.jar  sketchbook/tools/ArduBlockTool/tool/

として

File > Preferences で
Sketchbook location を
/home/snowpool/sketchbook/
にして
IDEを再起動したら
無事に稼働した

Pins なかから ultrasnic を選択してピンを1から3に変更
2から4にする
これで
成功すると思われたがバグ
原因は権限のようなので
Preferences を
/root/sketcbook
に戻し
代わりに

sudo mkdir -p /root/sketchbook/tools/ArduBlockTool/tool/
sudo cp -p ダウンロード/ardublock-all-20130712.jar   /root/
cp ardublock-all-20130712.jar ardublock-all.jar

でようやくまともに起動した

これでできると思って
http://thinkit.co.jp/story/2013/02/12/3960
をやろうとしたけど
エラー
原因は
serialボードが今回の trinkit にはないから
同様に
rasbery pi にもないため
やるなら
ardimio のボードがベスト

電子工作体験

まずブレッドボードにさすために

Trinket 5V のまとまったピンを5つ単位でおってとる

次に折ったピンの短いほうを基盤側に
長いほうをブレッドボードのほうにさす

ちょっと力をこめて、完全にブレッドボードに差し込む

次に基盤のほうをハンダ付けする
ハンダ付けは
ハンダの機械のほうをあたためておき
ペンをもつようにつかう

ペンのほうを基盤のハンダづけするとこにあてて
温めてそこにハンダの材料の針金みたいなのを
あてて流し込む

次に
Ardunio IDEをつかうけど
apt-get でインストールしたものは古いため
ダウンロードしたものを展開

https://learn.adafruit.com/introducing-trinket/setting-up-with-arduino-ide

を参考にセットアップ

解凍するには
http://uguisu.skr.jp/Windows/tar.html
を参考に

tar zxvf arduino-1.0.5-linux64.tgz 

で展開

この中にあるのを起動するので

./ardunio-1.0.5/ardunio

で起動する

普通に ardunoでは apt-get でインストールしたほうが起動してしまう
起動すると文字化けしているので

Ctrl + , でメニューをだし
Editor language で
English
を選択すれば、英語になるので一度終了し再起動

これで英語メニューで起動して
文字化けは消える

次にプラグインのインストール

http://learn.adafruit.com/system/assets/assets/000/010/777/original/trinkethardwaresupport.zip?1378321062
から
trinkethardwaresupport.zip
をダウンロードし

unzip trinkethardwaresupport.zip

で展開

On Linux machines, the folder is named “Sketchbook” and it is typically located in /home/[username]
と書いてあるけど
実際に圧縮ファイルを展開しているのなら

arduino-1.0.5/hardware/

の中になる

今回はすでに展開したフォルダを
HOMEディレクトリにリネームしてコピーしていたので

cp -r Sketchbook/hardware/attiny/ arduino-1.0.5/hardware/

これで tool > board であたら
く表示される

Updating avrdude.conf
のところも
http://learn.adafruit.com/system/assets/assets/000/010/769/original/avrdude.conf?1378221965
からファイルをダウンロードし

 cd arduino-1.0.5/hardware/tools/
cp avrdude.conf avrdude.conf_bak
 cp ~/ダウンロード/avrdude.conf .

で再起動すればメニューが増える

If you are using Linux you will have to be “root” running the Arduino program to have access to the USB port
とあるんで
おそらく root 権限が必要

実際に root でないと書き込みに失敗する

次にサンプルファイルを開く

File > Examples > 01 Bascs > Bilink
で開く

今回はボードが違うので
Tools > Board > Adfruit Ttinket 16MHz
でボードを変更し

Tools > Programer > USBtinyISP
を選択する

次にボードにあうようにソース編集

int led = 13;

int led = 1;

にする

これでMicoUSB を差し込めばLEDが赤く点滅している間だけ書き込める

もしタイミングをミスしたら
リセットボタンをおすか
もしくはUSBを抜き差しすればいい

実行すると
LEDが1秒ごとに点滅する

これは
int led =1;
で led のピンを1番に指定していること

そして
loop() の中で

  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second

というループでON OFF を繰り替えしているから

HIGHでON
LOWでOFF

これで最初の段階は完了

なお
Linux の場合は
Step 3. Update ‘ld’ linker
の問題がすでに修正済

ListViewへヘッダー、フッターの設置

ListViewへヘッダー、フッターの設置

ListViewで
ヘッダー、フッターをそれぞれ別のレイアウトで用意して
ListView.addHeaderView
でヘッダーを設定

ListView.addHeaderView
でフッターを設定できる

使い道としては、クックパッドみたいに
途中に見出しをつけるコンテンツタイプのアプリ
もしくはAdmobによる広告をいれるなど

まずは、ヘッダーのレイアウトを
レイアウトファイルで定義

<LinearLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="top">

<TextView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="30dip"
android:gravity="center_horizontal"
android:background="@color/custom"
android:text="Header 部品"/>

</LinearLayout>

次に、フッター部分も作成

<LinearLayout xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom">

<TextView
android:id="@+id/footer"
android:layout_width="match_parent"
android:layout_height="30dip"
android:layout_gravity="center_horizontal"
android:background="@color/custom"
android:text="footer sample"/>

</LinearLayout>

次に、JavaでListViewへ
ヘッダーとフッターを追加する

View header = (View)getLayoutInflater().inflate(R.layout.header,null);
View footer = (View)getLayoutInflater().inflate(R.layout.footer,null);

ListView list = (ListView)findViewById(R.id.list);
list.addHeaderView(header);
list.addFooterView(footer);

list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);


//アイテムがクリックされたら呼び出されるコールバックを登録
list.setOnItemClickListener(new OnItemClickListener(){

public void onItemClick(AdapterView<?> parent, View view, int position, long id){

//headerのときは何もしない
if(position ==0){

rerun;}
}
});

//Adapter作成
list.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, LINUX));

//フォーカスが当たらないように設定
list.setItemsCanFocus(false)


//ListViewに表示する文字列
private static final String[] LINUX = new String[]{
"Ubuntu","Fedora","CentOS","OpenSUSE",
};

このように、ヘッダーとフッターのレイアウトファイルを
layoutInflater()で生成して
設定したいListViewへ追加する

注意点としては
ListViewへの追加はできるけど
GridViewへの追加はできない

また、追加されたヘッダーやフッターは
他のアイテムと同様に扱われるため
アイテムの位置が
0番目はヘッダーになり
フッターはn番目とかる

ExpandListViewで階層表示

ExpandListViewで階層表示

ExpandListViewに階層データを保持するAdapterを設定することで
画面に階層表示のリスト表示を作ることができる

モバイルのWikipediaとか
スマホ向けのクックパッドで
押すとリストがでるようなかんじ

大きな見出しと、詳細記事などを作るときに使える

ExpandListViewは
折りたたみ可能なListView

親リストへはカテゴリー

子リストにはデータを配置して
カテゴリーだけ表示するために
データを折りたたんで表示するときに使う

ExpandListViewを使うには
まずレイアウトファイルでExpandListViewを設定

<ExpandListView
android:id="@+id/expandlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

次に、JavaでAdapterの設定をする
ExpandListViewのインスタンスを取得し
データを設定したAdapterをセットする

//親リスト作成
ArrayList<HashMap<String,String>> groupData = new ArrayList<HashMap<String,String>>();

//子リスト作成
ArrayList<HashMap<String,String>> childData = new ArrayList<ArrayList<HashMap<String,String>>>();

//親リストを要素追加
HashMap<String,String> groupA = new HashMap<String,String>();
groupA.put("group","Linux");

HashMap<String,String> groupB = new HashMap<String,String>();
groupB.put("group","Android");

groupData.add(groupA);
groupData.add(groupB);

//Linuxの子リストへ要素追加
ArrayList<HashMap<String,String>> childListA = new ArrayList<HashMap<String,String>>();

HashMap<String,String> childA = new HashMap<String,String>();
childA.put("group","Linux");
childA.put("name","Ubuntu");

HashMap<String,String> childB = new HashMap<String,String>();
childB.put("group","Linux");
childB.put("name","CentOS");

HashMap<String,String> childC = new HashMap<String,String>();
childC.put("group","Linux");
childC.put("name","Fedora");

childListA.add(childA);
childListA.add(childB);
childListA.add(childC);


//Androidの子リストへ要素追加
ArrayList<HashMap<String,String>> childListB = new ArrayList<HashMap<String,String>>();

HashMap<String,String> childBA = new HashMap<String,String>();
childBA.put("group","Android");
childBA.put("name","Nexus7");

HashMap<String,String> childBB = new HashMap<String,String>();
childBB.put("group","Android");
childBB.put("name","Nexus5");

childListB.add(childBA);
childListB.add(childBB);

childData.add(childListB);


//親リスト、子リストを含んだAdapterを作成
SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
getApplicationContext(),
groupData(),
android.R.layout.simple_expandable_list_item_2,
new String[]{"name","group"},
new int[]{android.R.id.text1,android.R.id.text2}
);

//ExpandableListViewにAdapterをセット
ExpandableListView exList = (ExpandableListView)findViewById(R.id.expandlist);
exList.setAdapter(adapter);

ExpandableListViewのデータ構造は
階層構造になるため
ListView
GridViewのような単一データ構造ではない
なので、Adapterとしては
ExpandableListAdapterクラスを継承したAdapterである必要がある

ExpandableListAdapterクラスは内部で
親データの取得用メソッドと
子データの取得用メソッドがあるので
これをOverrideすることで
複雑な階層構造のデータ形式を扱えるようになる

AndroidでGrid表示

AndroidでGrid表示

AndroidでGrid表示するには
GridViewにデータを保持するAdapterを設定することで
画面スクロール可能なGrid形式のリストを表示できる

使い方によっては
ホーム画面のように、アイコンだけのUIを作るときにも使える

食べログのAndroidアプリの画面のようなかんじになる

カレンダーのように使うことも可能

GridViewは
グリッド状にリスト表示するためのViewで
画像viewerのように
データを升目のように並べて表示できる

これを行うには、まずレイアウトファイルでGridViewを設定

<GridView
android:id="@+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="4"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"/>

android:numColumns=””
は、1行に表示するアイテムの数
つまり表示する画像やアイコンの数になる

android:verticalSpacing=””
は、アイテムどうしの幅、つまり画像やアイコンの縦の幅になる

同様に
android:horizontalSpacing=””
はアイコンどうしの縦幅になる

これで設定はできたので
Adapterの設定をJavaで行う

GridViewのインスタンスを取得し
データを設定したAdapterを設定する

GridView grid = (GridView)findViewById(R.id.grid);

//Adapterの作成
ListAdapter adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,WEEK);

//Adapterの設定
grid.setAdapter(adapter);


//GridViewに表示する文字列
private static final String[] WEEK = new String[]{
"月","火","水","木","金","土","日"
};

これで、カレンダーのように
GridViewへ曜日が表示される

GridViewに指定するAdapterは
ListViewと同じものを使える

GridViewは、ListViewと同じ抽象クラスを継承しているため
多くの面で共通の処理を実装できる

ただし、GridViewは複数行を表示するという特徴があるため
いくつかの注意点がある

GridViewはListViewよりも表示アイテムが多くなるため
パフォーマンスに気をつける必要がある

また、ListViewでは
項目を指定してスクロールできるけど
GridViewではできないため
スクロール位置の配置に注意する必要がある

AndroidでList表示

AndroidでList表示

Androidで、リスト表示するには
ListViewにデータを保持するAdapterを設置することで
画面スクロール可能なリストを作成できる

ListViewは縦にリストを表示するためのビュー
データベースとともに使ったり
WebAPIなどと合わせて使うことが多い

ListViewを使うには、まずレイアウトファイルで
ListViewを設置する

<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
</ListView>

次に、JavaでlistViewのインスタンスを取得し
データを設定したAdapterを設定する

ListView list = (ListView)findViewById(R.id.list);

//Adapter作成
ListAdapter adapter = new ArrayAdapter<String>(this,android.R..layout.simple_list_item_1,CUTYS);

//Adapterの設定
list.setAdapter(adapter);

//ListViewへ表示する文字列
public static final String[] CITYS = new String[]{
"Tokyo",
"Nagoya",
"Osaka",
};

ListViewの表示に関する処理は
Adapterクラスで実装する

今回は、Adapterとして
ArrayAdapterクラスを使っている

このクラスは
デフォルトだと文字列を1つだけ表示するためのクラス

これを配列CITYSから渡されるデータから文字列を取得して
設定している

new ArrayAdapter()
の最後のCITYSがその部分になる

Ubuntu 12.04 LTS へ Ardunio IDE install

Ubuntu 12.04 LTS へ Ardunio IDE install

ハクション: Summer Fun!

が6月28日に開催されるので
これに参加

参加にあたってノートPCに Ardunio IDE インストールが必要ということで
インストール

当初、ドットインストールの講座
Arduino入門 (全12回)

を参考にやる予定だったけど
Mac での導入のようなので
公式サイトをもとにインストール

インストール手順は
Install Arduino on Ubuntu Linux

を参考に実験

Ubuntu 12.04 以降なら

sudo apt-get update && sudo apt-get install arduino arduino-core  

でできるようなので
これでインストール

インストール完了したら
端末で

 arduino

とすれば起動する

起動すると
Ardunio Permission Checker が起動する

arduino

追加するのなら
add を選び
そうでないのなら
ignore 意味は無視する
を選択

無視を選択するとIDEが起動する

ardunio2

いきなり当日にやるのは無理なので
ドットインストールで基礎知識を学習

画像の読み込み中にローディング

画像の読み込み中にローディング
表示

画像読み込み中に時間がかかる場合
ローディングを表示しないと
フリーズと間違えられる

ローディング表示には、
ProgressBarを設置する

まずは、レイアウトファイルでProgressBarを設置する

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:visibility="gone"/>

<ProgressBar
android:id="@+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

次に、Javaで読み込み中と読み込み後で表示状態を切り替える

読み込み中はProgressBarを表示
読み込み後はImageViewを表示
というように、表示状態を変更する

今回は、Handlerを使い、3秒間の読み込み時間を設定している

mHandler.postDelayed(new Runnable(){

@Override
public void run(){
//ProgressBarを非表示にする
progressBar.setVisibility(View.GONE);

//ImageViewを表示にする
imageView.setVisibility(View.VISIBLE);
imageView.setImageResource(R.drawable.ic_launcher);
}
},3000);

ローディング表示については
画面の中央にサークル状のProgressBarを表示する
もしくは
画面上部に進捗を表すProgressBarを表示するのが良いとされている

画像の回転処理

画像の回転処理

画像を回転させるには
ImageViewで
scaleType=”matrix”
として
回転用のMatrixを作成して
setImageMatrix()を呼び出して実現する

まずは、レイアウトファイルで定義

<ImageView
android:id="@+id/imageturn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="matrix"
android:src="@drawable/ic_launcher"/>

そして、Javaで
Matrixの
postRotate()で回転情報をセットして
setImageMatrix()

ImageViewへ回転を適用する

まずは、タップするたびに90度回転する情報の設定

mRotate +=90F;
if(mRotate >= 360F){
  mRotate =0;
}

これは、角度が360度以上はないから

次に、画像回転処理

Matrix mtrx = new Matrix();

mtrx.postRotate(mRotate, ImageView.getDrawable().getBounds().width()/2,
mImageView().getDrawable().getBounds().height()/2);

mImageView.setImageMatrix(mtrx);

これで、タップするたび画像回転する

また、postRotate()の引数は、
前から順に
回転角度
回転の中心X座標
回転の中心Y座標
となる

今回なら
回転角度 mRotate

回転の中心x座標は
ImageViewに対して
getDrawable().getBounds().width()
でセットされている画像の幅を取得し
その数値を1/2にすることで割り出している

回転のY座標も同様に
ImageViewに対して
getDrawable.().getBounds().height()
でセットされている画像の高さを取得
その数値を1/2にすることで割り出している

画面より大きい画像の場合、スクロールで表示

画面より大きい画像の場合、スクロールで表示

端末の画面に入りきらない画像をレイアウトに表示した場合
通常では画面に入りきらない

この対策は、
ScrollView

HorizontalScrollView
を組み合わせることで画像を上下左右に
スクロールして表示できるようになる

まずは、レイアウトファイルで
ScrollView
HorizontalScrollView
LinearLayout
ImageView
というような構造で作成する

ソースにすると

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:layout_width="@dimen/image_size"
android:layout_height="@dimen/image_size"
android:background="@drawable/background"/>

</LinearLayout>

</HorizontalScrollView>

</ScrollView>

@dimenに関しては
http://www.techdoctranslator.com/android/guide/resources/available-resources/more-resources
を参考に

このように
ScrollView
HorizontalScrollViewを使うことで
少ないコードでも上下左右のスクロールが可能になる

ただし、斜めスクロールはできない
斜めスクロールも可能にしたいのなら
Viewのカスタマイズが必要になる