Nil Buşra Özer Kişisel Blog: Kasım 2013

30 Kasım 2013 Cumartesi

Sylvester.js Kütüphanesi

Herkese merhabalar.

Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere sylvester.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Sylvester kütüphanesi; vektör, matris ve geometri kütüphanesidir. İstediğimiz boyutta matris ve vektör modelleyebilmemizi sağlayan sınıfları içeriyor. Örneğin; iki vektörü çarpacaksınız ve bunun için bir sürü döngü yazmanız gerekecek, sizi bu zahmetten kurtaracak olan çözüm sylvester.js JavaScript kütüphanesi olacaktır. Kütüphaneyi kullanmadan önce bu siteden indirebilirsiniz. Şimdi ise sizlere bu kütüphanedeki sınıfların metotlarından bahsetmek istiyorum. Çok fazla metot olduğundan dolayı sıkılacağınızı düşündüğüm için tüm metotları açıklamayacağım. Detaylı bilgiye bu siteden ulaşabilirsiniz.

Class(Sınıf): Vector

1) Vector.create(elements)

Array elementlerinden vektör yaratır ve bu vektörü geriye döndüren bir metottur. Örnek kullanımı:

var v = Vector.create([5,2,8]);

2) add(vector)

Eğer alıcı ile vektör aynı sayıda elementi içeriyorsa, bunlar toplanır ve bu metot tarafından geriye döndürülür. Eğer alıcı ile vektör aynı sayıda elementi içermiyorsa null geriye döndürülür.

3) distanceFrom(vector)

Alıcıdan vektöre olan mesafeyi pozitif değerde geriye döndürür.

a.distanceFrom(b) // |a-b| demektir..

4) isPerpendicular(vector)
Eğer iki vektör arasındaki açı doksan derece ise yani bu iki vektör birbirine dik ise, metot geriye "true" değerini döndürür.

Class(Sınıf): Matrix(Matris)

1) Matrix.create(elements)

Array elementlerinden matris yaratır ve bu matrisi geriye döndüren bir metottur. Elementler nested (iç içe) array olmalıdır.

var M = $M([
  [6,1,9],
  [2,4,8],
  [4,5,3]
]);

2) Matrix.Diagonal(elements)
Array elementlerindeki diyagonal elementleri içeren kare matrisi geriye döndüren metottur.

var M = Matrix.Diagonal([7,1,2,5]);

// M MATRİSİ
//    7 0 0 0
//    0 1 0 0
//    0 0 2 0
//    0 0 0 5

3) Matrix.Zero(n, m)

Bu metot, n tane satır m tane sütun içeren tüm elementleri sıfır olan bir matrisi geriye döndürür.

4) Matrix.I(n)
   Geriye nxn özdeş matrisini döndürür.

Class(Sınıf): Line

1) intersectionWith(obj)
"obj" ile birlikte receiver'ın (alıcının) kesişim noktasını gösteren vektörü geriye döndüren metottur. Eğer kesişim noktası yok ise geriye "null" değeri döndürülür.

2) liesIn(plane)
   Eğer line(çizgi) parametrede verilen düzlemin içerisinde ise metot, "true" değerini geriye döndürür.

3) contains(point)
Vektör noktası receiver(alıcı) üzerindeki noktanın konumunda ise metot "true" değerini döndürür.

4) rotate(angle, axis)
  Line(çizgi) ya da vektör olabilen alıcının(receiver), verilen eksene ve radyan cinsinden açıya göre döndürülmüş olan sonucu geriye döndüren metottur.

var L = Line.X.rotate(Math.PI/2, $V([5,0]));

var test = L.eql(Line.create([5,0], [0,1]));
//  true değerini döndürür- 90 derecelik döndürülme ile y eksenine pararlel olan Line.X parallel

Class(Sınıf): Plane(Düzlem)

1) pointClosestTo(point)
Verilen noktaya en yakın olan vektörü geriye döndüren metottur.

2) distanceFrom(obj)
Düzlem, vektör veya çizgi olabilen obj ile receiver(alıcı) arasındaki en kısa mesafeyi geriye döndüren metottur.

