├── .editorconfig ├── .gitignore ├── LICENSE ├── LICENSE.md ├── README.md ├── index.html ├── main.js ├── menuTemplate.js ├── package.json ├── src ├── app │ ├── app.css │ ├── app.html │ ├── app.ts │ └── canvasService.ts ├── assets │ ├── css │ │ └── style.css │ ├── data │ │ └── filters.json │ └── images │ │ ├── electrogram-logo-lite.png │ │ ├── electrogram-logo-white.png │ │ ├── electrogram-logo.png │ │ ├── electrogram.icns │ │ └── placeholder.png ├── customDefinitions.d.ts └── package.json ├── tsconfig.json ├── typings.json └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # @AngularClass 2 | # http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | 14 | [*.md] 15 | insert_final_newline = false 16 | trim_trailing_whitespace = false 17 | 18 | [*.json] 19 | insert_final_newline = false 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | build 4 | releases 5 | 6 | .DS_Store 7 | .idea/ 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Auth0, Inc. (http://auth0.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | ================== 3 | 4 | Statement of Purpose 5 | --------------------- 6 | 7 | The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work"). 8 | 9 | Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others. 10 | 11 | For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights. 12 | 13 | 1. Copyright and Related Rights. 14 | -------------------------------- 15 | A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following: 16 | 17 | i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work; 18 | ii. moral rights retained by the original author(s) and/or performer(s); 19 | iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work; 20 | iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below; 21 | v. rights protecting the extraction, dissemination, use and reuse of data in a Work; 22 | vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and 23 | vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof. 24 | 25 | 2. Waiver. 26 | ----------- 27 | To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose. 28 | 29 | 3. Public License Fallback. 30 | ---------------------------- 31 | Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose. 32 | 33 | 4. Limitations and Disclaimers. 34 | -------------------------------- 35 | 36 | a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document. 37 | b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law. 38 | c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work. 39 | d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work. 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Electrogram 2 | 3 | A simple photo editor built with Angular 2 and electron. It allows you to upload/drag-and-drop images, apply filters to them, and save them to your desktop. 4 | 5 | ## Prerequisites 6 | You will need to have [Git](https://git-scm.com/) and [Node.js (5.x and above) + NPM (3.x and above)](http://nodejs.org). We generally suggest installing [`NVM`](https://github.com/creationix/nvm) to manage Node versions. Once those are installed, you will need to install the `typings` NPM package globally. `Typings` handles the typescript definition files for our application. 7 | 8 | ## Getting started 9 | 10 | First you will need to clone the repo; then you can install the necessary NPM packages and run the app. 11 | 12 | ```bash 13 | # Clone the repo and enter it 14 | git clone https://github.com/onehungrymind/electrogram.git 15 | cd electrogram 16 | 17 | # Install dependencies 18 | npm i 19 | 20 | # Install type definitions 21 | typings install 22 | 23 | # To build only 24 | npm run build 25 | 26 | # To build and watch for changes 27 | npm run watch 28 | 29 | # Start the Electron app 30 | npm start # runs "electron src" 31 | ``` 32 | 33 | ## Distributing the app 34 | We've included an NPM script that will build a distribution version of the app for OSX. To use it, execute `npm run distribute`; this will create an OSX app in `releases/Electrogram-darwin-x64` that you can run from your Finder. For more info, check out https://github.com/electron-userland/electron-packager. 35 | 36 | ## The code 37 | Here is a quick overview of the project structure: 38 | ``` 39 | electrogram/ 40 | ├──src/ * contains the electron app script, html file, and all Angular code 41 | │ │ 42 | │ ├──customDefinitions.d.ts * any TypeScript definitions that we need to provide 43 | │ ├──index.html * parent HTML page where we include our built javascript files 44 | │ ├──main.js * NodeJS script that bootstraps the Electron app 45 | │ ├──menuTemplate.js * javascript config for the application menu 46 | │ │ 47 | │ ├──app/ * our Angular app has one "app" component, and this holds all the related code 48 | │ │ ├──app.css * app component styles 49 | │ │ ├──app.html * app component template 50 | │ │ ├──app.ts * app component functionality 51 | │ │ └──canvasService.ts * Angular service that aids with Canvas creation and modification 52 | │ │ 53 | │ └──assets/ * static assets are served here 54 | │ ├──css/ * global styles 55 | │ ├──data/ * a list of available photo filters in JSON format 56 | │ └──images/ * app logo and icon 57 | │ 58 | ├──webpack.config.js * configuration file that Webpack uses to build the app 59 | ├──tsconfig.json * config that webpack uses for typescript 60 | ├──typings.json * our typings manager 61 | └──package.json * what npm uses to manage it's dependencies and scripts 62 | ``` 63 | 64 | ## Author 65 | Luke Ruebbelke 66 | Luke Ruebbelke 67 | | alt text 68 | | alt text 69 | | http://onehungrymind.com 70 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Electron 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const electron = require('electron'); 4 | // Module to control application life. 5 | const app = electron.app; 6 | const Menu = electron.Menu; 7 | let menuTemplate = require('./menuTemplate'); 8 | // Module to create native browser window. 9 | const BrowserWindow = electron.BrowserWindow; 10 | 11 | // Allows for live-reload while developing the app 12 | require('electron-reload')(__dirname + '/build'); 13 | 14 | // Keep a global reference of the window object, if you don't, the window will 15 | // be closed automatically when the JavaScript object is garbage collected. 16 | let mainWindow, menu, dockMenu; 17 | 18 | let createWindow = () => { 19 | // Create the browser window. 20 | mainWindow = new BrowserWindow({width: 800, height: 600}); 21 | 22 | // and load the index.html of the app. 23 | mainWindow.loadURL('file://' + __dirname + '/index.html'); 24 | 25 | // Open the DevTools. 26 | // mainWindow.webContents.openDevTools(); 27 | 28 | // Emitted when the window is closed. 29 | mainWindow.on('closed', () => { 30 | toggleFileTasks(false); 31 | toggleNewWindowTask(true); 32 | 33 | // Dereference the window object, usually you would store windows 34 | // in an array if your app supports multi windows, this is the time 35 | // when you should delete the corresponding element. 36 | mainWindow = null; 37 | }); 38 | 39 | if (!menu) setMenu(); 40 | if (!dockMenu) setDock(); 41 | 42 | toggleFileTasks(true); 43 | toggleNewWindowTask(false); 44 | } 45 | 46 | let toggleFileTasks = isEnabled => { 47 | // The 'File' menu should only be available if there is an open window 48 | menu.items 49 | .find(item => item.label === 'File') 50 | .submenu.items 51 | .forEach(subItem => subItem.enabled = isEnabled); 52 | } 53 | 54 | let toggleNewWindowTask = isEnabled => { 55 | // The 'New Window' task in the main menu and dock menu 56 | // should only be available if there are no open windows 57 | let newWindowMenu = menu.items 58 | .find(item => item.label === 'Window') 59 | .submenu.items 60 | .find(subItem => subItem.label === 'New'); 61 | 62 | let dockWindowMenu = dockMenu.items 63 | .find(item => item.label === 'New Window'); 64 | 65 | newWindowMenu.enabled = isEnabled; 66 | dockWindowMenu.enabled = isEnabled; 67 | } 68 | 69 | let setMenu = () => { 70 | // Set custom click handlers for menu tasks 71 | let fileMenu = menuTemplate 72 | .find(item => item.label === 'File'); 73 | 74 | fileMenu.submenu 75 | .find(item => item.label === 'Open') 76 | .click = () => mainWindow.webContents.send('open-file') 77 | 78 | fileMenu.submenu 79 | .find(item => item.label === 'Save As...') 80 | .click = () => mainWindow.webContents.send('save-file') 81 | 82 | menuTemplate 83 | .find(item => item.label === 'Window') 84 | .submenu 85 | .find(subItem => subItem.label === 'New') 86 | .click = () => createWindow() 87 | 88 | menu = Menu.buildFromTemplate(menuTemplate); 89 | Menu.setApplicationMenu(menu); 90 | } 91 | 92 | let setDock = () => { 93 | // Create a 'New Window' task in the dock menu (OSX only) 94 | dockMenu = Menu.buildFromTemplate([ 95 | { label: 'New Window', click: createWindow } 96 | ]); 97 | app.dock.setMenu(dockMenu); 98 | } 99 | 100 | // This method will be called when Electron has finished 101 | // initialization and is ready to create browser windows. 102 | app.on('ready', createWindow); 103 | 104 | // Quit when all windows are closed. 105 | app.on('window-all-closed', () => { 106 | // On OS X it is common for applications and their menu bar 107 | // to stay active until the user quits explicitly with Cmd + Q 108 | if (process.platform !== 'darwin') { 109 | app.quit(); 110 | } 111 | }); 112 | 113 | app.on('activate', () => { 114 | // On OS X it's common to re-create a window in the app when the 115 | // dock icon is clicked and there are no other windows open. 116 | if (mainWindow === null) createWindow(); 117 | }); 118 | -------------------------------------------------------------------------------- /menuTemplate.js: -------------------------------------------------------------------------------- 1 | const app = require('electron').app; 2 | 3 | // Most of this template is boilerplate; 4 | // the only things added in are the "File" menu and the "New" window task 5 | var template = [ 6 | { 7 | label: 'File', 8 | submenu: [ 9 | { 10 | label: 'Open', 11 | accelerator: 'CmdOrCtrl+o' 12 | // Click handler set in main.js 13 | }, 14 | { 15 | label: 'Save As...', 16 | accelerator: 'CmdOrCtrl+s' 17 | // Click handler set in main.js 18 | } 19 | ] 20 | }, 21 | { 22 | label: 'View', 23 | submenu: [ 24 | { 25 | label: 'Toggle Full Screen', 26 | accelerator: (function() { 27 | if (process.platform == 'darwin') 28 | return 'Ctrl+Command+F'; 29 | else 30 | return 'F11'; 31 | })(), 32 | click: function(item, focusedWindow) { 33 | if (focusedWindow) 34 | focusedWindow.setFullScreen(!focusedWindow.isFullScreen()); 35 | } 36 | }, 37 | { 38 | label: 'Toggle Developer Tools', 39 | accelerator: (function() { 40 | if (process.platform == 'darwin') 41 | return 'Alt+Command+I'; 42 | else 43 | return 'Ctrl+Shift+I'; 44 | })(), 45 | click: function(item, focusedWindow) { 46 | if (focusedWindow) 47 | focusedWindow.webContents.toggleDevTools(); 48 | } 49 | }, 50 | ] 51 | }, 52 | { 53 | label: 'Window', 54 | role: 'window', 55 | submenu: [ 56 | { 57 | label: 'New', 58 | accelerator: 'CmdOrCtrl+N' 59 | // Click handler set in main.js 60 | }, 61 | { 62 | label: 'Minimize', 63 | accelerator: 'CmdOrCtrl+M', 64 | role: 'minimize' 65 | }, 66 | { 67 | label: 'Close', 68 | accelerator: 'CmdOrCtrl+W', 69 | role: 'close' 70 | } 71 | ] 72 | }, 73 | { 74 | label: 'Help', 75 | role: 'help', 76 | submenu: [ 77 | { 78 | label: 'Learn More', 79 | click: function() { window.require('electron').shell.openExternal('http://electron.atom.io') } 80 | }, 81 | ] 82 | }, 83 | ]; 84 | 85 | if (process.platform == 'darwin') { 86 | var name = app.getName(); 87 | template.unshift({ 88 | label: name, 89 | submenu: [ 90 | { 91 | label: 'About ' + name, 92 | role: 'about' 93 | }, 94 | { 95 | type: 'separator' 96 | }, 97 | { 98 | label: 'Services', 99 | role: 'services', 100 | submenu: [] 101 | }, 102 | { 103 | type: 'separator' 104 | }, 105 | { 106 | label: 'Hide ' + name, 107 | accelerator: 'Command+H', 108 | role: 'hide' 109 | }, 110 | { 111 | label: 'Hide Others', 112 | accelerator: 'Command+Alt+H', 113 | role: 'hideothers' 114 | }, 115 | { 116 | label: 'Show All', 117 | role: 'unhide' 118 | }, 119 | { 120 | type: 'separator' 121 | }, 122 | { 123 | label: 'Quit', 124 | accelerator: 'Command+Q', 125 | click: function() { 126 | app.quit(); 127 | } 128 | }, 129 | ] 130 | }); 131 | } 132 | 133 | module.exports = template; 134 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electrogram", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "electron main.js", 8 | "build": "webpack --progress --profile --colors --display-error-details --display-cached", 9 | "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached", 10 | "distribute": "electron-packager . Electrogram --platform=darwin --arch=x64 --out=releases/ --overwrite --icon=src/assets/images/electrogram --asar" 11 | }, 12 | "author": "One Hungry Mind", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "css-loader": "^0.23.1", 16 | "electron-packager": "^7.0.1", 17 | "electron-prebuilt": "^1.0.1", 18 | "electron-reload": "^0.3.0", 19 | "json-loader": "^0.5.4", 20 | "raw-loader": "^0.5.1", 21 | "ts-loader": "^0.8.2", 22 | "typescript": "^1.8.10", 23 | "typings": "^0.8.1", 24 | "uglify-js": "^2.7.0", 25 | "url-loader": "^0.5.7", 26 | "webpack": "^1.13.0" 27 | }, 28 | "dependencies": { 29 | "@angular/common": "2.0.0-rc.5", 30 | "@angular/compiler": "2.0.0-rc.5", 31 | "@angular/core": "2.0.0-rc.5", 32 | "@angular/platform-browser": "2.0.0-rc.5", 33 | "@angular/platform-browser-dynamic": "2.0.0-rc.5", 34 | "es6-shim": "^0.35.1", 35 | "material-design-lite": "^1.1.3", 36 | "reflect-metadata": "0.1.3", 37 | "rxjs": "5.0.0-beta.6", 38 | "systemjs": "0.19.27", 39 | "zone.js": "^0.6.12" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/app.css: -------------------------------------------------------------------------------- 1 | [hidden] { 2 | display: none !important 3 | } 4 | 5 | .mdl-layout__header { 6 | min-height: 65px; 7 | } 8 | 9 | .mdl-layout__header-row { 10 | padding: 10px 15px; 11 | height: 65px; 12 | } 13 | 14 | .dropzone { 15 | min-height: 300px; 16 | text-align: center; 17 | color: white; 18 | position: absolute;; 19 | top: 0; 20 | left: 10px; 21 | bottom: 10px; 22 | right: 10px; 23 | border: 3px dashed transparent; 24 | overflow-y: scroll; 25 | 26 | transition: border-color .15s linear; 27 | } 28 | 29 | .dropzone.dragging { 30 | border-color: rgba(255,255,255, 0.5); 31 | } 32 | 33 | .stage { 34 | text-align: center; 35 | color: whitesmoke; 36 | margin-top: 15px; 37 | } 38 | 39 | .stage h1 { 40 | opacity: 0.5; 41 | } 42 | 43 | .stage .placeholder { 44 | opacity: 0.5; 45 | } 46 | 47 | .stage img { 48 | width: 100%; 49 | margin-top: 15px; 50 | max-width: 200px; 51 | box-shadow: 0 2px 7px -1px rgba(0,0,0,0.5); 52 | border-radius: 3px; 53 | margin-top: 20px; 54 | } 55 | 56 | .stage canvas { 57 | display: block; 58 | margin: 0 auto; 59 | height: 50vmin; 60 | box-shadow: 0 2px 7px -1px rgba(0,0,0,0.5); 61 | border-radius: 3px; 62 | margin-top: 15px; 63 | } 64 | 65 | .carousel { 66 | white-space: nowrap; 67 | overflow: scroll; 68 | margin: 20px; 69 | position: relative; 70 | text-align: center; 71 | } 72 | 73 | .thumb { 74 | width: 150px; 75 | display: inline-block; 76 | margin: 0 10px; 77 | border-radius: 2px; 78 | border: 3px solid rgba(255,255,255,0.7); 79 | } 80 | 81 | .thumb:hover { 82 | cursor: pointer; 83 | box-shadow: 0 5px 15px 0px rgba(0,0,0,0.5); 84 | } 85 | 86 | button { 87 | z-index: 1; 88 | background: rgba(255,255,255, 0.5); 89 | width:45px; 90 | height:45px; 91 | min-width: 45px; 92 | } 93 | 94 | button:hover { 95 | background: rgba(255,255,255, 0.7); 96 | } 97 | 98 | button:first-of-type { 99 | margin-right: 10px; 100 | } 101 | 102 | .control { 103 | margin-bottom: 15px; 104 | } 105 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Electrogram 5 |
6 | 14 |
15 |
16 |
17 |
18 | 19 |
25 | 26 |
27 |
28 |

