ricroll.pages.dev

A random pan and zoom world


a random pan and zoom world

Zoom, Pan, and Find

See Also

 

The Zoom, Pan, and Find Options Dialog is used to specify a desired zoom level and screen location or to locate a particular bus or area/zone on the oneline. The dialog can be opened by right-clicking on the background of the diagram and choosing Pan/Zoom Control from the oneline popup menu, or by clicking on the Uncover button in the Zoom ribbon group on the Onelines ribbon tab. The dialog has the following fields:

 

Find Objects on Oneline

The Find Object on Oneline section of the dialog is used to pan to any desired bus object ,area/zone object , branch object, interface object, or substation objecton the oneline. The dialog makes use of the advanced find functionality of Simulator to locate a device.

Only Encompass Objects Visible at Current Zoom Level

If checked (the default), then the Object ID combo box only lists those objects that are visible at the current zoom level.

Object Type

Select the type of object to find: Buses, Areas or Zones, Interfaces, Substations and Lines/Transformers.

Sort By

Specify whether you are entering the object by its number or by its name by choosing either Sort by Name or Sort by Number. This o

d3noob/.block

<!DOCTYPE html><meta charset="utf-8"><style>path { stroke: white; stroke-width: 0.25px; fill: grey;}</style><body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script><script src="http://d3js.org/topojson.v0.min.js"></script><script>var width = 960, height = 500;var projection = d3.geo.mercator() .center([0, 5 ]) .scale(150) .rotate([-180,0]);var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height);var route = d3.geo.path() .projection(projection);var g = svg.append("g");// load and display the Worldd3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path)});// zoom and panvar zoom = d3.behavior.zoom() .on("zoom",function()

D3 Zoom and Pan

D3 provides a module that adds zoom and pan behaviour to an HTML or SVG element. This page shows how to create zoom behaviours, how to add zoom and pan constraints and how to zoom and pan programmatically.

In the following example, click and move the mouse to pan and use the mouse wheel to zoom. Touch gestures should also work:

When zoom and pan gestures (such as dragging or a pinch gesture) occur, a transform (consisting of scale and translate) is computed by D3 and passed into an event handler. The event handler typically applies the transform to chart elements.

There's three steps to add zoom and pan behaviour to an element:

  • call to create a zoom behaviour function
  • add an event handler that gets called when a zoom or pan event occurs. The event handler receives a transform which can be applied to chart elements
  • attach the zoom behaviour to an element that receives the zoom and pan gestures

It's helpful to distinguish between the HTML or SVG element that receives the zoom and pan gestures and the elements that get zoomed and panned (the elements that get transformed). It's important that these elements are different, otherwise the panning wo

ZoomWorld

This is an experiment with a world that has a very deep zoom. Drag the route to pan. Use the mouse wheel to zoom.

The idea is to have a world where detail is only created when you need to see it. Then you can have a truly enormous world, but still have it fit inside a small amount of memory. The above world is three times the surface of the sun.

It starts by creating a route of 256x256 tiles, with random elevation and humidity values. When you zoom in a step, each tile is split in four. The top left sub tile becomes a copy of the parent tile, and the other three get their elevation and humidity from an average of the adjacent tiles, plus a random value.

Elevation below zero is classified as waters. Waters greater than a specific size are oceans (deep blue), the rest are lakes (pale blue). Lowland areas are forests (normal humidity, green) or deserts (low humidity, yellow). Gray are mountains and white are mountain tops.

It is facinating to zoom in and see how more and more detail is created. Envision having it zoom in on a rich detailed world with forests, cities and people, all procedurally generated on the fly.

Ideas for improvements:

  • Right now there is too much

    Zoom, pan and rotate using the orbital camera

    Starting with MH 1.0 there is a new orbital camera system that replaces the old still camera. This brand-new camera addresses the issues where the old still camera made it hard to focus on body parts, for example hands. In the new system the human never moves. Rather, the camera travels on an mythical sphere surrrounding the human. The user “mouse picks” a focal point on the human by right clicking, and zooms in and out by dragging. This allows the user to easily rotate around this point to inspect it from all sides.

    Right-click zoom picking

    The default zoom button has been changed to the right mouse button and the use of the mouse wheel is deprecated.

    Right clicking now serves two purposes, it picks the center of focus based on the location of the cursor when it is positioned over the human, and it lets you zoom in or out by dragging the mouse. Right clicking on the background and not on the human simply makes it zoom in or out straight ahead.

    Auto-zoom

    Another advantage of the orbital camera is that it will adapt the viewing distance based on the height of the human.

    The camera will attempt to keep the current foc