Hiding Button Background Color

This topic contains 7 replies, has 4 voices, and was last updated by impixi 2 years, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

February 10, 2017 at 4:35 pm #7081

Participant

I have a button with an image being rendered onto it so I do not need the grey background color. In the docs it says I can set the alpha of BackgroundColor or BorderColor to 0 and it will not render it but I can’t seem to get that aspect to work and it continues to render.

#import "<std>"
#import "<mojo>"
#import "<mojox>"

#Import "shadedDark12.png"
 
Using std..
Using mojo..
Using mojox..
 
Class MyWindow Extends Window
 
	Method New()
		Super.New( "Button Demo",640,480,WindowFlags.Resizable )
		
		Local image:Image
		image=Image.Load( "asset::shadedDark12.png" )
		
		Local button:=New PushButton( "", image )
		button.Layout="float"			'normal size
		button.Gravity=New Vec2f( .5,.5 )	'top-left
		button.MaxSize=New Vec2i( 100,0 )
		'button.Style.Padding = New Recti(0,0,0,0)
		'button.Style.BorderColor = New Color(0,0,0,0) Does not work either
		button.Style.BorderColor.A = 0
		button.Style.BackgroundColor.A = 0
		
		button.Clicked=Lambda()
			Alert( "Well done sir!" )
		End
		
		ContentView=button
	End
	
End
 
Function Main()
 
	New AppInstance
	
	New MyWindow
	
	App.Run()
End

#import "<std>"

#import "<mojo>"

#import "<mojox>"

#Import "shadedDark12.png"

Using std..

Using mojo..

Using mojox..

Class MyWindow Extends Window

Method New()

Super.New( "Button Demo",640,480,WindowFlags.Resizable )

Local image:Image

image=Image.Load( "asset::shadedDark12.png" )

Local button:=New PushButton( "", image )

button.Layout="float" 'normal size

button.Gravity=New Vec2f( .5,.5 ) 'top-left

button.MaxSize=New Vec2i( 100,0 )

'button.Style.Padding = New Recti(0,0,0,0)

'button.Style.BorderColor = New Color(0,0,0,0) Does not work either

button.Style.BorderColor.A = 0

button.Style.BackgroundColor.A = 0

button.Clicked=Lambda()

Alert( "Well done sir!" )

End

ContentView=button

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

Any ideas?

February 10, 2017 at 11:31 pm #7088

Mark Sibly

Keymaster

Hi,

Not sure if it’s the problem, but this is probably not doing what you expect:

button.Style.BorderColor.A = 0

Color values are ‘structs’ and structs are returned by value, so BorderColor is actually returning a copy of the border color, so you’re only modifying a copy which will have no effect. In fact, I think the compiler is supposed to catch this, could be an mx2cc bug.

February 10, 2017 at 11:39 pm #7089

Mark Sibly

Keymaster

The button’s gray background is actually due to the Skin and SkinColor style properties.

My advice for skinning a gui would be to use App.Theme.Load() with a ‘theme file’. Alas no demo of this yet, but it’s used by Ted2 to load themes.

February 11, 2017 at 4:46 am #7094

impixi

Participant

*Very* basic example:

[crayon-5cba8e499f83c844329931 inline="true" ]#Import "<std>"
#Import "<mojo>"
#Import "<mojox>"
 
'#Import "shadedDark12.png"
 
Using std..
Using mojo..
Using mojox..

Function Main()
	New AppInstance
	New MyWindow
	App.Run()
End

'------

Class MyWindow Extends Window
 
	Method New()
		Super.New( "Button Demo",640,480,WindowFlags.Resizable )
		
		SaveString(CreateButtonTheme(), AssetsDir() + "/myTheme.json")
		Local theme:=App.Theme.Load("asset::myTheme.json")
		
		Local image:Image = CreateButtonImage(200, 40)
		'Local image := Image.Load( "asset::shadedDark12.png" )

		Local button:=New PushButton("", image)
		button.Style = GetStyle("myButton")
		button.Layout="float"			
		button.Gravity=New Vec2f( .5,.5 )	
		button.MaxSize=New Vec2i( 100,0 )

		ClearColor = Color.LightGrey

		button.Clicked=Lambda()
			Alert( "Well done sir!" )
		End

		ContentView=button
	End

End

'---- Generated Content:

Function CreateButtonTheme:String()
	Local strJson:String
	strJson += "{~n~qextends~q:~qdefault~q,~n"
	strJson += "~qstyles~q:{~n"
	strJson += "~t~qmyButton~q:{~n"
	strJson += "~t~t~qstates~q:{~n"
	strJson += "~t~t~t~qhover~q:{~n"
	strJson += "~t~t~t~t~qiconColor~q:~q#FFFF00FF~q~n~t~t~t},~n"
	strJson += "~t~t~t~qactive~q:{~n"
	strJson += "~t~t~t~t~qiconColor~q:~q#FF0000FF~q~n~t~t~t}~n"
	strJson += "~n~t~t}~n"
	strJson += "~t}~n}~n}"

	Print strJson

	Return strJson
