Skip to end of metadata
Go to start of metadata

After building zebra plan was to develop some test app for zebra. So this app is run top of the yocto nodejs layer


This is a sample application which draw a canvas in HTML 5.


First clone the repository


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 below is the output of the browser


1 Comment

  1. Nice, next step will be to show a basic interaction and eventually dynamically generate UI


    For reference, let me cross link to:

    genivi-dev-platform/pull/97#issuecomment-323939580 repository