Windows | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Windows kategorisi için arşiv

Windows 10 UWP uygulamalarında OCR kullanımı

14 March 2016 1 yorum

Microsoft, Windows 10 uygulamaları içerisinden kullanabilmemiz için Optical Character Recognition (OCR) kütüphanelerini Universal Windows Platform (UWP) içerisine ekledi.

Böylece, Windows 10 yüklü olan tüm cihazlarda çalışabilen UWP uygulamaları Optical Character Recognition (OCR) yeteneklerine sahip olabiliyor.

Windows 10 Kasım 2015 güncellemesi ile birlikte OCR desteği 25 dil için hali hazırda sağlanıyor ve Türkçe dili de bunlardan biri.

Üstelik uygulamanın kullanılabilirliğini arttıracak bu yapıyı kodlamanız son derece kolay.

Kamerayı açarak resim çeken ve çektiği resimdeki yazıları algılayan örnek bir projeyi birlikte yapalım;

Öncelikle MainPage.xaml dosyasını açalım ve resim çekme ve resim içerisindeki yazıları bulma işini başlatacak olan Button nesnesini sayfaya ekleyelim;

<Page
	x:Class="OCROrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:OCROrnek">

	<Grid Margin="20">
		<Button Content="Tara" Click="Button_Click" />
	</Grid>

</Page>

MainPage.xaml.cs dosyası içerisinde Button_Click() methodunu oluşturalım ve OCR kütüphanelerini kullanmaya başlayalım;

private async void Button_Click(object sender, RoutedEventArgs e)
{
	var ui = new CameraCaptureUI();
	var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);

	var stream = await file.OpenAsync(FileAccessMode.Read);
	var decoder = await BitmapDecoder.CreateAsync(stream);

	var bitmap = await decoder.GetSoftwareBitmapAsync();

	var engine = OcrEngine.TryCreateFromUserProfileLanguages();
	var result = await engine.RecognizeAsync(bitmap);

	string extracted = result.Text;
}

Yukarıdaki method içerisinde öncelikle CameraCaptureUI sınıfını ve CaptureFileAsync() methodunu kullanarak uygulamamızın kamera aracılığıyla resim çekmesini sağladık. Bunun için CaptureFileAsync() method‘una CameraCaptureUIMode enum‘ından Photo değerini verdik.

Çekilen resmi OpenAsync() methodu ile açıp BitmapDecoder sınıfının CreateAsync() methoduna parametre olarak verdik. Böylece çekilen resmin hafıza içerisinde tutulduğu yere erişim sağlamış olduk.

GetSoftwareBitmapAsync() methodunu kullanarak SoftwareBitmap sınıfından bir değişken oluşturmuş, resmi bu değişken içerisinde saklamış olduk.

Artık OcrEngine sınıfının TryCreateFromUserProfileLanguages() methodu aracılığıyla kullanıcının cihazı kullandığı dilde OCR yapabileceği değişkeni oluşturabilir, RecognizeAsync() methodu ile karakter tanıma işini yaptırabiliriz.

Son olarak, OcrResult tipindeki değişkenin Text özelliği ile taranan resmin içerisindeki yazıları string tipinde elde edebiliriz.

Ben aşağıdaki görseli kullanarak bir tarama yaptırdım ve sonucu aşağıya yazdım;

Bir mum diğerini tutuşturmakla, kendinden bir şey kaybetmez. Mevlana Celaleddin-i Rumi

Windows 10 UWP uygulamalarında TTS için Speech Synthesis kullanımı

10 March 2016 Yorum yapılmamış

Uygulamalarımıza TTS (text-to-speech, yani yazıdan-sese) özelliği ekleyerek belirlediğimiz metinlerin sese dönüştürülmesini sağlayabiliriz.

Windows 8.1 ve Windows Phone 8.1 zamanından beri kullanımımıza açık olan SpeechSynthesis namespace‘i aracılığıyla uygulamamıza TTS desteği ekleyebiliriz.

Hemen yeni bir proje oluşturarak kodlamaya başlayalım;

MainPage.xaml dosyasını açarak sese dönüştürmek istediğimiz metni yazabileceğimiz bir TextBox, bir de Button nesnesi ekleyelim.