3) eql(plane)
Bu metot, verilen plane(düzlem) ile receiver(alanı) aynı bölgedeki alanı gösteriyorsa "true" değerini döndürür.

Şimdi ise sizin için ASP.NET ortamında yapmış olduğum örneği inceleyelim. Öncelikle kütüphanemizi Solution Explorer' a ekliyoruz.

Aşağıda göstermiş olduğum gif uzantılı resme, bu kütüphane sayesinde istediğim nokta ve düzlemlere göre döndürme hızını da ayarlayarak molekül hareketlerine benzeyen hareketler yaptırıyorum ve bu şekilden dilediğim sayı kadar ekleyebiliyorum.

    for (var i = 0; i < 25; i++) {
            dots[i] = Vector.create([h * (Math.random() - 0.5), h * (Math.random() - 0.5), h * (Math.random() - 0.5)]);
            image = document.createElement('img');
            image.id = 'img_' + i;
            image.src = dataImage;
            document.body.appendChild(image);
            images[i] = image;
        }

Yukarıdaki kod parçacığında, 25 tane yukarıdaki resimden kullandığım için döngümüz 25 defa çalışıyor. Random(rastgele) olarak vektör noktaları ürettim ve bu noktalara göre her resme bir id atadım.

  setInterval(function () {
            for (var i = 0; i < dots.length; i++) {
                f = (dots[i].e(3) + h) / (2 * h) + 0.1;
                images[i].style.opacity = f - 0.1;
                images[i].style.width = (50 * f) + 'px';
                images[i].style.height = (50 * f) + 'px';
                images[i].style.position = 'absolute';
                images[i].style.top = (150 - dots[i].e(2) * f) + 'px';
                images[i].style.left = (300 + dots[i].e(1) * f) + 'px';
                dots[i] = rot.x(dots[i]);
            }
        }, 22);

Yukarıdaki kod parçacığında ise, bir önceki kod parçacığında rastgele üretmiş olduğum vektörlerin noktalarını tutan dots arrayindeki noktaların genişliğini, yüksekliğini, opaklığını, pozisyonunu, tepeden ve soldan uzaklıktaki mesafesini ve şekillerin dönüş hızını ayarladım.

Ekran görüntüsü:

Proje kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
   <title>sylvester Örnek</title>  
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.js"></script>  
  </head>  
  <body style="background: #000;">  
   <script type="text/javascript">  
     var dataImage = "data:image/jpeg;base64,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"  
     var dots = [], images = [], h = 800;  
     var axis = Vector.create([1.7, 1, 0.7]);  
     var rot = Matrix.Rotation(0.1, axis);  
     for (var i = 0; i < 25; i++) {  
       dots[i] = Vector.create([h * (Math.random() - 0.5), h * (Math.random() - 0.5), h * (Math.random() - 0.5)]);  
       image = document.createElement('img');  
       image.id = 'img_' + i;  
       image.src = dataImage;  
       document.body.appendChild(image);  
       images[i] = image;  
     }  
     setInterval(function () {  
       for (var i = 0; i < dots.length; i++) {  
         f = (dots[i].e(3) + h) / (2 * h) + 0.1;  
         images[i].style.opacity = f - 0.1;  
         images[i].style.width = (50 * f) + 'px';  
         images[i].style.height = (50 * f) + 'px';  
         images[i].style.position = 'absolute';  
         images[i].style.top = (150 - dots[i].e(2) * f) + 'px';  
         images[i].style.left = (300 + dots[i].e(1) * f) + 'px';  
         dots[i] = rot.x(dots[i]);  
       }  
     }, 22);  
   </script>  
  </body>  
 </html>

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Reflection.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

1. http://www.chrisumbel.com/article/sylvester_node_js_matrix_vector_math

2. http://www.javascriptoo.com/sylvester

3 .http://ajaxian.com/archives/sylvester-vector-and-matrix-math-for-javascript

4. http://sylvester.jcoglan.com/api/vector.html

24 Kasım 2013 Pazar

Raphael.js Kütüphanesi

