How to add a new SwiftUI Color - colors

How can i add a SwiftUI Color? Normally on UIKit you can create your own Colors but in SwiftUI con Color struct it's not easy like UIColor, but it's not complicate.
extension UIColor {
UIColor(red: 219/255, green: 175/255, blue: 15/255, alpha: 1.0)
}

You can create your own SwiftUI Color with Color extension in a new file.swift
import SwiftUI
extension Color {
public static var myCustomColor: Color {
return Color(UIColor(red: 219/255, green: 175/255, blue: 15/255, alpha: 1.0))
}
}

You can create a color set like this one (which is called "black")
And after in your code just create an extension of Color:
import SwiftUI
extension Color {
static let customBlack = Color("black")
}
And when you will use this customBlack, if you turn you app in darkMode it will use the dark appearance that you have set in your colorset.
You can use it like this in your code:
Image(systemName: "person.crop.circle")
.foregroundColor(.customBlack)

Add New color set file in Assets.xcassets and colors with name.
Code:
Color("ColorName")

You can create new SwiftUI color with an extension of Color.
The extension does not need to be in a new Swift file, but it keeps your code clean to collect all Color extensions in one file.
Method 1: Use the RGB initializer:
(this is what OP was asking)
extension Color {
public static let myNewSwiftUIColor = Color(red: 219.0 / 255.0, green: 175.0 / 255.0, blue: 15.0 / 255.0, opacity: 1)
}
Parameter opacity replaces alpha
No need to call UIColor initializer
Use let, not var.
Method 2: Use XCode Color Set:
(others have answered, but incomplete or problematic)
extension Color {
public static let myNewSwiftUIColor = Color("myNewSwiftUIColor")
}
Use new color in your code:
Text("Example")
.foregroundcolor(Color.myNewSwiftUIColor)
Hint 1:
I had been wondering how to choose a color in a Color Set in Assets.
For those who didn't find this yet:
In Assets.xcassets, click on the Plus icon to add a Color Set.
Give it a name by double clicking newly created color set 'Color' in the asset list. This will be the name string you have to provide in extension Color. E.g. myNewSwiftUIColor
Click on one of the white color pads (Any Appearance / Dark Appearance).
Then in the right column of XCode, click on the gauge icon to show Attributes Inspector.
Make your color choice from the well known picker GUI ;-)
Seems simple once you know it.
Hint 2:
As with all definitions, you can give a inline documentation that will show up in many places in XCode, e.g. Quick Help.
/// Like Color.green with a tad more yellow
/// - Note: Customized from Color 'Spring' from palette 'Crayons'
public static let crayonOffSpring = Color("crayonOffSpring") }
I have found this helpful especially with colors, as to remember what it's for or where it came from.

You can create Color+Extension.swift file and add RGB's of your colors.
import SwiftUI
extension Color {
public static var brokenWhite: Color {
return Color(red: 238.0 / 255.0, green: 238.0 / 255.0, blue: 238.0 / 255.0)
}
public static var darkGray: Color {
return Color(red: 57.0 / 255.0, green: 62.0 / 255.0, blue: 70.0 / 255.0)
}
}

I prefer to create a named color on assets and put it in my extension, this way I don't have any problem switching between light and dark mode
extension Color {
public static var primary: Color {
return Color("primary-color")
}
}

import SwiftUI
extension Color {
init(red: Int, green: Int, blue: Int, opacity: Double = 1) {
self.init(
.sRGB,
red: Double(red) / 255.0,
green: Double(green) / 255.0,
blue: Double(blue) / 255.0,
opacity: opacity
)
}
static var twitterBlue: Color {
return .init(red: 0, green: 0, blue: 255)
}
}

Related

fabric.js: How to set stroke thickness of selection box and controls?

