mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
make docs + experementing with image crop ui...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d32d0d56f0
commit
1c6a0f1edd
@ -3,18 +3,19 @@
|
||||
# ImageGrid.Viewer Makefile...
|
||||
#
|
||||
#
|
||||
# Make dependencies that need to be installed:
|
||||
# - git
|
||||
# - nodejs / npm
|
||||
# also nodejs-legacy seems to be required by some code...
|
||||
# - npm i -g electron electron-rebuild asar less
|
||||
# - wget
|
||||
# - zip / unzip / zipnote
|
||||
# if zipnote fails this is likely due to a bug in v3.0, to
|
||||
# fix this by either upgrading to 3.1 or a patched version
|
||||
# of 3.0...
|
||||
# for more info and patch see:
|
||||
# https://goo.gl/csQmQo
|
||||
# Make dependencies that need to be installed (make check):
|
||||
# - General
|
||||
# - git
|
||||
# - nodejs / npm
|
||||
# also nodejs-legacy seems to be required by some code...
|
||||
# - npm i -g electron electron-rebuild asar less
|
||||
# - wget
|
||||
# - zip / unzip / zipnote
|
||||
# if zipnote fails this is likely due to a bug in
|
||||
# v3.0, to fix this by either upgrading to 3.1 or
|
||||
# a patched version of 3.0...
|
||||
# for more info and patch see:
|
||||
# https://goo.gl/csQmQo
|
||||
# - Windows
|
||||
# - MSVS -- to build node modules (sharp)
|
||||
# - WiX
|
||||
@ -25,12 +26,34 @@
|
||||
# - web
|
||||
#
|
||||
#
|
||||
# Build targets:
|
||||
# check - check dependencies
|
||||
# dev - build the development environment
|
||||
#
|
||||
# app-dir-full - build full app dir
|
||||
# app-dir-minimal - build minimal app dir (used for web)
|
||||
# NOTE: these are runtime neutral
|
||||
#
|
||||
# web - build a version runnable in browser
|
||||
#
|
||||
# electron-dist - electron distribution (default)
|
||||
# electron-unpacked
|
||||
# - build an unpacked electron app dir
|
||||
# NOTE: this builds to a different directory than
|
||||
# app-dir-*
|
||||
# electron-insr - build electron app installer (XXX not implemented)
|
||||
#
|
||||
# cleanall - clean up fully.
|
||||
# removes: ./targets/, ./build/, ./dist/
|
||||
#
|
||||
#
|
||||
# Variables to control the build:
|
||||
# APP_NAME - Application name
|
||||
# APP_BIN - App binary name (ignored for MacOS)
|
||||
#
|
||||
# ARCH - target achitecture (ia32, x86)
|
||||
# TARGET_OS - target OS (win32, linux, darwin)
|
||||
#
|
||||
# ELECTRON_DOWNOAD_URL
|
||||
# - URL to download electron pinary
|
||||
# ELECTRON_DIST - electron distribution file name pattern
|
||||
@ -53,23 +76,24 @@
|
||||
# load the depending features...
|
||||
#
|
||||
#
|
||||
#
|
||||
#----------------------------------------------------------------------
|
||||
#
|
||||
# ToDo:
|
||||
# - sync version numbers between:
|
||||
# - git tags
|
||||
# - git tags (currently not used)
|
||||
# - package.json
|
||||
# can't use only this because it can't be imported
|
||||
# in browser directly...
|
||||
# ...do we actually need the file:// version working?
|
||||
# - version.js
|
||||
# - app icons...
|
||||
# - might be a good idea to do a no-bin target -- exclude native...
|
||||
# - add a cli-only build
|
||||
# - installers:
|
||||
# - msi (wix)
|
||||
# - deb
|
||||
# - ...
|
||||
# - cross-compiling support...
|
||||
# - rpm
|
||||
# - cross-compiling support (???)
|
||||
# - upstream clean build: git clone -> make dist
|
||||
# - nwjs???
|
||||
#
|
||||
@ -252,6 +276,11 @@ cleanall: clean
|
||||
.PHONY: electron-dist
|
||||
electron-dist: $(DIST_DIR)/$(APP_NAME)-$(VERSION)-$(TARGET_OS)-$(ARCH).zip
|
||||
|
||||
# NOTE: the "/" at the end here is significant...
|
||||
.PHONY: electron-unpacked
|
||||
electron-unpacked: $(BUILD_DIR)/$(APP_NAME)-$(VERSION)-$(TARGET_OS)-$(ARCH)/
|
||||
|
||||
|
||||
#electron-inst: $(DIST_DIR)/$(APP_NAME)-$(VERSION)-$(TARGET_OS)-$(ARCH).msi
|
||||
|
||||
|
||||
@ -263,11 +292,6 @@ dist: electron-dist
|
||||
web: $(DIST_DIR)/$(APP_NAME)-$(VERSION)-web.zip
|
||||
|
||||
|
||||
# NOTE: the "/" at the end here is significant...
|
||||
.PHONY: repack-dir
|
||||
repack-dir: $(BUILD_DIR)/$(APP_NAME)-$(VERSION)-$(TARGET_OS)-$(ARCH)/
|
||||
|
||||
|
||||
|
||||
#**********************************************************************
|
||||
# Dependency checking...
|
||||
|
||||
@ -1,7 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
button .material-icons {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
||||
.crop {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
|
||||
.center {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: -8.5px;
|
||||
margin-top: -8.5px;
|
||||
|
||||
border: solid 1px black;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.center:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: -0.5px;
|
||||
margin-bottom: -0.5px;
|
||||
|
||||
border-bottom: solid 1px black;
|
||||
border-right: solid 1px black;
|
||||
}
|
||||
.center:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-top: -0.5px;
|
||||
margin-left: -0.5px;
|
||||
|
||||
border-top: solid 1px black;
|
||||
border-left: solid 1px black;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/fonts.css">
|
||||
|
||||
<script src="../ext-lib/jquery.js"></script>
|
||||
<script src="../ext-lib/jquery-ui.js"></script>
|
||||
@ -9,24 +76,80 @@
|
||||
<script src="../lib/jli.js"></script>
|
||||
|
||||
<script>
|
||||
/**********************************************************************
|
||||
|
||||
TODO:
|
||||
- rotation & toration handle
|
||||
- touch
|
||||
- multitouch
|
||||
- center point
|
||||
|
||||
|
||||
**********************************************************************/
|
||||
|
||||
var ORIGINAL = 1
|
||||
|
||||
|
||||
$(function(){
|
||||
$('.crop')
|
||||
.resizable({
|
||||
handles: 'all',
|
||||
aspectRatio: true,
|
||||
})
|
||||
.draggable()
|
||||
$('.crop .center')
|
||||
.draggable()
|
||||
})
|
||||
|
||||
|
||||
function setRatio(ratio){
|
||||
var crop = $('.crop')
|
||||
.resizable("option", "aspectRatio", ratio)
|
||||
|
||||
if(ratio === false){
|
||||
return
|
||||
}
|
||||
|
||||
var w = crop.width()
|
||||
var h = crop.height()
|
||||
|
||||
// resize...
|
||||
var t = w + h
|
||||
h = t / (ratio + 1)
|
||||
w = t - h
|
||||
crop
|
||||
.height(h)
|
||||
.width(w)
|
||||
}
|
||||
|
||||
function flip(){
|
||||
var crop = $('.crop')
|
||||
var r = crop.resizable("option", "aspectRatio")
|
||||
r > 0
|
||||
&& setRatio(1/r)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
||||
<button><span title="toggle crop on/off" class="material-icons">crop</span></button>
|
||||
<button onclick="setRatio(ORIGINAL)"><span title="original ratio" class="material-icons">crop_original</span></button>
|
||||
<button onclick="setRatio(false)"><span class="material-icons">crop_free</span></button>
|
||||
<button onclick="setRatio(1)"><span class="material-icons">crop_square</span>1:1</button>
|
||||
<button onclick="setRatio(3/2)"><span class="material-icons">crop_3_2</span>3:2</button>
|
||||
<button onclick="setRatio(16/9)"><span class="material-icons">crop_16_9</span>16:9</button>
|
||||
<button onclick="flip()"><span class="material-icons">crop_rotate</span></button>
|
||||
|
||||
<!-- TODO:
|
||||
- setup standard single image mode
|
||||
- add elements:
|
||||
- crop rectangle
|
||||
- crop preset selector
|
||||
- free form
|
||||
- 2:3
|
||||
- 3:2
|
||||
- 1:1
|
||||
- 16:9
|
||||
- add...
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<div class="crop">
|
||||
<div class="center">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!-- vim:set sw=4 ts=4 : -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user