Herkese merhabalar.

Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere raphael.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Raphael.js, SVG (Scalable Vector Graphics) / VML (Vector Markup Language)'in temelinde kullanılan oldukça işlerimizi kolaylaştıran ve tasarım için yardımımıza koşan bir kütüphanedir. Bu kütüphane sayesinde sayfanıza vektörel grafikleri çizmekle kalmayıp, çizmiş olduğunuz şekli istediğiniz derecede ölçeklendirebilirsiniz. İstediğiniz derece kadar elementinizi döndürebilirsiniz, elementinize animasyon ekleyebilirsiniz ve sürükle bırak özelliğinin eklenebilmesi gibi birçok özelliği kullanabilmeniz mümkün. Aşağıda raphael.js kütüphanesi kullanarak çizilmiş birkaç şekil örneği bulunmaktadır.

Şimdi ise sizlere biraz bu kütüphanede kullanılan fonksiyonlardan ve parametrelerden bahsetmek istiyorum. Bu kütüphanede kullanılan tüm fonksiyonlardan bahsedecek olursam oldukça sıkılacaksınız çünkü oldukça fazla kullanılan fonksiyon sayısı mevcut, bu yüzden detaylı bilgi için bu siteye göz atmanızı tavsiye ediyorum.

ELEMENT

1) Element.animate()

Element için animasyon oluşturup başlatmaktadır. Bu fonksiyon obje döndürmektedir.

Parametreler:

callback: Animasyonun sonunda çağrılan bir parametredir.

animation: Obje tipinde bir parametre olan animasyon objesidir.

easing: String tipinde önemli bir parametredir. Raphael.easing_formulas veya CSS formatını kabul eder.
ms: Sayı tipindeki bir parametredir. Animasyonun çalışma süresi olan milisaniyeleri belirtir.

params: Obje tipindeki parametredir. Elementin özelliklerini belirtmektedir.

2) Element.clone()

Obje döndürür ve isminden de anlaşıldığı gibi elementi çoğaltır.

3) Element.dblclick(handler)

Elemente event handler(olay işleyicisi) ve çift tıklanabilme özelliğini ekler.

4) Element.hide()

Elementi görünmez yapmamızı sağlar.

5) Element.isPointInside(x,y)

Aldığı parametredeki koordinatların elementin içinde olup olmadığını anlamamıza yarar.

ANIMATION

1) Animation.delay(delay)

Belirlenen erteleme ile birlikte var olan animasyon objesinin bir kopyasını oluşturur. Geriye bu animasyon objesini döndürür.

delay parametresi: Milisaniye cinsinden gecikme süresidir.

var anim = Raphael.animation({cx: 25, cy: 35}, 2e3);
circle1.animate(anim); // verilen animasyonu çalıştırır..
circle2.animate(anim.delay(289)); // verilmiş olan animasyonu 289 ms sonra çalıştırır..

2) Animation.repeat(repeat)
Belirtilen tekrarlama sayısı kadar var olan animasyon objesinin kopyalarını oluşturur. Döndürdüğü değer, değiştirilmiş olan animasyon objesidir.
repeat parametresi: Animasyonun kaç defa tekrarlanacağının sayısını tutmaktadır.

PAPER

1) Paper.add(json)

Elementleri JSON formatındaki arraye ekler. Döndürdüğü değer, eklenmiş olan elementlerdir. Aşağıdaki kodlarda nasıl kullanıldığına bir bakalım.

paper.add([
    {
        type: "rect",
        x: 25,
        y: 40,
        width: 25,
        height: 40,
        fill: "#fc0"
    },
    {
        
        type: "circle",
        cx: 12,
        cy: 12,
        r: 6
        fill: "#fc0"
    }
]);

2) Paper.circle(x,y,r)
Parametrelerdeki belirlenen koordinatlar ve yarıçapa göre çember çizmemizi sağlar.

Şimdi ise aşağıdaki kod parçacığında nasıl kullanıldığına bir bakalım.

var circle1 = paper.circle(60, 70, 45);

3) Paper.image(src,x,y,width,height)
Belirlenen alana resim eklememizi sağlar. Şimdi ise aldığı parametrelere bakalım.
src: Eklenen resmin url'idir.

x: x koordinatı pozisonu.

y: y koordinatı pozisonu.

width: Eklenecek olan resmin genişliğidir.

