Differences

This shows you the differences between two versions of the page.

Link to this comparison view

blocks:app-note:before-after [2020-05-25 17:28] (current)
admin created
Line 1: Line 1:
 +====== Before/​After Comparison ======
  
 +This application note describes how to create a Blocks design for comparing two images or other content by dragging a partition to gradually reveal one or the other. The comparison visualized by this method could, for instance, be a map of a city today and at some earlier point in time, possibly including several old maps that can be selected.
 +
 +Take a look at [[https://​vimeo.com/​422428642|this video]] to see an example of what you can do with this method, and to learn more about how it's done.
 +
 +===== Installation =====
 +
 +To try out this on your own, start with the [[blocks:​app-note:​start|general setup]] guide to recreate this application. Use this {{:​blocks:​app-note:​before-after:​beforeafterroot.zip|root directory}},​ containing all you need for this demo. Then do as follows:
 +
 +  - Start Blocks.
 +  - Open the editor using the Admin button.
 +  - Log in using the name //admin// and the password //pixi//.
 +  - Open a second browser window to act as a test spot, and go to http://​localhost:​8080/​spot/​. ​
 +  - Double-click the single Display Spot and reassign it to the ID shown in the test spot window opened in the previous step.
 +
 +:!: If step 4 above fails, your server may use another port number than 8080. The correct port number is shown in the URL bar of the editor window.
 +
 +You should now be able to see and try out the before/​after comparison in your spot window. ​