HTML 5 Canvas Nedir ?

<canvas> bir web sayfası üzerinde grafik çizmek için kullanılan bir araç veya elemandır.

Canvas Nedir ?

Html5 <canvas> eleamanı script vasıtasıyla (genellikle JavaScript) grafik çizmek için kullanılır.

<canvas> sadece grafik özelliklerini kapsar.  Aslında çizim yapmak için script kullanmanız gerekiyor.

Canvas ile çizim  yapmak için birkaç metod bulunuyor : boxes (kutular), circles (daireler), text (yazı) ve ek olarak image (resim).

Örneklerle anlamaya çalışalım :

Örnek  1 (dikdörtgen çizmek): 

<canvas id=”myCanvas” width=”200″ height=”100″
style=”border:1px solid #000000;”></canvas>

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 150, 75);
</script>

(daha&helliip;)

ASP.Net ile Jquery autocomplete yapmak (3)

ASP.Net ile Jquery  autocomplete yapmak (3)

Son makalemizde css dosyamızı oluşturup, jquery versiyonlarımızı çağırarak autocomplete işlemini sonlandırıyoruz.

Aşağıdaki dosyaları ascx dosyamızın içine ekliyoruz :

<link rel=”Stylesheet” href=”<%= ResolveUrl (“Styles/jquery-ui-1.10.4.custom.css”) %>” />
<script src=”<%= ResolveUrl (“Scripts/jquery-1.10.2.js”) %>”></script>
<script src=”<%= ResolveUrl (“Scripts/jquery-1.11.2.js”)%>”></script>

Dosyaların linki : https://www.dropbox.com/sh/32nevb0zuiu23cj/AABOLAFqRdaXIzT-FQoUMWURa?dl=0

Herşey tamamsa aşağıdaki ekran çıktısını göreceksiniz. (Unutmayın üç harften sonra arama başlayacak.)

Autocomplete

Javascript ile resim döndürmek (image rotating)

Javascript ile resim döndürmek (image rotating)

Javascript ile resim döndürmek mümkün müdür ? Tabi ki. Bu makaleyi takip ederek Javascript ile resimleri nasıl döndüreceğinizi öğrenebilirsiniz.

En kolay işle başlayalım. Aşağıdaki satırlar ekleyelim :

<img src="/article-sources/images/plane-1.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>

Yukarıda döndüreceğimiz resmi CANVAS (döndürülen resmi görüntülemek için kullanılacak) tagımıza ekliyoruz. CANVAS tag sadece Chrome, FF, Opera, Chrome IE8 ve Safari tarafından desteklniyor. IE6 VE IE7 CANVAS desteklemiyor.

