Workshop IOS

45
Core Image / Audio en iOS BDigitalApps, Barcelona,15 de Noviembre de 2011 #bdigitalapps Slash Mobility iOS - Javier Sánchez Sierra - @jsanchezsierra CEO&Founder - Emilio Aviles Avila - @techmi

description

BDigital Apps 2011 - Workshop IOS

Transcript of Workshop IOS

Page 1: Workshop IOS

Core Image / Audio en iOS

BDigitalApps, Barcelona,15 de Noviembre de 2011#bdigitalapps Slash Mobility

iOS - Javier Sánchez Sierra - @jsanchezsierra

CEO&Founder - Emilio Aviles Avila - @techmi

Page 2: Workshop IOS

Indice

• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrado, renderizado. Demo

• Audio en iOS Audio en iOS. System Sound, Media Player, AVAudioPlayer Demo

• Accelerate framework Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.

Slash Mobility@jsanchezsierra

Page 3: Workshop IOS

Indice

• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrado, renderizado. Demo

• Audio en iOS Audio en iOS. System Sound, Media Player, AVAudioPlayer OpenAL, Core Audio. Demo

• Accelerate framework Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.

Slash Mobility@jsanchezsierra

Page 4: Workshop IOS

Core Image - Conceptos básicos

original filtrada

filtro sepia

Filtros, procesado de imagen, pixel a pixel

Slash Mobility@jsanchezsierra

Page 5: Workshop IOS

original

Filtros

filtrada

filtro sepia

filtro color Hue

filtro b&w

Core Image - Conceptos básicos

Slash Mobility@jsanchezsierra

Page 6: Workshop IOS

original

Los filtros se pueden concatenar

filtrada

filtro sepia

filtro saturación

filtro b&w

Core Image - Conceptos básicos

Slash Mobility@jsanchezsierra

Page 7: Workshop IOS

Core Image - Arquitectura

Aplicaciones

Core Graphics Core Video Core Image

Open GL ES

Graphics Hardware

Slash Mobility@jsanchezsierra

Page 8: Workshop IOS

Aplicaciones

Core Graphics Core Video Core Image

Open GL ES

Graphics Hardware

CPU Rendering

GPU Rendering

Core Image - Arquitectura

Slash Mobility@jsanchezsierra

Page 9: Workshop IOS

Core Image en Mac OS X - iOS 5

Mac OS X

• 130 filtros, usuario crea

• CIFilter, CIImage, CIContext,

CIKernel, CIFilterShape

• CPU / Open GL

iOS 5

• 16 filtros, photo adjustment

• CIFilter, CIImage, CIContext

• CPU / Open GL ES 2

Slash Mobility@jsanchezsierra

Page 10: Workshop IOS

Core Image - Filtros disponibles en iOS5

Slash Mobility@jsanchezsierra

Filtro CIColorControls

Filtro CIColorMatrixFiltro CIExposureAdjust

Filtro CIHueAdjust

Filtro CISepiaTone

CIGammaAdjust

Ajustes de Color

Page 11: Workshop IOS

Estilo

CIHightlightShadowAdjust

Generador

CIConstantColorGenerator

Ajustes Geometría

CIStraighten

CICrop

CIAffineTransform

Composite operation

CISourceOverCompositing

Core Image - Filtros disponibles en iOS5

Filtro CITemperatureAndTint

CIToneCurve

CIVibrance

Ajustes de Color

Slash Mobility@jsanchezsierra

Page 12: Workshop IOS

• Blurs: Median, Gaussian, Motion y Noise• Color Adjustments & Effects: Exposure, Gamma Adjust, y Sepia Tone• Composition Operations: Addition and Multiply Blends, o Hard Light• Distortions: Pinch, Circle Splash, y Vortex• Generators: Star Shine y Lenticular Halo• Geometry Adjustments: Crop, Scale, Rotate, y Affine transformation• Transitions: Dissolve y Ripple• Halftone, Tile y Posterize

Core Image - Filtros disponibles en OS X

