Core Image / Audio en iOS iOS - Javier Sánchez Sierra - @jsanchezsierra CEO&Founder - Emilio Aviles Avila - @techmiBDigita...
Indice• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrad...
Indice• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrad...
Core Image - Conceptos básicosFiltros, procesado de imagen, pixel a pixel                              filtro              ...
Core Image - Conceptos básicosFiltros    original                               filtrada               filtro     filtro     ...
Core Image - Conceptos básicosLos filtros se pueden concatenar                      filtro      filtro     filtro             ...
Core Image - Arquitectura                AplicacionesCore Graphics    Core Video     Core Image                Open GL ES ...
Core Image - Arquitectura                Aplicaciones                                             CPU RenderingCore Graphi...
Core Image en Mac OS X - iOS 5Mac OS X                          iOS 5• 130 filtros, usuario crea        • 16 filtros, photo ...
Core Image - Filtros disponibles en iOS5Ajustes de Color CIGammaAdjust             Filtro CIHueAdjust   Filtro CIColorCont...
Core Image - Filtros disponibles en iOS5Estilo                      Ajustes de Color              Ajustes Geometría       ...
Core Image - Filtros disponibles en OS X•   Blurs: Median, Gaussian, Motion y Noise•   Color Adjustments & Effects: Exposu...
Core Image - Filtros disponibles en OS X  CIPixelate                CIPointllize                   CIBloom                ...
Core Image - Filtros disponibles en OS X             CIColorBlendMode                                                  CIC...
Core Image - Filtros disponibles en OS X                                              CIGlassDistortion CIKaleidoscope    ...
Core Image - Clases I• CIFilter  Representa un efecto determinado  Cada filtro tiene sus propios parámetros  Producen una i...
Core Image - Clases II✓ Crear objeto tipo CIImage   image = [CIImage imageWithContentsOfURL:myURL];✓ Crear un objeto tipo ...
Core Image - Definición del filtros I• Los valores de entrada del filtro se asignan con key/value   CIFilter *filter = [CIFil...
Core Image - Definición del filtros II   • Comienzo aplicando el primer filtro: CISepiaTone (imagen -> output)      output = ...
Core Image - Renderizado• Visualizar imagen de salida en objeto tipo UIImageView• Salvar el resultado en PhotoLibrary• Vis...
Core Image - Renderizado - UIImageView• Renderiza la imagen CIImage en CGImage   CIContext *context = [CIContext context];...
Core Image - Renderizado - Photo Library• Crear un contexto en la CPU   CIContext *context = [CIContext contextWithOptions...
Core Image - Renderizado - CAEAGLLayer    Renderiza directamente a pantalla a traves de CAEAGLLayer    Evita buffers inter...
Core Image - Renderizado - CoreVideoSe renderiza directamente a través de CVPixelBufferRef  CIContext *context = [CIContex...
Demo CoreImage Filters                         Slash Mobility                              @jsanchezsierra
Core Image -ReferenciasUsing Core Image on iOS and Mac OS XWWDC 2011 - Session 422. Videohttps://developer.apple.com/video...
Indice• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrad...
Audio en iOS - Conceptos básicos •   System Sound •   MPMediaPlayerController, librería de música •   AVAudioPlayer •   Co...
System Sound• Añadir el framework AudioToolbox al proyecto   #import <AudioToolBoc/AudioToolbox.h>• Crear la URL del sonid...
MPMusicPlayerController (Music Library)• Añadir el framework MediaPlayer al proyecto   #import <MediaPlayer/MediaPlayer.h>...
MPMediaPickerController (Music Library)• El controlador MPMediaPicker permite acceder a la librería de música   MPMediaPic...
AVAudioPlayer• Añadir el framework AVFoundation al proyecto   #import <AVFoundation/AVFoundation.h>• El controlador AVAudi...
Demo AudioLab                Slash Mobility                     @jsanchezsierra
Demo StockSound                  Slash Mobility                       @jsanchezsierra
Indice• Introducción a Core Image en iOS5 Conceptos básicos, arquitectura, clases, API, plataformas Inicialización, filtrad...
mobile Apps por categoría
Autocad WS - for iPad
iRhino 3D for iPad
Textile Architecture App for iPad
Textile Architecture App for iPad                     VideoSearch keywords: Textile Architecture iPad
LAPACK and BLASLinear Algebra PACKAge / Basic Linear Algebra Subprograms                 iOS accelerate framework         ...
LAPACK and BLAS                                LINPACK Benchmark                                                  how fast...
Desarrollador                                 iOS/Android/Blackberry/..• iOS Software Architect• Albañil tecnológico  Mala...
iOS headhunters - San FranciscoHello Javier,Thanks so much for getting back to me. I really appreciate it. Anyways,do you ...
Slash Mobility  iOS - Javier Sánchez Sierra - @jsanchezsierra  CEO&Founder - Emilio Aviles Avila - @techmiBDigitalApps, Ba...
Upcoming SlideShare
Loading in …5
×

Workshop IOS

1,253 views
1,204 views

Published on

BDigital Apps 2011 - Workshop IOS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,253
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Workshop IOS

  1. 1. Core Image / Audio en iOS iOS - Javier Sánchez Sierra - @jsanchezsierra CEO&Founder - Emilio Aviles Avila - @techmiBDigitalApps, Barcelona,15 de Noviembre de 2011#bdigitalapps Slash Mobility
  2. 2. 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
  3. 3. 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
  4. 4. Core Image - Conceptos básicosFiltros, procesado de imagen, pixel a pixel filtro sepia original filtrada Slash Mobility @jsanchezsierra
  5. 5. Core Image - Conceptos básicosFiltros original filtrada filtro filtro filtro sepia color Hue b&w Slash Mobility @jsanchezsierra
  6. 6. Core Image - Conceptos básicosLos filtros se pueden concatenar filtro filtro filtro sepia saturación b&w original filtrada Slash Mobility @jsanchezsierra
  7. 7. Core Image - Arquitectura AplicacionesCore Graphics Core Video Core Image Open GL ES Graphics Hardware Slash Mobility @jsanchezsierra
  8. 8. Core Image - Arquitectura Aplicaciones CPU RenderingCore Graphics Core Video Core Image GPU Rendering Open GL ES Graphics Hardware Slash Mobility @jsanchezsierra
  9. 9. Core Image en Mac OS X - iOS 5Mac OS X iOS 5• 130 filtros, usuario crea • 16 filtros, photo adjustment• CIFilter, CIImage, CIContext, • CIFilter, CIImage, CIContext CIKernel, CIFilterShape• CPU / Open GL • CPU / Open GL ES 2 Slash Mobility @jsanchezsierra
  10. 10. Core Image - Filtros disponibles en iOS5Ajustes de Color CIGammaAdjust Filtro CIHueAdjust Filtro CIColorControls Filtro CIExposureAdjust Filtro CISepiaTone Filtro CIColorMatrix Slash Mobility @jsanchezsierra
  11. 11. Core Image - Filtros disponibles en iOS5Estilo Ajustes de Color Ajustes Geometría CIToneCurve CIAffineTransform CIHightlightShadowAdjustGenerador CIVibrance CIStraighten CIConstantColorGenerator Filtro CITemperatureAndTintComposite operation CICrop CISourceOverCompositing Slash Mobility @jsanchezsierra
  12. 12. Core Image - Filtros disponibles en OS X• 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 Slash Mobility @jsanchezsierra
  13. 13. Core Image - Filtros disponibles en OS X CIPixelate CIPointllize CIBloom CIEdges CICrystallizeCILineOverlay CIGaussianBlur CIMotionBlur Slash Mobility @jsanchezsierra
  14. 14. Core Image - Filtros disponibles en OS X CIColorBlendMode CIColorPosterize CICopyMachineTransition CIColorInvertCIDisolveTransition CIColorMap Slash Mobility @jsanchezsierra
  15. 15. Core Image - Filtros disponibles en OS X CIGlassDistortion CIKaleidoscope CIEdgeWork CIPerspectiveTransform CIBumpDistortionCIHoleDistortion CICircularWrap Slash Mobility @jsanchezsierra
  16. 16. 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
  17. 17. Core Image - Clases II✓ Crear objeto tipo CIImage image = [CIImage imageWithContentsOfURL:myURL];✓ Crear un objeto tipo CIFilter filter = [CIFilter filterWithName:@"CISepiaTone"]; [filter setValue:image forKey:kCIInputImageKey]; [filter setValue:[NSNumber numberWithFloat:0.8f] forKey:@”inputIntensity”];✓ Crear objeto tipo CIContext context = [CIContext contextWithOptions:nil];✓ Renderiza la imagen de salida del filtro a CGImage result = [filter valueForKey:kCIOutputImageKey]; cgimage = [context createCGImage:result fromRect:[result extent]]; Slash Mobility @jsanchezsierra
  18. 18. Core Image - Definición del filtros I• Los valores de entrada del filtro se asignan con key/value CIFilter *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 outputImage output = [filter valueForKey:kCIOutputImageKey]; // forma general output = [filter outputImage]; // solamente en iOS output = filter.outputImage; // solamente en iOS• Acceso directo que permite crear, asignar valores y obtener resultado output = [CIFilter filterWithName:@”CISepiaTone” keysAndValues: kCIInputImageKey, image, @”inputIntensity”, [NSNumber numberWithFloat: 0.8f], nil].outputImage ; Slash Mobility @jsanchezsierra
  19. 19. Core Image - Definición del filtros II • 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; filtro filtro sepia HueAdjust Cuando se aplica un filtro no se está realizando ningún tipo de procesado deimagen a nivel de píxeles. Esto se hace posteriormente en la fase de renderizado. Slash Mobility @jsanchezsierra
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Core Image - Renderizado - CoreVideoSe 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
  25. 25. Demo CoreImage Filters Slash Mobility @jsanchezsierra
  26. 26. Core Image -ReferenciasUsing 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-xCore Image Programming Guidehttp://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/CoreImaging/CoreImage.pdfCore Image Filter Referencehttp://developer.apple.com/library/mac/#documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.htmlCGImageProperties Referencehttp://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CGImageProperties_Reference/Reference/reference.html Slash Mobility @jsanchezsierra
  27. 27. 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
  28. 28. Audio en iOS - Conceptos básicos • System Sound • MPMediaPlayerController, librería de música • AVAudioPlayer • Core Media • Open AL Slash Mobility @jsanchezsierra
  29. 29. System Sound• 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 reproduzco SystemSoundID systemSound; AudioServicesCreateSystemSoundID ( SoundPathPathURL ,&systemSound); AudioServicesPlaySystemSound(systemSound); Slash Mobility @jsanchezsierra
  30. 30. MPMusicPlayerController (Music Library)• 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 nowPlayingItem]; [myPlayer pause]; [myPlayer currentPlaybackTime]; [myPlayer stop]; [myPlayer repeatMode]; [myPlayer skipToNextItem]; [myPlayer shuffleMode]; [myPlayer skipToPreviousItem]; [myPlayer playbackState]; [myPlayer skipToBeginning]; [myPlayer volumen]; Slash Mobility @jsanchezsierra
  31. 31. MPMediaPickerController (Music Library)• 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]; ... } Slash Mobility @jsanchezsierra
  32. 32. AVAudioPlayer• 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]; • Métodos y propiedades [track prepareToPlay]; [track duration]; [track play]; [track currentTime]; [track pause]; [track meteringEnabled]; [track stop]; [track averagePowerForChannel]; [track playAtTime]; [track peakPowerForChannel]; [track volumen]; [track url]; [track rate]; [track data]; [track pan]; [track settings]; [track enableRate]; [track numberOfLoops]; Slash Mobility @jsanchezsierra
  33. 33. Demo AudioLab Slash Mobility @jsanchezsierra
  34. 34. Demo StockSound Slash Mobility @jsanchezsierra
  35. 35. 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
  36. 36. mobile Apps por categoría
  37. 37. Autocad WS - for iPad
  38. 38. iRhino 3D for iPad
  39. 39. Textile Architecture App for iPad
  40. 40. Textile Architecture App for iPad VideoSearch keywords: Textile Architecture iPad
  41. 41. 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); dgetrf_(&n, &n, a, &n, ipiv, &info); dgetrs_("N", &n, &one, a, &n, ipiv, b, &n, &info);
  42. 42. LAPACK and BLAS LINPACK Benchmark how fast can you solve a system of linear equation? performance in Mflops iPad 2 using reference code “Bland A” take benefit of the hardwareI recommend you to migrate yourcode to mobile devices, try it!
  43. 43. Desarrollador iOS/Android/Blackberry/..• iOS Software Architect• Albañil tecnológico 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 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• Cuida al desarrollador y valora su trabajo 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 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
  44. 44. iOS headhunters - San FranciscoHello Javier,Thanks so much for getting back to me. I really appreciate it. Anyways,do you have any buddies looking?Well send you a MacBook Air if you do! Hi Javier,Cheers! 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 writeXXXXX YYYYYY you a check for helping us out!Senior Technical RecruiterSan Francisco, CA Thks! XXXX YYY Professional Headhunter at YYYY San Francisco Bay AreaPagan 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.
  45. 45. Slash Mobility iOS - Javier Sánchez Sierra - @jsanchezsierra CEO&Founder - Emilio Aviles Avila - @techmiBDigitalApps, Barcelona,15 de Noviembre de 2011 #bdigitalapps

×