User Interface Guidelines

App User Interface

Most apps will provide a web user interface. The app has to provide its own HTTP server on the WEB_UI port.

It’s up to the developper to implement their own UI. However, NASOS provides some CSS elements, which help providing the same look and feel as the NASOS Webboard.

To use it, simply include the css/js files with the following URLs:

Here is an example HTML header:

<head>
    <meta http-equiv="content-type" content= "text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href= "/3rdparty/3rdparty.css">
    <script type="text/javascript" src="/3rdparty/3rdparty.js"></script>
</head>

User Interface Elements

Note

Here are the user interace elements defined in the CSS file. For each element, we provide a code sample which demonstrates its usage.

h1 :

Title

<h1>Title</h1>

h2 :

Title

<h2>Title</h2>

small primary button : 

<input type="button" latype="primary" lasize="small" value="Button" onclick="myfunction()">

regular primary button : 

<input type="button" latype="primary" lasize="regular" value="Button" onclick="myfunction()">

large primary button : 

<input type="button" latype="primary" lasize="large" value="Button" onclick="myfunction()">

regular primary button disabled : 

<input type="button" latype="primary" lasize="regular" value="Button" onclick="myfunction()" disabled="disabled">

small secondary button : 

<input type="button" latype="secondary" lasize="small" value="Button" onclick="myfunction()">

regular secondary button : 

<input type="button" latype="secondary" lasize="regular" value="Button" onclick="myfunction()">

large secondary button : 

<input type="button" latype="secondary" lasize="large" value="Button" onclick="myfunction()">

regular secondary button disabled : 

<input type="button" latype="secondary" lasize="regular" value="Button" onclick="myfunction()" disabled="disabled">

small tertiary button : 

<input type="button" latype="tertiary" lasize="small" value="Button" onclick="myfunction()">

regular tertiary button : 

<input type="button" latype="tertiary" lasize="regular" value="Button" onclick="myfunction()">

large tertiary button : 

<input type="button" latype="tertiary" lasize="large" value="Button" onclick="myfunction()">

regular tertiary button disabled : 

<input type="button" latype="tertiary" lasize="regular" value="Button" onclick="myfunction()" disabled="disabled">

label : 

<label>Label</label>

note : 

<label class="note">*Note text</label>

input text : 

<input type="text" name="text1" value="text">

input text disabled : 

<input type="text" name="text1" value="text" disabled="">

input text on error : 

<input type="text" name="text1" value="text" laerror="true">

input password : 

<input type="password" name="pass" value="12345">

input password disabled : 

<input type="password" name="pass" value="12345" disabled="">

input password on error : 

<input type="password" name="pass" value="12345" laerror="true">

textarea : 

<textarea name="textarea">text</textarea>

textarea disabled : 

<textarea name="textarea" disabled="">text</textarea>

textarea on error : 

<textarea name="textarea" laerror="true">text</textarea>

checkbox : 


<span class="checkboxButton">
  <input type="checkbox" name="vehicle" value="Bike"checked><label for="bike">I have a bike</label>
</span>
<span class="checkboxButton">
  <input type="checkbox" name="vehicle" value="Car"><label for="car">I have a car</label>
</span>

radioButton : 


<span class="radioButton">
  <input type="radio" name="sex" value="Male" id="male" checked><label for="male">I am a male</label>
</span>
<span class="radioButton">
  <input type="radio" name="sex" value="Female" id="female"><label for="female">I am a female</label>
</span>

select custom (with id) : 

<!-- id is required -->
<select name="select" id="selectId">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>

select custom (with id) disable : 

<!-- id is required -->
<select class="select" name="select" id="selectDisableId" disabled="">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>


<input type="submit" name="Submit" value="SubmitLabel">