|
| TalMap SDK Libary Reference |
| HOWTO: 나만의 레벨바 만드는 방법 |
|
 요약
| |
이 문서는 TalMapX Control 에서 제공하는 강력한 UI 기능을 사용하는 방법을 설명합니다.
TalMapX Control은 UI(User Interface)를 위해서 다양한 개체들을 제공합니다.
TalMapX Control이 제공하는 UI 개체로는 XUIButton, XUICheckBox, XUIImage, XUIImageList, XUIImageText, XUIPanel, UIStatic 등이 있습니다.
사용자는 이 문서를 통해 손쉽게 UI 개체들을 이용하는 방법을 학습할 수 있습니다.
또한 UI 개체들을 이용하여 자신만의 레벨바를 만들어 지도에 적용할 수 있습니다.
|
|
|
방법
| |
1. TalMapX Control의 Control Manager를 구합니다.
2. Contorl Manager를 통해 UI Manger를 구합니다.
3. UI Manger를 통해 원하는 개체를 생성하여 레벨바를 구성합니다.
4. 생성 된 UI 개체의 이벤트들을 이용하여 레벨바가 동작하도록 기능을 추가합니다.
|
|
|
Example
| |
|
|
<html>
<head>
<script language="javascript">
<!--
var gCreatedLevelBar = false;
var gLevelBarBg;
var btnLevel = new Array(13);
// toggle level bar
function ToggleLevelBar()
{
var ctrlman = m_Map.GetCtrlMan();
var uiman = ctrlman.GetUIMan();
if (uiman.GetShowLevelBar() == 0) {
uiman.SetShowLevelBar(1);
} else {
uiman.SetShowLevelBar(0);
}
}
function CreateLevelBar()
{
if (gCreatedLevelBar) { // for toggle
if (1 == gLevelBarBg.GetVisible()) {
gLevelBarBg.SetVisible(0);
} else {
gLevelBarBg.SetVisible(1);
}
return;
}
gCreatedLevelBar = true;
var ctrlman = m_Map.GetCtrlMan();
var uiman = ctrlman.GetUIMan();
var ctrlstate = ctrlman.GetControlState();
var dpsize = ctrlstate.GetSizeDP();
var util = m_Map.GetUtility();
var imageman = ctrlman.GetImageMan();
imageman.SetDefaultPath("http://www.talmap.co.kr/tutorial/image/levelBarSample");
// BackGround Image
var bg = gLevelBarBg = uiman.CreateUI_Button(uiman);
bg.SetParent(uiman);
bg.SetUIID(11);
bg.SetImageList("bg.png", 24, 163);
bg.SetBound(dpsize._CX-38, (dpsize._CY-170)/2, 28, 170);
bg.SetAlpha(70);
bg.SetCanClick(0);
bg.SetCanDrag(1);
bg.AddEventMode(util.GetConstToValue("TMEVENTTYPE_MOUSELEAVE") |
util.GetConstToValue("TMEVENTTYPE_MOUSEENTER"));
// Zoom In Button
var btnZoomIn = uiman.CreateUI_Button(uiman);
btnZoomIn.SetParent(bg);
btnZoomIn.SetUIID(12);
btnZoomIn.SetImageList("btn_minus.png", 16, 15);
btnZoomIn.SetBound(6, 7, 16, 15);
btnZoomIn.SetCanClick(1);
btnZoomIn.SetCanDrag(1);
btnZoomIn.SetDragTracker(1);
btnZoomIn.AddEventMode(util.GetConstToValue("TMEVENTTYPE_MOUSEUP")|
util.GetConstToValue("TMEVENTTYPE_MOUSELEAVE")|
util.GetConstToValue("TMEVENTTYPE_MOUSEENTER"));
// Zoom Out Button
var btnZoomOut = uiman.CreateUI_Button(uiman);
btnZoomOut.SetParent(bg);
btnZoomOut.SetUIID(13);
btnZoomOut.SetImageList("btn_plus.png", 16, 15);
btnZoomOut.SetBound(6, bg.GetItemHeight()-14, 16, 15);
btnZoomOut.SetCanClick(1);
btnZoomOut.SetCanDrag(1);
btnZoomOut.SetDragTracker(1);
btnZoomOut.AddEventMode(util.GetConstToValue("TMEVENTTYPE_MOUSEUP") |
util.GetConstToValue("TMEVENTTYPE_MOUSELEAVE") |
util.GetConstToValue("TMEVENTTYPE_MOUSEENTER"));
var UIID = 14;
var CY = btnZoomIn.GetHeight() + 12;
for(var i = btnLevel.length-1; i > -1; i--)
{
btnLevel[i] = uiman.CreateUI_Button(uiman);
btnLevel[i].SetParent(bg);
btnLevel[i].SetUIID(UIID);
btnLevel[i].SetImageList("btn_"+i+".png", 22, 9);
btnLevel[i].SetBound(3, CY, 22, 9);
btnLevel[i].SetCanClick(1);
btnLevel[i].SetCanDrag(1);
btnLevel[i].SetDragTracker(1);
btnLevel[i].SetImageAutoChange(0);
btnLevel[i].SetItemIndex(1);
btnLevel[i].AddEventMode(util.GetConstToValue("TMEVENTTYPE_MOUSEUP") |
util.GetConstToValue("TMEVENTTYPE_MOUSELEAVE") |
util.GetConstToValue("TMEVENTTYPE_MOUSEENTER"));
CY = CY + 9;
UIID++;
}
// 현재 Level 표출
MapLevel_Master(ctrlstate.GetLevel());
}
function MapLevel_Master(level)
{
if (gLevelBarBg == null) return;
// Image Index 설정 0~3
var SetEnabled = 0;
var SetDisable = 1;
for (var i = 0; i < btnLevel.length; i++)
{
if (level == i) btnLevel[i].SetItemIndex(SetEnabled);
else btnLevel[i].SetItemIndex(SetDisable);
}
}
var maxLogicalLevel = 13 - 1; // Map Max Level
var minLogicalLevel = 0; // Map Min Level
// Zoom In
function Map_ZoomIn()
{
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
if (ctrlstate.GetLevel() > minLogicalLevel) {
ctrlstate.SetLevel(ctrlstate.GetLevel() - 1);
}
}
// Zoom Out
function Map_ZoomOut()
{
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
if (ctrlstate.GetLevel() < maxLogicalLevel) {
ctrlstate.SetLevel(ctrlstate.GetLevel() + 1);
}
}
// Set Map Level
function Map_SetLevel(level) {
if (level < minLogicalLevel) return;
if (level > maxLogicalLevel) return;
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
ctrlstate.SetLevel(level);
}
// OnUI_MouseUp Event Function
function MapEvent_UI_MouseUp(XUIObj, Code, Value1, Value2)
{
switch (XUIObj.GetUIID()) {
case 12: Map_ZoomOut(); break;
case 13: Map_ZoomIn(); break;
case 14: Map_SetLevel(12);break;
case 15: Map_SetLevel(11);break;
case 16: Map_SetLevel(10);break;
case 17: Map_SetLevel(9);break;
case 18: Map_SetLevel(8);break;
case 19: Map_SetLevel(7);break;
case 20: Map_SetLevel(6);break;
case 21: Map_SetLevel(5);break;
case 22: Map_SetLevel(4);break;
case 23: Map_SetLevel(3);break;
case 24: Map_SetLevel(2);break;
case 25: Map_SetLevel(1);break;
case 26: Map_SetLevel(0);break;
}
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
}
// OnUI_MouseLeave Event Function
function MapEvent_UI_MouseLeave(XUIObj, Code, Value1, Value2)
{
if (XUIObj.GetUIID() == 11) { // Level Bar BG
XUIObj.SetAlpha(70);
}
if (XUIObj.GetUIID() > 11) {
XUIObj.GetParent().SetAlpha(70);
}
}
// OnUI_MouseHover Event Function
function MapEvent_UI_MouseHover(XUIObj, Code, Value1, Value2)
{
if (XUIObj.GetUIID() == 11) { // Level Bar BG
XUIObj.SetAlpha(0);
}
if (XUIObj.GetUIID() > 11) {
XUIObj.GetParent().SetAlpha(0);
}
}
// On_StateChange Event Function
function MapEvent_OnStateChange(Code, Value1, Value2)
{
var util = m_Map.GetUtility();
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
if (Code == util.GetConstToValue("TMCHECKCONFIG_LEVEL")) {
ChangeLevelButtonImage();
// 현재 Level 표출
MapLevel_Master(ctrlstate.GetLevel());
} else if (Code == util.GetConstToValue("TMCHECKCONFIG_ROTATION")) {
} else {
}
}
-->
</script>
<script language="javascript" for="m_Map" event="OnStateChange(Code, Value1, Value2)">
<!--
var util = m_Map.GetUtility();
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
if (Code == util.GetConstToValue("TMCHECKCONFIG_LEVEL")) {
// 현재 Level 표출
MapLevel_Master(ctrlstate.GetLevel());
} else if (Code == util.GetConstToValue("TMCHECKCONFIG_ROTATION")) {
} else {
}
-->
</script>
<script language="javascript" for="m_Map" event="OnUI_MouseHover(XUIObj, Code, Value1, Value2)">
<!--
if (XUIObj.GetUIID() == 11) { // Level Bar BG
XUIObj.SetAlpha(0);
}
if (XUIObj.GetUIID() > 11) {
XUIObj.GetParent().SetAlpha(0);
}
-->
</script>
<script language="javascript" for="m_Map" event="MapEvent_UI_MouseLeave(XUIObj, Code, Value1, Value2)">
<!--
if (XUIObj.GetUIID() == 11) { // Level Bar BG
XUIObj.SetAlpha(70);
}
if (XUIObj.GetUIID() > 11) {
XUIObj.GetParent().SetAlpha(70);
}
-->
</script>
<script language="javascript" for="m_Map" event="OnUI_MouseUp(XUIObj, Code, Value1, Value2)">
<!--
switch (XUIObj.GetUIID()) {
case 12: Map_ZoomOut(); break;
case 13: Map_ZoomIn(); break;
case 14: Map_SetLevel(12);break;
case 15: Map_SetLevel(11);break;
case 16: Map_SetLevel(10);break;
case 17: Map_SetLevel(9);break;
case 18: Map_SetLevel(8);break;
case 19: Map_SetLevel(7);break;
case 20: Map_SetLevel(6);break;
case 21: Map_SetLevel(5);break;
case 22: Map_SetLevel(4);break;
case 23: Map_SetLevel(3);break;
case 24: Map_SetLevel(2);break;
case 25: Map_SetLevel(1);break;
case 26: Map_SetLevel(0);break;
}
var ctrlman = m_Map.GetCtrlMan();
var ctrlstate = ctrlman.GetControlState();
-->
</script>
</head>
<body>
<table>
<tr>
<td>
<OBJECT ID="Map" CLASSID="CLSID:DD9B48AD-EDDC-4D2C-BD68-D1FB4B382024"
codebase='http://localhost/TalMapX_Web.CAB#version=1,0,0,17' width=100% height=80%>
</OBJECT>
</td>
</tr>
</table>
</body>
</html>
|
|
|
|
#include "talmapxctrl1.h"
#include "CXCtrlMan.h"
#include "CXMasterControlState.h"
#include "CXUtility.h"
#include "CXSize.h"
#include "CXImageMan.h"
#include "CXMagicImage.h"
#include "CXMagicImageList.h"
#include "CXUIMan.h"
#include "CXUIButton.h"
BEGIN_EVENTSINK_MAP(CSampleDlg, CDialog)
ON_EVENT(CSampleDlg, IDC_TALMAPXCTRL1, 8, CSampleDlg::OnStateChangeTalmapxctrl1, VTS_I4 VTS_I4 VTS_I4)
ON_EVENT(CSampleDlg, IDC_TALMAPXCTRL1, 24, CSampleDlg::OnUI_MouseHoverTalmapxctrl1, VTS_DISPATCH)
ON_EVENT(CSampleDlg, IDC_TALMAPXCTRL1, 25, CSampleDlg::OnUI_MouseLeaveTalmapxctrl1, VTS_DISPATCH)
ON_EVENT(CSampleDlg, IDC_TALMAPXCTRL1, 21, CSampleDlg::OnUI_MouseUpTalmapxctrl1, VTS_DISPATCH VTS_I4 VTS_I4 VTS_I4)
END_EVENTSINK_MAP()
void CSampleDlg::CreateLevelBar()
{
CXCtrlMan ctrlman = m_Map.GetCtrlMan();
CXUIMan uiman = ctrlman.GetUIMan();
CXMasterControlState ctrlstate = ctrlman.GetControlState();
CXSize dpsize = ctrlstate.GetSizeDP();
CXUtility util = m_Map.GetUtility();
CXImageMan imageman = ctrlman.GetImageMan();
imageman.SetDefaultPath(_T("http://www.talmap.co.kr/tutorial/image/levelBarSample"));
// BackGround Image
CXUIButton bg = mLevelBarBg = uiman.CreateUI_Button(uiman);
bg.SetParent(uiman);
bg.SetUIID(11);
bg.SetImageList(_T("bg.png"), 24, 163);
bg.SetBound(dpsize.GetCX()-38, (dpsize.GetCY()-170)/2, 28, 170);
bg.SetAlpha(70);
bg.SetCanClick(0);
bg.AddEventMode(util.GetConstToValue(_T("TMEVENTTYPE_MOUSELEAVE")) |
util.GetConstToValue(_T("TMEVENTTYPE_MOUSEENTER")));
// Zoom In Button
CXUIButton btnZoomIn = uiman.CreateUI_Button(uiman);
btnZoomIn.SetParent(bg);
btnZoomIn.SetUIID(12);
btnZoomIn.SetImageList(_T("btn_minus.png"), 16, 15);
btnZoomIn.SetBound(4, 5, 16, 15);
btnZoomIn.SetCanClick(1);
btnZoomIn.SetCanDrag(1);
btnZoomIn.SetDragTracker(1);
btnZoomIn.AddEventMode(util.GetConstToValue(_T("TMEVENTTYPE_MOUSEUP"))|
util.GetConstToValue(_T("TMEVENTTYPE_MOUSELEAVE"))|
util.GetConstToValue(_T("TMEVENTTYPE_MOUSEENTER")));
// Zoom Out Button
CXUIButton btnZoomOut = uiman.CreateUI_Button(uiman);
btnZoomOut.SetParent(bg);
btnZoomOut.SetUIID(13);
btnZoomOut.SetImageList(_T("btn_plus.png"), 16, 15);
btnZoomOut.SetBound(4, bg.GetItemHeight()-18, 16, 15);
btnZoomOut.SetCanClick(1);
btnZoomOut.SetCanDrag(1);
btnZoomOut.SetDragTracker(1);
btnZoomOut.AddEventMode(util.GetConstToValue(_T("TMEVENTTYPE_MOUSEUP")) |
util.GetConstToValue(_T("TMEVENTTYPE_MOUSELEAVE")) |
util.GetConstToValue(_T("TMEVENTTYPE_MOUSEENTER")));
int UIID = 14;
long CY = btnZoomIn.GetHeight();
CString imgName;
for(int i = 13; i > -1; i--) {
btnLevle[i] = uiman.CreateUI_Button(uiman);
btnLevle[i].SetParent(bg);
imgName.Format(_T("btn_%d.png"), i);
btnLevle[i].SetImageList(imgName, 22, 9);
btnLevle[i].SetBound(1, CY, 22, 9);
btnLevle[i].SetCanClick(1);
btnLevle[i].SetCanDrag(1);
btnLevle[i].SetDragTracker(1);
btnLevle[i].SetImageAutoChange(0);
btnLevle[i].SetItemIndex(1);
btnLevle[i].AddEventMode(util.GetConstToValue(_T("TMEVENTTYPE_MOUSEUP")) |
util.GetConstToValue(_T("TMEVENTTYPE_MOUSELEAVE")) |
util.GetConstToValue(_T("TMEVENTTYPE_MOUSEENTER")));
CY = CY + 9;
UIID++;
}
// 현재 Level 표출
MapLevel_Master(ctrlstate.GetLevel());
}
// Level Bar 이미지 설정
void CSampleDlg::MapLevel_Master(long level)
{
if(mLevelBarBg == NULL) return;
// Image Index 설정 0~3
int SetEnabled = 0;
int SetDisable = 1;
for (int i=0; i < 13; i++) {
if (level == i) btnLevle[i].SetItemIndex(SetEnabled);
else btnLevle[i].SetItemIndex(SetDisable);
}
}
// Zoom In
void CSampleDlg::Map_ZoomIn()
{
CXCtrlMan ctrlman = m_Map.GetCtrlMan();
CXMasterControlState ctrlstate = ctrlman.GetControlState();
if (ctrlstate.GetLevel() > minLogicalLevel) {
ctrlstate.SetLevel(ctrlstate.GetLevel() -1);
}
}
// Zoom Out
void CSampleDlg::Map_ZoomOut()
{
CXCtrlMan ctrlman = m_Map.GetCtrlMan();
CXMasterControlState ctrlstate = ctrlman.GetControlState();
if (ctrlstate.GetLevel() < maxLogicalLevel) {
ctrlstate.SetLevel(ctrlstate.GetLevel() -1);
}
}
void CSampleDlg::OnStateChangeTalmapxctrl1(long Code, long Value1, long Value2)
{
// TODO: 여기에 메시지 처리기 코드를 추가합니다.
CXCtrlMan ctrlman = m_Map.GetCtrlMan();
CXUtility util = m_Map.GetUtility();
CXMasterControlState ctrlstate = ctrlman.GetControlState();
if (Code == util.GetConstToValue(_T("TMCHECKCONFIG_LEVEL"))) {
// 현재 Level 표출
MapLevel_Master(ctrlstate.GetLevel());
}
}
void CSampleDlg::OnUI_MouseHoverTalmapxctrl1(LPDISPATCH Obj)
{
// TODO: 여기에 메시지 처리기 코드를 추가합니다.
CXUIObj UIObj = Obj;
if (UIObj.GetUIID() == 11) { // Level Bar BG
UIObj.SetAlpha(0);
}
if (UIObj.GetUIID() > 11) {
CXUIObj pobj = UIObj.GetParent();
pobj.SetAlpha(0);
}
}
void CSampleDlg::OnUI_MouseLeaveTalmapxctrl1(LPDISPATCH Obj)
{
// TODO: 여기에 메시지 처리기 코드를 추가합니다.
CXUIObj UIObj = Obj;
if (UIObj.GetUIID() == 11) { // Level Bar BG
UIObj.SetAlpha(70);
}
if (UIObj.GetUIID() > 11) {
CXUIObj pobj= UIObj.GetParent();
pobj.SetAlpha(70);
}
}
void CSampleDlg::OnUI_MouseUpTalmapxctrl1(LPDISPATCH Obj, long Flag, long X, long Y)
{
// TODO: 여기에 메시지 처리기 코드를 추가합니다.
CXUIObj obj = obj;
switch (obj.GetUIID()) {
case 12: Map_ZoomOut(); break;
case 13: Map_ZoomIn(); break;
case 14: MapLevel_Master(12); break;
case 15: MapLevel_Master(11); break;
case 16: MapLevel_Master(10); break;
case 17: MapLevel_Master(9); break;
case 18: MapLevel_Master(8); break;
case 19: MapLevel_Master(7); break;
case 20: MapLevel_Master(6); break;
case 21: MapLevel_Master(5); break;
case 22: MapLevel_Master(4); break;
case 23: MapLevel_Master(3); break;
case 24: MapLevel_Master(2); break;
case 25: MapLevel_Master(1); break;
case 26: MapLevel_Master(0); break;
}
}
|
|
|
|
See Also
|
|
Map Preview
|
|
이전 
앞으로