Bir metnin sese dönüştürülerek okunması için uygulamamıza ses dosyalarını oynatabilecek bir nesne eklememiz yeterlidir. Bunu için MainPage.xaml dosyasına bir tane de MediaElement nesnesi ekleyelim.

<Page
	x:Class="SpeechSynthesisOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SpeechSynthesisOrnek">

	<StackPanel Margin="20">
		<TextBox x:Name="Cumle" Header="Söylenecek Cümle" />
		<Button Content="Söyle" Click="Button_Click" />

		<MediaElement x:Name="mediaElement" />
	</StackPanel>

</Page>

Böylece uygulamanın başlangıç ekranı aşağıdaki gibi gözükmeli;

MainPage.xaml.cs dosyasında Button_Click() methodu aracılığıyla, butona tıklandığında yapılacak işleri yazıyoruz;

private async void Button_Click(object sender, RoutedEventArgs e)
{
	var synth = new SpeechSynthesizer();
	var synthStream = await synth.SynthesizeTextToStreamAsync(Cumle.Text);
	mediaElement.SetSource(synthStream, synthStream.ContentType);
}

Bu methodun içerisinde öncelikle SpeechSynthesizer sınıfından yeni bir değişken oluşturduk.

SynthesizeTextToStreamAsync() methoduna okunmasını istediğimiz metni string tipinde parametre olarak verdik ve geri dönen SpeechSynthesisStream tipindeki cevabı bir değişkene atadık.

Son olarak, ekranda yeralan MediaElement nesnesinin SetSource() methoduna SpeechSynthesisStream tipindeki değişkenimizi parametre olarak vererek, oluşan sesin oynatılmasını sağladık.

Böylece, ekrandaki TextBox nesnesine yazılan cümle, Button nesnesine tıklandığında uygulama tarafından okunacak ve bizler de duyabileceğiz.

Windows 10 UWP uygulamasında MediaEditing ile resimlerden video oluşturmak

06 March 2016 Yorum yapılmamış

Bu makale’de ilginç bir uygulama yazarak, 10 adet resim ve 1 adet mp3 dosyasından 1 adet video üreteceğiz.

Aşağıdaki projeyi geliştirirken ihtiyacımız olacak örnek dosyaları aşağıda paylaşıyorum;

Hemen yeni bir Blank App (Universal Windows) proje oluşturalım;

MainPage.xaml dosyasını açalım içerisindeki kodları aşağıdaki şekilde güncelleyelim. Böylece ekranda bir Button nesnesi gözükecek, üzerine tıklandığında resim ve ses dosyaları kullanılarak bir video oluşturulacak, oluşturulan video dosyası Button‘un hemen altına eklediğimiz MediaElement nesnesinde oynatılacak.

<Page
	x:Class="CreatingVideoFromImages.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:CreatingVideoFromImages">

	<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Button Content="Video Oluştur" Click="Button_Click" />

		<MediaElement x:Name="player" Width="1024" Height="768" />
	</StackPanel>

</Page>

MainPage.xaml.cs dosyasında Button_Click() methodunu oluşturmalıyız;

private async void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	var composition = new MediaComposition();
	var folderPhotos = await Package.Current.InstalledLocation.GetFolderAsync("Assets\\Photos");

	foreach (var file in await folderPhotos.GetFilesAsync())
	{
		var clip = await MediaClip.CreateFromImageFileAsync(file, TimeSpan.FromMilliseconds(3500));

		composition.Clips.Add(clip);
	}

	var folderSounds = await Package.Current.InstalledLocation.GetFolderAsync("Assets\\Sounds");

	foreach (var file in await folderSounds.GetFilesAsync())
	{
		var track = await BackgroundAudioTrack.CreateFromFileAsync(file);

		composition.BackgroundAudioTracks.Add(track);
	}

	var renderFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("video.mp4", CreationCollisionOption.GenerateUniqueName);

	await composition.RenderToFileAsync(renderFile);

	player.SetSource(await renderFile.OpenReadAsync(), renderFile.ContentType);

	player.Play();
}

Yukarıdaki kod bloğunda öncelikle MediaComposition sınıfından yeni bir değişken oluşturuyoruz. Böylece istediğimiz kadar resim, ses veya video dosyasını bu composition değişkenine ekleyerek yeni bir video oluşturabileceğiz.

