Workshop IOS
-
Upload
barcelona-digital-technology-centre -
Category
Technology
-
view
1.081 -
download
6
description
Transcript of 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
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
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
Core Image - Conceptos básicos
original filtrada
filtro sepia
Filtros, procesado de imagen, pixel a pixel
Slash Mobility@jsanchezsierra
original
Filtros
filtrada
filtro sepia
filtro color Hue
filtro b&w
Core Image - Conceptos básicos
Slash Mobility@jsanchezsierra
original
Los filtros se pueden concatenar
filtrada
filtro sepia
filtro saturación
filtro b&w
Core Image - Conceptos básicos
Slash Mobility@jsanchezsierra
Core Image - Arquitectura
Aplicaciones
Core Graphics Core Video Core Image
Open GL ES
Graphics Hardware
Slash Mobility@jsanchezsierra
Aplicaciones
Core Graphics Core Video Core Image
Open GL ES
Graphics Hardware
CPU Rendering
GPU Rendering
Core Image - Arquitectura
Slash Mobility@jsanchezsierra
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
Core Image - Filtros disponibles en iOS5
Slash Mobility@jsanchezsierra
Filtro CIColorControls
Filtro CIColorMatrixFiltro CIExposureAdjust
Filtro CIHueAdjust
Filtro CISepiaTone
CIGammaAdjust
Ajustes de Color
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
• 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
CILineOverlay
CIPixelateCILineOverlay
CIMotionBlur
CIPointllize CIBloom
Core Image - Filtros disponibles en OS X
CIGaussianBlur
CIEdges CICrystallize
Slash Mobility@jsanchezsierra
CILineOverlay
CIColorInvert
CIColorMap
CIColorBlendMode
CIColorPosterize
CICopyMachineTransition
CIDisolveTransition
Core Image - Filtros disponibles en OS X
Slash Mobility@jsanchezsierra
CILineOverlay
CIEdgeWorkCIGlassDistortion
CIHoleDistortion
CIKaleidoscope
Core Image - Filtros disponibles en OS X
CIBumpDistortionCIPerspectiveTransform
CICircularWrap Slash Mobility@jsanchezsierra
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
✓ 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
• 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
• 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
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
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
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
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
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
Demo CoreImage Filters
Slash Mobility@jsanchezsierra
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
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
Audio en iOS - Conceptos básicos
Slash Mobility@jsanchezsierra
• System Sound
• MPMediaPlayerController, librería de música
• AVAudioPlayer
• Core Media
• Open AL
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);
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];
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];
... }
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
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, 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
mobile Apps por categoría
Autocad WS - for iPad
iRhino 3D for iPad
Textile Architecture App for iPad
Textile Architecture App for iPadVideo
Search keywords: Textile Architecture iPad
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);
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?
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
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.
iOS - Javier Sánchez Sierra - @jsanchezsierra
CEO&Founder - Emilio Aviles Avila - @techmi
BDigitalApps, Barcelona,15 de Noviembre de 2011#bdigitalapps
Slash Mobility