End

Function CreateButtonImage:Image(w:Int, h:Int)
	Local img:Image = New Image(w, h)
	Local canvas:=New Canvas(img)
	canvas.Clear(Color.None)
	canvas.Color=Color.White
	canvas.DrawRect(0, 0, w, h)
	canvas.Color=Color.Black
	canvas.DrawText("My Image", 0, 0)
	canvas.Flush()
	Return img
End

[crayon-5cba8e499f83c844329931 inline="true" ]#Import "<std>"

#Import "<mojo>"

#Import "<mojox>"

'#Import "shadedDark12.png"

Using std..

Using mojo..

Using mojox..

Function Main()

New AppInstance

New MyWindow

App.Run()

End

'------

Class MyWindow Extends Window

Method New()

Super.New( "Button Demo",640,480,WindowFlags.Resizable )

SaveString(CreateButtonTheme(), AssetsDir() + "/myTheme.json")

Local theme:=App.Theme.Load("asset::myTheme.json")

Local image:Image = CreateButtonImage(200, 40)

'Local image := Image.Load( "asset::shadedDark12.png" )

Local button:=New PushButton("", image)

button.Style = GetStyle("myButton")

button.Layout="float"

button.Gravity=New Vec2f( .5,.5 )

button.MaxSize=New Vec2i( 100,0 )

ClearColor = Color.LightGrey

button.Clicked=Lambda()

Alert( "Well done sir!" )

End

ContentView=button

End

'---- Generated Content:

Function CreateButtonTheme:String()

Local strJson:String

strJson += "{~n~qextends~q:~qdefault~q,~n"

strJson += "~qstyles~q:{~n"

strJson += "~t~qmyButton~q:{~n"

strJson += "~t~t~qstates~q:{~n"

strJson += "~t~t~t~qhover~q:{~n"

strJson += "~t~t~t~t~qiconColor~q:~q#FFFF00FF~q~n~t~t~t},~n"

strJson += "~t~t~t~qactive~q:{~n"

strJson += "~t~t~t~t~qiconColor~q:~q#FF0000FF~q~n~t~t~t}~n"

strJson += "~n~t~t}~n"

strJson += "~t}~n}~n}"

Print strJson

Return strJson

End

Function CreateButtonImage:Image(w:Int, h:Int)

Local img:Image = New Image(w, h)

Local canvas:=New Canvas(img)

canvas.Clear(Color.None)

canvas.Color=Color.White

canvas.DrawRect(0, 0, w, h)

canvas.Color=Color.Black

canvas.DrawText("My Image", 0, 0)

canvas.Flush()

Return img

End

[/crayon]

February 11, 2017 at 4:25 pm #7106

Cole Chapman

Participant

Thank you! Thats exactly what I am after. I am able to set the button image and alter colors on hover and active but how do I change the image? To change colors you change iconColor but to change the image I have tried image, icon, etc and none of them seem to do the trick…

Also what is the attribute called when you hover a standard button and a darker border appears around it?

February 12, 2017 at 2:22 am #7110

impixi

Participant

Here’s a “better” example, doing things “properly”, using only skins this time. Themes should be stored in a “assets/themes” folder along with the relevant skin images. Bizarrely, setting the initial “UP”/default state skin in the theme file isn’t working – I must be missing something obvious. Instead I set the required image as the icon on Button creation. I’ll update this example when/if I figure it out…

BTW: In this example use “skinColor” if you want to change the button state colors.

[crayon-5cba8e49a514a127059673 inline="true" ]#Import "<std>"
#Import "<mojo>"
#Import "<mojox>"
 
Using std..
Using mojo..
Using mojox..
 
Function Main()
	New AppInstance
	New MyWindow
	App.Run()
End
 
'------
 
Class MyWindow Extends Window
 
	Method New()
		Super.New( "Button Demo",640,480,WindowFlags.Resizable )
		
		Local themeDir := AssetsDir() + "/themes"
		CreateDir(themeDir, False, False)
		
		CreateButtonPNGs(200, 40, themeDir + "/myButton")
		CreateButtonTheme(themeDir + "/myTheme.json")
	
		App.Theme.Load("theme::myTheme.json")
	
 		Local image := Image.Load("theme::myButtonUp.png")
		Local button:=New PushButton("", image)
		
		'Local button:=New PushButton("")
		button.Layout="float"
		button.Gravity=New Vec2f( .5,.5 )
		button.Style = GetStyle("myButton")			

		button.Clicked=Lambda()
			Alert( "Well done sir!" )
		End
 
 		ClearColor = Color.LightGrey
 
		ContentView=button
	End
 
End
 
'---- Generated Content:
 
