以前、ブラウザからキー入力した情報をsocket.ioを使用してFlaskで作成したWebサーバーに送信する、というところまでやりました。
tohutokonsome.hatenablog.com
ラジコンとしては、最低限の機能を有しているわけですが、もうすこし画面に凝ってみたい、スマホからの操作も意識してみたい、というところもありまして、画面を作成することにしました。
このブログを始めた当初に、日めくりカレンダーを作ってみよう、という中途半端なもの作成した際に、HTMLとCSSの勉強を少ししたのですが、もう忘れてしまっていました。
tohutokonsome.hatenablog.com
あまり作業メモを取っておらず後悔しましたので、今回はちゃんとメモっておこうと思います。
全般的に役に立つ内容はほとんどなく、自分のメモという側面が大きいです。
（あれ、このブログで役に立つことなんてあったけ？）
使用したHTMLエディタ
node.jsの時にはWebStromを使っていたので、こちらを使いたかったのですがお試し期間が終わっちゃいました。
ライセンスを購入したいところなんですが、とり急ぎVsCodeで作業することにしました。
VsCodeのプラグインはこちらを参考させていただきました。
qiita.com
さっそく作成する
とりあえず、socket.ioやらなんやらは忘れて、純粋にhtmlとcssのみ使っていきます。
Bootstrap公式のテンプレートをとってくるところからやろうと思ったのですが、わかりやすい記事がありましたので、以下を参考にしました。
Bootstrap3.x.で何かやるときの最低限のメモ - Qiita
ただ、今回使用するBootstrapのバージョンは4.xにしました。
とりあえず最初にグリッド
参考記事をそのまま真似ています。
てきとうなhtml
<html lang="ja">
<title>LegoCarコントローラ</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div id="header" style="background-color:#ff0000">header</div>
</div>
<div class="row" style="background-color:#00ff00">
<div class="col-md-3">left</div>
<div class="col-md-6">center</div>
<div class="col-md-3">right</div>
</div>
<div class="row">
<div id="header" style="background-color:#0000ff">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
ブラウザでみた場合
参考記事のBootstrap3.xでは、上記でいい感じに幅が揃っていたのですが。headerとfooterがはみ出てしまいました。
どうもBootstrap4.0の影響っぽいです。
選択肢として、カラムの値を12にすればできたけれども、違和感があります。
<div class="row">
<div class="col-md-12" style="background-color:#ff0000">header</div>
</div>
今回、全体をcontainerで囲む必要性を感じなかったので、メインコンテツ部分のみをcontainerで囲むことにしました。
てきとうなhtml(抜粋)
<div id="header" style="background-color:#ff0000">header</div>
<div class="container">
<div class="row" style="background-color:#00ff00">
<div class="col-md-3">left</div>
<div class="col-md-6">center</div>
<div class="col-md-3">right</div>
</div>
</div>
<div id="header" style="background-color:#0000ff">footer</div>
ブラウザでみた場合
ヘッダーを編集する
やっぱり、ヘッダーにナビゲーションっぽいものがあるといいのかな、ということでnavbarをつけます。
navbarに関しては、公式のほぼそのままです。
Navbar · Bootstrap
さきほどのheader部分をまるっと以下に置き換えます。
てきとうなhtml(抜粋)
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand navbar-inverse" href="#">tohu</a>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">要素1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">要素2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">要素3</a>
</li>
</ul>
</div>
</nav>
ブラウザでみた場合
せっかくなので、上部に固定します。
navのclassにfixed-topを追加しました。
てきとうなhtml(抜粋)
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand navbar-inverse" href="#">tohu</a>
<div class="collapse navbar-collapse" id="navbarNav" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">要素1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">要素2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">要素3</a>
</li>
</ul>
</div>
</nav>
また、例のごとくfixed-topで固定した分、メインコンテンツをnavbarの高さ分paddingします。
どれくらいpaddingしていいかは、公式サンプルを参考にしました。
Fixed top navbar example for Bootstrap
<style>
body {
min-height: 75rem;
padding-top: 4.5rem;
}
</style>
ブラウザでみた場合
作成する画面イメージ
ここに来て、手がとまっちゃいました。
というのも、どんな感じの画面をつくるのかをあまり考えていなかった！
とりえあえずのイメージをdraw.ioで書いてみました。
作成する画面イメージ
右側に広大なスペースがありますが、あまったら畑でも耕しておけばいいと思うので、とりあえずこんな感じでいきます。
メインコンテンツ
とりあえずメイン部分となる、カメラの映像の部分と、コントローラーの部分をつくっていきたいと思います。
メインは、カメラ、コントローラ部分と畑部分とで2カラムとしますので、以下のようにしました。
てきとうなhtml(抜粋)
<div class="container">
<div class="row" style="background-color:#00ff00">
<div class="col-md-9" style="background:red">main</div>
<div class="col-md-3" style="background:yellow">side</div>
</div>
</div>
ブラウザでみた場合
カメラ部分
ラズパイのカメラの映像はお馴染みの「mjpg-streamer」を使っています。
なので、ストリミーング映像は、以下のimgタグを使うことで簡単に表示できます。
<img src="http://ラズパイのIPアドレス:8080/?action=stream">
ストリーミング映像のサイズは、mjpg-streamerのオプションで設定しています。
今は、「240 X 320」で設定しているのでそのサイズを意識することにしました。
てきとうなhtml(抜粋)
<div class="col-md-9" style="background:red">
<div id="monitor-wrapper">
<div id="monitor">
<img src="https://placehold.jp/240x320.png">
</div>
</div>
styleは以下のようにしました。
#monitor-wrapper{
padding-left:30px;
}
#monitor > img {
transform: rotate(90deg);
}
とりあえず、こんな感じになった。
ブラウザでみた場合
「monitor-wrapper」やらimgタグでrotateしているのはラズパイのカメラの取り付けの際にカメラの向きが90度右になった状態で設置してしまったので、それを補正するために対応した。
自宅のカメラを直せば、こんなことをしなくてよいのだけれども、免許合宿先で作業しているため、仕方がない。
コントローラ部分
ボタンを4つ十字に並べるだけといわれれば、それだけなんだけれども、それだけをどうやってやればいいのかなぁと悩んだ。
結果、flexboxと呼ばれるCSSレイアウトを使うことにした。
coliss.com
とりあえず、以下のように3 X 3のマスの上にButtonを並べるイメージで考えることにして、Button以外の要素は背景色に同化させて見えないようにした。
3X3のマスにボタンがあるイメージ
てきとうなhtml(抜粋)
<div class="col-md-9" style="background:red">
<div id="monitor-wrapper">
<div id="monitor">
<img src="https://placehold.jp/240x320.png">
</div>
</div>
<div id="controller_wrapper">
<div class="dummy_button"></div>
<button class="controller_button">前進:W</button>
<div class="dummy_button"></div>
<button class="controller_button">左折:A</button>
<div class="dummy_button"></div>
<button class="controller_button">右折:D</button>
<div class="dummy_button"></div>
<button class="controller_button">後退:S</button>
<div class="dummy_button"></div>
</div>
styleは以下とした。
/*flexさせたい要素の親要素のdisplayとして設定する。*/
#controller_wrapper{
background: #42aaf4;
width:300px;
height: 150px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.controller_button{
margin: 1%;
padding: 0;
width:30%;
height:30%;
background: #c97796;
text-align: center;
color: white;
border-radius: 10px;
}
.dummy_button{
margin: 1%;
padding: 0;
width:30%;
height:30%;
}
ブラウザでみた場合
申し訳程度にフッターをつける
フッターがあるとそれっぽいかなぁということで、フッターをつけることにした。
Bootstrap公式のフッターをそのままもってくる。
Sticky Footer Template for Bootstrap
てきとうなhtml(抜粋)
<footer class="footer">
<div class="container">
<p class="text-muted"><a href="http://tohutokonsome.hatenablog.com/archive">豆腐とコンソメ</a></p>
</div>
</footer>
スタイルもそのまま。
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
ブラウザでみた場合
なかなかひどいデザインです。
もう動かしたい！という気持ちがでてきちゃっているので、先に使えるようしてからデザインを整えたいなぁと思っとります。
次回は、これをnode.jsのプロジェクトにのっけていきます。