Slash Mobility@jsanchezsierra

Page 13: Workshop IOS

CILineOverlay

CIPixelateCILineOverlay

CIMotionBlur

CIPointllize CIBloom

Core Image - Filtros disponibles en OS X

CIGaussianBlur

CIEdges CICrystallize

Slash Mobility@jsanchezsierra

Page 14: Workshop IOS

CILineOverlay

CIColorInvert

CIColorMap

CIColorBlendMode

CIColorPosterize

CICopyMachineTransition

CIDisolveTransition

Core Image - Filtros disponibles en OS X

Slash Mobility@jsanchezsierra

Page 15: Workshop IOS

CILineOverlay

CIEdgeWorkCIGlassDistortion

CIHoleDistortion

CIKaleidoscope

Core Image - Filtros disponibles en OS X

CIBumpDistortionCIPerspectiveTransform

CICircularWrap Slash Mobility@jsanchezsierra

Page 16: Workshop IOS

Core Image - Clases I

• CIFilter Representa un efecto determinado Cada filtro tiene sus propios parámetros Producen una imagen como salida

• CIImage Puede representar una imagen de un fichero o de un filtro

• CIContext Core Image necesita un contexto para renderizar el resultado Este contexto puede basarse en GPU o CPU

Slash Mobility@jsanchezsierra

Page 17: Workshop IOS

✓ Renderiza la imagen de salida del filtro a CGImage result = [filter valueForKey:kCIOutputImageKey]; cgimage = [context createCGImage:result fromRect:[result extent]];

✓ Crear objeto tipo CIImage image = [CIImage imageWithContentsOfURL:myURL];

✓ Crear objeto tipo CIContext context = [CIContext contextWithOptions:nil];

✓ Crear un objeto tipo CIFilter filter = [CIFilter filterWithName:@"CISepiaTone"]; [filter setValue:image forKey:kCIInputImageKey]; [filter setValue:[NSNumber numberWithFloat:0.8f] forKey:@”inputIntensity”];

Core Image - Clases II

Slash Mobility@jsanchezsierra

Page 18: Workshop IOS

• Los valores de entrada del filtro se asignan con key/valueCIFilter *filter = [CIFilter filterWithName:@”CISepiaTone”]

[filter setValue:image forKey:kCIInputImageKey];[filter setValue:[NSNumber numberWithFloat:0.8f] forKey:@”inputIntensity”];

• La salida del filtro se obtiene mediante la propiedad outputImageoutput = [filter valueForKey:kCIOutputImageKey]; // forma generaloutput = [filter outputImage]; // solamente en iOSoutput = filter.outputImage; // solamente en iOS

• Acceso directo que permite crear, asignar valores y obtener resultadooutput = [CIFilter filterWithName:@”CISepiaTone” keysAndValues: kCIInputImageKey, image,

@”inputIntensity”, [NSNumber numberWithFloat: 0.8f], nil].outputImage ;

Core Image - Definición del filtros I

Slash Mobility@jsanchezsierra

Page 19: Workshop IOS

• Comienzo aplicando el primer filtro: CISepiaTone (imagen -> output)output = [CIFilter filterWithName:@”CISepiaTone” keysAndValues: kCIInputImageKey, image, @”inputIntensity”, [NSNumber numberWithFloat: 0.8f], nil].outputImage;

• Aplico el siguiente filtro: CIHueAdjust (output -> output)output = [CIFilter filterWithName:@”CIHueAdjust” keysAndValues: kCIInputImageKey, output,

@”inputAngle”, [NSNumber numberWithFloat: 0.8f], nil].outputImage;

Cuando se aplica un filtro no se está realizando ningún tipo de procesado de imagen a nivel de píxeles. Esto se hace posteriormente en la fase de renderizado.

filtro sepia

filtro HueAdjust

Core Image - Definición del filtros II

Slash Mobility@jsanchezsierra

Page 20: Workshop IOS

Core Image - Renderizado

