Git Product home page Git Product logo

meteor-assets's Introduction

meteor image asset generator

Setup

  • Clone this repository.
  • Open the repository in the command line and run npm install
git clone https://github.com/lpender/meteor-assets
cd meteor-assets
npm install

Environmental Dependencies

This project requires imagemagick.

Linux

sudo apt-get install imagemagick imagemagick-doc

Os X

Install homebrew and then:

brew install imagemagick

Note

This repository has been updated for usage with Meteor v1.3.

If meteor --version is less than 1.3:

git pull --tags
git checkout v0.0.2

Usage

Note: You can use the same icon cross platform but it's not recommended in some cases. See this issue for more details.

  1. Generate icons at 1024x1024 and place them in resources/icon-ios.png and resources/icon-android.png.

  2. Generate splash screens at 2208x2208 and place them in resources/splash-ios.png and resources/splash-android.png.

  3. Run node meteor-assets.

  4. Copy the resources directory to your app: cp -R resources /path/to/my/app.

  5. Add this to your mobile-config.js

App.icons({
    app_store: 'resources/icons/app_store.png', // 1024x1024
    iphone_2x: 'resources/icons/iphone_2x.png', // 120x120
    iphone_3x: 'resources/icons/iphone_3x.png', // 180x180
    ipad: 'resources/icons/ipad.png', // 76x76
    ipad_2x: 'resources/icons/ipad_2x.png', // 152x152
    ipad_pro: 'resources/icons/ipad_pro.png', // 167x167
    ios_settings: 'resources/icons/ios_settings.png', // 29x29
    ios_settings_2x: 'resources/icons/ios_settings_2x.png', // 58x58
    ios_settings_3x: 'resources/icons/ios_settings_3x.png', // 87x87
    ios_spotlight: 'resources/icons/ios_spotlight.png', // 40x40
    ios_spotlight_2x: 'resources/icons/ios_spotlight_2x.png', // 80x80
    ios_spotlight_3x: 'resources/icons/ios_spotlight_3x.png', // 120x120
    ios_notification: 'resources/icons/ios_notification.png', // 20x20
    ios_notification_2x: 'resources/icons/ios_notification_2x.png', // 40x40
    ios_notification_3x: 'resources/icons/ios_notification_3x.png', // 60x60
    iphone_legacy: 'resources/icons/iphone_legacy.png', // 57x57
    iphone_legacy_2x: 'resources/icons/iphone_legacy_2x.png', // 114x114
    ipad_spotlight_legacy: 'resources/icons/ipad_spotlight_legacy.png', // 50x50
    ipad_spotlight_legacy_2x: 'resources/icons/ipad_spotlight_legacy_2x.png', // 100x100
    ipad_app_legacy: 'resources/icons/ipad_app_legacy.png', // 72x72
    ipad_app_legacy_2x: 'resources/icons/ipad_app_legacy_2x.png', // 144x144
    android_mdpi: 'resources/icons/android_mdpi.png', // 48x48
    android_hdpi: 'resources/icons/android_hdpi.png', // 72x72
    android_xhdpi: 'resources/icons/android_xhdpi.png', // 96x96
    android_xxhdpi: 'resources/icons/android_xxhdpi.png', // 144x144
    android_xxxhdpi: 'resources/icons/android_xxxhdpi.png' // 192x192
});

