zoom and center

Author: klavins

README.md

@@ -351,6 +351,20 @@ Agent Management
 Styling
 ---
 
+> `center(double x, double y)` <br>
+> Move the center of the view to the point `x,y`. To keep a particular agent in the center of the view, you can put 
+> ```c++
+> center(x(), y());
+> ```
+> in its `update()` method. 
+> See `examples/teleporter` for an example.
+> &#x246F; New in 1.6.
+
+> `zoom(double z)` <br>
+> Change the zoom level in the viewer. THe default is 1.0. 
+> See `examples/teleporter` for an example.
+> &#x246F; New in 1.6.
+
 > `void set_style(json style)` <br>
 > Change the agent's style, just as in the configuration file. 
 > Any valid svg styling will work.
@@ -452,8 +466,9 @@ The brower client relays mouse click, button press, and keyboard events to the e
 
 > Name: `connection`<br>
 > Event: Sent when a new client attaches to the enviro server.<br>
-> Value: An object with a string valued `id` field that should be unique to the client that has connected.
-> Note that this ID will be sent with all other events as well. &#x246E; New in 1.5
+> Value: An object with a string valued `client_id` field that should be unique to the client that has connected.
+> Note that this ID will be sent with all other events as well. &#x246E; New in 1.5. 
+> Note: In v1.6 the key changed from "id" to "client_id" so it would not conflict with the "id" field in the "agent_click" event.
 
 > Name: `screen_click`<br>
 > Event: Sent when a user clicks on the screen.<br>
