Date Issued: Subject: Editing the HTML files in the C-more panel. Revision: Original

Size: px

Start display at page:

Download "Date Issued: Subject: Editing the HTML files in the C-more panel. Revision: Original"

Elaine Merritt
6 years ago
Views:

APPLICATION NOTE THIS INFORMATION PROVIDED BY AUTOMATIONDIRECT.COM TECHNICAL SUPPORT These documents are provided by our technical support department to assist others.

1 APPLICATION NOTE THIS INFORMATION PROVIDED BY AUTOMATIONDIRECT.COM TECHNICAL SUPPORT These documents are provided by our technical support department to assist others. We do not guarantee that the data is suitable for your particular application, nor do we assume any responsibility for them in Product Family: C-more Subject: Editing the HTML files in the C-more panel Number: AN-EA-012 Date Issued: Revision: Original Editing the HTML files in the C-more Panel In order to edit he HTML files in the C-more panel, the files must be copied from the panel to a local drive and edited with a Text Editor application like Notepad. The files in the C-more Panel are accessed via FTP. In order to do this: 1) Create a project with FTP Service enabled the Touch Panel Network Dialog of the C- more Programming Software. 2) Download the Project to the C-more panel. 3) In an FTP Client such as Windows Explorer or Filezilla, enter the IP address of the C-more Panel.

2 4) Navigate to the Built-in_Flash/root folder as shown below. Page 2 of 10

3 5) Copy the files you wish to edit and paste them on a local PC drive. Page 3 of 10

4 Adding more files to the File List page 1) Access the C-more panel via FTP and copy the filelist.html file to your local drive and open using a text editor such as Notepad. 2) The File List is an HTML Table. To add more Files to the list (table) add more Table Row () commands to the Table as shown below Page 4 of 10

5 <TABLE border="0" align='center' valign='middle'> <TD align='center'> <P align="center"><img src="images/logo.jpg" BORDER=4></P> </TD> <TD align='center'> <FORM action="index.html"> <INPUT TYPE=SUBMIT VALUE="HOME"></INPUT> </FORM> </TD> <TD align="center">%file%</td> <TD align="center">%file%</td> <TD align="center">%file%</td> </TABLE> Copy and paste these 3 lines for each additional file you want to display in your file list. Page 5 of 10

6 3) After making changes to the file, save it and copy and paste it back to Built-in_Flash/root folder in the C-more Panel. Page 6 of 10

7 Add more screens to the Screen Display page 1) Access the C-more panel via FTP and copy the screendisplay.html file to your local drive and open using a text editor such as Notepad. Page 7 of 10

8 2) The Screen List is an dynamic HTML Table. To display more Screens in the list (table) adjust the screencount variable as shown below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>C-more -- the best HMI presented by AutomationDirect</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="default.css"> </HEAD> <BODY> <TABLE border="0" align='center' valign='middle'> <TD align='center'> <P align="center"> <IMG src="images/logo.jpg" BORDER=4></P> </TD> <TD align='center'> <FORM action="index.html"> <INPUT TYPE=Submit VALUE="HOME"></INPUT> </FORM> </TD> <SCRIPT language="javascript"> screencount = 10 document.write(''); document.write('<td>'); Change the screencount variable to the number of screens you want listed. // 4) After making changes to the file, save it and copy and paste it back to Built-in_Flash/root folder in the C-more Panel. Page 8 of 10

9 Page 9 of 10

10 Technical Assistance: If you have questions regarding this Application Note, please contact us at for further assistance. Page 10 of 10

A340 Laboratory Session #5

A340 Laboratory Session #5 LAB GOALS Creating multiplication table using JavaScript Creating Random numbers using the Math object Using your text editor (Notepad++ / TextWrangler) create a web page similar