質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

3747閲覧

webブラウザでled点灯用のリモコン作成

goo___

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/08 00:50

編集2016/08/09 00:45

###前提・実現したいこと
raspberry pi をwebブラウザから操作する用にブラウザ作成をしています。CSSでボタンを作成し、カスタマイズをしているのですが変更されません。
カスタマイズ内容
・ボタンの大きさ変更
・ボタンの配置変更
・ボタンのカラー変更

button1だけ変更していってる状況です。

実行コマンド
sudo webiopi -d -c /etc/webiopi/config

エラーコードは出ていません。
HTMLを使用するのは初めてでコードの記述ミスなどあるかもしれません。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード
HTML CSS

CTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>WebIOPi | Light Control</title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> webiopi().ready(function() {
// Create a "R1" labeled button for GPIO 17 var button1 = webiopi().createGPIOButton(17, "前"); // Create a "R1" labeled button for GPIO 18 var button2 = webiopi().createGPIOButton(18, "後"); // Create a "R1" labeled button for GPIO 27 var button3 = webiopi().createGPIOButton(27, "右"); // Create a "R1" labeled button for GPIO 22 var button4 = webiopi().createGPIOButton(22, "左");

// Append button to HTML element with ID="controls" using jQuery
$("#controls").append(button1);
$("#controls").append(button2);
$("#controls").append(button3);
$("#controls").append(button4);

// Refresh GPIO buttons // pass true to refresh repeatedly of false to refresh once webiopi().refreshGPIO(true); }); </script>
<style type="text/css"> ```ボタン1の各セレクタ button1 { {display: block;} {margin: 5px 5px 5px 5px;} {width: 100px;} {height: 30px;} {font-size: 100pt;} {font-weight: bold;} {color: #red;} } ``` ```ボタン2の各セレクタ button2 { {display: block;} {margin: 5px 5px 5px 5px;} {width: 260px;} {height: 145px;} {font-size: 24pt;} {font-weight: bold;} {color: #green;} } ``` ```ボタン3の各セレクタ button3 { {display: block;} {margin: 5px 5px 5px 5px;} {width: 260px;} {height: 145px;} {font-size: 24pt;} {font-weight: bold;} {color: #blue;} } ``` ```ボタン4の各セレクタ button4 { {display: block;} {margin: 5px 5px 5px 5px;} {width: 260px;} {height: 145px;} {font-size: 24pt;} {font-weight: bold;} {color: #black;} } ``` ```17番ピンがlowのとき黒色、HIGHのとき青色 #gpio17.LOW { background-color: Black;} #gpio17.HIGH { background-color: Blue;} ``` ```18番ピンがlowのとき黒色、HIGHのとき青色 #gpio18.LOW { background-color: Black;} #gpio18.HIGH { background-color: Blue;} ``` ```27番ピンがlowのとき黒色、HIGHのとき青色 #gpio27.LOW { background-color: Black;} #gpio27.HIGH { background-color: Blue;} ``` ```22番ピンがlowのとき黒色、HIGHのとき青色 #gpio22.LOW { background-color: Black;} #gpio22.HIGH { background-color: Blue;} ``` </style> </head> <body>

#<div id="controls" align="center"></div>

</body> </html>

###試したこと
ボタンのサイズ変更やカラー変更を試しています。

###補足情報(言語/FW/ツール等のバージョンなど)
参考にしたサイト
http://deviceplus.jp/hobby/raspberrypi_entry_031/
やっていることはほぼ一緒です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NatsumiOki

2016/08/08 01:14

今の状態で見た限りだとCSSの各セレクタの閉じ括弧がなさそうですが・・・ すみませんがソースがとても見づらいです。 コードブロックで囲んでください。 ソースの前後に「```」をつけてほしいです。
goo___

2016/08/08 05:32

一応修正してみました。コードブロックの仕方が間違っていたらすみません。
NatsumiOki

2016/08/08 08:38

編集履歴がなさそうです。保存できていないのではないでしょうか?
kei344

2016/08/09 02:05

HTMLとして1つのコードブロックでまとめてはいかがでしょうか。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
goo___

2016/08/09 04:26

みなさんのおかげでボタンの生成がうまく進みました。様々なご指摘ありがとうございました。また質問することができたらよろしくお願いします。
kei344

2016/08/09 04:57

後からこの質問を御覧になる方のためにも、できれば修正はお願いします。
guest

回答4

0

#gpio17.LOW { background-color: Black; }

とかの閉じかっこが見えないのはコードブロックの問題ですかね?

投稿2016/08/08 08:34

nullbot

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goo___

2016/08/09 00:19

閉じ括弧をつけるの忘れてました。ありがとうございます。 ですがボタンが変わりませんでした... button1などの表示したい内容の書き方が悪いのでしょうか。
guest

0

最終的にこういう形になりました。
デザインにはあまり手をつけれていません。
更新が遅くなりすいません。
無事課題を進めることができ、ありがとうございました。

●index.html
CTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>WebIOPi | Light Control</title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> webiopi().ready(function() { // Create a "R1" labeled button for GPIO 17 var button1 = webiopi().createGPIOButton(17, " 前 ");
// Create a "R1" labeled button for GPIO 18 var button2 = webiopi().createGPIOButton(18, " 後 "); // Create a "R1" labeled button for GPIO 27 var button3 = webiopi().createGPIOButton(27, " 右 "); // Create a "R1" labeled button for GPIO 22 var button4 = webiopi().createGPIOButton(22, " 左 ");

// Append button to HTML element with ID="controls" using jQuery
$("#controls").append(button1);
$("#controls").append(button2);
$("#controls").append(button3);
$("#controls").append(button4);

// Refresh GPIO buttons // pass true to refresh repeatedly of false to refresh once webiopi().refreshGPIO(true); }); </script>
<style type="text/css"> #gpio17 { display: block; //margin: 5px 5px 5px 5px; width: 130px; height: 150px; font-size: 80pt; font-weight: bold; color: blue; position : fixed; top : 10px; left : 420px; } #gpio18 { display: block; margin: 5px 5px 5px 5px; width: 130px; height: 150px; font-size: 70pt; font-weight: bold; color: blue; position : fixed; left : 420px; bottom : 10px; } #gpio27 { display: block; margin: 5px 5px 5px 5px; width: 120px; height: 150px; font-size: 70pt; font-weight: bold; color: blue; position : fixed; right : 200px; bottom : 150px; } #gpio22 { display: block; margin: 5px 5px 5px 5px; width: 120px; height: 150px; font-size: 70pt; font-weight: bold; color: blue ; position : fixed; bottom : 150px; left : 200; } #gpio17.LOW { background-color: white;} #gpio17.HIGH { background-color: yellow;} #gpio18.LOW { background-color: white;} #gpio18.HIGH { background-color: yellow;} #gpio27.LOW { background-color: white;} #gpio27.HIGH { background-color: yellow;} #gpio22.LOW { background-color: white;} #gpio22.HIGH { background-color: yellow;} </style> </head> <body>

#<div id="controls" align="center"></div>

</body> </html>

●import webiopi

GPIO = webiopi.GPIO

FRONT = 17
LIGHT = 27 # GPIO pin using BCM numbering
LEFT =22
BACK = 18

X=0

def setup():
# set the GPIO used by the light to output
GPIO.setFunction(LIGHT, GPIO.OUT)
GPIO.setFunction(LEFT, GPIO.OUT)
GPIO.setFunction(FRONT, GPIO.OUT)
GPIO.setFunction(BACK, GPIO.OUT)

def loop():
global X
if X!=1:
if(GPIO.digitalRead(LIGHT)==GPIO.HIGH):
GPIO.digitalWrite(LEFT,GPIO.LOW)
GPIO.digitalWrite(FRONT,GPIO.LOW)
GPIO.digitalWrite(BACK,GPIO.LOW)
X=1

if X!=2: if(GPIO.digitalRead(LEFT)==GPIO.HIGH): GPIO.digitalWrite(LIGHT,GPIO.LOW) GPIO.digitalWrite(FRONT,GPIO.LOW) GPIO.digitalWrite(BACK,GPIO.LOW) X=2 if X!=3: if(GPIO.digitalRead(FRONT)==GPIO.HIGH): GPIO.digitalWrite(LIGHT,GPIO.LOW) GPIO.digitalWrite(LEFT,GPIO.LOW) GPIO.digitalWrite(BACK,GPIO.LOW) X=3 if X!=4: if(GPIO.digitalRead(BACK)==GPIO.HIGH): GPIO.digitalWrite(LIGHT,GPIO.LOW) GPIO.digitalWrite(LEFT,GPIO.LOW) GPIO.digitalWrite(FRONT,GPIO.LOW) X=4

webiopi.sleep(1)

def destroy():
GPIO.digitalWrite(LIGHT, GPIO.LOW)
GPIO.digitalWrite(LEFT, GPIO.LOW)
GPIO.digitalWrite(FRONT, GPIO.LOW)
GPIO.digitalWrite(BACK, GPIO.LOW)

投稿2016/10/14 01:37

goo___

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

回りくどい説明になってしまうかもしれませんが、ボタンを表示するというのはもともと
htmlファイルに以下のようなbuttonタグを記述して作成します。
<button type=button class="" id="" name="" value="1">ボタン</button>

今回はソースコードを見るとjavascriptで上記のようなbuttonタグを動的に生成しています。(ブラウザがjavascriptを解釈して生成する)

cssというのは静的に(htmlファイルに直接書き込んだ)タグでもjavascriptから動的に生成したタグでもどちらでも有効ですし、その仕組みは同じです。

簡単なことを言うと
対象 {
プロパティ: 値;
}
で、対象というのはタグの種類(button, p, などなど)と、ID(上記の例に出したbuttonタグ中のID=""の部分)、クラス(同じくclass=""の部分)の組み合わせで指定します。

参考にしたサイトでは

button { display: block; margin: 5px 5px 5px 5px; width: 160px; height: 45px; font-size: 24pt; font-weight: bold; color: white; }

こうなっていました。上の意味はbuttonタグに対してそれぞれプロパティに値を設定しています。
これをbutton1に書き換えてはいけません。それはhtmlにbutton1というタグが存在しないからです。

ではどんなタグが生成されているのかというとwebiopi.jsをみるか、ブラウザの開発者ツールを使うとわかります。

多分IDに対応してしたのようにタグが生成されているのではないでしょうか?

<button type="button" class="Default" ID="gpio17">前</button> <button type="button" class="Default" ID="gpio18">後</button> <button type="button" class="Default" ID="gpio27">右</button> <button type="button" class="Default" ID="gpio22">左</button>

ということで

#gpio17 { display: block; margin: 5px 5px 5px 5px; width: 160px; height: 45px; font-size: 24pt; font-weight: bold; color: white; }

とか書けばいいんじゃないでしょうか。

投稿2016/08/09 04:02

nullbot

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

中の括弧はいりません。
あとカラーコードも16進数じゃなくて色名の場合は#は必要ありません。

それからbutton1はHTML上のどこにいますか?
JS側の変数button1をそのまま指定してもCSSは効きません。
idならば「#」、classならば「.」をつけてください。

#button1 { display: block; margin: 5px 5px 5px 5px; width: 100px; height: 30px; font-size: 100pt; font-weight: bold; color: red; }

投稿2016/08/09 00:44

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問