-
Notifications
You must be signed in to change notification settings - Fork 25
User manual
Some setup is necessary, prior to utilization. In this part, you will be explained how to install the application on your personal computer, until its execution.
First of all, you will have to download the following git repository : Dahu.git.
Our project is based on java-8-oracle virtual machine. If you have Java 7 or earlier installed on your machine, this means that you will have to remove your previous java VM, and download and install this last one.
Using an Unix environment, you need to set the JAVA_HOME and CLASSPATH in your bashrc :
export CLASSPATH="$CLASSPATH:/usr/lib/jvm/java-8-oracle/jre/lib/jfxrt.jar"
export JAVA_HOME="/usr/lib/jvm/java-8-oracle"
export JAVAFX_HOME="/usr/lib/jvm/java-8-oracle"
export JFXRT_HOME="/usr/lib/jvm/java-8-oracle"Then, we use the Gradle automation to build our project. So as you could have understood it, you will have to install it if you wish to launch the application.
Finally, a simple gradle run in the editor repository will start the DahuApp application.
Once the application has been launched, a project directory has to be chosen (one project per directory). The whole application will be frozen until that directory has been specified. To do that, select the File dropdown menu. There, you will be able to create a New project or to Open project already existing and finally, to Exit the application. Choosing to create a project or to open an existing one, you will have to write in a prompt, the absolute path of your project repository.
Unix users will have to write something like that :
/home/my-computer/Documents/my-projectwhereas Windows users, something like this :
C:/usr/my-computer/Documents/my-projectThe application will create the appropriate repositories if they don't initially exist. Example, for Unix :
/home/my-computer/new-repository_1/new-repository_2/new-repository_3/my-projectAs soon as you have loaded a project repertory, you are able to Save the project in the File dropdown menu. Saving a project will register a presentation.dahu file (that matches to the json file) even if you haven't taken any screenshot yet.
It is now possible to take screenshots through the capture mode. This will be done by a click on the Capture button that becomes red when capture mode is on. A simple press on F7 keyboard will take a screenshot, as long as it will be activated. Simultaneously as you will be taking captures, you may watch the screens appear in the left part of the application. However, being in capture mode freezes the application, so that no buttons might be clicked.
Once you are finished with your captures, turn off the capture mode pressing the Escape keyboard or clicking again on Capture button.
Notice that saving your presentation at this point will create an "img" repository in your project repository. There, are stored the different screenshots taken before saving. The written format is .png. Moreover, it will also modify the presentation.dahu file : it now contains the information about the whole presentation.
Having a project with some screenshots, you may want to organize them.
First of all, notice that you can select a screenshot with your mouse cursor. You can now replace a misplaced screenshot with the Up and Down arrows, knowing that it will only switch the upper or downer screenshot with the selected one. In the same way, you may set capture mode on and insert some new screenshots after the selected one. Click on the red bin button to delete the selected screenshot.
Then you can edit the mouse cursor on a current screenshot, on the right part of the application (currently being modified).
You may adapt the size of the screenshots that will appear in the viewer, using our Settings dropdown menu. The Output image size button affords the user to set either the width or the height or even both of the output images. A non completed field will have the images automatically resized.
You can also create a new tooltip and move it as you want on the current
You can choose if you want your slide to be printed on a click or after the previous one by selecting it into the toolbar. You may also want to change the tooltips events, into the tooltip popup by changing the value from afterPrevious to onClick.
To make your presentation viewable, you will have to build your project : this part deals with the Generation dropdown menu.
The Clean and generate button aims to create a new repository build in the one of the project. It contains all the necessary files and information to view the presentation : the images are copied in a new img repository including the mouse cursor, and an HTML file named presentation.html contains an instance of a viewer.
The Clean build directory button removes that whole directory, once it has been created.
The Preview button launches the preview in the default browser, if the project has been successfully generated.
Some features have not been implemented in the editor's GUI yet. However, they can be manually added to a presentation by directly editing (with your favorite text editor) the presentation.dahu file in the project directory. It's not a good choice to edit the generated file presentation.json because it will be erased every time you'll generate your presentation.
If you manually edit the dahu file, you need to follow these steps to view the result :
- click on the Reload project item in the File menu (this will reload the dahu file including your modifications) ;
- clean and generate your project (this will generate your project with your modifications, even if they won't be visible on the editor's preview).
The file is composed of two main parts :
- metadata in the first part ;
- slide information in the second part.
We will focus on the second part : the slides. A slide is composed with :
- objects, an object will be translated to a HTML block in the generated HTML file ;
- actions, that will change the state of objects. They are associated to JavaScript methods, depending on their type.
If you just want to add an action to an existing object (typically a mouse movement) you don't need to add an object. Just add a new action (take care of the order of the actions). At the moment, there are three types of actions. The list above references these three types with the parameters you need to specify for each of them, and their names :
{
"type": "appear",
"target": ID_OF_OBJECT,
"duration": DURATION_TIME_IN_MS,
"abs": ABSCISSA_IN_PERCENT,
"ord": ORDINATE_IN_PERCENT
}{
"type": "disappear",
"target": ID_OF_OBJECT,
"duration": DURATION_TIME_IN_MS,
}{
"type": "move",
"target": ID_OF_OBJECT,
"duration": DURATION_TIME_IN_MS,
"finalAbs": DESTINATION_ABS_IN_PERCENT,
"finalOrd": DESTINATION_ORD_IN_PERCENT
}You can also add tooltips :
{
"type": "tooltip",
"id": UNIQUE_ID (e.g. "s2-o3"),
"text": "This text will be displayed in the tooltip",
"color": "<BACKGROUND_COLOR>",
"width": "<width>px"
}Notice that in the generated part of the JSON, we use ids of that form : "s" + SLIDE_ID + "-o" + OBJECT_ID. You don't have the obligation to put such ids, but this may still be a good choice. Also notice that the background color is a CSS attribute, so you can put values like blue, white or lightgray but also values in RGB format like #5F2A00.
When using the afterPrevious trigger, it makes sense to have a short pause between actions. Dahu provides two ways to do this:
- Using the delayAfter field of actions. This field gives a delay, in miliseconds, that will be inserted after the action. If unspecified, a delay of 200 ms will be inserted by default. For example, to show a new image, and add a tooltip after 500 ms, use this:
{
"type": "appear",
"target": "s9-o0",
"trigger": "afterPrevious",
"abs": 0,
"ord": 0,
"duration": 0,
"delayAfter": 500
},
{
"type": "appear",
"target": "s12-tip1",
"trigger": "afterPrevious",
"abs": 0.4,
"ord": 0.45,
"duration": 400
}- Using the "delay" action explicitly:
{
"type": "delay",
"trigger": "afterPrevious",
"duration": 200
},If you want to add a link, not to the beginning of your dahu presentation, but to the middle or anywhere else, a feature allows that. When you specify the link to your presentation, just add as an anchor the id of the action which is the first one to be executed. This information can be found by opening the presentation.dahu file of your project (in the project directory) with a text editor.
For example, in your dahu project file, if you have an action like this:
{
"id": "2",
...
}and that you want to set this action as the first one (that means that every action defined before will be done when the presentation begins for the viewer), just publish this link:
www.example.com/fabulouspresentation/#2Of course doing this doesn't disallow you to simply publish the link without any anchor somewhere else. In this case the presentation will begin before the first action.
By default, the user of the presentation has to use the "Next" button to run the presentation. It is possible to make the presentation less interactive by adding GET parameters to the URL of the presentation. For example, to have a completely automatic presentation, link to (or enter the URL manually):
www.example.com/dahu/?auto
If the default delays do not suit you, you can provide a delay in millisecond like this:
www.example.com/dahu/?auto=500
With this, the presentation starts half a second after being loaded, and the pauses when the user is normally expected to click "Next" are also half a second. You can control more finely the automatic mode using 3 parameters:
- autoplay: If set to 'true' or to a number (N), then simulate a click on "Next" after N milliseconds in a presentation pause.
- autoptart: If set to 'true' or to a number (N), then simulate a click on "Next" N milliseconds after the presentation loads.
- autoloop: If set to 'true' or to a number (N), then restart the presentation N milliseconds after the presentation terminates.
In all cases, N defaults to 5000. For example, you may link to
www.example.com/dahu/?autoplay=500&autoloop&autostart=10000
to start the presentation after 10 seconds, run it with pauses of 500 milliseconds, and loop back to start at the end of presentation (keeping the default delay).
A few tips to get your JSon file right: Tips and Tricks.
When you manually add an object in the presentation file, it won't appear. You have to add an appear action to make it visible.
The state bar is the bottom part of the application. It is used to show the state and informs the user when project are successfully built or changed. Don't forget to look at it!