Differences

This shows you the differences between two versions of the page.

Link to this comparison view

iot:labs:10 [2015/06/29 10:30]
avner.solomon [CSS selectors,input boxes and values]
iot:labs:10 [2020/01/07 12:08] (current)
jan.vaduva [Customize projects from scratch]
Line 1: Line 1:
-===== Lab 10. User Interface and User Experience ​=====+======Lab 10: Yocto Project support for IoT====== 
 +=====Customize projects from scratch=====
  
-In this laboratory we will try to see different ways we can interact interact programmatically with the interface from javascript.+Open the Quick start guide to Yocto Project, located at: [[https://​www.yoctoproject.org/​docs/​current/​yocto-project-qs/​yocto-project-qs.html|Quick start guide]]
  
-In order to do these exercises you will need a new phoengap project and the IoT template. Alsoin order to make buildsyou will need an adobe account to access phonegap build.+Set up your Linux system with the right packages (instruction are provided for UbuntuFedoraCentOS and openSUSE)
  
-===== 1) Create blank pages and link the menu ===== +  - Install prerequisites<​code>​sudo apt-get install gawk wget git-core diffstat unzip texinfo gcc-multilib \ 
-For starters we will need the following pages+     build-essential chrpath socat libsdl1.2-dev xterm</​code>​ 
-  * news (which will display some news) +  ​- Download ​the latest stable release: <​code>​$ git clone -b zeus git://​git.yoctoproject.org/​poky.git</​code>​ //or// <​code>​$ wget downloads.yoctoproject.org/​releases/​yocto/​yocto-3.0/​poky-zeus-22.0.0.tar.bz2</​code>​ 
-  ​* chat (will allow the IoT app users to chat) +  - Source //​oe-init-build-env//​ script, ​to create the build directory: <​code>​$ source poky/​oe-init-build-env ../​my_dir</​code>​ 
-  ​* images (display a gallery of images uploaded by IoT App users) +  ​- Edit //​conf/​local.conf//​ and set //​MACHINE// ​ as //qemuarm// and any extra required variables. 
-  ​* sensors (interact with your boards) +  ​- Build the OS image: <​code>​$ bitbake core-image-minimal</​code>​ 
-  ​* templates (a page that should never be shown to the users which will contain copies ​of the HTML elements you need to use in the code)+  ​- Boot the OS image of your choice: <​code>​$ runqemu qemuarm</​code>​ Where: <​code>​MACHINE=qemuarm</​code>
  
-Don't forget to give each page and ID and for testing purposes also write the name of the page inside the page. 
-Eg: 
-  <div id="​news"​ data-role="​page">​ 
-     news 
-  </​div>​ 
-  ​ 
-Now that you've created the pages start linking them to the menu by creating buttons as shown in the course: 
-Eg: 
-  <li> 
-    <a href="#​news">​ 
-      <i class="​fa fa-newspaper-o"></​i>​ News 
-    </a> 
-  </li> 
  
-In your template you will find the close button already defined, so start creating your own buttons after thatAlso try assigning ​relevant icon to each menu item.+===== Exercises===== 
 +  - Finish a successful Yocto Project build. 
 +  - Clone the layers describe in the build using wherever possible the //pyro// branch 
 +  - Use the layer created in the last lab and add support for **Python** and **NodeJS**. 
 +  - Add some extra packages support and group them inside according **packagegroups**. 
 +  - Create ​new image which should include all the above mentioned support. 
 +  - Generate the **SDK** for your image.
  
-You should achieve an end result similar with the one presented in the course. 
  
-===== 2) Inputs, buttons and message boxes ===== 
  
- 
-==== Alerts and Timing ==== 
- 
-The standard way to display a message box on the web is alert() for a notification base message box, confirm() for a yes/no answer message box. 
- 
-The normal usage for the 2 is 
-  alert("​Welcome"​);​ 
-  if( confirm('​Are you human?'​) ){ 
-    //code for yes 
-  }else{ 
-    //code for no 
-  } 
-  ​ 
-There is a problem with apple phones where they need a delay of at least 0ms (a delay of 0 might not make sense but it actually waits 1 event loop cycle which can be less than 1ms) in order to show alerts. This problem exist for more elements not just alerts. 
-In javascript there are 2 main timing methods: setTimeout which delays a function and setInterval which run a function at set intervals. 
- 
-  var id_of_timer = setTimeout(callback,​ time); //  to create a delay 
-  clearTimeout(id_of_timer);​ // to delete the delay before it actually runs 
-  ​ 
-  var id_of_timer = setInterval(callback,​ time); //  to create an interval 
-  clearInterval(id_of_timer);​ // to delete the interval 
-  ​ 
-the callback can be the name of a function,​method created before or an anonymous function crated in place: 
- 
-  setTimeout(show_alert,​0);​ 
-  ​ 
-  or 
-  ​ 
-  setTimeout(function(){ 
-    alert("​Hello"​);​ 
-  },0); 
-  ​ 
-This is true for any callbacks in javascript. You can always either point to a method/​function or create a new one on the spot. 
- 
- 
-==== CSS selectors,​input boxes and values ==== 
- 
- 
-jQuery (and javascript in general, we use jQuery for simplification) allows us to access elements by providing a css selector towards them. The selection can result 0,1 or more elements. 
- 
-A css selector can select elements based on tag,​id,​class,​attributes and many other constraints,​ but we will stick to tag id and class here. 
-An html/xml node in general looks like 
-  <​tag_name id="​id"​ class="​class1 class2 class3"​ attr1="​attr1 value" attr2="​attr2 value">​ 
-    html content 
-  </​tag_name>​ 
-Even if browsers allow you to give the same id to multiple elements, **each id needs to be unique** for things to work properly. 
-In order to select a certain element the selector can be: 
- 
-  tag_name#​id.class 
-    
-but each part can be omitted. In this case for example since the id is already unique there is no need to mention the tag_name and the class so 
-  #id 
-should suffice. 
- 
-In order to select an element from javascript 
-  $(cssSelector as string); // EG $("#​username"​) 
-This call returns a jQuery object on which we can use jQuery methods to modify the HTML node. 
-  ​ 
-In order to retrieve or change the contents of a javascript element we can muse the .html() jQuery method. 
-  <div id="​example">​ 
-    <​p>​Example</​p>​ 
-  </​div>​ 
-For the above code: 
-  $("#​example"​).html();​ //would return ​ <​p>​Example</​p>​ 
-  $("#​example"​).html("​hi"​);​ 
-  /* would change the node too 
-     <​div id="​example">​ 
-       hi 
-     </​div>​ 
-  */ 
- 
-Now, let's go to the chat page and create some interactive input boxes and buttons. 
  
iot/labs/10.1435563005.txt.gz · Last modified: 2015/06/29 10:30 by avner.solomon
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0