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

Arşiv

Etiketlenen yazılar package

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;

Unity3D projesinde Terrain ve Tree kullanarak sahne oluşturmak

03 March 2016 Yorum yapılmamış

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

Bu makale sonunda oyun sahnenizde istediğiniz yeryüzü şekilleri ve ağaçlar oluşacak.

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

GameObject menüsü altından 3D Object / Terrain menüsüne tıklıyor ve sahneye bir Terrain nesnesi ekliyoruz.

Sahneye eklediğimiz Terrain nesnesinin üzerine ağaçlar koymak istiyorsak, öncelikle projeye Tree Asset eklemeliyiz. Bunun için Assets menüsü altından Import Package / Environment menüsüne tıklamalıyız.

Açılan ekrandaki Import butonuna tıklıyoruz.

Böylece oyun sahnesine bir Terrain nesnesi ve Terrain üzerine yerleştireceğimiz Tree Asset‘lerini eklemiş olduk.

Inspector panelinde bulunan Add Tree butonuna tıklıyoruz.

Açılan ekranda istediğimiz Tree Asset‘lerden birini seçiyoruz;

Artık Terrain üzerine ekleyeceğimiz ağaçların farklı boylara sahip olması için Tree Height özelliğindeki aralığı istediğimiz gibi belirleyebilir, Mass Place Trees butonuna tıklayarak, açılan ekranda Terrain üzerine kaç ağaç eklemek istediğimizi belirleyebiliriz.

Bu makalede ben 1.000 ağaç ekleyeceğim.

Ağaçlar eklendikten sonra sahnemiz aşağıdaki gibi gözüküyor olmalı.

Inspector panelinde yeralan Raise/Lower Terrain butonuna tıklayarak Terrain üzerinde yükseltiler ve alçaltılar oluşturabiliriz. İstediğimiz şekli seçip, Settings altında yeralan Brush Size ile büyüklüğü belirleyip Terrain üzerinde dağlar ve vadiler oluşturabiliriz.

Eğer yakından bakacak olursak, Terrain üzerine eklediğimiz ağaçların dağların ve vadilerin yamaçlarında da yer alabildiğini görebiliriz.

Böylece istediğimiz kadar gerçekçi bir oyun alanı oluşturabilmemiz mümkün.

SASS (scss dosyaları) nedir?

03 February 2016 Yorum yapılmamış

Web tabanlı uygulamalarda html sayfalarını göze daha hoş gözükür hale getirmek ve kullanılabilirliği artırmak için css stillerini kullanırız.

Web tabanlı uygulama geliştirirken genelde uygulamaya özel renkler, fontlar, görseller, vs kullanırız. Bu renkleri, fontları, görselleri, vs css dosyalarının içerisinde sürekli kullanmamız gerekir.

Örneğin, uygulamamızda linklerin kırmızı gözükmesini istiyorsak css dosyasına uygun stili yazarız, butonların da kırmızı gözükmesi gerekirse, css dosyasına yeni bir stil ekleyerek gene kırmızı rengi kullanmamız gerekir.

Yukarıdaki örnekten devam edecek olursak, kırmızı renk ve tonları css dosyalarında belki onlarca defa kullanılmış olacak.

Eğer uygulamanın kırmızı değil, mavi tema ile gözükmesini istersek css dosyalarını açıp, kırmızı renk kodlarını mavi ile değiştirmemiz, kırmızı rengin tonlarına karşılık gelen mavi tonlarını bulup css dosyalarındaki stilleri güncellememiz gerekecek.

Eğer css dosyasının başında değişkenler, fonksiyonlar tanımlayabilseydik ve stillerde bu değişkenleri, fonksiyonları kullanabilseydik, değişiklikleri çok daha kolay yapabilecektik.

SASS ve LESS, tam olarak bu sorunu çözmeye çalışıyorlar.

Bu makalede SASS‘ın nasıl çalıştığını inceleyeceğiz, hemen örnek projemizi oluşturmak istediğimiz dizini Visual Studio Code ile açıyoruz ve içerisinde index.html ve package.json dosyalarını oluşturuyoruz;

index.html dosyasının içeriği;

