====== QR코드 가이드 ======
이 화면은 https://github.com/davidshimjs/qrcodejs 사이트에서 제공하는 라이브러리를 이용한 QR 코드 생성 샘플 화면이다.
템플릿이 저장된 디렉토리의 qrcode.min.js 파일을 활용하세요.
===== 예시 =====
템플릿 위치: /HTML5/OSS/qrcode_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/qrcode_basic.xml|qrcode_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/qrcode_basic.js|qrcode_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/qrcode_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
function screen_on_load()
{
// QR 코드 생성 처리용 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
// 템플릿이 저장된 디렉토리의 qrcode.min.js 파일을 활용하세요.
// screen.loadjs("./project/terminal/ext/qrcode/qrcode.min.js");
screen.loadjs("./ext/lib/qrcode.min.js");
// QR 코드 생성용 데이터 설정
this.fld_text.settext("http://www.softbase.co.kr");
}
// "QR 코드 생성" 버튼 이벤트
function btn_make_qrcode_on_mouseup(objInst)
{
var qrcode, qrcode_prop, qrcode_target_dom;
// DIV 컴포넌트 내부 모든 HTML Element를 삭제
this.btn_clear_qrcode_on_mouseup();
// QR 코드 생성 속성 오브젝트 생성
qrcode_prop = {
width: this.fld_width.gettext(),
height: this.fld_height.gettext(),
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
};
// QR 코드 생성 대상 DOM 오브젝트를 DIV 컴포넌트를 이용하여 구함
qrcode_target_dom = this.div_qrcode.getdom();
// QR 코드 오브젝트 생성
qrcode = new QRCode(qrcode_target_dom, qrcode_prop);
// QR 코드 데이터 설정
qrcode.makeCode(this.fld_text.gettext());
}
// "QR 코드 삭제" 버튼 이벤트
function btn_clear_qrcode_on_mouseup(objInst)
{
// DIV 컴포넌트 내부 모든 HTML Element를 삭제
this.div_qrcode.empty();
}
// "QR 코드 데이터 저장"
function btn_save_qrcode_on_mouseup(objInst)
{
var qrcode_image_base64_data;
// QR코드가 생성된 DIV 컴포넌트 내부 이미지 DOM의 이미지 데이터를 구함
qrcode_image_base64_data = this.div_qrcode.getjdom().find("img").attr("src");
// QR코드 이미지 데이터를 멀티라인 컴포넌트에 설정
this.fld_qrimagedata.settext(qrcode_image_base64_data);
}
// "QR 코드 데이터를 이용하여 이미지 컴포넌트에 QR 코드 생성" 버튼 이벤트
function btn_load_qrcode_on_mouseup(objInst)
{
this.img_qrcode.setimagedata(this.fld_qrimagedata.gettext());
}
// "이미지 초기화" 버튼 이벤트
function btn_init_qrcode_on_mouseup(objInst)
{
this.img_qrcode.setimagedata("");
}
// "QR 코드 데이터를 이용하여 QR 코드 인쇄" 버튼 이벤트
function btn_print_qrcode_on_mouseup(objInst)
{
var arr_line;
arr_line = [];
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('');
arr_line.push('xFrame5 Report');
arr_line.push('');
arr_line.push('');
arr_line.push('
');
arr_line.push('');
arr_line.push('
');
arr_line.push('');
arr_line.push('');
/////////////////////////////////////////////////////////////////////////////////
// 인쇄용 HTML 기본 하단부 끝
/////////////////////////////////////////////////////////////////////////////////
// 웹브라우저 컴포넌트 내부 HTML 내용 설정,
// 페이지 로드 완료시, on_pageload 이벤트 발생함
this.web.sethtml(arr_line.join(''));
}
// QR 코드 인쇄용 웹브라우저 컴포넌트 로드 이벤트
function web_on_pageload(objInst)
{
// 웹브라우저 컴포넌트 내부 HTML window DOM 오브젝트를 구함
var browser_window = this.web.getbrowserwindow();
// HTML window DOM 오브젝트의 print 함수 호출
browser_window.print();
}
;
arr_line.push(this.fld_qrimagedata.gettext());
arr_line.push(')
');
arr_line.push('