WIP - custom widget icon

This commit is contained in:
Trey t
2022-02-13 22:15:53 -06:00
parent 56d7e40c27
commit 649180dbb5
7 changed files with 372 additions and 250 deletions

View File

@@ -8,25 +8,98 @@
import SwiftUI
class CustomIcon: ObservableObject {
init(leftEye: AnyView,
rightEye: AnyView,
mouth: AnyView,
background: [(AnyView, UUID)],
static let numberOfBGItems = 99
init(leftEye: Image,
rightEye: Image,
mouth: Image,
background: [(Image, UUID)],
bgColor: Color,
innerColor: Color) {
innerColor: Color,
bgOverlayColor: Color) {
self.leftEye = leftEye
self.rightEye = rightEye
self.mouth = mouth
self.background = background
self.bgColor = bgColor
self.innerColor = innerColor
self.bgOverlayColor = bgOverlayColor
}
@Published var leftEye: AnyView
@Published var rightEye: AnyView
@Published var mouth: AnyView
@Published var leftEye: Image
@Published var rightEye: Image
@Published var mouth: Image
@Published var background: [(AnyView, UUID)]
@Published var background: [(Image, UUID)]
@Published var bgColor: Color
@Published var innerColor: Color
@Published var bgOverlayColor: Color
}
enum BackGroundOptions: String, CaseIterable {
case horrible
case bad
case average
case good
case great
case random
static var selectable: [BackGroundOptions] {
return [.great, .good, .average, .bad, .horrible]
}
}
enum Eyes {
case left
case right
}
enum EyeOptions: String, CaseIterable {
case fire = "fire"
case bolt = "bolt2"
case dollar = "dollar"
case bell = "bell"
case btc = "btc"
case code = "code"
case crown = "crown"
case divide = "divide"
case exclamation = "exclamation"
case fan = "fan"
case floppy = "floppy"
case x = "x"
case skull = "skull"
case covid = "covid"
case bomb = "bomb"
case skull2 = "skull2"
case poo = "poo"
static public var defaultOption: Image {
let image = Image(EyeOptions.fire.rawValue, bundle: .main)
return image
}
}
enum MouthOptions: String, CaseIterable {
case fire = "fire"
case bolt = "bolt2"
case dollar = "dollar"
case bell = "bell"
case btc = "btc"
case code = "code"
case crown = "crown"
case divide = "divide"
case exclamation = "exclamation"
case fan = "fan"
case floppy = "floppy"
case x = "x"
case skull = "skull"
case covid = "covid"
case bomb = "bomb"
case skull2 = "skull2"
case poo = "poo"
static public var defaultOption: Image {
let image = Image(MouthOptions.bomb.rawValue, bundle: .main)
return image
}
}

View File

@@ -113,6 +113,23 @@ extension View {
view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
}
}
func asImage(size: CGSize) -> UIImage {
let controller = UIHostingController(rootView: self)
controller.view.bounds = CGRect(origin: .zero, size: size)
let image = controller.view.asImage()
return image
}
}
extension UIView {
func asImage() -> UIImage {
let format = UIGraphicsImageRendererFormat()
format.scale = 1
return UIGraphicsImageRenderer(size: self.layer.frame.size, format: format).image { context in
self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)
}
}
}
extension Date {

View File

@@ -7,111 +7,50 @@
import SwiftUI
enum BackGroundOptions: String, CaseIterable {
case horrible
case bad
case average
case good
case great
case random
static var selectable: [BackGroundOptions] {
return [.great, .good, .average, .bad, .horrible]
}
}
enum Eyes {
case left
case right
}
enum EyeOptions: String, CaseIterable {
case fire = "fire"
case bolt = "bolt2"
case dollar = "dollar"
case bell = "bell"
case btc = "btc"
case code = "code"
case crown = "crown"
case divide = "divide"
case exclamation = "exclamation"
case fan = "fan"
case floppy = "floppy"
case x = "x"
case skull = "skull"
case covid = "covid"
case bomb = "bomb"
case skull2 = "skull2"
case poo = "poo"
static public var defaultOption: AnyView {
let image = Image(EyeOptions.fire.rawValue, bundle: .main)
.resizable()
.frame(width: 20, height: 20)
return AnyView(image)
}
}
enum MouthOptions: String, CaseIterable {
case fire = "fire"
case bolt = "bolt2"
case dollar = "dollar"
case bell = "bell"
case btc = "btc"
case code = "code"
case crown = "crown"
case divide = "divide"
case exclamation = "exclamation"
case fan = "fan"
case floppy = "floppy"
case x = "x"
case skull = "skull"
case covid = "covid"
case bomb = "bomb"
case skull2 = "skull2"
case poo = "poo"
static public var defaultOption: AnyView {
let image = Image(MouthOptions.bomb.rawValue, bundle: .main)
.resizable()
.frame(width: 20, height: 20)
return AnyView(image)
}
}
struct CreateIconView: View {
@State private var mouth: AnyView = MouthOptions.defaultOption
@StateObject private var customIcon = CustomIcon(leftEye: EyeOptions.defaultOption,
rightEye: EyeOptions.defaultOption,
mouth: MouthOptions.defaultOption,
background: [(AnyView, UUID)](),
bgColor: .red,
innerColor: .green)
@AppStorage(UserDefaultsStore.Keys.customIcon.rawValue, store: GroupUserDefaults.groupDefaults) private var savedCustomIcon = Data()
@AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
static var iconViewBGs: [(Image, UUID)] = {
var blah = [(Image, UUID)]()
for _ in 0...99 {
let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
blah.append((image, UUID()))
}
return blah
}()
@State private var mouth: Image = MouthOptions.defaultOption
@StateObject private var customIcon = CustomIcon(leftEye: EyeOptions.defaultOption,
rightEye: EyeOptions.defaultOption,
mouth: MouthOptions.defaultOption,
background: CreateIconView.iconViewBGs,
bgColor: .red,
innerColor: .green,
bgOverlayColor: .black)
private var randomElements: [AnyView] = [
AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
.resizable()
.frame(width: 20, height: 20)),
.resizable()
.frame(width: 20, height: 20)),
AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
.resizable()
.frame(width: 20, height: 20)),
.resizable()
.frame(width: 20, height: 20)),
AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
.resizable()
.frame(width: 20, height: 20)),
.resizable()
.frame(width: 20, height: 20)),
AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
.resizable()
.frame(width: 20, height: 20))
.resizable()
.frame(width: 20, height: 20))
]
func update(eye: Eyes, eyeOption: EyeOptions) {
let image = Image(eyeOption.rawValue, bundle: .main)
.resizable()
.frame(width: 20, height: 20)
switch eye {
case .left:
customIcon.leftEye = AnyView(image)
customIcon.leftEye = image
case .right:
customIcon.rightEye = AnyView(image)
customIcon.rightEye = image
}
}
@@ -136,9 +75,7 @@ struct CreateIconView: View {
}
func update(mouthOption: MouthOptions) {
let image = AnyView(Image(mouthOption.rawValue, bundle: .main)
.resizable()
.frame(width: 20, height: 20))
let image = Image(mouthOption.rawValue, bundle: .main)
customIcon.mouth = image
}
@@ -146,25 +83,15 @@ struct CreateIconView: View {
customIcon.background.removeAll()
if background == .random {
for _ in 0...120 {
for _ in 0...CustomIcon.numberOfBGItems {
let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
let sizedImage = image
.resizable()
.frame(width: 20, height: 20)
customIcon.background.append((AnyView(sizedImage), UUID()))
customIcon.background.append((image, UUID()))
}
return
}
let image = Image(background.rawValue, bundle: .main)
let sizedImage = image
.resizable()
.frame(width: 20, height: 20)
for _ in 0...120 {
customIcon.background.append((AnyView(sizedImage), UUID()))
for _ in 0...CustomIcon.numberOfBGItems {
customIcon.background.append((image, UUID()))
}
}
@@ -182,99 +109,134 @@ struct CreateIconView: View {
}
var iconView: some View {
IconView(customIcon: customIcon)
IconView(customIcon: customIcon, isPreview: true)
}
var body: some View {
VStack {
iconView
.padding()
.frame(width: 256, height: 256)
.cornerRadius(10)
.padding(.top)
Spacer()
VStack {
ColorPicker("Set the background color", selection: $customIcon.bgColor)
.padding([.leading, .trailing])
.padding([.leading, .trailing])
ColorPicker("Set the inner color", selection: $customIcon.innerColor)
.padding([.leading, .trailing])
.padding([.leading, .trailing])
}
HStack {
Spacer()
Menu("Left Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .left, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
Spacer()
Menu("Right Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .left, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
Spacer()
Menu("Mouth") {
ForEach(MouthOptions.allCases, id: \.self) { option in
Button(action: {
update(mouthOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
Spacer()
}
.padding(.top, 10)
VStack{
Text("Background")
ZStack {
Color(theme.currentTheme.secondaryBGColor)
HStack {
ForEach(BackGroundOptions.selectable, id: \.self) { bg in
Image(bg.rawValue, bundle: .main)
.resizable()
.frame(width: CGFloat(50), height: CGFloat(50), alignment: .center)
.onTapGesture {
update(background: bg)
}
}
mixBG
.onTapGesture {
update(background: .random)
Spacer()
Menu("Left Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .left, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
Spacer()
Menu("Right Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .right, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
Spacer()
Menu("Mouth") {
ForEach(MouthOptions.allCases, id: \.self) { option in
Button(action: {
update(mouthOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
Spacer()
}
}
.frame(height: 44)
.padding(.top, 10)
Button(action: {
createRandom()
}, label: {
Text("Random")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color(UIColor.white))
.frame(minWidth: 0, maxWidth: .infinity)
.background(.blue)
})
ZStack {
Color(theme.currentTheme.secondaryBGColor)
VStack{
Text("Background")
HStack {
ForEach(BackGroundOptions.selectable, id: \.self) { bg in
Image(bg.rawValue, bundle: .main)
.resizable()
.frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
minHeight: 10, idealHeight: 40, maxHeight: 40,
alignment: .center)
.onTapGesture {
update(background: bg)
}
}
mixBG
.onTapGesture {
update(background: .random)
}
ColorPicker("", selection: $customIcon.bgOverlayColor)
}
.padding([.leading, .trailing])
}
}
.frame(height: 88)
.frame(minWidth: 0, maxWidth: .infinity)
.padding(.top, 10)
Button(action: {
// let icon = icon
}, label: {
Text("Save")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color(UIColor.white))
.frame(minWidth: 0, maxWidth: .infinity)
.background(.green)
})
ZStack {
VStack{
Color(theme.currentTheme.secondaryBGColor)
Button(action: {
createRandom()
}, label: {
Text("Random")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color(UIColor.white))
.frame(minWidth: 0, maxWidth: .infinity)
})
.frame(height: 44)
.background(.blue)
Button(action: {
let bigIconView = IconView(customIcon: customIcon, isPreview: false)
.frame(width: 1024, height: 1024, alignment: .center)
.aspectRatio(contentMode: .fit)
let icon = bigIconView.snapshot()
if let data = icon.pngData() {
savedCustomIcon = data
}
}, label: {
Text("Save")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color(UIColor.white))
.frame(minWidth: 0, maxWidth: .infinity)
.background(.green)
})
.frame(height: 44)
}
}
.frame(height: 88)
}
.background(
theme.currentTheme.bg
.edgesIgnoringSafeArea(.all)
)
}
}

View File

@@ -10,70 +10,125 @@ import SwiftUI
struct IconView: View {
@State public var customIcon: CustomIcon
private let facePercSize = 0.6
public let isPreview: Bool
private var gridXOffset: CGFloat {
if isPreview {
return CGFloat(0)
}
return CGFloat(6)
}
private var gridYOffset: CGFloat {
if isPreview {
return CGFloat(0)
}
return CGFloat(-8)
}
let columns = [
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0),
GridItem(.fixed(20), spacing: 0)
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1)
]
var body: some View {
ZStack {
LazyVGrid(columns: columns, spacing: 0) {
ForEach(customIcon.background, id: \.self.1) {
$0.0
GeometryReader { geo in
ZStack {
Rectangle()
.fill(
customIcon.bgColor
)
.frame(width: geo.size.width, height: geo.size.height, alignment: .center)
.position(x: geo.size.width/2, y: geo.size.height/2)
LazyVGrid(columns: columns, alignment: .leading, spacing: 0) {
ForEach(customIcon.background, id: \.self.1) { (image, uuid) in
image
.resizable()
.aspectRatio(1, contentMode: .fill)
.foregroundColor(customIcon.bgOverlayColor)
}
}
}
.frame(width: 200, height: 200)
.position(x: 100, y: 110)
Circle()
.strokeBorder(Color.black, lineWidth: 12)
.background(Circle().fill(customIcon.innerColor))
.frame(width: 120, height: 120, alignment: .center)
VStack {
Spacer()
.frame(height: 70)
HStack {
Spacer()
.frame(width: 72)
customIcon.leftEye
Spacer()
.frame(width: 20)
customIcon.rightEye
Spacer()
}
Spacer()
.frame(height: 28)
.frame(width: geo.size.width,
height: geo.size.height,
alignment: .center)
.position(x: geo.size.width/2 + gridXOffset,
y: geo.size.height/2 + gridYOffset)
.background(
.clear
)
Circle()
.strokeBorder(Color.black, lineWidth: geo.size.width * 0.045)
.background(Circle().fill(customIcon.innerColor))
.frame(width: geo.size.width*facePercSize,
height: geo.size.height*facePercSize,
alignment: .center)
.position(x: geo.size.width/2, y: geo.size.height/2)
customIcon.leftEye
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geo.size.width*0.12,
height: geo.size.height*0.12,
alignment: .center)
.position(x: geo.size.width*0.4,
y: geo.size.height*0.4)
customIcon.rightEye
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geo.size.width*0.12,
height: geo.size.height*0.12,
alignment: .center)
.position(x: geo.size.width*0.6,
y: geo.size.height*0.4)
customIcon.mouth
Spacer()
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geo.size.width*0.12,
height: geo.size.height*0.12,
alignment: .center)
.position(x: geo.size.width*0.5,
y: geo.size.height*0.59)
}
.position(x: geo.size.width/2,
y: geo.size.height/2)
}
.frame(width: 200, height: 200)
.background(
customIcon.bgColor
)
.cornerRadius(10)
}
}
struct IconView_Previews: PreviewProvider {
static var backgrounds: [(Image, UUID)] = {
var blah = [(Image, UUID)]()
for _ in 0...CustomIcon.numberOfBGItems {
let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
blah.append((image, UUID()))
}
return blah
}()
static var previews: some View {
IconView(customIcon: CustomIcon(leftEye: EyeOptions.defaultOption,
rightEye: EyeOptions.defaultOption,
mouth: MouthOptions.defaultOption,
background: [(AnyView, UUID)](),
background: IconView_Previews.backgrounds,
bgColor: .red,
innerColor: .green))
innerColor: .green,
bgOverlayColor: .orange),
isPreview: true)
.frame(width: 256, height: 256, alignment: .center)
}
}