In fabric.js, how do you adjust stroke thickness for the object selection box and control handles?
There's a bunch of customization options available, however it isn't clear on how you can customized stroke thickness. Is it possible, perhaps through an indirect way?
Note: The properties selectionColor, selectionBorderColor, selectionLineWidth are misleading... they have to do with the temporary selection box that appears when attempting to do a fresh drag-select across the canvas. Once your selection is made, it disappears and then you see the persistent object selection box with control handles (the thing I'm trying to customize).
See links:
http://fabricjs.com/customization
http://fabricjs.com/controls-customization
Ok here's a 2-part solution:
https://codepen.io/MarsAndBack/pen/bGExXzd
For the selection box stroke thickness:
Use fabric.Object.prototype.set to customize any object selection globally. Also, borderScaleFactor is documented, but not included in the fabric.js customization demos:
fabric.Object.prototype.set({
borderScaleFactor: 6
})
For the control handle stroke thickness:
Here we override differently, and actually draw new elements using standard HTML5 canvas properties. Through this method you could also target specific control handles and even use image icons.
fabric.Object.prototype._drawControl = controlHandles
fabric.Object.prototype.cornerSize = 20
function controlHandles (control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return
}
var size = this.cornerSize
// Note 1: These are standard HTML5 canvas properties, not fabric.js.
// Note 2: Order matters, for instance putting stroke() before strokeStyle may result in undesired effects.
ctx.beginPath()
ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
ctx.fillStyle = "pink"
ctx.fill()
ctx.lineWidth = 4 // This is the stroke thickness
ctx.strokeStyle = "red"
ctx.stroke()
}
SO code snippet:
const canvas = new fabric.Canvas("myCanvas")
canvas.backgroundColor="#222222"
this.box = new fabric.Rect ({
width: 240,
height: 100,
fill: '#fff28a',
myType: "box"
})
canvas.add(this.box)
this.box.center()
// Selection box border properties
// ----------------------------------------
fabric.Object.prototype.set({
borderColor: "white",
borderScaleFactor: 6
})
// Control handle properties
// ----------------------------------------
fabric.Object.prototype._drawControl = controlHandles
fabric.Object.prototype.cornerSize = 20
function controlHandles (control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return
}
var size = this.cornerSize
// Note 1: These are standard HTML5 canvas properties, not fabric.js.
// Note 2: Order matters, for instance putting stroke() before strokeStyle may result in undesired effects.
ctx.beginPath()
ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
ctx.fillStyle = "pink"
ctx.fill()
ctx.lineWidth = 4
ctx.strokeStyle = "red"
ctx.stroke()
}
<script src="https://pagecdn.io/lib/fabric/3.6.3/fabric.min.js"></script>
<canvas id="myCanvas" width="700" height="400"></canvas>

Add Gradient to UILabel text in Swift 4

I'm trying to add gradient to a text in UILabel in table view cell in cellForRowAtIndexPath method, with the following code:
cell.cellLabel.textColor = UIColor(patternImage: UIImage(named: "gradientText"))
where "gradientText" is a png file of a gradient required & textColor is the UILabel in the cell. But the text color remains to be the default color. Can I achieve it without using any third party code.
Reference link
extension UILabel {
func setTextColorToGradient(image: UIImage) {
UIGraphicsBeginImageContext(frame.size)
image.draw(in: bounds)
let myGradient = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
self.textColor = UIColor(patternImage: myGradient!)
}
}
You can use like this :
cell.cellLabel.setTextColorToGradient(image: UIImage(named: "gradientText")!)

Xamarin.Forms get standard color of TextCell's label

I have a custom ViewCell with a StackLayout like this:
var viewLayout = new StackLayout () {
Padding = new Thickness (10, 0, 10, 0),
Orientation = StackOrientation.Horizontal,
Children = { nameLabel, button1, button2 }
};
When I use Xamarin.Forms standard ViewCells, i.e "TextCell", the label will get a blueish color on Android. My questions is: Where can I find this property? I want to set it to my custom nameLabel like this:
nameLabel.TextColor = TextCell.StandardTextColorForCurrentPlatform;
For TextCells:-
On Android you can get this value via Color.Accent.
On WindowsPhone use the system-defined PhoneForegroundBrush.
iOS appears to be hard coded to black.
You can write a simple DependencyService to return the appropriate color per the platform your executing on.

Gradient text fill using GD - PHP

