Python Web/Brython

[Python web] 6. FileReader(), rotate(), window.sessionStorage 파일 불러오기 및 객체 속성 적용(Brython)

1.Brython document 

속성 표

함수 설명 예제
FileReader() window.FileReader.new() : 파일을 읽을 준비를 한다
reader.readAsText(넣을 값) : 값을 택스트형식으로 읽는다 
reader.bind('load', onload) : reaeder가 실행되면 함수를 실행한다

def onload(self):
  document['객체 id'].value = self.target.result
: 받아온 값을 넣을 객체에 넣어준다		 def onload(self):
  document['객체 id'].value = self.target.result

reader = window.FileReader.new()
reader.readAsText(반응 객체)
reader.bind('load', onload)
rotate() 회전 객체.style.transform = f"rotate({각도}deg)"
window.sessionStorage setItem : html 객체에 넣고싶은 값을 넣어준다
removeItem : html 객체 값을 지운다
 window.sestorage = window.sessionStorage
storage.setItem('객체 id', 넣고싶은 값 )
storage.removeItem('item')

불러온 객체는 리스트 형태로 되어있어 원하는 객체를 선택해 추출해야한다

2. 실행

1. 간단한 실행 방법 

3. 파일구조

<folder>

Folder─┬─ index.htm
             ├─ style.css
             └─ script ─┬─ brython.js
                                 ├─ brython.min.js
                                 ├─ brython_stdlib.min.js
                                 └─ python.py

<index.html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- brython 가져오기  오프라인 -->
    <script type="text/javascript" src="script/brython.js"></script>
    <script type="text/javascript" src="script/brython_stdlib.min.js"></script>

    <!-- css 가져오기 -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- python 파일 사용하기 -->
    <script type="text/python" src="script/python.py"></script>
    
    <link rel="shortcut icon" href="#">

</head>
<body onload="brython()">
    <h1>Brython</h1>
    <!-- file upload -->
    <input type="file" id="file-upload">
    <br>
    <textarea id="file-text" cols="60" rows="10"></textarea>
    
    <!-- box move -->
    <div class="card">
        <button type="button" id="btn_rotate">회전</button>
        <div id="box_rotate" class="box"></div>
    </div>
    
    <!-- save -->
    <h2 id="item">저장 : </h2>
    <input type="text" name="" id="item_input" placeholder="파일">
    <button id="btn_add" style="display: inline">추가</button>
    <button id="btn_remove" style="display: inline">삭제</button>
</body>
</html>

<css/style.css>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	height:100%;
	border-style: solid ;
	border-color: white;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding: 30px;
	line-height: 1.6;
	overflow:hidden;
	color: white;
	font-size: 15px;
}
h1 {
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 1px #ccc solid;
}

h2 {
	margin-top: 20px;
}

button {
	cursor: pointer;
	display: block;
	background: #333;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 20px 0;
}

input[type="text"] {
	border: 1px #ccc solid;
	width: 300px;
	padding: 4px;
	height: 35px;
	margin-top: 20px;
}

a {
	color: white;
}

ul {
	font-size: 10px;
}
.card {
	margin: 20px 0;
	border: #ccc 1px solid;
	padding: 20px;
}

.box {
	background: steelblue;
	width: 1.6em;
	height: 1.6em;
}

.brython-dialog-main {
	position:absolute;
	border-style: solid;
	border-width: thin;
	border-radius: 15px;
	background: white;
	border-color: black;
	width: 230px;
}
.brython-dialog-title {
	color: black;	
	margin: 5px 10px 10px 10px;
	border-bottom: 2px solid ;
}
.brython-dialog-close {
	color: black;
	float: right;
}
.brython-dialog-close:hover {
	cursor:pointer;
	color : gray;
	transition: 1s ease-in;
}
div.brython-dialog-panel div{
	text-align: center;
}

.brython-dialog-button {
	display: inline-block;
	vertical-align: center;
	cursor:pointer;
	
}
.butten_list{
	float:right;
	top : 10px;
	right: 10px;
	border: 1px solid;
	padding: 0px 10px 0px 10px;
	border-radius: 5px;
}

@media (max-width: 230px){
	.brython-dialog-main {
		width: 100%;
	}
}

<script/python.py>

from browser import document, console, timer, window, html

''' file read '''

def file_read(self):
    def onload(self):
        document['file-text'].value = self.target.result
        
    file = document['file-upload'].files[0]
    reader = window.FileReader.new()
    reader.readAsText(file)
    reader.bind('load', onload)
    
document['file-upload'].bind('input', file_read)


''' rotate - manipulate  '''

box = document['box_rotate']
angle = 10

def change(self):
    global angle
    box.style.transform = f"rotate({angle}deg)"
    angle += 10
    

document['btn_rotate'].bind('click', change)


''' Local storage '''

storage = window.sessionStorage;

if storage.getItem('item'):
    document['item'] <= storage.getItem('item')
    
def add_item(self):
    item = document['item_input'].value
    storage.setItem('item', item)
    document['item'].textContent += item
    
def remove_item(self):
    storage.removeItem('item')
    document['item'].textContent = '저장 :'
    
document['btn_add'].bind('click', add_item)
document['btn_remove'].bind('click', remove_item)

4.  끝

 

 

 

궁금한 점과 질문이 있다면 밑에 뎃글을 달아주시고 아는 만큼 답변 해드리겠습니다

'Python Web > Brython' 카테고리의 다른 글

[Python web] 5. Template(), ajax() html글 객체 가져오기 (Brython)  (0) 2021.03.23
[Python web] 4. document 사용법 객체 불러오기 (Brython)  (0) 2021.03.22
[Python web] 3. 특성 (이벤트) 적용해보기(Brython)  (0) 2021.03.19
[Python web] 2. Brython DOM 객체 가져오는 방법(Brython)  (0) 2021.03.18
[Python web] 1. 웹 만들기 (Brython)  (0) 2021.03.18