Tuesday 2 December 2014

HTML5 CSS Javascript

The browser in becoming increasingly important in computing. 

This seems to be inline with the rise of cloud based computing and storage. The fracturing of the smartphone market has also made HTML5 apps more attractive for phone application developers. As HTML5 apps can be be run in any modern browser and smartphones run those browsers, HTML5 apps are automatically supported on any smartphone OS.

Last year I played with the Bitalino board and was surprised by how responsive their HTML5 based application was with the Bitalino connected by Bluetooth. It looked good and the non-blocking nature of Javascript made the interface very responsive. Python in the back end to do the serial communication and hardware interfacing made for a slick and reliable experience.

With the arrival of the OpenBCI headset imminent, I'd like to know more about the possibilities of coding in the browser.

When I came to the conclusion that programming was a necessary part of neuroscience, I started looking for the perfect language. One that would do all the things I needed so I wouldn't waste time learning inferior languages. After a lot of reading and a little experience, I understand why more experienced programmers don't spend a lot of time answering that question. There is no one best language, they all have their tradeoffs.

Except for Matlab..... Matlab is just bad. ;-)

You will probably end up learning a few languages.

Please excuse my explanations of Javascript, I'm not experienced with it and my knowledge is growing all the time. I'll reread this in a few months and see if I can make it clearer and fix up any mistakes.

Javascript has emerged as the Queen of the browser, it has nothing to do with JAVA despite the name, and is probably the most widely used languages due to this. It is an event driven, asynchronous (or non-blocking) language, meaning that unlike other languages where each instruction is performed in turn in a single thread, Javascript has a system of requests and callbacks that allow other work to be done while waiting for a requested resource (typically disk or network resources).

When I want to learn a programming language, I look around for articles on the nature of the language. Not tutorials but discussions about what it looks, feels and smells like. I try to get a feel for the personality of the language so I have some framework to piece together the information I will acquire. Next I do some online tutorials involving guided coding in a browser. Something like codeacademy. or Didacto

UPDATE 1
I have been doing a lot of reading and video watching about web frameworks. One web page and video that really open my eyes up is Pixel Monkeys piece on lightweight web frameworks. In it Andrew Montalenti talks about the connection between HTML CSS Javascript and light web frameworks like Flask. Flask is a Python framework that does templating and handles connections. Along with these tools, integration with databases and a lot of nifty editors like Emmet are mentioned.

But first a little HTML. Why? Because we want to use Javascript in the browser, and HTML is the markup language that makes a place for the Javacript to live and display it's results.

This material is taken from the codeacademy site.

the basic syntax of HTML is

< something >  ....... < something />

With the somethings (tags) defining what goes between these markers (thus the term - markup language).

It can be headers (h1 - h6)

<h2> This is a heading </ h2>

Or what we're interested in, a javascript file

<script src="js/all.min.js"></script>
 
 
 
<p> Text can go between paragraph tags </p> 
 
In the opening tag we can also state some attributes. 
In the next line, the 'a' tag denotes links and 
the 'href' is an attribute.
In this case it is a web address and notice it is in quotation marks. 
The text between the tags 'links' will be what the user sees and clicks on.

<a href='http://www.codecademy.com'> links </a>
 
images are also bracketed by tags and look a lot like the javascript markup.
Images have an attribute 'source' which gives the path to an image file. 
 
 
<img source="picture.png"></img>
 
 

CSS

The styling of the different elements of the html page are defined by the CSS file.

h1{
color:red;

The 'h1' part is a selector, the 'color' part is a property and the 'red' is it's value. A property:value pair is called a CSS rule.
 
 


 
 

Using LaTeX

To get started with LaTeX you first need to install it. Then an IDE is a good idea. It is possible to write raw tex but there are several great packages that make the task a lot easier. I'm going to use texmaker on the mac and this program works on Apple, Microsoft and Linux operating systems. It is also free and open source, of course.

To start a LaTeX document with texmaker, we can use the 'Quick Start' wizard and put in author and title as well as choose some other options. These chosen options end up in the preamble of the created tex document. As most of my writting involves referencing, I usually start up a bibtex file at the same time. The \use package{natbib} goes in the preamble and \bibliographystyle{humannat} goes before the \bibliography{path_to_bib}, which goes at the end before \end{document}


\documentclass[12pt,a4paper]{article}
\usepackage{natbib}


\author{Alistair Walsh}
\title{Neurofeedback Non-Learners and Brain Computer Interface Illiteracy. 
Epidemiology, identifying features and differentiation.}

\begin{document}
 
\maketitle
 
\begin{abstract}

Not everyone who is provided training in neurofeedback can learn cortical control 
nor that tries to operate a brain computer interface is able to. 
This inability is refered to in NFB as NFB non-learning and in BCI as BCI-illiteracy. 
Very little has been written on this area yet it affects an estimated 30\% to 50\
of participants. It has been suggested that various attributes can be used to identify 
NFB-nonlearning and BCI-illiteracy. These include  high hand dexterity, 
external locus of control, high hypnotisability, high disassociative index, 
and strong reward response. Discovering the  reason for some not learning 
cortical control would be of benefit to those receiving treatment and would 
inform the field on the mechanism behind cortical control. It would also possibly 
improve the techniques of teaching it.
 
\end{abstract}

\section{Introduction}


\citet{Grubler:2014aa} in a paper involving both patients and 
clinicians, the possible ethical concerns were raised.

\citet{Suk:2014aa} estimated the incidence of BCI-illiteracy at around 20\%

\citet{Ahn:2013aa} in a large study of 52 people, suggested that high theta and 
low alpha might predict BCI-I


\bibliographystyle{humannat}
\bibliography{/Users/Wintermute/Dropbox/research_2015/
litreview_BCI-illiteracy/BCI-illiteracy}

\end{document}
 
Results in the following Document