I need a function that renders gradient on a text using GD
something like
function gradientText($text,$font,$color1,$color2)
{
..
}
I suggest you try to build that function based your own needs.
You will want to center the text vertically/horizontal, change font size, etc...
Start on this function by Christopher Kramer, code is also below this answer...
http://www.php.net/manual/en/function.imagefill.php#93920
then you can use imagettfbbox if you want to use custom font files.
http://www.php.net/manual/en/function.imagettfbbox.php
Here is a sample image I generated using those 2 functions.
Pasting Chris' code of gradient here for reference:
<?php
function gradient($w=100, $h=100, $c=array('#FFFFFF','#FF0000','#00FF00','#0000FF'), $hex=true) {
/*
Generates a gradient image
Author: Christopher Kramer
Parameters:
w: width in px
h: height in px
c: color-array with 4 elements:
$c[0]: top left color
$c[1]: top right color
$c[2]: bottom left color
$c[3]: bottom right color
if $hex is true (default), colors are hex-strings like '#FFFFFF' (NOT '#FFF')
if $hex is false, a color is an array of 3 elements which are the rgb-values, e.g.:
$c[0]=array(0,255,255);
*/
$im=imagecreatetruecolor($w,$h);
if($hex) { // convert hex-values to rgb
for($i=0;$i<=3;$i++) {
$c[$i]=hex2rgb($c[$i]);
}
}
$rgb=$c[0]; // start with top left color
for($x=0;$x<=$w;$x++) { // loop columns
for($y=0;$y<=$h;$y++) { // loop rows
// set pixel color
$col=imagecolorallocate($im,$rgb[0],$rgb[1],$rgb[2]);
imagesetpixel($im,$x-1,$y-1,$col);
// calculate new color
for($i=0;$i<=2;$i++) {
$rgb[$i]=
$c[0][$i]*(($w-$x)*($h-$y)/($w*$h)) +
$c[1][$i]*($x *($h-$y)/($w*$h)) +
$c[2][$i]*(($w-$x)*$y /($w*$h)) +
$c[3][$i]*($x *$y /($w*$h));
}
}
}
return $im;
}
function hex2rgb($hex)
{
$rgb[0]=hexdec(substr($hex,1,2));
$rgb[1]=hexdec(substr($hex,3,2));
$rgb[2]=hexdec(substr($hex,5,2));
return($rgb);
}
// usage example
$image=gradient(300, 300, array('#000000', '#FFFFFF', '#FF0000', '#0000FF'));
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
Using GD
http://planetozh.com/blog/my-projects/images-php-gd-gradient-fill/ offers a class to create a gradient with GD.
Gradient can be linear (horizontal or vertical), radial, rectangle, diamond. That's the same options you would find on Adobe Photoshop.
The class methods fill rectangular areas with a gradient, so you could achieve a rather great gradient effect with the following method:
create a gradient rectangle with this class
write your text in the specified font
mix them:
you could cut the gradient picture with the shape of the text picture
you could apply the gradient picture as a pattern for the text picture
Using ImageMagick
Instead to use GD, I would use ImageMagick.
See http://www.imagemagick.org/Usage/fonts/#gradient for a sample of how to use ImageMagick to achieve that, and http://www.imagemagick.org/Usage/canvas/#gradient for all the gradients options.

LWUIT ComboBox Text Color Issue

The ComboBox text color is white even though I've set it to black in my theme. The text color of TextField is black as supposed to. How come the ComboBox text color isn't black?
The theme:
fgColor=FFFFFF
bgColor=000000
sel#fgColor=FFFFFF
sel#bgColor=EE8207
ComboBox.fgColor=000000
ComboBox.bgColor=FFFFFF
ComboBox.sel#fgColor=000000
ComboBox.sel#bgColor=FFFFFF
TextField.fgColor=000000
TextField.bgColor=FFFFFF
TextField.sel#fgColor=000000
TextField.sel#bgColor=FFFFFF
You can change the text color like this
Style selStyle = UIManager.getInstance().getComponentSelectedStyle("ComboBoxItem");
selStyle.setFgColor(0x00AF00); // Selected Item will be in green color
UIManager.getInstance().setComponentSelectedStyle("ComboBoxItem", selStyle);
Style unSelStyle = UIManager.getInstance().getComponentStyle("ComboBoxItem");
unSelStyle.setFgColor(0x000000); // Selected Item will be in black color
UIManager.getInstance().setComponentStyle("ComboBoxItem", unSelStyle);
This will work out!!
You should use hexColors: "0x000000" or "0xffffff"
You can also set the color in your app using following methods.
lwuit uses int's to set a color, to calculate the int use the following function.
public static int colorStringToInt(String hexColor) {
int color;
try {
color = Integer.parseInt(hexColor.substring(2), 16);
return color;
} catch (Exception ex) {
ex.printStackTrace();
return -1;//no negative colors
}
}
set the color like this.
int color = AppUtils.colorStringToInt("0xffffff");//white
if (color != -1) {
b.getStyle().setFgColor(color, true);
}
you can use like this,
ComboBoxItem.fgColor=000000
ComboBoxItem.sel#fgColor=ffffff
Are you using ResourceEdit. If u r not using means use the ResourceEdit and create the theme.

Resources