Package sınıfının InstalledLocation property‘sinden erişebildiğimiz GetFolderAsync() methodu ile projenin istediğim dizinine erişebiliyor, GetFilesAsync() methodunu kullanarak içindeki dosyaları elde edebiliyoruz.

MediaClip sınıfının static CreateFromImageFileAsync() methodunu kullanarak TimeSpan sınıfı aracılığıyla belirlediğimiz süre kadar videoda görüntülenecek resimleri composition değişkenine ekliyoruz.

BackgroundAudioTrack sınıfının static CreateFromFileAsync() methodunu kullanarak videonun arkaplan sesi olacak ses dosyalarını composition değişkenine ekliyoruz.

ApplicationData sınıfının LocalFolder property‘si aracılığı ile erişebildiğimiz CreateFileAsync() methodu aracılığıyla video.mp4 isimli dosyayı oluşturuyoruz, ikinci parametrede CreationCollisionOption.GenerateUniqueName değerini verdiğimiz için aynı isimli bir dosya zaten dizinde varsa dosyaya yeni bir isim verilecek.

MediaComposition sınıfının RenderToFileAsync() methodunu kullanarak, resim ve ses dosyaları eklediğim composition değişkeninden video oluşturuyoruz.

Ekranda yeralan MediaElement nesnesinin SetSource() methodunu kullanarak oluşturduğumuz video dosyasını yüklüyor, Play() methodunu kullanarak ekranda oynatmaya başlıyoruz.

Bu makalede verdiğim resim ve ses dosyalarını kullanarak oluşturulan videoyu aşağıda izleyebilirsiniz;

Windows 10 UWP uygulamasında resimleri yuvarlak göstermek

02 March 2016 1 yorum

Son yıllarda özellikle mobil uygulamalarda avatar dediğimiz stilde resimleri yuvarlak göstermek sıklıkla kullanılır oldu.

Bunu gerçekleştirebilmek için resimleri yuvarlak kaydetmeye gerek yok.

Bu makalede Windows 10 UWP projesinde resimleri nasıl yuvarlak gösterebileceğimizi inceleyeceğiz.

Önce bir Blank App (Universal Windows) projesi oluşturalım;

Projenin Assets dizinine yuvarlak göstermek istediğimiz resmi ekleyelim, bu makalede ben Bora Kaşmer‘in aşağıdaki resmini ekliyorum;

MainPage.xaml dosyasını açalım ve kodları aşağıdaki şekilde güncelleyelim;

<Page
	x:Class="YuvarlakAvatarResim.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:YuvarlakAvatarResim">

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Image Source="/Assets/bora.jpg" Width="250" Height="250" />
	</Grid>

</Page>

Böylece ekrana bir Image nesnesi ekledik ve içerisinde Bora Kaşmer‘in resmini aşağıdaki gibi gösterdik;

Eğer bu resmi kare değil, yuvarlak göstermek istiyorsak, Grid nesnesinin içindeki Image nesnesini Ellipse nesnesi ile değiştirip, Fill özelliğine ImageBrush nesnesi ekliyoruz;

<Page
	x:Class="YuvarlakAvatarResim.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:YuvarlakAvatarResim">

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Ellipse Width="250" Height="250">
			<Ellipse.Fill>
				<ImageBrush ImageSource="/Assets/bora.jpg" />
			</Ellipse.Fill>
		</Ellipse>
	</Grid>

</Page>

Böylece ekranımız aşağıdaki şekilde yuvarlak resim ile gözükür hale geliyor;

Windows 10 UWP uygulamasında Log için Slack kullanmak

22 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding makalesini okumanızı tavsiye ederim.

Slack, http://www.slack.com adresinde hizmet veren, son yılların en başarılı uygulamalarından birisi. Kendi sitelerinde yazana göre;

Slack is a messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive

Geçen hafta aldığım çok ilginç bir email‘de bir uygulamada loglama için Slack kullanabilir miyiz? sorusu vardı.

Bu makalede Windows 10 UWP uygulamasında Slack entegrasyonu yapacağız, fakat aynı yöntemler ile rahatlıkla bir web uygulamasında veya web service‘inde aynı entegrasyon kurulabilir.

