7/31/2016

ARM을 사용하는 대표적인 CPU

ARM을 사용하는 대표적인 SOC 

  • EXYNOS Series
ODRIOD 와 삼성에서 사용되는 핸드폰 및 기타 에서 주로 사용되며, 나도 이 SOC는 직접 사용해본 것은 ODROID로 구입하여  나의 장난감으로만 사용했다.  
오랜전에 삼성 TI BSP 기술지원할때, 잠시 보기만 했으며, 그때 당시에는 너무 신기할 따름이였다. 


  • OMAP 과 Davinci Series (DMx)
국내 TI 3rd party 및 외국 TI 3rd party를 비롯하여 TI 관련회사에서 근무하면서 많이 가장 많이 접해본  SoC 혹은 AP이며, 역사 또한 너무나 잘안다.
TI 3rd party 회사부터 시작하여 TI가 처음 Linux Driver 제공하지 않았을 때부터 개발했기에, 관련사항을 많이 접해봤으며, 익숙하게 잘 알고 있다.
OMAP도 모바일 사업을 오래전으로 접었다.
  https://ko.wikipedia.org/wiki/OMAP


  • Snapdragon
나의 경우는 접해보지 못한 CPU이며, 모바일에서 가장 많이 사용하기에 간략하게 소개하며, 아래의 링크를 참조하자.
LG는 핸드폰 개발에서 어쩔수 없이 사용하며, 삼성은 2개 AP 기반으로 가져가고 있다.
  https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%83%85%EB%93%9C%EB%9E%98%EA%B3%A4


  • Tegra
최근 EVM (Jetson TK-1) 을 가지고 논 SoC or AP이며 NVIDIA에서 제공하는 이름은 Tegra이다.
참고로, NVIDIA는 Tegra로 모바일 AP 사업을 진행했지만, TI보다 일찍 사업접었다. 
이때 인수한 회사가 영국의 아이세라 Baseband Chip회사이며, 인수 후 국내에서 모바일사업을 잠시 진행했는데, 잘되지 않았다.

TI를 비롯하여 많은 Chip 제조사가 GPU로 사용 
이매지네이션 테크놀로지의 PowerVR Series.

7/24/2016

ARM의 ABI 관련 자료 및 VFP/ NEON Program 자료

1. ARM의 ABI 

ABI는 Application Binary Interface 이며, 주로 Compiler에서 이를 준수하여 구현을 하며, ABI의 핵심은 ARM의 Registers들과 관련기능을 어떻게 연결하는 것이 ABI의 기능이다.


  • ARM ABI  관련구조 문서 
아래문서의 2 SCHEMATIC MAP OF THE ABI FOR THE ARM ARCHITECTURE 을 자세히 보자

   http://infocenter.arm.com/help/topic/com.arm.doc.ihi0036b/IHI0036B_bsabi.pdf
  1. AAPCS :  일반적으로 Function Call을 사용할 때, Register들의 용도를 정의 
  2. EHABI : Exception Handling ABI 
  3. AAELF : ARM을 위하여 ELF를 어떻게 사용하여 연결할 것인지 용도 정의
  4. 기타사항 


  • ARM ABI 관련 문서 
관련문서 링크
   http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.subset.swdev.abi/index.html



  • ARM Compiler C Library Start up과 Init 
관련문서 링크
  http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dai0241b/index.html


  • ARM의 Dynamic Linking 관련문서 (ELF)
ELF의 동적 Library인 .so 관련내용
  http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dai0242a/index.html


2. ARM의 NEON 모드 


ARM의 Neon 모드를 점점 DSP대신 사용하는 것으로 보여지며, 특정 SoC/AP에서는 Neon전용모드로 사용 (DSP대신)

관련내용링크
  http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dht0002a/index.html
  http://infocenter.arm.com/help/topic/com.arm.doc.den0018a/index.html
  http://infocenter.arm.com/help/topic/com.arm.doc.ihi0073b/IHI0073B_arm_neon_intrinsics_ref.pdf

  • ARM NEON Programing (ARM DS-5 Compiler 5.06)
아래 내용은 참고사항으로 보며, GCC와 비슷하겠지만, Compiler가 다르기 때문에 관련부분은 정확하게 확인해야 한다.
  http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dui0473m/dom1359731184627.html


  • ARM VFP Programing

7/23/2016

Android Studio 설치 및 갤럭시노트 5

나의 갤럭시 노트5가 자꾸 스피커 동작이 되지 않는 현상이 지속적으로 반복이 되며, AS 센터를 방문을 했으나,
AS 센터에서는 APP의 충돌이라며 , 노트 5 초기화를 권유하는데 하는데 왠지 아닌것 같아 한번 자세히 보기로 결심했다.
최근 쓸모 없는 앱들도 몇개 지웠는데 현상은 동일하며, 최근에도 갤럭시노트5가 동일한 현상이 나타나고,
그래서 전원리셋을 했더니 이번에는 더 심각한 문제가 발생했다. 초기화 Loading 화면에서 계속 멈추는 현상 발생하여,
AS 센터 방문이 벌써 3번이 넘은거 같은데 동일한 얘기만 하니, 내가 직접 보기로 하였다.

1. 나의 핸드폰 상태

  • 현재 핸드폰 상태 
  1. 설정->디바이스정보 
  2. 소프트웨어 자동 다운로드 이미 되어있음 (안드로이드 자동 업그레이 막음, APP은 적용여부는 모르겠음)
      다른 안드로이드 App는 자동 업데이트는 진행이 되지 않는 것 같은데,
      삼성 Apps는 자동 업데이트가 진행이 진행이 되는 것 같음.

  • 핸드폰 오류-문제현상 
 
     현재 생각으로는 삼성관련 프로그램이 업데이트가 되면 문제가 발생되는 것 같으며, 스피커가 만 동작되지는 않는
    현상은 몇 번 보았다. 최근 동일 현상이 일어나서 확인을 했는데, 스피커는 동작하지만, 이어폰은 동작이 되는 것을
    확인을 하였다. 이 때 스피커의 벨소리 /미디어 / 알림 / 시스템 소리가 모두 작동되지 않는다.


개인적으로 App이 문제를 일으켜도 이어폰 동작이 되는 것으로 보아 ALSA Interface에는 크게 문제가 없을 것이라고 추측하고,
상위 관련된 부분이 문제 일으켜 발생하는 것으로 추측 혹은 스피커 관련 문제로 파악하는데
이부분을 알아보도록 하겠다.  (설마 스피커문제는 아니겠지)

  • 핸드폰 오류-발생시점 및 확인해야할 사항 

핸드폰 오류 발생시점이 앱의 실행여부보다는 핸드폰이 사용하지 않는 상태에서 항상 발생이 되는 것으로 생각이 되고, 
자동업그레이드를 금지했으나, 삼성 소프트웨어 APP은 진행이 되고 있다. 다른 APP의 자동 업데이트가 진행은 되지 않는 것
같으며, 삼성 소프트웨어는 자동으로 Update가 된다. 이부분을 막을 수 있는 방법을 모색.


2. 갤럭시 노트 불량 TEST 

검색결과 다음과 같은 삼성 내부 TEST가 있다는 것을 알게되었으며, 다음에 문제가 또 다시 발생할 경우,
다시 실행을 해보겠다. 그런데 아직 실행을 해보지 못해 동작여부 검증을 못했다.

    http://laler.tistory.com/39


3. 추후 핸드폰에서 확인해야 할 상황 

  • 갤럭시노트의 설정->개발자옵션
    추후 다시 문제 발생시 현재 실행중인 서비스 중 프로그램 들을 확인
    이전 상태와 비교 예정

4. Android Studio 설치 

이프로그램 설치 목적은 adb의 logcat으로 error난 부분만 체크를 하려고 한다.

최근 Android 개발환경을 보니 좀 변경이 된것 같다 예전 같으면, SDK 설치에 이클립스 설치에 한 후 연결하고 그랬는데,
최근에 보니 이클립스기반의 통합개발환경으로 한 Tool로 Android Studio 만 제공을 해주는 것으로 변경이 되는 것 같다.

  • Android Studio Download 및 설치 
    https://developer.android.com/studio/index.html

    Android Studio includes all the tools you need to build apps for Android.
    이 Tool에 SDK 및 모든 Tool이 다 포함이 되어 있다고 한다.

    아래에 다른방식으로 설치하는 방법인것 같은데 예전의 이클립스로 연결하는 방식같다.
    (해보지 않아 정확하지 않음)


4.1 SDK 확인 

Android Studio Tool은 사용하기 편하며, 쉽게 설정에 확인 및 Monitor에서 ADB 확인이 가능하다.

  • File->Setting 
  1. Android SDK를 확인가능 및 update가 가능하다. 
  2. Android SDK Location 의 PATH에 platform-tools adb 존재확인
  3. 만약 본이 더 필요하다면 Update 




4.2. Logcat Monitoring 및 System information 

  • View->Tools windows->Android Monitor 설정

    adb locat의 상태확인이 가능하며, 내가 확인하고 싶은것은 debug가 아니라 error
    주의 현재 Android 프로그램을 만드는 것이 아니기에, Debug하는 것이 아니라 Monitoring이다.


  • adb logcat 확인 
  1. 갤럭시노트의 설정->개발자옵션
  2. USB 디버깅 확인
  3. 아래와 같이 Android Monitor에서 폰 선택과 ERROR로 변경 
  4. 모니터에서도 App선택 부분이 있으나 현재 동작불가능 


   https://developer.android.com/studio/command-line/adb.html


    핸드폰의 설정의  아래의 두기능은 아직 잘 모르겠다. (나중에 )
  1. 갤럭시노트의 설정->개발자옵션 아래 옵션은 정확히 이해를 못함
  2. USB로 애플리케이션 인증 확인 
  3. 디버깅할 앱 선택 가능 한 것 같은데, 현재 방법을 잘모름

  • System Information 확인 
    아래의 Android Monitor에서는 System information 이라는 다양한 정보를 제공한다.
    우측의 탐색기 같은 세번째 버튼이 System information이다.
 
  1. Active Manager :   Android Activity 상태를 확인 
  2. Package Information: Pacakage 상태 확인   
  3. Usage :  메모리 정보
  4. Memory use over time:  메모리 감시로 생각이 되며, 메모리 오래점유한 것을 확인가능할 것 같다.
  5. Graphic state : 그래픽 관련 정보 

   https://developer.android.com/studio/profile/am-sysinfo.html




