Code Monkey home page Code Monkey logo

slick's Introduction

Slick

Swift Platforms Swift Package Manager

A SwiftUI View for displaying a soft, backlit background around images (like an oil slick).

Usage

Import Slick into the file for your SwiftUI View which will use the Slick view:

import Slick

Create a SlickView, passing the NSImage you want to display as the first parameter. SlickView takes a trailing closure which you should use to render the image as you see fit.

For example, to display an image named "astronaut" in your app bundle:

SlickView(NSImage(named: "astronaut")) { nsImage in
  Image(nsImage: nsImage)
    .resizable()
    .aspectRatio(contentMode: .fit)
}

Which will render:

Debug View

Slick allows you to render a debug view to show which parts of your image are being sampled and the colours which are being sampled from each section. To render the debug view, simply add a SlickDebugView and wrap both in a SlickDebugContainerView, for example:

SlickDebugContainerView {
  HStack(alignment: .top) {
    SlickView(NSImage(named: "astronaut")) { nsImage in
      Image(nsImage: nsImage)
        .resizable()
        .aspectRatio(contentMode: .fit)
    }
    SlickDebugView()
  }
}

SlickDebugContainerView is required to connect the SlickView and SlickDebugView together.

Setup

[Preferred] Swift Package Manager

Slick is best installed using the Swift Package Manager. Add the following to your target's dependencies in Package.swift:

dependencies: [
    ...,
    .package(url: "https://github.com/alexrozanski/Slick.git", .upToNextMajor(from: "1.0.0"))
]

Or add it as a dependency by specifying https://github.com/alexrozanski/Slick.git through Xcode's Package Dependencies UI.

Manual

  • Clone the Slick repository:
git clone https://github.com/alexrozanski/Slick.git # or [email protected]:alexrozanski/Slick.git with SSH
  • Open Slick.xcodeproj in Xcode and build the Slick target in Debug or Release mode (depending on how you will be using the framework).
  • Open the products folder from Xcode using Product > Show Build Folder in Finder from the Xcode menu.
  • Find Slick.framework in either the Debug or Release folder (depending on how you built the framework).
  • Drag Slick.framework to the Project Navigator (sidebar) of your Xcode project, checking 'Copy items if needed' and checking the correct target that you want the framework to be added to.

Sample App

The SlickExample app shows an example of Slick in action, with some sample images and info showing which sections of the image and which colours were sampled.

SlickExample app

Credits

  • Atomic Object's blog post on extracting colours from images was very helpful in implementing the image colour extraction logic in Slick.
  • Sample images generated using Apple's runner of Stable Diffusion on Apple Silicon.

License

Slick is released under the MIT license. See LICENSE for more details.

slick's People

Contributors

alexrozanski avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.