An iOS framework for easily adding drawings and text to images.

Related tags

Graphics jot
Overview

Open Source at IFTTT

jot Logo

CocoaPods Version Build Status Coverage Status

jot is an easy way to add touch-controlled drawings and text to images in your iOS app.

FastttCamera

What's jot for?

Annotating Images

jot is the easiest way to add annotations to images with a touch interface. You can draw arrows or circle important things, as well as add resizable, rotatable text captions, and easily save the notes on top of a image using drawOnImage:.

Whiteboard or Drawing Apps

jot is perfect for quick sketches and notes in your whiteboard or drawing app. It's easy to change the drawing color or stroke width, and when you're done, you can call renderImageOnColor: to save the sketch.

Signatures

jot is a great solution if you need to collect user signatures through a touch interface. Set the drawingColor to black, set the state to JotViewStateDrawing, and save the signature when the user is done by calling renderImageOnColor:.

Installation

jot is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "jot"

Example Project

To run the example project, clone the repo, and run pod install from the Example directory.

Usage

Add an instance of JotViewController as a child of your view controller. Adjust the size and layout of JotViewController 's view however you'd like.

#import "ExampleViewController.h"
#import <jot/jot.h>

@interface ExampleViewController ()
@property (nonatomic, strong) JotViewController *jotViewController;
@end

@implementation ExampleViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    _jotViewController = [JotViewController new];
    self.jotViewController.delegate = self;
    
    [self addChildViewController:self.jotViewController];
    [self.view addSubview:self.jotViewController.view];
    [self.jotViewController didMoveToParentViewController:self];
    self.jotViewController.view.frame = self.view.frame;
}

Switch between drawing, text manipulation, and text edit mode.

- (void)switchToDrawMode
{
	self.jotViewController.state = JotViewStateDrawing;
}

- (void)switchToTextMode
{
	self.jotViewController.state = JotViewStateText;
}

- (void)switchToTextEditMode
{
	self.jotViewController.state = JotViewStateEditingText;
}

Clear the drawing.

// Clears text and drawing
[self.jotViewController clearAll];

// Clears only text
[self.jotViewController clearText];

// Clears only drawing
[self.jotViewController clearDrawing];

Image Output

Draw on a background image.

- (UIImage *)imageWithDrawing
{
	UIImage *myImage = self.imageView.image;
	return [self.jotViewController drawOnImage:myImage];
}

Draw on a color.

- (UIImage *)imageOnColorWithDrawing
{
	UIColor *backgroundColor = self.view.backgroundColor;
	return [self.jotViewController renderImageOnColor:backgroundColor];
}

Draw on a transparent background.

- (UIImage *)imageOnColorWithDrawing
{
	UIColor *backgroundColor = self.view.backgroundColor;
	return [self.jotViewController renderImage];
}

Basic Configuration

Text Settings

Change the font.

self.jotViewController.font = [UIFont boldSystemFontOfSize:64.f];

Change the font size.

self.jotViewController.fontSize = 64.f;

Change the text color.

self.jotViewController.textColor = [UIColor redColor];

Set the initial text string.

self.jotViewController.textString = @"Hello World";

Drawing Settings

Change the drawing stroke color.

self.jotViewController.drawingColor = [UIColor magentaColor];

Change the drawing stroke width.

self.jotViewController.drawingStrokeWidth = 10.f;

Make the drawing stroke a constant width, instead of the default dynamically variable width.

self.jotViewController.drawingConstantStrokeWidth = YES;

Advanced Configuration

Text Settings

Set the text to wrap to the width of the view.

self.jotViewController.fitOriginalFontSizeToViewWidth = YES;

Set the text alignment (only applies if text is set to wrap).

self.jotViewController.textAlignment = NSTextAlignmentRight;

Set the text insets (only applies if text is set to wrap).

self.jotViewController.initialTextInsets = UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f);

Set the text editing insets.

self.jotViewController.textEditingInsets = UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f);

Set the text edit view to clip text to the text editing insets (instead of fading out with a gradient).

self.jotViewController.clipBoundsToEditingInsets = YES;

Contributors

License

jot is available under the MIT license. See the LICENSE file for more info.

Copyright 2015 IFTTT Inc.

