We would like to display pictures captured with a camera in the new popup and display the list of available effects as a preview of the captured picture. However, before this, we need to include the Pixastic library first.
Let's download the Pixastic files and put them in the resources/lib folder. After that, we need to include these files in our project. We can do this in the app.json file in the js section:
"js": [
{
"path": "resources/lib/pixastic.js"
},
{
"path": "resources/lib/pixastic.effects.js"
},
{
"path": "resources/lib/pixastic.worker.js"
},
{
"path": "resources/lib/pixastic.worker.control.js"
}
//...
]The preceding code tells the Sencha microloader to include these files in index.html. Also, we need to specify the resources/lib folder as a resource itself. So, it will be copied in the application as well. We need it to reference from the code later, as shown in the following...