1 Język GIML i platforma GCAFJacek Matulewski Instytut Fizyki, WFAiIS, UMK ICNT, UMK WWW: Język GIML i platforma GCAF semestr letni 2017

2 Podział języków programowaniaJęzyki programowania Zasady określające tworzenie programów komputerowych (syntaksa + semantyka + typy danych) Języki imperatywne sekwencja instrukcji (algorytm) Języki deklaratywne opis stanu docelowego (np. dokumentu) Asembler Fortran C/C++, C#, Java i wiele innych Języki logiki np. Prolog Języki funkcyjne np. Ocaml, F# Języki znaczników np. HTML, TeX Języki modelowania np. UML Inne

3 Języki znaczników Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki HTML

Jacek Matulewski

Strona główna - wersja bez ramek { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12040545/69/images/3/J%C4%99zyki+znacznik%C3%B3w.jpg", "name": "Języki znaczników", "description": "Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki. HTML. Jacek Matulewski function totop() { if (self != top) top.location.href = self.location.href; }; setTimeout ( totop() , 1000); Jacek Matulewski Strona główna - wersja bez ramek ", "width": "1024" }

4 Języki znaczników Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki HTML

Jacek Matulewski

Strona główna - wersja bez ramek { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12040545/69/images/4/J%C4%99zyki+znacznik%C3%B3w.jpg", "name": "Języki znaczników", "description": "Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki. HTML. Jacek Matulewski function totop() { if (self != top) top.location.href = self.location.href; }; setTimeout ( totop() , 1000); Jacek Matulewski Strona główna - wersja bez ramek ", "width": "1024" }

5 Języki znaczników Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki HTML

Jacek Matulewski

Strona główna - wersja bez ramek Znacznik otwierający Element (jedna z ustalonych nazw) Zawartość elementu Znacznik zamykający { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12040545/69/images/5/J%C4%99zyki+znacznik%C3%B3w.jpg", "name": "Języki znaczników", "description": "Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki. HTML. Jacek Matulewski function totop() { if (self != top) top.location.href = self.location.href; }; setTimeout ( totop() , 1000); Jacek Matulewski Strona główna - wersja bez ramek Znacznik otwierający. Element (jedna z ustalonych nazw) Zawartość elementu. Znacznik zamykający.", "width": "1024" }

6 Języki znaczników Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki HTML

Jacek Matulewski

Strona główna - wersja bez ramek Znacznik otwierający Element (jedna z ustalonych nazw) Zawartość elementu Znacznik zamykający { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12040545/69/images/6/J%C4%99zyki+znacznik%C3%B3w.jpg", "name": "Języki znaczników", "description": "Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki. HTML. Jacek Matulewski function totop() { if (self != top) top.location.href = self.location.href; }; setTimeout ( totop() , 1000); Jacek Matulewski Strona główna - wersja bez ramek Znacznik otwierający. Element (jedna z ustalonych nazw) Zawartość elementu. Znacznik zamykający.", "width": "1024" }

7 Języki znaczników Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki HTML

Jacek Matulewski

Strona główna - wersja bez ramek HTML opisuje zarówno zawartość dokumentu, jak i sposób jej prezentacji w oknie przeglądarki HTML nie jest czuły na wielkość liter Przeglądarki starają się wyświetlać niepoprawny kod Atrybuty: nazwa = ”wartość” Element bez zawartości; skrócony zapis równoważny

{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12040545/69/images/7/J%C4%99zyki+znacznik%C3%B3w.jpg", "name": "Języki znaczników", "description": "Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki. HTML. Jacek Matulewski function totop() { if (self != top) top.location.href = self.location.href; }; setTimeout ( totop() , 1000); Jacek Matulewski Strona główna - wersja bez ramek HTML opisuje zarówno zawartość dokumentu, jak i sposób jej prezentacji w oknie przeglądarki. HTML nie jest czuły na wielkość liter. Przeglądarki starają się wyświetlać niepoprawny kod. Atrybuty: nazwa = wartość Element bez zawartości; skrócony zapis równoważny ", "width": "1024" }

8 Języki znaczników Języki znaczników (ang. markup language) – opis dokumentu; format, w którym oprócz właściwej zawartości dokumentu umieszczone są opisujące ją znaczniki XML Prolog Komentarz Obowiązkowy element główny (root) XML jest czuły na wielkość liter XML nie ma ustalonych nazw znaczników (format) Przez to nie jest związany z żadnym sposobem prezentacji dokumentu Ale za to pozwala na opis dowolnych struktur danych (nie tylko tabel)

9 Języki znaczników Języki XAML (ang. extensible application markup language) – opis GUI aplikacji Windows (WPF) i aplikacji uniwersalnych (Windows 8/10, Mobile, IoT, itd.) XAML xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> HorizontalAlignment="Left" VerticalAlignment="Top" />

10 Języki znaczników Języki XAML (ang. extensible application markup language) – opis GUI aplikacji Windows (WPF) i aplikacji uniwersalnych (Windows 8/10, Mobile, IoT, itd.) XAML xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">

HorizontalAlignment="Left" VerticalAlignment="Top" /> Ustalone nazwy znaczników związane ze sposobem prezentacji (semantyka) System przestrzeni nazw Ustalone nazwy atrybutów (semantyka) Brak prologu (wyspecjalizowany edytor w Visual Studio)

11 Języki znaczników Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika GIML oryginalnyRozmiarEkranuX="1024" oryginalnyRozmiarEkranuY="768"> Obowiązkowy prolog (dowolny edytor XML) Konieczny zapis w UTF-8 (polskie litery) Element główny (nazwa w zasadzie dowolna)

12 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika GIML oryginalnyRozmiarEkranuX="1024" oryginalnyRozmiarEkranuY="768"> Zasoby (idea: unikanie wielokrotnego alokowania pamięci)

13 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika GIML oryginalnyRozmiarEkranuX="1024" oryginalnyRozmiarEkranuY="768"> W pliku GIML można używać względnych ścieżek plików

14 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika GIML oryginalnyRozmiarEkranuX="1024" oryginalnyRozmiarEkranuY="768"> Wiele „okien” w jednym pliku GIML (inaczej niż w HTML i XAML)

15 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Obszar ... kształt="prostokąt" położenieŚrodkaX="150" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100" tekst="Obszar w stanie normalnym"> Część atrybutów elementu obszar jest obowiązkowa: nazwa, kształt, położenieŚrodkaX|Y, rozmiarX|Y Obszar to kluczowy element GIML (rysunek, przycisk, element aktywujący itp) Obowiązkowa nazwa (identyfikacja) Kształt: prostokąt, elipsa (koło) Położenie centrum rysunku Towarzyszący lub alternatywny tekst

16 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Obszar

17 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Formatowanie tekstu ... kształt="prostokąt" położenieŚrodkaX="150" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100" tekst="Obszar w stanie normalnym„ czcionka="Times" rozmiarCzcionki="30" kolorCzcionki="Navy">

18 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Trzy stany obszaru spojrzenie (t > 0s) przyglądanie się (t > 1s)

19 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Trzy stany obszaru ... kształt="prostokąt" położenieŚrodkaX="150" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100" tekst="Obszar w stanie normalnym„ czcionka="Times" rozmiarCzcionki="30" kolorCzcionki="Navy"> rozmiarCzcionki="30" kolorCzcionki="Blue" /> Atrybuty odpowiedzialne za formatowanie (np. rozmiarCzcionki) muszą być powtórzone, inaczej użyte zostaną wartości domyślne

20 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Trzy stany obszaru ... kształt="prostokąt" położenieŚrodkaX="150" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100" tekst="Obszar w stanie normalnym„ czcionka="Times" rozmiarCzcionki="30" kolorCzcionki="Navy"> rozmiarCzcionki="30" kolorCzcionki="Blue" /> rozmiarCzcionki="30" kolorCzcionki="Cyan" />

21 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek) Ścieżka do folderu z zasobami (pliki graficzne)

22 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek) Element rysunków Analogicznie dźwięki

23 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek) Referencje rysunków (identyfikowane po nazwie)

24 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek) położenieŚrodkaX="450" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100"> Odwołania do nazw rysunków

25 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek)

