Running Zebra Sample application

After building zebra to the GDP mentors asked me to develop some test app for zebra. Since there is no HTTP server in the GDP  (https://at.projects.genivi.org/jira/browse/GDP-709) mentors asked me to run and test this inside my pc.
This is a sample application which draw a canvas in HTML 5.

First clone the repository

git clone https://github.com/akilawickey/zebra.git

Then 

npm install

Then start http server using

gulp http

Then navigate to the the link http://localhost:8090 on your browser

you can see test.html inside the gui then run it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
    <head>
       <!--
           Zebra Sample application
        -->
      <script src='http://repo.zebkit.org/latest/zebra.min.js'
                type='text/javascript'>
      </script>
      <script type="text/javascript">
        zebra.ready(function() {
           // import all classes, functions, constants
           // from zebra.ui, zebra.layout packages
           eval(zebra.Import("ui", "layout"));
         
           // create canvas
           var root = (new zCanvas(400, 400)).root;
           root.properties({
               layout : new BorderLayout(8,8),
               border : new Border(),
               padding: 8,
               kids: {
                   CENTER: new TextField("GENIVI Development Platform\n", true),
                   BOTTOM: new Button("Clear").properties({ 
                       canHaveFocus: false
                   })
               },
               
           });
                         
           root.find("//zebra.ui.Button").bind(function() {
               root.find("//zebra.ui.TextField").setValue("");
           });
        });
 
      </script>

    </head>
    
<body></body>
</html>










Here is the output of the sample application on my browser.





















































































































Comments











Post a Comment


Comment






























Popular posts from this blog









IOT Greenhouse project part 1




















Image







 How to build Simple IOT Greenhouse (Part 1)       This this project we are going to control a stable environment to the plant inside the greenhouse.  With using mqtt protocols and latest IOT suff. And also we can monitor plant conditions using digital image processing. So let's start this step by step. Part 1 is all about setting up the sensors and hardware part.   So what do you need to this project ?   Components   1.) Arduino Uno with wifi shield  2.) Raspberry PI 2 Board and wifi adapter.  3.) DHT 21 (AM2301) Temperature and humidity sensor  4.) Soil Moisture Sensor  5.) Light intensity sensor  6.) Water pump  7.) Raspberry PI Camera or web cam for image processing  8.) 16 in to 4 LCD display               Don't be scared i'm going to explain bit by bit how to build this system.  First of all you have to design the hardware part. plug the sensor to the arduino in correct way.     Simple Arduino Code to get sensor data and display here this code is without the arduino w...








Read more










How to fix FirebaseApp with name [DEFAULT] doesn't exist issue with flutter




















Image







       How to fix FirebaseApp with name [DEFAULT] doesn't exist issue with flutter   This is a very common issue when we try to google authenticate our app with flutter.   Please check the following are done in your app.    Updated the android build.gradle file  Updated the android\app build.gradle file  Added dependency to pubspec.yaml  Placed the google-services.json file    Check Updated the android build.gradle file     Add the following line to the android/build.gradle file          please add the following line to that file.    classpath 'com.google.gms:google-services:4.3.2'  // Google Services plugin         Check Updated the android\app build.gradle file    Add following line to the following location         apply plugin : 'com.google.gms.google-services'      Check Added dependency to pubspec.yaml   firebase_auth : ^0.14.0+5  google_sign_in : ^4.0.7    Placed the google-services.json file     make sure you have added google-services.json from the firebase...








Read more










Node.js how to work with Serial ports and display data on a beautiful frontend using Highcharts API Part 2




















Image







        Now you have some basic idea of the technologies we are using here. So let's get our hands dirty.   First, we have to set up the Node js libraries correctly to handle the serial data and open a WebSocket.   So simple what we here going to do is getting data from USB and put them into a GUI to visualize our data nicely.   So for this tutorial, I'm going to use Arduino as my data source. Piratically this will be your sensor or devices which you are using.   Here http://www.highcharts.com/   Highcharts makes it easy for developers to set up interactive charts in their web pages. This has good community support and this is best for our works.   1. First step   clone this repository   https://github.com/akilawickey/nodejs-serial-frontend/tree/master   Here is the Arduino sketch sample.ino  which I'm using to emulate data which you can find inside the repository    1:   /*   2:   * This code will emulate USB data   3:   *   4:   *   5:   */   6:  // the setup function run...








Read more