Comments
  • Taking Snapshot of View works well when using UIViewContentModeScaleAspectFill

    Taking Snapshot of View works well when using UIViewContentModeScaleAspectFill

    If using UIViewContentModeScaleAspectFill for the image view, the returned image is distorted if it is a smaller image, taking a snapshot of view seems to work well, code below.

    - (void)saveButtonAction
    {
        UIImage *drawnImage = [self snapshot:self.view];
    
        [self.jotViewController clearAll];
    
        ALAssetsLibrary *library = [ALAssetsLibrary new];
        [library writeImageToSavedPhotosAlbum:[drawnImage CGImage]
                                  orientation:(ALAssetOrientation)[drawnImage imageOrientation]
                              completionBlock:^(NSURL *assetURL, NSError *error){
                                  if (error) {
                                      NSLog(@"Error saving photo: %@", error.localizedDescription);
                                  } else {
                                      NSLog(@"Saved photo to saved photos album.");
                                  }
                              }];
    }
    
    - (UIImage *)snapshot:(UIView *)view
    {
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, YES, 0);
        [view drawViewHierarchyInRect:view.bounds afterScreenUpdates:YES];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        return image;
    }
    
    bug 
    opened by Knights22 2
  • Demo does not build

    Demo does not build

    When you try to build the demo, you get the following errors:

    /Users/todd/Desktop/jot-master/Example/jot.xcodeproj The file “Pods-jot.debug.xcconfig” couldn’t be opened because there is no such file. (/Users/todd/Desktop/jot-master/Example/Pods/Target Support Files/Pods-jot/Pods-jot.debug.xcconfig) /Users/todd/Desktop/jot-master/Example/jot.xcodeproj The file “Pods-jot.release.xcconfig” couldn’t be opened because there is no such file. (/Users/todd/Desktop/jot-master/Example/Pods/Target Support Files/Pods-jot/Pods-jot.release.xcconfig) The file “Pods-jot.debug.xcconfig” couldn’t be opened because there is no such file. (/Users/todd/Desktop/jot-master/Example/Pods/Target Support Files/Pods-jot/Pods-jot.debug.xcconfig) diff: /../Podfile.lock: No such file or directory

    diff: /Manifest.lock: No such file or directory

    error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.

    opened by toddfreese 1
  • There was an issue where if you draw something with one color, switch…

    There was an issue where if you draw something with one color, switch…

    … colors and draw again, the initial segment would be the old color. This fix forced that segment to switch to the correct color

    @lauraskelton please review and merge this in. Thanks!

    opened by MattSich 1
  • strokeColor is cached when changing drawingColor, affecting first points

    strokeColor is cached when changing drawingColor, affecting first points

    Now when strokeColor cool is changed bezier path with cached color is thrown out. When toggling draw/text mode in example draw will be a random color

    Example ios simulator screen shot jun 21 2015 1 37 01 pm

    opened by adamjuhasz 1
  • Add a Code Hunt vote badge to README.md

    Add a Code Hunt vote badge to README.md

    @lauraskelton FYI, your repo has been featured today on @CodeHuntIO

    http://codehunt.io/sub/jot/

    TL;DR Code Hunt helps programmers discover and discuss awesome code.

    This pull-request adds a "vote" badge to your README.md:

    CodeHunt.io

    Fingers crossed that we can drive more attention to your brilliant work.

    Happy coding! @chrisjacob ^_^

    p.s. I hope you found this PR helpful, if not please let me know.

    p.p.s I've also tweeted about your project https://twitter.com/hunt_objectivec/status/627827488572481536

    opened by CodeHuntIO 0
  • Text misplaced after rotation.

    Text misplaced after rotation.

    I am having a problem where the placement of text changes after a device rotation. Drawings work fine. I am drawing and adding text on top of an image. When I rotate the device, the drawings stay in the correct place. But the text moves position. It appears to be a scaling issue as text in the lower right corner moves a lot and text in the upper left does not.

    opened by toddfreese 0
  • pod install does not work for example.

    pod install does not work for example.

    I get the following error:

    pod install

    [!] Invalid Podfile file: [!] Unsupported options {:exclusive=>true} for target JotDemo..

    from /Users/todd/Desktop/Project_Source/Open_Source_Projects/jot/Example/Podfile:11

    -------------------------------------------

    target 'JotDemo', :exclusive => true do

    install_pods

    -------------------------------------------

    [!] xcodeproj was renamed to project. Please use that from now on.

    opened by toddfreese 1
Owner
IFTTT
Every thing works better together.
IFTTT
Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

SVGKit SVGKit is a Cocoa framework for rendering SVG files natively: it's fast and powerful. Some additional info and links are on the wiki Versions:

null 4.3k Jan 3, 2023
A simple, declarative, functional drawing framework, in Swift!

DePict - A simple, declarative, functional drawing framework. To produce a drawing, call the Draw function (just type Draw and let autocomplete do the

David Cairns 35 Sep 16, 2021
A super easy way to check if the installed app has an update available. It is built with simplicity and customisability in mind and comes with pre-written tests.

UpdateAvailableKit This is UpdateAvailableKit: a super easy way to check if the installed app has an update available. It is built with simplicity and

Swapnanil Dhol 22 Jan 5, 2023
Drawing and Geometry made easy on iOS - now in Swift 3.0

InkKit Swift Support Swift 4.0 InkKit is Swift 4.0 by default, so to use that just include InkKit in your podfile: pod 'InkKit' Swift 3.2 In order to

Shaps 373 Dec 27, 2022
iOS utility classes for asynchronous rendering and display.

YYAsyncLayer iOS utility classes for asynchronous rendering and display. (It was used by YYText) Simple Usage @interface YYLabel : UIView @property NS

null 672 Dec 27, 2022
The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo erase the drawing.

IOSObjC_KidsBoard The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo era

Haresh 0 Oct 28, 2021
A lightweight XMLParser for assembling and parsing XML values written for iOS 8+ in Swift 2.

Overview Description Requirements Installation Usage Author License Description XMLParser lets you convert a pure Swift dictionary into XML string and

Eugene Mozharovsky 75 Feb 2, 2022
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
NXDrawKit is a simple and easy but useful drawing kit for iPhone

⚠️ To use with Swift 5.0 please ensure you are using >= 0.8.0 ⚠️ ⚠️ To use with Swift 4.2 please ensure you are using >= 0.7.1 ⚠️ ⚠️ To use with Swift

Nicejinux 1.3k Dec 31, 2022
Create gradients and blur gradients without a single line of code

EZYGradientView is a different and unique take on creating gradients and gradients with blur on the iOS platform. The default CAGradientLayer implemen

Shashank Pali 380 Dec 6, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 2, 2023
When you scan the clothing tag, a 3D character appears and informs you of the clothing information.

1. Introduction When you scan the clothing tag, a 3D character appears and tells you the information on the clothes. You can select necessary informat

kimniki 0 Dec 23, 2021
SVG parser and renderer written in SwiftUI

SVGView SVG parser written in SwiftUI We are a development agency building phenomenal apps. Overview The goal of this project is to bring the full pow

Exyte 269 Jan 4, 2023
3D Touch Application for Weighing Plums (and other small fruit!)

Plum-O-Meter ###3D Touch Application for Weighing Plums (and other small fruit!) Companion project to this blog post: http://flexmonkey.blogspot.co.uk

simon gladman 526 Sep 27, 2022
The code for my CoreGraphics+CoreAnimation talk, held during the 2012 iOS Game Design Seminar at the Technical University Munich.

PKCoreTechniques ======= Core Techniques is the result of a presentation I held at the Technical University of Munich during the 'iOS Game Design Semi

Philip Kluz 143 Sep 21, 2022
Visual designing library for iOS & OSX

ProcessingKit ProcessingKit is a Visual designing library for iOS & OSX. ProcessingKit written in Swift ?? and you can write like processing. Demo Dem

Atsuya Sato 333 Nov 12, 2022
Conical (angular) gradient for iOS written in Swift

AEConicalGradient Conical (angular) gradient in Swift I hope that somebody will find this useful. And nice. Usage AEConicalGradient is a minion which

Marko Tadić 82 Dec 27, 2022
🌈 Highly customizable Core Graphics based gradient view for iOS

MKGradientView Highly customizable Core Graphics based gradient view Features Available gradient types: Linear (Axial) Radial (Circular) Conical (Angu

Max Konovalov 167 Dec 27, 2022
GraphLayout - iOS UI controls to visualize graphs. Powered by Graphviz

GraphLayout GraphLayout - UI controls for graph visualization. It is powered by Graphviz. Graph visualization is a way of representing structural info

null 97 Sep 26, 2022