4.2. 확인방법

System information->Active Manager의 에서 현재 돌아가는 프로그램을 알고, 이를 이용하여
많은 정보 중에 필터링을 하여 확인을 하면 보다 쉽게 확인 가능 할 것 같다.

사실 ERROR 정보가 계속 저장이 되어야 확인이 가능할 것 같은데 그 방법은 아직 찾지를 못했다.

어찌 되었든 2번 방법과 3번방법은 도움이 되겠지만 4번은 크게 도움이 되지 않을 것 같다. 에러가 지속적으로 날 경우 그 때를 대비해서
확인을 하는 것이며, 위와 같이 추후 문제가 다시 발생할 경우 파악을 해보겠다.

참고로, 갤럭시노트5 의 스피커문제로 요즘 짜증이 많이 난 상태이며, 알람 동작및 벨소리가 동작이 안되니,
기상이 좀 힘들고 , 알람시계까지 사야하나 생각 중이다. 추후 시간이 나면 좀 더 진행방법을 강구해보겠다.


5. 갤럭시 노트5 내부에서 문제원인 분석  

현재 4번 방법보다, 핸드폰 내부에서 원인을 찾는 방법으로 생각하기로 변경을 하였으며,
그 방법으로 최근 App가 업데이트 된 날짜를 알수 있는 방법 알아 내기로 하였다.

5.1 폰의 각종 정보 얻기 

APP의 업데이트된 날짜 정보를 알아내기가 힘들어 우연히 알게 되었는데, ES 탐색기를 이용하면,
쉽게 알수 있게 되었다.

   http://android.stackexchange.com/questions/38973/how-to-list-my-recently-updated-apps

    
    A. App 업데이트 된 날짜 정보 알아내기 
  1. ES 파일 탐색기->라이브러리->APP
  2. 보기 설정을 변경 (작은정보 와 시간 정보 변경)
  3. 아래와 같이 최근 업데이트된 APP 정보 확인 가능 



    B. 통화기록 분석 

     나의 벨소리가 동작되지 않은 시간을 확인하기 위해 아래와 같이 분석.
     통화기록분석관리 및 녹음 , 후스콜 App으로 나의 통화기록을 전부 확인
 
    C. 문제발생상황 정리 
    문제 발생일은 7월 20일 저녁부터 벨소리가 갑자기 동작이 되지 않았으며, 오전에는 동작확인을 하였고,
    문제 발생하기 전에 나는 전화기를 사용하지 않은 것으로 기억하고 있다. 왜냐하면 STM관련 부분을
    노트북으로 일을 하고 있어서, 전화기는 지속적으로 절전모드로 유지하고 있었기 때문이다.
    그리고 7월 20일 오후부터 전화기의 벨소리가 갑자기 동작이 되지 않았고, 이후 전화기 기본 동작이 되었지만,
    스피커 기능은 되지 않았다. 그래서 전원리셋을 했으나, 핸드폰이 지속적으로 멈추는 현상까지 발생 하였다.


결론은 삼성 결제 App하고 다른 App이 문제가 있을 거라고 생각하고, 이 것이 문제를 일으키는 것으로 추측


5.2  설정-> 개발자 옵션 확인 사항 

다시 문제가 다시 발생할 경우 USB 디버깅을 ON을 유지.

  • 버그 보고서 작성 기능을 사용가능 
이를 확인해보니, 디버깅내용을 메일로 전송 가능, 추후 이를 이용하면 될 것 같다.

  • 실행 중인 서비스 (App Service 확인)
 현재 돌아가는 서비스 중 음성 관련된 프로그램을 확인 (유력한 Apps 추측)
 관련프로그램 삭제 및 서비스 미동작으로 변경
  1. Samsung Pay
  2. 정글플레이어
  3. Pooq 
  4. Voice Recorder
  5. 알송 



5.3 다른 문제의 가능성 

현재 문제상황 보면 거의 핸드폰을 사용하지 않을 때 발생하며 이 때 삼성 App가 자동 Update가 된다.
하지만, 핸드폰의 절전모드의 상태도 고려를 하게되면, 이 문제도 있을 것 같은데,

결론,  오늘 다시 이문제가 다시 또 일어났는데,  이 일에 쓸데없이 시간을 너무 많이 소비한 것 같아,
결국 AS 센터에서 7월 26일 공장 초기화하고, 자동업데이트 설정으로 한 다음, 기본 프로그램만 설정한 후
추후 이 문제가 다시 발생하는지로 상황을 지켜보기로 했으며, 아직까지는 문제 없이 사용중이다.
젠장 하단 스피커....

공장초기화 하고, 기본프로그램 이외 아래의 프로그램을 설치하였는데 7월 28일 또 발생하였고, 좀 전에 AS 받고 난 후
동작 되었는데,  저녁 먹은 후 또 발생
  • ES탐색기
  • ES관리프로그램 ( AS 받기전에 지움)
  • 네이버 지도
  • 네이버 부동산
  • 국토교통부실거래가.
  • 지하철노선도 
  • 서울버스
  • 후스콜
  • 통화녹음기 
  • MX 플레이어 
  • 카카오톡 
  • 쿠팡 
  • 쏠캘린더
  • 클라우드 (네이버, Dropbox, Gdrive, TCloud)  (One Drive 기본설치)
  • English Central   ( AS 받기전에 지움 ) 
  • 무료 영어관련 프로그램 ( AS 받기전에 지움)
  • 구글프로그램 (KEEP, 캘린더 본인 설치)
삼성 갤럭시 노트 5의 스피커 구성을 자세히 보니, 2개로 구성이 된것 같다.
아래의 하단부와 상단의 전화기용을 위한 스피커 , 정확하게 하단부의 스피커가 동작이 안된다.
이어폰을 넣으면 소리는 동작이 된다. 하지만 최근부터 이 현상이 발생하고 전원을 리셋하면 멈춘다. 

예전에는 그런 현상이 없었고, 리셋하면 정상으로 돌아왔는데 오늘 삼성 AS 센터에서 이제 드디어 보드교체 허락을 받았으며 문제해결이 되었다.

7/22/2016

Google Blog 관리 (Blogspot) - Google API 간단히정리

Google에서는 여러 종류의 API를 제공을 하고 있으며, 너무 많아 이해하기도 힘이 들다.
그래서 Index로 찾아 사용하는 방법을 알아야 겠다.
  • Google API Service Index 
    아래의 사이트에서 Google API를 찾아보자
    https://developers.google.com/apis-explorer/#p/


1. Blogger API 예제 

예를 들면 Blogger API 관련 부분을 보면 Blog를 맘대로 조절을 할수가 있다.다만, 이것을 사용하기 위해서는 조건이 있다.
KEY가 필요하며, BlogID를 알아야 하며, 알기는 쉽다. 본인이 로그를 하면 상단주소에 BlogID를 확인 가능하다.

  https://developers.google.com/apis-explorer/#p/blogger/v3/


  • KEY의 생성부분 관련 설명 참조 사이트 
  https://developers.google.com/places/android-api/signup?hl=ko
  http://sijoo.tistory.com/74


  • API Key의 생성을 위해 Project 생성 
    300 Credit이 제공이 되어 60까지 무료로 된다고 한다 그래서 본인은 포기
  https://console.developers.google.com/apis/library


만약 프로젝트가 생성이 되면, 외부에서 나의 Blogspot을 맘대로 지우고 보고 있을 것 같다.
물론 API KEY가 존재하면 그렇게 될거 같다.


  • KEY 없이 TEST만 하는 방법 
    아래의 API는 blog의 post의 list 정보를 가져오는 것이다.
  https://developers.google.com/apis-explorer/#p/blogger/v3/blogger.posts.list

    위 사이트를 가면 BlogId를 넣으라고 나오며 이를 넣고 실행을 하면 기본동작을 확인가능하다.
    이외 옵션을 넣고 동작확인이 가능하다.


  • BlogID 란 
    Google 내부에서 사용하는 ID로 처음에 나의 ID으로 착각했는데, 아니며 검색을 해도, 물어보라는식이였다.
    하지만, 쉽게 알아내는 방법은 알아냈다. 로그인을 한 후 게시판글을 수정을 하거나 글을 쓰면, 자신의 BlogID와 Post ID를
    상위 주소에서 쉽게 확인이 가능하며, 전체게시판을 가면 상위 주소도 확인가능하다.



  • 본인도 아직 이해를 못한 상태이며, 아래 사이트 Link만
  https://developers.google.com/blogger/docs/2.0/developers_guide_protocol
  https://developers.google.com/blogger/docs/gadgets/gadgets_for_blogger
  https://developers.google.com/gadgets/docs/basic


2. Gdrive API 예제 

  • Gdrive API
  https://developers.google.com/apis-explorer/#p/drive/v3/

  • 로그인을 했다면, 쉽게 본인의 gdrive의 list를 확인 가능하고 동작확인 가능 
  https://developers.google.com/apis-explorer/#p/drive/v3/drive.files.list

사실 나에게는 다 필요는 없는거 같지만, 기본지식을 알아 두고만 있고, 추후 APP을 만든다면,  그때
다시 생각을 해보기로 했다.


3. Google Apps script

Google에서는 Web Interface로 다양한 Apps을 제공을 해주고 있다. 예를 들면, Doc, Sheets 기타등등
이 안에서 이 App의 Form을 변경하거나, Doc 안에서 Script를 넣어 동작시킬 수 있다고한다.
이 Script은 추후 편이성을 위해서 많이 이용될 것 같다.
  • Google Apps API
  https://developers.google.com/apps-script/overview

7/21/2016

Google Blog 관리 (Blogspot) - Post & Page 관리

글을 쓰다보면, 여러 차트나 Table을 간혹 사용할 필요가 있다. 그런데 Table도 그렇고 매번 Chart도 그렇고 사용하기 힘들다.
그래서 Google에서 제공하는 Chart와 Table이용하여 넣어보자.
API 형식으로 제공을 되기에 여기에 맞게 넣어야 한다.

