Adım 1. Web sunucusunu açın. Bunu yapmak için, cihaz yapılandırma sayfasındaki web sunucusu menüsüne gidin ve web sunucusunu etkinleştirmek için kutuyu işaretleyin.
2. Adım: Projenizi PLC’nize indirin ve web tarayıcınızı kullanarak IP adresine gidin. Varsayılan Siemens PLC Web sunucusunu göreceksiniz.
Diagnostik Buffer’ı görüntüleyebilirsiniz. Bu gerçekten faydalıdır.
Değişken durum sayfası, PLC etiketlerini görüntülemenizi ve değiştirmenizi sağlar. Bu hata ayıklama için harika, ama dikkatli olun. PLC değerlerini doğrudan düzenleyeceksiniz!
PLC’niz veri kayıtlarını kaydetmek için yapılandırılmışsa, günlük dosyalarını Veri Kayıtları (data logs) sayfasından kolayca indirebilir ve Excel’de açabilirsiniz.
Varsayılan web sitesi sorun giderme için mükemmel ve bir tablette gayet iyi görünüyor.
Kullanıcı Sayfaları
PLC’de Kullanıcı tanımlı sayfaları etkinleştirmeden önce, kullanıcı sayfamız için bir HTML dosyası oluşturmamız gerekiyor. “Index.htm” adlı bir metin dosyası oluşturun ve bilgisayarınızdaki bir klasöre kaydedin (örn. “C: \ UserPages” ).
Dosya içeriği şöyle görünmelidir:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>My Title</title> </head> <body> Hello World </body></html>Artık kullanıcı sayfalarını etkinleştirebilir ve oluşturduğumuz bu dosyayı kullanabiliriz. Kullanıcı sayfalarını etkinleştirmek için, cihaz yapılandırmasına gidin -> Web sunucusu -> Kullanıcı tanımlı Web sayfaları. Oluşturduğunuz klasöre HTML Dizini ve oluşturduğunuz dosyaya Varsayılan HTML sayfasını ayarlayın. Kullanıcı sayfasını derlemek için Blokları Oluştur’u tıklayın.
“Blokları Oluştur” işlevinin projenizde iki yeni veri bloğu oluşturduğunu ve bunların ne için olduğunu merak ediyor olabileceğinizi fark edeceksiniz.
Fragmanlar
Fragmanlar, kullanıcı sayfaları klasörünüzdeki her dosyaya verilen addır. Başlangıçta sadece bir “index.htm” dosyası oluşturduk, ancak bu klasörde birkaç dosya olduğunu varsayalım. Böyle bir şeye benziyor:
“Blokları Oluştur” düğmesine tıkladığınızda, derleyici bu dosyaların tümünü alır ve her baytı, parça veri bloklarının öğesindeki bir diziye kopyalar. İlk Fragman DB’si DB334’te başlar. Her dosya için bir dizi boyutlandırılmıştır.
Aşağıda, dosyadaki her bir baytın diziye nasıl dolduğunu görebilirsiniz:
Klasörünüze daha fazla dosya ekledikçe, bir veri bloğunda bulunabilecek maksimum bayt sayısını aşabilirsiniz, bu olduğunda başka bir sıralı veri bloğu oluşturulur. HTML dosyaları, JavaScript, CSS Dosyaları ve hatta görüntü dosyaları ekleyebilirsiniz. Hepsi veri bloğu fragmanlarına dönüştürülecek:
WWW İşlevi
Kullanıcı sayfalarının çalışması için, projenizde WWW İşlevi’ni çağırmanız gerekir. “Blokları Oluştur” işlevi tarafından oluşturulan DB’leri çağırın. DB334’ün parçaları sakladığını zaten biliyoruz. DB333, parçaların alınmasını ve teslimini kontrol etmek için WWW İşlevi ile birlikte kullanılır:
WWW işlevini kodunuza ekleyin. Projenizi derleyin ve indirin.
Bu işlev, tarayıcıdan istek ister ve Kullanıcı Sayfaları’ndaki verileri senkronize eder. Aşağıda gösterildiği gibi Fragman veri bloklarından doğru parçayı almayı sağlar:
PLC’nizin IP Adresine göz atarsanız, ana Siemens Web sunucusu giriş sayfasını göreceksiniz. Kullanıcı Sayfaları için solda bir bağlantı var. Köprüdeki ad, TIA Portalı’nda Kullanıcı Tanımlı Sayfalar yapılandırma ekranında belirttiğiniz uygulama adıyla eşleşir:
Bu bağlantıyı tıklarsanız, Merhaba Dünya sayfanızı göreceksiniz:
Kullanıcı tanımlı web sayfası URL’sinin biçimi yukardaki gibidir. “Awp” nin ne anlama geldiğinden emin değilim, ancak URL’nin gerekli bir kısım.
PLC Verilerini Okuma
PLC verilerini okumak için, okumaya çalıştığımız etikete özel bir referans eklemek için dosyamızı değiştirmemiz gerekiyor. Önce “webdata” adlı bir veri bloğu oluşturun ve “sayaç” adı verilen bir tamsayı değişkeni tanımlayın. PLC’nizde, bu artışı her saniye yapmak için bir kod ekleyin:
Projenizi indirin ve daha sonra değerin artmakta olduğunu doğrulamak için PLC ile çevrimiçi olun:
Şimdi “index.htm” dosyanızı aşağıdaki gibi değiştirin:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Title</title> </head> <body> :="webdata".counter: </body></html>
Etiket adının “: =” ile ön eklendiğine ve “:” ile eklendiğine dikkat edin. Bu, değişkenleri kullanıcı sayfasına enjekte etmenin anahtarıdır. Sayfa oluşturulduğunda, jetonu gerçek PLC etiket değeriyle değiştirecektir.
Web sunucusu yapılandırmasında “Blokları Oluştur” düğmesine tıklayın ve programı PLC’ye indirin. Kullanıcı sayfasına göz attığınızda, sayfa yenilendiğinde sayaç değeri güncellemesini göreceksiniz. Tarandığında sayfanın nasıl yanıp söndüğüne dikkat edin. Web sayfanızı geleneksel bir HMI gibi hissetmeye ve hissetmeye çalışıyorsanız bu can sıkıcı olabilir.
Aşağıda bu sayfa yenilemelerinin can sıkıcı olmasının bir örneği olabilir. Sayfanızda bir resminiz varsa, sayfa yenilendikçe titreyecektir. Aşağıdaki örnekte, sayfa, HTML üstbilgisine belirli bir meta etiket ekleyerek otomatik olarak yenilenir.
<head> <meta charset="utf-8"> <meta http-equiv="refresh" content="1" > <!-- meta tag refreshes page every second --> <title>DACEL Demo - Auto Refresh</title></head>
Javascript Kullanarak Veri Okuma
Rahatsız edici sayfanın titremesini önlemek için, verileri okumak ve arka planda ekranı yenilemek için bazı JavaScript kullanmamız gerekir.
Bunu göstermek için ilk adım, PLC etiketlerini ana sayfamızdan yeni bir sayfaya taşımaktır. Yeni sayfa hiçbir HTML içermeyecek, sadece tek bir etiket referansı ile basit bir HTML dosyası olacak. Yeni bir dosya oluşturun ve “IOCounter.htm” gibi bir ad verin (bu dosyanın veri girişi ve çıktısı için kullanıldığını hatırlatmak için “IO” ile önekiyorum). Orijinal “index.htm” inizin içeriği aşağıda gösterildiği gibi değiştirilmelidir. Etiket referansını taşıdığımızı unutmayın : = “webdata” .counter:“IOCounter.htm” adlı yeni bir dosyaya ve bunun yerine id = “sayacı” olan bir etiketle değiştirdik. Ayrıca popüler JavaScript kitaplığı JQuery’yi de ekledik. Indirmek gerekecektir JQuery ve sizin “userfiles” dizinine kopyalayın.
IOCounter.htm
:="webdata".counter:index.htm:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Javascript Example</title> <script src="jquery-2.0.2.min.js"></script> </head> <body> <label id="counter">0</label> </body> <script type="text/javascript"> $(document).ready(function(){ $.ajaxSetup({ cache: false }); setInterval(function() { $.get("IOCounter.htm", function(result){ $('#counter').text(result.trim()); }); },1000); }); </script></html>Yukarıdaki JavaScript işlevi, geçerli etiket değerini “IOCounter.htm” dosyasının içeriğini isteyerek ve daha sonra bu etiketi kullanarak etiketin kimliğini id = “sayacı” olarak ayarlamak için kullanır. Bu kod, JavaScript setInterval işlevini kullanarak her saniye otomatik olarak çalışır . İşlem aşağıda gösterilmiştir:
Yukarıdaki basit örnekte, “IOCounter.htm” dosyasına tek bir etiket değeri yerleştirdik. Daha gelişmiş bir seçenek, bu dosyaya birkaç etiket koymak ve metni bir JSON yapısına biçimlendirmek olacaktır . Bu, ekranda sadece bir harici veri dosyası kullanarak birkaç etiketi güncellemenizi sağlar. Yine de dikkatli olun, bir HTML sayfasına daha fazla etiket ekledikçe, sayfa yükleme süresi artar.
Tarayıcıdan PLC Etiketlerini Değiştirme
Bir kullanıcı web sayfası, kullanıcının PLC değerlerini değiştirmesine izin vermeden çok yardımcı olmaz. Aşağıdaki HTML sayfası, PLC etiket değerlerini düzenlemenin en basit yolunu göstermektedir. Üst kısımdaki özel yorum alanı (AWP_In_Variable), PLC’ye hangi etiketlerin değiştirilmesine izin verildiğini söyler. Her bir etiket için bu yorumu eklemediğiniz sürece etiket değerlerini düzenleyemezsiniz.
Önce “webdata” DB: new’de yeni bir değişken oluşturun
Sonra aşağıdaki gibi “index.htm” değiştirin:
<!-- AWP_In_Variable Name='"webdata".myInt' --><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>My Title</title> </head> <body> :="webdata".myInt: <form method="post"> <input name='"webdata".myInt' type="text" /> <button type="submit">Save</button> </form> </body></html>
PLC, giriş yapmadığınız sürece değerleri değiştirmenize izin vermeyecektir. Yeni oluşturduğunuz editör sayfasına gitmeden önce giriş yaptığınızdan emin olun. Varsayılan kullanıcı adı admin ve varsayılan şifre boştur, böylece bu alanı boş bırakabilirsiniz.
Giriş yaptıktan sonra sayfaya gidin ve PLC ile çevrimiçi olun. Yeni oluşturduğunuz web sayfasını kullanarak etiket değerini düzenleyebilmeniz gerekir. Kaydetme düğmesine basıldığında sayfanın nasıl yanıp söndüğüne dikkat edin. Bunun nedeni bir post-back’un oluşması ve sayfanın yenilenmesidir.
Geri yükleme yapmadan PLC etiketlerini güncellemek için, arka planda değeri güncellemek için daha fazla JavaScript kullanabiliriz. Öncelikle başka bir HTML dosyası oluşturmalı ve etiket referansımızı ona taşımalıyız.
Bunu göstermek için, “webdata” DB’de triangleWave denen yeni bir değişken oluşturun . Daha sonra bu değeri 100’e kadar saymak için bir kod yazın ve sonra -100’e veya istediğiniz mantığa geri dönün. Sonra “IOtriangleWave.htm” adlı yeni bir dosya oluşturun:
“IOtriangleWave.htm”
<!-- AWP_In_Variable Name='"webdata".triangleWave' -->:="webdata".triangleWave:Yorum alanı, PLC’ye triangleWave değişkeninin düzenlenebilir olduğunu ve : = “webdata” .triangleWave olduğunu belirtir: “IOtriangleWave.htm” içeriğini isteyerek değişkenin mevcut değerini sorgulamamızı sağlar.
Şimdi “index.htm” yi aşağıdaki gibi değiştirin:
<!-- AWP_In_Variable Name='"webdata".triangleWave' --><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Javascript Example</title> <script src="jquery-2.0.2.min.js"></script> </head> <body> <!--This label value is being updated in the background using JavaScript--> <label id="triangleWave" name="triangleWave">:="webdata".triangleWave:</label> </br> <input id='setvar' type="text" /> <!--This button modifies the value in the background using JavaScript without a postback--> <button>Modify</button> <p><img src="logo-DMC.png" alt="DMC Logo"><p/> </body> <script type="text/javascript"> $(document).ready(function(){ //query the trianglewave variable every second $.ajaxSetup({ cache: false }); setInterval(function() { $.get("IOtriangleWave.htm", function(result){ $('#triangleWave').text(result); }); },1000); //modify the triangleWave value $("button").click(function(){ url="IOtriangleWave.htm"; name='"webdata".triangleWave'; val=$('input[id=setvar]').val(); sdata=escape(name)+'='+val; $.post(url,sdata,function(result){}); }); }); </script></html>
Ayrıca, herhangi bir titreme veya sayfa yenileme olmaksızın verilerin okunup yazıldığını göstermek için dosyaya bir resim ekledik:
Sunucu Tarafı Mantığı – Dize Değişkenleri
Tam özellikli web sunucuları, dinamik olarak HTML sayfaları oluşturabilen güçlü sunucu tarafı motorlara sahiptir. Siemens PLC’de küçük bir yerleşik sunucu var, ancak yapılabilecek birkaç sunucu tarafı var.
Bu noktaya kadar tamsayı etiket değerleri ile denemeler yapıyoruz. Sayfanıza bir dize etiketi yerleştirirseniz ve dize değerine bir miktar HTML biçimlendirmesi eklerseniz, HTML olarak işlenir. Aşağıda, dize değerinin, yazılan tam değerleri değil, HTML olarak görüntülendiğini unutmayın:
Aşağıdaki dize etiketine atanan HTML değerleri aşağıda verilmiştir:
<font size="30" color="green">GREEN </font><font size="40" color="red">RED </font><ol> <li>Message 1</li> <li>Message 2</li> <li>Message 3</li></ol><ol> <li><font color="blue">Information</font></li> <li><font color="orange">Warning</font></li> <li><font color="red">Error</font></li></ol>
Sunucu Tarafı Mantığı – Gecikmeli Teslimat
Sunucu tarafı mantığını gerçekleştirmek için çok güçlü olan başka bir teknik Gecikmeli Teslimattır. Bu, WWW İşlevi’ni (DB333 ile bağlantılı olarak) web sunucusunu, kullanıcıya istenen bir sayfayı geri göndermeden önce bekletmek için kullanan bir tekniktir. Bu, PLC’nin, web sayfasında oluşturulmadan önce etiket değerlerinin düzgün şekilde güncellendiğinden emin olmasını sağlar. Tipik bir örnek, bir tarif düzenleyici web sayfası olacaktır. Kullanıcı bir açılır kutudan bir reçete seçer (bu, bir arkaya ve sayfanın yenilenmesine neden olur). Sayfayı yenilemeden önce yeni reçete değerlerinin PLC etiketlerine yüklendiğinden emin olmalıyız. Normalde derleyici, kullanıcı tarafından oluşturulan her dosya için otomatik olarak bir parça numarası atar. Sayfaların teslim edilmesini kontrol etmek için (örn. Fragmanlar), HTML dosyasında aşağıda gösterildiği gibi bir parça numarası belirtmeliyiz:
<!-- AWP_Start_Fragment Name="Control" Type="manual" ID="2" -->Bu özel yorumu HTML dosyanızın üstüne eklemek, derleyiciye bu dosya için # 2 parçasını kullanmasını söyler. Kimlik numarasını istenilen sayıya ayarlayarak parça numarasını belirleyebilirsiniz.
Artık dosyamızın # 2 parçası olacağını biliyoruz, sayfanın teslimini tarayıcıya kontrol edebiliyoruz. Aşağıda, sayfanın gecikmeli yayınlanması için tipik bir merdiven mantığı basamağı yer almaktadır. Örneğimde, reçete yükleme tamamlanana kadar “devam” biti doğru olmaz. Benim durumumda, bir tarifin yüklenmesi birkaç PLC taraması gerektirdi, bu yüzden reçete yüklenene kadar sayfa teslimatını geciktirmem gerekiyordu. PLC’nin birden fazla eşzamanlı bağlantıyı destekleyebileceğini unutmayın. Uygulamanız birkaç eş zamanlı tarayıcı bağlantısını destekleyecekse, gösterilen dizinin her dizini için aşağıdaki kodu çoğaltmanız gerekecektir. Şu anda sadece aşağıdaki kodda 1 endeksi ele alınmıştır.
Aşağıda tarif yükleme ekranını gösteren bir örnektir. Kullanıcı açılan listeden bir PLC etiketinin değiştirilmesine neden olan bir tarif seçer ve tarayıcı web sunucusundan bir post-back bekler. PLC bu değişikliği tespit eder ve reçete yüklemeye başlar (birkaç PLC taraması yapar). Web sunucusu, sayfa bitmeden önce devam bitinin beklemesini (parça), reçete yüklenene kadar ertelenir. Bu, HTML sayfasına enjekte edilen etiket değerlerinin tarayıcıya gönderilmeden önce doğru değerlerle güncellenmesini sağlar.
Aşağıda bu eylemin bir gösterisidir:
Sonuç
Temel bilgileri ve birkaç gelişmiş hileyi bilmek, bir Siemens PLC’den sunulan tam özellikli web sayfaları oluşturmanızı sağlayacaktır. JavaScript’ten rahatsanız, oldukça şaşırtıcı bazı şeyler yapabilir ve geleneksel bir HMI’ya benzeyen ve hissedilen bir web sayfası hazırlayabilirsiniz. Aşağıda, grafik, göstergeler, kullanıcı girişi ve pop-up uyarılarını gösteren basit bir örnek verilmiştir. Bu iPad veya Android tabletimde çalışırken yerel bir uygulama gibi görünüyor ve hissediliyor. Eylem halinde görmek için aşağıdaki resme tıklayın. Mutlu kodlar!
DÜZENLEME: Aşağıda, yukarıdaki demoda gösterilen göstergelerin nasıl kullanılacağı hakkında basit bir örnek verilmiştir. Gage javascript kütüphanesi justgage.com’dan . Aşağıdaki örnek, yukarıda oluşturduğumuz IOTriangleWave.htm’ye başvurmaktadır.
<!DOCTYPE html><head> <meta charset="utf-8"> <title>DMC Gage Demo</title> <script src="js/jquery-2.0.2.min.js"></script> <script src="js/raphael.2.1.0.min.js"></script> <script src="js/justgage.1.0.1.min.js"></script></head><body><div id="g1"></div><div id="g2"></div> <script type="text/javascript"> $(document).ready(function(){ var g1, g2; var g1 = new JustGage({ id: "g1", value: getRandomInt(-100, 100), min: -100, max: 100, title: "Triangle Wave", label: "Value" }); var g2 = new JustGage({ id: "g2", value: getRandomInt(0, 100), min: 0, max: 100, title: "random data", label: "" }); $.ajaxSetup({ cache: false }); setInterval(function() { g2.refresh(getRandomInt(50, 100)); $.get("IOtriangleWave.htm", function(result){ g1.refresh(parseInt(result)); g2.refresh(getRandomInt(50, 100)); }); },1500); });</script></body></html>Ürün için görsele tıklayınız.
İlk Yorum Sizden Gelsin