###前提・実現したいこと
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);
<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>// Refresh GPIO buttons // pass true to refresh repeatedly of false to refresh once webiopi().refreshGPIO(true); }); </script>
#<div id="controls" align="center"></div>
</body> </html>###試したこと
ボタンのサイズ変更やカラー変更を試しています。
###補足情報(言語/FW/ツール等のバージョンなど)
参考にしたサイト
http://deviceplus.jp/hobby/raspberrypi_entry_031/
やっていることはほぼ一緒です。
回答4件
あなたの回答
tips
プレビュー