height: Eklenecek olan resmin yüksekliğidir.

Aşağıdaki kod parçacığında nasıl kullanıldığına bir bakalım.

var v = paper.image("nil.png", 80, 60, 200, 300);

4) Paper.setSize(width,height)
Canvas boyutlarını değiştirmek istiyorsanız bu metodu çağırmalısınız.

width: Canvasın yeni genişliğidir.

height: Canvasın yeni yüksekliğidir.

5) Paper.getElementsByPoint(x,y)
Parametlerde belirtilen x ve y koordinatlarını içerisinde bulunduran tüm elementleri geriye döndüren bir metottur.

6) Paper.clear()
Çizilmiş olan sayfa kaldırılır ve sayfa üzerindeki tüm elementler silinir.

MATRIX

1) Matrix.add(a,b,c,d,e,f,matrix)
Parametrelerde verilen matrisin, var olan bir matrisin içerisine atılmasını sağlar.
2) Matrix.clone()
Döndürüğü değer matrisin kopyasıdır. İsminden de anlaşıldığı gibi matrisi çoğaltmaktadır.
3) Matrix.rotate(a,x,y)
Matrisi verilen parametrelere göre döndürür.
4) Matrix.toTransformString()
Dizgiye dönüştürülmüş olan matrisi geriye döndürür.

RAPHAEL

1) Raphael.angle(x1,y1,x2,y2,[x3],[y3])

İki veya üç nokta arasındaki açıyı geri döndüren metottur.

2) Raphael.isPointInsideBBox(bbox,x,y)
Eğer parametrelerde verilen koordinatlar sınırlayıcı kutunun (bounding box) içerisinde ise metot, true değerini geriye döndürür.

3) Raphael.el

Elementlere kendi metotlarınızı eklemeniz "Raphael.el" sayesinde mümkün. Aşağıda bu kullanımın nasıl olacağına dair bir örneğe bakalım.

Raphael.el.blue = function () {
    this.attr({fill: "#00F"});
};
// sonrasında aşağıdaki gibi kullanın..
paper.circle(175, 180, 35).blue();

4) Raphael.matrix(a,b,c,d,e,f)
Verilen parametrelere göre geriye matris döndürür.

SET

1) Set.clear()

Kümedeki tüm elementleri siler.

2) Set.exclude(element)

Parametrede verilmiş olan elementi kümeden siler.

3) Set.pop()

Pop'un özelliğinden de bilindiği gibi, son elementi siler ve bu elementi geriye döndürür.

eve()

1) eve.on(name,f)

Verilen olay dinleyicisini (event handler) verilen isme bağlayabilirsiniz. İsimler için "*" sembolünü kullanabilirsiniz. Aşağıdaki kod parçacığına bakarak kullanımını daha iyi anlayalım.

eve.on("*.under.*", f); //under ismi ile bağladık..
eve("mouse.under.floor"); // f'i tetikler..

2) eve.off(name,f)
Olay dinleyicisi (event handler) listesinden, verilen fonksiyonu bağlanmış olduğu isme göre siler.

Bazı fonksiyonları tanıdıktan sonra, sizin için ASP.NET ortamında yapmış olduğum örneğe geçmeden önce kendi çizim alanımızı nasıl oluşturduğumuza bir bakalım. Bu alanı sayfamızda Raphael() nesnesiyle oluşturduğumuz "paper" referansı ile kullanacağız. Çizim alanımızı oluşturmadan önce, çizim alanımızın genişliğini ve yüksekliğini belirlememiz gerekiyor. Ayrıca şunu da eklemek istiyorum; tercihe bağlı olarak, bu alanın bağımsız (absolute) bir pozisyona mı sahip olacağını yoksa bir elemente bakılarak mı konumlandırılacağını belirleyebiliyoruz.

İlk yöntem:

var paper = new Raphael(x, y, width, height);
var paper = new Raphael(element, width, height);

Bir elementi örnek alma yöntemi: Aşağıdaki örneğimizde, sayfamızda yer alan canvas_container DIV' ini kullanarak 300 x 400 boyutlarında bir çizim alanı oluşturuyoruz.

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 300, 400);
}

