Interakcija Človek-Računalnik Slides - University of Maribor PDF

Interakcija človek-računalnik Splošno o predmetu Niko Lukač Kontakt Predavanje: izr. prof. dr. Niko Lukač [email protected] Vaje: asist. Mitja Žalik [email protected] Vso učno gradivo, obvestila in vaje so na Eštudiju (https://estud...

Interakcija človek-računalnik Splošno o predmetu Niko Lukač Kontakt Predavanje: izr. prof. dr. Niko Lukač [email protected] Vaje: asist. Mitja Žalik [email protected] Vso učno gradivo, obvestila in vaje so na Eštudiju (https://estudij.um.si) Govorilne ure: https://aips.um.si/GovorilneUre.aspx Obisk govorilnih ur predhodno najavite preko e-maila. 2 Končna ocena Študent mora opraviti vsaj 50 % obveznosti pri laboratorijskih vajah, če želi pristopiti k pisnemu izpitu oz. uveljaviti oceno iz kolokvijev. Pisni del izpita se opravi, če iz obeh kolokvijev dosežete 50% teoretičnega dela. Pri tem pa mora biti pri vsakem kolokviju doseženih vsaj 35%. Za pozitivno oceno je treba zbrati skupaj vsaj 50 %. Pravilnik Inštituta za računalništvo: https://cs.feri.um.si/site/assets/files/1037/ocenjevanje_pri_predmetih_in_projektih-2018-2019.pdf 1. kolokvij: 25% 2. kolokvij : 25% Vaje: 50% 3 Angl.: Human-computer interaction (HCI) HCI je področje, ki zajema vse uporabniške vmesnike (angl. user interfaces), njihovo zasnovo, testiranje in implementacijo, s strani vseh ostalih povezanih znansvenih ved. “ Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them. ” - ACM SIGCHI Curricula for Human-Computer Interaction Prva pojavitev HCI (1986) 4 Vsebina predavanj Uporabniški Spoznavanje uporabnika in testiranje uporabnosti vmesniki Govorni Vizualni Haptični Kibernetski vmesniki vmesniki vmesniki vmesniki 2D vmesniki 3D vmesniki 2D GUI 2D vizualizacija 3D vizualizacija Navidezna Obogatena resničnost resničnost 5 Učno gradivo Prosojnice s predavanj + 6 Interakcija človek-računalnik Uvod v (G)UI Niko Lukač Grafični uporabniški vmesniki – kratka zgodovina Angl. Graphical User Interface (GUI) Prvotni grafični vmesniki: konzolne aplikacije (MS DOS, UNIX BASH) Prvi funkcionalen WIMP GUI: Xerox PARC, 1973, kasneje se ohrani podobni pristop – WIMP = "window, icon, menu and pointing device" Vir slik: Wikihow 8 Dogodki GUI temelji na ti. dogodkih (event-driven) za komunikacijo z V/I napravami, sistemskimi klici in procesi Dogodkovna paradigma: vrstni red ni pomemben, avtomatska sprožitev akcij ob sistemskem klicu, asinhrono delovanje V nasprotju s proceduralno paradigmo, zakaj zaželjena asinhronost? Primeri dogodkov: – V/I: klik miške, pritisk tipke, touchscreen dogodki… – OS namizje: minimizacija okna, zaprtje okna, premakni okno,… – OS klici & gonilniki: ob izrisu okna, ob spremembi pravic (do pomnilnika, datotečnega sis. itd),… – OS LAN & WAN: ob prejetju/pošiljanju paketka, ob vzpostavitvi povezave 9 Dogodkovni cikel (Win32) Win32 je knjižnica v C-ju za dostop do sistemskih klicev in gradnjo okenskih aplikacij na sistemih Windows (od Win95 dalje). – Od Windows 8 naprej znan kot Windows API (64-bitna), poleg razvita knjižnica WinRT (C++), ki podpira tudi ostale programske jezike Vsaka namizna Windows GUI aplikacija ima vgrajen dani cikel dogodkov (angl. Event loop) v vhodni funkciji programa (main entry point) Win32 klasificira dogodke na podlagi ti. sporočil (messages) C definicije sporočil: #define WM_INITDIALOG 0x0110 #define WM_COMMAND 0x0111 #define WM_LBUTTONDOWN 0x0201 Imamo več kot tisoč sporočil https://wiki.winehq.org/List_Of_Windows_Messages 10 Dogodkovni cikel (Win32) Vsako sporočilo vsebuje 2 parametra (wParam in lParam, oba 32-bitna) Pošiljanje sporočil je možno s PostMessage() ali SendMessage() – PostMessage() pošlje sporočilo v cikel dogodkov in vrne takoj rezultat (asinhrono delovanje) – SendMessage() vrne rezultat ob procesiranju v ciklu dogodkov Npr.: zapiranje okna -> PostMessage(hwnd, WM_CLOSE, 0, 0); – Oba parametra imata vrednost 0 (ju ne potrebujemo pri zapiranju) 11 Dogodkovni cikel (Win32) V ciklu dogodkov se sporočila procesirajo zaporedno (sinhrono) Naivni primer: izpis stavka v beležki – 1. Se sproži V/I sporočilo za vnos na tipkovnici, gonilnik posreduje podatke o vtipkanih črkah v pomnilnik – 2. Se sproži sporočilo (WM_PAINT) za izris črk iz pomnilnika Običajno se WM_PAINT sproži na koncu dogodkovnega cikla po vseh ostalih dogodkih, zakaj? 12 Dogodkovni cikel (Win32) Možna hierarhija različnih oken (npr. dialogi, ti. okvirji) Vsako okno je objekt razreda hwnd – handle to a window 13 Dogodkovni cikel (Win32) Tipična implementacija glavnega Win32 dogodkovnega cikla (v C): while(GetMessage(&Msg, NULL, 0, 0) > 0) { TranslateMessage(&Msg); DispatchMessage(&Msg); } GetMessage pridobi naslednjo sporočilo iz vrste (queue) s strani OS DispatchMessage pošlje sporočilo do povratne funkcije ustreznega okna, ki prestreže dogodke Kdaj se zaključi ? Vir slike: http://www.directxtutorial.com/Lesson.aspx?lessonid=9-1-3 14 Dogodkovni cikel (Win32) Primer kreiranja Win32 okna dialoga #include ….. WNDCLASS wc; // window class structure DWORD dwExStyle; // window extended style DWORD dwStyle; // window style RECT WindowRect; // window rectangle WindowRect.left=0; // rectangle left=0 WindowRect.right=win_width; // rectangle right=win_width WindowRect.top=0; // rectangle top=0 Osnovne lastnosti okna WindowRect.bottom=win_height; // rectangle bottom=win_height preko WNDCLASS hInstance=GetModuleHandle(NULL); wc.style=CS_HREDRAW | CS_VREDRAW | CS_OWNDC; wc.lpfnWndProc=this->WndProc; // wndProc povratna funkcija za prestrezanje dogodkov wc.hInstance=hInstance; // set the instance wc.hIcon=LoadIcon(NULL, IDI_WINLOGO); // load the default icon wc.hCursor=LoadCursor(NULL, IDC_ARROW); // load the arrow pointer Vir slike: http://www.directxtutorial.com/Lesson.aspx?lessonid=9-1-3 wc.lpszClassName=(LPCTSTR)"Window"; // set the class name 15 Dogodkovni cikel (Win32) Primer kreiranja Win32 okna dialoga (nadaljevanje…): Več možnih stilov okna https://docs.microsoft.com/en-us/windows/win32/winmsg/window-styles …. hwnd=CreateWindowEx(dwExStyle, // razširjen stil okna “Window", // class name “Window", // window title dwStyle | // defined window style WS_CLIPSIBLINGS | / required window style WS_CLIPCHILDREN, // required window style 0, 0, // window position WindowRect.right-WindowRect.left, // calculate window width WindowRect.bottom-WindowRect.top, // calculate window height NULL, // no parent window NULL, // no menu hInstance, // instance NULL); 16 Dogodkovni cikel (Win32) Primer prestrezanja sporočil s funkcijo povratnega klica (callback). Časovna zahtevnost switch Stavka? LRESULT CALLBACK WndProc(HWND hWnd, // handle for this window UINT uMsg, // message for this window WPARAM wParam, // additional message information LPARAM lParam) { // additional message information switch(uMsg) { // check for windows messages case WM_SYSCOMMAND: { // intercept system commands switch(wParam) { // check system calls case SC_SCREENSAVE: // screensaver trying to start? case SC_MONITORPOWER: // monitor trying to enter powersave? break; } } case WM_MOUSEMOVE: { unsigned short xPos = GET_X_LPARAM(lParam); unsigned short yPos = GET_Y_LPARAM(lParam); return(0); } … } 17 } Dogodkovni cikel (Linux) Xorg sistem oken podpira več protokolov za izris/kreiranje okenske aplikacije – Na primer: Xlib in GLX (OpenGL Extension to the X Window System) Dogodkovni cikel zelo podoben kot pri Win32 while(XPending(GLWin.dpy)>0) { // handle the events in the queue XNextEvent(GLWin.dpy, &event); switch(event.type) { case MotionNotify: { std::cout