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

Arşiv

Etiketlenen yazılar text

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

Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding

02 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak makalesini okumanızı tavsiye ederim.

En son geliştirdiğimiz hali ile ekranımız aşağıdaki şekilde gözüküyor olmalı;

Databinding yapabilmek için öncelikle MainPage.xaml.cs dosyasını açıp, binding yapacağımız property‘leri ve varsa varsayılan değerlerini tanımlıyoruz.

Bu örnekte saat, dakika ve saniyenin her hanesini ayrı gösterebilmek için Hour1, Hour2, Minute1, Minute2, Second1 ve Second2 property’lerini aşağıdaki gibi tanımladım;

public string Hour1 { get; set; } = "0";

public string Hour2 { get; set; } = "0";

public string Minute1 { get; set; } = "0";

public string Minute2 { get; set; } = "0";

public string Second1 { get; set; } = "0";

public string Second2 { get; set; } = "0";

Artık ekrandaki Textblock nesnelerini güncelleyebiliriz, RefreshDisplay() methodunu tanımlayıp, içerisinde yukarıda tanımladığımız property‘lere değer ataması yapıyoruz;

private void RefreshDisplays()
{
	var now = DateTime.Now;

	var hour = now.Hour.ToString("00");
	var minute = now.Minute.ToString("00");
	var second = now.Second.ToString("00");

	Hour1 = hour.Substring(0, 1);
	Hour2 = hour.Substring(1, 1);

	Minute1 = minute.Substring(0, 1);
	Minute2 = minute.Substring(1, 1);

	Second1 = second.Substring(0, 1);
	Second2 = second.Substring(1, 1);
}

Sayfa açıldığında RefreshDisplays() methodunu çağırabilmek için sayfanın açıldığı anı bilmemiz ve tam orada RefreshDisplays() methodunu çağırmamız lazım.

Windows 10 UWP uygulamalarında bir sayfanın açıldığı anı Page sınıfında tanımlı olan OnNavigatedTo() methodunda yakalayabiliyoruz.

MainPage sınıfımızın base class‘ı olan Page sınıfında tanımlı olan OnNavigatedTo() methodunda kod çalıştırabilmek için OnNavigatedTo methodunu override etmemiz lazım;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	base.OnNavigatedTo(e);

	RefreshDisplays();
}

override ettiğimiz OnNavigatedTo() methodunun içerisinde RefreshDisplays() methodunu çağırıyoruz.

Databinding için code-behind tarafında yapmamız gereken tüm hazırlıkları yaptık, şimdi MainPage.xaml dosyasını açarak binding kodlarını tamamlayalım.

MainPage.xaml dosyasında yeralan nesnelerden binding yapmak istediklerimizin, binding yapmak istediğimiz property‘lerine değer olarak {x:Bind} ataması yapmalıyız.

Bu örnekte, Textblock nesnelerinin Text property‘lerine binding yapmak istiyoruz, MainPage.xaml dosyasındaki Grid elementini aşağıdaki kodlara dönüştürüyoruz;

<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>

	<Border Grid.Column="0">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Hour1}" />
			<TextBlock Text="{x:Bind Hour2}" />
		</StackPanel>
	</Border>
	<Border Grid.Column="1">
		<TextBlock Text=":" />
	</Border>
	<Border Grid.Column="2">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Minute1}" />
			<TextBlock Text="{x:Bind Minute2}" />
		</StackPanel>
	</Border>
	<Border Grid.Column="3">
		<TextBlock Text=":" />
	</Border>
	<Border Grid.Column="4">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Second1}" />
			<TextBlock Text="{x:Bind Second2}" />
		</StackPanel>
	</Border>

</Grid>

MainPage.xaml dosyasında sayfamızın ön izlemesi aşağıdaki gibi gözükmeli;

Eğer uygulamayı çalıştıracak olursak zaman bilgisi aşağıdaki şekilde ekranda gözüküyor olmalı;

Unity3D ile sahneye saat ve gerisayım eklemek

27 January 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Unity3D Kategorisindeki diğer makalelerimi okumanızı tavsiye ederim.

Bu makale sonunda sahneye saati ve 60 saniyeden geri sayımı gösteren iki yazı koyabileceksiniz.

Öncelikle Unity3D‘yi açarak bir oyun projesi oluşturuyoruz;

Hierarchy panelinden Main Camera nesnesini seçiyor ve Projection özelliğinde Ortographic değeri olduğunu kontrol ediyoruz. Scene alanında tam kamera’nın arkasından bakmak için GameObject menüsü altından Align View to Selected menüsüne tıklıyoruz.