26 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek)

27 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek)

28 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Przezroczystość Rysunek Zoe ma białe tło (inaczej niż rysunek z Bertem i Erniem) Można wskazać dowolny kolor (jednolite tło) jako przezroczyste ścieżka="rysunki\zoe_purple.png" kluczPrzezroczystości="Fuchsia" />

29 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Zasoby (rysunek)

30 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Animacja obszaru kształt="prostokąt" położenieŚrodkaX="650" położenieŚrodkaY="300" rozmiarX="200" rozmiarY="300" nazwaRysunku="bert" typAnimacji="Powiększanie" okresAnimacji="200" amplitudaAnimacji="0.1" /> Okres animacji w ms Uwaga! Znak dziesiętny używany w wartościach atrybutów zależy od ustawień systemu Windows. Być może należy w Twoim komputerze zastąpić przecinek kropką. Amplituda: względem wielkości obrazu (powiększenie) lub w pikselach (kołysanie) Inne typy animacji: Brak|Powiększanie|ObrotyWLewo|ObrotyWPrawo| |KołysanieWPoziomie|KołysanieWPionie

31 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Włączanie i wyłączanie obszarów ...

32 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Włączanie i wyłączanie obszarów ...

33 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Włączanie i wyłączanie obszarów ... Inne możliwości: nazwaObszaruWłączanegoPoZakończeniu, nazwaObszaruWyłączanegoPoRozpoczęciu, nazwaObszaruWyłączanegoPoZakończeniu, wyłączyćPoZakończeniu = "tak|nie" Można wymienić kilka nazw obszarów po średniku

