Giter VIP home page Giter VIP logo

warp's Introduction

WARP - Seamless mobile assets management

Table of contents

What is WARP?

WARP is a tool for automagically enforcing consistency of design, scaling and greatly optimizing the assets of your mobile project (Android and iOS).

Consistency

Forget about maintaining hundreds of assets, keep only one version of every asset and let WARP deal with the hassle of maintaining each platform specific screen density variant. That is drawable-XXX folders in Android and assetName@XXX files in iOS.

Scaling

Don't waste time using external tools scaling assets, WARP will generate every asset for you.

Optimization (or how to make you app size way smaller)

WARP uses top notch algorithms to make your assets lightweight without any noticeable loss of quality. You can expect a reduction in your assets total size of at least 50%.

Fast integration

You can safely integrate WARP into your building pipeline, WARP will skip already processed assets. If no changes were made in your assets folder, WARP can completely run in almost 0 seconds.

WARP Demo

IMAGE ALT TEXT

Installation

Dependencies

WARP uses pngquant to achieve astonishing good compression ratios and ffmpeg to scale images in a split second. To run warp you need to install those libraries first.

Linux:

sudo apt-get update
sudo apt-get -y install pngquant
sudo apt-get -y install ffmpeg

MacOS (using Homebrew)

brew install pngquant
brew install ffmpeg

Important: Make sure that both pngquant and ffmpeg are set in your PATH variable.

WARP

Warp is a self-contained utility, just download warp.py and you are good to go.

Basic usage

A basic usage of WARP looks like this:

./warp.py --target android

This will generate two folders:

  • raw: Place you original assets file here. They should be in XXX-HDPI for Android and @3X for iOS. The other variants will be generated automatically.
  • assets: The processed assets will be placed here.

Now, copy some assets inside the raw folder and run the script again. You'll find your processed assets inside the assets folder.

The example above produces assets for Android. Feel free to use --target ios to generate assets for that platform!

Tip: You can view a full list of commands with ./warp.py --help

Advanced usage

  • Specify custom input and output directories with --input [PATH] and --output [PATH]
  • Clear the output folder and process every asset again with --clean
  • Hide the welcome message with --silent
  • Every option has a shorthand version, so you can use -i instead of --input or -c instead of --clean for example.

Integration with Android Studio

WARP can be easily integrated with Android Studio using a Gradle task.

Installation
  1. Download warp.py
  2. Download warp_task.gradle
  3. Place both files under YOUR/PROJECT/PATH/scripts/warp/
  4. Place the following line in your project's app.gradle file:
apply plugin: 'com.android.application'
apply from: '../scripts/warp/warp_task.gradle' //Add this line

android {
    ...
}
  1. Press "sync with gradle" in Android Studio
  2. Place your assets in the generated raw folder in your project's root directory.

That's it. Remember to run "sync with gradle" after adding new assets, this will run WARP and generate the assets for your project.

WARP Android Studio integration demo

IMAGE ALT TEXT

Benchmarks

Sample: 256 icon assets from an Android Play Store published app. The assets where converted and optimized to HDPI, XHDPI, XXHDPI and XXXHDPI screen densities.

Processing

  • First run processing time: 44 seconds.
  • Second run (no changes) processing time: < 1 second.
  • Hardware: MacBook Pro 15" 2016 (Intel i7, 16GB of RAM)

Compression

  • Original assets size: 3,4 MB
  • Size after optimization: 1,7 MB
  • Total size reduction: 50%

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push your branch (git push origin my-new-feature)
  5. Create a new Pull Request

About

This project is maintained by Juan Ignacio Molina and it was written by Wolox.

Wolox

License

WARP is available under the MIT license.

Copyright (c) 2017 Juan Ignacio Molina, aka Juani

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
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.

warp's People

Contributors

juanignaciomolina avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

warp's Issues

Update README

Update README with the latest commands and benchmarks of the PRs #1 and #2

Warp not failing if pngquant and/or ffmpeg not installed

Description

Running ./gradlew warpAssets when either is not installed doesn't fail. Instead it notifies that each asset was successfully warped and proceeds to return with a success.

Being a known precondition for Warp to work, it should return early with log that indicates which ones weren't present.

Steps to reproduce

  • Run ./gradlew warpAssets in a project containing assets and in an environment without ffmpeg and/or pngquant
  • Observe that gradle outputs success logs but none of the files were actually generated

.png assets imported with black background

Description

.png assets with transparent background are imported with black background in hdpi, xhdpi and xxhdpi resources.

For example: 1080x1920 devices (e.g. Google Pixel) will have a black background asset but a 1440x2560 one (e.g. Google Pixel XL) will have a transparent background.
The attached screenshots describes this scenario.

Libraries and system versions

  • Ubuntu 16.04
  • pngquant 2.5.0
  • libpng 1.2.54
  • ffmpeg 2.8.15-0ubuntu0.16.04.1

Steps to reproduce

Screenshots

  • Pixel device selected
    image

  • Pixel XL device selected
    image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.