IoT Python Bottle Mobile App Bottuns

18003 단어 병파이썬IoTButtonsbootstrap4

Iot 기본 Mobile Broser에서 제어



버튼을 클릭하면 릴레이를 트리거한다.





Python 피 c. 라고 r. 코 m / 3 오 LH Y 예 Q — 히라타 유 (@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


bootstrap4를 사용하기 위한 레이아웃 템플릿



'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)으로 하고 있습니다.



% 시작하는 문장은 템플릿에 코딩 된 파이썬입니다.



오프사이드 규칙(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)





<script async=""src="https://platform.twitter.com/widgets.js"/>
Python Bottle Hello World Bootstrap4
Bootstrap4 초학자 메모 쓰기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage