プログラミング(javascript) part1 alert onClick

こんにちはrickyです。

9月に更新しようとしたら、ドットマトリクスの実験がうまくいかず、予定が狂ってしまいました。

スクロールを実装しようとしていたのですが、どうも抵抗を入れていなかったのが原因らしく、後日改めて実験します。

・・・たぶん

本題

今回はプログラミングに移って、javascriptのalert機能を使っていきます。

(警告!)なっている個所をクリックするとアラートダイアログが出現し、Okを押し続けるとホームページを切り替えるというものになります。

ちょっとしたイタズラに使えそうな機能です。

さてソースコードです。

<!DOCTYPE html><!DOCTYPE html><HTML> <HEAD> <title>BottomUpGame</title> <META charset="UTF-8"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> <SCRIPT TYPE="text/javascript"> function switchClick() { alert("自爆します"); for(var i=5;i>0;i--) { alert(i); } document.write("bomb!!"); } </SCRIPT> </HEAD> <BODY> <H1 CLASS="center"><SPAN onClick="switchClick()">警告!</SPAN></H1> </BODY> </HTML>

解説

サクラエディタに記述をしています。

拡張子はhtmlにします。

文字化けする際はUTF-8で開きなおして下さい。

onClick関数を使ってクリックが出来るようにし、関数を呼び出します。

呼び出された関数はalertメソッドで文章を表示させ、for文を使ってカウントダウンをします。

最後にdocument.writeメソッドで文字を出力し、完成です。

f:id:knroro1877887:20181006222258p:plain

f:id:knroro1877887:20181006222340p:plain

あとがき

今回はjavascriptについて書きました。

htmlと組み合わせると動的な処理を行えるのでなかなか楽しかったです。

本当はOkをクリックしなくても自動でカウントダウンさせたかったのですが、やり方が分からずじまいでした。

alertメソッドは一度しか呼ばれないのかもしれません。

分かる方がいたら教えて頂けると嬉しいです。

次回は電子工作に戻る予定です。

お楽しみに~

電子工作 part10 ~8*8ドットマトリクス~

こんにちはrickyです。

8月もそろそろ終わりそうですね。

皆さんは素敵な夏を過ごせましたか?

私は花火もスイカも海にも行かずに夏が終わりそうです・・・

 

概要

さて今回は8*8ドットマトリクスについて書いていきます。

LEDをなると巻きの順番で光らせていきます。

 

8*8ドットマトリクスとは

縦8個、横8個のLEDで構成されている。

アノード、カソードのピンがそれぞれ8個ずつ存在する。

電光掲示板などにも使われたりする。

 

使う材料

arduino uno

8*8ドットマトリクス(KEM-12088BG) 1個

抵抗 8個

ジャンパーワイヤ たくさん

 

8*8ドットマトリクスはアノードとカソードのピン配置が決まっているので、データシートを見ながら接続をしていきます。

https://lh3.googleusercontent.com/DdyCN8ipqlYd4rbKBNgF9F6IrSCIIFCsEjK6OYNWa_SAbVH9K5dKJ5yR9Cx0FqpeGVRPqPU-sJ5gjvBXH8s-ibwIqWI__AFFMINWOJVlSvDpz1eFz0i0zlQwb8S2sArVoOUhk-sJm5TNy17GrrGdICieTretTEBcNTlZcicVT89e2BOJgOwE1YrqD5mytYA01itprqHD-j9rc4hpOiN133WD0AGoqgxqGXnI4gs6WcupIfEDuGWsqjByDnNuAd7HCUJB4_Z3euEJ_NEJ9tXxmKnf8OzygJBUFUOyZ0vhKmsGatxNju-eulZks0Ntf7pvtTtmmnVmy4by3WK-X3WNDTmdHZ58phdNNJb3EHEFbu8Gii3T-hRuhpi3hwsI-t4v8mZ28o4ENVoCTu6kHQr1t5HJ6nzqW4uf0ThTdg4f2Lp5KjbZU_h--J0V5-N0Vk96fjJXv8tl7ooN84YlwF7OqT74Yb5gValL84tvU2WvnJ9ShqW6abkwhA5fuoFvFZzRONB4jjc0WbnvqQl2FBbfdIe1gcrRS5XHqpHeoHIGpiyILn71rtHH2F96tv6ZQptNOdkX74UTekSTY7DYgjGOXUSm3kHBM-DjiSslycP54JhTRPAr1Azs4cnPGTsZY7g=w482-h642-no

 

今回の場合だと一番左上のLEDを光らせたい場合は9番ピンをHIGH、13番ピンをLOWにします。

アノードカソードが入り乱れているので、どのピンで光るのかを意識しておく必要があります。