Şimdi resmi nasıl döndüreceğimizi inceleyelim. Güncel tarayıcıların bir çoğu <canvas> nesnesini destekliyor aslında 2D context içindeki ‘rotate’ ve ‘drawimage’ metodlarının kullanımına izin veriyorlar. IE6 ve IE7 ise bu tagı tanımıyor. Bu nedenle Microsoft “DXImageTransform.Microsoft.BasicImage” üzerinde geliştirme yaparak rotation (döndürme) metodu ortaya çıkardı (Link : http://msdn.microsoft.com/en-us/library/ms532918%28VS.85%29.aspx).  İyi haber  kullanımı basit fakat sadece dört açı (0, 90, 180 ve 270 açıları) desteklemesi bir handikap olarak karşımıza çıkıyor.  IE Resim döndürme kodu aşağıdaki gibidir  :

//  DXImageTransform.Microsoft.BasicImage  MSIE Kullanımı
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

CANVAS tagını destekleyen tarayıcılarda ki kullanım şekli ise aşağıdaki gibidir :

var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;

//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}

//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

X/Y kordinatlarını değiştirmek için drawImage fonksiyonunu kullanmak zorundayız. Kolay gelsin.

Kodların Son Hali :

HTML : 

<div id=”page”>
<h1>How to Rotate Images using JavaScript</h1>

<div>
<img src=”image/prvTwin Sunset.jpg” alt=”” id=”image” width=”150″ />
<canvas id=”canvas”></canvas>
</div>
<p>
<strong>Rotate Image: </strong>
<a href=”javascript:;” id=”resetImage”>Reset Image</a>
<a href=”javascript:;” id=”rotate90″>90</a>
<a href=”javascript:;” id=”rotate180″>180</a>
<a href=”javascript:;” id=”rotate270″>270</a>
</p>

</div>

JS :

<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>

<script type=”text/javascript”>
var img = null, canvas = null;

$(document).ready(function () {
// Initialize image and canvas
img = document.getElementById(‘image’);
canvas = document.getElementById(‘canvas’);

if (!canvas || !canvas.getContext) {
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = ‘absolute’;
img.style.visibility = ‘hidden’;
}
rotateImage(0);

// Handle clicks for control links
$(‘#resetImage’).click(function () { rotateImage(0); });
$(‘#rotate90’).click(function () { rotateImage(90); });
$(‘#rotate180’).click(function () { rotateImage(180); });
$(‘#rotate270’).click(function () { rotateImage(270); });
});

function rotateImage(degree) {
if (document.getElementById(‘canvas’)) {
var cContext = canvas.getContext(‘2d’);
var cw = img.width, ch = img.height, cx = 0, cy = 0;

// Calculate new canvas size and x/y coorditates for image
switch (degree) {
case 90:
cw = img.height;
ch = img.width;
cy = img.height * (-1);
break;
case 180:
cx = img.width * (-1);
cy = img.height * (-1);
break;
case 270:
cw = img.height;
ch = img.width;
cx = img.width * (-1);
break;
}

// Rotate image
canvas.setAttribute(‘width’, cw);
canvas.setAttribute(‘height’, ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);
}
else {
// Use DXImageTransform.Microsoft.BasicImage filter for MSIE
switch (degree) {
case 0: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=0)’; break;
case 90: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=1)’; break;
case 180: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=2)’; break;
case 270: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=3)’; break;
}
}
}
</script>

DEMO

Kaynak : http://www.ajaxblender.com/howto-rotate-image-using-javascript-canvas.html

ASP.Net ile Jquery autocomplete yapmak (2)

ASP.Net ile Jquery autocomplete yapmak (2)

Jquery autocomplete içerisinde ajax ile servisin çağrılması

Üç seriden oluşan autocomplete makalemizin ikinci konusu web servisinin jquery autocomplete metodunu kullanaraj ajax ile çağırmak olacaktır. Aşağıda oluşturduğumuz ascx sayfamızda yer alan kodlar ve açıklamalar bulunmaktadır.

ASCX

<script type=”text/javascript” language=”javascript”>

var jQuery  = jQuery.noConflict(); // Diğer jquery fonksiyonlarla çakışmasını önlemek için noConflict metodumuzu çağırıyoruz.

jQuery (function () {

jQuery (“#<%= txtKategoriAdi.ClientID %>”).autocomplete({

// Arama sonuçlarından birine tıklandığında aşağıdaki fonksiyon bir link oluşturup ilgili sayfaya yönlendirecek.

select: function (event, ui) {

var url = “http://ornelsite.com/IlanAra.aspx?KategoriId=” + ui.item.Id;

event.preventDefault();

window.location.href = url;

},

//Web servis çağrıldıktan sonra JSON formatına çeviriliyor ve geriye KategoriId ve KategoriAd döndürülüyor

source: function (request, response) {

jQuery .ajax({

url: “UserControls/CompleteWord.asmx/KategoriAdiAl”,

data: “{ ‘Kelime’: ‘” + request.term + “‘ }”,

dataType: “json”,

type: “POST”,

contentType: “application/json; charset=utf-8”,

success: function (result) {

var markers = JSON.parse(result.d);

response(jQuery .map(markers, function (item) {

var baslik = item.IlanBaslik ? item.IlanBaslik : ‘Kategoriler’;

var kad = item.KategoriAd ? “(Kategori : ” ” + item.KategoriAd + “)” : ‘ ‘;

return {

Id: item.KategoriId,

value: baslik.toUpperCase() + ” ” + kad

}

}))

},

error: function (result) {

alert(“Problem var”);

}

});

},

minLength: 3 // 3 harften sonra autocomplete çalışmaya başlayacak

});

});

</script>

HTML

<asp:TextBox runat=”server” ID=”txtKategoriAdi” placeholder=”Arama yapmak istediğiniz kelimeyi giriniz.” Width=”350px” CssClass=”textbox” Height=”30px”  />

Sormak istediğiniz birşey olursa lütfen yorum olarak giriniz.

Son makale için tıklayınız

Özel kontrol oluşturmak (Custom Control)

Özel kontrol oluşturmak (Custom Control)

Özel kontroller (Custom Control) özgün assembliler olarak konuşlandırılırlar. Diğer ASP.Net server kontrolleri gibi kullanılırlar ve dinamik link kütüphanesi içinde (DLL) derlenirler.

