필자가 경험한 라즈베리파이4 overclock 후기를 간략하게 서술한다.
overclock은 늘 그렇듯 시행하는 본인에게 책임이 있다는 사실을 상기하도록 하며 후술할 내용은 어디까지나 참고용임을 명시한다.

아래 펌웨어를 기준으로 해당 설정이 유효하다.

firmware : 9ae94aeb1241adffec586ae451862e3fa6e05e6a

/boot/config.txt

over_voltage=5  
arm_freq=2050  
temp_limit=75
#gpu_freq = 750
#temp_limit = 70
#gpu_mem = 512

주석 처리된 부분은 gpu를 오버클록하고 메모리 할당량을 늘리는 설정이다.
라즈베리파이를 desktop으로 이용하거나 gpu를 사용하는 로직을 사용할 경우 적용하도록 한다.
필자는 라즈베리파이4를 서버용으로 사용하고 있으므로 gpu의 성능이 필요없어 lite 버전을 기준으로 적용했다.

필자는 이 이상 overclock하면 전력부족으로 라즈베리파이가 켜지지 않는 현상이 발생하고 있다.

이럴 때는 키보드를 연결하고 라즈베리파이가 재시작될 때 shift 키를 연타하는 것으로 config.txt 에 적용된 설정을 무시한 부팅이 가능하다.

인터넷에 떠도는 오버클록 후기에 따르면 펌웨어 버전이 무엇인지는 모르겠지만 아래 설정이 유효하다는 주장이 보이곤 한다.

/boot/config.txt

over_voltage = 6
arm_freq = 2147
#gpu_freq = 750
#temp_limit = 70
#gpu_mem = 512

하지만 필자는 위의 설정을 적용 시 라즈베리파이가 켜지지 않는다.
추측컨데 라즈베리파이4 공식 충전기를 이용하지 않아 전력공급이 불안정한듯 하다.
필자와 같은 상황이라면 필자의 설정을 참고하도록 한다.

#matplotlib 지원 색상

https://matplotlib.org/gallery/color/named_colors.html

import matplotlib.pyplot as plt

#제목 달기

plt.title('제목')

#꺽은 선 그래프

plt.plot([10,20,30,40], color='r', label='circle')

#히스토그램

# 원소의 빈도수를 계산해서 생성한다.

# bins 매개변수를 통해 히스토그램을 계산할 구간을 지정 할 수 있다.

plt.hist([1,1,2,3,4,4,5,6,7], bins=6)

#상자 도표

# 데이터의 최대, 최소, 중앙값, 1사분위, 3사분위 값을 박스 형태로 시각화

# showfliers 매개변수를 통해 이상치들을 깔끔하게 지울 수 있다.

plt.boxplot([data], showfliers=False)

#막대 그래프

# 막대를 표시할 위치가 담긴 배열, 막대의 높이 정보가 담긴 배열을 매개변수로 준다. 

plt.bar(range(6), [1,2,3,5,6,7])

#수평 막대그래프

# 매개변수는 막대 그래프와 동일하다.

plt.barh(range(101), result)

원 그래프

# pie([wedge_size)]

# 각 원소가 원소의 값 / 원소의 값 총합 만큼 비율을 차지하게 출력된다.

# 각 원소값이 표시되는 위치는 기본값으로 3시 방향에서 시작해 반시계 방향으로 출력된다. startangle 에 각도값을 넣어주면 그 값 만큼 반시계 방향으로 움직인 위치에서부터 출력된다.

# autopct 매개변수에 비율 표시 양식을 제시하면 비율이 출력된다.

# colors 매개변수에 색 정보가 담긴 배열을 값을 주면 wedge_size 원소의 순서대로 색이 칠해진 상태로 출력된다. 

# explode 매개변수에 가중치가 담긴 튜플 값을 주면 wedge_size 원소의 순서대로 (가중치*100)% 만큼 돌출되게 출력된다.

plt.pie([10,20], autopct="%.1f%%", colors=color, explode=(0,0,0.1,0), startangle=90)

동그란 원 그래프 그리기

plt.axis('equal')

#폰트 지정

plt.rc('font', family='Malgun Gothic')