• Visualizar imagen de salida en objeto tipo UIImageView

• Salvar el resultado en PhotoLibrary

• Visualizar el resultado en una vista CAEAGLLayer (OpenGL)

• Pasar el resultado a CoreVideo

Slash Mobility@jsanchezsierra

Page 21: Workshop IOS

Core Image - Renderizado - UIImageView

• Renderiza la imagen CIImage en CGImage

CIContext *context = [CIContext context];CIImage *ciimage = [filter outputImage];CGImageRef cgimg = [context createCGImage:ciimage fromRect:[ciimage extent]];view.image = [UIImage imageWithCGImage:cgimg orientation:ui_orientation([ciimage properties]];CGImageRelease(cgimg);

Slash Mobility@jsanchezsierra

Page 22: Workshop IOS

Core Image - Renderizado - Photo Library

• Crear un contexto en la CPU

CIContext *context = [CIContext contextWithOptions: [NSDictionary dictionaryWithObject: [NSNumber numberWithBool:YES] forKey:kCIContextUseSoftwareRenderer]];

Porque contexto CPU? Te permitirá realizar procesos en el background.El contexto GPU tiene limitaciones del tamaño de textura El contexto CPU soporta imagenes de mayor tamaño

•Crea CGImage a partir de CIImage

CGImageRef cgimg = [cpu_context createCGImage:outputImage fromRect:[outputImage extent]];

•Añade la imagen CGImage a la libreria de fotos

ALAssetsLibrary *library = [ALAssetsLibrary new]; [library writeImageToSavedPhotosAlbum:cgimg metadata:[outputImage properties]

completionBlock:^(NSURL *assetURL, NSError *error) { }];CGImageRelease(cgimg);

Slash Mobility@jsanchezsierra

Page 23: Workshop IOS

Core Image - Renderizado - CAEAGLLayer

Renderiza directamente a pantalla a traves de CAEAGLLayer Evita buffers intermedios como CGImageRef Crear el contexto usango el EAGLContext

EAGLContext *eagl_ctx = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];CIContext *ci_ctx = [CIContext contextWithEAGLContext:eagl_ctx];

Añadir código cada vez que se actualiza la pantalla

- (void)updateScreen {

CIImage *image = [filter outputImage]; [context drawImage:image atPoint:CGPointZero fromRect:[image extent]]; glBindRenderbuffer(GL_RENDERBUFFER, render_buffer); [eaglContext presentRenderbuffer:GL_RENDERBUFFER];

}

Slash Mobility@jsanchezsierra

Page 24: Workshop IOS

Core Image - Renderizado - CoreVideo

Se renderiza directamente a través de CVPixelBufferRef

CIContext *context = [CIContext context]; CIImage *ciimage = [filter outputImage]; [context render:ciimage toCVPixelBuffer:pixelbuffer bounds:[ciimage extent]colorSpace:nil];

Te permite procesar frame a frame utilizando Core Video

Slash Mobility@jsanchezsierra

Page 25: Workshop IOS

Demo CoreImage Filters

Slash Mobility@jsanchezsierra

Page 26: Workshop IOS

Core Image -Referencias

Using Core Image on iOS and Mac OS XWWDC 2011 - Session 422. Videohttps://developer.apple.com/videos/wwdc/2011/#using-core-image-on-ios-mac-os-x

Core Image Programming Guidehttp://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/CoreImaging/CoreImage.pdf

Core Image Filter Referencehttp://developer.apple.com/library/mac/#documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html

CGImageProperties Referencehttp://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CGImageProperties_Reference/Reference/reference.html

Slash Mobility@jsanchezsierra

Page 27: Workshop IOS

Indice

• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrado, renderizado. Demo

• Audio en iOS Audio en iOS. System Sound, Media Player, AVAudioPlayer Demo

• Accelerate framework Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.

Slash Mobility@jsanchezsierra

Page 28: Workshop IOS

Audio en iOS - Conceptos básicos

Slash Mobility@jsanchezsierra