<html>
	<head>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<header>
			<h1>Örnekler ile SASS</h1>
		</header>
		<article>
			<p>Bu örnekte SASS'ın nasıl kullanıldığını inceliyoruz</p>
		</article>
	</body>
</html>

package.json dosyasının içeriği;

{
	"name": "polatengin-sass-ornek",
	"description": "SASS Örnek Projesi",
	"version": "1.0.0",
	"private": true
}

Eğer daha önce kurulumunu yapmadıysak node-sass paketini npm üzerinden kurmamız gerekiyor. Eğer aşağıdaki komutu daha önce çalıştırdıysanız, tekrar çalıştırmaya gerek yok.

npm install -g node-sass

package.json dosyasına eklenebilecek scripts bölümü ile npm aracının birden fazla komutu, parametreleri ile birlikte bir defada çalıştırmasını sağlayabiliriz, aşağıdaki scripts parçasını ekleyelim;

"scripts": {
	"build-sass": "node-sass --include-path scss scss/main.scss css/style.css"
}

Böylece npm run build-sass komutunu çalıştırabileceğiz ve node-sass bizim için scss/main.scss dosyasını derleyip, css/style.css adı ile kaydedecek. Denemek için hemen Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidelim ve aşağıdaki kodu çalıştıralım;

npm run build-sass

Projemizin olduğu dizinde css dizininin oluşturulduğunu ve içerisine style.css dosyasının eklendiğini görebiliriz, henüz scss/main.scss dosyası boş olduğu için css/style.css dosyasının içerisi de boş.

html dosyasını tarayıcıda açıp içeriğini görebilmek için bir web server‘a ihtiyacımız olacaktır, eğer bilgisayarınıza daha önce bir web server kurmadıysanız, npm üzerinden http-server web server‘ını kurabiliriz;

npm install -g http-server

Eğer daha önce yukarıdaki kodu çalıştırdıysanız, tekrar çalıştırmanıza gerek yok.

Artık aşağıdaki komutu çalıştırarak http-server web server‘ını çalıştırabiliriz;

http-server

İstediğimiz tarayıcıyı açarak http://localhost:8080 adresine gidersek, aşağıdaki ekranı görmemiz lazım;

index.html dosyasında css/style.css dosyasını link elementi ile eklediğimiz için şu anda scss/main.scss dosyasına SASS kodlarını yazmaya başlayabiliriz.

scss/main.scss dosyasını açalım ve değişkenlerimizi tanımlayalım;

$arkaplan: #03a9f4;
$yazi: #9c27b0;
$yazi-tipi: "Helvetica";

Değişkenlerimizin isimlerini $ işareti ile başlatıyoruz, böylece SASS derleyici css dosyasını oluşturacağı zaman, $ işareti ile başlayan isimlerin değişken olduğunu anlayabiliyor. Değişkenleri kullanmak için main.scss dosyasına aşağıdaki kodları ekleyelim;

body {
	background-color: $arkaplan;
}
header {
	color: $yazi;
	font-family: $yazi-tipi;
	margin-left: 10px;
}
article {
	color: $yazi;
	font-family: $yazi-tipi;
	padding: 15px;
}

Böylece body elementinin background-color özelliği $arkaplan değişkeninin değerine, header elementinin color özelliği $yazi değişkeninin değerine, font-family özelliği $yazi-tipi değişkeninin değerine, margin-left özelliği sabit 15px değerine, article elementinin color özelliği $yazi değişkeninin değerine, font-family özelliği $yazi-tipi değişkeninin değerine, padding özelliği sabit 15px değerine sahip olacak.

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #9c27b0;
	font-family: "Helvetica";
	padding: 15px;
}

SASS dosyalarında öntanımlı bazı fonksiyonları da kullanabiliriz, örneğin yukarıdaki örnekte yeralan article elementinin arkaplan renginin sayfanın arkaplan renginden biraz daha açık bir renge sahip olmasını istiyorsak, article elementinin stil‘ine aşağıdaki kodu ekleyebiliriz;

background-color: lighten($arkaplan, 15%);