#한글 폰트 설정 시 마이너스 부호가 깨지는 문제 해결 방법

plt.rcParams['axes.unicode_minus'] = False

#격자 무늬 스타일 지정

plt.style.use('ggplot')

#범례 표시

plt.legend()

#그래프 출력

plt.show()

숨김 패널

메뉴나 폼 등을 숨겨 놓았다가 필요할 때 페이지를 전환하지 않고 제공하기 위한 뷰

* 컨테이너에 data-role="panel" 속성을 설정하면 된다.

* data-display 속성으로 표시 방법을 설정한다.

- overlay 페이지 내용 위에 패널이 펼쳐지는 형태

<div data-role="panel" id="panel1" data-display="overlay" data-theme="b">
    <form>
        <h3>로그인 패널</h3>
        <label for="name">사용자명:</label>
        <input name="name" id="name" type="text" value="" data-mini="true" data-clear-btn="true">
        <label for="password">비밀번호:</label>
        <input name="password" id="password" type="password" value="" data-mini="true" data-clear-btn="true">
        <div class="ui-grid-a">
            <div class="ui-block-a"><a href="#" data-role="button" data-rel="close">취소</a></div>
            <div class="ui-block-b"><a href="#" data-role="button" data-rel="close">저장</a></div>
        </div>
    </form>
</div>

컬럼 토글 테이블

테이블 컬럼을 선택적으로 표기하거나 숨길 수 있는 테이블

* 사용자가 팝업 메뉴를 통해 표시 할 컬럼을 직접 선택할 수 있다.

* 컬럼에 우선 순위를 부여해서 크기 허용 범위 안에 표시할 테이블 컬럼 항목들을 제한 할 수 있다.

* data-role="table" data-mode="columntoggle" id="tableId" 태그를 갖는 <table> 태그안에 구현하면 된다.

* <table> 태그의 id 값은 팝업 메뉴에 쓰인다.

* data-priority 속성 값으로 우선순위를 정할 수 있으며 우선 순위값이 높은 순(1이 가장 높고 6이 가장낮다) 으로 컬럼 선택 메뉴에 표시된다.

* ui-responsive 클래스

- 허용 범위 칸큼 표시 테이블 컬럼들을 자동 조절

* table-stripe 속성값

- 행들을 구별하기 쉽도록 줄무늬 형태로 행을 표시한다.

<table class="ui-responsive table-stripe" id="my-table1" data-mode="columntoggle" data-role="table">
	<thead>
	<tr>
		<th data-priority="2">학년</th>
		<th>이름</th>
		<th data-priority="3">성별</th>
		<th data-priority="1">성적</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>1</th> <td>홍길동</td> <td>남</td> <td>94</td>
	</tr>
	<tr>
	<th>4</th> <td>신나라</td> <td>여</td> <td>77</td>
	</tr>
	<tr>
		<th>3</th> <td>홍미미</td> <td>여</td> <td>88</td>
	</tr>
	</tbody>
</table>

페이지 탭

모바일의 좁은 페이지 공간을 여러 개의 탭 페이지를 선택적으로 브라우징 할 수 있도록 돕는 효율적인 브라우징 인터페이스

* 탭 컨테이너 상위에 data-role="tabs" 속성을 갖는 <div> 태그를 설정하면 된다.

* 탭 컨테이너는 data-role="tabs" 속성을 갖는 <div> 태그 안에 든 태그들이다.

* 탭 은 <a> 태그의 href 속성에 표시 할 페이지 컨테이너의 id를 넣는다. #tabId

* 페이지 컨테이너는 data-role="tabs" 속성을 갖는 <div> 태그 안에 있으면 같은 공간을 공유한다.

<div data-role="tabs">
	<div data-role="navbar">
		<ul>
			<li><a href="#tab1">탭1</a></li>
			<li><a href="#tab2">탭2</a></li>
			<li><a href="#tab3">탭3</a></li>
		</ul>
	</div>
	<div id="tab1">
		<h1>첫번째 탭 내용</h1>
	</div>
	<div id="tab2">
		<h1>두번째 탭 내용</h1>
	</div>
	<div id="tab3">
		<h1>세번째 탭 내용</h1>
	</div>
</div>