Interactive image web viewer
-
OpenCV native support: the application has been written with OpenCV and Python in mind, hence it comes with native support for the datastructures of the library. The porting of your pre-existing application to the new visualization library should be straightforward
-
Multiple displays: multiple displays can be shown simultaneously on different devices. Both PCs and mobile devices are supported. That means you can write the code on an interactive shell of your PC and display the images on your tablet
-
Inteactive: the user can load images at any time on the display or add overlays (i.e. lines and points). The changes are applied in real time on all the active displays
-
Sub-pixel resolution: the image and the overlays are kept separated. At high level of zoom the pixels of the image get visible, while the overlays are always drawn with sub-pixel accuracy
-
Public HTTP API: the display can be controlled with the public HTTP API from virtually any programming language, although a Python wrapper is given out of the box
-
Platform independent server: the server is written in Python and can run on all the major platforms
At the moment there is no ready-to-use Python package.
First, you should make sure to fulfill all the libraries requirements. Then, download the source code here and add the gimber package in your PYTHONPATH.
These Python libraries must be installed in order to run the server on you machine:
- OpenCV: image processing and compression
- BottlePy: web server
- Gevent: enables multithreading in the server (much faster!!)
- Urllib3 + Requests: more efficient HTTP requests with keep alive
BottlePy consists of a single file and it can be manually copied in the PYTHONPATH.
Windows users can find the installer for OpenCV and Gevent here. OSX and Linux users can refer to the official installation instructions or use pip:
pip install bottle gevent urllib3 requests
The following Javascript libraries are used in the integrated web viewer:
They will be automatically obtained from CDN, so you don't need to download them unless you plan to use the application offline.
The Gimber server must be started in order to create the interactive display.
Images can be dynamically loaded in the display using a public http API or the provided Python interface. The API can also be used to interact with the display: add points, lines, polygon... The documentation of the API is not ready yet. Please refer to the python examples contained in the repository.
The display can be viewed from any web browser, from both your PC and mobile device.
At the moment this mode is not intended to be used with an Internet connection, but only for local purposes. For instance, it might be particularly useful when debugging an application written in Python+OpenCV.
python -m gimber interactive
python -m gimber interactive [-h] [-H HOST] [-P PORT] [-D] [-s TILESIZE] [-f {png,jpg}] [-c COMPRESSION] [-i {none,linear}] [-v | -q]
Optional arguments:
-h, --help show this help message and exit
-H HOST, --host HOST Server host to bind to
-P PORT, --port PORT Server port to bind to
-D, --debug Run the server in debug mode
-s TILESIZE, --tilesize TILESIZE
Size of the tiles in pixels
-f {png,jpg}, --format {png,jpg}
Format of the images
-c COMPRESSION, --compression COMPRESSION
Compression for .png [1-9] or quality of the images
for .jpeg [1-100]
-i {none,linear}, --interp {none,linear}
Interpolation method used when scaling the images
-v, --verbose Print additional debug information
-q, --quiet Suppress all the output to console
See also: Zoom levels, Image Formats
This will contains additional info about the zoom level:
- A table
- An example?
This will contains info about the file formats and parameters:
- Supported types
- Link to OpenCV ?
TODO: complete this part
The following features are also available:
- Offline tile generator: generate all the tiles for a given image and save all the images in a folder
- Static file server: start a web server that dynamically generates the tiles
Read the input image, generate all the tiles and finally save all the files in the output folder. You can then copy all the images in your web server and use one of the many JavaScript mapping libraries already available to show the results.
You can see a demo here.
python -m gimber tilesgen filename.jpg
python -m gimber tilesgen [-h] [-s TILESIZE] [-f {png,jpg}] [-c COMPRESSION]
[-i {none,linear}] [-v | -q] [-d DEST] [-z MINZOOM]
[-Z MAXZOOM]
inputImage
Positional arguments:
inputImage Image that will be used to create the tiles
Optional arguments:
-h, --help show this help message and exit
-s TILESIZE, --tilesize TILESIZE
Size of the tiles in pixels
-f {png,jpg}, --format {png,jpg}
Format of the images
-c COMPRESSION, --compression COMPRESSION
Compression for .png [1-9] or quality of the images
for .jpeg [1-100]
-i {none,linear}, --interp {none,linear}
Interpolation method used when scaling the images
-v, --verbose Print additional debug information
-q, --quiet Suppress all the output to console
-d DEST, --dest DEST Folder that will contain the images
-z MINZOOM, --minZoom MINZOOM
Minimum zoom level used when rescaling the images
-Z MAXZOOM, --maxZoom MAXZOOM
Maximum zoom level used when rescaling the images
See also: Zoom levels, Image Formats
Run a web server that generates the tiles dynamically for all the images contained in the specified folder.
The tiles of all the images contained in the folder where the server has been started will be available at the following address:
http://localhost:8080/tile/<z:int>/<x:int>/<y:int>/<filename:path>
If you are using leaflet.js to display the tiles you can use a tileUrl like the follow:
var tileUrl = "http://localhost:8080/tile/{z}/{x}/{y}/path/to/image.png" You can change the root folder using the command line argument --dir.
python -m gimber webserver
python -m gimber webserver [-h] [-H HOST] [-P PORT] [-D] [-s TILESIZE] [-f {png,jpg}]
[-c COMPRESSION] [-i {none,linear}] [-v | -q] [-d DIR]
Optional arguments:
-h, --help show this help message and exit
-H HOST, --host HOST Server host to bind to
-P PORT, --port PORT Server port to bind to
-D, --debug Run the server in debug mode
-s TILESIZE, --tilesize TILESIZE
Size of the tiles in pixels
-f {png,jpg}, --format {png,jpg}
Format of the images
-c COMPRESSION, --compression COMPRESSION
Compression for .png [1-9] or quality of the images
for .jpeg [1-100]
-i {none,linear}, --interp {none,linear}
Interpolation method used when scaling the images
-v, --verbose Print additional debug information
-q, --quiet Suppress all the output to console
-d DIR, --dir DIR Directory that contains the image
See also: Zoom levels, Image Formats