1.  글 쓰는 기본규칙 

최근에 Post의 글을 다시 읽어 보면 제목이 이미 있기에 글의 처음의 제목의 필요성이 없다고 판단이 든다.
그래서 아래와 같은 간단한 규칙을 정하고 이를 지켜가며 글을 쓰기로 하였다.

  1. Post의 제목 존재 하므로, 가급적  바로 밑에 Post 안의 제목을 사용하지 말자. 
  2. Post의 제목 밑에는 가볍게 이 글의 목적을 서술하도록 노력하자. 
  3. Post의 제목의 크기는 전부 동일하게 유지- "크게" : large 가 적당.
  4. Post 안의 제목은 1.1 .1.2 or 2.   (1.1.1) 이런식으로만  Numbering  글게시 

2. Table이 나 Chart가 필요할 경우 
  • Google Chart API Main
    https://developers.google.com/chart/

  • 다양한 Example을 제공.
    https://developers.google.com/chart/interactive/docs/examples


구글 Chart API를 사용하여 쉽게 Post에 적용하기.
본인은 주로 Table만 사용을 한다. 상위 사이트를 가면 Google Chart API는 사용하기가 쉽다.





3. 기타사항 

Blogspot은 Post와 Page로 구분하여 제공을하는데, Post는 Labe기능을 제공을 하지만,
Page는 기능을 Label을 제공하지 않는다. 그래서 나는 주로 Post에 글을 쓰고 올린다.

아래의 글을 읽어보면 Page는 너무 많은 제약이 있다. 시간표시도 그렇고, Label도 그렇고,
정확한 사용용도가 무엇인지를 아직 잘 모르겠다.

생각하기로는 Post 처럼 자주 올리는 글이 아니라, Blog 독자에게 알리는 글인것 같다.
아래 사이트에 가면, 이외에도 다양한 bogspot의 기본적인 Post와 Page 사용법이 나온다.

  • 게시물 ( Post) 와 페이지 ( Page) 차이 
   http://blogger-hints-and-tips.blogspot.kr/2010/02/difference-between-pages-and-posts.html


  • Page 게시물 가젯 

   http://blogger-hints-and-tips.blogspot.kr/2012/01/page-gadget-menu-bar-for-your-blog-with.html



7/20/2016

Google Blog HTML 편집 및 Gadget 관리

1. HTML 편집 및 Gadget 관리 및 수정

Blogspot을 이용하다 보면 기본템플릿 변경으로 본인이 원하는 디자인을 가지기는 힘들며, 이런 부분을 본인이 수정하기 위해서
기본적인 HTML 지식과 Java script 지식 및 Gadget을 Control 할수 있는 방법을 알아야 겠다.


  • 디자인->레이아웃의 기본기능 
  1. 레이아웃을 가면 본인이 원하는 가젯을 맘대로 추가 가능하다. 
  2. 이 Gadget을 Script로 Control을 할수가 있고, 변경도 가능하다. 

  • 기본적으로 알아야 Web 지식들
  1. Style Tag 설정방법 (CSS 관련 지식) 
  2. Javascript 관련내용 
  3. Gadget을 설정 및 Control 하는 방법 
  4. Google Ajax API도 이용하고 있지만, Manual 필요함  

본인도 Web 개발자가 아니다 보니, 솔직히 많은 것을 잘모르지만, 자신의 블로그 수정정도는 몇시간 공부하면 쉽게 터득이 가능한 것 같다.


  • 디자인 세부수정방법 
본인이 가장 좋아하는 템플릿을 설정 한 후,  HTML편집과 레이아웃에서 Gadget을 설정을하여 아래와 같이 같이 수정을 하자

A. 디자인->템플릿->HTML 편집 수정 

  1. HEAD 태그 안에 Javascript / Ajax 추가 연동하여 Event 식으로 동작    
  2. HEAD 태그 안에 Gadget 의 디자인 변경 ( STYLE 태그,  Background Image 추가 )
  3. HEAD 태그 안에 다른 Style 태그 추가 ( 제목 / 일반 글 / 기타 등등)
  4. HEAD 태그 안에 소스관리 Javascript 기능추가 
  5. Gadget (widget 태그 부분 수정도 가능)

B. 디자인->레이아웃 수정
  1. 특정 Gadget 추가  ( HTML 및 Java script 추가 가능 및 연결) 
  2. 일반 Gadget 추가 및 세부 설정 변경 


1.1 STYLE TAG or CSS의 기본지식 

Style Tag와 CSS를 주로 보면, 원래의 디자인에서 좀 더 이쁜 디자인을 변경하기 위해서 많이 사용이 되어진다.
그래서 본인의 블로그의 디자인을 바꾸고 싶다면 최소한으로 알아야 할 지식이며, 쉽게 설정이 가능하다.

아래의 설정들을 HTML 편집에서 head 태그안에 넣어 주자
  • STYLE TAG 안의 주석
      HTML의 주석은 <!--   ..... --> 이지만  STYLE TAG의 주석은 C처럼 /*  */ 사용한다.

  • HTML 내에 특수문자 사용
   < > 빈칸 , 및 특수기호
  http://egloos.zum.com/keep/v/1030642

   특수문자 사용시 "&#" 다음에 숫자를 넣으면 된다.
  http://www.w3schools.com/charsets/ref_utf_geometric.asp


  • 소스표현 및 문제사항 
현재 이 post의 HTML 소스표현은 SyntaxHighlighter를 이용하여 표현하고 있으며, 만약 소스가 제대로 나오지 않는다면 https의 보안부분 확인하자
 
  http://alexgorbatchev.com/SyntaxHighlighter/

  • STYLE TAG의 기본예제 
STYLE에서는 기본적으로 CLASS로 설정하거나, ID로 설정한다.
(아래소스는 SyntaxHighlighter 기반이므로 링크가 끊기면 제대로 안나옴)

 style

/* 기본 CLASS 사용법   */
.Label {
    padding: 2px 0px 0px 5px;
    margin: 0px 0px 0px 0px;
}

/* Label Class안의 .widget-content에 적용  */

.Label .widget-content {
    display: none;
}

.BlogArchive .widget-content {
    display: none;
}

/* ID Setting */
#BlogArchive1 {
    margin: 10px 0px 0px 0px;
    padding: 5px 0px 0px 5px;
    border: 1px solid gray;

    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    border-bottom-style:solid;
 
    border-top-left-radius:1em;
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
    border-bottom-left-radius:1em;
} 


#Label1 {
    margin: 10px 0px 0px 0px;
    padding: 5px 0px 0px 5px;

    border: 1px solid gray;

    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    border-bottom-style:solid;

    border-top-left-radius:1em;
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
    border-bottom-left-radius:1em;
} 

/style



  • CSS의 display  관련설명
style tag안에서 필요없는 부분을 감추고, 스타일을 변경할 필요가 상당히 많은데,
그럴때 사용하는 것이 display 이며 이는 javascript과 같이 연동구현가능.

  http://aboooks.tistory.com/85
  http://ko.learnlayout.com/inline-block.html

  • w3schoools 관련
정말 TEST하기 좋은 사이트 인것 같다, 내부적으로 TEST도 제공을 해준다.
Javascirpt 예제도 제공을 해준다.

  http://www.w3schools.com/cssref/default.asp
  http://www.w3schools.com/css/css_display_visibility.asp



1.2 Javascript 의 기본지식 및 예제 

본인도 Javascirpt을 잘 모르기에, 간단하게 적용하는 방법만 서술하며, onclick은 div에서도 사용가능하며 여러 tag 안에서 사용가능(아래 소스 참고)






위는 Javscript 로 ID를 얻어 STYLE TAG를 Control하는 것이다.


  • ID와 CLASS , TAG를 이용한 예제
  http://xahlee.info/js/js_get_elements.html
  http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
  http://www.w3schools.com/jsref/met_document_getelementbyid.asp

본인도, Javascript을 잘 모르지만, Google을 통해 원하는 기능을 검색을 하면 풍부한 예제가 있기에, 어렵지 않게 구현하리라고 본다.


1.3 Blog에서 작은 Image 및 ICON 만드는 법 

GIF/JPG/기타 등등 의 Image 파일 없이 쉽게 문자로만 Image를 만들수가 있다.

  • ICON을 쉽게 만드는 법   
URL 중에 data:image/png 이런구조로된 것이 궁금하여 검색했는데, 아래 사이트에서 해답을 얻었다.
위 방식으로 할 경우, 그림파일을 문자로 base64로 Encoding하여 보여주며, 별도의 그림파일은 필요없고, 문자정보만 있으면 된다.
해상도가 낮으면 빠른 로딩을 가능하나, 버전이 낮은 브라우저는 지원이 불가능 (자세한 설명은 아래 사이트 참조)

  http://dataurl.net/#about

  • Image 변환 과 사용법  
아래 사이트는 자신의 이미지를 사이트에 올리면, BASE64 이미지로 Encoding 을 해 주며,
Encoding Data를 상위 data:image/png와 함께 선언해서 사용하면된다.


  http://www.askapache.com/online-tools/base64-image-converter/
  https://www.base64-image.de/

Gdrive를 이용하여, 공유->Webhost로 가능했을 것 같은데, 앞으로 이 기능도 제한된다고 다른 대안으로 찾은 방법이다.
Gdrive는 현재 나의 경우는 Webhost는 실패해서 이 방법을 포기하고, 사실 큰 이미지의 필요성이 없다. (현재 이방법만 사용중)

  • SVG(Scalable Vector Graphics) Image
wiki의 그림을 보면 대부분 이 Type로 되어있어 처음 매우 궁금했는데, 벡터기반으로 Image를 만든다고 한다.

  https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4

최근 SVG을 이용하여 Javascript을 이용한 hover기능 및 간단한 애니메이션 효과 등을 보고, SVG의 많은 관심을 가지게 되었다.

  https://svgontheweb.com/ko/


1.4 기타 다른 사이트의 CSS 구현방법 

검색을 통해 아래의 사이트 알게 되었으며, STYLE TAG을 제공을 하고 있다.

  http://allinworld99.blogspot.kr/2015/01/blogger-label-widget-blogger-label.html
  http://www.netoopsblog.com/2013/08/custom-labels-widgets-stylish-cool-effects.html