1番ピンから順番にArduinoのアナログピンのA0~A5、デジタルピンの2,3,6~13につないでいきます。

 

ソースコード

int anode[8] = {6,11,3,9,A0,2,A1,A4};
int cathode[8] = {10,A2,A3,7,A5,8,12,13};
void setup(){
pinMode(A0,OUTPUT); // pin1 anode
pinMode(A1,OUTPUT); // pin2 anode
pinMode(A2,OUTPUT); // pin3 cathode
pinMode(A3,OUTPUT); // pin4 cathode
pinMode(A4,OUTPUT); // pin5 anode
pinMode(A5,OUTPUT); // pin6 cathode
pinMode(2,OUTPUT); // pin7 anode
pinMode(3,OUTPUT); // pin8 anode

pinMode(6,OUTPUT); // pin9 anode
pinMode(7,OUTPUT); // pin10 cathode
pinMode(8,OUTPUT); // pin11 cathode
pinMode(9,OUTPUT); // pin12 anode
pinMode(10,OUTPUT); // pin13 cathode
pinMode(11,OUTPUT); // pin14 anode
pinMode(12,OUTPUT); // pin15 cathode
pinMode(13,OUTPUT); // pin16 cathode

}

void loop(){
int first=0;
int last=7;


digitalWrite(anode[7],LOW);
for(int i=0;i<8;i++){
digitalWrite(cathode[i],HIGH);
}

//right_down_left_up
while(!(first == 4 && last == 3)){
for(int movement=first; movement<=last; movement++){
//(x++,y)
digitalWrite(anode[first],HIGH);
digitalWrite(cathode[movement],LOW);
delay(100);
digitalWrite(anode[first],LOW);
digitalWrite(cathode[movement],HIGH);
}

for(int movement=first; movement<=last; movement++){
//(x,y++)
digitalWrite(anode[movement],HIGH);
digitalWrite(cathode[last],LOW);
delay(100);
digitalWrite(anode[movement],LOW);
digitalWrite(cathode[last],HIGH);
}


for(int movement=last; movement>=first; movement--){
// digitalWrite(anode[7],LOW);
//(x--,y)
digitalWrite(anode[last],HIGH);
digitalWrite(cathode[movement],LOW);
delay(100);
digitalWrite(anode[last],LOW);
digitalWrite(cathode[movement],HIGH);
}


for(int movement=last;movement>first;movement--){
digitalWrite(anode[movement],HIGH);
digitalWrite(cathode[first],LOW);
delay(100);
digitalWrite(anode[movement],LOW);
digitalWrite(cathode[first],HIGH);
}

first++;
last--;
}

first = 3;
last = 4;

//right_up_left_down

while(!(first == -1 && last == 8)){

for(int j=0;j<8;j++){
digitalWrite(cathode[j],HIGH);
}

for(int movement=first; movement<=last; movement++){
//(x++,y) move_right
digitalWrite(anode[last],HIGH);
digitalWrite(cathode[movement],LOW);
delay(100);
digitalWrite(anode[last],LOW);
digitalWrite(cathode[movement],HIGH);
}

for(int movement=last; movement>=first; movement--){
//(x,y--) move_up
digitalWrite(anode[movement],HIGH);
digitalWrite(cathode[last],LOW);
delay(100);
digitalWrite(anode[movement],LOW);
digitalWrite(cathode[last],HIGH);
}

for(int movement=last; movement>=first-1; movement--){
//(x--,y) move_left
digitalWrite(anode[first],HIGH);
digitalWrite(cathode[movement],LOW);
delay(100);
digitalWrite(anode[first],LOW);
digitalWrite(cathode[movement],HIGH);
}

for(int movement=first;movement<=last+1;movement++){
//(x,y++) move_down
digitalWrite(anode[movement],HIGH);
digitalWrite(cathode[first-1],LOW);
delay(100);
digitalWrite(anode[movement],LOW);
digitalWrite(cathode[first-1],HIGH);
}

first--;
last++;
}

}

 

www.youtube.com

あとがき

LEDを光らせること自体は簡単でしたが、順番に光らせるとなるとうまくいかなかったりしてしまい、ちょっと大変でした。

ピンの数も結構必要になったりしちゃうので、シフトレジスタと組み合わせてピンを節約することも検討したほうが良さそうです。

次回はドットマトリクス上で文字を右から左に流す実験をしていきたいと思います。

お楽しみに~

電子工作 part9 ~シフトレジスタ~

こんにちは、rickyです。

夏の暑さも少し和らいできて、今年は秋らしい秋になりそうな予感がする今日この頃です。

概要

今回はarduinoに戻ってシフトレジスタの実験を行います。

arduinoを使う際にアナログ、デジタルのピンを使用します。

しかしこのアナログとデジタルのピンには数の限りがあります。