Aşağıdaki seçeneklerden biri kullanılarak oluşturulabilir :

  • Dışarıdan bir özel kontrol türeterek
  • İki veya daha fazla harici kontrolü birleştirip yeni bir özel kontrol oluşturularak
  • Ana yada temel kontrol sınıfından türetilerek

Bu yapıyı yada bu kavramı tanımak için tarayıcıda basit bir mesaj gösteren özel bir kontrol oluşturalım. Aşağıdaki adımları takip ediyoruz :

Yeni bir web site yaratalım. Solution’a sağ tıklayalım. Yanlışlıkla projeye tıklamamaya dikkat edin. Aşağıdaki pencerede göründüğü gibi bir server control oluşturuyoruz.

CustomControl

Yukarıdaki adım ServerControl1 adında çağrılan eksiksiz bir özel kontrol oluşturur ve bunu solution  içerisine ekler. Bu örneğimizde bu kontrolümüzü CustomContorls olarak isimlendiriyoruz. Bu kontrolü kullanmak için önceden referans etmeliyiz. Bu işlemi gerçekleştirmek için var olan projemiz üzerine sağ tıklayarak Add Reference seçeniğini tıklıyoruz. Açılan pencereden Solution altında Projects içerisinde yer alan projemizi seçerek ekliyoruz. Eğer proje görünmüyorsa solution’a sağ tıklarayarak build ediniz.

CustomControl1

Toolbox içerisinde her hangi bir tagda Choose Items diyerek kontrolümüzü getirebiliriz. Sürükle bırak yöntemiyle istediğimiz sayfaya ekleyebiliriz.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Sil.aspx.cs” Inherits=”UserControls_Sil” %>

<%@ Register Assembly=”ServerControl1″ Namespace=”ServerControl1″ TagPrefix=”cc1″ %>
<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
</head>
<body>

<form id=”form1″ runat=”server”>
<cc1:ServerControl1 ID=”ServerControl1″ text=”Server Control’den merhaba :)” runat=”server” />
</form>
</body>
</html>

Sayfa çalıştığında yazdığımız text içeriği görüntülenecektir.

Bu örneğimizde text özelliği set ediliyor. ASP.Net bu özelliği default olarak kontrol yaratıldığında oluşturuyor. Code behinde dosyasının bunu meydana getiriyor.

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace CustomControls

{

   [DefaultProperty(“Text”)]

   [ToolboxData(“<{0}:ServerControl1

                  runat=server></{0}:ServerControl1>”)]

    public class ServerControl1 : WebControl

   {

      [Bindable(true)]

      [Category(“Appearance”)]

      [DefaultValue(“”)]

      [Localizable(true)]

      public string Text

      {

         get

         {

            String s = (String)ViewState[“Text”];

            return ((s == null) ? “[” + this.ID + “]” : s);

         }

         set

         {

            ViewState[“Text”] = value;

         }

      }

      protected override void RenderContents(

                                        HtmlTextWriter output)

      {

         output.Write(Text);

      }

   }

}

Yukarıdaki kodlar otomatik olarak bir custom kontrol oluşturdu. Olaylar ve metodlar custom contol sınıfına eklendi.

Şimdi örneğimizi biraz daha genişletelim ve bir örnek yapalım.

Palindromları kontol eden “checkpanlindrome” adlı bir metod oluşturuyoruz.

Palindrom; baştan ve sondan okunduğunda değeri değişmeyen kelime veya sabitlerdir. Bu örnek için basit kelimeleri ele alacağız.

Custom Control kodlarımızı aşağıdaki şekilde gibi genişletiyoruz :

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace CustomControls

{

   [DefaultProperty(“Text”)]

   [ToolboxData(“<{0}:ServerControl1

               runat=server></{0}:ServerControl1>”)]

   public class ServerControl1 : WebControl

   {

      [Bindable(true)]

      [Category(“Appearance”)]

      [DefaultValue(“”)]

      [Localizable(true)]

      public string Text

      {

         get

         {

            String s = (String)ViewState[“Text”];

            return ((s == null) ? “[” + this.ID + “]” : s);

         }

         set

         {

            ViewState[“Text”] = value;

         }

     }

     protected override void RenderContents(

                                       HtmlTextWriter output)

     {

        if (this.checkpanlindrome())

        {

           output.Write(“Bu bir palindromdur: <br />”);

           output.Write(“<FONT size=5 color=Blue>”);

           output.Write(“<B>”);

           output.Write(Text);

           output.Write(“</B>”);

           output.Write(“</FONT>”);

        }

        else

       {

          output.Write(“This is not a palindrome: <br />”);

          output.Write(“<FONT size=5 color=red>”);

          output.Write(“<B>”);

          output.Write(Text);

          output.Write(“</B>”);

          output.Write(“</FONT>”);

       }

    }

    protected bool checkpanlindrome()

    {

       if (this.Text != null)

       {

          String str = this.Text;

          String strtoupper = Text.ToUpper();

          char[] rev = strtoupper.ToCharArray();

          Array.Reverse(rev);

          String strrev = new String(rev);

          if (strtoupper == strrev)

          {

             return true;

          }

          else{

             return false;

          }

       }

       else

       {

          return false;

       }

    }

  }

}


