Skip to main content

Yangilanadigan qiymatlarni o'z ichiga olgan HTML sahifalarini ishlab chiqish

Yangilangan qiymatlarni o'z ichiga olgan HTML sahifalar​

Sahifani belgilarga bo'lish kerak:

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    Moskvadagi harorat: <span id="temperature"></span> °C

    <script>
        window.setData = function(data) {
            document.getElementById("temperature").innerHTML = data["temperature"];
        }
    </script>
</body>
</html>

Va ma'lumotlar:

{
    "temperature": -14
}

ПO'yinchi birinchi marta ko'rsatilganda ("onload" hodisasi bo'yicha) va ma'lumotlar yangilanganda sahifa kontekstida "setData" funksiyasini chaqiradi.

Sahifada tashqi manbalarga havolalar bo'lmasligi kerak, ularning barchasi u bilan birga to'planishi kerak. Ma'lumotlar tashqi manbalarga havolalarni o'z ichiga olishi mumkin, ammo ular maxsus tarzda formatlanishi kerak. Masalan, o'rniga:

{
    "temperature": -14,
    "icon": "https://yastatic.net/weather/i/icons/blueye/color/svg/ovc.svg"
}

Iltimos, jo'nating:

{
    "temperature": -14,
    "icon": {"$playback-data-resource": "https://yastatic.net/weather/i/icons/blueye/color/svg/ovc.svg"}
}

O'yinchi o'z xotirasiga tashqi resurslarni yuklab oladi va resurs URI ni almashtiradi:

{
    "temperature": -14,
    "icon": "file:///visiobox/tmp/playback-data/resources/yastatic.net/weather/i/icons/blueye/color/svg/ovc.svg"
}

Tashqi resurslar pleyerda cheksiz muddatga keshlanadi.

Windows va Android uchun HTML sahifa tartibi bo'yicha tavsiyalar​

Oʻlcham oʻzgartirilmoqda. Turli ruxsatlar

Agar tartib statik bo'lsa, chiqish bilan bog'liq muammolar bo'lishi mumkin. Bunday holda, sahifa tarkibining mutanosib o'lchamiga g'amxo'rlik qilish kerak. Shu sababli, biz ushbu muammoni hal qiladigan skriptni qo'shishni tavsiya qilamiz. JS skript variantlaridan biri:

const BASE_WIDTH = 1920;
const BASE_HEIGHT = 1080;

function resize(){
    kx = window.innerWidth/BASE_WIDTH;
    ky = window.innerHeight/BASE_HEIGHT;
    document.body.style.webkitTransform = 'scale('+ kx + ',' + ky +')';
    document.body.style.transform = 'scale('+ kx + ',' + ky +')';
}

function ready() {
    window.addEventListener("resize", resize);
    resize();
}

document.addEventListener("DOMContentLoaded", ready);

Skript Full HD uchun mo'ljallangan konstantalarni o'z ichiga olganiga qaramay, chiqish portret yo'nalishida ham to'g'ri bo'ladi. Buning sababi, pleer ob'ektlarni yo'nalishidan qat'iy nazar 1920x1080 to'rga joylashtiradi. Agar qurilmangiz boshqa formatda bo'lsa, kontent o'lchami displey o'lchamiga mos kelmasa, buzilish kuzatiladi.

DIQQAT! Skriptdagi chiqishni to'g'ri formatlash uchun siz Full HD displeyga nisbatan o'lcham o'zgarishini hisobga olishingiz kerak.

Vaqt​

Agar tartib/ilova vaqt bilan bog'liq bo'lsa, u holda brauzerdagi vaqt qurilmaning tizim vaqti ekanligini tushunishingiz kerak. Qurilmangizdagi vaqt noto'g'ri bo'lishi mumkin. Vaqtning aniqligi masalasini tartib/ilova darajasida hal qilish kerak. Variantlardan biri vaqtni sozlashni amalga oshirishdir. Qurilmangizda to'g'ri vaqtni o'rnatish yaxshidir. Shuningdek, setData() usulini chaqirishda vaqtni sozlashingiz mumkin. Ma'lumotlarga qo'shimcha ravishda, ushbu usulga ikkita raqam o'tkaziladi: qurilmaning vaqt mintaqasidagi va UTCdagi aniq vaqt. Usul bilan ishlashga misol:

function setData(data, now, utcNow){
    console.log({data, now, utcNow});
}

Yangilangan maʼlumotlar emas​

Pleyer har doim ma'lumotlarni ko'rsatadi; agar ma'lumotlar yangilanmagan bo'lsa, eng so'nggi ma'lum ma'lumotlar olinadi. Ma'lumotlar eskirgan va yangi ma'lumotlar kelmagan bo'lishi mumkin (manba bilan bog'liqlik yoki boshqa muammolar). Bunday holda, ma'lumotlarning ishlash muddatini belgilash orqali buni nazorat qilishingizni tavsiya qilamiz. Ushbu ma'lumot ma'lumotlar serveridan yuborilishi mumkin yoki ma'lum qiymat tartibda saqlanishi mumkin. Tekshirish taymer yoki setData() funksiyasini chaqirganda amalga oshirilishi mumkin.

DIQQAT! Vaqt masalasini e'tiborsiz qoldirmang

Kutubxonalar va manbalar​

Hech qanday cheklovlar yo'q. Bunday holda, tarmoq orqali hech narsa yuklanmasligi uchun barcha kerakli resurslarni tartib yoniga joylashtirishni tavsiya etamiz.

Oohdesk CMS ilovalari (bozorga kiritilgan)​

Diqqat! Ilovalar Oohdesk CMS mutaxassislari tomonidan oldindan moderatsiya qilingandan keyingina bozorga kiritilishi mumkin

VisioBox ilovasi setData funksiyasini oz ichiga olgan oddiy HTML sahifa bolib, dastur yuklangandan song, shuningdek sahifadagi malumotlarni yangilashda pleer tomonidan chaqiriladi. Funktsiyaning bitta argumenti bor, "ma'lumotlar" quyidagicha ko'rinadi:

{
    options: {
       // Ilova sozlamalari
        color: "red",
        fontSize: "14px",
        username: "XiaoMi"
    },
    data: {
        // Ilovaga ko'rsatilgan ma'lumotlar
        profile: {
            location: "Russia, Moscow"
        },
        repos: [
            {
                name: "mace"
            }
        ]
    }
}

Bundan tashqari, ilovada ilova sozlamalari va u maʼlumotlarni toʻplaydigan URL manzilini tavsiflovchi “manifest” mavjud.

Ilova misoli:

<html>
<head>
    <meta charset="utf-8" />

    <script id="manifest" type="application/json">
        {
            "name": "example",
            "version": 1,

            "title": "Ilova misoli:",
            "description": "",

            "options": [
                {
                    "title": "Rang",
                    "name": "color",
                    "type": "choice",
                    "options": {
                        "choices": [
                            ["red", "Красный"],
                            ["green", "Синий"]
                        ]
                    },
                    "example": "red"
                },
                {
                    "title": "Shrift hajmi",
                    "name": "fontSize",
                    "type": "text",
                    "options": {},
                    "example": "14px"
                },
                {
                    "title": "Foydalanuvchi nomi GitHub",
                    "name": "username",
                    "type": "text",
                    "options": {},
                    "example": "XiaoMi"
                }
            ],

            "playback_data": {
                "profile": {
                    "url": "'https://api.github.com/users/' .. options['username']",
                    "interval": 3600
                },
                "repos": {
                    "url": "'https://api.github.com/users/' .. options['username'] .. '/repos'",
                    "interval": 300
                }
            },

            "preview": {
                "width": 1920,
                "height": 1080
            }
        }
    </script>
</head>
<body>
    <div id="text"></div>

    <script>
        var div = document.getElementById("text");

        window.setData = function(data) {
            div.style.color = data.options.color;

            div.innerHTML = 'Привет, я живу в ' + data.data.profile.location + ' и работаю над ' + data.data.repos[0].name;
        }
    </script>
</body>
</html>

Nosozliklarni tuzatish ilovalari​

</body> oldiga quyidagi kodni qo'shing:

    <script id="application-debug" src="https://testing.visiobox.cloud/utils/application-debug.js" data-access-token="YGc7uf5Agi5LRc6yaE8dcQIuZh0HCX7g">
    </script>

Sahifani yuklagandan so'ng, kerakli parametrlar bilan setData funksiyasi chaqiriladi. Siz standart dastur sozlamalarini bekor qilishingiz mumkin:

<script id="application-debug" src="https://testing.visiobox.cloud/utils/application-debug.js" data-access-token="YGc7uf5Agi5LRc6yaE8dcQIuZh0HCX7g" data-options='{"username": "torvalds"}'></script>

RSS​

RSS-dan foydalanadigan dasturga misol

<html>
<head>
    <meta charset="utf-8" />

    <script id="manifest" type="application/json">
        {
            "name": "rss-example",
            "version": 1,

            "title": "RSS-dan yangiliklarni ko'rsatadigan ilovaga misol",
            "description": "",

            "options": [
                {
                    "title": "URL",
                    "name": "url",
                    "type": "url",
                    "options": {},
                    "example": "http://static.feed.rbc.ru/rbc/logical/footer/news.rss"
                }
            ],

            "playback_data": {
                "url": "options['url']",
                "format": "rss",
                "interval": 300
            },

            "preview": {
                "width": 1920,
                "height": 1080
            }
        }
    </script>
</head>
<body>
    <div id="text"></div>

    <script>
        var div = document.getElementById("text");

        window.setData = function(data) {
            var s = "";
            for (var i = 0; i < data.data.entries.length; i++)
            {
                s += '<h1>' + data.data.entries[i].title + '</h1>' + (data.data.entries[i].summary || "");
            }
            div.innerHTML = s;
        }
    </script>
</body>
</html>

Animatsiyalar (agar siz HTML displeyi boshlanganda animatsiyani boshlashingiz kerak bo'lsa, ushbu parametr tegishli)​

Ilovalar ekranda ko'rsatilishidan bir necha soniya oldin pleer tomonidan yuklanadi, shunda hamma narsa yuklashga vaqt topadi. Agar ilovangizda animatsiya boʻlsa, ular sahifa ochilganda emas, balki visio-ready hodisasi qabul qilinganda ishga tushirilishi kerak:

<html>
    <head>
        <script>
            window.addEventListener('visio-ready', function() {
                document.body.style.backgroundColor = '#ff0000';
            });
        </script>
    </head>

    <body style="background-color: #000000;">
    </body>
</html>

Ijro hisobotlari​

Ijro hisobotiga ba'zi ma'lumotlarni qo'shish uchun siz setOutput funksiyasidan foydalanishingiz mumkin:

setOutput("sahna_1")

Misol: Ko'p sahnalarni o'z ichiga olgan HTML mavjud. Har bir sahna tartib mantig'iga kiritilgan tetiklash shartlariga qarab ishga tushiriladi. Har bir sahnaning oʻynatish statistikasini kuzatib borish uchun bitta oʻtish uchun setOutput("scene_1"), boshqasi uchun setOutput("scene_2") va boshqalar (sahnalar soni boʻyicha)