2. Gadget의 기본이해 

  • 레이아웃의 Gadget 이란?
Gadget이란, 구글 블로그는 블로그 안에 각 기능을 추가하기 쉽게 Gadget 형태로 각 기능을 가진 모듈로 레이아웃에서 제공한다.


  • HTML 편집에서의 Gadget (widget)
HTML 편집에서 Gadget의 구성을 자세히 살펴보면 b:widget 태그로 구성이 되어 있으며, 이는 id와 각각의 설정(widget-setting) 을 제공한다.
그리고, 세부조절을 위해서 widget 태그 내부에  div 태그로 다시 한번 포장이 되어있어 이를  변경이 되어 있어, style 태그 or  Javascript 와 연결시켜 제어 및 디자인을 변경이 가능하다.

b:widget             // Gadget 시작 id 확인 가능 , style 태그 적용

b:widget-setting   // 설정 부분

        b:includable id='main'   // Gadget Body 구성

            보통 div 태그와 같이 연동 없으면 추가  :  style 태그 와 javascript 연동 가능

            b: 로 구성된 script로 구성이 됨            :  자체 script 제공                

        b:includable

b:widget             // Gadget   종료


div 태그가 없다면 추가 하여 넣어도 좋고, 본인의 맘대로 구성을 하여도 좋다.
내가 보기에는 중요한 것은 id를 넣어 줄 수 있는 태그의 구성인 것 같다.
id를 이용하여 style을 적용하고, 또한 다른 태그 id를 이용하여 부분적으로 Javascript과 연동하여 세부조절도 가능하다.

동적으로 하지 않을 거라면, style 태그 설정은 Head 태그 안에서 모두 처리를 하자.

  • Gadget Module의 기본 이해 
  레이아웃용 페이지 요소 태그 설명
  https://support.google.com/blogger/answer/46888?hl=ko

 레이아웃용 widget 태그 설명
  https://support.google.com/blogger/answer/46995


3. Gadget의 HTML 편집 방법


템플릿->HTML편집 에서 간단히 TEST Program을 만들어 보자.
HTML편집에서는 Gadget을 widget이라고 하겠으며, 이를 다음과 같이 수정을 해보자.

  • widget의 style을 개별 적용  
아래소스에서 style tag 안에 widget의 id name을 알아서 그에 맞게 widget의 디자인을 변경을 해보자.
#Label1,2,3은 내가 강제로 추가한 widget id name이며 이의 Style을 변경을 하자.(아래소스참고)



...

가젯 즉 widget의 구성 

 
 ..
 
....





  • widget 과 javascript 적용 
아래 소스에서 widget에 이제 Javascript를 적용하기 위해서 div에 id (LabelCon)를 강제로 부여하고 , 각각의 필요한 부분을 수정한다.









  
    


....
.....


  • 구글 Jquery 적용 및 블로그 메뉴 변경  
구글의 Jquery을 이용하여 widget을 control 해보고, style 태그과 함께 같이 수정했으며, widget의 margin control은 원래 Google 사이트와 비교하여,
블로그 디자인을 변경하였다. Google 사이트 소스분석이 너무 많아 필요한 부분만 일단 내 블로그에 적용하여 맞게 구현을 하였다.
만약 아래의 소스가 라인별로 숫자와 함께 보이지 않는다면, https의 지원문제로 이부분 보안을 해제해주자. 




/* Side bar Margin Control    */

#sidebar-right-1 {
margin:  5px 0px 0px   5px;
padding: 5px 10px 20px 5px;

}

#CustomSearch1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}

#Label1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}

#BlogArchive1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;

border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}

#Translate1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;

border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;

}

#Stats1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;

}

/* Lable and BlogArhive display    */

.Label .widget-content {
    display: none;
}


.BlogArchive .widget-content {
    display: none;
}

/* Lable and BlogArhive Title setting     */

.BlogArchive h2, .Label h2 {
        text-decoration: none;
        display: inline-block;
}

.BlogArchive h2:focus, .BlogArchive h2:hover, .Label h2:focus, .Label h2:hover {
        text-decoration: underline;
        cursor: pointer;
}


  • Jquery의 Sibling의 함수 사용법

sibling이란 목록을 제어하는 기능인 것 같은데, 위에서는 목록을 슬라이딩 효과를 보여주기 위해서 사용했다.

    https://api.jquery.com/siblings/
    http://api.jquery.com/slidetoggle/

사이트는 본인인 수정하고 편집하기 나름인 것 같다. 수정하기 전에 괜찮은 사이트를 찾아
분석한 후 이를 수정을 하면 내가 보기에는 쉬운 것 같다.
다만 시간이 들어갈 뿐이지만.

7/17/2016

STM32F10x Dev Tools (CoIDE)

1. STM32 MPU Dev Tools

저의 경우는 처음부터 어쩔 수 없이 IAR Program을 사용하게 되었지만, STM32F103C8 MPU를 쓰면서
관련된 다른 Tool 들을 찾아보고 알아보기로했다. 왜냐하면 Github에서 *.coproj로 많이들 이용을 하여,
OpenSource기반을 Tool 이 있다는 것을 알게 되었다.


  • MPU: STM32F103C8T6


1.1 CoIDE Program

OpenSouce이며, Eclipse 기반의 Tool로 많이 STM 개발자들이 가장 많이 사용하는 Tool인 것 같다.
무료로 사용이 가능하며 Github에서 이 프로그램 기반으로 많이 개발이 되었으며, 이 Tool안에서도,
손쉽게 STM32 관련 Interface program을 구성할 수 있다.
STM 뿐만 아니라 다양한 MPU들을 지원을 해준다.

  • Download 
    http://www.st.com/content/st_com/en/products/development-tools/software-development-tools/stm32-software-development-tools/stm32-ides/coide.html


1.2 Eclipse

기본의 Eclipse의 CDT(C/C++ Development Tooling) 기반에 GCC 설치하고 이를 연결하여, 개발하는 방식인 것 같다.
ST Link V2는 외부 Tool로 연결하여,  설정이 상당히 복잡하다.
사실 이 방식보다는 위의 CoIDE가 간편하고 사용하기가 편하다.

  • 자세한 설명
    http://www.jkelec.co.kr/img/lecture/stm32_eclipse/stm32_eclipse.html


1.2 IAR Embeded WorkBench IDE Program

처음부터 이 Program을 사용하게 되었으며 사용하기도 간편하며, MPU Check 부터 Source Download가 쉽다.
하지만, Opensource가 아니며, IAR이라는 회사에서 제작이되고 보니 주로 유료로 사용해야하는 것 같다.
STM 뿐만 아니라 다양한 MPU들을 지원을 해준다.

사용방법도 너무 쉽기때문에, 별다른 메뉴얼이 필요 없을 것 같다.

  • MPU 지원여부 Check
    https://www.iar.com/iar-embedded-workbench/partners/stmicroelectronics/
    https://www.iar.com/kr/iar-embedded-workbench2/?focus=wbselector#!?amp%3Barchitecture=ARM&architecture=


  • STM32F103C8T6 인 경우
    https://www.iar.com/kr/iar-embedded-workbench2/?focus=wbselector#!?device=STM32F103C8&architecture=ARM


  • IAR WARM 관련내용 링크들 

    http://www.epnc.co.kr/news/articleView.html?idxno=69706

2. CoIDE

현재 저의 관심은 CoIDE이며, 지금 현재 CoIDE는 Version 문제로 약간 문제가 있다.
Version2로 가면서 많이 변경이 되면서, 기존에 지원되는 것이 지원이 안되고, 불안한 상태이지만,
Version2로 가면서, *.coproj 이외, 문서기능 기본저장으로 파일구조도 풍부한 기능을 제공하는 것 같다. 그리고 약간 변경이 된것 같다.
  • CoIDE 1.7.8          (이 Version으로 현재 선택해서 사용중)
  • CoIDEV2 Beta       (TEST 해보니, 아직 불안함)

2.1 MPU Check 및 Download 

Version2로 가면서, GUI Interface가 더 쉽게 변하였으며, 사용하기도 더 편하다.
다만 기존에 제공하던 기능이 잘 지원이 안된다. Beta Version이라서 그런 것 같다.

  • 본인의 MPU가 이 Tool이 지원되는지 확인
    http://www.coocox.org/book/coocox/coide-dev-manual/2-Introduction/2.2-Support-list

  • CoIDE Download (CoSMart & CoFlash)
    http://www.coocox.org/software.html


2.2 GCC Download 및 설치 & 설정 

CoIDE에서 너무쉽게 설명을 해주고 있다.
GCC를 Download를 한 다음 PATH를 연결하면된다.

    http://www.coocox.org/book/coocox/coide-dev-manual/1-Quickstart/1.2-Compiler-Setting


  • 현재사용중인 GCC

    https://launchpad.net/gcc-arm-embedded/+download

    gcc-arm-none-eabi-5_4-2016q2-20160622-win32.exe


2.3 CoIDE 의 Project 생성 및 설정

처음 이 Tool을 사용하면서 최근에 왜 STM을 많이 사용하는지를 알게되었다.
손쉽게 MPU Interface들을 구성을 할 수 있다.
기존에 구현해 놓은 Interface API를 유저가 추가하는 방식으로 선택만 하면된다.


   1. Project->New Project를 할 경우, user default path를 해제하고 본인원하는 PATH에 저장한다.


   2. 본인이 원하는 Chip을 선택하거나, 이 곳에서 지원하는 Board가 있다면 Board를 선택하자.


   3.  나의 경우는 CHIP을 선택 한 후  ST 다음 본인의 MPU를 선택하고 Finish 를 한다.




   4.  아래의 와 같이 Repository에서 사용가능한 Components를 확인가능하다. 
       이 곳에서 본인이 원하는 Interface API 및 Code를 구축하여 넣어 보자.  


  • CoIDE V2 메뉴얼 
    http://www.coocox.org/book/coocox/coide-dev-manual.en/01-Getting-Started/01.02-Getting-Started

  • 이제 Repository 메뉴에서 본인 필요한 Components을 선택해서 넣자. 
        다만 선택시 오른쪽 Help의 Dependency 확인하고 선택하자.
     

2.4 Repository 의 Components 선택 및 추가

