|
| TalMap SDK Libary Reference |
| HOWTO: Make My LevelBar |
|
 Summary
| |
This document describes how to use the UI functions provided in TalMapX Control.
TalMapX Control provides various kinds of Objects for UI(User Interface).
The UI Objects provided in TalMapX Control are XUIButton, XUICheckBox, XUIImage, XUIImageList, XUIImageText, XUIPanel, UIStatic, and etc.
With this document, users can learn how to easily use UI Objects.
With the UI Objects, users can make My LevelBar and apply it to the m_Map.
|
|
|
Steps
| |
1. Get Control Manager from TalMapX Control.
2. Get UI Manager with the Contorl Manager.
3. Make desired Objects with the UI Manager and make LevelBar.
4. Use the created UI Objects and add the function to enable the LevelBar.
|
|
|
Example
| |
|
|
<html>
<head>
<script language="javascript">
<!--
var gCreatedLevelBar = false;
var gLevelBarBg;
var btnLevel = new Array(13);
/ Create UI
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()-18, 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++;
// Show the current level
MapLevel_Master(ctrlstate.GetLevel());
}
// Set Level Bar Image
function MapLevel_Master(level)
{
if (gLevelBarBg == null) return;
// Set 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);
}
-->
</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")) {
// Show the current 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="m_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++;
}
// Show the current level
MapLevel_Master(ctrlstate.GetLevel());
}
// Set Level Bar Image
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: Append Codes for Message Handler here.
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: Append Codes for Message Handler here.
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: Append Codes for Message Handler here.
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: Append Codes for Message Handler here.
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
|
|
Back 
Forward
