handle incoming attr change topic

robotics-in-concert · Mar 23, 2015 · 014649d · 014649d
1 parent 75bbb72
commit 014649d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/public/polymer_components/rocon-button.html b/public/polymer_components/rocon-button.html
@@ -2,7 +2,7 @@
 
 <link rel="import" href="../components/polymer/polymer.html">
 <!-- <link rel="import" href="../components/paper-button/paper-button.html"> -->
-<polymer-element name="rocon-button" role="button" attributes="roconId">
+<polymer-element name="rocon-button" role="button" attributes="rocon_id">
   <template>
   <style>
     :host {
@@ -27,7 +27,7 @@
   </style>
   <!-- <div class="tile" flex center-justified center self-stretch on-tap="{{handleTap}}"> -->
     <div id="wrapper" on-tap="{{handleTap}}">
-      <content align-center></content> ({{roconId}})
+      <content align-center></content> ({{rocon_id}})
     </div>
   <!-- <div class="tile" center on-tap="{{handleTap}}"> -->
     <!-- <content></content> -->
@@ -39,7 +39,7 @@
   <script>
     Polymer('rocon-button', {
       handleTap: function(){
-        this.fire('core-signal', {name: 'rocon-button', data: {'event': 'tap', id: this.roconId}});
+        this.fire('core-signal', {name: 'rocon-button', data: {'event': 'tap', id: this.rocon_id}});
         console.log('core signal fired');
 
 

diff --git a/public/polymer_components/rocon-text.html b/public/polymer_components/rocon-text.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../components/polymer/polymer.html">
-<polymer-element name="rocon-text" attributes="value">
+<polymer-element name="rocon-text" attributes="value" >
   <template>
   <style>
     :host {

diff --git a/src/engine_manager.js b/src/engine_manager.js
@@ -25,6 +25,13 @@ var EngineManager = function(io, options){
   this.resource_pool_status = null;
   ros.once('status.ready', function(){
 
+    ros.subscribe('to-rocon-ui', 'std_msgs/String', function(payload){
+      console.log('to-rocon-ui received. payload : ', payload);
+
+      io.of('/ui')
+        .emit('data', payload);
+    });
+
     ros.subscribe('/concert/scheduler/resource_pool', 'scheduler_msgs/KnownResources', function(payload){
       logger.debug("POOL", payload);
       that.resource_pool_status = payload;
@@ -55,6 +62,9 @@ var EngineManager = function(io, options){
     logger.info('socket.io client connected id:%s', socket.id);
     that._bindClientSocketHandlers(socket);
   });
+  this.io.of('/ui').on('connection', function(socket){
+    logger.info('socket.io (/ui) client connected id:%s', socket.id);
+  });
 
 };
 util.inherits(EngineManager, EventEmitter2);

diff --git a/src/routes.js b/src/routes.js
@@ -69,9 +69,9 @@ module.exports = function(app, db){
           return '<div flex layout '+meta.type+'>'+childrenEl+'</div>';
 
         }else if(meta.type == 'button'){
-          return '<rocon-button flex roconId="'+meta.name+'">'+meta.text+'</rocon-button>';
+          return '<rocon-button flex rocon_id="'+meta.name+'">'+meta.text+'</rocon-button>';
         }else if(meta.type == 'text'){
-          return '<rocon-text flex roconId="'+meta.name+'">'+meta.text+'</rocon-button>';
+          return '<rocon-text flex rocon_id="'+meta.name+'">'+meta.text+'</rocon-button>';
         }
 
 

diff --git a/views/ui.ejs b/views/ui.ejs
@@ -52,7 +52,34 @@
 
   </template>
   <script src="http://cdn.jsdelivr.net/g/superagent"></script>
+  <script src="/socket.io/socket.io.js" type="text/javascript"></script>
   <script>
+    // TODO fix url
+    var io = io('http://localhost:8888/ui');
+    io.on('connect', function(data){
+      console.log('io connected');
+
+    });
+    io.on('data', function(data){
+      data = JSON.parse(data.data);
+      console.log(data);
+
+      var eid = data.rocon_id;
+      var selector = '*[rocon_id='+eid+']';
+      console.log(selector);
+
+      var e = document.querySelector(selector);
+      console.log(e);
+
+      if(e){
+        e.setAttribute(data.attr, data.value);
+        console.log('here');
+
+      }
+      console.log(data);
+
+
+    });
     var scope = document.querySelector('#tpl0');
     console.log(scope);