Öncelikle Slack üzerinde ücretsiz olarak bir hesap, hesabı oluşturduktan sonra yeni bir Channel oluşturmamız gerekiyor. Örneğin SlackLoggerApp-Logs isimli bir channel oluşturmak için;

Yeni bir public channel oluşturunca Slack sayfasında aşağıdaki gibi bir mesaj gözükmeli;

Got it! butonuna tıkladığımızda bizi channel‘in sayfasına yönlendirmeli;

https://{hesap}.slack.com/apps/build/custom-integration adresine giderek yazacağımız uygulamanın entegre olacağı Slack web servisini oluşturuyoruz. Bunun için Incoming WebHooks seçeneğini seçerek ilerlememiz lazım;

Gelen ekranda uygulamamızı geliştirirken ihtiyaç duyacağımız tüm bilgiler yer alıyor. Özellikle Webhook URL ve Sending Messages alanındaki bilgilere kesinlikle ihtiyacımız olacak;

Bu noktaya geldikten sonra Visual Studio‘yu açalım ve yeni bir Blank App (Universal App) projesi oluşturalım;

Projeyi oluşturduktan sonra MainPage.xaml dosyasını açalım ve aşağıdaki kodları yazalım;

<Page
	x:Class="SlackLogger.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SlackLogger">

	<StackPanel Background="#1abc9c" Padding="10">
		<TextBox Header="Adınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind FirstName, Mode=TwoWay}" />
		<TextBox Header="Soyadınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind LastName, Mode=TwoWay}" />
		<TextBox Header="EMail Adresiniz" Margin="5" BorderBrush="Transparent" Text="{x:Bind EMail, Mode=TwoWay}" />
		<TextBox Header="Mesajınız" Margin="5" Height="300" BorderBrush="Transparent" Text="{x:Bind MessageBody, Mode=TwoWay}" />
		<Button Content="Gönder" Margin="5" Height="40" HorizontalAlignment="Stretch" Click="{x:Bind Send}" />
	</StackPanel>

</Page>

Önce bir StackPanel nesnesi oluşturduk, içerisine 4 adet Textbox 1 adet Button nesnesi ekledik.

Textbox nesnelerinin Header özelliklerine verdiğimiz değerler ile birer başlığa sahip olmalarını sağladık.

BorderBrush özelliklerine verdiğimiz Transparent değer sayesinde çerçevelerin gözükmemesini sağladık.

Son olarak, Text özelliklerine ve Click olayına {x:Bind} tipinde değerler vererek Databinding yapıyoruz. Burada önemli olan nokta, Textbox‘ların Text özelliklerine yaptığımız Databinding‘de Mode özelliğine TwoWay değerini vererek, iki yönlü Databinding yapmak. Böylece ekranda bir değer değiştirildiği zaman Databinding yapıldığı property‘nin değeri otomatik olarak güncellenecek.

Böylece çalıştırdığımızda aşağıdaki gibi gözüken bir uygulama elde edeceğiz;

Databinding için FirstName, LastName, EMail ve MessageBody property‘lerini, ayrıca Send() methodunu yazmamız lazım. MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

public string FirstName { get; set; }
public string LastName { get; set; }
public string EMail { get; set; }
public string MessageBody { get; set; }

private async void Send()
{
	var client = new HttpClient();

	var payload = "{\"text\": \"" + FirstName + " " + LastName + "(" + EMail + ") : " + MessageBody + "\"}";

	await client.PostAsync(new Uri("https://hooks.slack.com/services/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"), new HttpStringContent(payload));
}

Böylece Gönder butonuna basıldığında Slack‘te oluşturduğumuz public channel‘ın web service‘ine istediğimiz bilgiyi gönderebileceğiz. Bu makaledeki örnekte Ad Soyad (EMail) : Message formatında bilgiyi Windows.Web.Http namespace‘i altında yeralan HttpClient sınıfının PostAsync() methoduna HttpStringContent tipinde gönderiyoruz.

Gönder butonuna bastığımızda, Slack, aşağıdaki notification‘ı gösterecek;

Eğer Slack‘teki public channel‘ın sayfasını açacak olursak, orada da mesajı görebileceğiz;