Human Computer Interaction » History » Version 5
Version 4 (Aleksander Bešir, 15.12.2010 14:34) → Version 5/16 (Aleksander Bešir, 17.12.2010 12:05)
h1. Human Computer Interaction Machine Interface
{{toc}}
h2. 1 Basic concept
h3. 1.1 Hardware
p. The HCI HMI 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.
p=. !HMI_website_overall.png!
p. The intended server-side html generating aplication is Tomcat's Jasper, making JSP the intended website programming language.
h3. 1.2 Functions specifications
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.
p. The planned website functions are:
p=. !HMI_website_functions.png!
_Functions marked with (?) need to be discussed._
h3. 1.3 Development steps
# Installing and configuring Apache Tomcat on a computer
# Building custom framework for the HCI HMI website
# Using the framework to build and design the website
# Connecting the website's functions with logic's functions
h2. 2 Installing and configuring Apache Tomcat on a computer
h3. 2.1 Java and Tomcat setup
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 HMI web application. During development of the HCI HMI web application, this was used:
| _Requirement_ | _Used version_ |
| Server machine architecture | Virtual x86 |
| Operating System | Ubuntu Server 10.10 |
| Java development kit | openJDK-6-jdk |
| Servlet container and http server | Apache Tomcat 6.0.29 |
In order to use Eneraptor's HCI, HMI, you will need software mentioned above. If you need some help installing Java and Tomcat, check:
[[Installing Java and Tomcat]]
After the installation, these files need to be configured:
* conf/tomcat-users.xml
h2. 3 Web application architecture (from user's point of view)
The HCI HMI 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 HMI is:
!Eneraptor_GUI.png!
The functions and data on the image above are just dummies (for now). The image shows the basic application's levels:
| _Level_ | _Level name_ | _Component name_ | _Description_ |
| 1 | Sections | Section | The top and main menu (eg. Status, Log, Statistics, ...) |
| 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, ...) |
| 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 |
| 4 | SubTopics | SubTopic | A SubTopic is a group of Tools that are dependent on each other. |
| 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 |
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.
!Level_hierarchy.png!
h2. References
# Chopra, Vivek, et al., _Professional Apache Tomcat 6_, Wrox - Wiley, 2007
# Basham, Bryan, et al., _Head First Servlets and JSP™_, O’Reilly, 2008
h2. Attachments
{{toc}}
h2. 1 Basic concept
h3. 1.1 Hardware
p. The HCI HMI 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.
p=. !HMI_website_overall.png!
p. The intended server-side html generating aplication is Tomcat's Jasper, making JSP the intended website programming language.
h3. 1.2 Functions specifications
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.
p. The planned website functions are:
p=. !HMI_website_functions.png!
_Functions marked with (?) need to be discussed._
h3. 1.3 Development steps
# Installing and configuring Apache Tomcat on a computer
# Building custom framework for the HCI HMI website
# Using the framework to build and design the website
# Connecting the website's functions with logic's functions
h2. 2 Installing and configuring Apache Tomcat on a computer
h3. 2.1 Java and Tomcat setup
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 HMI web application. During development of the HCI HMI web application, this was used:
| _Requirement_ | _Used version_ |
| Server machine architecture | Virtual x86 |
| Operating System | Ubuntu Server 10.10 |
| Java development kit | openJDK-6-jdk |
| Servlet container and http server | Apache Tomcat 6.0.29 |
In order to use Eneraptor's HCI, HMI, you will need software mentioned above. If you need some help installing Java and Tomcat, check:
[[Installing Java and Tomcat]]
After the installation, these files need to be configured:
* conf/tomcat-users.xml
h2. 3 Web application architecture (from user's point of view)
The HCI HMI 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 HMI is:
!Eneraptor_GUI.png!
The functions and data on the image above are just dummies (for now). The image shows the basic application's levels:
| _Level_ | _Level name_ | _Component name_ | _Description_ |
| 1 | Sections | Section | The top and main menu (eg. Status, Log, Statistics, ...) |
| 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, ...) |
| 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 |
| 4 | SubTopics | SubTopic | A SubTopic is a group of Tools that are dependent on each other. |
| 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 |
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.
!Level_hierarchy.png!
h2. References
# Chopra, Vivek, et al., _Professional Apache Tomcat 6_, Wrox - Wiley, 2007
# Basham, Bryan, et al., _Head First Servlets and JSP™_, O’Reilly, 2008
h2. Attachments