Skip to content

WIP: Webform #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jakirkham wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

WIP: Webform #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
378b401
Disable Jekyll.
jakirkham Jul 28, 2016
33ab265
Create a webpage to fill out the config file and download as JSON.
jakirkham Jul 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .nojekyll
View file
Open in desktop
Empty file.
26 changes: 26 additions & 0 deletions css/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
form {
width: 80%;
margin: 0 auto;
}
label,
input[type="text"] {
display: inline-block;
}
h2 {
width: 30%;
text-align: right;
}
label {
width: 30%;
text-align: right;
}
label + input[type="text"] {
width: 30%;
margin: 0 30% 0 4%;
}
label + .buttons {
width: 30%;
display: inline-block;
text-align: right;
margin: 0 30% 0 4%;
}
120 changes: 120 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<html>

<head>
<title>Lab Data Config Form</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" type="text/css" href="css/form.css">
<!-- Include JS File Here -->
<script src="js/submit.js"></script>
</head>

<body>
<div class="container">
<div class="main">
<form action="#" method="post" name="form_name" id="form_id" class="form_class">
<h2>Lab Data Config Form</h2>
<label>Rig Name :
<input type="text" name="Rig_Name" id="Rig_Name" placeholder="Rig Name" />
</label>
<br>
<label>User :
<input type="text" name="User" id="User" placeholder="User" />
</label>
<br>
<label>Proj Code :
<input type="text" name="Proj_Code" id="Proj_Code" placeholder="Proj Code" />
</label>
<br>
<label>Rec Sys :
<input type="text" name="Rec_Sys" id="Rec_Sys" placeholder="Rec Sys" />
</label>
<br>
<label>Behav Code Ver :
<input type="text" name="Behav_Code_Ver" id="Behav_Code_Ver" placeholder="Behav Code Ver" />
</label>
<br>
<label>NS Path :
<input type="text" name="NS_Path" id="NS_Path" placeholder="NS Path" />
</label>
<br>
<label>Behav Path :
<input type="text" name="Behav_Path" id="Behav_Path" placeholder="Behav Path" />
</label>
<br>
<label>Jpos X Ch :
<input type="number" step=1 value=0 name="Jpos_X_Ch" id="Jpos_X_Ch" placeholder="Jpos X Ch" />
</label>
<br>
<label>Jpos Y Ch :
<input type="number" step=1 value=0 name="Jpos_Y_Ch" id="Jpos_Y_Ch" placeholder="Jpos Y Ch" />
</label>
<br>
<label>Mpos X Ch :
<input type="number" step=1 value=0 name="Mpos_X_Ch" id="Mpos_X_Ch" placeholder="Mpos X Ch" />
</label>
<br>
<label>Mpos Y Ch :
<input type="number" step=1 value=0 name="Mpos_Y_Ch" id="Mpos_Y_Ch" placeholder="Mpos Y Ch" />
</label>
<br>
<label>Lick Ch :
<input type="number" step=1 value=0 name="Lick_Ch" id="Lick_Ch" placeholder="Lick Ch" />
</label>
<br>
<label>Rew Ch :
<input type="number" step=1 value=0 name="Rew_Ch" id="Rew_Ch" placeholder="Rew Ch" />
</label>
<br>
<label>Trial Start Ch :
<input type="number" step=1 value=0 name="Trial_Start_Ch" id="Trial_Start_Ch" placeholder="Trial Start Ch" />
</label>
<br>
<label>Trial Event Ch :
<input type="number" step=1 value=0 name="Trial_Event_Ch" id="Trial_Event_Ch" placeholder="Trial Event Ch" />
</label>
<br>
<label>Stim1 :
<input type="text" name="Stim1" id="Stim1" placeholder="Stim1" />
</label>
<br>
<label>Stim2 :
<input type="text" name="Stim2" id="Stim2" placeholder="Stim2" />
</label>
<br>
<label>Trial Start :
<input type="number" step="any" value=0 name="Trial_Start" id="Trial_Start" placeholder="Trial Start" />
</label>
<br>
<label>Operant Event1 :
<input type="number" step="any" value=0 name="Operant_Event1" id="Operant_Event1" placeholder="Operant_Event1" />
</label>
<br>
<label>Operant Event2 :
<input type="number" step="any" value=0 name="Operant_Event2" id="Operant_Event2" placeholder="Operant_Event2" />
</label>
<br>
<label>Water Port :
<input type="number" step="any" value=0 name="Water_Port" id="Water_Port" placeholder="Water_Port" />
</label>
<br>
<label>Laser Power :
<input type="number" step="any" value=0 name="LaserPower" id="LaserPower" placeholder="LaserPower" />
Copy link
Member Author

@jakirkham jakirkham Jul 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should specify this is milliwatts.

</label>
Copy link
Member Author

@jakirkham jakirkham Jul 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be handy to have a notes section for miscellaneous info about how the recording is done.

<br>
<br>
<label>Filename to Save As:
<input id="inputFileNameToSaveAs" value="config.json"></input>
</label>
<br>
<label>
<div class="buttons">
<input type="reset" value="Reset">
<input type="submit" value="Save" onclick="submit_form()">
</div>
</label>
</form>
</div>
</div>
</body>

</html>
58 changes: 58 additions & 0 deletions js/submit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// Submit form.
function submit_form()
{
var data_elements = document.querySelectorAll("#form_id input[type=text], input[type=number]");
var data_obj = {};
for (var i = 0; i < data_elements.length; i++)
{
value = data_elements[i].value;
if (data_elements[i].type == "number")
{
if (data_elements[i].step == "1")
{
value = parseInt(value);
}
else
{
value = parseFloat(value);
}
}
data_obj[data_elements[i].name] = value;
}
if (validate_data(data_obj)) // Calling validation function
{
var textToSave = JSON.stringify(data_obj, null, 4);
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);

downloadLink.click();
}
}

function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}

// Data validation function.
function validate_data(a_data_obj)
{
for (var key in a_data_obj.length)
{
if (a_data_obj[key] === '')
{
alert("Please fill all fields...!!!!!!");
}
}

return true;
}