Sunday, 12 May 2019

isDarkColor() Is it?

The Goal

To decide what colour text to place on an unknown background color.

Example

In this example of using the function isDarkColor(), we switch the background color every time the test button is clicked, then ask the function "is this new background color dark or light" in order to decide what tint color to set for the test buttons title.

isDarkColor() function

func isDarkColor(color){
	const inputColor:Color = color

	const r:Float = Float(inputColor.red)
	const g:Float = Float(inputColor.green)
	const b:Float = Float(inputColor.blue)

	const luminannce = Math.sqrt( ((r * r) * 0.299) + ((g * g) * 0.587) + ((b * b) * 0.114) )

	if ( luminannce > 0.5 ) {
		return false
	}else{
		return true
	}
}

The function simply takes a color as a parameter, and returns true of false. It either is or it isnt a dark color.
In our example we base the buttons title color on that return value every time the background changes color.

.

Saturday, 11 May 2019

Color Saturation

The Goal

image-23

Function

func saturation(color,satval){
 var inputColor:Color = color
 var inputSat:float = Float(satval)
 var outputColor:Color = Color.hsba(inputColor.hue / 360, inputSat / 100, inputColor.brightness, inputColor.alpha)
 return outputColor
}

Takes two parameters:

  • color: Color
  • satval: Int

satval, represents a percentage of saturation required, value between 0 and 100

Example usage's

 self.bacgroundColor = saturation(self.backgroundColor,30)

 var value:Int = 100
 for(var x in self.subviews){
  x.backgroundColor = saturation(self.backgroundColor,value)
  value = value - 10
 }
 // assuming 10 subviews to create a gradient effect accross the views

Why

Creting a HSB based Color requires input values of 0 -1 for all 4 parameters, hue, sat, brightness, and alpa.

Reading a Color.hue: Returns a value between 0 - 360
Reading the reamaining 3 paramaters of a Color returns a value of 0 - 1

Project file

Download Grad Views Project File.

Local Currency TextField

Goal

To have a TextField display as currency in the users local currency, and update as the user types.

Gif

Initial setup

  • New project.
  • Add a TextView.
  • Add a method to the TextView named "formatAsCurrency", it should take one parameter "text", which will be of type String : formatAsCurrency(text)
  • Add a property to the TextView named "formatter"
  • Set the TextView's keyboard style to NumberPad in the TextVievs settings.
  • Check "End on return" and "Clears on editing" checkboxes in the TextVievs settings

Our method

  • 1 : Add this code inside the Changed event of TextView1 :
self.formatAsCurrency(self.text)

return true

  • 2 : Add this code to the Load event of TextView1 :
var formatter:NumberFormatter = NumberFormatter()
formatter.locale = Locale.system()
if(formatter.locale.currencyCode == null){
	formatter.locale = Locale("en_US") // Default Local Fallback
}
formatter.numberStyle = NumberFormatterStyle.Currency
self.formatter = formatter

self.text = self.formatter.stringFromNumber(00000)

  • 3 : Add this code to the DidEndEditing event of TextView1 :
if(self.text.length == 0  or self.text == ""  or self.text == null){
	self.text = self.formatter.stringFromNumber(00000)
}

  • 4 : Add this code to the formatAsCurrency method you created in TextView1 :
var currencySymbol:String = self.formatter.currencySymbol
var groupingSeparator:String = self.formatter.groupingSeparator
var decimalSeparator = self.formatter.decimalSeparator

var newText:String = text
newText = newText.replace(currencySymbol,"")
newText = newText.replace(groupingSeparator,"")
newText = newText.replace(decimalSeparator,"")

var tempText = newText
for (var x in tempText){
	if(x == 0 && newText.length > 1){
		newText = newText[1...-1]
	}else{
		break
	}
}

var newValue:Float = newText.number()

var divisor:Float = 1.0

if(newText.length == 0  or newValue == 0){
	self.text = null
}else if(newText.length > self.formatter.maximumSignificantDigits + 2){
	self.text = self.text
}else{
	if(self.formatter.maximumFractionDigits == 2){
		divisor = 100.0
	}else if(self.formatter.maximumFractionDigits == 3){
		divisor = 1000.0
	}
	var newAmount:Float = newValue / divisor
	self.text = self.formatter.stringFromNumber(newAmount)
}

That's it!

Your done. Enjoy.

Download completed project file

Currency Field Project File.

.

isDarkColor() Is it?

The Goal To decide what colour text to place on an unknown background color. In this example of using the function isDarkColor(), we switch ...