DROP A PNG OR JPG

29 | 30 |
31 | 32 |
33 | 34 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /src/app/app.ts: -------------------------------------------------------------------------------- 1 | let filters = require('./../assets/data/filters.json'); 2 | 3 | import { bootstrap } from '@angular/platform-browser-dynamic'; 4 | import { ViewChild, Input, Component, ChangeDetectorRef, ElementRef } from '@angular/core'; 5 | import { CanvasService } from './canvasService'; 6 | import { remote, ipcRenderer } from 'electron'; 7 | import { writeFile } from 'fs'; 8 | 9 | let {dialog} = remote; 10 | 11 | @Component({ 12 | selector: '[thumbnail]', 13 | template: ``, 14 | providers: [ CanvasService ], 15 | styles: [` 16 | img, canvas { 17 | width: 150px; 18 | } 19 | `] 20 | }) 21 | 22 | class Thumbnail { 23 | @Input() filter: string = ''; 24 | @Input() image: HTMLImageElement; 25 | @ViewChild('childCanvas') childCanvas: ElementRef; 26 | 27 | constructor(private _cs: CanvasService) {}; 28 | 29 | ngAfterViewInit() { 30 | if (this.image && this.childCanvas) { 31 | this.initCanvas(); 32 | } 33 | } 34 | 35 | ngOnChanges() { 36 | if (this.image && this.childCanvas) { 37 | this.initCanvas(); 38 | } 39 | } 40 | 41 | initCanvas() { 42 | this._cs.initCanvas(this.childCanvas.nativeElement, this.image); 43 | 44 | let filterName = this.filter.toLowerCase(); 45 | 46 | if (this._cs[filterName]) 47 | this._cs[filterName](); 48 | else 49 | this._cs.resetCanvas(); 50 | } 51 | } 52 | 53 | @Component({ 54 | selector: 'app', 55 | template: require('./app.html'), 56 | styles: [ require('./app.css') ], 57 | providers: [ CanvasService ], 58 | directives: [ Thumbnail ] 59 | }) 60 | 61 | export class App { 62 | @ViewChild('canvas') canvas: ElementRef; 63 | 64 | imageElement: HTMLImageElement; 65 | filters: Array = filters; 66 | dropzoneStylesVisible: boolean = true; 67 | currentFilter: string = ''; 68 | showDropzone: boolean = true; 69 | openDialogActive: boolean = false; 70 | saveDialogActive: boolean = false; 71 | 72 | constructor( 73 | private _cd: ChangeDetectorRef, 74 | private _cs: CanvasService 75 | ) { 76 | ipcRenderer.on('open-file', this.open.bind(this)); 77 | ipcRenderer.on('save-file', this.save.bind(this)); 78 | } 79 | 80 | showDropzoneStyles() { 81 | this.dropzoneStylesVisible = true; 82 | return false; 83 | } 84 | 85 | hideDropzoneStyles() { 86 | this.dropzoneStylesVisible = false; 87 | return false; 88 | } 89 | 90 | handleDrop(e) { 91 | e.preventDefault(); 92 | var files: File = e.dataTransfer.files; 93 | 94 | Object.keys(files).forEach((key) => { 95 | if(files[key].type === 'image/png' || files[key].type === 'image/jpeg') { 96 | this.loadImage(files[key].path); 97 | } 98 | else { 99 | alert('File must be a PNG or JPEG!'); 100 | } 101 | }); 102 | 103 | 104 | return false; 105 | } 106 | 107 | loadImage(fileName) { 108 | let image: HTMLImageElement = new Image(); 109 | image.onload = this.imageLoaded.bind(this, this.canvas.nativeElement, image); 110 | image.src = fileName; 111 | } 112 | 113 | open() { 114 | if (!this.openDialogActive && !this.saveDialogActive) { 115 | this.openDialogActive = true; 116 | dialog.showOpenDialog( (fileNames) => { 117 | this.openDialogActive = false; 118 | if (fileNames === undefined) return; 119 | let fileName = fileNames[0]; 120 | this.loadImage(fileName) 121 | }); 122 | } 123 | } 124 | 125 | save() { 126 | if (!this.saveDialogActive && !this.openDialogActive) { 127 | this.saveDialogActive = true; 128 | dialog.showSaveDialog({ filters: [ 129 | { name: 'png', extensions: ['png'] } 130 | ]}, this.saveFile.bind(this)); 131 | } 132 | } 133 | 134 | saveFile(fileName) { 135 | this.saveDialogActive = false; 136 | if (fileName === undefined) return; 137 | 138 | let buffer = this._cs.canvasBuffer(this.canvas.nativeElement, 'image/png'); 139 | 140 | writeFile(fileName, buffer, this.saveFileCallback.bind(this, fileName)); 141 | } 142 | 143 | saveFileCallback(fileName, err) { 144 | let myNotification: Notification; 145 | if (err) { 146 | console.log(err); 147 | myNotification = new Notification('Error', { 148 | body: 'There was an error; please try again' 149 | }); 150 | } else { 151 | myNotification = new Notification('Image Saved', { 152 | body: fileName 153 | }); 154 | } 155 | } 156 | 157 | setFilter(value) { 158 | let filterName = value.toLowerCase(); 159 | 160 | if (this._cs[filterName]) 161 | this._cs[filterName](); 162 | else 163 | this._cs.resetCanvas(); 164 | } 165 | 166 | imageLoaded(canvas, image) { 167 | this.imageElement = image; 168 | this._cs.initCanvas(canvas, image); 169 | 170 | this.showDropzone = false; 171 | this.dropzoneStylesVisible = false; 172 | 173 | this._cd.detectChanges(); 174 | } 175 | } 176 | 177 | bootstrap(App); 178 | -------------------------------------------------------------------------------- /src/app/canvasService.ts: -------------------------------------------------------------------------------- 1 | import {nativeImage} from 'electron'; 2 | 3 | class CanvasService { 4 | context: CanvasRenderingContext2D; 5 | original: ImageData; 6 | image: HTMLImageElement; 7 | 8 | initCanvas(canvas, image) { 9 | let context = canvas.getContext('2d'); 10 | canvas.width = image.width; 11 | canvas.height = image.height; 12 | context.drawImage(image, 0, 0, image.width, image.height); 13 | 14 | this.setImage(image); 15 | this.setContext(context); 16 | this.setOriginalData(this.getData()); 17 | } 18 | 19 | setImage(image) { 20 | this.image = image; 21 | } 22 | 23 | setContext(context) { 24 | this.context = context; 25 | } 26 | 27 | setOriginalData(original) { 28 | this.original = original; 29 | } 30 | 31 | getData() { 32 | return this.context.getImageData(0, 0, this.image.width, this.image.height); 33 | } 34 | 35 | setData(data) { 36 | return this.context.putImageData(data, 0, 0); 37 | } 38 | 39 | resetCanvas() { 40 | return this.context.putImageData(this.original, 0, 0); 41 | } 42 | 43 | transform(cb, factor) { 44 | let olddata = this.original; 45 | let oldpx = olddata.data; 46 | let newdata = this.context.createImageData(olddata); 47 | let newpx = newdata.data 48 | let res = []; 49 | let len = newpx.length; 50 | for (var i = 0; i < len; i += 4) { 51 | res = cb.call(this, oldpx[i], oldpx[i+1], oldpx[i+2], oldpx[i+3], factor, i); 52 | newpx[i] = res[0]; // r 53 | newpx[i+1] = res[1]; // g 54 | newpx[i+2] = res[2]; // b 55 | newpx[i+3] = res[3]; // a 56 | } 57 | 58 | this.setData(newdata); 59 | } 60 | 61 | // Filter functions 62 | brighten() { 63 | let callback = (r, g, b, a, factor) => { 64 | return [r + factor, g + factor, b + factor, 255]; 65 | } 66 | 67 | this.transform(callback, 100); 68 | } 69 | 70 | grayscale() { 71 | let callback = (r, g, b) => { 72 | let avg = 0.3 * r + 0.59 * g + 0.11 * b; 73 | return [avg, avg, avg, 255]; 74 | } 75 | 76 | this.transform(callback, 1); 77 | } 78 | 79 | sepia() { 80 | let callback = (r, g, b) => { 81 | var avg = 0.3 * r + 0.59 * g + 0.11 * b; 82 | return [avg + 100, avg + 50, avg, 255]; 83 | } 84 | 85 | this.transform(callback, 1); 86 | } 87 | 88 | negative() { 89 | let callback = (r, g, b) => { 90 | return [255 - r, 255 - g, 255 - b, 255]; 91 | } 92 | 93 | this.transform(callback, 1); 94 | } 95 | 96 | noise() { 97 | let callback = (r, g, b, a, factor) => { 98 | var rand = (0.5 - Math.random()) * factor; 99 | return [r + rand, g + rand, b + rand, 255]; 100 | } 101 | 102 | this.transform(callback, 100); 103 | } 104 | 105 | canvasBuffer(canvas, type, quality?) { 106 | let types = ['image/png', 'image/jpg', 'image/jpeg'] 107 | 108 | type = type || 'image/png' 109 | quality = typeof quality === 'number' ? quality : 0.9 110 | 111 | if (types.indexOf(type) === -1) { 112 | throw new Error('unsupported image type ' + type) 113 | } 114 | 115 | let data = canvas.toDataURL(type, quality) 116 | let img = nativeImage.createFromDataURL(data) // electron v0.36+ 117 | if (/^image\/jpe?g$/.test(type)) { 118 | return img.toJpeg(Math.floor(quality * 100)) 119 | } else { 120 | return img.toPng() 121 | } 122 | } 123 | } 124 | 125 | export { CanvasService } 126 | -------------------------------------------------------------------------------- /src/assets/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: -webkit-linear-gradient(top, #4b6cb7, #182848); 3 | } 4 | 5 | .mdl-layout__header-row { 6 | /*padding-left: 16px;*/ 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/data/filters.json: -------------------------------------------------------------------------------- 1 | [ 2 | "#noFilter", 3 | "Brighten", 4 | "Grayscale", 5 | "Sepia", 6 | "Negative", 7 | "Noise" 8 | ] 9 | -------------------------------------------------------------------------------- /src/assets/images/electrogram-logo-lite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onehungrymind/electrogram/6230a5b60231080960af4dd8dc6a76d2523dc4f5/src/assets/images/electrogram-logo-lite.png -------------------------------------------------------------------------------- /src/assets/images/electrogram-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onehungrymind/electrogram/6230a5b60231080960af4dd8dc6a76d2523dc4f5/src/assets/images/electrogram-logo-white.png -------------------------------------------------------------------------------- /src/assets/images/electrogram-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onehungrymind/electrogram/6230a5b60231080960af4dd8dc6a76d2523dc4f5/src/assets/images/electrogram-logo.png -------------------------------------------------------------------------------- /src/assets/images/electrogram.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onehungrymind/electrogram/6230a5b60231080960af4dd8dc6a76d2523dc4f5/src/assets/images/electrogram.icns -------------------------------------------------------------------------------- /src/assets/images/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onehungrymind/electrogram/6230a5b60231080960af4dd8dc6a76d2523dc4f5/src/assets/images/placeholder.png -------------------------------------------------------------------------------- /src/customDefinitions.d.ts: -------------------------------------------------------------------------------- 1 | declare class Notification { 2 | constructor(title: string, options?: Object) 3 | } 4 | -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electrogram-app", 3 | "version": "0.0.1", 4 | "main": "main.js" 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "sourceMap": true 8 | }, 9 | "exclude": [ 10 | "node_modules", 11 | "releases", 12 | "typings/main.d.ts", 13 | "typings/main" 14 | ], 15 | "filesGlob": [ 16 | "./src/customDefinitions.d.ts", 17 | "./src/app/**/*.ts", 18 | "!./node_modules/**/*.ts", 19 | "typings/index.d.ts" 20 | ], 21 | "awesomeTypescriptLoaderOptions": { 22 | "resolveGlobs": true, 23 | "forkChecker": true 24 | }, 25 | "compileOnSave": false, 26 | "buildOnSave": false, 27 | "atom": { "rewriteTsconfig": false } 28 | } 29 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": {}, 3 | "devDependencies": {}, 4 | "globalDependencies": { 5 | "zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89", 6 | "angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d", 7 | "core-js": "registry:dt/core-js#0.0.0+20160317120654", 8 | "github-electron": "registry:dt/github-electron#0.37.6+20160417155838", 9 | "hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7", 10 | "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c", 11 | "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729", 12 | "selenium-webdriver": "github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea", 13 | "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 4 | 5 | module.exports = { 6 | devtool: 'source-map', 7 | debug: true, 8 | 9 | entry: { 10 | '@angular': [ 11 | 'rxjs', 12 | 'reflect-metadata', 13 | 'zone.js' 14 | ], 15 | 'common': ['es6-shim'], 16 | 'app': './src/app/app.ts' 17 | }, 18 | 19 | output: { 20 | path: __dirname + '/build/', 21 | publicPath: 'build/', 22 | filename: '[name].js', 23 | sourceMapFilename: '[name].js.map', 24 | chunkFilename: '[id].chunk.js' 25 | }, 26 | 27 | resolve: { 28 | extensions: ['','.ts','.js','.json', '.css', '.html'] 29 | }, 30 | 31 | module: { 32 | loaders: [ 33 | { 34 | test: /\.ts$/, 35 | loader: 'ts', 36 | exclude: [ /node_modules/, /releases/ ] 37 | }, 38 | { 39 | test: /\.json$/, 40 | loader: 'json' 41 | }, 42 | { 43 | test: /\.(css|html)$/, 44 | loader: 'raw' 45 | }, 46 | { 47 | test: /\.(png|jpg)$/, 48 | loader: 'url?limit=10000' 49 | } 50 | ] 51 | }, 52 | 53 | plugins: [ 54 | new CommonsChunkPlugin({ names: ['@angular', 'common'], minChunks: Infinity }) 55 | ], 56 | target:'electron-renderer' 57 | }; 58 | --------------------------------------------------------------------------------