34 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Sceny

35 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Sceny

36 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Sceny położenieŚrodkaX="150" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100" tekst="Przełącz do drugiej sceny">

37 Wstęp do GIML Języki GIML (ang. gaze interaction markup language) – opis GUI aplikacji sterowanych wzrokiem – nie tylko statyczny wygląd, ale również dynamika Sceny położenieŚrodkaX="150" położenieŚrodkaY="100" rozmiarX="200" rozmiarY="100" tekst="Przełącz do pierwszej sceny"> nazwaDocelowejSceny="druga" />

38 Wstęp do GIML Niektóre nieomówione znaczniki: liczbaPowtórzeń="3" wTle="nie" głośność="0.1" /> kluczPrzezroczystości="Fuchsia" liczbaPowtórzeń="2" głośność="1" wTle=" tak|nie"/> nazwaDźwiękuTła="tło" scenaWzorcowa="szablon" stopieńZaczernienia="200" kolorZaczernienia="Blue" blokowanieObszarowPrzyZaczernieniu="tak|nie" nazwaObszaruWłączanegoPoWyłączeniuWszystkichObszarów="1" resetujPoWejściu="nie" poZmianieSceny="s0_z1"> Dziedziczenie scen (scena wzorcowa) Reakcja po naciśnięciu klawisza System zdarzeń (biblioteka DLL z dowolnym kodem dla platformy .NET)

39 GCAF Platforma GCAF (ang. gaze controlled application framework) – interpreter j. GIML. Platforma do uruchamiania aplikacji GIML, zbierania danych, analizy danych w cz. rz.

41 Docelowy odbiorca GIML/GCAFOther disorders: delayed speach developement, ADHD, dislexia

42 Docelowy odbiorca GIML/GCAFGrant NCN (Symfonia) - NeuroPerKog Rozwój słuchu fonematycznego i pamięci roboczej u niemowląt i dzieci Zespół: W. Duch, J. Dreszer, B. Bałaj, J. Matulewski, Ł. Goraczewski i wiele innych Badania niemowląt (10-12 msc) i dzieci 6-letnich – zdolności rozpoznawania fonemów „swoich” i „obcych” – trening interaktywny (podtrzymanie zdolności rozpoznawania fonemów „obcych”) – odwrócenie procesu u niemowląt Możliwe zastosowania m.in. – w usprawnianiu umiejętności językowych, – nauka języków obcych Other disorders: delayed speach developement, ADHD, dislexia

43 Docelowy odbiorca GIML/GCAFGrant NCN (Symfonia) - NeuroPerKog Rozwój słuchu fonematycznego i pamięci roboczej u niemowląt i dzieci Zespół: W. Duch, J. Dreszer, B. Bałaj, J. Matulewski, Ł. Goraczewski i wiele innych Other disorders: delayed speach developement, ADHD, dislexia Kuhl, P. (2006)

44 Docelowy odbiorca GIML/GCAFGrant NCN (Symfonia) - NeuroPerKog Rozwój słuchu fonematycznego i pamięci roboczej u niemowląt i dzieci Zespół: W. Duch, J. Dreszer, B. Bałaj, J. Matulewski, Ł. Goraczewski i wiele innych Other disorders: delayed speach developement, ADHD, dislexia Bergelson, E., & Swingley, D. (2012)