Böylece article elementinin background-color özelliği, $arkaplan değişkeninin değerinin %15 daha açık rengine sahip olacak. lighten() fonksiyonu ilk parametresinde renk değerini, ikinci parametresinde açık hale getirme miktarını alır.

Benzer şekilde darken() fonksiyonu ilk parametresinde aldığı renk değerini ikinci parametresinde aldığı miktar kadar koyu hale getirebilir.

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #9c27b0;
	background-color: #47c4fd;
	font-family: "Helvetica";
	padding: 15px;
}

Yukarıdaki scss/main.scss dosyasında hem header hem de article elementinin color ve font-family özelliklerinin olduğunu ve aynı değerlere sahip olduklarını görüyoruz. SASS dosyalarında tanımlayabileceğimiz @mixin değişkenleri sayesinde birden fazla stil özelliğine tek bir değişkende birleştirebilir, istediğimiz yerde @import tanımlaması ile kullanabiliriz;

@mixin renk-font {
	color: $yazi;
	font-family: $yazi-tipi;
}
header {
	@include renk-font;
	margin-left: 10px;
}
article {
	@include renk-font;
	background-color: lighten($arkaplan, 15%);
	padding: 15px;
}

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #9c27b0;
	font-family: "Helvetica";
	background-color: #47c4fd;
	padding: 15px;
}

Hatta, istersek @mixin değişkenlerinin parametre(ler) almasını da sağlayabiliriz;

@mixin renk-font($renk) {
	color: $renk;
	font-family: $yazi-tipi;
}

@include ile stillere eklediğimiz yerleri de aşağıdaki gibi değiştirelim;

header {
	@include renk-font($yazi);
	margin-left: 10px;
}
article {
	@include renk-font(darken($arkaplan, 15%));
	background-color: lighten($arkaplan, 15%);
	padding: 15px;
}

Böylece renk-font isimli @mixin değişkenimiz $renk parametresi ile aldığı renk bilgisini kullanacak. header elementinde $yazi değişkenini kullanıyoruz, article elementinde darken() methoduna $arkaplan değişkeninin değerini vererek oluşan rengi kullanıyoruz.

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #0275a8;
	font-family: "Helvetica";
	background-color: #47c4fd;
	padding: 15px;
}

Windows 10 UWP uygulamalarında ön veya arka kamera’nın görüntüsünü almak

26 January 2016 Yorum yapılmamış

Windows 10 UWP uygulamalarında cihazda bulunan ön veya arka kamera’dan birinin görüntüsünü alarak ekranda göstermek isteyebiliriz.

Örneğin, daha kaliteli olduğu için arka kamera‘nın görüntüsünü alıp üzerine filtre uygulayarak ekranda önizleme yaptırabiliriz.

Aynı şekilde ön kamera‘nın görüntüsünü ekranda göstererek kullanıcının aynaya bakıyormuş gibi uygulamayı kullanmasını sağlayabiliriz.

Hemen Visual Studio‘yu açarak yeni bir proje oluşturalım ve nasıl yapabildiğimize bakalım.

Windows kategorisinden Blank App (Universal Windows) proje template’ini seçerek, projeme bir isim veriyorum;

2-00

Solution Explorer‘dan erişebildiğim Package.appxmanifest dosyasına çift tıklayarak açıyoruz.

2-01

Capabilities tab’ında yeralan WebCam ve Microphone kutucuklarını işaretliyoruz;

2-02

MainPage.xaml dosyasını açıyor ve sayfaya bir CaptureElement nesnesi ekliyoruz;

MainPage.xaml.cs dosyasını açıyor ve OnNavigatedTo methodunu override ediyoruz. Böylece MainPage sayfasına gelindiğinde yapılacak işleri yazabileceğimiz bir method‘umuz oluyor;

OnNavigatedTo methodunda sırasıyla şunları yapıyoruz;

  • Uygulamanın çalıştığı cihazda bulunan ve video kaydetme yeteneğine sahip olan cihazların listesini alıyoruz
  • Bu cihaz listesinden ön panel‘de olanları filtreliyoruz
  • Eğer ön panelde bir video kaydedici cihaz varsa, bu cihazın Id bilgisi üzerinden cihaza erişiyoruz
  • Eriştiğimiz cihaz’ın önizlemesini MainPage.xaml dosyasında tanımladığımız CaptureElement nesnesi üzerinde göstermeye başlıyoruz

