3D simulacija na LED ekranu
6. jun 2024.Digital OOH čine atraktivni mediji ali se njihove mogućnosti uglavnom ne koriste. Rešenja su u obliku slika, snimaka ili animacija i tu se staje.
Ovde ćete moći da vidite nešto naprednije korišćenje digitalnog medija koje uključuje interakciju sa posmatračem. Takva kampanja može (a ne mora) da bude povezana u isto vreme na Digital OOH, standard OOH, Online pa čak i na TV i Press-u.
U ovom primeru kreiraćemo kampanju koja se oslanja na anketu. Rezultati ankete se mogu videti posle popunjavanja. Imaćemo samo jedno pitanje ali može ih biti i više.
Potrebno je da napravimo dva dela kampanje.
- Prvi deo je rešenje koje će se emitovati na digitalnim medijima i koje poziva na popunjavanje i prikazuje rezultate.
Poziv na akciju – popunjavanje ankete može biti kreiran i za standardne medije Citylight-e ili Billboard-e ali bez prikazivanja rezultata. Online, na web stranici može se naravno prikazati i poziv ali i sama anketa, potpuno ista. - Drugi deo je Anketa koju popunjava korisnik.
- Posmatrač skenira telefonom QR code.
QR code se može postaviti na digitalne ili standardne OOH medije. - Na web stranci popunjava anketu
- Može da vidi rezultate na digitalnom OOH mediju
Oba dela kampanje koriste HTML i JavaScript za prikazivanje i prikupljanje podataka. Pravljenje ankete ne mora da bude rezervisano samo za programere. Naravno, poželjno je poznavanje bar osnova HTML ali uz našu pomoć ni to nije neophodno.
Ovde ćemo vam objasniti postupak ali je najbitnije da sagledate ideju kampanje jer AQ može sve korake uraditi za vas ali izgled ankete i rešenja bi trebalo da obezbedite pre toga.
Krenućemo od koraka broj 2 – stranice gde posmatrač popunjava anketu.
Ako ste programer ovaj deo možete napraviti sami, ali ako niste, predlažemo da koristite jednostavan, besplatan, open source alat: SurveyJS.
Uz pomoć ovog alata možete uneti željena pitanja, dizajnirati izgled vaše ankete i na kraju pratiti rezultate.
Pored toga, dobićete i kod koji možete ugraditi na svoju ili neku nezavisnu web stranicu i na taj način prikazati anketu bez logoa proizvođača servisa. Sve je prilično jednostavno a i besplatno.
Kako se to radi pogledajte u sledećem videu. Možete paralelno pokušati da odmah pratite korake (uz pauziranje videa) i napraviti svoju anketu.
Ako ste ispratili sve korake, na kraju bi trebalo da imate 4 fajla: theme.js , json.js , index.js , index.html . Možete dodati i index.css ako želite da dodatno modifikujete izgled ankete ali za to je potrebno poznavanje HTML.
U fajlu index.js zamenite sadržaj tako što ćete umesto postojećeg postaviti i modifikovati ovaj kod:
const json = {
"surveyId": "83e54aaa-735f-4cb6-a45c-c59a84bec644",
"surveyPostId": "eca1d7cc-8e4b-4783-a47e-96eee7a7b7d5",
"surveyShowDataSaving": false
}
Umesto id koji su obeleženi žutom bojom ubacite vaš surveyId i surveyPostId. Možete ih naći ovde:
- Kliknite na Copy ID i prebacite u surveyId.
- Kliknite zatim na Copy Post IF i prebacite u surveyPostId.
- Sačuvajte fajl index.js
Sve fajlove kopirajte u neki folder na vašem web serveru. Ako to ne možete da uradite, pozovite AQ i mi ćemo vam ponuditi rešenje za to.
Sada imamo upitnik za anketu. Sledeći korak je pravljenje rešenja za poziv na akciju za digitalne i standardne medije.
Rešenje za poziv na popunjavanje ankete za digitalne medije se sastoji iz tri elementa:
- Grafičkog rešenja
- QR code pomoću kojeg će posmatrač dobiti link za popunjavanje ankete
- Semafora – brojčanog i grafičkog prikaza rezultata
QR code, sa putanjom ka web stranici koja sadrži anketu, možete generisati na internetu koristeći neki od besplatnih servisa ili npr. u Adobe Illustrator programu. Kod besplatnih servisa je možda mali problem mala rezolucija u kojoj dobijate QR code.
Ovde nećemo detaljnije govoriti o izradi grafičkog rešenja. Pretpostavljamo da ćete koristiti neki od Adobe alata ili nešto slično.
Kako bi napravili semafor ponovo nam je potrebno poznavanje HTML i JavaScript ali i još neki preduslovi o kojima ćemo pričati u nastavku.
Semafor – prikazivanje rezultata
Rezultate ankete možete pogledati na SurveyJS sajtu.
Pored ovog grafičkog prikaza moguće je dobiti rezultate u obliku XML ili JSON fajla. To su tekstualni formati iz kojih se pomoću JavaScript mogu pročitati podaci i kasnije se obrađivati. To izgleda ovako:
{
"ResultCount": 5,
"Data": [{
"Pitanje1": "Item 2",
"HappendAt": "\/Date(1718219434390)\/",
"IPAddress": "217.24.28.238",
"InstanceId": null
}, {
"Pitanje1": "Item 1",
"HappendAt": "\/Date(1718389333174)\/",
"InstanceId": null
}, {
"Pitanje1": "Item 2",
"HappendAt": "\/Date(1718389712527)\/",
"IPAddress": "217.24.28.238",
"InstanceId": null
}, {
"Pitanje1": "Item 2",
"HappendAt": "\/Date(1718561527764)\/",
"IPAddress": "217.24.28.238",
"InstanceId": null
}, {
"Pitanje1": "Item 1",
"HappendAt": "\/Date(1718217482623)\/",
"InstanceId": null
}
]
}
Semafor – prikazivanje rezultata
Ovako dobijeni podaci u ovom primeru će, pomoću koda, biti izbrojani i određen njihov procenat.
Kod emitovanja ovakvog sadržaja na digitalnim AQ medijima postoje neka ograničenja. Kako bi se obezbedila sigurnost mreže, sadržaj sa interneta sa može pozivati samo sa unapred definisanih sigurnih lokacija. To znači da ceo sadržaj koji se emituje (slike, HTML, JS, JSON fajlovi, Google fonts, JavaScript library itd.) mora biti u folderu na toj lokaciji.
Takođe, kako bi sprečili blokiranje od strane servera gde su rezultati, pozivanje rezultata se vrši periodično, planirano, sa kompjutera koji posle te rezultate prosleđuje na sigurnu lokaciju.
U slučaju ove ankete, a i nekog drugog projekta, potrebno je, ako sami programirate HTML koji će se prikazivati na AQ medijima, da se pridržavate ovih ograničenja i da bar pre finalizacije kontaktirate AQ i prosledite kod na proveru.
Možete uraditi upitnik i grafički deo rešenja za prikazivanje rezultata a AQ će na to dodati kod.
Kod možete napisati u mnogo alata. Mi koristimo Adobe Animate uglavnom zbog dodatnih mogućnosti animacije sadržaja.
Semafor – prikazivanje rezultata
Učitavanje i obrada podataka iz fajla se rezultatima može izgledati ovako:
$.getJSON("./sync/Cokolada.json", function (data) {
item1Count = 0;
item2Count = 0;
// Iterate through each entry in the JSON data
$.each(data.Data, function (index, element) {
if (element.Pitanje1 === "Item 1") {
item1Count++;
} else if (element.Pitanje1 === "Item 2") {
item2Count++;
}
});
// Calculate total count and percentages
totalCount = item1Count + item2Count;
item1Percentage = (item1Count / totalCount) * 100;
item2Percentage = (item2Count / totalCount) * 100;
root.poljeDA.scaleX = item1Count / totalCount;
root.poljeNE.scaleX = item2Count / totalCount;
root.vDA.text = "DA - " + item1Percentage.toFixed(0) + "%";
root.vNE.text = "NE - " + item2Percentage.toFixed(0) + "%";
console.log("Percentage of Item 1:" + item1Percentage.toFixed(2));
console.log("Percentage of Item 2:" + item2Percentage.toFixed(2));
root.maxminpolje0.text = item1Percentage.toFixed(0) + " - " + item2Percentage.toFixed(0);
})
Semafor – prikazivanje rezultata
Ovako dobijeni podaci u ovom primeru će, pomoću koda, biti izbrojani i određen njihov procenat.
Kod emitovanja ovakvog sadržaja na digitalnim AQ medijima postoje neka ograničenja. Kako bi se obezbedila sigurnost mreže, sadržaj sa interneta sa može pozivati samo sa unapred definisanih sigurnih lokacija. To znači da ceo sadržaj koji se emituje (slike, HTML, JS, JSON fajlovi, Google fonts, JavaScript library itd.) mora biti u folderu na toj lokaciji.
Takođe, kako bi sprečili blokiranje od strane servera gde su rezultati, pozivanje rezultata se vrši periodično, planirano, sa kompjutera koji posle te rezultate prosleđuje na sigurnu lokaciju.
U slučaju ove ankete, a i nekog drugog projekta, potrebno je, ako sami programirate HTML koji će se prikazivati na AQ medijima, da se pridržavate ovih ograničenja i da bar pre finalizacije kontaktirate AQ i prosledite kod na proveru.
Možete uraditi upitnik i grafički deo rešenja za prikazivanje rezultata a AQ će na to dodati kod.
Kod možete napisati u mnogo alata. Mi koristimo Adobe Animate uglavnom zbog dodatnih mogućnosti animacije sadržaja.
Semafor – prikazivanje rezultata
Kada se spoje sva tri dela dobija se rešenje za emitovanje:
Još jednom, na terenu to izgleda ovako:
Uz neke izmene ovakav sistem možete koristiti u isto vreme na vašem web sajtu pa čak i u nekoj TV emisiji gde obično pozivaju gledaoce da glasaju o nekoj temi. Prednost je i što ovde nema plaćanja cene SMS poruka pa bi odziv trebalo da bude veći.
Rezultati bi mogli da se emituju istovremeno na više platformi jer se prikupljaju iz istog izvora.
Server koji šalje upit i prosleđuje podatke na sigurnu lokaciju sa koje se emituje, može da prosledi podatke na više lokacija istovremeno.
Na kraju, zanimljivo je da SurveyJS može da se podesi da umesto anketnih pitanja prikazuje kviz pitanja. Sistem tada može da beleži poene korisnika. Moguće je i pravljenje grananja, gde će se u odnosu na odgovor otvoriti neko drugo pitanje. Ostala podešavanja, za prikazivanje rezultata, su onda nešto drugačija.