Skip to content

Commit

Permalink
pointer events transparency
Browse files Browse the repository at this point in the history
  • Loading branch information
@krsch
krsch committed Jul 29, 2013
1 parent d217c6a commit 3b66860
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 47 deletions.
7 changes: 7 additions & 0 deletions client/code/app/ui/avatar.js
View file
@@ -0,0 +1,7 @@
"use strict";
$(function(){
var $el = $('.avatar-bg');
$el.on('click', function() {
osm.setView(pc.get('loc'), 15);
});
});
27 changes: 12 additions & 15 deletions client/code/app/ui/index.coffee
View file
Expand Up @@ -5,21 +5,18 @@
character_window = require('./character')
pass_event = require('./pass')

inside_bgava = (e)->
x = e.clientX
y = e.clientY
return y<(220+120) and x<80 or y<(70+7) and x<(190+185) or (x*x + y*y < 200*200)

inside_kman = (e)->
true
require('./avatar')

$ ->
#$('.lt').on(mouse_events, passEvent('.lt', inside_bgava))
pass_event.wrapPassEvent('.lt')
pass_event.wrapPassEvent('.bgava', inside: inside_bgava, hide: '.lt')
pass_event.wrapPassEvent '.kman', inside: inside_kman, fn: (e)->
if e.type == 'click'
character_window.show()
#false
#else true
$('[data-pointer-map]').each ->
img = new Image()
el = $(this)
img.src = el.data('pointer-map')
img.onload = ->
console.log(el)
pass_event.wrapPassEvent(el, inside: pass_event.get_inside_image(img, 10));
img.src = el.data('pointer-map')
$('[data-pointer-none]').each ->
pass_event.wrapPassEvent(this, inside: ->false)
# pass_event.wrapPassEvent('#cont-left-top', inside: ->false)

19 changes: 19 additions & 0 deletions client/code/app/ui/pass.coffee
View file
@@ -1,6 +1,25 @@
"use strict";
mouse_events = 'click dblclick mousedown mouseup mouseover mouseout contextmenu mousenter mouseleave'

exports.get_inside_image = get_inside_image = (img, threshold)->
canvas = document.createElement("canvas"); #Create HTML5 canvas: supported in latest firefox/chrome/safari/konquerer. Support in IE9
canvas.width = img.width; #Set width of your rendertarget
canvas.height = img.height; # \ height \ \ \
ctx = canvas.getContext("2d"); #Get the 2d context [the thing you draw on]
ctx.drawImage(img, 0, 0); #Draw the picture on it.
id = ctx.getImageData(0,0, img.width+1, img.height+1); #Get the pixelData of image
#id.data[(y*width+x)*4+3] for the alpha value of pixel at x,y, 0->255
# console.log("loaded transparency for image #{img.width}x#{img.height}. Array length is #{id.data.length}")
# for i in [3...id.data.length] by 4
# res[i] = id.data[i]
# width = img.width
return (e)->
idx = e.clientY*id.width + e.clientX
if (e.clientY>=id.width || e.clientX>=id.height)
return false
# console.log("x #{e.clientX}, y #{e.clientY}, #{id.data[idx*4+3]}")
id.data[idx*4+3]>threshold

exports.wrapPassEvent = wrapPassEvent = (src, opts)->
$(src).on(mouse_events, opts?.selector ? null, '', passEvent(src, opts))

Expand Down
10 changes: 2 additions & 8 deletions client/css/main/cont-lt.css
View file
Expand Up @@ -4,12 +4,6 @@
position:absolute;
top:0px;
left:0px;
}
.left-top-bg {
width:500px;
height:380px;
top:0px;
left:0px;
background:url(/img/panel-left-top-bg.png);
background-repeat:no-repeat;
}
Expand Down Expand Up @@ -80,7 +74,7 @@
background: url(/img/hp-bg.png);
background-repeat:no-repeat;
}
.avarat-cont-bg {
.avatar-bg {
width:70px;
height:70px;
top:17px;
Expand All @@ -89,7 +83,7 @@
background: url(/img/avatar-cont-bg.png);
background-repeat:no-repeat;
}
.avarat-cont {
.avatar{
width:70px;
height:70px;
top:17px;
Expand Down
46 changes: 22 additions & 24 deletions client/views/main.html
View file
Expand Up @@ -24,35 +24,33 @@
<a href="/logout" class="exet"></a>
<a href="/selectpc" class="relog"></a>
</div>
<div id="cont-left-top">
<div class="left-top-bg">
<a href="#" class="tel-button"></a>
<a href="#" class="info-button"></a>
<a href="#" class="human-button"></a>
<div class="left-top-bg-lvl2">
<div class="avarat-cont">
</div>
<div class="avarat-cont-bg">
</div>
<div class="left-top-bg-lvl3">
</div>
<div class="panel-info-cont">
<p class="panel-info-name">Nina Kodykova</p>
<p class="panel-info-home">Дом "Реверан"</p>
</div>
<div class="mp-cont">
</div>
<div class="hp-cont">
</div>
<div class="left-top-bg" id="cont-left-top" data-pointer-none>
<a href="#" class="tel-button"></a>
<a href="#" class="info-button"></a>
<a href="#" class="human-button"></a>
<div class="left-top-bg-lvl2" data-pointer-none>
<div class="avatar">
</div>
<div class="panel-stealth-cont">
<div class="avatar-bg">
</div>
<div class="panel-stealth-scroll">
<div class="left-top-bg-lvl3" data-pointer-map="/img/panel-left-top-bg-lvl3.png">
</div>
<div class="panel-info-cont">
<p class="panel-info-name">Nina Kodykova</p>
<p class="panel-info-home">Дом "Реверан"</p>
</div>
<div class="mp-cont">
</div>
<div class="hp-cont">
</div>
</div>
<div class="panel-stealth-cont">
</div>
<div class="panel-stealth-scroll">
</div>
</div>
<div id="menu-cont">
<ol class="menu-cont-bg">
<div id="menu-cont" data-pointer-none>
<ol class="menu-cont-bg" data-pointer-map="/img/menu-kon-bg.png">
<li class="button-bg-1">
<a class="button-bg-lvl2" href="#"></a>
</li>
Expand Down

0 comments on commit 3b66860

Please sign in to comment.