아래의 Component는 거의 필수로 사용이 되어 질것이기 때문에 간단히 설명을 하겠다.

A. COMMON
  • Retarget printf:        Implementation of printf(), sprintf()
  • CMSIS core:           CMSIS core for Cortex M3 V3.01

1. printf는 별로 좋은거 같지가 않다. 추후 다른것으로 교체를 해보던지, 다른 예제를 참조하여
  다시 해보도록 해보겠다. (시간이 있다면)

2. ARM에서 제공하는 CMSIS CORE 란 (Cortex Microcontroller Software Interface Standard)으로 Cortex-M을 위해 사용되어지며, 거의 필수적인 모듈이다.
사용되는 목적은 호환성이다.

아래와 같이 CMSIS-CORE는 우리가 사용하는 Application Code 아래에서 돌아가며,
CPU 및 NVIC(Nested Vectored Interrrupt Contoller), Debug 및 각종 Peripheral와 연결해주고 있다.

IAR Dev Tool에서도 이 Interface를 사용하며, 다른 Interface 역시 거의 모두 동일하다.
IAR Dev Tool 사용을 하여도, 쉽게 CoIDE에 적용이 가능하고 둘다 쉽게 호환이 가능하다.


  • 참고사항 
    아래와 같이 CMSIS 관련부분을 제공하고 있다. 하지만 우리는 CORE만 사용한다.
  1. CMSIS-CORE
  2. CMSIS-Driver
  3. CMSIS-DSP
  4. CMSIS-RTOS API
  5. CMSIS-Pack
  6. CMSIS-SVD
  7. CMSIS-DAP

     자세한 내용은 아래의 사이트에서 확인
    http://www.arm.com/products/processors/cortex-m/cortex-microcontroller-software-interface-standard.php


B. BOOT

  • CMSIS Boot: CMSIS boot for STM32
    이는 Boot에 관련된 부분 Clock 및 Start Up Code가 이곳에 포함이 된다.

C. PERIPHERAL ST

이제 사용하고 싶은 Peripheral들을 선택하여, 넣어 보자.
  1. RCC  :  Reset 과 Clock Control 이다.
  2. GPIO
  3. EXTI
  4. FLASH : STM에 내부에 있는 FLash Driver  //RCC 내 Flash 설정 
  5. TIM :  Timer 
  6. USART : UART  필수
  7. MISC   :  NVIC과 SysTick을 위해 사용한다. 

흥미로운 것은 이곳에서 OS까지 지원을 해준다는 것이다. 나중에 기회가 되면 사용을 해보겠다.
본인 필요하면, Repository에 가서 추후에도 추가가 가능하지만 가입이 필수.


*참고사항
CoIDE는 OS에서 제공을 하고 있는 RTOS는 CMSIS-RTOS API 사용하지 않고 별도의 Layer를 가지고,
사용하는 것 같다. 이 부분은 본인도 확인을 아직 못했다.

2.5  Main 수정을 위한 기본 이해 

  • cmsis_boot->startup->startup_stm32f10x_md.c     
reset과 Interrupt handler 이며, interrupt handler를 등록은 하지 않으면, default_handler로 동작.

  • stm_lib->inc->stm32f10x_rcc.h 
clock을 조절하기에 설정은 필수이며, 초기 PLL을 설정 한 후에는
Peripheral을 동작하기 위해서는 버스의 구조상 APB1,2 두개로 나누어져 있어 주의하자

RCC는 중요하며, 필요하지 않는 부분은 사용하지 하도록 하자.
Clock을 조절은 Power 소비하고도 밀접하다.

  • stm_lib->inc->stm32f10x_gpio.h 
이 칩은 Pinmux가 필요없으며, Pin의 상태를 직접설정을 해줘야 한다.
STM32이 이 칩은 모든 PIN이 GPIOA~E 로 구성이 되어있으며, 이는 각각의 Peripheral과 중복이 된다.
그래서 GPIO의 설정은 필수다. 
반드시 구조도와 PINMAP을 Datasheet에서 확인하자.
  1. 먼저 GPIOA~E사이의 원하는 CLOCK을 RCC로 등록하자. (APB1에 구성) 
  2. 그리고, Peripheral을 CLOCK 설정을 하자. (APB1 or APB2) 
  3. 이 후에 관련 GPIOA-E에서 필요한 PIN의 상태를 설정하자.  

    // APB2 Clock enable for USART(GPIOA9, A10)
    RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA |  RCC_APB2Periph_AFIO, ENABLE);

    /* USART2 clock enable */
    RCC_APB1PeriphClockCmd(RCC_APB1Periph_USART2, ENABLE);

    /* Configure the GPIO ports( USART2 Transmit and Receive Lines) */
    /* Configure the USART2_Tx as Alternate function Push-Pull */
    GPIO_InitStructure.GPIO_Pin = GPIO_Pin_2;
    GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz;
    GPIO_InitStructure.GPIO_Mode = GPIO_Mode_AF_PP;
    GPIO_Init(GPIOA, &GPIO_InitStructure);

    /* Configure the USART2_Rx as input floating */
    GPIO_InitStructure.GPIO_Pin = GPIO_Pin_3;
    GPIO_InitStructure.GPIO_Mode = GPIO_Mode_IN_FLOATING;
    GPIO_Init(GPIOA, &GPIO_InitStructure);

    /* Configure the USART2 */
    USART_InitStructure.USART_BaudRate = 115200;
    USART_InitStructure.USART_WordLength = USART_WordLength_8b;
    USART_InitStructure.USART_StopBits = USART_StopBits_1;
    USART_InitStructure.USART_Parity = USART_Parity_No;
    USART_InitStructure.USART_HardwareFlowControl = USART_HardwareFlowControl_None;
    USART_InitStructure.USART_Mode = USART_Mode_Rx | USART_Mode_Tx;


    기본구조도
    http://ahyuo79.blogspot.com/2016/05/stm32f103x.html
    http://www.keil.com/forum/20579/
  • weak 구현된 함수
쉽게 말하면, 내가 선언을 하지 않고 사용하면, 기존에 weak로 구현된 함수로 동작된다.
함수의 중복을 허용을 하되,  동일함수가 두 개일 경우 weak는 동작이 되지 않는다.

    http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dui0205g/CIACBCDA.html

    현재사용되는 방법은 약간 다르나, 좋은 예제이다.
    https://en.wikipedia.org/wiki/Weak_symbol

  • STM에서 제공하는 함수 DOC (Version 확인)
    http://stm32.kosyak.info/doc/


2.5  Main 수정 및 기타 UART 수정

함수과 Interface들은 쉽게 제공은 되지만, 어떻게 사용해야 할지가 궁금하거라 생각이 든다.
아래와 같이 각 Components를 선택하면, 다양한 examples들을 확인가능하며 이 Exmaples을 추가가능하다.
나의 경우는 그저 참조만 했다.

예를 들면, 부팅이 중요하니까,
  1. Componets창을 선택 
  2. Peripheal.ST->RCC 를 클릭하시면 우측에 RCC의 Examples들을 확인 . 
  3. RCC_Exp.c를 저는 참조하여, 관련부분 복사 저의 Main을 구성수정.   




  • stdio->printf 에 UART2 연결  
printf 소스를 보니, UART소스와 연결이 되지 않고, 나의 경우는 UART2를 사용해야 했기에,
아래와 같이 수정하였다.

void PrintChar(char c)
{
 USART_SendData(USART2,c);
 while (USART_GetFlagStatus(USART2, USART_FLAG_TXE)==RESET);
    return 1;
}

  • Main 수정
중요한 Clock 설정과, UART2 관련 설정
(UART2 Interrupt handler는 LED용 TEST)
만약 LED가 있다면, GPIO 설정하고 나의 경우는 입력이 오면 USART2_IRQHandler을 이용하여 LED 번갈아 가면 켜지도록하였다.
그 소스는


//CMSIS_BOOT
#include <stm32f10x.h>
#include <system_stm32f10x.h>

//STM_LIB
#include <stm32f10x_exti.h>
#include <stm32f10x_gpio.h>
#include <stm32f10x_rcc.h>
#include <stm32f10x_flash.h>
#include <stm32f10x_tim.h>
#include <stm32f10x_usart.h>

//printf
#include <stdio.h>

//NVIC
#include <misc.h>

ErrorStatus HSEStartUpStatus;

/**
  * @brief  Sets System clock frequency to 72MHz and configure HCLK, PCLK2
  *   and PCLK1 prescalers.
  * @param  None
  * @retval : None
  */
void SetSysClockTo72(void)
{
  /* RCC system reset(for debug purpose) */
  RCC_DeInit();

  /* Enable HSE */
  RCC_HSEConfig(RCC_HSE_ON);

  /* Wait till HSE is ready */
  HSEStartUpStatus = RCC_WaitForHSEStartUp();

  if(HSEStartUpStatus == SUCCESS)
  {
    /* Enable Prefetch Buffer */
    FLASH_PrefetchBufferCmd(FLASH_PrefetchBuffer_Enable);

    /* Flash 2 wait state */
    FLASH_SetLatency(FLASH_Latency_2);

    /* HCLK = SYSCLK */
    RCC_HCLKConfig(RCC_SYSCLK_Div1);

    /* PCLK2 = HCLK */
    RCC_PCLK2Config(RCC_HCLK_Div1);

    /* PCLK1 = HCLK/2 */
    RCC_PCLK1Config(RCC_HCLK_Div2);

    /* PLLCLK = 8MHz * 9 = 72 MHz */
    RCC_PLLConfig(RCC_PLLSource_HSE_Div1, RCC_PLLMul_9);

    /* Enable PLL */
    RCC_PLLCmd(ENABLE);

    /* Wait till PLL is ready */
    while(RCC_GetFlagStatus(RCC_FLAG_PLLRDY) == RESET)
    {
    }

    /* Select PLL as system clock source */
    RCC_SYSCLKConfig(RCC_SYSCLKSource_PLLCLK);

    /* Wait till PLL is used as system clock source */
    while(RCC_GetSYSCLKSource() != 0x08)
    {
    }
  }

}