ASP.NET ortamında sizler için hazırlamış olduğum projeye gelmeden önce, raphael.js kütüphanesini indirip Solution Explorer'a eklemeliyiz. Projemde kullandığım kodları biraz açıklamak istiyorum.

p.circle(100, 100, 30).attr({ "stroke-width": 10, fill: "90-#f00-#000" }).animate({ cx: 300 }, 1000, "elastic");

Yukarıdaki kod parçacığında, istediğim boyuttaki circle' ı (çember) çizdim ve hareket edeceği süreyi ms cinsinden belirleyerek sağdan sola hareket etmesini sağladım.

p.circle(100, 100, 30).attr({ "stroke-width": 20, fill: "90-#f00-#000" }).animate({ cx: 300 }, 1000, "elastic");

Yukarıdaki kod parçacığında, istediğim boyuttaki circle'ı (çember) çizdim ve hareket edeceği süreyi ms cinsinden belirleyerek yerinde titreme hareketi yapmasını etmesini sağladım.

   var p = Raphael(0, 0, 400, 400);
            p.rect(0, 0, 400, 400);
            p.rect(20, 20, 50, 50).attr({ fill: "red", stroke: "none",cursor:"pointer" }).click(function () {
                this.attr({ fill: "blue" })// Kırmızı dikdörtgene tıklayınca mavi renge dönmesini sağlar..
            }).hover(function () {
                this.attr({ fill: "pink" });
            }, function () {
                this.attr({fill:"orange"});
            });

Yukarıdaki kod parçacığında, istediğim boyuttaki dikdörtgeni çizdim ve üzerine mouse ile gelindiğinde (hover) veya mouse ile tıklanıldığında (click) dikdörtgenin renginin değişmesini sağladım.

Ekran Görüntüsü:

Projenin kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <meta charset="utf-8" />  
   <title>Raphael JavaScript Kütüphanesi Örnek</title>  
   <script src="raphael.js"></script>  
   <script>  
     window.onload = function () {  
       var p = Raphael(0, 0, 400, 400);  
       p.rect(0, 0, 400, 400);  
       p.rect(20, 20, 50, 50).attr({ fill: "red", stroke: "none", cursor: "pointer" }).click(function () {  
         this.attr({ fill: "blue" })// Kırmızı dikdörtgene tıklayınca mavi renge dönmesini sağlar..  
       }).hover(function () {  
         this.attr({ fill: "pink" });  
       }, function () {  
         this.attr({ fill: "orange" });  
       });  
       p.circle(100, 100, 30).attr({ "stroke-width": 20, fill: "90-#f00-#000" }).animate({ cx: 300 }, 1000, "elastic");  
       p.circle(100, 100, 30).attr({ "stroke-width": 10, fill: "90-#00f-#0f0" }).animate({ cx: 300 }, 1000, "ease-in-out");  
     };  
   </script>  
   <style></style>  
 </head>  
 <body>  
 </body>  
 </html>

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Sylvester.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

1. http://kurtmancelik.wordpress.com/2009/11/03/raphael-javascript-kutuphanesi/
2. http://raphaeljs.com/reference.html
3 .https://github.com/DmitryBaranovskiy/raphael/
4. http://raphaeljs.com/

17 Kasım 2013 Pazar

Chronoline.js Kütüphanesi

Herkese merhabalar.

İki hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere chronoline.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Bu kütüphanenin oldukça kullanışlı bir kütüphane olduğunu düşünüyorum, neden diye soracak olursanız ne işe yaradığından bir bahsedelim. Planladığınız işlerinizi tarihe göre yatay bir zaman çubuğu üzerinde sıralamak istediğinizde size gelecek olan en iyi çözüm chronoline.js JavaScript kütüphanesidir. Tarihlerin ve bu tarihlere göre grafiksel olarak göstermek istediğiniz olayların listelerinden yola çıkarak, belirlediğiniz programlar, göstermek istediğiniz tarihsel olaylar vb. gibi durumları göstermek istediğinizde bu kütüphaneyi kullanmak oldukça işinizi kolaylaştıracaktır. Zaman çubuğunuza istediğiniz zaman özelliğini katabilirsiniz; dilediğiniz kadar gün sayısı olarak , hafta olarak, ay olarak, yıl olarak... Bu kütüphanenin kullanılabilmesi için raphael.js JavaScript kütüphanesine ihtiyaç vardır, çünkü bu kütüphane vektörel grafiklerin çizimini sağlayan fonksiyonları sayesinde zaman çubuğu çizelgesini oluşturmamızı sağlar. Bu kütüphane de sizlere anlatacağım kütüphanelerden biri, raphael.js kütüphanesinden önümüzdeki hafta detaylı bir şekilde bahsecedeğim. Tercihinize bağlı olarak jQuery kullanarak daha hoş tooltipler kullanabilirsiniz.

