cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update ui;

Browse Source 
add open and close button to ui;
close intro when new image is uploaded;
This commit is contained in:
Georg Fischer 2013-11-29 22:09:10 +01:00
parent 6a1f4fda80
commit 2810d7ac76
6 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -55,7 +55,8 @@
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<article class="content intro is-active"> <article class="content intro is-active">
<div class="center"> <div class="center">
<p>drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p> <p>drag an image into the browser window to modify it.</p>
<p>this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p> <p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
<button class="close">✕</button> <button class="close">✕</button>
</div> </div>

1
scripts/main.js
View File

@ -51,6 +51,7 @@ require(
'set-new-src' : new Signal(), 'set-new-src' : new Signal(),
'control-set' : new Signal(), 'control-set' : new Signal(),
'control-updated' : new Signal(), 'control-updated' : new Signal(),
'close-intro' : new Signal(),
'image-data-url-requested' : new Signal() 'image-data-url-requested' : new Signal()
} }
}; };

1
scripts/src/dragdrop.js vendored
View File

@ -34,6 +34,7 @@ define(
) )
{ {
signals['load-file'].dispatch( event.dataTransfer.files[0] ); signals['load-file'].dispatch( event.dataTransfer.files[0] );
signals['close-intro'].dispatch();
} }
} }

1
scripts/src/import-button.js
View File

@ -50,6 +50,7 @@ define(
) )
{ {
signals['load-file'].dispatch( event.target.files[0] ); signals['load-file'].dispatch( event.target.files[0] );
signals['close-intro'].dispatch();
} }
} }

1
scripts/src/intro.js
View File

@ -13,6 +13,7 @@ define(
signals = shared.signals; signals = shared.signals;
button.addEventListener( 'click', buttonClicked ); button.addEventListener( 'click', buttonClicked );
close_button.addEventListener( 'click', close ); close_button.addEventListener( 'click', close );
signals['close-intro'].add( close );
} }
function buttonClicked( event ) function buttonClicked( event )

2
styles/main.css
View File

@ -129,6 +129,7 @@ a:hover {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #06f; color: #06f;
cursor: pointer;
} }
.intro-button { .intro-button {
@ -300,7 +301,6 @@ a:hover {
.canvas-wrapper { .canvas-wrapper {
width: 100%; width: 100%;
margin-top: 30px;
position: relative; position: relative;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
line-height: 1.7; line-height: 1.7;