How to adopt UI with NuguUIKit

UI Guide

Wrote based on v0.19.0 (updated 2020.09.18)

NuguUIKit

NuguButton

NuguButton is ASR triggering button designed with Nugu service representative images. It is free to initialize with code or interface builder.

Public Properties

    // MARK: - Public Properties (configurable variables)
    
    public enum NuguButtonType {
        case fab(color: NuguButtonColor)
        case button(color: NuguButtonColor)
        
        public enum NuguButtonColor: String {
            case blue
            case white
        }
    }

    public var nuguButtonType: NuguButtonType = .fab(color: .blue)

    // NuguButton is intended to be deactivated when voice chrome has been presented. (listening state)
    // Recommend to deactivate when presenting voice chrome and activate when dismissing voice chrome.
    public var isActivated: Bool

    public func startFlipAnimation() 

    public func stopFlipAnimation()

    public func pauseDeactivateAnimation()

ex>
    func keywordDetectorStateDidChange(_ state: KeywordDetectorState) {
        switch state {
        case .active:
            DispatchQueue.main.async { [weak self] in
                self?.nuguButton.startFlipAnimation()
            }
        case .inactive:
            DispatchQueue.main.async { [weak self] in
                self?.nuguButton.stopFlipAnimation()
            }
        }
    }

NuguVoiceChrome

• NuguVoiceChrome is designed in accordance with recommended size. Note that NuguVoiceChrome might look awkward in other sizes

Initialize

import NuguUIKit

let frame = CGRect(
    x: 0, 
    y: view.frame.size.height, 
    width: view.frame.size.width, 
    height: NuguVoiceChrome.recommendedHeight + bottomSafeAreaHeight
)
var nuguVoiceChrome = NuguVoiceChrome(frame: frame)

Public property and APIs

    // MARK: - Public Properties (configurable variables)
    
    public enum NuguVoiceChromeTheme {
        case light
        case dark
    }

    public var theme: NuguVoiceChromeTheme

    // MARK: - Public APIs

    func changeState(state: NuguVoiceChrome.State)

    func setChipsData(chipsData: [NuguChipsButton.NuguChipsButtonType], onChipsSelect: @escaping (_ text: String?) -> Void) 

    func setRecognizedText(text: String?)

public extension NuguVoiceChrome {
    enum State {
        case listeningPassive
        case listeningActive
        case processing
        case speaking
        case speakingError
    }
}

NuguChipsView

NuguChipsView is scrollView based UIView helps to trigger TextAgent command with NuguChipsButton inside. It is free to initialize with code or interface builder.

Public properties

    // MARK: - NuguChipsView.NuguChipsViewTheme
    
    public enum NuguChipsViewTheme {
        case light
        case dark
    }
    
    // MARK: - Public Properties (configurable variables)
    
    public var onChipsSelect: ((_ text: String?) -> Void)?
    
    public var willStartScrolling: (() -> Void)?
    
    public var theme: NuguChipsViewTheme = .light
    
    public var chipsData: [NuguChipsButton.NuguChipsButtonType] = []

NuguToast

NuguToast is a Singleton instance which controls a UIView (just like Android's Toast) added on top of the UIWindow of application for informing important notices of service.

Public APIs

    func showToast(message: String?, bottomMargin: CGFloat? = nil)

    func hideToastIfNeeded()