Chronoline.js kütüphanesini bu adresten indirip projenizde kullanabilirsiniz. Aşağıda sizlere bu kütüphaneyi kullanarak ASP.NET ortamında yaptığım, balık sezonunun aylara göre düzenlenmiş bir zaman çizelgesi örneğini açıklamak istiyorum.

Solution Explorer'a aşağıda gördüğünüz gibi Chronoline.js kütüphanesinin dosyalarını ekledim.

Şimdi ise sizlere projemde kullanmış olduğum kodları açıklamak istiyorum.

    var events = [
            { dates: [new Date(2013, 12, 18)], title: "Tekir Sezonu Basliyor", section: 0 },
            { dates: [new Date(2014, 5, 29)], title: "Hamsi Sezonu Basliyor", section: 2 },
    
            { dates: [new Date(2014, 7, 28)], title: "Uskumru Sezonu Basliyor", section: 1, description: "Dilediginiz aciklamayi yaziniz" },
            { dates: [new Date(2014, 10, 10)], title: "Cupra Sezonu Basliyor", section: 3 }
            ];

Yukarıda görmüş olduğunuz kod ile events listesi içerisine section sıralamamıza göre hangi tarihte sezonlarımızı başlatacağımızı belirlemiş olduk.

Section parametresi: Id'sine göre belirlenmiş olan "event" ile ilişkilendirilen parametredir.

   var sections = [
            { dates: [new Date(2013, 11, 15), new Date(2014, 7, 25)], title: "Tekir Sezonu", section: 0, attrs: { fill: "#99FF33" } },
            { dates: [new Date(2014, 7, 28), new Date(2014, 10, 23)], title: "Uskumru Sezonu", section: 1, attrs: { fill: "#d4e3fd" } },
            { dates: [new Date(2014, 5, 29), new Date(2014, 7, 27)], title: "Hamsi Sezonu", section: 2, attrs: { fill: "#9999CC" } },
            { dates: [new Date(2014, 10, 10), new Date(2014, 12, 10)], title: "Cupra Sezonu", section: 3, attrs: { fill: "#eaf0fa" } }
            ];

Yukarıda tanımlamış olduğum section parametresine göre, bu kod parçasında balıkların sezon başlangıç ve bitiş tarihlerini ve grafikte gösterilecek olan sezon rengini belirlemiş olduk.

  $('#to-today').click(function () { timeAy.goToToday(); });

Yukarıda görmüş olduğunuz kod parçası, zaman çizelgesinde bulunduğumuz günün gösterilmesini sağlar.

Aşağıda, yapmış olduğum örneğin ekran görüntüsünü sizlerle paylaşmak istiyorum.

