Tabbar - What's Wrong Here?

This (the tabBar declaration) is almost exactly copy-pasted from the interface examples.

I get a very unhelpful error of  “attempt to perform arithmetic on ‘totalTabWidth’” which doesn’t tell me anything about what’s wrong (just that there is something). Can anyone explain why this error occurs? Why can’t it calculate it’s own internal value in my code, but it can in the Interface example?

local storyboard = require( "storyboard" ) local widget = require( "widget" ) local scene = storyboard.newScene() local \_W = display.viewableContentWidth local \_H = display.viewableContentHeight -- forward declaration local background local tabBar -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view background = display.newImageRect( group, "images/scenes/login.png", display.contentWidth, display.contentHeight ) background:setReferencePoint( display.TopLeftReferencePoint ) background.x, background.y = 0, 0 background:addEventListener("tap", function(e) native.setKeyboardFocus(nil) end) -- all display objects must be inserted into group group:insert( background ) local tabButtons = { { width = 32, height = 32, defaultFile = "images/ui/buttons/button1unpressed.png", overFile = "images/ui/buttons/button1pressed.png", label = "Screen 1", onPress = function() storyboard.gotoScene( "screen1" ); end, selected = true }, { width = 32, height = 32, defaultFile = "images/ui/buttons/button1unpressed.png", overFile = "images/ui/buttons/button1pressed.png", label = "Screen 2", onPress = function() storyboard.gotoScene( "screen2" ); end, } } tabBar = widget.newTabBar{ top = 280, width = 64, backgroundFile = "images/ui/logintabbar/tabbar.png", tabSelectedLeftFile = "images/ui/logintabbar/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "images/ui/logintabbar/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "images/ui/logintabbar/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 52, buttons = tabButtons } end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view end -- Constructor -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- Init -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) ----------------------------------------------------------------------------------------- return scene

I’m in the process of updating a corona app I wrote about a year ago and had the same issue.

 

Through trial and error, it looks like the corona widget code has 4px of margin/padding somewhere in it and the error occurs when the total width of your tabs is greater than the width of your tabBar-4

 

Try setting your the width of your tab buttons to 30, see if that works.

 

Please let me know if you’ve found anything else regarding this issue. 

 

Anyone on the Corona Dev team have any info?

I got an email from them confirming that the error thrown is not appropriate. The width must be explicitly set to the size of the tabs combined or greater. In practice, it must have the 4px padding you decribed, even with custom images.

I’m in the process of updating a corona app I wrote about a year ago and had the same issue.

 

Through trial and error, it looks like the corona widget code has 4px of margin/padding somewhere in it and the error occurs when the total width of your tabs is greater than the width of your tabBar-4

 

Try setting your the width of your tab buttons to 30, see if that works.

 

Please let me know if you’ve found anything else regarding this issue. 

 

Anyone on the Corona Dev team have any info?

I got an email from them confirming that the error thrown is not appropriate. The width must be explicitly set to the size of the tabs combined or greater. In practice, it must have the 4px padding you decribed, even with custom images.