1個や2個のLEDを点灯させるだけなら問題はないのですが、20個のLEDを点灯させるとなるとピンが足りないという状況に出会います。

その際に役立つのがシフトレジスタです。

シフトレジスタはピンを増やしてくれる役割を担っています。

1つのシフトレジスタで8つのピンを増設することが出来ます。

 

使う材料

arduino uno

シフトレジスタ(74HC595AP) 2個

LED 10個以上

抵抗 LEDと同じ数

ジャンパーワイヤ たくさん

 

シフトレジスタのつなぎ方

シフトレジスタは半円に欠けている側が左となります。

順番は下の一番左か1で右に進むごとに1ずつ増え、

上の一番右が9で左に進むごとに1ずつ増えます。

1~7、15は出力ピン

8はGND

9はQHはシフトレジスタ同士をつなげる際に使用

10はSRCLKは電源

11はSRCLKはシフトレジスタクロック

12はRCLKはレジスタクロック

13はOEは電源

14はシリアルピン

16はVCC

になります。

arduinoの8ピンとシフトレジスタの11ピン、

arduinoの11ピンとシフトレジスタの14ピン、

arduinoの12ピンとシフトレジスタの12ピンを接続します。

今回はシフトレジスタを2個使うため、

1つ目のシフトレジスタの9ピンと2つ目のシフトレジスタの14ピンを接続、

1つ目のシフトレジスタの11ピンと2つ目のシフトレジスタの11ピンを接続、

1つ目のシフトレジスタの14ピンと2つ目のシフトレジスタの9ピンを接続します。

これで2つ目のシフトレジスタも利用することが出来、合計16個のLEDを光らせることが出来ます。

 

ソースコード

int dataPin = 11; // 74HC595のDSへ
int latchPin = 8; // 74HC595のST_CPへ
int clockPin = 12; // 74HC595のSH_CPへ
int val;
int h;
int l;

void setup() {
pinMode(latchPin, OUTPUT);
pinMode(clockPin, OUTPUT);
pinMode(dataPin, OUTPUT);
}

void loop() {
// LED1からLED16までを順に光らせます
for (int j = 0; j < 16; j++) {
// 送信中のlatchPinはグランド(LOW)レベル
digitalWrite(latchPin, LOW);
// シフト演算を使って点灯するLEDを選択しています
val = 1<<j;
h = val>>8;
l = val & 0xff;
shiftOut(dataPin, clockPin, LSBFIRST, h);
shiftOut(dataPin, clockPin, LSBFIRST, l);

// 送信終了後latchPinをHIGHにする
digitalWrite(latchPin, HIGH);
delay(100);
}
}

 

www.youtube.com

 

 

あとがき

for文の中身を書き換えれば好きな順番でLEDを光らせることが出来そうです。

最初latchPinとclockPinを入れ間違えていたようで、LEDの光る順番が逆になっていました。

まだ少しシフトレジスタについての理解が不足しているのかなという印象でした。

次回はシフトレジスタを使ってLEDマトリックスを実験する予定です。

お楽しみに~

 

このブログについて

まだまだ未熟なのでこのブログには間違いやおかしな点があるかもしれません。

その際はお手数ですが、ご指摘いただけると幸いです。

ツイッターも行っているので、そちらから一報していただくことも可能です。

以下ツイッターのアカウントになります。

@akiraarika932

ご指摘待ってます。

 

RaspberryPi リモート接続

こんにちは、rickyです。

またまたブログの更新が途絶えてしまいました・・・

振り返ってみると7月は1回しか更新が出来ていませんでした。

8月はそうならないようにちゃんと更新します。

・・・たぶん

 

さて、今回は電子工作でなくRaspberryPiをつかった作業になります。

今回はPCからRaspberryPiをリモート操作するやり方を行います。

用意するもの

 PC

 RaspberryPi

前提として端末間接続の可能なwifiを使います。

作業内容 

 1、まずはコマンドプロンプトを開いて、ipconfigコマンドもしくはifconfigコマンドを打ち込みます。これでPC,RaspberryPiのIPアドレスが分かります。

 2、1で分かったIPアドレスを使って、PCからRaspberryPiにpingコマンドを実行します。

 ㊟通らない場合はファイアーウォールの設定に問題があるかも

 今度は逆にRaspberryPiからPCにpingコマンドを実行します。

 3、PC側からTeratermを起動します。IPアドレスとRaspberryPiのログイン名とパスワードを入力して接続をします。

 4、PC側からリモートデスクトップ接続を起動します。IPアドレスを入力して接続をします。

 これでおしまいです。

 問題がなければこれでPC側からRaspberryPiを操作することが出来ます。

 