Sahneye bir Text nesnesi eklemek için Hierarchy panelinde boş bir yere sağ tuşla tıklıyor ve UI kategorisi altından Text menüsünü seçiyoruz.

Oluşturulan Canvas ve Text‘in kamera’nın gördüğü alanın içerisinde olmasını sağlamak için Canvas seçili iken Render Mode özelliğine Screen Space – Camera değerini giriyoruz. Ayrıca Render Camera özelliğine Hierarchy panelinden Main Camera nesnesini sürükleyip bırakıyoruz.

Hierarchy panelinden Text nesnesini seçip Inspector panelinde gözüken Rect Transform kategorisi altından sahnede gözükeceği konumu belirliyoruz. Örneğin sahnenin sol üst köşesinde olması için left sütunu ile top satırının kesiştiği hücreye tıklıyoruz.

Hierarchy panelinde gözüken Text nesnesine isim olarak TimerText değerini verdikten sonra Edit menüsü altından Duplicate seçeneğini seçerek aynı nesneden bir tane daha oluşturuyoruz.

Yeni oluşturduğumuz Text nesnesine isim olarak CountdownText verip, sahnenin sağ üst köşesine hizalıyoruz.

Her iki Text nesnesinin de Inspector panelinden erişilebilen Font, Font Size ve Color değerlerini değiştirerek, sahnede büyük beyaz harfler gösterecek hale getiriyoruz.

Hierarchy panelinden Canvas nesnesini seçip Inspector panelinden Add Component butonuna tıklıyoruz ve New Script seçeneğini seçiyoruz.

Canvas nesnesine eklediğimiz yeni script’e TimeManager ismini verebiliriz.

TimeManager.cs dosyasını açarak için aşağıdaki kodları yazıyoruz;

using System;
using UnityEngine;
using UnityEngine.UI;

public class TimeManager : MonoBehaviour
{
	Text timerText;
	Text countdownText;

	float countdownTo = 60.0F;

	void Start()
	{
		timerText = GameObject.Find("TimerText").GetComponent<Text>();
		countdownText = GameObject.Find("CountdownText").GetComponent<Text>();
	}

	void Update()
	{
		countdownTo -= Time.deltaTime;

		if (countdownTo > 0)
		{
			countdownText.text = countdownTo.ToString();
		}

		timerText.text = DateTime.Now.ToString("hh:MM:ss");
	}
}

Öncelikle Start() methodunda ismi TimerText ve CountdownText olan iki nesneyi bulup içlerindeki Text elementlerine erişiyoruz ve bunları birer değişkende saklıyoruz. Böylece daha sonra bu nesnelere kolay bir şekilde erişebileceğiz.

Update() methodunda 60 saniyeden geri sayma yapabilmek için countdownTo değişkeninden geçen süreyi çıkartıyoruz ve elde ettiğimiz değeri sahnedeki CountdownText nesnesinde gösteriyoruz.

Son olarak Update() methodunda DateTime sınıfının Now özelliğinden elde ettiğimiz değeri saat:dakika:saniye formatına çeviriyoruz ve sahnedeki TimerText nesnesinde gösteriyoruz.

Eğer oyunu başlatacak olursak 60 saniyeden geri sayım ve bilgisayarın saati ekranda gözükecek;

Windows Phone 8 uygulamasında SystemTray’e Progressbar eklemek

06 November 2014 1 yorum

Windows Phone 8 için geliştirdiğimiz uygulamada uzun süren bir işlem esnasında kullanıcıya işlemin hala devam ettiğini göstermek isteriz.

Mesela, haberler sayfasında güncel haberleri web service’ten çekerken veya kullanıcının ekranda doldurduğu formu web service aracılığı ile kaydederken işlemin devam ettiğini ekranda göstermek isteriz.

Bunun için telefonda ekranın en üstünde bulunan SystemTray‘e ProgressIndicator eklememiz yeterli. Bunun için istediğimiz sayfanın xaml dosyasını açmalı;

<phone:PhoneApplicationPage
	x:Class="ProgressIndicatorOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

</phone:PhoneApplicationPage>

PhoneApplicationPage açılış ve kapanış tagları arasına aşağıdaki kod parçasını eklemeliyiz;

<shell:SystemTray.ProgressIndicator>
	<shell:ProgressIndicator IsIndeterminate="True" IsVisible="True" Text="Güncel haberler yükleniyor..." />
</shell:SystemTray.ProgressIndicator>

Böylece ilgili sayfa ekrana geldiğinde saatin de bulunduğu SystemTray alanında Güncel haberler yükleniyor… yazısı ile bir ProgressIndicator belirecek.