728x90
라즈베리에서 플라스크 모듈 지원하에 와이파이 코딩은 디렉토리 설정을 비롯하여 약간 입체적인 준비가 필요하다.
필요한 예제 코딩과 절차에 관해서는 곧 출간 준비중인 종이 책 "라즈베리 와이파이 코딩"을 참고하기 바란다
hello-template.py
from flask import Flask, render_template
import datetime
app = Flask(__name__)
@app.route('/')
def hello():
now = datetime.datetime.now()
timeString = now.strftime("%Y-%m-%d %H:%M")
templateData = {
'title' : 'Raspberry Pi 3 WiFi Coding',
'time' : timeString
}
return render_template('main-landscape.html', **templateData)
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
main-landscape.html
| |
| <html> | |
| <body> | |
| <center><h1>{{title}}</h1> | |
| </body> | |
| <body> | |
| <h1>Hello, World!</h1> | |
| <h2>The date and time on the server is: {{ time }}</h2> | |
| </body> | |
| <head> | |
| <style> | |
| body{ | |
| background-color:tan;} | |
| .box{background-color:#3d4543;height:310px;width:520px; border-style:solid; border-color:lightblue; | |
| border-radius:10px;position:relative;top:50px;left:5%;} | |
| .display{background-color:#222;width:440px; position:relative; | |
| left:2px;top:20px;height:35px;} | |
| .display input{width:415px;position:relative;left:2px;top:2px;height:30px; | |
| color:black;background-color:#bccd95;font-size:21px;text-align:right;} | |
| .keys{position:relative;top:15px;} | |
| .button{width:40px;height:30px;border-radius:8px; border-style:solid; border-color:green; | |
| margin-left:12px;cursor:pointer;border-top:2px solid transparent;} | |
| .button.gray{color:white;background-color:#6f6f6f; | |
| border-bottom:black 2px solid;border-top:2px #6f6f6f solid;} | |
| .button.pink{color:black;background-color:#ff4561; | |
| border-bottom:black 2px solid;} | |
| .button.black{color:white;background-color:#303030; | |
| border-bottom:black 2px solid;border-top:2px #303030 solid;} | |
| .button.orange{color:black;background-color:FF9933; | |
| border-bottom:black 2px solid;border-top:2px FF9933 solid;} | |
| .gray:active{border-top:black 2px solid; | |
| border-bottom:2px #6f6f6f solid;} | |
| .pink:active{border-top:black 2px solid; | |
| border-bottom:#ff4561 2px solid;} | |
| .black:active{border-top:black 2px solid; | |
| border-bottom:#303030 2px solid;} | |
| .orange:active{border-top:black 2px solid; | |
| border-bottom:FF9933 2px solid;} | |
| .buttondigiclock{width:125px;height:40px;border:none;border-radius:8px;margin-left:15px; | |
| cursor:pointer;border-top:2px solid transparent;} | |
| .buttondigiclock.black{color:white;background-color:; | |
| border-bottom:lightblue 2px solid;border-top:2px 303030 solid;} | |
| p{line-height:10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div class="display"> | |
| <input type="text" readonly size="18" id="d"> | |
| </div> | |
| <div class="displayx"> | |
| <input type="text" readonly size="18" id="dx"> | |
| </div> | |
| <div class="keys"> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <td><input type="button" class="button gray" value="Pi" onclick='v("3.14159")'></td> | |
| <td><input type="button" class="button gray" value="(" onclick='v("(")'></td> | |
| <td><input type="button" class="button gray" value=")" onclick='v(")")'></td> | |
| <td><input type="button" class="button black" value="7" onclick='v("7")'></td> | |
| <td><input type="button" class="button black" value="8" onclick='v("8")'></td> | |
| <td><input type="button" class="button black" value="9" onclick='v("9")'></td> | |
| <td><input type="button" class="button pink" value="/" onclick='v("/")'></td> | |
| <td><input type="button" class="button pink" value="*" onclick='v("*")'></td> | |
| </tr> | |
| </tbody> | |
| <tr> | |
| <td><input type="button" class="button black" value="4" onclick='v("4")'></td> | |
| <td><input type="button" class="button black" value="5" onclick='v("5")'></td> | |
| <td><input type="button" class="button black" value="6" onclick='v("6")'></td> | |
| <td><input type="button" class="button black"value="1" onclick='v("1")'></td> | |
| <td><input type="button" class="button black" value="2" onclick='v("2")'></td> | |
| <td><input type="button" class="button black" value="3" onclick='v("3")'></td> | |
| <td><input type="button" class="button pink" value="-" onclick='v("-")'></td> | |
| <td><input type="button" class="button pink" value="+" onclick='v("+")'></td> | |
| </tr> | |
| <tr> | |
| <td><input type="button" class="button black" value="0" onclick='v("0")'></td> | |
| <td><input type="button" class="button black" value="." onclick='v(".")'></td> | |
| <td><input type="button" class="button black" value="sin" onclick='v("Math.sin")'></td> | |
| <td><input type="button" class="button black" value="cos" onclick='v("Math.cos")'></td> | |
| <td><input type="button" class="button black" value="tan" onclick='v("Math.tan")'></td> | |
| <td><input type="button" class="button black" value="log" onclick='v("Math.log")'></td> | |
| <td><input type="button" class="button black" value="C" onclick='c("")'></td> | |
| <td><input type="button" class="button orange" value="=" onclick='e()'></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <body onload="updateTime()"> | |
| <!-- viewBox is coordinate system, width and height are on-screen size --> | |
| <svg id="clock" viewBox="0 0 100 100" width="120" height="120"> | |
| <circle id="face" cx="50" cy="50" r="45"/> <!-- the clock face --> | |
| <circle id="smallface" cx="50" cy="32" r="10"/> <!-- the small clock face --> | |
| <g id="ticks"> | |
| <!-- 12 hour tick marks --> | |
| <line x1='50' y1='5.000' x2='50.00' y2='10.00'/> | |
| <line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/> | |
| <line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/> | |
| <line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/> | |
| <line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/> | |
| <line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/> | |
| <line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/> | |
| <line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/> | |
| <line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/> | |
| <line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/> | |
| <line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/> | |
| <line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/> | |
| </g> | |
| <g id="smallticks"> | |
| <!-- 12 hour tick marks --> | |
| <line x1='50' y1='24' x2='50' y2='22'/> | |
| <line x1='58' y1='32' x2='60' y2='32'/> | |
| <line x1='50' y1='40' x2='50' y2='42'/> | |
| <line x1='42' y1='32' x2='40' y2='32'/> | |
| </g> | |
| <g id="numbers"> | |
| <!-- Number the cardinal directions--> | |
| <text x="50" y="18">12</text><text x="85" y="53">3</text> | |
| <text x="50" y="88">6</text><text x="15" y="53">9</text> | |
| </g> | |
| <!-- Draw hands pointing straight up. We rotate them in the code. --> | |
| <g id="hands"> <!-- Add shadows to the hands --> | |
| <line id="hourhand" x1="50" y1="50" x2="50" y2="24"/> | |
| <line id="minutehand" x1="50" y1="50" x2="50" y2="20"/> | |
| <line id="secondhand" x1="50" y1="32" x2="50" y2="24"/> | |
| </g> | |
| </svg> | |
| </body> | |
| </td> | |
| <td> | |
| <form name="theClock"> | |
| <input type=text class="button buttondigiclock black" name="theDate" style="font-size:20px;text-align: center;"> | |
| </td> | |
| <td> | |
| <input type=text class="button buttondigiclock black" name="theTime" style="font-size:20px;text-align: center;"> | |
| </form> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script type='text/javascript'> | |
| function c(val){ | |
| document.getElementById("d").value=val;} | |
| function v(val){ | |
| document.getElementById("d").value+=val;} | |
| function e() { | |
| try { | |
| c(eval(document.getElementById("d").value)) } | |
| catch(e) { | |
| c('Error') } } | |
| </script> | |
| </body> | |
| <head> | |
| <script> | |
| function updateTime() { // Update the SVG clock | |
| var now = new Date(); | |
| var sec = now.getSeconds(); | |
| var min = now.getMinutes(); | |
| var hour = (now.getHours() % 12) + min/60; | |
| var secangle = sec*6; | |
| var minangle = min*6; | |
| var hourangle = hour*30; | |
| var actualMonth = now.getMonth() + 1; | |
| //Prepare time output! | |
| document.theClock.theTime.value = "" | |
| + now.getHours() + ":" | |
| + now.getMinutes() + ":" | |
| + now.getSeconds(); | |
| document.theClock.theDate.value = "" | |
| + now.getFullYear() + ":" | |
| + actualMonth + ":" | |
| + now.getDate(); | |
| // Get SVG elements for the hands of the clock | |
| var sechand = document.getElementById("secondhand"); | |
| var minhand = document.getElementById("minutehand"); | |
| var hourhand = document.getElementById("hourhand"); | |
| // Set an SVG attribute on them to move them around the clock face | |
| sechand.setAttribute("transform", "rotate(" + secangle + ",50,32)"); | |
| minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)"); | |
| hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)"); | |
| setTimeout(updateTime, 1000); | |
| } | |
| </script> | |
| <style> | |
| /* These CSS styles all apply to the SVG elements defined below */ | |
| #clock { | |
| /* styles for everything in the clock */ | |
| stroke: black; | |
| /* black lines */ | |
| stroke-linecap: round; | |
| /* with rounded ends */ | |
| fill: #eef; | |
| /* on a light blue gray background */ | |
| } | |
| #face { stroke-width: 3px;} | |
| /* clock face outline */ | |
| #smallface { stroke:green; stroke-width: 1px;} | |
| /* clock face outline */ | |
| #ticks { stroke-width: 2; } | |
| /* lines that mark each hour */ | |
| #smallticks { stroke:green; stroke-width: 1; } | |
| #hourhand {stroke-width: 5px;} | |
| /* wide hour hand */ | |
| #minutehand {stroke: deepskyblue; stroke-width: 3px;} /* narrow minute hand */ | |
| #secondhand {stroke:red; stroke-width: 1px;} | |
| #numbers { | |
| /* how to draw the numbers */ | |
| font-family: sans-serif; font-size: 7pt; font-weight: bold; | |
| text-anchor: middle; stroke: none; fill: blue; | |
| } | |
| </style> | |
| </head> | |
| </html> | |
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 라즈베리 파이 3 WebIOPi WiFi 웹서버에 의한 LED ON OFF II (0) | 2017.07.05 |
|---|---|
| WebIOPi WiFi 웹서버에 의한 라즈베리 파이 3 LED ON OFF (0) | 2017.07.05 |
| 와이파이에 의한 라즈베리 파이 3 LED ON OFF 파이선 3 코딩 (0) | 2017.07.05 |
| 라즈베리 파이 Flask 와이파이 모듈에 의한 웹브라우저 시간 정보 출력 파이선2.7 코딩 (0) | 2017.07.05 |
| 라즈베리 파이 3 Flask 와이파이 코딩에 의한 웹 출력 예제 (0) | 2017.07.05 |