Human Computer Interaction » History » Version 5
Aleksander Bešir, 17.12.2010 12:05
| 1 | 5 | Aleksander Bešir | h1. Human Computer Interaction |
|---|---|---|---|
| 2 | 1 | Aleksander Bešir | |
| 3 | {{toc}} |
||
| 4 | |||
| 5 | h2. 1 Basic concept |
||
| 6 | |||
| 7 | h3. 1.1 Hardware |
||
| 8 | |||
| 9 | 5 | Aleksander Bešir | p. The HCI will will be realised as a website. It will run on an Apache Tomcat http server, which will not run on the same device as Eneraptor's logic. Instead it will run on an independent proxy server. |
| 10 | 1 | Aleksander Bešir | |
| 11 | p=. !HMI_website_overall.png! |
||
| 12 | |||
| 13 | p. The intended server-side html generating aplication is Tomcat's Jasper, making JSP the intended website programming language. |
||
| 14 | |||
| 15 | h3. 1.2 Functions specifications |
||
| 16 | |||
| 17 | p. The actual website functions depend on what functions do the _logic_ and _archive and statistics_ modules offer. The website will require some authentication for users to access it. Two permission types are planned - _admin_ and _viewer_. Users with viewer permission will be able to review certain information, but will not be able to execute any commands that would change how the _logic_ and _archive and statistics_ modules work. |
||
| 18 | |||
| 19 | p. The planned website functions are: |
||
| 20 | |||
| 21 | p=. !HMI_website_functions.png! |
||
| 22 | |||
| 23 | _Functions marked with (?) need to be discussed._ |
||
| 24 | |||
| 25 | h3. 1.3 Development steps |
||
| 26 | |||
| 27 | # Installing and configuring Apache Tomcat on a computer |
||
| 28 | 5 | Aleksander Bešir | # Building custom framework for the HCI website |
| 29 | 1 | Aleksander Bešir | # Using the framework to build and design the website |
| 30 | # Connecting the website's functions with logic's functions |
||
| 31 | |||
| 32 | h2. 2 Installing and configuring Apache Tomcat on a computer |
||
| 33 | |||
| 34 | h3. 2.1 Java and Tomcat setup |
||
| 35 | |||
| 36 | 5 | Aleksander Bešir | In this step we need to set up a computer, that we will use as our proxy server, which will run the Eneraptor's HCI web application. During development of the HCI web application, this was used: |
| 37 | 1 | Aleksander Bešir | |
| 38 | | _Requirement_ | _Used version_ | |
||
| 39 | | Server machine architecture | Virtual x86 | |
||
| 40 | | Operating System | Ubuntu Server 10.10 | |
||
| 41 | | Java development kit | openJDK-6-jdk | |
||
| 42 | | Servlet container and http server | Apache Tomcat 6.0.29 | |
||
| 43 | |||
| 44 | 5 | Aleksander Bešir | In order to use Eneraptor's HCI, you will need software mentioned above. If you need some help installing Java and Tomcat, check: |
| 45 | 1 | Aleksander Bešir | [[Installing Java and Tomcat]] |
| 46 | |||
| 47 | After the installation, these files need to be configured: |
||
| 48 | * conf/tomcat-users.xml |
||
| 49 | |||
| 50 | h2. 3 Web application architecture (from user's point of view) |
||
| 51 | |||
| 52 | 5 | Aleksander Bešir | The HCI web application will look and feel much like well known Cisco Linksys home router's administration web page(attachment:Linksys_admin_page.jpg). The conceptual look of the HCI is: |
| 53 | 1 | Aleksander Bešir | |
| 54 | !Eneraptor_GUI.png! |
||
| 55 | |||
| 56 | The functions and data on the image above are just dummies (for now). The image shows the basic application's levels: |
||
| 57 | |||
| 58 | | _Level_ | _Level name_ | _Component name_ | _Description_ | |
||
| 59 | | 1 | Sections | Section | The top and main menu (eg. Status, Log, Statistics, ...) | |
||
| 60 | | 2 | SubSections | SubSection | Every level 1 Section has it's own level 2 menu (eg. level 1 Setup has level 2 Subsections like Basic Setup, Security, ...) | |
||
| 61 | | 3 | Topics | Topic | Every level 2 SubSection is divided by different number of Topics (represented by black-boxed text in the left part of the image above) A Topic is a group of SubTopics | |
||
| 62 | | 4 | SubTopics | SubTopic | A SubTopic is a group of Tools that are dependent on each other. | |
||
| 63 | | 5 | Tools | Tool | Every Tool is either a text fiels, button, input box, radio button, graph, etc. It represents a single control or view object which is highly dependent on othre Tools in the same SubTopic | |
||
| 64 | |||
| 65 | To get the better feeling how the web application is structured, observe the example image above and the tree structure shown below. The tree structure shows, how a user has to navigate, in order to turn the Logic Unit's power on. |
||
| 66 | |||
| 67 | !Level_hierarchy.png! |
||
| 68 | |||
| 69 | h2. References |
||
| 70 | |||
| 71 | # Chopra, Vivek, et al., _Professional Apache Tomcat 6_, Wrox - Wiley, 2007 |
||
| 72 | # Basham, Bryan, et al., _Head First Servlets and JSP™_, O’Reilly, 2008 |
||
| 73 | |||
| 74 | h2. Attachments |