flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 02:40:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

make docs + experementing with image crop ui...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2018-01-16 01:13:45 +03:00
parent d32d0d56f0
commit 1c6a0f1edd
2 changed files with 180 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui (gen4)/Makefile
View File

@ -3,16 +3,17 @@
# ImageGrid.Viewer Makefile... # ImageGrid.Viewer Makefile...
# #
# #
# Make dependencies that need to be installed: # Make dependencies that need to be installed (make check):
# - General
# - git # - git
# - nodejs / npm # - nodejs / npm
# also nodejs-legacy seems to be required by some code... # also nodejs-legacy seems to be required by some code...
# - npm i -g electron electron-rebuild asar less # - npm i -g electron electron-rebuild asar less
# - wget # - wget
# - zip / unzip / zipnote # - zip / unzip / zipnote
# if zipnote fails this is likely due to a bug in v3.0, to # if zipnote fails this is likely due to a bug in
# fix this by either upgrading to 3.1 or a patched version # v3.0, to fix this by either upgrading to 3.1 or
# of 3.0... # a patched version of 3.0...
# for more info and patch see: # for more info and patch see:
# https://goo.gl/csQmQo # https://goo.gl/csQmQo
# - Windows # - Windows
@ -25,12 +26,34 @@
# - web # - 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: # Variables to control the build:
# APP_NAME - Application name # APP_NAME - Application name
# APP_BIN - App binary name (ignored for MacOS) # APP_BIN - App binary name (ignored for MacOS)
# #
# ARCH - target achitecture (ia32, x86) # ARCH - target achitecture (ia32, x86)
# TARGET_OS - target OS (win32, linux, darwin) # TARGET_OS - target OS (win32, linux, darwin)
#
# ELECTRON_DOWNOAD_URL # ELECTRON_DOWNOAD_URL
# - URL to download electron pinary # - URL to download electron pinary
# ELECTRON_DIST - electron distribution file name pattern # ELECTRON_DIST - electron distribution file name pattern
@ -53,23 +76,24 @@
# load the depending features... # load the depending features...
# #
# #
#
#---------------------------------------------------------------------- #----------------------------------------------------------------------
# #
# ToDo: # ToDo:
# - sync version numbers between: # - sync version numbers between:
# - git tags # - git tags (currently not used)
# - package.json # - package.json
# can't use only this because it can't be imported # can't use only this because it can't be imported
# in browser directly... # in browser directly...
# ...do we actually need the file:// version working?
# - version.js # - version.js
# - app icons... # - app icons...
# - might be a good idea to do a no-bin target -- exclude native...
# - add a cli-only build # - add a cli-only build
# - installers: # - installers:
# - msi (wix) # - msi (wix)
# - deb # - deb
# - ... # - rpm
# - cross-compiling support... # - cross-compiling support (???)
# - upstream clean build: git clone -> make dist # - upstream clean build: git clone -> make dist
# - nwjs??? # - nwjs???
# #
@ -252,6 +276,11 @@ cleanall: clean
.PHONY: electron-dist .PHONY: electron-dist
electron-dist: $(DIST_DIR)/$(APP_NAME)-$(VERSION)-$(TARGET_OS)-$(ARCH).zip 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 #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 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... # Dependency checking...

147
ui (gen4)/experiments/image-crop-edit.html
View File

@ -1,7 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<style> <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> </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.js"></script>
<script src="../ext-lib/jquery-ui.js"></script> <script src="../ext-lib/jquery-ui.js"></script>
@ -9,24 +76,80 @@
<script src="../lib/jli.js"></script> <script src="../lib/jli.js"></script>
<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> </script>
<body> <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 <div class="container">
- add elements: <div class="crop">
- crop rectangle <div class="center">
- crop preset selector </div>
- free form </div>
- 2:3 </div>
- 3:2
- 1:1
- 16:9
- add...
-->
</body> </body>
</html> </html>
<!-- vim:set sw=4 ts=4 : -->