add clipper

Clipper/README.md

@@ -0,0 +1,13 @@
+# Clipper
+
+VDE screen capture tool.
+
+Clipper use `html2canvas` to capture AntOS desktop or a specific window.
+It is able to crop the captured image before saving to a file
+
+## Change logs
+* v0.1.0-a initial version
+
+
+## Credit
+* [html2canvas](https://html2canvas.hertzen.com/)

Clipper/assets/scheme.html

@@ -0,0 +1,15 @@
+<afx-app-window apptitle="Clipper" width="500" height="400" data-id="Clipper">
+    <afx-hbox >
+        <afx-vbox>
+            <div data-height="30" data-id="toolbar">
+                <afx-button data-id="btnCptScreen" text="__(Capture screen)" iconclass="fa fa-camera-retro"></afx-button>
+                <afx-button data-id="btnCptWindow" text="__(Capture a window)" iconclass="fa  fa-window-maximize"></afx-button>
+                 <afx-button data-id="btnCrop" text="__(Crop)" toggle="true" selected="false" iconclass="fa fa-crop"></afx-button>
+            </div>
+            <div data-id="wrapper">
+                <canvas data-id="scene"></canvas>
+                <div data-id="cropwin"></div>
+            </div>
+        </afx-vbox>
+    </afx-hbox>
+</afx-app-window>

Clipper/build/debug/README.md

@@ -0,0 +1,13 @@
+# Clipper
+
+VDE screen capture tool.
+
+Clipper use `html2canvas` to capture AntOS desktop or a specific window.
+It is able to crop the captured image before saving to a file
+
+## Change logs
+* v0.1.0-a initial version
+
+
+## Credit
+* [html2canvas](https://html2canvas.hertzen.com/)

Clipper/build/debug/main.css

@@ -0,0 +1,21 @@
+
+afx-app-window[data-id = "Clipper"] div[data-id = "wrapper"] {
+    overflow: auto;
+    background-image: url("bg.jpg");
+    background-repeat: repeat;
+}
+
+afx-app-window[data-id = "Clipper"] div[data-id = "toolbar"] {
+    padding-left: 5px;
+    display:inline-block;
+    text-align:left;
+}
+
+afx-app-window[data-id = "Clipper"] afx-button[data-id = "btnCrop"] button.selected {
+    background-color: #116cd6;
+    color:white;
+}
+
+afx-app-window[data-id = "Clipper"] div[data-id = "cropwin"] {
+    border:1px dashed chocolate;
+}

Clipper/build/debug/package.json

@@ -0,0 +1,14 @@
+{
+    "app":"Clipper",
+    "name":"Clipper",
+    "description":"Clipper",
+    "info":{
+        "author": "",
+        "email": ""
+    },
+    "version":"0.1.0-a",
+    "category":"Other",
+    "iconclass":"fa fa-scissors",
+    "mimes":["none"],
+    "locale": {}
+}

Clipper/build/debug/scheme.html

@@ -0,0 +1,15 @@
+<afx-app-window apptitle="Clipper" width="500" height="400" data-id="Clipper">
+    <afx-hbox >
+        <afx-vbox>
+            <div data-height="30" data-id="toolbar">
+                <afx-button data-id="btnCptScreen" text="__(Capture screen)" iconclass="fa fa-camera-retro"></afx-button>
+                <afx-button data-id="btnCptWindow" text="__(Capture a window)" iconclass="fa  fa-window-maximize"></afx-button>
+                 <afx-button data-id="btnCrop" text="__(Crop)" toggle="true" selected="false" iconclass="fa fa-crop"></afx-button>
+            </div>
+            <div data-id="wrapper">
+                <canvas data-id="scene"></canvas>
+                <div data-id="cropwin"></div>
+            </div>
+        </afx-vbox>
+    </afx-hbox>
+</afx-app-window>

Clipper/coffees/main.coffee

@@ -0,0 +1,156 @@
+class Clipper extends this.OS.application.BaseApplication
+    constructor: ( args ) ->
+        super "Clipper", args
+    
+    main: () ->
+        @scene = @find("scene")
+        @wrapper = @find("wrapper")
+        @cropwin = @find("cropwin")
+        @dirty = false
+        @currfile = "Untitled".asFileHandle()
+        $(@cropwin)
+            .css "position", "absolute"
+            .hide()
+        @find("btnCptScreen").onbtclick = () =>
+            @capture document.body, true
+        
+        @find("btnCptWindow").onbtclick = () =>
+            # select a window
+            wins = []
+            for k, v of OS.PM.processes
+                for process in v
+                    if OS.application[process.name].type is 0
+                        wins.push {
+                            text: process.scheme.apptitle,
+                            el: process.scheme,
+                            icon: process.meta().icon,
+                            iconclass: process.meta().iconclass
+                        }
+            @openDialog "SelectionDialog", {
+                title: "Select a window",
+                data: wins
+            }
+            .then (sel) =>
+                return unless sel
+                @capture sel.el
+        
+        btncrop = @find("btnCrop")
+        
+        @cropselect = (e) =>
+            offset = $(@cropwin).offset()
+            w = e.clientX - offset.left
+            h = e.clientY - offset.top
+            $(@cropwin)
+                .css "width", "#{w}px"
+                .css "height", "#{h}px"
+                
+        @cropup = (e) =>
+            $(window).off "mousemove", @cropselect
+            $(window).off "mouseup", @cropup
+            
+            @ask { text: __("Crop the selected zone ?") }
+            .then (b) =>
+                btncrop.enable = true
+                btncrop.selected = false
+                croff = $(@cropwin).offset()
+                scenoff = $(@scene).offset()
+                x = croff.left - scenoff.left
+                y = croff.top - scenoff.top
+                w = $(@cropwin).width()
+                h = $(@cropwin).height()
+                $(@cropwin).hide()
+                $(@cropwin)
+                    .css "width", "0px"
+                    .css "height", "0px"
+                return unless b
+                ctx = @scene.getContext('2d')
+                data = ctx.getImageData(x,y, w, h)
+                @scene.width = w
+                @scene.height = h
+                ctx.putImageData(data, 0,0)
+                @dirty = true
+        
+        @cropdown = (e) =>
+            btncrop.enable = false
+            offset = $(@scheme).offset()
+            $(@cropwin)
+                .css "left", "#{e.clientX - offset.left}px"
+                .css "top", "#{e.clientY - offset.top}px"
+                .show()
+            $(window).off "mousedown", @cropdown
+            $(window).mousemove @cropselect
+            $(window).mouseup @cropup
+            
+        btncrop.onbtclick = () =>
+            if btncrop.selected
+                $(window).mousedown @cropdown
+            else
+                $(window).off "mousedown", @cropdown
+        
+        @bindKey "CTRL-S", () => @actionFile "#{@name}-Save"
+        @bindKey "ALT-W", () => @actionFile "#{@name}-Saveas"
+
+    capture: (el, windoff) ->
+        @hide() if windoff
+        html2canvas(el).then (canvas) =>
+            @scene.height = canvas.height
+            @scene.width = canvas.width
+            @scene.getContext('2d').drawImage(canvas, 0, 0)
+            @notify __("Screen captured")
+            @show() if windoff
+            @dirty = true
+        .catch (e) => @error e.toString(), e
+    
+    menu: () ->
+        menu = [{
+                text: "__(File)",
+                nodes: [
+                    { text: "__(Save)", dataid: "#{@name}-Save", shortcut: "C-S" },
+                    { text: "__(Save as)", dataid: "#{@name}-Saveas", shortcut: "A-W" }
+                ],
+                onchildselect: (e) => @actionFile e.data.item.data.dataid
+            }]
+        menu
+    
+    save: ()->
+        @currfile.cache = @scene.toDataURL("image/png")
+        @currfile.write "base64"
+            .then (r) =>
+                @notify __("File saved")
+                @dirty = false
+            .catch (e) => @error __("Cannot save to file: {0}", e.toString()), e
+    
+    actionFile: (e) ->
+        saveas = () =>
+            @openDialog("FileDialog", {
+                title: __("Save as"),
+                file: @currfile
+            })
+            .then (f) =>
+                d = f.file.path.asFileHandle()
+                d = d.parent() if f.file.type is "file"
+                @currfile.setPath "#{d.path}/#{f.name}"
+                @save @currfile
+
+        switch e
+            when "#{@name}-Save"
+                return @save() if @currfile.basename
+                saveas()
+                
+            when "#{@name}-Saveas"
+                saveas()
+    
+    cleanup: (evt) ->
+        return unless @dirty
+        evt.preventDefault()
+        @ask {
+            title: __("Quit"),
+            text: __("Quit without saving ?")
+        }
+        .then (d) =>
+            if d
+                @dirty = false
+                @quit()
+
+
+this.OS.register "Clipper", Clipper

Clipper/css/main.css

@@ -0,0 +1,20 @@
+afx-app-window[data-id = "Clipper"] div[data-id = "wrapper"] {
+    overflow: auto;
+    background-image: url("bg.jpg");
+    background-repeat: repeat;
+}
+
+afx-app-window[data-id = "Clipper"] div[data-id = "toolbar"] {
+    padding-left: 5px;
+    display:inline-block;
+    text-align:left;
+}
+
+afx-app-window[data-id = "Clipper"] afx-button[data-id = "btnCrop"] button.selected {
+    background-color: #116cd6;
+    color:white;
+}
+
+afx-app-window[data-id = "Clipper"] div[data-id = "cropwin"] {
+    border:1px dashed chocolate;
+}

Clipper/package.json

@@ -0,0 +1,14 @@
+{
+    "app":"Clipper",
+    "name":"Clipper",
+    "description":"Clipper",
+    "info":{
+        "author": "",
+        "email": ""
+    },
+    "version":"0.1.0-a",
+    "category":"Other",
+    "iconclass":"fa fa-scissors",
+    "mimes":["none"],
+    "locale": {}
+}

Clipper/project.json

@@ -0,0 +1,8 @@
+{
+    "name": "Clipper",
+    "root": "home://workspace/antosdk-apps/Clipper",
+    "css": ["css/main.css"],
+    "javascripts": ["javascripts/html2canvas.js"],
+    "coffees": ["coffees/main.coffee"],
+    "copies": ["assets/scheme.html", "assets/bg.jpg", "package.json", "README.md"]
+}

packages.json

@@ -44,6 +44,15 @@
 		"version": "0.1.0-a",
 		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/Booklet/build/release/Booklet.zip"
 	},
+	{
+		"pkgname": "Clipper",
+		"name": "Clipper",
+		"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/Clipper/README.md",
+		"category": "Other",
+		"author": "",
+		"version": "0.1.0-a",
+		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/Clipper/build/release/Clipper.zip"
+	},
 	{
 		"pkgname": "DBDecoder",
 		"name": "DBDecoder",