void USART2_test_interrupt(void)
{
    GPIO_InitTypeDef GPIO_InitStructure;
    USART_InitTypeDef USART_InitStructure;
    NVIC_InitTypeDef NVIC_InitStructure;

    // APB2 Clock enable for USART(GPIOA9, A10)
    RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA |  RCC_APB2Periph_AFIO, ENABLE);

    /* USART2 clock enable */
    RCC_APB1PeriphClockCmd(RCC_APB1Periph_USART2, ENABLE);

    /* Enable the USART2 Interrupt */
    NVIC_InitStructure.NVIC_IRQChannel = USART2_IRQn;
    NVIC_InitStructure.NVIC_IRQChannelPreemptionPriority = 1;
    NVIC_InitStructure.NVIC_IRQChannelSubPriority = 1;
    NVIC_InitStructure.NVIC_IRQChannelCmd = ENABLE;
    NVIC_Init(&NVIC_InitStructure);

    /* Configure the GPIO ports( USART2 Transmit and Receive Lines) */
    /* Configure the USART2_Tx as Alternate function Push-Pull */
    GPIO_InitStructure.GPIO_Pin = GPIO_Pin_2;
    GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz;
    GPIO_InitStructure.GPIO_Mode = GPIO_Mode_AF_PP;
    GPIO_Init(GPIOA, &GPIO_InitStructure);

    /* Configure the USART2_Rx as input floating */
    GPIO_InitStructure.GPIO_Pin = GPIO_Pin_3;
    GPIO_InitStructure.GPIO_Mode = GPIO_Mode_IN_FLOATING;
    GPIO_Init(GPIOA, &GPIO_InitStructure);

    /* Configure the USART2 */
    USART_InitStructure.USART_BaudRate = 115200;
    USART_InitStructure.USART_WordLength = USART_WordLength_8b;
    USART_InitStructure.USART_StopBits = USART_StopBits_1;
    USART_InitStructure.USART_Parity = USART_Parity_No;
    USART_InitStructure.USART_HardwareFlowControl = USART_HardwareFlowControl_None;
    USART_InitStructure.USART_Mode = USART_Mode_Rx | USART_Mode_Tx;

    USART_Init(USART2, &USART_InitStructure);

    // Rx Not empty interrupt enable
    USART_ITConfig(USART2, USART_IT_RXNE, ENABLE);

    /* Enable the USART2 */
    USART_Cmd(USART2, ENABLE);

}

void USART2_IRQHandler(void)
{
    char receive_data;
    int i;

    if(USART_GetITStatus(USART2, USART_IT_RXNE) != RESET)
    {
        receive_data = USART_ReceiveData(USART2) & 0xFF;

        for(i=0; i< 10; i++)
        {
            USART_SendData(USART2, receive_data);
            while(USART_GetFlagStatus(USART2, USART_FLAG_TXE) == RESET );
        }

        USART_ClearITPendingBit(USART2, USART_IT_RXNE);

    }
}



int main(void)
{

    SetSysClockTo72();
    USART2_test_interrupt();

    while(1)
    {

     printf("hello world \n\r");

    }
}


  • 추가 TEST용 Program 

//아래와 같이 설정하시려면, 먼저 CLock과 GPIO설정을 따로 해야한다. 

#define LED_BLUE           GPIO_Pin_12  // PB6
#define LED_BLUE_ON   GPIOB->BSRR=LED_BLUE // ON
#define LED_BLUE_OFF   GPIOB->BRR=LED_BLUE // OFF
#define LED_BLUE_CHK            (GPIOB ->IDR & LED_BLUE)

#define LED_GREEN         GPIO_Pin_13  // PB6
#define LED_GREEN_ON  GPIOB->BSRR=LED_GREEN // ON
#define LED_GREEN_OFF   GPIOB->BRR=LED_GREEN // OFF
#define LED_GREEN_CHK           (GPIOB ->IDR & LED_GREEN)

#define LED_RED                 GPIO_Pin_14  // PB6
#define LED_RED_ON   GPIOB->BSRR=LED_RED // ON
#define LED_RED_OFF         GPIOB->BRR=LED_RED // OFF
#define LED_RED_CHK         (GPIOB ->IDR & LED_RED)

// Interrupt handler에 아래와 같이 추가 

        if(LED_BLUE_CHK){
         LED_BLUE_OFF;
         LED_GREEN_ON;
     }else {
      LED_GREEN_OFF;
                LED_BLUE_ON;
  }



위 Test Program은 printf 부분을 더 수정해야 할 것 같고, 말 그대로 Test program이다
Printf는 동작이 되나, linefeed와 carriage return를 넣어야한다.
나는 운이 좋게 한번에 동작이 되었고, 너무 쉽게 연결이 가능했다. 너무 편한 Interface 인 것 같다.
Interrupt handler도 등록하면 사용이 쉽고, 다른 Interface이도 무리없이 사용가능할 것 같다.


2.6 ST-LINK/V2 연결 및 확인 

나의 경우는 Start Debug 및 Download 기능 ST-Link이 문제가 없었고 디버그도 잘 동작하였다.
아마 이미 ST-Link USB Driver가 설치가 되어서 있어 동작이 잘된 것 같다.
만약 동작이 되지 않는다면 Driver를 설치하시기 바란다.

    http://www.st.com/content/st_com/en/products/development-tools/hardware-development-tools/development-tool-hardware-for-mcus/debug-hardware-for-mcus/debug-hardware-for-stm32-mcus/st-link-v2.html


2.7 CoIDE의 장점

  • 개발의 용이성의 장점 
  1. 무료이며, 사용하기 쉬운 Interface 제공 
  2. Repsotitory 창에서 무료 Component 형식으로 손쉽게 Source 및 Driver 등 추가가능
  3. Comonents 창에서 무료 Example 제공 

  • 개발시 소스 분석 및 Debugging 의 장점
  1. JTAG을 이용한 손쉬운 Debugging  제공  
  2. Source Insight 과 유사한 기능 제공
  3. Open Declaration  : 정의된 함수로 이동
  4. Open Call Hierarchy : 함수 구조도 파악용이
  5. Quick OutLine:  구현된함수의 Outline을 보여준다.  

이외에도 많은 기능을 제공을 하지만, 완벽히 동작되지 않는 기능도 있으니 본인이 파악해서 사용하는게 좋겠다.


Eclipse 기반의 Tool이기에 아래의 설명에서 이용법을 찾자.
    http://help.eclipse.org/mars/index.jsp


단점은 Tool의 안정성인 것 같다.


3. STM 관련 Examples

Google에서 STM examples을 치면 많이 나오고, 검색을 하면 상당하며, github에도 많은 프로젝트가 진행이
되고 있어 본인이 관심이 있다면, 찾기가 쉬울 것 같다.
다만 Examples의 검증들과 확인과 포팅이 중요할 것 같다.


3.1 STM SITE에서 제공해주는 Example

STM에 가서 직접 찾아보고 문서를 보기위해서, 다양하게 검색을 해본 결과, STM은 문서와 Software를 많이 제공을 하는것 같으며,
본인도, 이 프로그램들을 다 Download를 해보지 못했다.다만 이렇게 사용을 하면 되겠구나, 알뿐이다.

  • SOFTWARE DEVELOPMENT TOOLS
    http://www.st.com/content/st_com/en/products/microcontrollers/stm32-32-bit-arm-cortex-mcus/stm32f1-series/stm32f103/stm32f103c8.html


  • STM32 Embedded Software 
    http://www.st.com/content/st_com/en/products/embedded-software/mcus-embedded-software/stm32-embedded-software.html?querycriteria=productId=SC961


  • STM32Cube Embedded Software  
    http://www.st.com/content/st_com/en/products/embedded-software/mcus-embedded-software/stm32-embedded-software/stm32cube-embedded-software.html?querycriteria=productId=LN1897


3.2 이외  Example


  • 기본설명과 예제를 제공
    UART예제는 이곳에서 참조.
    http://www.jkelec.co.kr/img/lecture/cortex_app/cortex_app_3.html

  • 다양한 Example을 제공을 해줘서 참고하기가 좋았다.
    http://nexp.tistory.com/474

  • Main을 찾지못했고, 그냥 추후 Peripheral이 없을 경우만 봐야할 것 같다.
    http://www.micro4you.com/store/stm32f103-development-board.html


  • STM에서 제공했다고 하는데, 예제가 쉽고 간결하다.
    RCC예제는 이곳에서 참조 (본인 XTAL 확인 및 사용 CLOCK 결정)
    http://www.e2box.co.kr/entry/STM32F103-%EA%B8%B0%EB%8A%A5%EB%B3%84-%ED%8E%8C%EC%9B%A8%EC%96%B4-%EC%98%88%EC%A0%9C


  • 구조도와 Main 함수만 참조만하고 Download 포기했음, 가입귀찮음. 
    http://www.devgee.com/soft/sort014/sort017/sort090/down-1080210.html 


파일이 다른 프로그램에서 열려 있으므로 문제사항

최근 자주 발생하는 CoIDE이나, 다른 프로그램을 사용하면, 제대로 종료가 되지 않아,
윈도우 탐색기에서 그 폴더 혹은 파일을 지우려고 하며, 사용중인 폴더라는 메시지와 함께

폴더 또는 해당폴더에 포함되어있는 파일이 다른 프로그램에서 열려 있으므로 작업을 완료 할 수 없다고 한다.

관련사이트
    http://answers.microsoft.com/ko-kr/windows/forum/windows_7-files/%ED%8C%8C%EC%9D%BC%EC%9D%B4-%EB%8B%A4%EB%A5%B8/3ae23758-9186-45c4-9fb9-aee55a69bcd7?auth=1

이에 해결방안으로 나는 위 사이트의 3번째 방법인 unlocker 프로그램 이용하지만,
이것 역시 근본적인 해결책은 아닌것 같다. 이문제가 자주 발생하면 윈도우가 이상해지는 것 같다.
그래서 작업관리자에서 직접 해당 프로세서들을 없애는 것이 가장 현명한 선택인 것 같다.

    http://gong6587.tistory.com/1355

Blogspot 디자인 참조 및 Layout의 구성

1. 디자인 참조사이트 

우선 레이아웃을 설정 및 변경하기 전에 본인이 원하는 전체 블로그를 생각을 하고, 다른 블로그를 참조하여 필요한 부분들을
가져와서 이를 보완한다.

  • Google 사이트
