Added support for compressed image transport. (#9)

* Added support for compressed image transport.

* Diagnostics widgets

Author: HARD-FAULT

src/index.html

@@ -91,18 +91,20 @@ <h2>Widget Settings</h2>
 
 	<!-- JavaScript -->
 	<script src="js/handlebars.min.js"></script>
-	<script src="js/jquery.min.js"></script>
+	<!--<script src="js/jquery.min.js"></script>-->
+	<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.min.js" ></script>
 	<script src="js/templates.js"></script>
-	<script src="js/eventemitter2.js"></script>
-	<script src="js/roslib.min.js"></script>
+	<!--<script src="js/eventemitter2.js"></script>-->
+	<script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/0.4.14/eventemitter2.min.js"></script>
+	<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
 	<script src="js/mjpegcanvas.min.js"></script>
 	<!--<script src="js/three.min.js"></script>-->
-  <script type="text/javascript" src="http://cdn.robotwebtools.org/threejs/current/three.min.js"></script>
-	<script src="js/ros3d.min.js"></script>
+	<script type="text/javascript" src="http://static.robotwebtools.org/threejs/current/three.min.js"></script>
+	<script type="text/javascript" src="http://static.robotwebtools.org/ros3djs/current/ros3d.min.js"></script>
 	<script src="js/bundle.js"></script>
 	<script src="js/widgets.bundle.js"></script>
 
-
+	<script src="https://d3js.org/d3.v4.min.js"></script>
 	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGir7uuIvdEOH24VRmNcDCUCHSwmWS6No" async defer></script>
 	<script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -115,4 +117,4 @@ <h2>Widget Settings</h2>
   </script>
 </body>
 
-</html>
+</html>

src/js/mjpegcanvas.min.js

@@ -0,0 +1,32 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'install', '.' ]
+2 info using npm@2.15.11
+3 info using node@v4.8.7
+4 verbose install initial load of /home/ros/Workspace/rosweb/package.json
+5 warn package.json rosweb@1.0.0 No repository field.
+6 verbose readDependencies loading dependencies from /home/ros/Workspace/rosweb/package.json
+7 silly cache add args [ '.', null ]
+8 verbose cache add spec .
+9 silly cache add parsed spec Result {
+9 silly cache add   raw: '.',
+9 silly cache add   scope: null,
+9 silly cache add   name: null,
+9 silly cache add   rawSpec: '.',
+9 silly cache add   spec: '/home/ros/Workspace/rosweb/src',
+9 silly cache add   type: 'local' }
+10 error addLocal Could not install /home/ros/Workspace/rosweb/src
+11 verbose stack Error: EISDIR: illegal operation on a directory, read
+11 verbose stack     at Error (native)
+12 verbose cwd /home/ros/Workspace/rosweb/src
+13 error Linux 4.13.0-32-generic
+14 error argv "/usr/bin/node" "/usr/bin/npm" "install" "."
+15 error node v4.8.7
+16 error npm  v2.15.11
+17 error code EISDIR
+18 error errno -21
+19 error syscall read
+20 error eisdir EISDIR: illegal operation on a directory, read
+20 error eisdir This is most likely not a problem with npm itself
+20 error eisdir and is related to npm not being able to find a package.json in
+20 error eisdir a package you are trying to install.
+21 verbose exit [ -21, true ]

src/npm-debug.log

