Iotの基本 Mobile Broserからの制御
ボタンをクリックするとリレーをトリガーする。
Python pic.twitter.com/3OLHLWAYIQ
— 平田 裕 (@hiratayutaka) 2018年9月26日
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に上記のカラーを設定することによりボタンの色を変えています。
<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/< ボタン名 >に移動します。
<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)
Qiita pic.twitter.com/6nor1eQHIa
— 平田 裕 (@hiratayutaka) 2018年9月26日