Projenin kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <meta charset='utf-8' />  
   <meta http-equiv="X-UA-Compatible" content="chrome=1" />  
   <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css" />  
   <title>Chronoline.js Kütüphanesi Örnek</title>  
 </head>  
 <body>  
   <div id="main_content_wrap" class="outer">  
     <section id="main_content" class="inner">  
       <p>Balık Sezonunun Aylara Göre Gösterim Örneği</p>  
       <h2>Aylık zaman çizelgesi </h2>  
       <img border="0" src="pulpit.jpg" width="304" height="175">  
       <div id="target1" class="timeline-tgt">  
         <input id="to-today" type="button" value="Bugune git" style="margin-left: 910px" />  
       </div>  
     </section>  
   </div>  
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
   <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.css" />  
   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.js"></script>  
   <script type="text/javascript" src="chronoline/raphael-min.js"></script>  
   <link rel="stylesheet" type="text/css" href="chronoline/chronoline.css" />  
   <script type="text/javascript" src="chronoline/chronoline.js"></script>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       var events = [  
       { dates: [new Date(2013, 12, 18)], title: "Tekir Sezonu Basliyor", section: 0 },  
       { dates: [new Date(2014, 5, 29)], title: "Hamsi Sezonu Basliyor", section: 2 },  
       { dates: [new Date(2014, 7, 28)], title: "Uskumru Sezonu Basliyor", section: 1, description: "Dilediginiz aciklamayi yaziniz" },  
       { dates: [new Date(2014, 10, 10)], title: "Cupra Sezonu Basliyor", section: 3 }  
       ];  
       var sections = [  
       { dates: [new Date(2013, 11, 15), new Date(2014, 7, 25)], title: "Tekir Sezonu", section: 0, attrs: { fill: "#99FF33" } },  
       { dates: [new Date(2014, 7, 28), new Date(2014, 10, 23)], title: "Uskumru Sezonu", section: 1, attrs: { fill: "#d4e3fd" } },  
       { dates: [new Date(2014, 5, 29), new Date(2014, 7, 27)], title: "Hamsi Sezonu", section: 2, attrs: { fill: "#9999CC" } },  
       { dates: [new Date(2014, 10, 10), new Date(2014, 12, 10)], title: "Cupra Sezonu", section: 3, attrs: { fill: "#eaf0fa" } }  
       ];  
       var timeAy = new Chronoline(document.getElementById("target1"), events,  
        {  
          animated: true,  
          tooltips: true,  
          defaultStartDate: new Date(2013, 11, 18),  
          sections: sections,  
          sectionLabelAttrs: { 'fill': '#000099', 'font-weight': 'italic' },  
          markToday: 'labelBox',  
          draggable: true  
        });  
       $('#to-today').click(function () { timeAy.goToToday(); });  
     });  
   </script>  
 </body>  
 </html>

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Raphael.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

3 Kasım 2013 Pazar

Hammer.js Kütüphanesi

Herkese merhabalar.

Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere hammer.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. İlk yazımda, bu kütüphanenin genel özelliklerinden ve hangi amaçla kullanıldığından sizlere bahsetmiştim. Bana göre bu kütüphane JavaScript' in kullanımı en tatlı olan kütüphanelerinden biridir. Tatlıdan kastım şöyle ki; kodlamadan sonra ekranda sürükle bırak, çoklu dokunmatiklik, yakınlaştırma, uzaklaştırma, döndürme, kaydırma gibi özellikleri test etmek oldukça zevkli oluyor. Bu özellikleri dokunmatik cihazların yanında masaüstü bilgisayarımda deneyebilmek de ayrı bir güzel. Yaptığım örnekleri ve kodlarını aşağıda sizlerle paylaşacağım. Sizin de örnekleri denerken hem eğlenip hem öğreneceğinize eminim.

Örneklerimde, tasarım dilinde en çok kullanılan bir framework uygulaması olan Bootstrap'ı kullanıyorum. Kullanımı oldukça kolay olan bu araç kitini kullanmanızı sizlere de öneririm. Örneklerimi sizlerle paylaşmadan önce bu kütüphanenin içerdiği önemli fonksiyonlara değinmek istiyorum. Ayrıca şunu da eklemek istiyorum; bu kütüphanenin ne jQuery ne de başka bir kütüphane eklentisine ihtiyacı yoktur. Ama tercih elbette size ait, araştırma yaparsanız jQuery eklentisi ile yapılmış olan birçok hammer.js kütüphanesi örneği ile karşılaşabilirsiniz.

Fonksiyonlar

hammertime: Üye (instance) değişkendir.

1) hammertime.on(gesture,handler): Bu metot sayesinde, hareketi dinleyecek olan event listener eklenir. Bu metodun içerisine boşluk ekleyerek birden fazla hareket (gesture) koyabilirsiniz.

2) hammertime.off(gesture, handler) :  Bu fonksiyon sayesinde, fonksiyonun parametresindeki hareket (gesture) için handler kaldırılır.

