SVG ile Nesnelerin İnterneti'ne (IoT) bağlı sensörlerden veri grafikleri çizin
Bu serideki bu makalede IoT'deki veri grafiklerini temsil etme kullanarak grafiklerin nasıl çizileceğini açıklarım. SVG dili. Diğer durumlarda olduğu gibi, makale aynı zamanda dile kısa bir giriş niteliğindedir.
SVG biçimi
SVG Scalable Vector Graphics'in (ölçeklenebilir vektör grafikleri, İngilizce) kısaltmasına karşılık gelir. Bu bir biçimlendirme dili dayanmaktadır XML ve bu, esas olarak, bir çizimin onu tanımlayan geometriye göre tanımlanmasına olanak tanır; Örneğin bir fotoğraf için kullanılan ve onu kodlamak için renkli piksellerden oluşan bir ızgara kullanan matris yönteminin aksine.
bir çizimin içinde SVG Harici bir belgeye atıfta bulunan veya çizimin içine gömülmüş bir görüntü (bir piksel matrisi) de dahil edilebilir. SVG.
Bu makalenin yazıldığı sırada geçerli olan dil sürümü SVG1.1 Her ne kadar versiyonun tanımı halihazırda geliştiriliyor olsa da SVG2. Mümkün olduğunca girişte anlatılanları, atıfta bulunsa bile yapmaya çalışacağım. SVG1.1 aynı zamanda hizmet etmek SVG2.
Eğer çizim SVG Kodun içinde değil, ayrı bir belgede yer almaktadır. HTML (Bu çözümdeki IoT verilerini temsil etme teklifim onu koda yerleştiriyor HTML) bir referansla başlamalıdır XML ve bir belge türü tanımı (DTD).
|
1
2
|
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
|
Önceki kodun ilk satırında sürüm bildirilir XML kullanılan (1.0) karakter kodlaması (UTF-8) ve harici tanımlara ihtiyacınız olup olmadığını belirtir (standalone="no") veya tek başına bir belge mi (standalone="yes"). İkinci satır şunu ifade eder: belge türü tanımı (DTD)Bir sonraki sürümünde buna ihtiyaç duyulmayacak SVG.
Çizimin tanımlandığı kod etiketlerin arasına eklenmiştir <sgv> y </sgv> bu da şunu gösteriyor ki, daha önce bahsettiğimiz gibi Nesnelerin İnterneti'ndeki veri grafikleri için kapsayıcı görevi gören HTML kodu, ölçümler, toplamın temsil edilen kısmı, oran ve ayrıca tür ve versiyon.
|
1
2
3
4
5
6
7
|
<?xml version=“1.0” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“500px” height=“250px” viewBox=“20 10 460 80” preserveAspectRatio=“none” xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
<!–
dibujo en formato SVG
–>
</svg>
|
Yukarıdaki örnek, kapsayıcıdaki (bir web sayfasındaki bir öğe, bizim durumumuzda) kullanılacak orijinal orana saygı gösterilmeden preserveAspectRatio="none". Ayrıca artık belgenin ilk içeriğini, aralarında yer alan yorumları da görebilirsiniz. <!-- y --> dayalı diğer formatlarda olduğu gibi XML.
Tarafından seçilen koordinat sistemi SVG Yatay (X ekseni) ve dikey (Y ekseni) olarak yönlendirilir ve pozitif yönü Batı yazısının yönüdür, yani X ekseninin değerleri sağa doğru büyür ve Y ekseninin pozitif değerleri büyür. aşağı doğru.
Grafiği SVG ile tanımlayın
IoT'ye bağlı sensörlerimiz tarafından depolanan bilgilerin grafiğini tanımlamak için çizilen nesnenin türünü, geometrisini (koordinatlar, boyutlar...) ve görünümünü (kalınlık, renk...) belirtmemiz gerekecek. Bu makalenin örneği, çizgi parçalarını nesneyle birleştirerek yapılabilecek bir çizgi grafiğidir. line, en çok bağımsız elemanların grafiğini çizmek için veya çok bölümlü bir çizgiyle bir nesneyi çizmek için kullanışlıdır. path, birbirine bağlı hat serileri için daha pratiktir.
eleman ile path Amaç aşağıdaki resimdeki gibi içi daha açık renkle doldurulmuş kapalı bir yolun üst kısmı açık bir yol ile doldurulmadan ve kalın bir çizgi ile çizilmesinden oluşan bir çizim yapmaktır.
Bir çizgiyi tanımlamak için şu türden bir ifade kullanılır:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
Burada X1,Y1 doğru üzerindeki ilk noktanın koordinatları ve X2,Y2 ikinci noktanın koordinatlarıdır. Bir özellik kullanıldı stroke-width kalınlığını tanımlamak için kullanılır. Nesnelerin görünümünü tanımlamanın birkaç yolu vardır SVG, önceki gibi bireysel özellikleriyle veya özelliğiyle style hepsini bir araya getiren ve makale önerisinde kullanılacak yöntem budur.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
Yukarıdaki kod mülkte birleşiyor style değerleri stroke (çizginin rengi), stroke-width (çizginin kalınlığı) ve stroke-opacity (nesnenin opaklığı)
Bir nesnenin açıklaması path forma sahip
|
1
|
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
|
Yukarıdaki kod işlemleri kullanır SVG M, L y Z mülkün içinde d, sırasıyla "moveto" (şuraya git), "lineto" (hatta) ve "yolu kapat" (yolu kapat) anlamına gelir. Uygun olduğunda mutlak veya göreceli bir değeri belirtmek için büyük veya küçük harfle ifade edilebilirler (şu durumda: Zörneğin alakasız). Bu örnekte ihtiyacımız olmayacak, örneğin dairesel eğriler, eliptik eğriler, Bézier eğrileri... çizebileceğimiz birçok başka işlem vardır.
Bu öneri bir alanı çevreleyebilecek çizgi grafikleri çizse de, noktaları işaretlemek veya alanları vurgulamak için diğer basit öğeleri çizmek yararlı olabilir. Mevcut olanlardan SVG Çokgenler (dolguyu da çizebileceğiniz), dikdörtgenler (belirli bir durum için daha uygun), elipsler ve daireler (elipsin belirli bir durumu olarak) ilginç olabilir. Bu elemanların söz dizimi aşağıdaki örnek kodda görülebilir.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<svg id=“formas_sencillas” width=“100%” height=“180px” viewBox=“0 0 100 100” preserveAspectRatio=“none” class=“foto_columna_sombra” style=“background-color:#A8C3EA;margin:20px auto;”>
<polygon points=“0,100 0,42 8,38 14,37 22,40 29,33 35,36 44,40 51,30 57,42 64,33 74,38 80,34 87,40 92,38 100,32 100,100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;fill:#205587;fill-opacity:0.5;” vector-effect=“non-scaling-stroke” />
<circle cx=“0” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“8” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“14” cy=“37” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“22” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“29” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“35” cy=“36” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“44” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“51” cy=“30” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“57” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“64” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“74” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“80” cy=“34” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“87” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“92” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“100” cy=“32” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<rect x=“0” y=“0” width=“100” height=“100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
|
Önceki kodun görünümü aşağıdaki resimdeki gibi olacaktır (yukarıdaki örnekteki noktaları yeniden kullanabilmek için bazı hileler içerir)
Çokgenin noktaları (polygon) özellikte belirtilmiştir points aralarındaki boşluklarla ayrılmış x,y koordinat çiftleri olarak. Elipsleri tanımlamak için (ellipse) özellikleri kullanılır cx (merkezin x koordinatı), cy (merkezin y koordinatı), rx (genişlik) ve ry (yüksek). İki yarıçap değeri yerine (yatay ve dikey yarıçap, rx y ry) Daire (circle) özelliğine sahip bir yarıçap ile tanımlanır r ve merkezin koordinatları cx y cy. Dikdörtgeni tanımlamak için (rectangle) sol üst köşenin koordinatları gösterilir (x e y) Genişlik (width) ve uzun boylu (height)
Son olarak metni eklemek için nesne kullanılır text aşağıdaki gibi:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
Metnin konumu x ve y koordinatlarıyla gösterilir, yazı tipi özelliğe karşılık gelir font-family, boyutu font-size ve özelliğin rengi fill.
HTML çizimleri entegre etmenizi sağlar SVG sayfanın başka bir öğesi olarak. Diğer nesneler gibi bu özelliği de kullanabilirsiniz. ID onlara daha sonra yönlendirilebilecekleri benzersiz bir tanımlayıcı atamak JavaScript onları manipüle etmek. Bakış açısından HTML, bir obje SVG aşağıdaki forma sahip olacaktır:
|
1
2
3
4
5
6
7
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
</svg>
|
Şu ana kadar gördüklerimizle bu teklifte aranan temel grafik tipini çizmek mümkün olacaktır ancak kabın (web sayfasının) görünümüne esneklik kazandırmak için grafiğin oranı etkilenecektir. (Örneğin preserveAspectRatio="none") öğelerin tarayıcı penceresindeki düzene uyarlamak için boyutunu değiştirerek HTML.
Genel olarak konuşursak, grafiğin bulunduğu web sayfasını görüntüleyen tarayıcı penceresinin boyutunu değiştirirken davranışın iki alternatifi vardır: (1) grafiğin boyutunu koruyun SVG fazlalık varsa boş alan bırakmak veya eksikse kaydırma çubukları eklemek veya (2) grafiğin boyutunu değiştirmek SVG Web'i görüntüleyen tarayıcı penceresinin boyutunu değiştirmek için ritmik bir şekilde. İlk formülü seçerseniz, seçilen boyuta ve grafiğin değerlerine göre düzeltilmiş olsa da büyüklükleri tahmin edebilir ve mutlak ölçümlerle çizim yapabilirsiniz. Benim önerdiğim ikinci yolu seçerseniz, büyüklükler her zaman temsil edilen değerlerin yüzdeleridir. İkinci yöntemin avantajı ağa uyarlanabilirliği, dezavantajı ise grafiğe eşlik eden noktalar veya metinler gibi öğelerin çizilmesidir.
Çizgi kalınlıklarında oluşabilecek deformasyonu düzeltmek için efektten yararlanılır. vector-effect="non-scaling-stroke" gerekli olan rotalarda (değeri olanlar) stroke ondan başka none). Nesneler için text Karşılaştırılabilir bir etki yoktur, bu nedenle bunların (kendileriyle ilişkili olanlarla birlikte) kap boyutundaki değişikliğin yarattığı yönün tersi yönde deforme edilmesi gerekir.
dönüşümler SVG Bir grafikteki çeşitli metinlerin ve diğer nesnelerin tek bir gruba entegre edilebilmesi ve daha uygun bir şekilde hepsi için bir dönüşüm gerçekleştirilebilmesi için nesne gruplarına uygulanabilirler.
Bir grubun parçası olan öğeler etiketlerin arasına dahil edilir <g> y </g>, bir dönüşüm atamak için bu özellik kullanılır transform ve bizim durumumuzla alakalı bir dizi işlem scaleyatay ve dikey büyütme faktörünün belirtildiği. Eğer değeri scale Birden büyük olması karşılık gelen ekseni genişletir ve birden küçük olması durumunda o eksen boyunca nesnelerin boyutunda bir azalma meydana gelir.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<g transform=“scale(0.5,2.0)”>
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Primer texto
</text>
<text x=“10.0” y=“50.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Segundo texto
</text>
</g>
</svg>
|
Önceki örnekte, birinci ve ikinci metin, yatay ölçümlerinin yarıya indirilmesi ve dikey ölçümün, kullanılan 0.5 ve 2.0 değerlerine göre ikiye katlanmasıyla değiştirilir. scale(0.5,2.0)
Serinin bir sonraki makalesi IoT'ye bağlı sensörlerden gelen veri grafiklerinin temsili kullanarak grafiklerin gerçek zamanlı olarak nasıl oluşturulacağını veya değiştirileceğini açıklar. JavaScript bu, sunucudan yüklenen son değerleri temsil ederken grafiğin bir animasyonunu görmenizi sağlayacaktır.
Aşağıda bu teklif kullanılarak oluşturulan grafiklerin nasıl görüneceğine dair bir örnek verilmiştir.
Yorum Ekle