Tattle UI control library for IOS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example-Swift
Example
Screenshot
TattleControl
.gitignore
LICENSE
README.md

README.md

Tattle-UI-iOS


Why do you need Tattle-UI

As a developer, we struggle to understand and reproduce few UI bugs reported by the tester. In tester's point of view, tester writes paragraphs to explain a simple UI misalignment when they test.

Tattle-UI solves this problem by providing a simple mechanism to get UI feedback from testers.

For Android version, please refer to https://github.com/npctech/Tattle-UI-Android

What do you see on your app

After integration, Tattle-UI library adds a floating button on every screen. Tester can click on this button whenever he sees some issue with the UI. Tattle-UI library takes the snapshot of the current screen and allow the tester to mark problematic section using scribbles. Tester may wish to add a audio note along with this. Tattle-UI provides tester to send them in Email. We use anypic app to demo this control.

Integration steps

Objective-C

From github

  • Download the code from github and include the files into your project.
  • Include following frameworks
 OpenGLES.framework
 QuartzCore.framework
 AVFoundation.framework
 CoreGraphics.framework
 MessageUI.framework
 ImageIO.framework  
  • Import "UIController+SnapShotButton.h" file into App-Prefix.pch file. #import "UIController+SnapShotButton.h"
  • Enable Tattle-UI control by adding below line in "AppDelegate.m". #import "TattleControl.h"
  • Invoke enableTattleToWindow: method, after main window creation.
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 
[[TattleControl sharedControl] enableTattleToWindow:self.window]; 

From CocoaPods

  • Podfile
platform :ios, '6.0'
pod 'Tattle-UI-iOS', '~> 1.0.2'
  • Enable Tattle-UI control by adding below line in "AppDelegate.m". #import "TattleControl.h"
  • Invoke enableTattleToWindow: method, after main window creation.
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 
[[TattleControl sharedControl] enableTattleToWindow:self.window];

Swift

From github

  • Download the code from github and include the files into your project.
  • Include following header files into AppModule-Bridging-Header.h
#import "MovableEditorView.h"
#import "Scribble.h"
#import "ScribbleEraseView.h"
#import "ScribblePathPoint.h"
#import "CommonMacro.h"
#import "ScribCapControl.h"
#import "SnapShotView.h"
#import "TattleControl.h"
#import "TAudioManager.h"
#import "TConstants.h"
#import "TFileManager.h"
#import "TPopupView.h"
#import "UIController+SnapShotButton.h"
#import "UIImage+GiffAnimation.h"
  • Invoke enableTattleToWindow: method, after main window creation.
self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
TattleControl.sharedControl().enableTattleToWindow(self.window)

From CocoaPods

  • Podfile
platform :ios, '6.0'
pod 'Tattle-UI-iOS', '~> 1.0.2'
  • Include following header files into AppModule-Bridging-Header.h
#import "MovableEditorView.h"
#import "Scribble.h"
#import "ScribbleEraseView.h"
#import "ScribblePathPoint.h"
#import "CommonMacro.h"
#import "ScribCapControl.h"
#import "SnapShotView.h"
#import "TattleControl.h"
#import "TAudioManager.h"
#import "TConstants.h"
#import "TFileManager.h"
#import "TPopupView.h"
#import "UIController+SnapShotButton.h"
#import "UIImage+GiffAnimation.h"
  • Invoke enableTattleToWindow: method, after main window creation.
self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
TattleControl.sharedControl().enableTattleToWindow(self.window)

Note:

Requirement

  • Minimum ios target : iOS 6
  • Minimum xcode : Xcode 5.0
  • All IOS devices.
  • Only compatible with ARC.

Limitation

  • Only supported for portrait orientation.
  • Audio recording supports only 2 minutes.

Optional Configuration

Objective-C

  • Change scribble color (default black)
[[TattleControl sharedControl] setScribbleColor:YOUR_Color];
  • Change color of floating button
[[TattleControl sharedControl] changeSpotImageColor:YOUR_Color];

We could also insert our own image too instead spot icon.

[[TattleControl sharedControl] setSpotButtonImage:YOUR_Image];
  • Change background color of floating control
[[TattleControl sharedControl] setMovableControlBackgroundColor:YOUR_Color];
[[TattleControl sharedControl] setMovableControlBackgroundColor:YOUR_Color withAlpha:alpha];
  • Set recipients email
[[TattleControl sharedControl] assignRecipientEmailId:@"YOUR_EMAIL_HERE" withCCId:@"YOUR_EMAIL_HERE" emailSubject:@"UI Bug using Tattle UI"];
  • Add more Recipient
[[TattleControl sharedControl] addRecipientMailId:@"YOUR_EMAIL_HERE"];
  • Add more CC
[[TattleControl sharedControl] addCCMailId:@"YOUR_EMAIL_HERE"];

Swift

  • Change scribble color (default black)
TattleControl.sharedControl().setScribbleColor(YOUR_Color)
  • Change color of floating button
TattleControl.sharedControl().changeSpotImageColor(YOUR_Color)

We could also insert our own image too instead spot icon.

TattleControl.sharedControl().setSpotButtonImage(YOUR_Image)
  • Change background color of floating control
TattleControl.sharedControl().setMovableControlBackgroundColor(YOUR_Color)
TattleControl.sharedControl().setMovableControlBackgroundColor(YOUR_Color, withAlpha: alpha)
  • Set recipients email
TattleControl.sharedControl().assignRecipientEmailId("YOUR_EMAIL_HERE", withCCId: "YOUR_EMAIL_HERE", emailSubject: "Bugs")
  • Add more Recipient
TattleControl.sharedControl().addRecipientMailId("YOUR_EMAIL_HERE")
  • Add more CC
TattleControl.sharedControl().addCCMailId("YOUR_EMAIL_HERE")

License

This code is distributed under the terms and conditions of the MIT license.