@@ -0,0 +1,46 @@
+/// <reference path="./typings/tsd.d.ts" />
+
+// Events
+import {TabEvents} from "./events/tab";
+import {WidgetEvents} from "./events/widget";
+import {WidgetInstanceEvents} from "./events/widget_instance";
+import {RosEvents} from "./events/ros";
+import {WorkspaceEvents} from "./events/workspace";
+
+// Super
+import {lightbox} from "./super/lightbox";
+import {storage} from "./super/storage";
+import {Frontend} from "./super/frontend";
+
+// Models
+import {Widget} from "./model/widget";
+import {Workspace} from "./model/workspace";
+import {currentWorkspace} from "./model/workspace";
+
+function init() {
+  $(document).ready(function () {
+    var url = window.location.href;
+    url = url.replace(/.*:\/\//i,"");
+    url = url.replace(/:\d{1,5}/i,"");
+    url = url.replace(/\/.*/i,"");
+    $("#jsRosUrl").val("ws://" + url + ":9090");
+
+    var ros: ROSLIB.Ros = new ROSLIB.Ros("");
+    window["ros"] = ros;
+    events(ros);
+    lightbox.CreateLightbox();
+    currentWorkspace.initWorkspace();
+  });
+}
+
+function events(ros: ROSLIB.Ros): void {
+  let tabEvents: TabEvents = new TabEvents();
+  let widgetEvents: WidgetEvents = new WidgetEvents(ros);
+  let widgetInstanceEvents: WidgetInstanceEvents = new WidgetInstanceEvents(ros);
+  let rosEvents: RosEvents = new RosEvents(ros);
+  let workspace: WorkspaceEvents = new WorkspaceEvents();
+
+  rosEvents.Connect();
+}
+
+init();

src/ts/#main.ts#

@@ -0,0 +1 @@
+ros@ros-VirtualBox.2517:1518159739

src/ts/.#main.ts

@@ -19,12 +19,17 @@ import {currentWorkspace} from "./model/workspace";
 
 function init() {
   $(document).ready(function () {
+    var url = window.location.href;
+    url = url.replace(/.*:\/\//i,"");
+    url = url.replace(/:\d{1,5}/i,"");
+    url = url.replace(/\/.*/i,"");
+    $("#jsRosUrl").val("ws://" + url + ":9090");
+
     var ros: ROSLIB.Ros = new ROSLIB.Ros("");
     window["ros"] = ros;
     events(ros);
     lightbox.CreateLightbox();
     currentWorkspace.initWorkspace();
-    
   });
 }
 

src/ts/main.ts

@@ -58,7 +58,11 @@ export class Workspace {
 
     wg = new WidgetGroup("3D Viewer");
     new Widget(wg.id, "ROS 3D Viewer", "ROS3DViewer", "./widgets/ros_3d_viewer");
- 
+
+    wg = new WidgetGroup("Diagnostics");
+    new Widget(wg.id, "Diagnostics Viewer", "DiagnosticsViewer", "./widgets/diagnostics_viewer");
+    new Widget(wg.id, "Log reader", "LogReader", "./widgets/log_reader");
+
     wg = new WidgetGroup("Development");
     new Widget(wg.id, "New Widget", "NewWidget", "./widgets/new_widget");
   }

src/ts/model/workspace.ts

@@ -6,6 +6,8 @@
     data-ros-topic-chng="onchange" data-ros-topic-slctd="" />
 	<meta data-wdgt-param="1" data-widget-param-id="1" data-widget-param-desc="Web Video Server Port" data-widget-param-var="webVideoServerPort"
 		data-widget-param-value="8080" />
+	<meta data-wdgt-param="1" data-widget-param-id="2" data-widget-param-desc="Web Video Compression Type" data-widget-param-var="webVideoCompressionType"
+		data-widget-param-value="mjpeg" />
 
   <!-- The content which could be manipulated by widget class -->
   <div class="jsMjpeg"></div>

src/widgets/camera_viewer/index.hbs

@@ -32,6 +32,7 @@ var WidgetCameraViewer = function (widgetInstanceId) {
       querySelector: '.jsWidgetContainer[data-widget-instance-id=\'' + self.widgetInstanceId + '\'] .jsMjpeg',
       host: self.host,
       port: self.webVideoServerPort,
+      type: self.webVideoCompressionType,
       width: self.width,
       height: self.height,
       topic: selectedTopic
@@ -52,4 +53,4 @@ var WidgetCameraViewer = function (widgetInstanceId) {
 
 $(document).ready(function () {
   // If you need an onload callback
-});
+});

src/widgets/camera_viewer/main.js

@@ -0,0 +1,26 @@
+<div class="ros-widget" data-widget-name="diagnostics-viewer"
+  data-min-height="150" data-min-width="200"
+  data-max-height="1200" data-max-width="1600"
+  data-height="300" data-width="400">
+
+  <!--  META Tags to describe topics subscription -->
+  <meta data-ros-topic="1"
+        data-ros-topic-id="1"
+        data-ros-topic-desc="Topic to subscribe"
+        data-ros-topic-type="diagnostic_msgs/DiagnosticArray"
+        data-ros-topic-chng="on_topic_selected"/>
+  <meta data-wdgt-param="1"
+        data-widget-param-id="1"
+        data-widget-param-desc="Diagnostics Subject"
+        data-widget-param-var="diagnosticsSubject"
+		data-widget-param-value="" />
+
+  <!-- The content which could be manipulated by widget class -->
+  <div class="header">
+    <p class="name">-- topic name --</p>
+    <p class="type">-- topic type --</p>
+    <p class="msg">-- topic message ---</p>
+  </div>
+  
+  <svg class="content"></svg>
+</div>