あとがき

 IPアドレスだけわかればすぐに出来ると思っていたんですが、端末間接続が可能なルータでなかったり、ファイアーウォールの設定に邪魔されたりで以外に時間がかかりました。

 設定に邪魔されなければ簡単なのでぜひお試しください。

 では今回はこの辺で、さようなら~。

電子工作 part8 ~トグルスイッチ~

こんにちは、Rickyです。

最後の更新から2週間ぶりの投稿になります。

部品の調達や体調不良により遅れてしまいました。

今度からはできる限り間隔を開けずに更新できるようにしたいです。

さて、今回はトグルスイッチについてです。

トグルスイッチはon、offを手動で切り替えができるスイッチのことです。

今回使うトグルスイッチは単極双投というものです。

このトグルスイッチは3端子で構成されており、真ん中の端子が電源、両端がスイッチに

交差して接続されています。

今回はスイッチを右に押すと電流が流れ、左に押すと電流が流れないようにします。

電流が流れた際には2つのサーボモーターが動くようにします。

ソースコードはArudinoのスケッチ例からサーボを選択し、オブジェクトを2つ作ります。

 

https://www.youtube.com/watch?v=TN5ZKyo9Ov0

あとがき

 今回はトグルスイッチについて書いてみました。

on,offを制御するだけの簡単な仕組みなので少し物足りなかったかもしれません。

今度は実際に物を作っていきたいと思います。

お楽しみに~

電子工作 part7 ~可変抵抗~

こんにちは、Rickyです。

今回からニックネームを設定してみました。

けどニックネームを変えても表示されてるのは前のままなんですね・・・

気を取り直して今日は可変抵抗について書いていきます。

可変抵抗とは

 ボリュームを変更することで抵抗値を変化させることのできる抵抗です。
抵抗値をコントロールすることで、一定以上の電圧が流れないように制御をすることが出来ます。可変抵抗は上の部分を動かすことで抵抗の値を変えることが出来ます。

今回使う可変抵抗は半固定ボリューム100kΩ[104]を使います。

使う材料

Arduino uno
半固定ボリューム100kΩ[104]:1コ
LED:1コ
抵抗(330Ω):1コ
ジャンプワイヤ(オスオス):数本

左に回せば最大の抵抗値(100kΩ)を示し、右に回せば0にまで切り替えることが出来ます。

オームの法則[V(電圧)=I(電流) ×R(抵抗)]より抵抗が大きくなると電圧も大きくなり、結果LEDはより光ります。

上から順に0Ω、500Ω、1000Ωの順に抵抗を変化させています。

上2枚が何だか同じ明るさに見えてしまうのは私だけでしょうか・・・

あとがき

 今回は可変抵抗について書きましたが、いかがでしたでしょうか?

実装した身としてはイマイチ面白味に欠けるパーツだったような気がします。 

 次回は温度センサーについて書いていく予定です。お楽しみに~

電子工作 part6 ~サーボモーター~

こんにちは、knroro1877887です。

ワールドカップ日本代表は2-2の同点でしたね。

見ていて負けてしまうかもと思った頃にホンダの1点で追いついたいい試合でした。

次のポーランド戦はぜひ勝ってほしいですね。

さて、今回はサーボモーターについて書いていきます。

サーボモーターはロボットの関節などに使われるモーターです。

指定した角度まで動かすことができます。

DCモーターが動力ならこちらは動作といったニュアンスでしょうか。

今回も最低限の機能だけで実装していきたいと思います。

サーボモータ

 サーボモーターは3つのケーブルがあり、茶色がGND、赤が電源、オレンジが信号線となってます。信号線に角度を読み込ませます。

使う材料

Arduino uno
サーボモーター:1コ
ジャンプワイヤ(オスオス):数本 

ソースコード

//***********************************************************
// サーボモーターを動かすプログラム
//***********************************************************
#include <Servo.h> //サーボモーター用ライブラリを読み込み
Servo myservo; //サーボ用のオブジェクトを作成
int val; //サーボの角度を格納するための変数
void setup()
{
myservo.attach(3); //デジタル3番ピンをサーボの角度命令出力ピンとして設定
}
void loop()
{
val = 0;
myservo.write(val); //サーボを動かす(0度)
delay(1500);
val = 90;
myservo.write(val); //サーボを動かす(90度)
delay(1500);
}

https://www.youtube.com/watch?v=n7ikWouIgTE

あとがき

 今回はブレッドボードなしで実装してみました。抵抗がいらないと直接つなげれるので、楽でいいです。

 サーボモーターについて書きましたが、いかがでしたでしょうか?サーボモーターを利用したアイデアとして旗揚げをするロボットなんかを考えてます。声で認識するか、実際に旗揚げをしたのを真似するロボットにしようか考え中です。

 次回は可変抵抗について書く予定です。お楽しみに~