• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Otclient options button

Olddies

Classicot.com
Premium User
Joined
Nov 21, 2009
Messages
1,172
Solutions
12
Reaction score
309
Location
Dominican Republic 🇩🇴
hello buddys i would like to know if someone could help me with this small thing, the question is i want to make these options look like a button (like hotkeys or motd is) i been trying to change the image but i dont get it i'm using the @Danger II modified otclient i just changed the UI
1o52bk.png

sorry for my bad english (hope you guys understand me :p)
thanks in advance
 
actually i'm using all the otbm,spr,dat :p from one of your oldserver :( i like it so much i hope there is no problem with that, if it is i can delete it :)
Not a problem at all, hopefully your players will like it :)
 
ok guys i got it but right now i have another problem :( the problem is when i press the buttons it doesnt show the options
Code:
OptionCheckBox < CheckBox
  @onCheckChange: modules.client_options.setOption(self:getId(), self:isChecked())
  height: 16

  $first:
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    margin-top: 15

  $!first:
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 10

OptionScrollbar < HorizontalScrollBar
  step: 1
  @onValueChange: modules.client_options.setOption(self:getId(), self:getValue())

MainWindow
  id: optionsWindow
  !text: tr('Options')
  size: 415 340

  @onEnter: modules.client_options.hide()
  @onEscape: modules.client_options.hide()

  TabBarVertical
    id: optionsTabBar
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    margin-top: -10

  Panel
    id: optionsTabContent
    anchors.top: optionsTabBar.top
    anchors.left: optionsTabBar.right
    anchors.right: parent.right
    anchors.bottom: optionsTabBar.bottom
    margin-left: 20

  HorizontalSeparator
    id: separator
    anchors.top: optionsTabBar.top
    anchors.left: optionsTabBar.left
    anchors.right: optionsTabBar.right
    margin-top: 128
    margin-left: 6
    margin-right: 6

  Button
    id: hotkeysButton
    !text: tr('Hotkeys')
    width: 86
    anchors.top: separator.top
    anchors.left: optionsTabBar.left
    margin-top: 12
    margin-left: 10
    enabled: true
    @onClick: modules.game_hotkeys.toggle()

  HorizontalSeparator
    id: separator2
    anchors.top: hotkeysButton.bottom
    anchors.left: optionsTabBar.left
    anchors.right: optionsTabBar.right
    margin-top: 12
    margin-left: 6
    margin-right: 6

  Button
    !text: tr('Motd')
    width: 86
    anchors.top: separator2.bottom
    anchors.left: optionsTabBar.left
    margin-top: 12
    margin-left: 11
    @onClick: modules.client_entergame.EnterGame.displayMotd()

  Button
    !text: tr('Ok')
    width: 45
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    @onClick: modules.client_options.toggle()
  Button
    id: generalButton
    !text: tr('General')
    width: 86
    anchors.left: optionsTabBar.left
    margin-left: 10
    @onClick: modules.client_options.game.toggle()
  Button
    id: consoleButton
    !text: tr('Console')
    width: 86
    anchors.top: separator.top
    anchors.left: optionsTabBar.left
    margin-top: -90
    margin-left: 10
    @onClick: modules.client_options.console.toggle()
  Button
    !text: tr('Graphics')
    width: 86
    anchors.top: separator.top
    anchors.left: optionsTabBar.left
    margin-top: -60
    margin-left: 10
    @onClick: modules.client_options.graphics.toggle()
  Button
    !text: tr('Keyboard')
    width: 86
    anchors.top: separator.top
    anchors.left: optionsTabBar.left
    margin-top: -31
    margin-left: 10
    @onClick: modules.client_options.keyboard.toggle()

Code:
local defaultOptions = {
  vsync = true,
  showFps = false,
  showPing = false,
  fullscreen = false,
  classicControl = false,
  autoChaseOverride = true,
  showStatusMessagesInConsole = true,
  showEventMessagesInConsole = true,
  showInfoMessagesInConsole = true,
  showTimestampsInConsole = true,
  showPrivateMessagesInConsole = true,
  showPrivateMessagesOnScreen = true,
  showLeftPanel = false,
  showExtraRightPanel = false,
  foregroundFrameRate = 61,
  backgroundFrameRate = 201,
  painterEngine = 0,
  displayNames = true,
  displayHealth = true,
  displayMana = true,
  displayText = true,
  dontStretchShrink = false,
  smoothWalk = true,
  walkingRepeatDelayScrollBar = 100,
  walkingSensitivityScrollBar = 50,
  bouncingKeys = true,
  bouncingKeysDelayScrollBar = 100,
  smartWalk = false,
  blueNpc = true,
  expBar = false,
}

local optionsWindow
local optionsButton
local hotkeysButton
local optionsTabBar
local options = {}
local generalPanel
local consolePanel
local graphicsPanel
local keyboardPanel
local soundPanel

local function setupGraphicsEngines()
  local enginesRadioGroup = UIRadioGroup.create()
  local ogl1 = graphicsPanel:getChildById('opengl1')
  local ogl2 = graphicsPanel:getChildById('opengl2')
  local dx9 = graphicsPanel:getChildById('directx9')
  enginesRadioGroup:addWidget(ogl1)
  enginesRadioGroup:addWidget(ogl2)
  enginesRadioGroup:addWidget(dx9)

  if g_window.getPlatformType() == 'WIN32-EGL' then
    enginesRadioGroup:selectWidget(dx9)
    ogl1:setEnabled(false)
    ogl2:setEnabled(false)
    dx9:setEnabled(true)
  else
    ogl1:setEnabled(g_graphics.isPainterEngineAvailable(1))
    ogl2:setEnabled(g_graphics.isPainterEngineAvailable(2))
    dx9:setEnabled(false)
    if g_graphics.getPainterEngine() == 2 then
      enginesRadioGroup:selectWidget(ogl2)
    else
      enginesRadioGroup:selectWidget(ogl1)
    end

    if g_app.getOs() ~= 'windows' then
      dx9:hide()
    end
  end

  enginesRadioGroup.onSelectionChange = function(self, selected)
    if selected == ogl1 then
      setOption('painterEngine', 1)
    elseif selected == ogl2 then
      setOption('painterEngine', 2)
    end
  end

  --[[--]]if not g_graphics.canCacheBackbuffer() then
    graphicsPanel:getChildById('foregroundFrameRate'):disable()
    graphicsPanel:getChildById('foregroundFrameRateLabel'):disable()
  end--
end

function init()
  for k,v in pairs(defaultOptions) do
    g_settings.setDefault(k, v)
    options[k] = v
  end

  optionsWindow = g_ui.displayUI('options')
  optionsWindow:hide()

  optionsTabBar = optionsWindow:getChildById('optionsTabBar')
  optionsTabBar:setContentWidget(optionsWindow:getChildById('optionsTabContent'))

  g_keyboard.bindKeyDown('Ctrl+F', function() toggleFullScreen() end)
  g_keyboard.bindKeyDown('Ctrl+N', toggleDisplays)

  hotkeysButton = optionsWindow:getChildById('hotkeysButton')

  generalPanel = g_ui.loadUI('game')
  optionsTabBar:addTab(tr('General'), generalPanel, '/images/optionstab/option_button')

  consolePanel = g_ui.loadUI('Console')
  optionsTabBar:addTab(tr('Console'), consolePanel, '/images/optionstab/option_button')

  graphicsPanel = g_ui.loadUI('Graphics')
  optionsTabBar:addTab(tr('Graphics'), graphicsPanel, '/images/optionstab/option_button')
 
  keyboardPanel = g_ui.loadUI('keyboard')
  optionsTabBar:addTab(tr('Keyboard'), keyboardPanel, '/images/optionstab/option_button')
  g_app.setForegroundPaneMaxFps(0)
 
  addEvent(function() setup() end)
end

function toggleFullScreen()
  local screenButton = modules.game_playerbars.fullScreenButton
   if not g_window.isFullscreen() then
     screenButton:setChecked(true)
    g_window.setFullscreen(true)
   else
     g_window.setFullscreen(false)
     screenButton:setChecked(false)
   end
end

function setup()
  local gameMapPanel = modules.game_interface.getMapPanel()
  gameMapPanel:setDrawLights(false)
  setupGraphicsEngines()
  -- load options
  for k,v in pairs(defaultOptions) do
    if type(v) == 'boolean' then
      setOption(k, g_settings.getBoolean(k), true)
    elseif type(v) == 'number' then
      setOption(k, g_settings.getNumber(k), true)
    end
  end
end

function toggle()
  if optionsWindow:isVisible() then
    hide()
  else
    show()
  end
  if g_game.isOnline() then
     hotkeysButton:enable()
     hotkeysButton:setOpacity(1)
  else
     hotkeysButton:disable()
  end
end

function show()
  optionsWindow:show()
  optionsWindow:raise()
  optionsWindow:focus()
end

function hide()
  optionsWindow:hide()
end

function toggleDisplays()
  if options['displayNames'] and options['displayHealth'] and options['displayMana'] then
    setOption('displayNames', false)
  elseif options['displayHealth'] then
    setOption('displayHealth', false)
    setOption('displayMana', false)
  else
    if not options['displayNames'] and not options['displayHealth'] then
      setOption('displayNames', true)
    else
      setOption('displayHealth', true)
      setOption('displayMana', true)
    end
  end
end

function toggleOption(key)
  setOption(key, not getOption(key))
end

function setOption(key, value, force)
  if not force and options[key] == value then return end
  local gameMapPanel = modules.game_interface.getMapPanel()
  if key == 'vsync' then
    g_window.setVerticalSync(value)
  elseif key == 'showFps' then
    modules.game_interface.setFpsVisible(value)
  elseif key == 'showPing' then
    modules.game_interface.setPingVisible(value)
  elseif key == 'fullscreen' then
    g_window.setFullscreen(value)
  elseif key == 'showLeftPanel' then
    modules.game_interface.getLeftPanel():setOn(value)
  elseif key == 'showExtraRightPanel' then
    modules.game_interface.getExtraRightPanel():setOn(value)
  elseif key == 'backgroundFrameRate' then
    local text, v = value, value
    if value <= 0 or value >= 201 then text = 'max' v = 0 end
    graphicsPanel:getChildById('backgroundFrameRateLabel'):setText(tr('Game framerate limit: %s', text))
    g_app.setBackgroundPaneMaxFps(v)
  
  elseif key == 'bouncingKeysDelayScrollBar' then
    keyboardPanel:getChildById('bouncingKeysDelayLabel'):setText(tr('Auto bouncing keys interval: %s ms', value))
  elseif key == 'walkingSensitivityScrollBar' then
    keyboardPanel:getChildById('walkingSensitivityLabel'):setText(tr('Walking keys sensitivity: %s%%', value))
  elseif key == 'walkingRepeatDelayScrollBar' then
    keyboardPanel:getChildById('walkingRepeatDelayLabel'):setText(tr('Walking keys auto-repeat delay: %s ms', value))
    local scrollBar = keyboardPanel:getChildById('walkingRepeatDelayScrollBar')
    modules.game_interface.setWalkingRepeatDelay(value)
  elseif key == 'smoothWalk' then
    keyboardPanel:getChildById('walkingSensitivityScrollBar'):setEnabled(value)
    keyboardPanel:getChildById('walkingSensitivityLabel'):setEnabled(value)
  elseif key == 'bouncingKeys' then
    keyboardPanel:getChildById('bouncingKeysDelayScrollBar'):setEnabled(value)
    keyboardPanel:getChildById('bouncingKeysDelayLabel'):setEnabled(value)

  elseif key == 'painterEngine' then
    g_graphics.selectPainterEngine(value)
  elseif key == 'displayNames' then
    gameMapPanel:setDrawNames(value)
  elseif key == 'displayHealth' then
    gameMapPanel:setDrawHealthBars(value)
  elseif key == 'expBar' then
    modules.game_healthinfo.toggleExpBar(value)
  
  elseif key == 'blueNpc' then
    if value then
         g_game.enableFeature(GameBlueNpcNameColor)
    else
       g_game.disableFeature(GameBlueNpcNameColor)
    end
    modules.game_battle.checkCreatures()
  elseif key == 'displayText' then
    gameMapPanel:setDrawTexts(value)
  elseif key == 'dontStretchShrink' then
    addEvent(function()
      modules.game_interface.updateStretchShrink()
    end)
  end

  -- change value for keybind updates
  for _,panel in pairs(optionsTabBar:getTabsPanel()) do
    local widget = panel:recursiveGetChildById(key)
    if widget then
      if widget:getStyle().__class == 'UICheckBox' then
        widget:setChecked(value)
      elseif widget:getStyle().__class == 'UIScrollBar' then
        widget:setValue(value)
      end
      break
    end
  end

  g_settings.set(key, value)
  options[key] = value
end

function getOption(key)
  return options[key]
end

function addTab(name, panel, icon)
  optionsTabBar:addTab(name, panel, icon)
end

function addButton(name, func, icon)
  optionsTabBar:addButton(name, func, icon)
end
69hrip.png
 
Last edited:
i think the problem is here but i dont know wich function or what i should put here to make it show the options when i click on them
Code:
 @onClick: modules.client_options.console()
 
Last edited:
maybe it is too easy but i'm willing to pay 10 dollars to who fix this simple issue, i just want the buttons, (General,Console,Graphics And Keyboard) when i click them shows their options if someone wants the job and dont understand very well the request i can explain better in PM or Discord
69hrip.png
 
maybe it is too easy but i'm willing to pay 10 dollars to who fix this simple issue, i just want the buttons, (General,Console,Graphics And Keyboard) when i click them shows their options if someone wants the job and dont understand very well the request i can explain better in PM or Discord
69hrip.png
bump
 
Reverse changes to origin and then change this inside: /data/styles/20-tabbars.otui
Code:
TabBarVerticalButton < UIButton
  size: 48 48
  color: #aaaaaa
  anchors.left: parent.left
  anchors.right: parent.right
  text-align: bottom
  icon-align: top
  icon-offset-y: 2
  icon-color: #888888
  $first:
    anchors.top: parent.top
  $!first:
    anchors.top: prev.bottom
    margin-top: 10
  $hover !checked:
    color: white
    icon-color: #dfdfdf
  $disabled:
    icon-color: #333333
  $checked:
    icon-color: #ffffff
    color: #80c7f8
  $on !checked:
    color: #F55E5E
To this:
Code:
TabBarVerticalButton < UIButton
  size: 48 48
  color: #aaaaaa
  anchors.left: parent.left
  anchors.right: parent.right
  text-align: bottom
  icon-align: top
  icon-offset-y: 2
  icon-color: #888888
  image-source: /images/ui/button
  image-color: #dfdfdf
  image-clip: 0 0 22 23
  image-border: 3
  padding: 5 10 5 10
  opacity: 1.0

  $first:
    anchors.top: parent.top
  $!first:
    anchors.top: prev.bottom
    margin-top: 10
  $hover !checked:
    color: white
    icon-color: #dfdfdf
    image-clip: 0 23 22 23
  $disabled:
    icon-color: #333333
    color: #dfdfdf88
    opacity: 0.8
  $checked:
    icon-color: #ffffff
    color: #80c7f8
    image-clip: 0 46 22 23
    text-offset: 1 1
  $on !checked:
    color: #F55E5E
    image-clip: 0 46 22 23
    text-offset: 1 1

Ofc you will have to tune it up to your style, I made this on default skin.
 
Back
Top