Eğer ön kamera‘nın değilde, arka kamera‘nın görüntüsünü göstermek isteseydik camera değişkenine aşağıdaki şekilde değer ataması yapmamız gerekecekti;

Windows 8 uygulaması içerisinden fotoğraf ve video çekmek

10 June 2014 Yorum yapılmamış

Windows Store için geliştireceğimiz uygulama içerisinden fotoğraf ve video çekecek ve Fotoğraflar ve Videolar dizinlerine kaydedeceğiz.

Yeni oluşturduğumuz projenin Package.appxmanifest dosyasını açıyor ve Capabilities tabında yeralan Webcam, Videos Library, Pictures Library kutucuklarını işaretliyoruz. Böylece uygulamamızın çalışırken ihtiyaç duyacağı yetkileri kullanıcıdan talep edilmesini sağlıyoruz.

MainPage.xaml dosyasını açarak içerisine aşağıdaki xaml kodlarını ekleyelim ve ekranın altında bir AppBar gözükmesini, içerisinde bir adet StackPanel iki adette Button olmasını sağlayalım;

<Page.BottomAppBar>
	<AppBar>
		<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
			<Button Style="{StaticResource PhotoAppBarButtonStyle}" Click="PhotoButton_Click /">
			<Button Style="{StaticResource VideoAppBarButtonStyle}" Click="VideoButton_Click /">
		</StackPanel>
	</AppBar>
</Page.BottomAppBar>

Öncelikle PhotoButton_Click methodunun içini dolduralım;

private async void PhotoButton_Click(object sender, RoutedEventArgs e)
{
	var camera = new CameraCaptureUI();

	var capture = await camera.CaptureFileAsync(CameraCaptureUIMode.Photo);

	if (capture != null)
	{
		var file = await KnownFolders.PicturesLibrary.CreateFileAsync(Guid.NewGuid().ToString("N") + ".jpg", CreationCollisionOption.ReplaceExisting);

		await capture.CopyAndReplaceAsync(file);
	}
}

İlk olarak CameraCaptureUI sınıfından yeni bir değişken oluşturup, CaptureFileAsync() methodunu çağırıyoruz, parametre olarak CameraCaptureUIMode.Photo değerini veriyoruz, böylece fotoğraf çekmek için gerekli hazırlıklarımızı tamamlamış oluyoruz.

KnownFolders sınıfının PicturesLibrary özelliği sayesinde cihazın fotoğraf kütüphanesine erişiyoruz ve CreateFileAsync() methodunu kullanarak çekilen fotoğrafı kaydedebileceğimiz bir dosya oluşturuyoruz.

capture ismindeki değişkenin CopyAndReplaceAsync() methodu sayesinde webcam kullanılarak çekilen resmi kaydediyoruz.

Video çekimi yapacak VideoButton_Click methodunun içi PhotoButton_Click methoduna çok benziyor;

private async void VideoButton_Click(object sender, RoutedEventArgs e)
{
	var camera = new CameraCaptureUI();

	var capture = await camera.CaptureFileAsync(CameraCaptureUIMode.Video);

	if (capture != null)
	{
		var file = await KnownFolders.VideosLibrary.CreateFileAsync(Guid.NewGuid().ToString("N") + ".wmv", CreationCollisionOption.ReplaceExisting);

		await capture.CopyAndReplaceAsync(file);
	}
}

Üç önemli değişiklik var;

  • camera değişkeninin CaptureFileAsync() methoduna parametre olarak CameraCaptureUIMode.Photo değeri yerine CameraCaptureUIMode.Video değerini veriyoruz
  • KnownFolders sınıfının PicturesLibrary özelliği yerine VideosLibrary özelliğini kullanıyoruz
  • CreateFileAsync() methoduna parametre olarak verdiğimiz dosya isminin uzantısını jpg yerine wmv yapıyoruz

Böylece Windows 8 uygulaması içerisinden hem fotoğraf hem video çekebilir ve uygun dizinlere kaydedilmesini sağlayabiliriz.