3) hammertime.enable(toggle) : Bu fonksiyonu bir örnek vererek açıklamak istiyorum. Ekrandaki topu, sürükle bırak özelliğiyle sürükleyip bırakabilme özelliğini bu fonksiyonla topa kazandırıp yine bu fonksiyon ile topun bu özelliğini etkisiz yapabilirsiniz.

  Hammer.js Kullanımı

  Gerekli js ve css dosyalarını bu siteden indirebilirsiniz. Aşağıda basit bir JavaScript kod örneğini inceleyeceğiz.

// hammer.js kütüphanesine hangi elementin izleneceği id'ye göre söylenmiş olur..
var hammer = new Hammer(document.getElementById("elementID"));

// elemente çift dokunuş yapıldığı zaman ne yapılacağı belirlenir. 
hammer.ondoubletap = function (event) {
    alert('Dokundunuz!');
};

Şimdi de sizlere ASP.NET ortamında yapmış olduğum bir örneği göstermek istiyorum. Gerekli css ve js dosyalarını Solution Explorer'a ekledikten sonra bir resime; döndürme, çoklu dokunmatik hareket ile yakınlaştırma ve uzaklaştırma özellikleri ekledim. Aşağıdaki resimde Solution Explorer' a eklemiş olduğum dosyalar görünmektedir.

Aşağıda da yukarıda bahsetmiş olduğum örneğin kodları bulunmaktadır

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <title>Hammer.js Pinch Zoom Ornek</title>  
   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">  
   <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">  
   <style>  
     body {  
       padding: 0;  
       overflow: hidden;  
     }  
     #pinchzoom {  
       -webkit-transform: translate3d(0,0,0);  
       overflow: hidden;  
     }  
   </style>  
 </head>  
 <body>  
   <div id="pinchzoom">  
     <div>  
       <img id="rect" src="assets/img/bebek.jpg" width="2950" height="4500" ondragstart="return false" alt="" />  
     </div>  
   </div>  
   <script src="../dist/hammer.js"></script>  
   <script src="../plugins/hammer.fakemultitouch.js"></script>  
   <script src="../plugins/hammer.showtouches.js"></script>  
   <script>  
     if (!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {  
       Hammer.plugins.showTouches();  
     }  
   </script>  
   <script>  
     if (!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {  
       Hammer.plugins.fakeMultitouch();  
     }  
     var hammertime = Hammer(document.getElementById('pinchzoom'), { // koymuş olduğum resmin id'sini alarak özellikleri ekler..  
       transform_always_block: true,  
       transform_min_scale: 1,  
       drag_block_horizontal: true,  
       drag_block_vertical: true,  
       drag_min_distance: 0  
     });  
     var rect = document.getElementById('rect');  
     var posX = 0, posY = 0,  
       scale = 1, last_scale,  
       rotation = 1, last_rotation;  
     hammertime.on('touch drag transform', function (ev) {  
       switch (ev.type) {  
         case 'touch':  
           last_scale = scale;  
           last_rotation = rotation;  
           break;  
         case 'drag':  
           posX = ev.gesture.deltaX;  
           posY = ev.gesture.deltaY;  
           break;  
         case 'transform':  
           rotation = last_rotation + ev.gesture.rotation;  
           scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));  
           break;  
       }  
       /* transform */  
       var transform =  
           "translate3d(" + posX + "px," + posY + "px, 0) " +  
           "scale3d(" + scale + "," + scale + ", 0) " +  
           "rotate(" + rotation + "deg) ";  
       rect.style.transform = transform;  
       rect.style.oTransform = transform;  
       rect.style.msTransform = transform;  
       rect.style.mozTransform = transform;  
       rect.style.webkitTransform = transform;  
     });  
   </script>  
   <script src="assets/js/ga.js"></script>  
 </body>  
 </html>

Aşağıda da kodların nasıl etki ettiğine dair birkaç ekran görüntüsü bulunmaktadır. Son olarak eklemek istiyorum; SHIFT + MOUSE sayesinde kodun özelliklerini web sayfasında görebiliriz.

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Chronoline.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR