テレビを制御するためのWebページを作成します(下の図を参照)。ボタンをクリックすると、サーバーはPOSTリクエストを受信し、それをIR信号に変換します。
できます。しかし、UIは見苦しいです。私はWebフロントエンドの初心者です。ボタンの見栄えを良くするCSSライブラリ、またはJSライブラリを使用した動的な外観はありますか?
ところで、Webサーバーは2Kメモリ、16MHz CPU、30kフラッシュを備えたArduinoでホストされています。そのため、内部CSSを保存するのに十分なメモリがありません。HTMLページをできるだけ小さくしたい。私が探しているのは、リンクできるCSSです。
2012年7月23日更新
以下にCSSコードを追加すると、ボタンは文字のように見えますが、完全ではありません。
button {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1da36), color-stop(100%,#fcf088));
background: -moz-linear-gradient(center top, #f1da36 0%, #fcf088 100%);
-webkit-box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
-moz-box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
padding: 10px 15px;
border-color: #ffffff;
border-width: 1px;
border-style: solid;
font-size: 16px;
color: #000000;
font-weight: bold;
}
button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeff07), color-stop(100%,#fcf088));
background: -moz-linear-gradient(center top, #eeff07 0%, #fcf088 100%);
}
button:active {
-webkit-box-shadow: 0px 0px 5px #333333 inset;
-moz-box-shadow: 0px 0px 5px #333333 inset;
box-shadow: 0px 0px 5px #333333 inset;
}