Kodları değiştirdiğinize projenizi build etmeyi unutmayınız. Bu işlem değişiklikleri projenize yansıtacaktır. Sayfamıza bir adet textbox ve buton ekliyoruz, butona tıklandığında bir text üreteceğiz.

<form id=”form1″ runat=”server”>

<div>

   Enter a word:

   <br />

   <asp:TextBox ID=”TextBox1″ runat=”server” style=”width:198px”>

   </asp:TextBox>

   <br />

   <br />

   <asp:Button ID=”Button1″ runat=”server”

               onclick=”Button1_Click”

               Text=”Check Palindrome” style=”width:132px” />

   <br />

   <br />

   <ccs:ServerControl1 ID=”ServerControl11″

               runat=”server” Text = “” />

</div>

</form>

Code behind :

protected void Button1_Click(object sender, EventArgs e)

{

     this.ServerControl11.Text = this.TextBox1.Text;

}

Ekran çıktısı  :CustomControl2

Kolay Gelsin.

Kaynak : http://www.tutorialspoint.com/asp.net/asp.net_custom_controls.htm

ASP.NET ile Jquery autocomplete yapmak (1)

ASP.NET ile Jquery autocomplete yapmak (1)

Bir önceki makalemde asp.net ile autocomplete kullanımını işlemiştim. Dileyen Ajax AutoComplete Extender ile gelişmiş arama linkinden ilgili makaleyi inceleyebilir. Yine aynı konunun devamı olan bir makale daha yazıyorum. Ancak bu sefer Jquery kullanarak ve daha gelişmiş bir arama motoru yapacağız. Daha önce bu işlemi Ajax AutoComplete Extender ile yapmışken şimdi neden tekrar yaptığımı merak edebilirsiniz. Birinci sebebi bu modül daha gelişmiş olacak. Bir web servis kullanacağız. (daha&helliip;)

Ajax AutoComplete Extender ile gelişmiş arama

Ajax AutoComplete Extender ile gelişmiş arama

ASP.NET AJAX AutoComplete extender herhangi bir TextBox kontrolüne bağlanabilir ve bundan sonra  textbox’a yazılan yazı ile başlayan kelimeyle ile ilişkilendirilecek ve pop up panelde bu ilişkili kelimeler gözükecektir.

Dropdown içerisinde web servis tarafından sağlanan aday kelimeler textbox içine yerleştirilecektir. (daha&helliip;)

Orantılı resim küçültme

Orantılı resim küçültme

Sitemize resim yada fotoğraf ekleyeceğimiz zaman boyutlarıyla oynamak isteriz. İçerisine ilan girilen bir sitemiz olduğunu varsayalım. Bu durumda kullanıcılar cep telefonu ve fotoğraf makinelerinden çektikleri fotoğrafları olduğu gibi siteye yüklemek isteyecektir. Bu fotoğrafları orjinal halleriyle sitemize yüklememizin intihardan farkı yok. Dolayısıyla bunların boyutlarını ve ölçeklerini küçültüp sitemize uygun hale getirmemiz gerekiyor. (daha&helliip;)

HttpHandlers (ASHX dosyası) içinde Session getirmek

ASHX yada HttpHandler dosyasından Session çağırmak istediğiniz zaman  IReadOnlySessionState uygulamanız gerekiyor.

<% @ webhandler language=”C#” class=”DownloadHandler” %>

using System;
using System.Web;
using System.Web.SessionState;

public class DownloadHandler : IHttpHandler, IReadOnlySessionState
{
public bool IsReusable { get { return true; } }

public void ProcessRequest(HttpContext ctx)
{
ctx.Response.Write(ctx.Session[“Abdulhamit”]);
}
}

Kaynak : http://www.hanselman.com/blog/GettingSessionStateInHttpHandlersASHXFiles.aspx