처음 Blogspot의 Gadget 수정을 시작 시도 한 것은, 전부 아래의 사이트 때문이며, 이 과정에서 당연스럽게 
Google의 자연스러운 메뉴 선택 방식과 디자인 맘에 들었으나, 템플릿에 존재하지 않아,
위와 같이 잘 알지도 못하는 Javascript과 style tag까지 공부하기 시작했다.
나중에 보니, 구글은 ajax라고 해야하나 Jquery라고 해야하나 library로 이용해서 자연스럽게 이를 구현했으며,
나또한 이를 이용했다. CSS는 구글의 것이 너무 복잡하여 그냥 구글것을 참조했으나, 이제 알고 있는 지식으로 나만의 것을 구현하였다.

  http://googleappsupdates.blogspot.kr/2014/03/bring-little-something-extra-to-docs.html
  http://googledevkr.blogspot.kr/
  https://googleblog.blogspot.kr/

  • 우측의 메뉴부분이 링크가 들어갈 이미지 필요
  http://siderite.blogspot.com/2010/04/solution-for-widgetmanager-undefined.html#atTuesdayApril132010

  • 상위 메인메뉴가 독특해서 링크를 하지만 디자인을 별로
  http://creatorhong.blogspot.kr/2012/02/blogger-label-posts-list.html

  • 우측의 메뉴와 좌측메뉴 부분 때문에 링크 (디자인 별로)
  http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html



2. Blogspot의 우측메뉴의 Gadget의 구성 

정확하게 말하면, 디자인->레이아웃으로 간 후, 우측메뉴에 본인 이 원하는 Gadget들을 추가하면 된다.
하지만 솔직히 무엇을 넣을지도 고민이고, 디자인도 매번 고민하고 있으며, 매번 수정중이다.


지금의 경우는 기본 구성을 아래와 같이 했으며, 별도로 중간에 HTML/Javscript을 넣어 내 맘대로 구성했다.
하지만, 항상 변경이 되니 확신을 하지 마시길
  1. 블로그 검색
  2. 태그
  3. 블로그 보관함
  4. 블로그 통계
  5. 가장 많이 본글

  • 아래의 사이트는 구글이 Follow 기능 및 기타 버튼을 소스로 제공
    https://developers.google.com/+/web/follow/


현재 포토샵으로, ICON의 Background를 투명하게 해야하는데, 그부분까지는 아직 못했다.
추후 시간이 된다면, 고려해보겠다.

7/16/2016

윈도우 환경변수

WINDOW 환경변수 (Environment Variable)

기본적인 사용법은 CMD or 윈도우탐색기에서 손쉽게 이용이 가능하며, Batch script에도 적용이 가능하다.





ref.
    https://developers.google.com/chart/interactive/docs/gallery/table
    https://en.wikipedia.org/wiki/Environment_variable
    https://hsmtree.wordpress.com/2015/08/10/%EC%9C%88%EB%8F%84%EC%9A%B0-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98/

7/13/2016

Google Blog 관리 (Blogspot) - 소스 표시방법

Blog에 C/C++ or Java or HTML or 기타 소스를 넣으면, 문제가 발생하는데, 특히 HTML의 경우 특수문자 (< >) 로 인하여 발생한다.
상위 소스를 넣을 경우 경우에 따라 라인마다 숫자표시 (Numbering) 이나, 라인의 강조 (Highlight) 등을 부가적인 기능을 바라는 사람이 많다.
이런 기능을 사용해주는 Javascript / CSS File 들이 존재하며 이를 이용하여 소스를 볼수가 있다.

하지만 기본적으로 거의 전부 pre tag를 이용하는 방법이며 이곳에서 세부기능은 css와 Javascirpt이 해결해주는 것 같다.
Hightlight , Line numbering 역시 Javascript이 전부 해결해주는 것 같다.

우선 가장 기본적인 Pre Tag를 이용한 간단한 소스 넣기를 부터 실행을 해보자.
다만, CSS or  Style을 변경을 해주고 이를 적용하는 것이 좋다.

  • SyntaxHighlighter
    https://en.wikipedia.org/wiki/Syntax_highlighting

  • CSS or Style Tag 수정시 학습
    http://ko.learnlayout.com/inline-block.html
    http://www.w3schools.com/css/css_display_visibility.asp

본인이 웹프로그래머가 아니다보니, 자세한 내용보다는 구현하는 방식에 대해 서술하겠다.

  • 주의사항
  1. 2번/3번/4번을 사용시에는 https가 제대로 동작이 안되어 화면에 제대로 표시가 안될 수 도 있으며, 그렇다면 브라우저의 설정변경을 해야한다. 
  2. 2번과3번이 동시설정시 서로 간섭현상이 발생하며, 가능하면 둘 중 하나만 사용하도록 하자 
  3. 3번에서 구글에서 제공하는 Jquery.mis.js는 이소스 외에도 다른곳에도 사용이 되며,  1.4.2 version 이 아닌 head에서 1.7 version 사용중이다. 
  4. head에서 제공되는 기능과 충돌되어 우측메뉴 Recent lists Gadget이 제대로 동작되지 않는 경우가 발생한다. (이 Post 볼경우에만 해당) 

1. 기본 pre tag 이용하여 소스 넣기

Blog에 C Source 나 개발 소스를 넣기 위해 가장 손쉬운 방법이며 빠른 접근과 손쉽게 사용이 가능하다.
head에 pre tag 에 style만 변경을 해주어 매번 class를 참조하는 방식으로 사용된다.

  • Blogspot->템플릿->HTML 편집
Blog의 Main Head Tag에 Style에 아래와 같이 넣자, Label은 기본으로 제공해주는 것이며, .codeprint를 넣고 이를 이제 pre tag의 class를 본인이 정의하여 호출하여 사용하자

<style >

.Label {
    padding: 2px 0px 0px 5px;
    margin: 0px 0px 0px 0px;
}

.codeprint{                   // Class 정의 
    margin: 0px 50px 0px 30px;
 background-color: #f7f7f7;
 border: 1px solid rgb(221, 221, 221);
 color: #006600;
        font-size: 13px;
 line-height: 19px;
 margin-bottom: 1em;
 overflow: auto;
 padding: 1em;

}

</style >

  • 사용방법
아래와 같이 사용을 하면 pre tag 상위 style을 적용되며, 쉽게 C source를 넣을 수가 있다.
다만 이 tag 안에서도 html 동작이 되다 보니 < > 을 &lt;   &gt; 로 변경해야 한다.

<pre class="codeprint">
  ...........
</pre>

그래서 본인도 위 방식이 사실 불편하지만 간단하고 빠르고 해서 자주 사용한다.

  • HTML 내에 특수문자 사용
   PRE Tag는 < > 문자를 변환해야줘야한다.
   http://egloos.zum.com/keep/v/1030642

2. Google code prettify 적용

google prettify라는 것이 존재하며, 다양한 CSS파일을 쉽게 얻을 수 있으며,
SyntaxHighlighter 간단한 기능을 제공을 하고 있다.
하지만, HTML이 제대로 동작하지 않으며, pre tag처럼 특수문자를 변경을 해줘야하다.
이를 id="htmlXmp"를 넣어 동작가능하게 한 것 같은데 보기도 그리 좋지 않다

  • Google code prettify의 TEST Program
   https://github.com/google/code-prettify/tree/master/tests

아래와 같이 head안에 넣고  pre tag와 함께 class="prettyprint" 함께 사용언어를 id or prettyprint 한 칸 띠고 넣는다.
Test program은 각 언어지원을 위해 sources 안에 있는 javascript들을 설정해주는 것 같다.
위의 test program들을 보고 사용하지 않을 생각이다.


  • 사용방법
본인이 원하는 *.css 와 *.min.css 를 정하고 아래의 script를 실행하면 동작.


//Google prettify 사용을 위해서 아래와 같이 CSS File *.css / *.min.css 와 Javascript run_prettify.js 선언 
<link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/vibrant-ink.css" rel="stylesheet" type="text/css"> </link>   
<link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/vibrant-ink.min.css" rel="stylesheet" type="text/css"> </link> 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> </script>

// 소스 표현 
<pre class="prettyprint linenums:1 ">   // Line Numbering을 1부터 시작 
.......
<pre >


  • 소스표현-사용예제 (미동작시 상위사이트 확인)
// Define our Function
    function checkMeaningOfLife ( decimal, success ) {
        if ( parseInt(decimal,10) === 42 ) {
            window.console.log(success);
        }
    };
    // Define our Variables
    var str = 'The meaning of life is true',
        decimal = 42.00;
    // Fire our Function
    checkMeaningOfLife(decimal,success);


  • Google Code prettify Download
    현재 나에게는 Download를 할 필요가 없지만, Link만
  https://code.google.com/archive/p/google-code-prettify/

  • Code prettify 기본 사용법과  적용가능한 언어가 나온다.
  https://github.com/google/code-prettify

  • Code Prettify의 다양한 css/min.css 다양하게 제공 (본인 취향대로 선택)
  https://jmblog.github.io/color-themes-for-google-code-prettify/
  https://rawgit.com/google/code-prettify/master/styles/index.html


3. Google prettify기반  SyntaxHighlighter 적용

Google's Prettify 기반으로 한 좀 더 나아진 SyntaxHighlighter이 존재하며, 설정도 더 편한 것 같아, 이 것으로 설정해보기로 했으나, 단점은 Google's Prettify 거의 유사하다.
현재 이 페이지에서는 2번 과 3번이 동시 실행시 3번이 2번에 영향을 주는 것 같으며, 둘 중 하나가 제대로 표현이 안되는 현상이 발생
만약 사용한다면 둘중 하나만 사용하도록 해야함 3번의 Google prettify만 적용 ( 역시나 HTML 쪽이 좀 문제)


  • 사용방법 
선언을 해주고, 원하는 설정변경해주면 되지만 현재 Jquery.min.js는 나의 경우는 다른 곳에서도 사용 중이므로 주의하자

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js" type="text/javascript"></script>
<script type="text/javascript">$.SyntaxHighlighter.init({
                                  'wrapLines':true,
                                  'lineNumbers': true
                                });



<pre class="language-javascript"> 
.........

