Merge pull request #23 from fastlane/feature/background

[WIP] Add labels and background to the screenshots

.gitignore

@@ -33,3 +33,4 @@ build/
 # unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
 .rvmrc
 Gemfile.lock
+screenshots

LICENSE

@@ -19,3 +19,6 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+All screenshots located inside the 'assets' folder of this directory are excluded
+from this license. 

README.md

@@ -27,11 +27,10 @@ frameit
 [![Twitter: @KauseFx](https://img.shields.io/badge/[email protected]?style=flat)](https://twitter.com/KrauseFx)
 [![License](http://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://github.com/KrauseFx/frameit/blob/master/LICENSE)
 [![Gem](https://img.shields.io/gem/v/frameit.svg?style=flat)](http://rubygems.org/gems/frameit)
+[![Build Status](https://img.shields.io/travis/fastlane/frameit/master.svg?style=flat)](https://travis-ci.org/fastlane/frameit)
 
 ###### Quickly put your screenshots into the right device frames
 
-This tool is not supposed to be used for App Store screenshots. Instead it should be used to prepare screenshots for websites, emails and prints.
-
 Get in contact with the developer on Twitter: [@KrauseFx](https://twitter.com/KrauseFx)
 
 
@@ -60,10 +59,19 @@ Put a gorgeous device frame around your iOS screenshots just by running one simp
 
 Here is a nice gif, that shows ```frameit``` in action:
 
-![assets/FrameitGit.gif](assets/FrameitGit.gif)
+![assets/FrameitGit.gif](assets/FrameitGit.gif?raw=1)
+
+### Results
+
+![assets/ScreenshotsBig.png](assets/ScreenshotsBig.png?raw=1)
 
-Here is how the result can look like
-![assets/Overview.png](assets/Overview.png)
+-------
+
+![assets/ScreenshotsOverview.png](assets/ScreenshotsOverview.png?raw=1)
+
+-------
+
+![assets/MacExample.png](assets/MacExample.png?raw=1)
 
 # Installation
 
@@ -103,6 +111,109 @@ To run the setup process again to add new frames use:
 
     frameit setup
 
+When using `frameit` without titles on top, the screenshots will have the full resolution, which means they can't be uploaded to the App Store directly. They are supposed to be used for websites, print media and emails. Check out the section below to use the screenshots for the App Store.
+
+# Titles and Background (optional)
+
+With `frameit` 2.0 you are now able to add a custom background, title and text colors to your screenshots.
+
+A working example can be found in the [fastlane examples](https://github.com/fastlane/examples/tree/master/MindNode/screenshots) project.
+
+#### `Framefile.json`
+
+Use it to define the general information:
+
+```json
+{
+  "default": {
+    "keyword": {
+      "font": "./fonts/MyFont-Rg.otf"
+    },
+    "title": {
+      "font": "./fonts/MyFont-Th.otf",
+      "color": "#545454"
+    },
+    "background": "./background.jpg",
+    "padding": 50
+  },
+
+  "data": [
+    {
+      "filter": "Brainstorming",
+      "keyword": {
+        "color": "#d21559"
+      }
+    },
+    {
+      "filter": "Organizing",
+      "keyword": {
+        "color": "#feb909"
+      }
+    },
+    {
+      "filter": "Sharing",
+      "keyword": {
+        "color": "#aa4dbc"
+      }
+    },
+    {
+      "filter": "Styling",
+      "keyword": {
+        "color": "#31bb48"
+      }
+    }
+  ]
+}
+```
+
+The `filter` value is a part of the screenshot named for which the given option should be used. If a screenshot is named `iPhone5_Brainstorming.png` the first entry in the `data` array will be used.
+
+The `Framefile.json` should be in the `screenshots` folder, as seen in the [example](https://github.com/fastlane/examples/tree/master/MindNode/screenshots).
+
+#### `.strings` files
+
+To define the title and optionally the keyword, put two `.strings` files into the language folder (e.g. [en-US in the example project](https://github.com/fastlane/examples/tree/master/MindNode/screenshots/en-US))
+
+The `keyword.strings` and `title.strings` are standard `.strings` file you already use for your iOS apps, making it easy to use your existing translation service to get localized titles.
+
+#### Uploading screenshots to iTC
+
+Use [deliver](https://github.com/KrauseFx/deliver) to upload all screenshots to iTunes Connect completely automatic :rocket:
+
+### Mac
+
+With `frameit` 2.0 is possible to also frame Mac OS X Applications. You have to provide the following:
+
+- The `offset` information so `frameit` knows where to put your screenshots
+- A path to a `background`, which should contain both the background and the Mac
+- `titleHeight`: The height in px that should be used for the title
+
+##### Example
+```json
+{
+  "default": {
+    "title": {
+      "color": "#545454"
+    },
+    "background": "Mac.jpg",
+    "offset": {
+      "offset": "+676+479",
+      "titleHeight": 320
+    }
+  },
+  "data": [
+    {
+      "filter": "Brainstorming",
+      "keyword": {
+        "color": "#d21559"
+      }
+    }
+  ]
+}
+```
+
+Check out the [MindNode example project](https://github.com/fastlane/examples/tree/master/MindNode/screenshots)
+
 # Tips
 
 ## [`fastlane`](https://fastlane.tools) Toolchain
@@ -118,8 +229,12 @@ To run the setup process again to add new frames use:
 
 ##### [Like this tool? Be the first to know about updates and new fastlane tools](https://tinyletter.com/krausefx)
 
-## Generate screenshots
-Check out [```Snapshot```](https://github.com/KrauseFx/snapshot) to automatically generate screenshots using ```UI Automation```.
+## Generate localized screenshots
+Check out [`snapshot`](https://github.com/KrauseFx/snapshot) to automatically generate screenshots using ```UI Automation```.
+
+## White background of frames
+
+Some stock images provided by Apple still have a white background instead of a transparent one. You'll have to edit the Photoshop file to remove the white background, delete the generated `.png` file and run `frameit` again.
 
 ## Use a clean status bar
 You can use [SimulatorStatusMagic](https://github.com/shinydevelopment/SimulatorStatusMagic) to clean up the status bar.

bin/frameit

@@ -29,7 +29,7 @@ class FrameItApplication
       c.description = "Adds a black frame around all screenshots."
 
       c.action do |args, options|
-        Frameit::Editor.new.run('.', Frameit::Editor::Color::BLACK)
+        Frameit::Runner.new.run('.', Frameit::Color::BLACK)
       end
     end
 
@@ -38,7 +38,7 @@ class FrameItApplication
       c.description = "Adds a silver frame around all screenshots."
 
       c.action do |args, options|
-        Frameit::Editor.new.run('.', Frameit::Editor::Color::SILVER)
+        Frameit::Runner.new.run('.', Frameit::Color::SILVER)
       end
     end
 
@@ -60,6 +60,7 @@ end
 
 begin
   FastlaneCore::UpdateChecker.start_looking_for_update('frameit')
+  Frameit::DependencyChecker.check_dependencies
   FrameItApplication.new.run
 ensure
   FastlaneCore::UpdateChecker.show_update_status('frameit', Frameit::VERSION)

frameit.gemspec

@@ -32,5 +32,5 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'rspec', '~> 3.1.0'
   spec.add_development_dependency 'pry'
   spec.add_development_dependency 'yard', '~> 0.8.7.4'
-  spec.add_development_dependency 'codeclimate-test-reporter'
+  spec.add_development_dependency 'coveralls'
 end

lib/frameit.rb

@@ -1,13 +1,27 @@
 require 'mini_magick'
 require 'frameit/version'
 require 'frameit/frame_converter'
+require 'frameit/device_types'
+require 'frameit/runner'
+require 'frameit/screenshot'
+require 'frameit/config_parser'
+require 'frameit/offsets'
 require 'frameit/editor'
+require 'frameit/template_finder'
+require 'frameit/strings_parser'
+require 'frameit/mac_editor'
 require 'frameit/dependency_checker'
 
 require 'fastlane_core'
 
 module Frameit
   Helper = FastlaneCore::Helper # you gotta love Ruby: Helper.* should use the Helper class contained in FastlaneCore
-
-  Frameit::DependencyChecker.check_dependencies
 end
+
+
+class ::Hash
+  def fastlane_deep_merge(second)
+    merger = proc { |key, v1, v2| Hash === v1 && Hash === v2 ? v1.merge(v2, &merger) : v2 }
+    self.merge(second, &merger)
+  end
+end

lib/frameit/config_parser.rb

@@ -0,0 +1,83 @@
+module Frameit
+  class ConfigParser
+    def load(path)
+      return nil unless File.exists?(path) # we are okay with no config at all
+      Helper.log.info "Parsing config file '#{path}'".yellow if $verbose
+      @path = path
+      self.parse(File.read(path))
+    end
+
+
+
+    # @param data (String) the JSON data to be parsed
+    def parse(data)
+      begin
+        @data = JSON.parse(data)
+      rescue => ex
+        Helper.log.fatal ex
+        raise "Invalid JSON file at path '#{@path}'. Make sure it's a valid JSON file".red
+      end
+
+      self
+    end
+
+    # Fetches the finished configuration for a given path. This will try to look for a specific value
+    # and fallback to a default value if nothing was found
+    def fetch_value(path)
+      specific = @data['data'].find { |a| path.include?a['filter'] }
+
+      default = @data['default']
+
+      values = default.fastlane_deep_merge(specific || {})
+
+      change_paths_to_absolutes!(values)
+      validate_values(values)
+
+      values
+    end
+
+    # Use absolute paths instead of relative
+    def change_paths_to_absolutes!(values)
+      values.each do |key, value|
+        if value.kind_of?Hash
+          change_paths_to_absolutes!(value) # recursive call
+        else
+          if ['font', 'background'].include?key
+            # Change the paths to relative ones
+            # `replace`: to change the content of the string, so it's actually stored
+
+            if @path # where is the config file. We don't have a config file in tests
+              containing_folder = File.expand_path('..', @path) 
+              value.replace File.join(containing_folder, value)
+            end
+          end
+        end
+      end
+    end
+
+    # Make sure the paths/colors are valid
+    def validate_values(values)
+      values.each do |key, value|
+        if value.kind_of?Hash
+          validate_values(value) # recursive call
+        else
+          if key == 'font'
+            raise "Could not find font at path '#{File.expand_path(value)}'" unless File.exists?value
+          end
+
+          if key == 'background'
+            raise "Could not find background image at path '#{File.expand_path(value)}'" unless File.exists?value
+          end
+
+          if key == 'color'
+            raise "Invalid color '#{value}'. Must be valid Hex #123123" unless value.include?"#"
+          end
+
+          if key == 'padding'
+            raise "padding must be type integer" unless value.kind_of?Integer
+          end
+        end
+      end
+    end
+  end
+end

lib/frameit/dependency_checker.rb

@@ -1,6 +1,8 @@
 module Frameit
   class DependencyChecker
     def self.check_dependencies
+      return if Helper.is_test?
+
       self.check_image_magick
     end
 

lib/frameit/device_types.rb

@@ -0,0 +1,11 @@
+module Frameit
+  module Color
+    BLACK = "SpaceGray"
+    SILVER = "Slvr"
+  end
+
+  module Orientation
+    PORTRAIT = "Vert"
+    LANDSCAPE = "Horz"
+  end
+end