Custom HTML

Custom HTML, ekranı baştan sona kendiniz yazdığınız yöntemdir. SVG animasyonda nesnelere davranış bağlarsınız; burada sayfayı siz kurar, platformun verisini kendi arayüzünüze dilediğiniz gibi yerleştirirsiniz.

Yukarıdaki ekran bu sayfadaki kalıplarla kurulmuştur: toplu okuma, kayan trend, eşik çizgisi ve veri gecikince kendini söyleyen bir durum rozeti.

Üç alan

Sayfa üç ayrı alandan oluşur:

Alan	İçeriği
HTML	Yalnızca işaretleme
CSS	Biçimlendirme
JS	Sayfanın kodu

Script HTML alanına yazılmaz

HTML alanının içine koyduğunuz <script> bloğu ve onclick= gibi satır içi olay bağlayıcıları çalışmaz — içerik güvenlik politikası bunları engeller ve tarayıcı sessizce atlar. Kodun tamamı JS alanına gider; platform onu gerekli izinle sarmalar.

Dışarıdan <script src="..."> ile kütüphane yüklemek bundan etkilenmez, o çalışır.

Veriye erişim

Sayfa yalıtılmış bir çerçevede çalışır ve platformun API’sine fetch ile gidemez — istek kimlik bilgisi taşımaz, güvenlik politikası da buna izin vermez. Tek yol, sayfaya hazır gelen InscadaApi köprüsüdür.

var api = new InscadaApi();

// tek değer
var v = await api.getVariableValue('Temperature_C');

// birden çok değer — tek gidiş dönüş, tercih edilen yol
var all = await api.getVariableValues(['Temperature_C', 'Pressure_bar']);
console.log(all.Temperature_C.value);

// yazma
await api.setVariableValue('PumpCmd', { value: true });

Bütün metotlar Promise döndürür. Değişkenlerin yanı sıra alarm, bağlantı, script, rapor ve tarihçe metotlarına da aynı nesneden erişilir.

Kalite işaretleri de gelir

Okunan değerin yanında flags alanı bulunur. flags.commLost doğruysa, elinizdeki okunabilen son değerdir — bağlantısı veri getirmeyi bırakmıştır. Değer “iyi” görünmeye devam ettiği için, önemsediğiniz ekranlarda bu işareti açıkça kontrol edin.

Canlı ekran kalıpları

Canlı bir izleme ekranının güvenilir olması için birkaç şey birlikte gerekir:

Kalıp	Neden
Toplu okuma	On etiket için on istek yerine tek istek; gecikme katlanmaz
1–2 saniyelik periyot	Daha hızlısı sunucuyu boşuna yorar, daha yavaşı ekranı geriden getirir
Halka tampon	Trend verisini bellekte sabit uzunlukta tutun; eskisi düşsün
Grafiği bir kez kurun	Her turda yeniden kurmak yerine güncelleyin, animasyonu kapatın
Gecikme gözcüsü	Son başarılı okumanın üzerinden süre geçtiyse ekranı soluklaştırıp durumu yazın
Yumuşak hata	Okuma başarısızsa ekranı boşaltmayın; eski değer kalsın, durum rozeti söylesin

Son ikisi en çok atlanan ve en çok işe yarayanlardır: veri akmayı bıraktığında ekran donmuş değerleri güvenle göstermeye devam eder, operatör de farkı anlamaz.

Tarihçeden okumaya dayanmayın: değişkenlerin çoğunda loglama kapalıdır ve grafik boş gelir. Canlı değeri periyodik okuyup kendiniz biriktirin.

Kısıtlar

Kısıt	Ayrıntı
Tarayıcı iletişim kutuları	alert, confirm, prompt çalışmaz — onay sorusunu sayfanın içinde kendiniz çizin
Dış kaynaklar	Yalnızca izin verilen dağıtım ağlarından (jsDelivr, cdnjs, unpkg) script; yazı tipleri Google Fonts’tan
Dış istekler	İzin verilen bu adresler dışında fetch/XHR engellenir
Doğrudan açma	Sayfa yalnızca platformun içinde çerçeve olarak açılır

Tema

Sayfa, kabuğun paletini kendisi alır: platform açık/koyu temayı değiştirdiğinde ekrana güncel renkler gönderilir. Bu yüzden zemin, yazı ve kenarlık renklerini sabit yazmayın; değişken üzerinden kullanın ki sayfa temayla birlikte değişsin. Durum renkleri (iyi, uyarı, alarm) bunun dışındadır — sabit kalır ve iki zeminde de okunur seçilmelidir.

Bir ekranı menüye bağlamak için: Özel Menüler.

İlgili

• Özel Menüler — sayfayı menüye bağlama
• Animation — diğer yöntem: SVG üzerine davranış bağlama