</pre>


  • 상위 소스-사용예제 (미동작시 상위사이트 확인)


   // Define our Function
    function checkMeaningOfLife ( decimal, success ) {
        if ( parseInt(decimal,10) === 42 ) {
            window.console.log(success);
        }
    };
    // Define our Variables
    var str = 'The meaning of life is true',
        decimal = 42.00;
    // Fire our Function
    checkMeaningOfLife(decimal,success);

아래의 사이트 절차상 대로 하면 문제없이 동작이 될것입니다.
  • 사용방법 및 설정방법
  http://balupton.github.io/jquery-syntaxhighlighter/demo/


4. SyntaxHighlighter Blog에 적용

마지막으로 많이 사용되어지는 SyntaxHighlighter를 보겠지만 보안이 취약하다고하니 주의하자.
HTML 및 각종 언어 C, Java, 등을 쉽게 보여주며, 사용방법 및 설정이 용이하여 많이 사용되어지며
사용방법 역시 상위와 거의 동일하지만 다양한 기능 및 설정 제공을 해주는게 다르다

  1. 장점: 소스보기가 편하며, 다루기도 어렵지 않다.
  2. 단점: 블로그 접속시  Javscript이 외부에 있기에 로딩시간이 너무 오래걸린다.

사용하기 앞서,  아래의 사이트에서 기본기능과 프로그램을 보자
  http://alexgorbatchev.com/SyntaxHighlighter/


  • 사용방법 
head tag안에 넣고 일반 적용해도 되지만 Loading문제와 TEST용이므로 이 Post에서만 적용한다.

//사용자 편의에 따라 필요한 부분만 설정해서 사용 (현재 HTML만 표현을 위해 볼드로 된 부분만 사용)

<link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>      
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>     

<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"> </script>   
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"> </script> 

<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"> </script> 
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"> 
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'> </script> 
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"> </script>


<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"> </script> 
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"> </script>
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript"> </script>

<script type="text/javascript">  

SyntaxHighlighter.all();
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.bloggerMode = true;

</script>


// 실제 소스에 적용  
<pre class="brush: xhtml; smart-tabs: true; highlight: [3,4,6,7,9]">
............
.........
</pre>



  • SyntaxHighlighter 소스사용예제

만약 아래의 글이 안보이면 상위 사이트들을 점검해보도록하자.

...........START // 만약 아래의 글이 안보이면 문제발생 

      
     

   
 

 
 



 




.............END   



  • SyntaxHighlighter 세부설정
사용방법은 pre tag 넣고, class="brush: xhtml; first-line: 10; highlight: [2, 4, 6] " 으로 brush aliases 기본으로 넣고, 설정옵션변경을 원하면, 세미콜론과 함께 추가
config과 defaults 의 설정내용이 나오며, 개별 default 값 확인가능.
  1. bloggerMode: 블로거에서 사용하면 필수라고 적혀있음.
  2. stripBrs : BR Tag 넣으면 이기능을 무시
  3. smart-tabs:  pre tag가 간혹 두개로 자동을 분리가 되었을때 혹은 나누어 쓸때 사용 
  4. gutter : line마다 번호 넣는 기능  
  5. highlight : 특정 Line을 highlight 기능 
    자세한 설정
    http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

  • SyntaxHighlighter 프로그래밍 언어지원확인
사용하는 프로그래밍언어  shBrushxxxx로확인하고 Brush aliases 에서 선택사용

    http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


5. Github의 gist 이용방법 

Github 계정이 있다면, gist도 이용해도 괜찮다.
Github에서 gist로 간 다음 new gist를 한 다음 본인 원하는 글을 작성을 한 뒤 Embeded 부분을 가져오면된다.





6. 기타 사용방법

Syntax Highlighter 와 유사하며 국내에서 만들어진 것 같다.
현재 많은 사용을 잘 모르겠으며, 본인도 아직 실험을 해보지 못했다.
현재, 충돌 및 https 미지원 때문에 가능하면 편한것을 사용하는 것이 좋을 것 같다.


    http://colorscripter.com/info#e


7. 결론 

저의 경우는 1번과 5번을 혼합해서 사용하기로 결정했으며,다만, 빠른 로딩을 위한 방법을 모색중이다.
현재는 언어설정은 두개만 사용 중

  • 로딩이 너무느려, 우연히 알게되었는데, TI Story는 Upload가 기본제공이 되는 것 같다.
    http://jb-story.tistory.com/13

  • 아래는 Gdrive를 사용하여 공유->고급 가면 Web을 위한 공유가 있지만, 서비스가 이제 제한된다.
    http://helplogger.blogspot.kr/2014/09/host-blogger-css-javascript-files-in-google-drive.html
    https://support.google.com/drive/answer/2881970?hl=en
  • 참고사항 
     게시물(post)에 안에 link 및 script를 사용하면  글 저장시 문제가 발생이 되지만,
     이 때 수정하지 말고 닫기 버튼과 함께 저장을 하면 문제해결 .


7/10/2016

Google Blogspot 관리 (Blogspot) - 관리방법

1. Google Blogspot 변경 

처음 Naver를 Blog를 사용하다가 Google을 사용한 이유가 Blogspot은 맘대로 수정이 가능하고, 자유롭게 블로그를 수정이 가능하며, Javascript도 맘대로 넣는 기능때문이다.
모든것이 유저 맘대로 편집가능하기에 구글 블로그스팟을 선택한 것이다.

물론 상위 말한 것 처럼 장점만 있는 것이 아니다. 유연하게 사용할 수 있는 만큼, 많은 단점조 존재한다. 
대부분의 사용자가 자기 원하는 마음대로 사용하기가 어렵고 본인이 원하는 스타일로 변경하는 것에 대한 노력이 별도로 필요하다. 
상위부분은 추후 구글이 많이 개선할 것이라고 본다. 

하지만 무엇보다 가장 유동성있게 수정이 가능한 곳이 Google의 Blogspot인 것 같으며, 이것을 선택한 것에 대해 후회 하지 않는다.


1.1 Blogspot의 메뉴구성 

최근 블로그 설정 메뉴가 변경이 되었기에 이를 Update를 하며, 관련수정사항들을 기록한다.



  • 본인 블로그 -> 디자인 선택 ( 블로그 설정)
  1. 글 :  본인이 작성한 글들을 전부 볼수가 있다. 
  2. 통계 : 블로그에 접속한 통계 및 접속한 이들을 분석가능하다. 
  3. 댓글 : 관련 글에 대한 댓글을 볼수 있는 기능
  4. 수익 : 현재 변경이 됨 (없어짐)
  5. 캠페인 : 애드워즈 기능 
  6. 페이지 :  페이지라는 글을 제공하지만 정확한  사용용도를 파악 못함 
  7. 레이아웃 : 블로그의 레이아웃 설정 
  8. 테마  :  템플릿 -> 테마 변경됨 
  9. 설정 
  10. 읽을거리 
  11. 도움말 


2. Blogspot의 테마(템플릿) 설정

Blogspot은 템플릿 기능으로 기본적으로 쉽게 자신의 블로그를 설정이 가능하고, 백업/복원 기능을 가지고 있어
쉽게 복구도 할 수 사용할 수 있어 사용자 입장에서도 사용하기가 편하다.


  • 테마(설정)




A. 테마(템플릿)->맞춤설정 

최근에 다시 이 테마(템플릿)을 변경하기로 결정하였다.


  • 나의 현재 설정
  1. 테마(템플릿)   :   깔끔 
  2. 배경              :   기본배경 및 색상 사용
  3. 너비조정 ->전체블로그:  1280,  ->오른쪽메뉴:  200
  4. 레이아웃         :  상위 7번째 메뉴 동일 
  5. 고급               :  블로그의 세부 설정이 됩니다. 


  • 레이아웃설정 
   상위 블로그 설정



  • 고급 
  1. 페이지 
  2. 링크 
  3. 블로그 제목 
  4. 블로그 설명 
  5. 탭 텍스트 
  6. 탭 배경 
  7. 날짜 헤더
  8. 게시물제목 
  9. .....


고급에는 각 폰트 세부 설정 밑 관련부분을 세부적으로 변경 및 추가 할 수 있다.

예전에는 가젯의 라운딩이 처리가 되지 않아 제가 직접해서 변경해서 했으나, 최근에 이를 다 제공하는것 같다.


B. 테마(템플릿)->백업/복원

  • 백업은 전체 템플릿 다운로드를 하면 XML로 저장되며, 이 파일안에 본인이 수정한내용도 같이 백업이된다.
  • 복구는 백업파일을 선택 후, 업로드를 하여 복구를 하면된다.

C. 테마(템플릿)->HTML편집

구글은 다양한 템플릿을 제공하고 이 를 선택하여 쉽게 블로그를 운영할 수 있다.
하지만 분명히 만족을 하지 못하는 분들이 많을 것이며 HTML 편집을 이용하여 CSS or Style 태그 수정하면된다.



<link href="https://fonts.googleapis.com/css?family=Roboto:400italic,400,500,500italic,700,700italic" rel="stylesheet" type="text/css"> 
</link> 
<link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css" rel="stylesheet" type="text/css"> 
</link> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</link>


Google에서는 CSS를 제공을 하며, 그것을 쉽게 사용이 가능하다, Font역시 제공을 하지만,
한글을 아직 지원못하는 것 같다.


  • Google Font CSS 
  1. 우측메뉴에서 Font의 기본설정을 가능하다. 
  2. 세부설정은 본인이 원하는 폰트에가서 직접설정. 
  3. 설정이 모두 끝나면, +버튼이 Select this button을 눌러 추가한다. 
  4. 주소를 사용한다. 

   https://www.google.com/fonts

  • Google CSS 
   https://developers.google.com/apps-script/add-ons/css


2. Blogspot의 레이아웃사용

본인이 기본설정을 한 후에 필요한 Gadget을 추가하고 제거하는 식이다.

Favicon이 있는데, 자신의 Blogspot에 아이콘을 추가도 가능하다.
그리고 최근 Header를 고치는 데신 HTML/Javascript Gadget을 추가하는 식으로 변경이 되는 것 같다.

개인생각으로는 한국 구글에서는 왠지 제한이 있는거 같다.