Skip to content

Instantly share code, notes, and snippets.

@BuildWithLal

BuildWithLal/a.html

Created June 23, 2018 05:55
Show Gist options
  • Save BuildWithLal/f8576e884f70d28b6bbecd8ad0a07e84 to your computer and use it in GitHub Desktop.
Save BuildWithLal/f8576e884f70d28b6bbecd8ad0a07e84 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
a.html
html file(index.html)
{% extends 'base.html' %}
{% block content %}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#image_Modal">Add Image</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#video_Modal">Add Video</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#file_Modal">Add File</button>
<button type="button" class="btn btn-info btn-lg" onclick="inserdata();">Publish</button><br><br><br>
{% include 'evolve_invoapp/partial/image_form.html' with data=data %}
{% include 'evolve_invoapp/partial/video_form.html' with data=data %}
{% include 'evolve_invoapp/partial/file_form.html' with data=data %}
{{ obj.name }}
<!--{{ obj.scene_number }}-->
{{ obj.asset_type }}
{{ obj.value }}
<canvas id="c" style="border:1px solid black;"></canvas><br><br><br>
{% if obj.image %}
<!--<img class="edit-image" style="visibility: hidden" src="/evolve-invo/media/{{obj.image}}" width="200" height="150" />-->
<img src="/evolve-invo/media/{{obj.image}}" style="visibility: hidden" id="my-image">
{% endif %}
{% if obj.video %}
<!--<video controls src="/evolve-invo/media/{{obj.pk}}.mp4" width="200" height="150"></video>-->
<!--<canvas id="cc"></canvas>-->
<video controls src="/evolve-invo/media/{{obj.pk}}.mp4" style="visibility: hidden" width="200" height="150" id="my-video"></video>
{% endif %}
<!--<div id="container"></div>-->
<!--<div id="draggable" class="ui-widget-content">-->
<!--{% if obj.video %}-->
<!--<video controls src="/evolve-invo/media/{{obj.pk}}.mp4" width="200" height="150"></video>-->
<!--{% endif %}-->
{% if obj.file %}
<a href="/evolve-invo/media/{{ obj.file }}">{{ obj.file }}</a>
{% endif %}
<!--</div>-->
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />-->
<div id="demoTabs">
<ul>
<li><a href="#Scene">Scene</a></li>
</ul>
<div id="Scene"></div>
</div>
<br>
<label>Index No of Tab to be Removed (zero based):</label>
<input for="indexValue" id="indexValue"><p>
<button type="button" id="removeTabs">Remove!</button>
<button type="button" id="addTabs">Add a new tab!</button>
{% endblock content %}
<!--<script type="text/javascript">-->
<!--$(document).ready(function() {-->
<!--alert("ca36ll");-->
<!--$("#demoTabs").tabs();-->
<!--$("#removeTabs").click(function() {-->
<!--alert("call");-->
<!--var tabIndex = parseInt($("#indexValue").val(), 10);-->
<!--var tab = $( "#demoTabs" ).find(".ui-tabs-nav li:eq(" + tabIndex + ")").remove();-->
<!--$("#demoTabs").tabs("refresh");-->
<!--});-->
<!--$("#addTabs").click(function() {-->
<!--alert("call");-->
<!--$("<li><a href='myTab.txt'>Scene</a></li>").appendTo("#demoTabs .ui-tabs-nav");-->
<!--$("#demoTabs").tabs("refresh");-->
<!--});-->
<!--});-->
<!--</Script>-->
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
</head>
<body>
{% block content %}
{% endblock content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<!--<script src="https://cdn.rawgit.com/konvajs/konva/2.1.3/konva.min.js"></script>-->
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
<!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{% static 'js/image_edit.js' %}"></script>
<script src="{% static 'js/publishbutton.js' %}"></script>
<!--<script src="{% static 'js/video_file_edit.js' %}"></script>-->
</body>
</html>
js file(image_edit.js)
// for image_edit
var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(800);
var video1El = document.getElementById('my-video');
// var imgElement = document.getElementById('my-image');
// canvas.loadFromJSON('{"objects":[{"type":"image","originX":"center","originY":"center","left":110,"top":170,"width":150,"height":150,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"src":"http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg","filters":[]}],"background":""}');
// for video_edit
var video1 = new fabric.Image(video1El, {
left: 200,
top: 300,
angle: -15,
originX: 'center',
originY: 'center'
});
canvas.add(video1);
video1.getElement().play();
// adding webcam video element
getUserMedia({video: true}, function getWebcamAllowed(localMediaStream) {
var video = document.getElementById('video1');
video.src = window.URL.createObjectURL(localMediaStream);
canvas.add(video1);
// canvas.add(imgInstance);
video1.moveTo(0); // move webcam element to back of zIndex stack
video1.getElement().play();
}, function getWebcamNotAllowed(e) {
// block will be hit if user selects "no" for browser "allow webcam access" prompt
});
// making navigator.getUserMedia cross-browser compatible
function getUserMedia() {
var userMediaFunc = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (userMediaFunc) userMediaFunc.apply(navigator, arguments);
}
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
canvas.on({
'object:moving': onChange,
'object:scaling': onChange,
'object:rotating': onChange,
});
function onChange(options) {
console.log("ds")
console.log(JSON.stringify(canvas));
options.target.setCoords();
canvas.forEachObject(function(obj) {
if (obj === options.target) return;
obj.set('opacity' ,options.target.intersectsWithObject(obj) ? 0.5 : 1);
});
}
$(document).ready(function() {
alert("call");
$("#demoTabs").tabs();
$("#removeTabs").click(function() {
alert("call");
var tabIndex = parseInt($("#indexValue").val(), 10);
var tab = $( "#demoTabs" ).find(".ui-tabs-nav li:eq(" + tabIndex + ")").remove();
$("#demoTabs").tabs("refresh");
});
$("#addTabs").click(function() {
alert("call");
$("<li><a href='myTab.txt'>Scene</a></li>").appendTo("#demoTabs .ui-tabs-nav");
$("#demoTabs").tabs("refresh");
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment