Tabbar 2.0 Highlight Artifact

Solar2D Widgets
#1

I am seeing a highlight artifact when using the new Tab Bar.

 

I attached a screenshot … it is like the highlight effect in the TabBar assumes a height of 60 where in my case the height is only 30. (see attached image)

 

 self.tabBar = widget.newTabBar{ top = yInsert, left= minVisibleX, buttons = tabButtons, height = 30, width = screenWidth, }

 

i am using images for my tabs

 

local tabButtons = { { id = "sightingTab", defaultFile="tabs/sighting.png", overFile="tabs/sightingSelected.png", label = "", -- For some reason this has to be non nil ... bad widget 2.0 code width=90, height=30, onPress=onBtnPress, selected=true }, { id = "otherTab", defaultFile="tabs/other.png", overFile="tabs/otherSelected.png", label = "", -- For some reason this has to be non nil ... bad widget 2.0 code width=90, height=30, onPress=onBtnPress },}

 

 

 

You will also note that if you are not using Labels then you have to put an empty string in else the Widget Vomits on you.  Probably should allow label = nil

#2

Are you using widgets 2.0 or earlier?

#3

Lets go with Widget 2.0 … build 1055

#4

I’ll pass it on.

#5

The following code will show the problem … you will need to substitute your own tab images.

 

local galleryPanel local recordsPanel local selectedTab local yInsert = 40 local widget = require("widget") local rect = display.newRect(0, 0, 320, 480) rect:setFillColor(255, 255, 255) local onBtnPress = function (event) local tabid = event.target.\_id native.setKeyboardFocus(nil) if (tabid ~= selectedTab) then recordsPanel.isVisible = false galleryPanel.isVisible = false end if (tabid == "records") then recordsPanel.isVisible = true elseif (tabid == "gallery") then galleryPanel.isVisible = true else error("Unknown tab pressed: '" .. tostring(tabid) .. "'") end selectedTab = tabid return true end local tabButtons = { { id = "records", label = "Tab 1", -- For some reason this has to be non nil ... bad widget 2.0 code --label="Second Tab", defaultFile="tabs/records.png", overFile="tabs/recordsSelected.png", width=100, height=30, onPress=onBtnPress }, { id = "gallery", label = "Tab 2", -- For some reason this has to be non nil ... bad widget 2.0 code --label="Second Tab", defaultFile="tabs/gallery.png", overFile="tabs/gallerySelected.png", width=100, height=30, onPress=onBtnPress, }, } local tabBar = widget.newTabBar{ top = yInsert, left= minVisibleX, buttons = tabButtons, height = 25, width = screenWidth, bottomFill = {255, 255, 255, 128}, } selectedTab = "records" yInsert = yInsert + 30 galleryPanel = display.newGroup() galleryPanel.isVisible = false recordsPanel = display.newGroup()
#6

I am seeing a highlight artifact when using the new Tab Bar.

I attached a screenshot … it is like the highlight effect in the TabBar assumes a height of 60 where in my case the height is only 30. (see attached image)

self.tabBar = widget.newTabBar{ top = yInsert, left= minVisibleX, buttons = tabButtons, height = 30, width = screenWidth, }

i am using images for my tabs

local tabButtons = { { id = “sightingTab”, defaultFile=“tabs/sighting.png”, overFile=“tabs/sightingSelected.png”, label = “”, – For some reason this has to be non nil … bad widget 2.0 code width=90, height=30, onPress=onBtnPress, selected=true }, { id = “otherTab”, defaultFile=“tabs/other.png”, overFile=“tabs/otherSelected.png”, label = “”, – For some reason this has to be non nil … bad widget 2.0 code width=90, height=30, onPress=onBtnPress },}

You will also note that if you are not using Labels then you have to put an empty string in else the Widget Vomits on you.  Probably should allow label = nil

Can you please [buglink] for these two issues? (label not accepting nil and artifact) and I will look into these issues.

Cheers.

#7

Are you using widgets 2.0 or earlier?

#8

Lets go with Widget 2.0 … build 1055

#9

I’ll pass it on.

#10

The following code will show the problem … you will need to substitute your own tab images.

 

local galleryPanel local recordsPanel local selectedTab local yInsert = 40 local widget = require("widget") local rect = display.newRect(0, 0, 320, 480) rect:setFillColor(255, 255, 255) local onBtnPress = function (event) local tabid = event.target.\_id native.setKeyboardFocus(nil) if (tabid ~= selectedTab) then recordsPanel.isVisible = false galleryPanel.isVisible = false end if (tabid == "records") then recordsPanel.isVisible = true elseif (tabid == "gallery") then galleryPanel.isVisible = true else error("Unknown tab pressed: '" .. tostring(tabid) .. "'") end selectedTab = tabid return true end local tabButtons = { { id = "records", label = "Tab 1", -- For some reason this has to be non nil ... bad widget 2.0 code --label="Second Tab", defaultFile="tabs/records.png", overFile="tabs/recordsSelected.png", width=100, height=30, onPress=onBtnPress }, { id = "gallery", label = "Tab 2", -- For some reason this has to be non nil ... bad widget 2.0 code --label="Second Tab", defaultFile="tabs/gallery.png", overFile="tabs/gallerySelected.png", width=100, height=30, onPress=onBtnPress, }, } local tabBar = widget.newTabBar{ top = yInsert, left= minVisibleX, buttons = tabButtons, height = 25, width = screenWidth, bottomFill = {255, 255, 255, 128}, } selectedTab = "records" yInsert = yInsert + 30 galleryPanel = display.newGroup() galleryPanel.isVisible = false recordsPanel = display.newGroup()
#11

I am seeing a highlight artifact when using the new Tab Bar.

I attached a screenshot … it is like the highlight effect in the TabBar assumes a height of 60 where in my case the height is only 30. (see attached image)

self.tabBar = widget.newTabBar{ top = yInsert, left= minVisibleX, buttons = tabButtons, height = 30, width = screenWidth, }

i am using images for my tabs

local tabButtons = { { id = “sightingTab”, defaultFile=“tabs/sighting.png”, overFile=“tabs/sightingSelected.png”, label = “”, – For some reason this has to be non nil … bad widget 2.0 code width=90, height=30, onPress=onBtnPress, selected=true }, { id = “otherTab”, defaultFile=“tabs/other.png”, overFile=“tabs/otherSelected.png”, label = “”, – For some reason this has to be non nil … bad widget 2.0 code width=90, height=30, onPress=onBtnPress },}

You will also note that if you are not using Labels then you have to put an empty string in else the Widget Vomits on you.  Probably should allow label = nil

Can you please [buglink] for these two issues? (label not accepting nil and artifact) and I will look into these issues.

Cheers.

#12

Any update on this item?  Not seeing this fixed on build 1093

Thanks

#13

Hi mslack,

Please submit a bug report with a testbed we can look at.

Thanks, and a great day,

Alex

#14

Thought i had already … just submitted (again?).

#15

Hi mslack,

The reason we ask for you to submit a testbed is to look directly at what you use. That is code and assets, because that makes it easy for us to rule out if the error is in the code/assets. You submitted a bug report with a config.lua file. So please, do submit a complete bug report with sample code and the assets you are using, that create the artifact. Or append that to your existing bug (21961).

Thanks.

Alex

#16

The submission i just made does not need a config.lua file and any graphic will work … the bug is obvious.

Here is the screen shot i uploaded previously to show what is happening

[sharedmedia=core:attachments:12]

#17

Hey,

Right, i totally did not see that thumbnail in your previous post. My honest mistake :slight_smile:

So it’s actually happening because of the tabbar height.

Allright, we’ll look into it ASAP.

Thanks again,

Alex

#18

Any update on this item?  Not seeing this fixed on build 1093

Thanks

#19

Hi mslack,

Please submit a bug report with a testbed we can look at.

Thanks, and a great day,

Alex

#20

Thought i had already … just submitted (again?).