이 화면은 https://github.com/davidshimjs/qrcodejs 사이트에서 제공하는 라이브러리를 이용한 QR 코드 생성 샘플 화면이다.
템플릿이 저장된 디렉토리의 qrcode.min.js 파일을 활용하세요.
// 화면 로드 이벤트
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('<!doctype html>');
arr_line.push('<html lang="ko">');
arr_line.push('<head>');
arr_line.push('<meta charset="utf-8">');
arr_line.push('<meta name="viewport" content="width=device-width, initial-scale=1">');
arr_line.push('<meta http-equiv="cache-control" content="no-cache">');
arr_line.push('<meta http-equiv="pragma" content="no-cache">');
arr_line.push('<link rel="stylesheet" type="text/css" href="./xf5/html/report.css"/>');
arr_line.push('<link rel="shortcut icon" href="./xframe5.ico"/>');
arr_line.push('<style>');
arr_line.push('.qrcode_div {');
arr_line.push(' position: absolute;');
arr_line.push(' left: 10px;');
arr_line.push(' top: 10px;');
arr_line.push(' z-index: 1;');
arr_line.push('}');
arr_line.push('</style>');
arr_line.push('<script type="text/javascript">');
arr_line.push('function onbodyload() {');
arr_line.push('}');
arr_line.push('</script>');
arr_line.push('<title>xFrame5 Report</title>');
arr_line.push('</head>');
arr_line.push('<body oncontextmenu="return false;" onload="onbodyload();">');
arr_line.push('<div class="qrcode_div">');
arr_line.push('<img src="');
arr_line.push(this.fld_qrimagedata.gettext());
arr_line.push('"');
arr_line.push(' style="display:block;"');
arr_line.push('>');
arr_line.push('</div>');
arr_line.push('</body>');
arr_line.push('</html>');
/////////////////////////////////////////////////////////////////////////////////
// 인쇄용 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();
}