Material

Read more about the article Creating Onboarding Screens for SUSI iOS

Creating Onboarding Screens for SUSI iOS

Onboarding screens are designed to introduce users to how the application works and what main functions it has, to help them understand how to use it. It can also be helpful for developers who intend to extend the current project. When you enter in the SUSI iOS app for the first time, you see the onboarding screen displaying information about SUSI iOS features. SUSI iOS is using Material design so the UI of Onboarding screens are following the Material design. There are four onboarding screens: Login (Showing the login features of SUSI iOS) - Login to the app using SUSI.AI account or else signup to create a new account or just skip login. Chat Interface (Showing the chat screen of SUSI iOS) - Interact with SUSI.AI asking queries. Use microphone button for voice interaction. SUSI Skill (Showing SUSI Skills features) - Browse and try your favorite SUSI.AI Skill. Chat Settings (SUSI iOS Chat Settings) - Personalize your chat settings for the better experience. Onboarding Screens User Interface   There are three important components of every onboarding screen: Title - Title of the screen (Login, Chat Interface etc). Image - Showing the visual presentation of SUSI iOS features. Description - Small descriptions of features. Onboarding screen user control: Pagination - Give the ability to the user to go next and previous onboarding screen. Swiping - Left and Right swipe are implemented to enable the user to go to next and previous onboarding screen. Skip Button - Enable users to skip the onboarding instructions and go directly to the login screen. Implementation of Onboarding Screens: Initializing PaperOnboarding: override func viewDidLoad() { super.viewDidLoad() UIApplication.shared.statusBarStyle = .lightContent view.accessibilityIdentifier = "onboardingView" setupPaperOnboardingView() skipButton.isHidden = false bottomLoginSkipButton.isHidden = true view.bringSubview(toFront: skipButton) view.bringSubview(toFront: bottomLoginSkipButton) } private func setupPaperOnboardingView() { let onboarding = PaperOnboarding() onboarding.delegate = self onboarding.dataSource = self onboarding.translatesAutoresizingMaskIntoConstraints = false view.addSubview(onboarding) // Add constraints for attribute: NSLayoutAttribute in [.left, .right, .top, .bottom] { let constraint = NSLayoutConstraint(item: onboarding, attribute: attribute, relatedBy: .equal, toItem: view, attribute: attribute, multiplier: 1, constant: 0) view.addConstraint(constraint) } }   Adding content using dataSource methods: let items = [ OnboardingItemInfo(informationImage: Asset.login.image, title: ControllerConstants.Onboarding.login, description: ControllerConstants.Onboarding.loginDescription, pageIcon: Asset.pageIcon.image, color: UIColor.skillOnboardingColor(), titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont),OnboardingItemInfo(informationImage: Asset.chat.image, title: ControllerConstants.Onboarding.chatInterface, description: ControllerConstants.Onboarding.chatInterfaceDescription, pageIcon: Asset.pageIcon.image, color: UIColor.chatOnboardingColor(), titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont),OnboardingItemInfo(informationImage: Asset.skill.image, title: ControllerConstants.Onboarding.skillListing, description: ControllerConstants.Onboarding.skillListingDescription, pageIcon: Asset.pageIcon.image, color: UIColor.loginOnboardingColor(), titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont),OnboardingItemInfo(informationImage: Asset.skillSettings.image, title: ControllerConstants.Onboarding.chatSettings, description: ControllerConstants.Onboarding.chatSettingsDescription, pageIcon: Asset.pageIcon.image, color: UIColor.iOSBlue(), titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont)] extension OnboardingViewController: PaperOnboardingDelegate, PaperOnboardingDataSource { func onboardingItemsCount() -> Int { return items.count } func onboardingItem(at index: Int) -> OnboardingItemInfo { return items[index] } }   Hiding/Showing Skip Buttons: func onboardingWillTransitonToIndex(_ index: Int) { skipButton.isHidden = index == 3 ? true : false bottomLoginSkipButton.isHidden = index == 3 ? false : true } Resources: Usage of PaperOnboarding SUSI iOS Link: https://github.com/fossasia/susi_iOS

Continue ReadingCreating Onboarding Screens for SUSI iOS
Read more about the article Introducing Customization in Loklak Media Wall

Introducing Customization in Loklak Media Wall

My GSoC Project includes implementing media wall in loklak search . One part of the issue is to include customization options in media wall. I looked around for most important features that can be implemented in a media wall to give the user a more appealing and personalized view. One of the feature that can be implemented is enabling Full Screen Mode.  This feature can help the user to display media wall on the projector or any big display screen without compromising with space available. In one part, I would be explaining how I implemented Full screen Mode in loklak media wall using fullscreen.js library. Secondly, it is important to include a very reactive and user-friendly setting box. The setting box should be a central container in which all the customization options will be included.In loklak media wall,  setting box is implemented as a dialog box with various classifications in form of tabs. I would also be explaining  how I designed customization menu using Angular Material. Implementation Full Screen Mode Since loklak search is an Angular 2 application and all the code is written in typescript, we can’t simply use the fullscreen.js library. We have to import the library into our application and create a directive that can be applied to the element to use it in the application. Install fullscreen.js library in the application using Node Package Manager. npm install --save screenfull Creating an attribute directive which uses Hostlistener to listen to click on the element. It uses screenfull.toggle() function to call FullScreen JS API whenever user clicks on the element. import {Directive, HostListener, Output, EventEmitter} from '@angular/core'; import * as screenfull from 'screenfull';@Directive({ selector: '[toggleFullscreen]' }) export class ToggleFullscreenDirective {constructor() {}@HostListener('click') onClick() { if (screenfull.enabled) { screenfull.toggle(); } } } Import Directive into the module and add it to declaration. This allows directive to be used anywhere in the template. import { ToggleFullscreenDirective } from '../shared//full-screen.directive'; . . . @NgModule({ . . . declarations: [ . . . ToggleFullscreenDirective, . . . ] }) export class MediaWallModule { } Now, the directive is ready to use on the template. We just have to add this attribute directive to an element. <i toggleFullscreen mdTooltip="Full Screen" mdTooltipPosition="below" class="material-icons md-36">fullscreen</i> Customization Menu Customization Menu is created using the idea of central container for customization. It is created using two components of Angular Material - Dialog Box and Tabs . We will now be looking how customization menu is implemented using these two components. Create a component with the pre-configured position, height and width of the dialog box. This can be done simply using updatePosition and updateSize property of the MdDialogRef class. export class MediaWallCustomizationComponent implements OnInit { public query: string;constructor( private dialogRef: MdDialogRef<MediaWallCustomizationComponent>, private store: Store<fromRoot.State>, private location: Location) { }ngOnInit() { this.dialogRef.updatePosition('10px'); this.dialogRef.updateSize('80%', '80%'); }public searchAction() { if (this.query) { this.store.dispatch(new mediaWallAction.WallInputValueChangeAction(this.query)); this.location.go('/wall', `query=${this.query}`); } } } Create a template for the Customization menu. We will be using md-tab and md-dialog to create a dialog box with options displayed using…

Continue ReadingIntroducing Customization in Loklak Media Wall