Function CreateButtonTheme:Void(url:String)

	Local strJson:String
	
	strJson += "{~n~qextends~q:~qdefault~q,~n"
	
	strJson += "~qstyles~q:{~n"
	strJson += "~t~qmyButton~q:{~n"
	strJson += "~t~t~qskin~q:~qmyButtonUp.png~q,~n"
	strJson += "~t~t~qstates~q:{~n"
	
	strJson += "~t~t~t~qselected~q:{~n"
	strJson += "~t~t~t~t~qskin~q:~qmyButtonSelected.png~q~n~t~t~t},~n"
	strJson += "~t~t~t~qhover~q:{~n"
	strJson += "~t~t~t~t~qskin~q:~qmyButtonHover.png~q~n~t~t~t},~n"
	strJson += "~t~t~t~qactive~q:{~n"
	strJson += "~t~t~t~t~qskin~q:~qmyButtonActive.png~q~n~t~t~t}~n"
	
	strJson += "~n~t~t}~n"
	strJson += "~t}~n}~n}"
 
	Print strJson
 
	SaveString(strJson, url)
	
End
  
Function CreateButtonPNGs:Void(w:Int, h:Int, urlStem:String)

	Local bLabs:=New String[]("Up", "Active", "Hover", "Selected")

	For Local n:=0 until bLabs.Length
		Local img := New Image(w, h)
		local canvas := New Canvas(img)
		canvas.Clear(New Color(Rnd(), Rnd(), Rnd(), 1.0))
		canvas.Color=Color.Black
		canvas.DrawText(bLabs[n], 0, 0)
		canvas.Flush()
		Local pm := canvas.CopyPixmap(New Recti(0, 0, img.Width, img.Height))
		pm.Save(urlStem + bLabs[n] + ".png")
		canvas = Null
		img = Null
	Next
	
	GCCollect()

End

[crayon-5cba8e49a514a127059673 inline="true" ]#Import "<std>"

#Import "<mojo>"

#Import "<mojox>"

Using std..

Using mojo..

Using mojox..

Function Main()

New AppInstance

New MyWindow

App.Run()

End

'------

Class MyWindow Extends Window

Method New()

Super.New( "Button Demo",640,480,WindowFlags.Resizable )

Local themeDir := AssetsDir() + "/themes"

CreateDir(themeDir, False, False)

CreateButtonPNGs(200, 40, themeDir + "/myButton")

CreateButtonTheme(themeDir + "/myTheme.json")

App.Theme.Load("theme::myTheme.json")

Local image := Image.Load("theme::myButtonUp.png")

Local button:=New PushButton("", image)

'Local button:=New PushButton("")

button.Layout="float"

button.Gravity=New Vec2f( .5,.5 )

button.Style = GetStyle("myButton")

button.Clicked=Lambda()

Alert( "Well done sir!" )

End

ClearColor = Color.LightGrey

ContentView=button

End

'---- Generated Content:

Function CreateButtonTheme:Void(url:String)

Local strJson:String

strJson += "{~n~qextends~q:~qdefault~q,~n"

strJson += "~qstyles~q:{~n"

strJson += "~t~qmyButton~q:{~n"

strJson += "~t~t~qskin~q:~qmyButtonUp.png~q,~n"

strJson += "~t~t~qstates~q:{~n"

strJson += "~t~t~t~qselected~q:{~n"

strJson += "~t~t~t~t~qskin~q:~qmyButtonSelected.png~q~n~t~t~t},~n"

strJson += "~t~t~t~qhover~q:{~n"

strJson += "~t~t~t~t~qskin~q:~qmyButtonHover.png~q~n~t~t~t},~n"

strJson += "~t~t~t~qactive~q:{~n"

strJson += "~t~t~t~t~qskin~q:~qmyButtonActive.png~q~n~t~t~t}~n"

strJson += "~n~t~t}~n"

strJson += "~t}~n}~n}"

Print strJson

SaveString(strJson, url)

End

Function CreateButtonPNGs:Void(w:Int, h:Int, urlStem:String)

Local bLabs:=New String[]("Up", "Active", "Hover", "Selected")

For Local n:=0 until bLabs.Length

Local img := New Image(w, h)

local canvas := New Canvas(img)

canvas.Clear(New Color(Rnd(), Rnd(), Rnd(), 1.0))

canvas.Color=Color.Black

canvas.DrawText(bLabs[n], 0, 0)

canvas.Flush()

Local pm := canvas.CopyPixmap(New Recti(0, 0, img.Width, img.Height))

pm.Save(urlStem + bLabs[n] + ".png")

canvas = Null

img = Null

GCCollect()

End

[/crayon]

Yes, someone needs to document MojoX: it’s actually a very powerful GUI library. Currently you need to poke around the module’s source files (and the TED source code) to figure it out, and that can take ages.

February 12, 2017 at 4:14 am #7111

Danilo

Participant

+1 for the MojoX GUI docs!

February 12, 2017 at 5:52 am #7113

impixi

Participant

I’m seriously considering writing some comprehensive Mojo/MojoX docs. However, it would be a big job and distract me from my current project… Probably worth it though… We’ll see…

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Hiding Button Background Color

Archives

Recent Replies

What is this?