Demo Discussion
Forum Config Examples Contributions Vulnerabilities
  Contributions to ELOG  Not logged in ELOG logo
Entry   Custom input forms implementation, posted by Stefan Ritt on Fri Sep 17 06:19:39 2010 6x
    Reply   Re: Custom input forms implementation, posted by TimS on Tue Jul 8 15:43:21 2014 
    Reply   Re: Re: Custom input forms implementation, posted by Hanno Perrey on Wed May 11 09:35:23 2016 shiftcheck.html
    Reply   Re: Custom input forms implementation, posted by John on Sat Jun 15 06:13:07 2019 
Message ID: 39     Entry time: Fri Sep 17 06:19:39 2010     Reply to this: 44   49   149
Author: Stefan Ritt 
Author Email: stefan.ritt@psi.ch 
Category: Script 
Subject: Custom input forms implementation 
Status: Stable 
Last Revision: Thu Jul 2 20:55:55 2015 by Stefan Ritt 

Dear ELOG users,

starting with SVN revision 2328, custom input forms are implemented. This allows application specific formats for check lists etc. In our specific case we had to implement a shift check list, which was quite long. Furthermore the check list should be optimized for an iPad, which we take in the field and record various checks and readings (in our case some gas pressure gauges at the PSI particle accelerator). Since the standard ELOG interface was too inflexible, a completely hand-written form was needed. The form can be activated by the new configuration options Custom New Form, Custom Edit Form and Custom Display Form, one for a new entry, an entry to edit and and entry to display. In our case we used the same form for all three cases. This is how the shift check list looks under the Safari Browser on a PC:

Capture.png

And here is how it looks on the iPad:

IMAG0036.jpg

Each section can be collapsed and expanded (blue arrows at the left), and various internal checks are made before the check list can be submitted.

Implementing such forms is however more something for the advanced user, since you have to hand-write HTML with CSS and JavaScript code. It can then however be a powerful method for check lists. Please find in the attachments the elogd.cfg configuration for that logbook and the shiftcheck.html source code file. It is a bit complicated since the page is a static page, elogd just serves it from the file. This requires all the dynamic functions to be implemented inside the HTML file with JavaScript. To display an entry for example, the JavaScript loads the raw data with the "?cmd=Download" command and the populates the form fields. The collapsing and expanding is done by using CSS properties. The integrated style sheet was optimized for the rendering on an iPad. Rather large fonts were chosen so that the items can be checked easily with your finger tips. Various parameters are sent between the browser and the elogd program via hidden fields and cookies. So only something for experts! But if you go through the effort and hand-write the form, it can be very handy. Note that you have to upgrade to SVN revision 2328 for the three new options.

 

Attachment 2: elogd.cfg  698 Bytes  | Hide | Hide all
[global]
Port = 8080
Password file = passwd

[ShiftCheck]
Comment = Shift Check List

Attributes = Author, D, M, Y, Shift, a1, a2, a3, a4, a5, h1, h2, h3, h4, h5, c1, c2, c3, c4, c5, c6, c7, bb1, cr1, cr2, cr3, cr4, cr5, cr6, cr7, cr8, cr9, cr10, cr11, cr12, cr13, cr14, cr15, cr16, cr17, cr18, cr19, cr20, cr21, cr22, cr23, cr24, cr25, cr26, sw1, sw2, sw3, sw4, sw5
Quick filter = Shift, Author
Options Shift = Morning, Evening, Night

Enable attachments = 0
Show text = 0
Custom new form = /home/meg/meg/online/elog/shiftcheck.html
Custom edit form = /home/meg/meg/online/elog/shiftcheck.html
Custom display form = /home/meg/meg/online/elog/shiftcheck.html
List after submit = 1
Attachment 4: shiftcheck.html  35 kB  Uploaded Tue Mar 19 13:17:56 2013
Attachment 5: sc_up.png  1 kB  Uploaded Thu Jul 2 21:54:50 2015  | Hide | Hide all
sc_up.png
Attachment 6: sc_down.png  1 kB  Uploaded Thu Jul 2 21:55:34 2015  | Hide | Hide all
sc_down.png
ELOG V3.1.5-fe60aaf