IoT Python Bottle Mobile App Bottuns

## Iotの基本 Mobile Broserからの制御
### ボタンをクリックするとリレーをトリガーする。
![20180926_085156.png](https://qiita-image-store.s3.amazonaws.com/0/274715/d529fb7e-c50f-08d9-7d2b-cb93106d6448.png)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="cy" dir="ltr">Python <a href="https://t.co/3OLHLWAYIQ">pic.twitter.com/3OLHLWAYIQ</a></p>&mdash; 平田　裕 (@hiratayutaka) <a href="https://twitter.com/hiratayutaka/status/1044924421264142343?ref_src=twsrc%5Etfw">2018年9月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## css の知識がなくてもBoostrapフレームワーク使って簡単にカラフルなボタンを作ることができます。
#### 下記の/static/css /static/jsフォルダにboostrapフレームワークを配置してあります。

### bottle用ファイルレアウト

``` 
│  buttons.py
├─static
│  │  favicon.ico
│  │  favicon.png
│  │
│  ├─css
│  │      .DS_Store
│  │      bootstrap-grid.css
│  │      bootstrap-grid.css.map
│  │      bootstrap-grid.min.css
│  │      bootstrap-grid.min.css.map
│  │      bootstrap-reboot.css
│  │      bootstrap-reboot.css.map
│  │      bootstrap-reboot.min.css
│  │      bootstrap-reboot.min.css.map
│  │      bootstrap.css
│  │      bootstrap.css.map
│  │      bootstrap.min.css
│  │      bootstrap.min.css.map
│  │
│  └─js
│          bootstrap.bundle.js
│          bootstrap.bundle.js.map
│          bootstrap.bundle.min.js
│          bootstrap.bundle.min.js.map
│          bootstrap.js
│          bootstrap.js.map
│          bootstrap.min.js
│          bootstrap.min.js.map
│          jquery-3.3.1.min.js
│          popper.min.js
│
└─views
    │  buttons.tpl
    │  layout.tpl

```
### boostrap4を使用するためのレアウトテンプレート
#### 'apple-mobile-**'が含まれる　meta文は、「Stupid phone」向けです。

```layout.tpl
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<meta name="apple-mobile-web-app-title" content="{{title}}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
	<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
	<link rel="apple-touch-icon" href="/static/favicon.png" />
	<script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/popper.min.js"></script>
</head>
<body>
<div class="container">
{{!base}}
</div>
</body>
</html>
```
### layout.tplの{{!base}}の中身の定義
### !importantを使うとスタイルを優先させることができます。boostrap4のボタン形状を正方形(60px x 60px)にしています。
#### % はじまる文は、テンプレート内にコーディングされるpythonです。
## オフサイドルール(4桁下げ)が使用できないので% end で区切りを行います。 
```
% for i in range(10):
<h1>{{ i }}</h1>
% end
```
### {{ 変数 }} は、HTML中に変数を用いるときに使用します。
#### {{ }}は、通称オッパイ括弧・拍手括弧

```buttons.tpl
% rebase('layout.tpl', title='Buttons')
<style>
.btnx {
    padding: 1px !important;
    margin:  1px !important;
    height:  60px !important;
　　width:   60px !important;
}
</style>
<br/>
<div class="container">
	% for i,x in enumerate(btns.items()):
		<button class="btnx btn {{"btn-"+colors[i%8]}}" onclick="location.href='/btn/{{x[0]}}'">{{x[1]}}</button>
	% end
</div>
<br/>
<div class="container">
	<div class="alert alert-dark" role="alert">
	% for x in btnf:
	 % val="checked" if btnf[x] else ""
		<div class="form-check-inline">
		  <label class="form-check-label">
			<input type="checkbox" class="form-check-input btn btn-primary" value="" disabled="disabled" {{val}}>{{x}}
		  </label>
		</div>
	% end
	</div>
</div>
```


### カラーボタンの生成
#### btnsに定義された辞書形式の名称及びURLをenumerate文によりindex化しカラーを生成しています。
#### colors=["primary","secondary","success","danger","warning","info","light","dark"]
#### button classに上記のカラーを設定することによりボタンの色を変えています。


```py
<div class="container">
    % for i,x in enumerate(btns.items()):
        <button class="btnx btn {{"btn-"+colors[i%8]}}" onclick="location.href='/btn/{{x[0]}}'">{{x[1]}}</button>
    % end
</div>
```
#### この書き方は、タグ< a >を用いずにリンクボタンを作成する方法です。
##### したがってクリックすると/btn/< ボタン名 >に移動します。

```py
<button class="btnx btn {{"btn-"+colors[i%8]}}" onclick="location.href='/btn/{{x[0]}}'">{{x[1]}}</button>
```


## メイン(wsgi) Web Server Gateway Interface のルーチン

###オブジェ名の説明
+ colors-> カラーテーブル
+ btn->ボタン名　リンク先　テーブル
+ btnf ->ボタン　on off flag caase on True


``` buttons.py
from bottle import *
colors=["primary","secondary","success","danger","warning","info","light","dark"]
btn={chr(i+ord('A')):chr(i+ord('A')) for i in range(26)}
btnf={k:False for k in btn}
@route('/')
@view('buttons.tpl')
def home():
    for x in btn: btnf[x]=False       
    return dict(btns=btn,msg="HOME",btnf=btnf,colors=colors)
@route('/root/<para>')
@view('buttons.tpl')
def root(para):
    btnf[para]=not(btnf[para])
    return dict(btns=btn,msg=para,btnf=btnf,colors=colors)
@route('/btn/<btname>')
def btns(btname):
    redirect('/root/'+btname)
@route('/static/<file_path:path>')
def static(file_path):
    return static_file(file_path, root='./static')
run(host="192.168.1.10",port=911)
```

<blockquote class="twitter-tweet" data-lang="ja"><p lang="et" dir="ltr">Qiita <a href="https://t.co/6nor1eQHIa">pic.twitter.com/6nor1eQHIa</a></p>&mdash; 平田　裕 (@hiratayutaka) <a href="https://twitter.com/hiratayutaka/status/1044832160874721284?ref_src=twsrc%5Etfw">2018年9月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>