Merge pull request #30 from MoffKalast/noetic-feature

Upstreaming ROS 2 features and fixes

package.xml

@@ -1,6 +1,6 @@
 <package format="2">
  <name>vizanti</name>
- <version>0.0.1</version>
+ <version>0.1.0</version>
  <description>A mission planner and visualizer for controlling outdoor ROS robots.</description>
  <maintainer email="vid.rijavec@gmail.com">MoffKalast</maintainer>
  <license>BSD</license>

public/js/main.js

@@ -78,7 +78,7 @@ document.addEventListener("DOMContentLoaded", (event) =>{
  }
 
  const template = element_templates[event.widget_type];
- const eid = "autoID" + uid++;
+ const eid = event.widget_type+"_autoID_" + uid++;
  settings.navbar.push({ type: event.widget_type, id: eid });
  settings.uid = uid;
  settings.save();

public/js/modules/persistent.js

@@ -24,6 +24,10 @@ export class Settings {
  {type:"tf", id:"tf_default"}
  ];
  this.view = {
+ center: {
+ x: 0,
+ y: 0
+ },
  scale: 50.0
  };
  }

public/js/modules/view.js

@@ -35,11 +35,11 @@ const ZOOM_FACTOR = 1.05;
 export class View {
 
  constructor() {
- this.center = {
+ this.center = settings.view.center ?? {
  x: 0,
  y: 0
  };
- this.scale = settings.view.scale;
+ this.scale = settings.view.scale ?? 50.0;
 
  this.drag_start = undefined;
  this.input_movement = true;
@@ -57,6 +57,10 @@ export class View {
  this.center = { x: 0,y: 0};
  this.scale = 50.0;
  this.drag_start = undefined;
+
+ settings.view.center = this.center;
+ settings.view.scale = this.scale;
+ settings.save();
  window.dispatchEvent(new Event("view_changed"));
  }
 
@@ -140,7 +144,9 @@ export class View {
  x: this.drag_start.ref_center_x + delta.x / this.scale,
  y: this.drag_start.ref_center_y + delta.y / this.scale,
  };
-
+
+ settings.view.center = this.center;
+ settings.save();
  window.dispatchEvent(new Event("view_changed"));
  }
 
@@ -185,7 +191,8 @@ export class View {
  };
 
  this.center = newCenter;
- settings.view.scale = view.scale;
+ settings.view.center = this.center;
+ settings.view.scale = this.scale;
  settings.save();
 
  window.dispatchEvent(new Event("view_changed"));

public/templates/area/area_modal.html

@@ -9,7 +9,7 @@ <h3>Area</h3>
  <option value=""></option>
  </select>
 
- <p>Defines an axis-alligned area in the fixed frame by dragging, and publishes it as a Polygon rectangle.</p>
+ <p>Defines an axis-alligned area in the fixed frame by dragging, and publishes it as a geometry_msgs/PolygonStamped rectangle.</p>
 
  <p style="color:#b4b4b4;">Click the icon once to enable, drag on the view area and release to publish. Long press the icon to open this menu.</p>
 

public/templates/battery/battery_modal.html

@@ -11,6 +11,7 @@ <h3>Battery Info</h3>
 
  <p id="{uniqueID}_pecentage">Percentage: ?</p>
  <p id="{uniqueID}_voltage">Voltage: ?</p>
+ <p id="{uniqueID}_cell_voltage">Cell Voltages: ?</p>
 
  <p id="{uniqueID}_current">Current draw: ?</p>
  <p id="{uniqueID}_charge">Charge: ?</p>

public/templates/battery/battery_script.js

@@ -67,6 +67,7 @@ const icon = document.getElementById("{uniqueID}_icon").getElementsByTagName('im
 
 const text_percent = document.getElementById("{uniqueID}_pecentage");
 const text_voltage = document.getElementById("{uniqueID}_voltage");
+const text_cell_voltage = document.getElementById("{uniqueID}_cell_voltage");
 const text_current = document.getElementById("{uniqueID}_current");
 const text_charge = document.getElementById("{uniqueID}_charge");
 
@@ -126,6 +127,17 @@ function connect(){
  if(msg.charge)
  text_charge.innerText = "Charge: "+msg.charge.toFixed(2)+"/"+msg.capacity.toFixed(2)+" Ah";
 
+ if(msg.cell_voltage.length > 0){
+ let cellstr = "Cell Voltages: ";
+
+ for(let i = 0; i < msg.cell_voltage.length; i++){
+ cellstr += msg.cell_voltage[i].toFixed(2)+" V, ";
+ }
+
+ text_cell_voltage.innerText = cellstr.substring(0, cellstr.length - 2);
+ }
+
+
  text_status.innerText = "Status: "+STATUS[msg.power_supply_status];
  text_health.innerText = "Health: "+HEALTH[msg.power_supply_health];
  text_chemistry.innerText = "Type: "+CHEMISTRY[msg.power_supply_technology];

public/templates/compressedimage/compressedimage_script.js

@@ -200,6 +200,10 @@ function onStart(event) {
 }
 
 function displayImageOffset(x, y){
+
+ if(canvas.naturalWidth == 0)
+ return;
+
  let img_width = widthSlider.value;
  let img_height = (vwToVh(img_width) * canvas.naturalHeight)/canvas.naturalWidth;
 

public/templates/map/map_script.js

@@ -2,6 +2,7 @@ import { view } from '/js/modules/view.js';
 import { tf } from '/js/modules/tf.js';
 import { rosbridge } from '/js/modules/rosbridge.js';
 import { settings } from '/js/modules/persistent.js';
+import { imageToDataURL } from '/js/modules/util.js';
 import { Status } from '/js/modules/status.js';
 
 async function saveMap(save_path, topic) {
@@ -52,6 +53,10 @@ let status = new Status(
  document.getElementById("{uniqueID}_status")
 );
 
+let icons = {};
+icons["map"] = await imageToDataURL("assets/map.svg");
+icons["costmap"] = await imageToDataURL("assets/costmap.svg");
+
 let listener = undefined;
 let map_topic = undefined;
 let map_data = undefined;
@@ -126,6 +131,13 @@ if(settings.hasOwnProperty("{uniqueID}")){
  opacityValue.innerText = loaded_data.opacity;
 
  costmapCheckbox.checked = loaded_data.costmap_mode ?? false;
+
+ if(costmapCheckbox.checked){
+ icon.src = icons["costmap"];
+ }else{
+ icon.src = icons["map"];
+ }
+
 }else{
  saveSettings();
 }
@@ -204,7 +216,7 @@ function connect(){
  ros : rosbridge.ros,
  name : topic,
  messageType : 'nav_msgs/OccupancyGrid',
- throttle_rate: 1000, // throttle to once every two seconds max
+ throttle_rate: 1000, // throttle to once every second max
  compression: "cbor"
 
  });
@@ -320,6 +332,11 @@ async function loadTopics(){
 
 costmapCheckbox.addEventListener("change", (event) => {
  status.setWarn("Display mode changed, waiting for map data...");
+ if(costmapCheckbox.checked){
+ icon.src = icons["costmap"];
+ }else{
+ icon.src = icons["map"];
+ }
 });
 
 selectionbox.addEventListener("change", (event) => {