@@ -488,7 +503,7 @@ To respond to events in your code, you should put elma watchers into the `init()
 ```c++
 void init() {
     watch("agent_click", (Event& e) => {
-        if ( e.value.id == id() ) {
+        if ( e.value()["id"] == id() ) {
             std::cout << "ouch!\n"; 
         }
     });

client/src/enviro.js

@@ -11,14 +11,18 @@ var CLIENT_ID;
 
 var HOST = window.location.href.substring(0, window.location.href.length - 1);
 
+var ZOOM = 1;
+var CX=0, CY=0;
+var CENTER_DEF = false;
+
 function generate_id(){
   // Source: https://gist.github.com/gordonbrander/2230317
   function chr4(){
     return Math.random().toString(16).slice(-4);
   }
   return chr4() + chr4() +
     '-' + chr4() +
-    '-' + chr4() +
+    '-' + chr4() + 
     '-' + chr4() +
     '-' + chr4() + chr4() + chr4();
 }
@@ -54,7 +58,7 @@ class Sensor extends React.Component {
 
 function post_event(data) {
   let data_with_id = data;
-  data_with_id.id = CLIENT_ID;
+  data_with_id.client_id = CLIENT_ID;
   fetch(HOST+':8765/event', {
     method: "POST", 
     mode: 'no-cors',
@@ -72,12 +76,12 @@ class Agent extends React.Component {
     }
   }  
 
-  click(e) {
+  click(e) {      
     post_event({
       type: "agent_click",
       id: this.props.agent.id,
-      x: e.clientX - this.rect.left - this.rect.width/2,
-      y: e.clientY - this.rect.top - this.rect.height/2
+      x: (e.clientX - this.rect.left - this.rect.width/2)/ZOOM,
+      y: (e.clientY - this.rect.top - this.rect.height/2)/ZOOM
     });
     e.stopPropagation();
   }
@@ -124,16 +128,41 @@ class Arena extends React.Component {
 
   click(e) {
 
-    post_event({
+    let cx = CX - this.props.w/(2*ZOOM),
+        cy = CY - this.props.h/(2*ZOOM)
+
+    post_event({ 
        type: "screen_click",
-       x: e.clientX - this.rect.left - this.rect.width/2,
-       y: e.clientY - this.rect.top - this.rect.height/2
+       x: (e.clientX - this.rect.left - this.rect.width/2)/ZOOM - cx,
+       y: (e.clientY - this.rect.top - this.rect.height/2)/ZOOM - cy
     });
 
   }
 
+  dist(x1, y1, x2, y2) {
+    return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
+  }
+
   render() {
-    let center = `translate(${this.props.w/2} ${this.props.h/2}) scale(1)`;
+
+    let zoom = this.props.data.zoom,
+        origin_x = this.props.w/(2*zoom),
+        origin_y = this.props.h/(2*zoom),
+        offset_x = this.props.data.center.x,
+        offset_y = this.props.data.center.y,
+        target_x = origin_x - offset_x,
+        target_y = origin_y - offset_y;
+        
+    if ( this.dist(CX,CY, target_x, target_y ) > 35 ) {
+        CX = target_x;
+        CY = target_y;
+    } else {
+        CX += 0.2 * (origin_x - offset_x - CX);
+        CY += 0.2 * (origin_y - offset_y - CY);
+    }
+
+    let center = `scale(${zoom}) translate(${CX} ${CY})`;
+
     return <svg width={this.props.w} 
                 height={this.props.h} 
                 onClick={e => this.click(e)}
@@ -142,13 +171,14 @@ class Arena extends React.Component {
         {this.props.data.agents.map(agent => <Agent agent={agent} key={agent.id} />)}
       </g>
     </svg>    
+
   }
+
 }
 
 class Taskbar extends React.Component {
 
   click(e, value) {
-
     post_event({
        type: "button_click",
        value: value
@@ -202,7 +232,6 @@ class Enviro extends React.Component {
       .then(res => res.json())
       .then(
         res => {
-          console.log("got config", res.config);
           this.setState({ mode: "connected", config: res.config }, () => {
             setTimeout(() => { this.update() } , 25);
           });
@@ -211,6 +240,7 @@ class Enviro extends React.Component {
           this.setState({ mode: "connecting", config: null, error: { message: "No connection" }}, () => {
             setTimeout(() => { this.update() } , 1000);
           });
+          CENTER_DEF = false;
         }
       )
   }
@@ -227,9 +257,14 @@ class Enviro extends React.Component {
           }, () => {
             setTimeout(() => { this.update() } , 25);
           });
+          if ( !CENTER_DEF ) {
+            CX = window.innerWidth/(2*result.zoom) - result.center.x;
+            CY = (window.innerWidth/2 - 41)/result.zoom - result.center.x;
+            CENTER_DEF = true;
+          }
+          ZOOM = result.zoom;
         },
         (error) => {
-          console.log(error);
           this.setState({
             mode: "connecting",
             error
@@ -270,8 +305,8 @@ class Enviro extends React.Component {
         metaKey: e.metaKey,
         repeat: e.repeat  
       });
-    });    
-
+    }); 
+    
   }
 
   render() {

examples/multiuser/src/coordinator.h

@@ -12,10 +12,12 @@ class CoordinatorController : public Process, public AgentInterface {
 
     void init() {
         watch("connection", [&](Event e) {
-            std::cout << "Connection from " << e.value()["id"] << "\n";
-            Agent& a = add_agent("Guy", 0, y, 0, {{"fill","gray"},{"stroke","black"}});
-            a.set_client_id(e.value()["id"]);
-            y += 50;
+            if ( ! e.value()["client_id"].is_null() ) {
+                std::cout << "Connection from " << e.value() << "\n";
+                Agent& a = add_agent("Guy", 0, y, 0, {{"fill","gray"},{"stroke","black"}});
+                a.set_client_id(e.value()["client_id"]);
+                y += 50;
+            }
         });
     }
     void start() {}

examples/multiuser/src/guy.h

@@ -12,7 +12,7 @@ class GuyController : public Process, public AgentInterface {
 
     void init() {
         watch("keydown", [&](Event &e) {
-            if ( e.value()["id"] == get_client_id() ) {
+            if ( e.value()["client_id"] == get_client_id() ) {
                 auto k = e.value()["key"].get<std::string>();
                 if ( k == " " && !firing ) {
                     Agent& bullet = add_agent("Bullet", 
@@ -34,7 +34,7 @@ class GuyController : public Process, public AgentInterface {
             }
         });        
         watch("keyup", [&](Event &e) {
-            if ( e.value()["id"] == get_client_id() ) {            
+            if ( e.value()["client_id"] == get_client_id() ) {            
                 auto k = e.value()["key"].get<std::string>();
                 if ( k == " " ) {
                     firing = false;

examples/teleporter/config.json

@@ -1,9 +1,26 @@
 {
 
-    "name": "Chase the Block!",
+    "name": "Click to make the robot chase the block",
     "ip": "0.0.0.0",
     "port": 8765,
 
+    "buttons": [
+        {
+            "name": "zoom_in",
+            "label": "Zoom In",
+            "style": { "background": "white", "borderColor": "black" }
+        },
+        {
+            "name": "zoom_out",
+            "label": "Zoom Out",
+            "style": { "background": "white", "borderColor": "black" }
+        },
+        {
+            "name": "toggle_track",
+            "label": "Toggle Tracking",
+            "style": { "background": "white", "borderColor": "black" }
+        }                  
+    ],
 
     "agents": [         
         {

examples/teleporter/src/chaser.h

@@ -8,7 +8,7 @@ using namespace enviro;
 class ChaserController : public Process, public AgentInterface {
 
     public:
-    ChaserController() : Process(), AgentInterface() {}
+    ChaserController() : Process(), AgentInterface(), z(1), tracking(false) {}
 
     void init() {
         goal_x = 0;
@@ -18,14 +18,33 @@ class ChaserController : public Process, public AgentInterface {
             goal_y = e.value()["y"];
             std::cout << "New goal: " << goal_x << ", " << goal_y << "\n";
         });
+        watch("button_click", [&](Event& e) {
+            if ( e.value()["value"] == "zoom_in" ) {
+                z *= 2;
+                zoom(z);
+            } else if ( e.value()["value"] == "zoom_out" ) {
+                z /= 2;
+                zoom(z);
+            } else if ( e.value()["value"] == "toggle_track" ) {
+                tracking = !tracking;
+                if ( !tracking ) {
+                    center(0,0);
+                }
+            }
+        }); 
     }
     void start() {}
     void update() {
         move_toward(goal_x, goal_y);
+        if ( tracking ) {
+            center(x(), y());
+        }
     }
     void stop() {}
 
     double goal_x, goal_y;
+    double z;
+    bool tracking;
 
 };
 

examples/virus/config.json

@@ -8,72 +8,72 @@
 
         {
             "definition": "defs/player.json",
-            "style": { "fill": "#555", "stroke": "#888", "stroke-width": "5px", "stroke-opacity": "0.25"},
+            "style": { "fill": "#555", "stroke": "#888", "strokeWidth": "5px", "strokeOpacity": "0.25"},
             "position": { "x": 400, "y": 200, "theta": 2 }
         },
         {
             "definition": "defs/bullet.json",
-            "style": { "fill": "green", "stroke": "#888", "stroke-width": "5px", "stroke-opacity": "0.25" },
+            "style": { "fill": "green", "stroke": "#888", "strokeWidth": "5px", "strokeOpacity": "0.25" },
             "position": {"x": -400, "y": -200, "theta": 3.14 }
         },
 
 
         {
             "definition": "defs/virus.json",
-            "style": { "fill": "orange", "stroke": "black", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "orange", "stroke": "black", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": 100, "y": 100, "theta": 0 }
         },
         {
             "definition": "defs/virus.json",
-            "style": { "fill": "orange", "stroke": "black", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "orange", "stroke": "black", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": 100, "y": -100, "theta": 0 }
         },
         {
             "definition": "defs/virus.json",
-            "style": { "fill": "orange", "stroke": "black", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "orange", "stroke": "black", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": -100, "y": 100, "theta": 0 }
         },
         {
             "definition": "defs/virus.json",
-            "style": { "fill": "orange", "stroke": "black", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "orange", "stroke": "black", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": -100, "y": -100, "theta": 0 }
         },    
 
 
 
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": 0, "y": 0, "theta": 0 }
         },        
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": 300, "y": 0, "theta": 0 }
         },        
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": -300, "y": 0, "theta": 0 }
         },        
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": -150, "y": 200, "theta": 0 }
         },              
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": 150, "y": 200, "theta": 0 }
         },        
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": -150, "y": -200, "theta": 0 }
         },              
         {
             "definition": "defs/cell.json",
-            "style": { "fill": "lightblue", "stroke": "#aaa", "stroke-width": "10px", "stroke-opacity": "0.25" },
+            "style": { "fill": "lightblue", "stroke": "#aaa", "strokeWidth": "10px", "strokeOpacity": "0.25" },
             "position": { "x": 150, "y": -200, "theta": 0 }
         }