45 Eksperymenty przygotowane w GIMLGrant NCN (Symfonia) - NeuroPerKog Rozwój słuchu fonematycznego i pamięci roboczej u niemowląt i dzieci Eksperymenty w paradygmacie „Wyprzedzających ruchów gałek ocznych” (AEM, od ang. anticipatory eye movement paradigm) Eksperyment „Elmo” Other disorders: delayed speach developement, ADHD, dislexia

46 Eksperymenty przygotowane w GIMLGrant NCN (Symfonia) - NeuroPerKog Rozwój słuchu fonematycznego i pamięci roboczej u niemowląt i dzieci Eksperymenty w paradygmacie „Wyprzedzających ruchów gałek ocznych” (AEM, od ang. anticipatory eye movement paradigm) Eksperyment „Elmo” Eksperyment „Dwa obszary” Other disorders: delayed speach developement, ADHD, dislexia

47 Eksperymenty przygotowane w GIMLGrant NCN (Symfonia) - NeuroPerKog Rozwój słuchu fonematycznego i pamięci roboczej u niemowląt i dzieci Sterowanie wzrokiem jest u niemowląt naturalne. U dorosłych - nie Eksperyment „Czerwona kropka” Interaktywna bajka dla niemowląt Other disorders: delayed speach developement, ADHD, dislexia

48 Badania Trwają badania niemowląt – stały nabór chętnychTreningi poznawcze i badania dzieci z użyciem komputerów i urządzeń mobilnych Badania Trwają badania niemowląt – stały nabór chętnych (zapisy także mam w ciąży) Koordynator: Joanna Dreszer (psycholog) kontakt: telefon: Other disorders: delayed speach developement, ADHD, dislexia

49 Usability (UX) testing of GIMLJacek Matulewski – The developement of Gaze Interaction Markup Language Usability (UX) testing of GIML N = 23 students, but 2 excluded (very distracted and tired at the beginning) Two groups: students of informatics (programmers, s.y.) and of cognitive science Intersection: 3 students of both fields of study (first year of IT) N(IT) = 11 , N(IT+CS) = 3, N(CS) = 7 Scenario: 1. Introduction 2. Tutorial 3. Tasks (recorded and analyzed) UX test methodology: so called „rainbow form” from Google labs (lean UX testing methodology)

50 Usability (UX) testing of GIMLJacek Matulewski – The developement of Gaze Interaction Markup Language Usability (UX) testing of GIML Tasks: 1. Understanding of GIML code („tell me what will be visible at screen, changes”) 2. Reproduce the simple application using the GIML code 3. Creating the gaze controlled photo viewer Success rate: All 11 programmers and all 3 students from ‚intersection’ group finished the test 5 of 7 students of cogn. sc. succeeded with no help, 2 required some assistance Times (no pressure): T(IT) = :37:30 ± 0:11:38 T(IT+CS) = 0:43:26 ± 0:08:49 T(CS) = :06:27 ± 0:13:44 Conclusion: almost everybody can program with GIML language

51 Usability (UX) testing of GIMLJacek Matulewski – The developement of Gaze Interaction Markup Language Usability (UX) testing of GIML Conclusions from individual tasks performance: visual editor is not required text/code editor would be helpful, esp. with elements’ names and attributes complementing preview of edited scene ignoring case sensitivity Sex problem: IT: 2 female and 9 males (18%), 10% in whole population CS: 1 male and 6 females (14%), 27% in whole population GCAG and GIML are free to use in any science experiment! Download from Running application requires free licence

52 Plany dalszego rozwoju GIML/GCAFDodanie DOM (ang. document object model) – obiektowy model dokumentu - możliwość edycji zawartości scen w trakcie działania aplikacji GIML Klawiatura z sugerowaniem słów Losowanie bodźców Edytor kodu GIML z sugerowaniem słów kluczowych

53 Do pobrania / do przeczytaniaStrona Spakowane programy platformy GCAF Lista znaczników GIML + ściąga Opis GIML (podstawy) Artykuł wprowadzający do GIML: Rafał Linowiecki, Jacek Matulewski, Bibianna Bałaj, Agnieszka Ignaczewska, Joanna Dreszer, Magdalena Kmiecik, Włodzisław Duch GCAF. Platforma tworzenia aplikacji kontrolowanych wzrokiem – nowy sposób przygotowywania w pełni interaktywnych eksperymentów z użyciem okulografu Lingwistyka Stosowana / Applied Linguistics / Angewandte Linguistik 20/2017, p