App.launchScreens({
    iphone: 'resources/splashes/iphone.png', // 320x480
    iphone_2x: 'resources/splashes/iphone_2x.png', // 640x490
    iphone5: 'resources/splashes/iphone5.png', // 640x1136
    iphone6: 'resources/splashes/iphone6.png', // 750x1334
    iphone6p_portrait: 'resources/splashes/iphone6p_portrait.png', // 2208x1242
    iphone6p_landscape: 'resources/splashes/iphone6p_landscape.png', // 2208x1242
    iphoneX_portrait: 'resources/splashes/iphoneX_portrait.png', // 1125x2436
    iphoneX_landscape: 'resources/splashes/iphoneX_landscape.png', // 2436x1125
    ipad_portrait: 'resources/splashes/ipad_portrait.png', // 768x1024
    ipad_portrait_2x: 'resources/splashes/ipad_portrait_2x.png', // 1536x2048
    ipad_landscape: 'resources/splashes/ipad_landscape.png', // 1024x768
    ipad_landscape_2x: 'resources/splashes/ipad_landscape_2x.png', // 2048x1536
    android_mdpi_portrait: 'resources/splashes/android_mdpi_portrait.png', // 320x480
    android_mdpi_landscape: 'resources/splashes/android_mdpi_landscape.png', // 480x320
    android_hdpi_portrait: 'resources/splashes/android_hdpi_portrait.png', // 480x800
    android_hdpi_landscape: 'resources/splashes/android_hdpi_landscape.png', // 800x480
    android_xhdpi_portrait: 'resources/splashes/android_xhdpi_portrait.png', // 720x1280
    android_xhdpi_landscape: 'resources/splashes/android_xhdpi_landscape.png', // 1280x720
    android_xxhdpi_portrait: 'resources/splashes/android_xxhdpi_portrait.png', // 1080x1440
    android_xxhdpi_landscape: 'resources/splashes/android_xxhdpi_landscape.png', // 1440x1080
    android_xxxhdpi_portrait: 'resources/splashes/android_xxxhdpi_portrait.png', // 1280x1920
    android_xxxhdpi_landscape:
        'resources/splashes/android_xxxhdpi_landscape.png' // 1920x1280
});

Sizes thanks to

Notes

  • This will crop splashes horizontally centered and vertically centered.
  • This does not currently generate 9 patch images for Android.

Contributing

It wouldn't be so bad to turn this into a proper CLI node package.

meteor-assets's People

Contributors

lpender avatar marabesi avatar max80713 avatar rj-david avatar skirunman avatar

Stargazers

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 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 avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

teknologist skirunman firdausramlan hamatek chpmrc praneybehl perak luizcoder marabesi max80713 cosmicbboy rj-david lucnat kerf007 innovationlove matheusccastroo

meteor-assets's Issues

iPhone7 plus assets (splash screen)

Hi,

I'm building an app and I don't now how to specify iPhone7 plus assets, I still get the default meteor splash screen on this specific device, any idea ?

thanks

Great Asset generator, but creating wrong splashscreens

With this i can create Icons and splashscreens, but for some it creates splashscreens with wrong resolution. In "meteor-assets.js" in the function "crop()" the height and width have to be parsed into integer. Then it works great.

Issues with gm

I had some issues with gm:

Could not execute GraphicsMagick/ImageMagick: convert "resources/splash.png" "-resize" "960x960" "-crop" "640x960+160+0" "resources/splashes/iphone_2x.png" this most likely means the gm/convert binaries can't be found]

Installed and reinstalled ImageMagicks and the whole sjebang, but it turned out

.subClass({imageMagick: true}) in (meteor-assets.js)

Was the problem, removed it and it worked like a charm

One great app, but landscape images aren't perfect

Hey man, great work on this, it's been a while i'm looking for a tool dedicated to Meteor, you're my savior right now.

Small bug tho, i've a centered icon on my splash screen but in the landscape version it put it on the bottom on all versions :(

iphone6p_landscape

UPDATE : I also noticed the AppStore refused my App. It seems there's a problem with the iPhone 5 splash screen generated. Looks weird on the emulator too (like the image isn't formatted correctly

file extension for ios splash changed?

Why change file extension for ios splash from png to jpg?

splashes.forEach(function(splash) {
  if (splash.name.indexOf('android') == 0) {
    crop('resources/splash-android.png', 'resources/splashes/', splash);
  } else {
    crop('resources/splash-ios.jpg', 'resources/splashes/', splash);
  }
});

Clone to where?

Sorry a bit new with this. Am I supposed to clone this into a meteor project or outside of it? I tried outside and went to run npm install, CLI says npm command not found.

Nevermind worked it out. Ended up using Meteor npm install instead.

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.