Bu yazımda ise CANVAS dediğimiz grafik ekranda neler yapabiliriz bunu anlatacağım.
Yazının başlığında da göreceğiniz gibi OLED ve TFT ekranlara atıfta bulundum.
CANVAS bu tip grafik ekranlara benzer bir grafik ekrandır.
CANVAS içerisinde IMAGE SPRITE dediğimiz resimleri döndürebiliyoruz. Ekran içerisinde istediğimiz yerde görüntüleyebiliyoruz. Örnek vermek gerekirse bir resim olarak ekrana bir saat kadranı koyup bu saat kadranının üzerinde LINE ile çizgiler çizerek analog saat elde edebiliyoruz. Bu komponenti kullanarak ekranda bir animasyon yapabiliyoruz. Hem ekranda kaydırabiliriz hem de ekranda döndürebiliriz. Bu döndürme ise 3 çeşittir.
1-) Resmi sağ yanından tutup çevirmek
2-) Resmi sol yanından tutup çevirmek
3-) Resmi ortadan döndürmek.
Bunun yanısıra VISIBLE ve INVISIBLE özelliklerini kullanarak istediğimiz zaman ekranda gösterip istediğimiz zaman kaybedebiliriz.
Bir başka kullanılabilecek blok CIRCLE (daire) dir. Ekrana bir daire çizecekseniz X, Y noktasını belirtip bir de yarıçapını vermelisiniz.
Bunları verdiğinizde bir daire çizilecektir. TRUE derseniz içini aynı çizgi rengi ile dolduracaktır. FALSE derseniz sadece daire çizgisi çizilecektir.
Fakat CANVAS bloklarını kullanarak bu dairenin çizgisinin rengini ve kalınlığını ayarlayabilirsiniz.
Bununla birlikte SQUARE (kare) çizmek isterseniz bir blok yoktur. Bunun yerine bir LIST bloğu kullanılarak 4 köşesinin koordinatı belirlenir ve bu LİST bloğunu DRAW SHAPE bloğuna ekleyerek 4 çizgi çizilerek KARE çizilmiş olur. FILL kısmı TRUE olursa içi dolu, FALSE olursa içi BOŞ bir kare çizilir.
ÜÇGEN için ise yine aynı metot kullanılır. Sadece LİST kısmında 4 değil 3 koordinat ekseni bulunur. CANVAS blokları kullanılarak hem çizilir, hem rengi belirlenir, hem de çizgi kalınlığı belirlenir.
Ekrandaki açılı çizgiler de DRAWLINE bloklarıyla çizilir. Çizgi kalınlığı çizgi rengi ve açısı bloğa eklenerek ayarlanır. BLOK üzerinde açı olarak bir yer yoktur. LINE çizilirken başlangıç noktası verilir ve bitiş noktası koordinatları verilir. Bu kordinatlara göre de AÇI belirlenmiş olur. Fakat biz bunları çizerken TRIGONOMETRI den faydalanarak istediğimiz açıda ve istediğimiz uzunlukta bir çizgi çizebiliriz. Aşağıdaki resim bir for döngüsüne göre çizilen çizgileri gösterir. Bu şekilde eşit açılı ve eşit uzaklıkta çizgiler çizebilirsiniz. X1 Y1 başlangıç noktası, X2 Y2 Bitiş noktasıdır. ( en altta genel trigonometri formülü anlatılmıştır. )
Bunun yanısıra TEXT yazdırabiliyoruz. OLED ekranlardaki gibi yazılarınızı yazabilirsiniz.
Bu karakterlerin rengini, fontunu ve dönme açısını ayarlayabilirsiniz. Yani ekranda sadece soldan sağa değil aşağıdan yukarı ya da yukarıdan aşağı da yazı yazmak mümkün.
Bunun yanısıra LEFT, RIGHT, CENTER özelliği ile de kelimeleri ekran üzerinde ayarlayabiliyorsunuz. Fakat CENTER özelliği dediğinizde ekranın tam ortasına gelmez. çünkü bulunacağı X ve Y eksenini siz belirliyorsunuz. Buradaki CENTER kelimesi kelimenin ortasını belirtir.
ÖRNEK kelimesini ele alırsak X ve Y noktası N harfinin bulunduğu yerdir. bulunduğu yerden sağa ve sola doğru yazar. Ekranı ortalamaz. Kelimeyi ortalar.
DRAW TEXT bloğunu kullanarak istediğiniz yazıyı yazdırabilirsiniz. Ayrıca DRAW TEXT ANGLE bloğunu kullanarak da istediğiniz yazıyı belli bir açı ile yazdırabilirsiniz.
Yukarıda da değindiğim gibi yazının fontunu, rengini ve açısını ayarlayabilirsiniz. Aşağıdaki resimde 2 kez aynı yazı yazılmış görünse de eskisi silinip ki bunu yazıyı background renginde yazmakla yapıyoruz yeni yazıyı ise başka bir renk ile ekrana yazdırıyoruz. Bunu yapmasak tüm yazılan yazıları arka arkaya görürdük. O zaman dönme efekti ortaya çıkmazdı. Fakat siz kendi uygulamanızda yazdığınız yazıda animasyon yapmayacaksanız böyle bir duruma gerek kalmayacaktır.
Aşağıdaki ekranı butona bastığımızda elde ederiz. Butona bastığımızda CLOCK enable olur ve çalışmaya başlayarak ekranda grafikleri ve animasyonları çizer ve gösterir. Program kaynağı basit tutulmuştur.
Bu programda en altta bir WEB komponenti kullanılır. Bu komponent ile WEB sayfası içerikleri görüntülenir ve gelen veriler işlenebilir. ( Yukarıdaki ekran görüntülerindeki gibi)
Ben burada bir saat gösterdim. Ayrıca başka bir WEB VIEWER penceresinde de döviz kurlarını gösterdim. Fakat sizler başka gerekli bilgileri de burada gösterebilirsiniz. Ayrıca bunları veri olarak alıp, GRAFİK ekranınızda da gösterebilirsiniz.
NOT: CANVAS ekranın bir problemi var. Ekranı yukarı aşağı kaydırmak isterseniz bu canvas ekranına dokunarak bunu yapamazsınız. Bundan dolayı canvas ekranını tam ekran kullanacaksanız yukarı aşağı kaydırmayı iptal edin. Şayet canvas yanında başka komponentleri de ekranda gösterecekseniz Canvas kısmını ekranın %90 genişliğinde yaparsanız canvasın boş bıraktığı yerden ekranı kaydırabilirsiniz. Programda %80 yaparak sağ tarafta boşluk bıraktım.
CANVAS blok kısmına bakarsanız birden fazla kullanabileceğiniz blok ile karşılaşırsınız. Bunların bazıları ön plan rengi arka plan rengi gibi bloklardır. Ayrıca bu blokların yanısıra DRAWING komponentlerinde BALL diye bir komponent var bu ekranda bir daire şeklinde bir şekil gösterir. Bunun boyutunu ayarlayabilirsiniz istediğiniz yere konumlandırabilirsiniz isterseniz de ekranda hareketli top olarak gösterebilirsiniz. rengini ve büyüklüğünü siz belirlersiniz. İsterseniz bir buton gibi kullanabilirsiniz isterseniz bir yeri ya da seçileni işaretlemek için kullanabilirsiniz.
CANVAS özelliklerini kullanarak siz de APP INVENTOR içinde denemeler yapabilirsiniz.
Bu program ile beraber başka bir program da bulacaksınız. (SAAT PROGRAMI)
Bu programda kendi hazırladığımız analog saat var. Bu saatin ekran büyüklüğüne göre kendini ayarlaması sağlandı. Dikey ekranda büyük saat, yatay ekranda küçük saat aynı canvas içerisinde çiziliyor. Bunun yapılabilmesi için öncelikle ekranın 90 derece döndüğünü hissetmemiz lazım.
Bunu 2 şekilde yapabiliyorsunuz.
1-) SCREEN ORIENTATION bloğunu kullanırsınız bu şekilde döndüğünü anlarsınız.
2-) IF bloğu ile SCREEN WIDTH ile SCREEN HEIGHT karşılaştırılır. SCREEN WIDTH büyükse ekran 90 derece dönmüş demektir bu şekilde ekran döndüyse siz de aynı ekranda daha küçük bir saat çizebilirsiniz. Bu saatin her şeyini kendimiz çizdiğimiz için ( sin ve cos formülü ile) ekranda yerleştirmek hiç problem olmayacaktır. Resim kullanmış olsak büyük saat 90 derece döndüğünde elips şeklini alacaktır. Bundan dolayı resim kullanmadım.
Bunun yanısıra her saniye ekran temizlenerek bu saati çiziyoruz. Bunun sebebi her saniye çizdiğimiz saniye çubuğunu silerek yeniden yazılması içindir.
Bu şekilde sadece saat ekranı varken bile cpu hızı ekran tazeleme esnasında yavaş kalabiliyor belki de eski telefon olduğundan, saniye bazen atlıyor. Saat yanlış göstermiyor fakat saniye çizgisi çizilemiyor. Bu da yavaşlıktan kaynaklanıyor. Ekranda bir de yanında başka işler yapılacaksa iyice yavaşlayarak saniye kısmı atlamaları çoğalacaktır.
Bunu önlemenin bir kaç yolu var.
1-) Ekranda saat kadranı 1 kez çizilir ve sadece akrep yelkovan ve saniye çubukları her saniye çizilir. Bunu yapmak için eski çizimin silinmesi gerekir. Tüm ekranı silmek yerine ekranda aynı çizimi background rengi ile yeniden çizmemiz, silinmesi için yeterli olacaktır. O zaman tüm ekran silinmediği için ekranda yaptıklarınız yerinde kalacak ve her saniye saat çizimi yapılmadığı için saniye atlaması olmayacaktır.
2-) Gerekirse saat ekranında sadece akrep yelkovan gösterilir saniye yerine bir ışıklı buton konulur bu yakıp söndürülür bu daha az zaman alacaktır. Fakat akrep ve yelkovan belli saniye aralıklarında kendi yerini değiştirerek ara değerlere gelmek zorunda. Bundan dolayı zamanı geldiğinde tetikleneceklerdir.
Not: Saat ekranında saniye akrep yelkovan çizimlerinde kullanılan formüller saat için uygun olsa da ekran görüntüsünde gördüğünüz 10 çizgiden oluşan kırmızı çizimde genel trigonometri formülü kullanılmıştır. Bu formül ile LINE çizildiğinde yine benzer sonuç üretilse de Genel olarak kullanılan formülü kullanmanız yerinde olacaktır. diğeri saat ekranı çizimi için yapılmış. Bu formüllerde sin ve cos yerleri değişik hatta saat kısmında -eksi ile çıkarma işlemi yapılmış fakat genel formülde böyle bir işlem yok.
Aşağıdaki resimde soldan sağa işlemlere bakacak olursanız.
En soldaki başlangıç noktası X ve Y değeri bir sonraki çizilmesi gereken uzunluk daha sonra sin cos ifadeleri geliyor. sonraki ise açıdır. Aşağıdaki resim GENEL FORMÜLDÜR.
Genel formül şu şekildedir.
Adımlar:
Başlangıç noktası: (x1,y1)(x_1, y_1)Çizgi uzunluğu (L): Belirli bir uzunluk
Açı (θ): Verilen derece cinsinden açı
Formüller:
X eksenindeki bitiş noktası:
Y eksenindeki bitiş noktası:
y2=y1+L⋅sin(θ)
Örnek:
Başlangıç noktası (20,10), açı 45, ve uzunluk 50 piksel olsun
x2=20+50⋅cos(45∘)
y2=10+50⋅sin(45∘)
Yukarıdaki formülü kullanarak ekranda açısı ve boyu belli bir çizgiyi çizebilirsiniz.
GELDİK NEDEN OLED EKRAN gibi dediğimiz yere. Belki daha önce hatırlarsınız EASYLCD diye bir kart hazırlamıştım. Bu kart ile KÜTÜPHANE olmadan LCD yi komutlarla kullanabilirsiniz demiştim. Bilmeyenler ise, Bu sayfaya bakabilirler.
Bu sayfadaki komut seti gibi bir komut seti hazırladığınızda telefonu bluetooth üzerinden ya da wifi üzerinden haberleştirerek komutunuzu gönderirsiniz ve komut işlenerek ekranda istediğiniz işlemi yaptırabilirsiniz.
EASYOLED diyelim. Ki bu daha hazır değil sadece bir düşünce. Arduinoda oled kullanırken nasıl ki daire çizimi için bir başlangıç noktası ve radius denilen yarıçap veriyorsanız Burada da bir komut ile bunu gönderebiliriz.
Örnek :
OLEDWR X1,Y1,R diye gönderebiliriz. Bu şekilde istediğimiz yere bir daire çizeriz.
Bunu geliştirirsek
OLEDWR X1,Y1,R,COLOR,FILL,LINE THICKNESS olarak geliştirerek daire özelliklerini de verebiliriz. (FILL: içini doldurmak. LINETHICKNESS: çizgi kalınlığı R=Radius=yarıçap. )
Ya da ekranda analog saat çizilecek ise
OLEDWR CLK,X1,Y1,R yazılarak gönderilirse bir Saat çizimi istenir ve bu şekilde çizilebilir. Bunun gibi hazır resimlerde konulabilir mesela analog sıcaklık göstergesi gibi. O zaman yerini belirterek bundan istiyorum demeniz ya da rengini vermeniz yeterli olacaktır.
Neden EASYOLED dediğimizde ise ARDUINO kullanmayıp bir ESP01 kullanabilirsiniz ya da PC den ya da PIC işlemciden göndermek isteyebilirsiniz. Bunun için ARDUINO kütüphanesini kullanamayabilirsiniz. Bundan dolayı genel amaçlı bir komut sistemi ile bunu KÜTÜPHANESİZ olarak kullanmak mümkün olacaktır.
ESKİ TELEFONLARINIZI da aynı zamanda dokunmatik OLED, TFT ekran gibi kullanabilirsiniz.
Bunu nasıl başarırız derseniz o da kolay. Ekranda bir noktaya dokunduğunuzda o noktanın hangi piksel olduğunu ve hangi renk olduğunu ARDUINOya bildirebilirsiniz.
Bunu da OLEDRD READ komutuyla yaparsınız. CANVAS üzerine dokunduğunuzda bu dokunma bilgisini alabilirsiniz. Otomatik olarak bunu arduinoya gönderebilirsiniz.
Bu şekilde bazı ekran düzenlemeleri de yapılabilir. Ya da ekranda bir renk isteyerek o renk geliyorsa ekranda çizim halen duruyor demektir. ekran bozulmamış demektir bunu kontrol edebilir.
ESKİ TELEFONLARINIZIN başka özelliklerini de bu yolla arduino ile haberleştirerek telefonun sadece ekranını değil diğer özelliklerini de ARDUINO ya gönderebilirsiniz.
Mesela ALARM saati için telefonu ayarlarsınız. O saat geldiğinde telefon bu bilgiyi okur ve alarm çalıştı diye ARDUINO yu uyarır. ALARM komutunu alan arduino belki başka cihazların çalışmasını da yapabilir.
Bunlar sadece belirlediğiniz KOMUT SİSTEMİ ile yapabileceklerinizin bir bölümü.
Aşağıdaki LİNKE TIKLAYARAK SİTEMDEKİ EASYLCD MOBIL yazılarıma bakarsanız kullanımlarınızı nasıl arttırabileceğinizi görebilirsiniz.
Bununla birlikte HAVA durumunu alıp CANVAS ekranında gösterebileceğiniz gibi ARDUINO ya da bunu ileterek onunda hava durumuna göre ayarlaması gereken şeyleri ayarlamasını sağlayabilirsiniz. Mesela rüzgar varsa TENTELER otomatik kapanacaksa bunu arduinno yapabilir. bunun benzeri şeyler için Arduinoya ESP bağlamanıza gerek kalmaz. Eski telefonunuzdan maksimum verim almaya odaklanabilirsiniz. Hatta sesli komutlar ile arduino vasıtasıyla farklı cihazları açıp kapatabilirsiniz.
Ayrıca TÜM DOSYALARI buradan indirebilirsiniz.
Videoda her iki programın çalışmasını görebilirsiniz.