• System Sound

• MPMediaPlayerController, librería de música

• AVAudioPlayer

• Core Media

• Open AL

Page 29: Workshop IOS

System Sound

Slash Mobility@jsanchezsierra

• Añadir el framework AudioToolbox al proyecto#import <AudioToolBoc/AudioToolbox.h>

• Crear la URL del sonido a reproducir sound.mp3

NSString *soundPath = [[NSBundle mainBundle] pathForResource:@”sound" ofType:@”mp3” inDirectory:@"/"];CFURLRef SoundPathPathURL = (CFURLRef) [[NSURL alloc] initFileURLWithPath: soundPath]

• Creo el sonido y lo reproduzcoSystemSoundID systemSound; AudioServicesCreateSystemSoundID ( SoundPathPathURL ,&systemSound);

AudioServicesPlaySystemSound(systemSound);

Page 30: Workshop IOS

MPMusicPlayerController (Music Library)

Slash Mobility@jsanchezsierra

• Añadir el framework MediaPlayer al proyecto#import <MediaPlayer/MediaPlayer.h>

• Crear la URL del sonido a reproducir sound.mp3 MPMusicPlayerController *myPlayer =[MPMusicPlayerController applicationMusicPlayer ];

[myPlayer setQueueWithItemCollection: mediaItemCollection]; [myPlayer play];

• Extraer metadatos (título, artista, album, imagen...)

MPMediaItem *myTrack = [ myPlayer nowPlayingItem]; NSString *title=[myTrack valueForProperty: MPMediaItemPropertyTitle]]; NSString *artist=[myTrack valueForProperty: MPMediaItemPropertyArtist]]; UIImage *artworkImage= [[myTrack valueForProperty: MPMediaItemPropertyArtwork] imageWithSize: CGSizeMake (120, 120) ]

• Métodos y propiedades [myPlayer play]; [myPlayer pause]; [myPlayer stop]; [myPlayer skipToNextItem]; [myPlayer skipToPreviousItem]; [myPlayer skipToBeginning];

[myPlayer nowPlayingItem]; [myPlayer currentPlaybackTime]; [myPlayer repeatMode]; [myPlayer shuffleMode]; [myPlayer playbackState]; [myPlayer volumen];

Page 31: Workshop IOS

MPMediaPickerController (Music Library)

Slash Mobility@jsanchezsierra

• El controlador MPMediaPicker permite acceder a la librería de música MPMediaPickerController *picker =[[MPMediaPickerController alloc] initWithMediaTypes: MPMediaTypeMusic]; picker.delegate = self; // MPMediaPickerControllerDelegate picker.allowsPickingMultipleItems = YES; picker.prompt = @"Añade las canciones a reproducir";

• Método delegado de MPMediaPickerControllerDelegate. Se llama cuando el usuario ha seleccionado las canciones.

- (void) mediaPicker: (MPMediaPickerController *) mediaPicker didPickMediaItems: (MPMediaItemCollection *) mediaItemCollection { ...

[myPlayer setQueueWithItemCollection: mediaItemCollection];

... }

Page 32: Workshop IOS

AVAudioPlayer

Slash Mobility@jsanchezsierra

• Añadir el framework AVFoundation al proyecto#import <AVFoundation/AVFoundation.h>

• El controlador AVAudioPlayer permite reproducir un fichero de audio de mi App

NSURL * urlTrack = [[NSURL alloc] initFileURLWithPath: [[NSBundle mainBundle] pathForResource:@"track" ofType:@"mp3"]];

AVAudioPlayer *track = [[AVAudioPlayer alloc] initWithContentsOfURL: urlTrack error: nil];

[track prepareToPlay]; [track play]; [track pause]; [track stop]; [track playAtTime]; [track volumen]; [track rate]; [track pan]; [track enableRate]; [track numberOfLoops];

[track duration]; [track currentTime]; [track meteringEnabled]; [track averagePowerForChannel]; [track peakPowerForChannel]; [track url]; [track data]; [track settings];

