DO NOT MERGE: Image collage mashup #2
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,17 @@ | ||
|
|
||
| # Making image mashup/collage of all images in album | ||
|
|
||
| Below is an example of a resulting collage. | ||
|
|
||
| <img src="https://raw.githubusercontent.com/Akhilesh05/img/master/collage.jpg"> | ||
|
|
||
| For this demo, you need to open the Visualforce page named `SharinPixCollageDemo`. | ||
| Once on this page, you will have the following values to fill. | ||
| * columns - The amount of columns you want your collage to have. | ||
| * rows - The amount of rows you want your collage to have. | ||
| * width - The width of individual images in the collage. | ||
| * height - The height of individual images in the collage. | ||
| * crop type - The crop type, [as explained here](https://github.com/SharinPix/demo-apex/tree/image_crop_resize). | ||
| * background - The background color. | ||
|
|
||
| [<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=image_collage_mashup) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| public with sharing class SharinPixCollageDemo { | ||
| public String parameters {get; set;} | ||
| public static String albumId {get; set;} | ||
|
|
||
| static { | ||
| albumId = 'c74c803b-62a6-4b41-b7d8-7e7e14503dae'; | ||
| } | ||
|
|
||
| public SharinPixCollageDemo() { | ||
| parameters = JSON.serialize(new Map<String, Object> { | ||
| 'abilities' => new Map<String, Object> { | ||
| albumId => new Map<String, Object> { | ||
| 'Access' => new Map<String, Object> { | ||
| 'see' => true, | ||
| 'image_list' => true, | ||
| 'image_upload' => true | ||
| } | ||
| } | ||
| }, | ||
| 'Id' => albumId | ||
| }); | ||
| } | ||
|
|
||
| @RemoteAction | ||
| public static List<String> generateCollage(String albumId, Integer columns, Integer rows, Integer widthLength, Integer heightLength, String cropType, String background) { | ||
| SharinPix.Utils sharinPixUtils = new SharinPix.Utils(); | ||
| List<Object> images = sharinPixUtils.getAlbumImages(albumId); | ||
| List<String> imagePublicIds = new List<String>(); | ||
| for (Object imageObj: images) { | ||
| Map<String, Object> image = (Map<String, Object>) imageObj; | ||
| imagePublicIds.add((String) image.get('public_id')); | ||
| } | ||
| List<Map<String, Object>> imageParams = new List<Map<String, Object>>(); | ||
| for (Integer i = 0; i < imagePublicIds.size(); i++) { | ||
| String currentId = imagePublicIds.get(i); | ||
| Integer pic = (i / columns) / rows; | ||
| Integer row = Math.mod((i / columns), rows); | ||
| Integer column = Math.mod(i, columns); | ||
| if (row == 0 && column == 0) { | ||
| imageParams.add(new Map<String, Object> { | ||
| 'id' => currentId, | ||
| 'transformation' => new List<Map<String, Object>> { | ||
| new Map<String, Object> { | ||
| 'width' => widthLength, | ||
| 'height' => heightLength, | ||
| 'crop' => cropType, | ||
| 'background' => background | ||
| } | ||
| } | ||
| }); | ||
| } else { | ||
| List<Map<String, Object>> transformation = (List<Map<String, Object>>) imageParams.get(pic).get('transformation'); | ||
| transformation.add(new Map<String, Object> { | ||
| 'overlay' => currentId, | ||
| 'width' => widthLength, | ||
| 'height' => heightLength, | ||
| 'crop' => cropType, | ||
| 'x' => column * widthLength, | ||
| 'y' => row * heightLength, | ||
| 'background' => background, | ||
| 'gravity' => 'north_west' | ||
| }); | ||
| } | ||
| } | ||
| List<String> imageUrls = new List<String>(); | ||
| for (Map<String, Object> imageParam: imageParams) { | ||
| Map<String, Object> sharinpix = new Map<String, Object> { | ||
| 'download' => false, | ||
| 'auto' => false, | ||
| 'full_size' => false | ||
| }; | ||
| imageUrls.add((String) sharinPixUtils.getImageExternalUrl(new Map<String, Object> { | ||
| 'image_id' => (String) imageParam.get('id'), | ||
| 'sharinpix' => sharinpix, | ||
| 'transformations' => (List<Object>) imageParam.get('transformation') | ||
| }).get('resource_url')); | ||
| } | ||
| return imageUrls; | ||
| } | ||
|
|
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata"> | ||
| <apiVersion>36.0</apiVersion> | ||
|
|
||
| <packageVersions> | ||
| <majorNumber>1</majorNumber> | ||
| <minorNumber>33</minorNumber> | ||
| <namespace>sharinpix</namespace> | ||
| </packageVersions> | ||
| <status>Active</status> | ||
| </ApexClass> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,12 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <Package xmlns="http://soap.sforce.com/2006/04/metadata"> | ||
| <types> | ||
| <members>SharinPixCollageDemo</members> | ||
| <name>ApexPage</name> | ||
| </types> | ||
| <types> | ||
| <members>SharinPixCollageDemo</members> | ||
| <name>ApexClass</name> | ||
| </types> | ||
| <version>36.0</version> | ||
|
|
||
| </Package> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <apex:page controller="SharinPixCollageDemo"> | ||
| <script> | ||
| let buttonClicked = function() { | ||
|
There was a problem hiding this comment. utilise plutot |
||
| window.location.hash = ''; | ||
| let columns = document.getElementById('columns').value; | ||
| let rows = document.getElementById('rows').value; | ||
| let width = document.getElementById('width').value; | ||
| let height = document.getElementById('height').value; | ||
| let crop = document.getElementById('crop').value; | ||
| let background = document.getElementById('background').value; | ||
| Visualforce.remoting.Manager.invokeAction( | ||
| '{! $RemoteAction.SharinPixCollageDemo.generateCollage }', | ||
| '{! albumId }', columns, rows, width, height, crop, background, | ||
| function(res) { | ||
| document.getElementById('generated_images').innerHTML = ''; | ||
| for (let i = 0; i < res.length; i++) { | ||
| document.getElementById('generated_images').innerHTML += '<div style="padding: 10px 20px"><h1 style="padding-bottom: 5px; display: block">Collage ' + (i+1) + '</h1><br /><img id="img' + i + '" src="' + res[i] + '" alt="collage" /></div>'; | ||
| (function(index) { | ||
| setTimeout(function() { | ||
| document.getElementById('img'+index).addEventListener('load', function() { | ||
| window.location.hash = 'image_start'; | ||
| document.getElementById('image_start').style.visibility = 'visible' | ||
| }); | ||
| }, 10) | ||
|
|
||
| })(i) | ||
| } | ||
| } | ||
| ); | ||
| } | ||
| </script> | ||
| <div style="padding: 10px 20px"> | ||
|
There was a problem hiding this comment. utilise des classes plutot que du style en inline. |
||
| <apex:canvasApp developerName="Albums" height="500px" width="100%" parameters="{! parameters }" /> | ||
| </div> | ||
| <div style="padding: 10px 20px"> | ||
| <apex:form onsubmit="return false" id="main_form"> | ||
|
There was a problem hiding this comment. tu peux ne pas mettre le form si tu ne fais pas de bind sur le controleur. |
||
| <h1>Generate Collage</h1><br /><br /> | ||
| <input placeholder="columns" id="columns" type="number" /><br /> | ||
| <input placeholder="rows" id="rows" type="number" /><br /> | ||
| <input placeholder="width" id="width" type="number" /><br /> | ||
| <input placeholder="height" id="height" type="number" /><br /> | ||
| <label for="crop">Crop type:</label><select id="crop"> | ||
| <option>fill</option> | ||
| <option>scale</option> | ||
| <option>pad</option> | ||
| <option>fit</option> | ||
| <option>crop</option> | ||
| </select><br /> | ||
| <label for="background">Background color: </label> | ||
| <input value="#ffffff" type="color" id="background" /><br /> | ||
| <apex:commandButton value="Generate" id="generate_button" onclick="return buttonClicked()" /> | ||
| </apex:form> | ||
| </div> | ||
| <div id="image_start" style="padding: 5px 20px; visibility: hidden"> | ||
| <a href="#">Back to top</a> | ||
| </div> | ||
| <div id="generated_images"> | ||
| </div> | ||
| </apex:page> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <ApexPage xmlns="http://soap.sforce.com/2006/04/metadata"> | ||
| <apiVersion>36.0</apiVersion> | ||
|
|
||
| <availableInTouch>false</availableInTouch> | ||
| <confirmationTokenRequired>false</confirmationTokenRequired> | ||
| <label>SharinPixCollageDemo</label> | ||
| <packageVersions> | ||
| <majorNumber>1</majorNumber> | ||
| <minorNumber>7</minorNumber> | ||
| <namespace>sf_com_apps</namespace> | ||
| </packageVersions> | ||
| <packageVersions> | ||
| <majorNumber>1</majorNumber> | ||
| <minorNumber>33</minorNumber> | ||
| <namespace>sharinpix</namespace> | ||
| </packageVersions> | ||
| <packageVersions> | ||
| <majorNumber>2</majorNumber> | ||
| <minorNumber>1</minorNumber> | ||
| <namespace>tfa</namespace> | ||
| </packageVersions> | ||
| </ApexPage> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remplace cela par un nom d'album. (ex: demo-album)