Studio: Basic layout, shows textures and allows searching by name
This commit is contained in:
Felipe Martín
parent
2431d62c8f
commit
a97e591158
|
|
@ -1,17 +1,37 @@
|
|||
# Common
|
||||
.tox/
|
||||
*.pyc
|
||||
/virtualenv
|
||||
/minecraftcodex/herobrine/local_settings.py
|
||||
/MANIFEST
|
||||
|
||||
# Configs
|
||||
/minecraftcodex/herobrine/local_settings.py
|
||||
|
||||
# CSS
|
||||
|
||||
# Database
|
||||
/minecraftcodex/database/static/lib/bootstrap.css
|
||||
/minecraftcodex/database/static/lib/responsive.css
|
||||
/minecraftcodex/database/static/css/*.css
|
||||
/minecraftcodex/database/static/js/*.js
|
||||
|
||||
# Blog
|
||||
/minecraftcodex/blog/static/js/*.js
|
||||
|
||||
# Studio
|
||||
/minecraftcodex/studio/static/css/*.css
|
||||
/minecraftcodex/studio/static/js/*.js
|
||||
|
||||
# Utils
|
||||
/utils/miner/classes
|
||||
/utils/miner/jarfile
|
||||
/utils/miner/*.jar
|
||||
/utils/miner/*.json
|
||||
/minecraftcodex/database/static/css/*.css
|
||||
/minecraftcodex/database/static/js/*.js
|
||||
/minecraftcodex/blog/static/js/*.js
|
||||
|
||||
# Backups and local development
|
||||
/*.json
|
||||
/dev_ddbb.sqlite
|
||||
|
||||
# Shitty folders
|
||||
.sass-cache
|
||||
__pycache__
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
Studio =
|
||||
domElement: null
|
||||
|
||||
renderer: null
|
||||
width: 600
|
||||
height: 600
|
||||
|
||||
scene: null
|
||||
|
||||
camera: null
|
||||
|
||||
lights: []
|
||||
_lights: {}
|
||||
|
||||
objects: []
|
||||
_objects: {}
|
||||
|
||||
# Methods
|
||||
checkWebGLsupport: ->
|
||||
return !!window.WebGLRenderingContext;
|
||||
|
||||
init: (dom, width, height) ->
|
||||
if not @checkWebGLsupport()
|
||||
return false
|
||||
|
||||
@domElement = document.querySelector dom
|
||||
|
||||
@renderer = new THREE.WebGLRenderer()
|
||||
@renderer.setSize width, height
|
||||
|
||||
@domElement.appendChild @renderer.domElement
|
||||
|
||||
|
||||
window.Studio = Studio
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,42 @@
|
|||
.studio-workspace
|
||||
margin: 0 auto
|
||||
width: $workspace-width
|
||||
|
||||
.panel
|
||||
display: inline-block
|
||||
|
||||
.panel-canvas
|
||||
display: block
|
||||
margin: 0 auto
|
||||
width: $canvas-width
|
||||
|
||||
.studio-canvas
|
||||
width: $canvas-width
|
||||
height: $canvas-width
|
||||
|
||||
.panel-left
|
||||
left: 10px
|
||||
position: fixed
|
||||
top: $top-margin
|
||||
|
||||
width: $panel-width
|
||||
|
||||
.texture-list
|
||||
max-height: 500px
|
||||
overflow-x: hidden
|
||||
overflow-y: scroll
|
||||
|
||||
.item
|
||||
display: inline-block
|
||||
width: (100/$textures-per-row) - 1%
|
||||
|
||||
&.hide
|
||||
display: none
|
||||
|
||||
|
||||
.panel-right
|
||||
position: fixed
|
||||
right: 10px
|
||||
top: $top-margin
|
||||
|
||||
width: $panel-width
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Sizes
|
||||
$top-margin: 60px
|
||||
|
||||
$workspace-width: 100%
|
||||
$panel-width: 400px
|
||||
$canvas-width: 700px
|
||||
|
||||
$textures-per-row: 8
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import variables.sass
|
||||
@import panels.sass
|
||||
|
|
@ -1,9 +1,47 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/static/css/studio.css" />
|
||||
{{ super() }}
|
||||
<script type="text/javascript" src="/static/lib/jquery.2.0.0.js"></script>
|
||||
<script type="text/javascript" src="/static/lib/three.r58.js"></script>
|
||||
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-transition.js"></script>
|
||||
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-dropdown.js"></script>
|
||||
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-collapse.js"></script>
|
||||
<script type="text/javascript" src="/static/js/studio.js"></script>
|
||||
<script defer="defer">
|
||||
window.onload = function() {
|
||||
// Initialize Studio
|
||||
mcstudio = window.Studio
|
||||
mcstudio.init('.studio-canvas', 600, 600);
|
||||
|
||||
// Texture search
|
||||
$('.texture-list .item').hover(function() {
|
||||
$('div.texture-name').html($(this).attr('data-name'))
|
||||
})
|
||||
|
||||
$('div.texture-list').on('mouseout', function() {
|
||||
$('div.texture-name').html('')
|
||||
})
|
||||
|
||||
$('input.texture-search').on('keyup', function(event) {
|
||||
if (event.which == 13 || event.keyCode == 13) {
|
||||
var value = $(this).val()
|
||||
if (value == '') {
|
||||
$('.texture-list .item').removeClass('hide')
|
||||
} else {
|
||||
$('.texture-list .item').addClass('hide')
|
||||
$('.texture-list [data-name*="' + value + '"]').removeClass('hide')
|
||||
}
|
||||
}
|
||||
|
||||
if (event.which == 27 || event.keyCode == 27) {
|
||||
$(this).val('')
|
||||
$('.texture-list .item').removeClass('hide')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
|
|
@ -12,7 +50,7 @@
|
|||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="/">
|
||||
Minecraft Codex : Studio
|
||||
MinecraftCodex : Studio
|
||||
</a>
|
||||
{#<div class="nav-collapse">#}
|
||||
<div>
|
||||
|
|
@ -46,15 +84,63 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="studio-editor">
|
||||
<div class="span4">
|
||||
<div class="well">Left</div>
|
||||
<div class="studio-workspace">
|
||||
<div class="panel panel-left">
|
||||
<div class="well">
|
||||
<div class="texture-name pull-right"></div>
|
||||
<h3 class="margin-none">Textures</h3>
|
||||
<div class="text-center">
|
||||
<input type="text" class="texture-search" placeholder="Search textures" />
|
||||
</div>
|
||||
<hr class="margin-none"/>
|
||||
<div class="texture-list">
|
||||
{% for item in textures %}
|
||||
<div class="item" data-type="texture" data-name="{{ item.name }}">
|
||||
<div class="codexicon x2">
|
||||
<img src="/static/textures/{{ item.get_image(2) }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<div class="well">Canvas</div>
|
||||
<div class="panel panel-canvas">
|
||||
<div class="well">
|
||||
<div class="studio-canvas"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="well">Right</div>
|
||||
<div class="panel panel-right">
|
||||
<div class="well">
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-small pull-right"
|
||||
data-toggle="collapse" data-target="#camera">
|
||||
Hide
|
||||
</button>
|
||||
<h3 class="margin-none">Camera</h3>
|
||||
<div id="camera" class="collapse in">
|
||||
here things
|
||||
</div>
|
||||
<hr />
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-small pull-right"
|
||||
data-toggle="collapse" data-target="#objects">
|
||||
Hide
|
||||
</button>
|
||||
<h3 class="margin-none">Objects</h3>
|
||||
<div id="objects" class="collapse in">
|
||||
here things
|
||||
</div>
|
||||
<hr />
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-small pull-right"
|
||||
data-toggle="collapse" data-target="#lights">
|
||||
Hide
|
||||
</button>
|
||||
<h3 class="margin-none">Lights</h3>
|
||||
<div id="lights" class="collapse in">
|
||||
here things
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
from django.shortcuts import render_to_response
|
||||
from django.template import RequestContext
|
||||
from database.models import Texture
|
||||
|
||||
|
||||
def main(request):
|
||||
context = RequestContext(request)
|
||||
textures = Texture.objects.all()
|
||||
|
||||
data = {
|
||||
'textures': textures
|
||||
}
|
||||
|
||||
context = RequestContext(request, data)
|
||||
return render_to_response('studio/main.html', context_instance=context)
|
||||
|
|
|
|||
Loading…
Reference in New Issue