celutz/panorama/templates/panorama/view.html

{% extends "panorama/base.html" %}
{% load staticfiles %}
{% load distance_filter %}
{% load i18n %}

{% block title %}{{ panorama.name }}{% endblock title %}

{% block js %}
    <script>
      var title = "{{ panorama.name|escapejs }}";
      var panorama_id = {{ panorama.pk }};
      var panorama_url = "/api/v1/panoramas/{{ panorama.pk }}/";
      var img_prefix = '{{ panorama.tiles_url }}';
      var image_loop = {{ panorama.loop|yesno:"true,false,undefined" }};
      var image_width = {{ panorama.image_width }};
      var image_height = {{ panorama.image_height }};
      var csrf_token = "{{ csrf_token }}";
    </script>
    <script src="{% static "panorama/js/pano.js" %}"></script>
    <script>window.onload = load_pano</script>
    <script>
      {% for zoom_level, data in panorama.tiles_data.items %}
      zooms[{{ zoom_level }}] = new tzoom({{ zoom_level }});
      zooms[{{ zoom_level }}].ntiles.x = {{ data.ntiles_x }};
      zooms[{{ zoom_level }}].ntiles.y = {{ data.ntiles_y }};
      zooms[{{ zoom_level }}].tile.width = {{ data.tile_width }};
      zooms[{{ zoom_level }}].tile.height = {{ data.tile_height }};
      zooms[{{ zoom_level }}].last_tile.width = {{ data.last_tile_width }};
      zooms[{{ zoom_level }}].last_tile.height = {{ data.last_tile_height }};
      {% endfor %}

      {% for id, refpoint in panorama.refpoints_data %}
      point_list[{{ id }}] = new Array("{{ refpoint.name|escapejs }}", {{ refpoint.distance }}, {{ refpoint.cap }}, {{ refpoint.elevation }}, "{{ refpoint.url }}", "/api/v1/refpoints/{{ refpoint.id }}/");
      {% endfor %}

      ref_points = new Array();
      {% for ref in panorama.references_data %}
      ref_points["{{ ref.name|escapejs }}"] = {url: "/api/v1/references/{{ ref.id }}/", x: {{ ref.x }}, y: {{ ref.y }}, cap: {{ ref.cap }}, ele: {{ ref.elevation }}};
      {% endfor %}
    </script>
    <script src="{% static "panorama/js/hide_n_showForm.js" %}"></script>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $( document ).ready(function() {

	var viewField, viewDirection ;

	var map = L.map('mapid').setView([{{ panorama.latitude }}, {{ panorama.longitude }}], 13);
	// create the tile layer with correct attribution
	var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
	var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});		
	map.addLayer(osm);

	L.marker([{{ panorama.latitude }}, {{ panorama.longitude }}]).addTo(map);

	var bearing = $('#angle_ctrl').val();
    var lat = {{panorama.latitude}};
    var lng = {{panorama.longitude}};
    
    var cap = getCapMinMaxVisible(image_width, {{ panorama.cap_min }}, {{ panorama.cap_max }});
	viewField = getCone({{panorama.latitude}},{{panorama.longitude}},bearing,cap,5000);
    viewDirection = L.polygon([[lat, lng],[destVincenty(lat, lng, bearing, 7000).lat,destVincenty(lat, lng, bearing, 7000).lng]]);
    viewDirection.addTo(map);
	viewField.addTo(map);

	$('#mon-canvas').on('mousemove DOMMouseScroll', function(e) {
	    bearing = $('#angle_ctrl').val();
	    map.removeLayer(viewField);
        map.removeLayer(viewDirection);

        var cap = getCapMinMaxVisible(image_width, {{ panorama.cap_min }}, {{ panorama.cap_max }});
	    viewField = getCone(lat,lng,bearing,cap,5000);
	    viewField.addTo(map);
        viewDirection = L.polygon([[lat, lng],[destVincenty(lat, lng, bearing, 7000).lat,destVincenty(lat, lng, bearing, 7000).lng]]);
        viewDirection.addTo(map);
	    });

      });
    </script>
{% endblock js %}

{% block top-menu-title %}
    <a class="navbar-brand" href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i></a>
    <a class="navbar-brand" href="">{{panorama.name}}</a>
{% endblock %}

{% block top-menu-pano-items %}
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-question-circle"></i>  {% trans "Parameters" %}<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div>
                  <p>{% trans "latitude" %} :   <em><span id="pos_lat">{{ panorama.latitude }}</span>°</em></p>
                  <p>{% trans "longitude" %} : <em><span id="pos_lon">{{ panorama.longitude }}</span>°</em></p>
                  <p>{% trans "altitude" %} : <em><span id="pos_alt">{{ panorama.altitude }}</span> m</em></p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gears"></i>  {% trans "Controls" %}<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                  <label>{% trans "Zoom" %} : <input type="range" min="0" max="2" value="2" id="zoom_ctrl"/></label>
                  <label>{% trans "Cap" %} : <input type="number" min="0" max="360" step="10" value="0" autofocus="" id="angle_ctrl"/></label>
                  <label>{% trans "Élévation" %} : <input type="number" min="-90" max="90" step="1" value="0" autofocus="" id="elvtn_ctrl"/></label>
            </li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-search"></i>  {% trans "Localize" %}<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                  <label class="form_col" title="La latitude ϵ [-90°, 90°]. Ex: 12.55257">{% trans "Latitude" %} :
                    <input  name="loca_latitude" type="number" min="-90" max="90"  id="loca_latitude"/></label>
                  <label class="form_col" title="La longitude ϵ [-180°, 180°]. Ex: 144.14723">{% trans "Longitude" %} :
                    <input name="loca_longitude" type="number" min="-180" max="180" id="loca_longitude"/></label>
                  <label class="form_col" title="L'altitude positive Ex: 170">{% trans "Altitude" %} :
                    <input  name="loca_altitude" type="number" min="-400" id="loca_altitude"/></label>
                  <div class="answer">
                    <input type="button" value="{% trans "Localize" %}" id="loca_button"/>
                    <input type="button" value="{% trans "Delete" %}" id="loca_erase"/>
                  </div>
            </li>
        </ul>
    </li>
{% endblock %}

{% block sidebar %}
{% endblock %}

{% block wrapper-style %}
style="padding-left:0px"
{% endblock %}

{% block content %}
{% endblock content %}

{% block css %}
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
{% endblock css %}

{% block pano %}
    <canvas id="mon-canvas">
      Ce message indique que ce navigateur est vétuste car il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
    </canvas>
    <p id="info"></p>
    <p id="insert"><select id="sel_point" name="known_points">
        {% for id, refpoint in panorama.refpoints_data %}
        <option>{{ refpoint.name }}</option>
        {% endfor %}
      </select>
      <input type="button" id="do-insert" value={% trans "insert" %}/>
      <input type="button" id="do-delete" value={% trans "delete" %}/>
      <input type="button" id="do-cancel" value={% trans "cancel" %}/>
    </p>
    <p id="res"></p>
    <div id="mapid"></div>
{% endblock pano %}