• Métodos y propiedades

Page 33: Workshop IOS

Demo AudioLab

Slash Mobility@jsanchezsierra

Page 34: Workshop IOS

Demo StockSound

Slash Mobility@jsanchezsierra

Page 35: Workshop IOS

Indice

• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrado, renderizado. Demo

• Audio en iOS Audio en iOS. System Sound, Media Player, AVAudioPlayer Demo

• Accelerate framework Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.

Slash Mobility@jsanchezsierra

Page 36: Workshop IOS

mobile Apps por categoría

Page 37: Workshop IOS

Autocad WS - for iPad

Page 38: Workshop IOS

iRhino 3D for iPad

Page 39: Workshop IOS

Textile Architecture App for iPad

Page 40: Workshop IOS

Textile Architecture App for iPadVideo

Search keywords: Textile Architecture iPad

Page 41: Workshop IOS

LAPACK and BLASLinear Algebra PACKAge / Basic Linear Algebra Subprograms

iOS accelerate framework

<Accelerate/Accelerate.h>

cblas_dgemm(&order, TransA, TransB, &n, &m, &k, alpha,A, lda,B,ldb,beta,C,ldc);

dgetrs_("N", &n, &one, a, &n, ipiv, b, &n, &info);

dgetrf_(&n, &n, a, &n, ipiv, &info);

Page 42: Workshop IOS

LAPACK and BLASLINPACK Benchmark

performance in Mflops

iPad 2 using reference code

“Bland A”

I recommend you to migrate your code to mobile devices, try it!

take benefit of the hardware

how fast can you solve a system of linear equation?

Page 43: Workshop IOS

Desarrollador

Mala gestión del proyecto - se encuentra solo ante el proyecto - línea a línea - proyectos donde las especificaciones no están definidas - cambian a diario - plazos de entrega inaceptables - prisas - desarrollos que comienzan sin tener diseñada la App - apps que no se testean - se suben al App Store y luego te llaman diciendo que hay un error - crashes - etc... no se pierde tiempo diseñando -testeando la App

Hay gente que lo hace bien - tu modelo de negocio dependerá de la movilidad - has de estar preparado para gestionar un proyecto móvil - dedicar recursos a este sector - entender la importancia de un buen diseño basado en la experiencia de usuario

iOS/Android/Blackberry/..

• iOS Software Architect

El desarrollador va perdiendo confianza en el proyecto - se convierte en un mercenario - ya no es un aliado - intentará acabar cuanto antes la App - si le llamas para seguir con el mantenimiento no querra saber nada de ti - preferirá invertir su tiempo e ilusión en otros proyectos

• Albañil tecnológico

• Cuida al desarrollador y valora su trabajo

Valora el trabajo del desarrollador - implica al desarrollador en el diseño y desarrollo del producto - que disfrute con lo que sabe hacer - que no sea se convierta en un mercenario - crea equipo - busca a los mejores - no hay mejor aliado que tener a un desarrollador contento

Page 44: Workshop IOS

iOS headhunters - San Francisco

Hello Javier, Thanks so much for getting back to me. I really appreciate it. Anyways, do you have any buddies looking? We'll send you a MacBook Air if you do! Cheers! XXXXX YYYYYYSenior Technical RecruiterSan Francisco, CA

Hi Javier,

No worries, let me know if you have any friends with good ios development and if anyone in our firm places them our firm will write you a check for helping us out!

Thks!

XXXX YYY Professional Headhunter at YYYYSan Francisco Bay Area

Pagan lo que sea por tener a los mejores - saben que el éxito de su producto depende de ellos - crean equipo - perfiles vocacionales - se implican - valor añadido - eligen los proyectos - crean riqueza.

Page 45: Workshop IOS

iOS - Javier Sánchez Sierra - @jsanchezsierra

CEO&Founder - Emilio Aviles Avila - @techmi

BDigitalApps, Barcelona,15 de Noviembre de 2011#bdigitalapps

Slash Mobility