Difference between revisions of "Freeplane/C4/Conditional-Styles/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "test")
 
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
test
+
{| border=1
 +
|| '''Visual Cue'''
 +
|| '''Narration'''
 +
 
 +
|-
 +
|| '''Slide Number 1'''
 +
 
 +
'''Title Slide '''
 +
|| Welcome to the tutorial on '''Conditional styles'''.
 +
 
 +
|-
 +
|| '''Slide Number 2'''
 +
 
 +
'''Learning Objectives'''
 +
|| In this tutorial, we will learn to,
 +
 
 +
 
 +
* Create a node style
 +
* Change node style manually to the user defined style
 +
* Create user conditional style
 +
* Create a map conditional style and
 +
* Apply the conditional style automatically
 +
 
 +
|-
 +
|| '''Slide Number 3'''
 +
 
 +
'''System and Software Requirement'''
 +
|| To record this tutorial, I am using
 +
 
 +
* '''Ubuntu Linux''' v16.04 OS and
 +
* '''Freeplane''' v1.7.10
 +
 
 +
|-
 +
|| '''Slide Number 4'''
 +
 
 +
'''Pre-requisites'''
 +
 
 +
'''https://www.spoken-tutorial.org'''
 +
|| To follow this tutorial,
 +
 
 +
* Learner must be familiar with the '''Freeplane''' interface.
 +
* For pre-requisite tutorials, please visit this site.
 +
 
 +
|-
 +
|| '''Slide Number 5'''
 +
 
 +
'''Code Files'''
 +
|| 
 +
* The Files used in this tutorial are provided in the '''Code files''' link.
 +
* Please download and extract the files.
 +
* Make a copy and then use them while practising.
 +
 
 +
|-
 +
|| Show input file icon on '''Desktop'''.
 +
 
 +
Open the file in '''Freeplane'''.
 +
|| I have saved the input map file named as '''styles dot mm''', on the '''Desktop'''.
 +
 
 +
Let's open the map in '''Freeplane'''.
 +
 
 +
|-
 +
|| Cursor on the map.
 +
|| We will learn to make user defined '''node''' styles.
 +
 
 +
|-
 +
|| Point mouse next to the A'''ctivity''' and '''MCQ''' nodes.
 +
|| This map has 4 '''Activity''' nodes and 3 '''MCQ''' nodes.
 +
 
 +
Let’s change all the '''Activity''' nodes to a predefined format.
 +
 
 +
|-
 +
|| Click on '''Format, Apply Style''' and show options.
 +
|| For this purpose, let's custom create a user style.
 +
 
 +
|-
 +
|| Click on '''Format''' , '''Manage styles'''.
 +
 
 +
From submenu select '''New style from selection '''option.
 +
|| Click on '''Format''', '''Manage styles'''.
 +
 
 +
From the submenu select '''New style from selection''' option.
 +
 
 +
|-
 +
|| Point to the Input text box.
 +
|| An '''Input''' text box opens.
 +
 
 +
|-
 +
|| '''Slide Number 6'''
 +
 
 +
'''Dialog boxes'''
 +
|| In this tutorial, several windows and dialog boxes will be opened.
 +
 
 +
Learner must follow the sequence and choose the correct ones.
 +
 
 +
|-
 +
|| Type '''Activity1 '''for '''Enter new style name''' and click on '''OK button'''.
 +
|| In the text box, for '''Enter new style name''', type '''Activity1'''.
 +
 
 +
Click on the '''OK''' button to create a new style name.
 +
 
 +
|-
 +
|| Hover mouse next to '''Format, Apply Style,''' '''Activity1'''.
 +
|| Go to '''Format''' and '''Apply style''' section.
 +
 
 +
Notice the newly created '''Activity1''' node style in the sub-menu.
 +
 
 +
|-
 +
|| Click open '''Format''' , '''Manage styles''' , '''Edit''' '''styles'''
 +
|| Let’s define properties for this '''node''' style.
 +
 
 +
Click on '''Format''', '''Manage styles''', and '''Edit''' '''styles'''.
 +
 
 +
|-
 +
|| Cursor on '''Styles-Freeplane- Style editing''' window.
 +
 
 +
Point to the panels.
 +
|| '''Styles-Freeplane- Style editing''' window opens.
 +
 
 +
This window has two panels.
 +
 
 +
|-
 +
|| Hover mouse next to '''Activity1''' node and select it.
 +
|| Notice the '''Activity1''' node under '''User defined styles'''.
 +
 
 +
Let’s select it.
 +
 
 +
|-
 +
|| Point to''' Node style''' section.
 +
 
 +
Click on the rectangle next to '''Background'''.
 +
|| Let’s change the properties in the '''Node style''' section, from the right panel.
 +
 
 +
Click on the rectangle next to '''Background'''.
 +
 
 +
|-
 +
|| Point to '''Background''' color window.
 +
|| The '''Background''' color window opens.
 +
 
 +
|-
 +
|| Choose red color from '''swatches''' tab and click on the '''OK'''.
 +
|| From the '''swatches''' tab, choose red color and click on the '''OK''' button.
 +
 
 +
|-
 +
|| Click on the rectangle next to '''Text'''.
 +
 
 +
In '''swatches''' tab, choose blue color.
 +
 
 +
Click on '''OK '''button.
 +
|| Click on the rectangle next to '''Text''' to change the text color.
 +
 
 +
Again, from the '''swatches''' tab, choose blue color and click on the '''OK''' button.
 +
 
 +
|-
 +
|| Cursor on '''Activity1 node'''.
 +
|| Notice the changes taking effect in the '''Activity1''' node.
 +
 
 +
|-
 +
|| Go '''Node shape''' section.
 +
 
 +
From '''Node shape''', select '''Wide hexagon'''.
 +
|| Next go the '''Node shape '''section.
 +
 
 +
From the '''Node shape''' drop-down select the '''Wide hexagon''' option.
 +
 
 +
|-
 +
|| Cursor on '''Activity1 node'''.
 +
|| The '''Activity1''' node is now seen with a '''wide hexagon''' shape.
 +
 
 +
|-
 +
|| Click on '''File, OK'''.
 +
|| Let’s save this style change.
 +
 
 +
Click on the green tick sign or in '''File, OK''' to save and quit this window.
 +
 
 +
|-
 +
|| Choose '''Eclipse node'''.
 +
|| Let’s choose the '''Eclipse node''' and change to the user defined style.
 +
 
 +
|-
 +
|| Click on '''Format, Apply style''' and '''Activity1'''.
 +
|| Click on '''Format, Apply style''' and choose '''Activity1''' style from the menu.
 +
 
 +
|-
 +
|| Hover the cursor next to the node.
 +
|| Hover the mouse over another node to move the selected node.
 +
 
 +
Notice the blue color text, red background and '''wide hexagon''' shape on '''Eclipse'''.
 +
 
 +
Only one style can be applied to a node, in manual selection.
 +
 
 +
|-
 +
|| '''Slide Number 7'''
 +
 
 +
'''Map Conditional Styles'''
 +
|| Let’s learn about '''Map conditional styles'''.
 +
 
 +
* Map conditional styles are used to bring simplicity and uniformity.
 +
* More than one style can be applied to a node, in the conditional style format.
 +
 
 +
|-
 +
|| Show site,
 +
 
 +
'''https://www.freeplane.org/wiki/index.php/Conditional_node_styles'''
 +
|| This '''Freeplane''' webpage shows examples on applying multiple styles on the node.
 +
 
 +
Learner can practice this part using the examples given in the website.
 +
 
 +
|-
 +
||
 +
|| Now I will demonstrate how to create a map style.
 +
 
 +
|-
 +
|| Click on '''Format''' , '''Manage''' '''style.'''
 +
 
 +
From the sub-menu select '''Manage conditional styles for node'''.
 +
|| Click on '''Format''', '''Manage''' '''style'''.
 +
 
 +
From the sub-menu select '''Manage conditional styles for node'''.
 +
 
 +
|-
 +
|| Point to the window.
 +
|| The Manage '''conditional styles''' window opens.
 +
 
 +
It is an empty window.
 +
 
 +
|-
 +
|| Click on '''New '''button.
 +
 
 +
Click on '''Edit'''.
 +
|| Click on '''New''' button to add a new condition.
 +
 
 +
Then click on the '''Edit''' button to set conditions.
 +
 
 +
|-
 +
|| Cursor on the window.
 +
 
 +
Point to the pull-downs.
 +
|| A '''Filter composer''' window opens.
 +
 
 +
In the window we can see three pull-downs on the top.
 +
 
 +
|-
 +
|| Click on the top left pulldown.
 +
 
 +
Choose'''Core text'''.
 +
|| Click on the top left pulldown.
 +
 
 +
From the many choices in the first pull down, I will choose'''Core text'''.
 +
 
 +
|-
 +
|| Click and open the top middle pulldown.
 +
|| Click and open the top middle pulldown.
 +
 
 +
Here one can set the condition for the style.
 +
 
 +
|-
 +
|| Choose '''Contains '''option.
 +
|| I will set the condition as '''Contains'''.
 +
 
 +
|-
 +
|| In the top right most form, type,''' Activity.'''
 +
|| Let’s set the '''core text''' for the node as '''Activity'''.
 +
 
 +
So, in the top right most form, type '''Activity'''.
 +
 
 +
|-
 +
|| Hover mouse over '''Match case'''.
 +
|| We also have a choice to '''Match Case'''.
 +
 
 +
Now, I will not check the box for '''Match Case'''.
 +
 
 +
|-
 +
|| Click to add condition in '''funnel+''' sign.
 +
|| To add the condition, click on '''Funnel plus''' sign, on the right panel.
 +
 
 +
|-
 +
|| Hover mouse over “Core text contains Activity”.
 +
|| It gets added in the form.
 +
 
 +
Click on it to select the condition on the form.
 +
 
 +
|-
 +
|| Cursor on the options on the right panel.
 +
|| Notice that more options in the right panel become available.
 +
 
 +
Hover on the icons to show the '''tool tip''', to learn about their function.
 +
 
 +
|-
 +
|| Click on the icon for '''Set name'''.
 +
|| Click on the icon for '''Set name''' to set a name for this new condition.
 +
 
 +
It is the third icon from the bottom on the right side.
 +
 
 +
|-
 +
|| Point to the '''Input''' form.
 +
 
 +
Type '''Activity-new''', click on '''OK '''button.
 +
|| An '''Input '''form '''Enter new condition name''' appears.
 +
 
 +
It prompts the user to enter a condition.
 +
 
 +
Type '''Activity-new''' in the form and click on the '''OK''' button.
 +
 
 +
|-
 +
|| Click on '''OK '''button.
 +
|| Notice that this change is reflected in the form.
 +
 
 +
Click on the '''OK''' button in the '''Filter composer''' window.
 +
 
 +
|-
 +
|| Click on '''OK '''button.
 +
|| Click on the '''OK '''button in the '''Manage conditional styles for node''' dialog box.
 +
 
 +
|-
 +
|| Click on '''Format,''' '''Manage''' '''styles,''' '''Manage conditional styles for map'''
 +
|| Next, click on '''Format''', '''Manage styles''', '''Manage conditional styles for map'''.
 +
 
 +
|-
 +
|| click on '''New'''.
 +
|| Click on '''New''' button to add a new condition.
 +
 
 +
|-
 +
|| Click on '''Edit'''.
 +
|| Then click on the '''Edit '''button to set conditions.
 +
 
 +
|-
 +
|| In the first top left pulldown, Select '''Core text'''.
 +
|| A '''Filter Composer''' window opens.
 +
 
 +
From the many choices in first pull down, I will choose '''Core text'''.
 +
 
 +
|-
 +
|| Hover mouse over '''Contains''' and '''activity'''.
 +
|| I will set the condition as '''Contains'''.
 +
 
 +
In the top right most form, core text for the node is '''Activity'''.
 +
 
 +
|-
 +
|| Click on the '''funnel +''' sign.
 +
|| Click on the '''funnel +''' sign on the right panel.
 +
 
 +
It gets added in the form.
 +
 
 +
|-
 +
|| Click on the condition on the form
 +
|| Click on it to select the condition on the form.
 +
 
 +
|-
 +
|| Click on the icon for '''Set name'''.
 +
|| Click on the icon for '''Set name''' to set a name for this new condition.
 +
 
 +
|-
 +
|| Type '''Activity-new''', click on '''OK''' button.
 +
|| Type '''Activity-new''' in the form and click on the '''OK''' button.
 +
 
 +
|-
 +
|| Click on '''OK '''button.
 +
|| Notice that this change is reflected in the form.
 +
 
 +
Click on the '''OK''' button.
 +
 
 +
|-
 +
|| Hover mouse over '''Activity-new'''.
 +
|| Notice that, the node condition, '''Activity-new''' is seen in the list.
 +
 
 +
|-
 +
|| From Style pull down select '''Activity1''' and click '''Ok'''
 +
|| From Style pull down select '''Activity1''' and click on '''Ok'''.
 +
 
 +
|-
 +
|| Point mouse on activity node.
 +
|| Since the node contains the text '''Activity''', the style is automatically set.
 +
 
 +
|-
 +
||
 +
|| Learner may pause the video and explore more if desired.
 +
 
 +
|-
 +
|| Press '''Control+S'''.
 +
|| Press '''Control+S''' to save the map.
 +
 
 +
|-
 +
|| Click on '''File, Quit Freeplane'''.
 +
|| Click on '''File, Quit Freeplane''' to quit '''Freeplane'''.
 +
 
 +
|-
 +
|| '''Slide Number 8'''
 +
 
 +
'''Summary'''
 +
|| Now let's summarize. In this tutorial we,
 +
 
 +
* Created a node style
 +
* Changed node style manually to the user defined style
 +
* Created user conditional style
 +
* Created a map conditional style and
 +
* Applied the conditional style automatically
 +
 
 +
|-
 +
|| '''Slide Number 9'''
 +
 
 +
'''Assignment'''
 +
|| For assignment activity, please do the following.
 +
 
 +
Create user defined node styles and map conditional styles of your choice.
 +
 
 +
For the styles, you may 
 +
* Change font color and size
 +
* Node shape and background color
 +
 
 +
|-
 +
|| '''Slide Number 10'''
 +
 
 +
'''Spoken Tutorial Project'''
 +
|| This video summarises the Spoken Tutorial Project.
 +
 
 +
Please download and watch it.
 +
 
 +
|-
 +
|| '''Slide Number 11'''
 +
 
 +
'''Spoken Tutorial workshops'''
 +
|| The '''Spoken Tutorial '''team:
 +
 
 +
* conducts workshops and
 +
* give certificates.
 +
 
 +
For more details, please write to us.
 +
 
 +
|-
 +
|| '''Slide Number 12'''
 +
 
 +
'''Forum for specific questions'''
 +
|| Please post your timed queries in this forum.
 +
 
 +
|-
 +
|| '''Slide Number 13'''
 +
 
 +
'''Acknowledgement'''
 +
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
 +
 
 +
|-
 +
||
 +
|| This is Rani from IIT, Bombay.
 +
 
 +
Thank you for joining.
 +
|-
 +
|}

Latest revision as of 12:04, 20 November 2020

Visual Cue Narration
Slide Number 1

Title Slide

Welcome to the tutorial on Conditional styles.
Slide Number 2

Learning Objectives

In this tutorial, we will learn to,


  • Create a node style
  • Change node style manually to the user defined style
  • Create user conditional style
  • Create a map conditional style and
  • Apply the conditional style automatically
Slide Number 3

System and Software Requirement

To record this tutorial, I am using
  • Ubuntu Linux v16.04 OS and
  • Freeplane v1.7.10
Slide Number 4

Pre-requisites

https://www.spoken-tutorial.org

To follow this tutorial,
  • Learner must be familiar with the Freeplane interface.
  • For pre-requisite tutorials, please visit this site.
Slide Number 5

Code Files

  • The Files used in this tutorial are provided in the Code files link.
  • Please download and extract the files.
  • Make a copy and then use them while practising.
Show input file icon on Desktop.

Open the file in Freeplane.

I have saved the input map file named as styles dot mm, on the Desktop.

Let's open the map in Freeplane.

Cursor on the map. We will learn to make user defined node styles.
Point mouse next to the Activity and MCQ nodes. This map has 4 Activity nodes and 3 MCQ nodes.

Let’s change all the Activity nodes to a predefined format.

Click on Format, Apply Style and show options. For this purpose, let's custom create a user style.
Click on Format , Manage styles.

From submenu select New style from selection option.

Click on Format, Manage styles.

From the submenu select New style from selection option.

Point to the Input text box. An Input text box opens.
Slide Number 6

Dialog boxes

In this tutorial, several windows and dialog boxes will be opened.

Learner must follow the sequence and choose the correct ones.

Type Activity1 for Enter new style name and click on OK button. In the text box, for Enter new style name, type Activity1.

Click on the OK button to create a new style name.

Hover mouse next to Format, Apply Style, Activity1. Go to Format and Apply style section.

Notice the newly created Activity1 node style in the sub-menu.

Click open Format , Manage styles , Edit styles Let’s define properties for this node style.

Click on Format, Manage styles, and Edit styles.

Cursor on Styles-Freeplane- Style editing window.

Point to the panels.

Styles-Freeplane- Style editing window opens.

This window has two panels.

Hover mouse next to Activity1 node and select it. Notice the Activity1 node under User defined styles.

Let’s select it.

Point to Node style section.

Click on the rectangle next to Background.

Let’s change the properties in the Node style section, from the right panel.

Click on the rectangle next to Background.

Point to Background color window. The Background color window opens.
Choose red color from swatches tab and click on the OK. From the swatches tab, choose red color and click on the OK button.
Click on the rectangle next to Text.

In swatches tab, choose blue color.

Click on OK button.

Click on the rectangle next to Text to change the text color.

Again, from the swatches tab, choose blue color and click on the OK button.

Cursor on Activity1 node. Notice the changes taking effect in the Activity1 node.
Go Node shape section.

From Node shape, select Wide hexagon.

Next go the Node shape section.

From the Node shape drop-down select the Wide hexagon option.

Cursor on Activity1 node. The Activity1 node is now seen with a wide hexagon shape.
Click on File, OK. Let’s save this style change.

Click on the green tick sign or in File, OK to save and quit this window.

Choose Eclipse node. Let’s choose the Eclipse node and change to the user defined style.
Click on Format, Apply style and Activity1. Click on Format, Apply style and choose Activity1 style from the menu.
Hover the cursor next to the node. Hover the mouse over another node to move the selected node.

Notice the blue color text, red background and wide hexagon shape on Eclipse.

Only one style can be applied to a node, in manual selection.

Slide Number 7

Map Conditional Styles

Let’s learn about Map conditional styles.
  • Map conditional styles are used to bring simplicity and uniformity.
  • More than one style can be applied to a node, in the conditional style format.
Show site,

https://www.freeplane.org/wiki/index.php/Conditional_node_styles

This Freeplane webpage shows examples on applying multiple styles on the node.

Learner can practice this part using the examples given in the website.

Now I will demonstrate how to create a map style.
Click on Format , Manage style.

From the sub-menu select Manage conditional styles for node.

Click on Format, Manage style.

From the sub-menu select Manage conditional styles for node.

Point to the window. The Manage conditional styles window opens.

It is an empty window.

Click on New button.

Click on Edit.

Click on New button to add a new condition.

Then click on the Edit button to set conditions.

Cursor on the window.

Point to the pull-downs.

A Filter composer window opens.

In the window we can see three pull-downs on the top.

Click on the top left pulldown.

ChooseCore text.

Click on the top left pulldown.

From the many choices in the first pull down, I will chooseCore text.

Click and open the top middle pulldown. Click and open the top middle pulldown.

Here one can set the condition for the style.

Choose Contains option. I will set the condition as Contains.
In the top right most form, type, Activity. Let’s set the core text for the node as Activity.

So, in the top right most form, type Activity.

Hover mouse over Match case. We also have a choice to Match Case.

Now, I will not check the box for Match Case.

Click to add condition in funnel+ sign. To add the condition, click on Funnel plus sign, on the right panel.
Hover mouse over “Core text contains Activity”. It gets added in the form.

Click on it to select the condition on the form.

Cursor on the options on the right panel. Notice that more options in the right panel become available.

Hover on the icons to show the tool tip, to learn about their function.

Click on the icon for Set name. Click on the icon for Set name to set a name for this new condition.

It is the third icon from the bottom on the right side.

Point to the Input form.

Type Activity-new, click on OK button.

An Input form Enter new condition name appears.

It prompts the user to enter a condition.

Type Activity-new in the form and click on the OK button.

Click on OK button. Notice that this change is reflected in the form.

Click on the OK button in the Filter composer window.

Click on OK button. Click on the OK button in the Manage conditional styles for node dialog box.
Click on Format, Manage styles, Manage conditional styles for map Next, click on Format, Manage styles, Manage conditional styles for map.
click on New. Click on New button to add a new condition.
Click on Edit. Then click on the Edit button to set conditions.
In the first top left pulldown, Select Core text. A Filter Composer window opens.

From the many choices in first pull down, I will choose Core text.

Hover mouse over Contains and activity. I will set the condition as Contains.

In the top right most form, core text for the node is Activity.

Click on the funnel + sign. Click on the funnel + sign on the right panel.

It gets added in the form.

Click on the condition on the form Click on it to select the condition on the form.
Click on the icon for Set name. Click on the icon for Set name to set a name for this new condition.
Type Activity-new, click on OK button. Type Activity-new in the form and click on the OK button.
Click on OK button. Notice that this change is reflected in the form.

Click on the OK button.

Hover mouse over Activity-new. Notice that, the node condition, Activity-new is seen in the list.
From Style pull down select Activity1 and click Ok From Style pull down select Activity1 and click on Ok.
Point mouse on activity node. Since the node contains the text Activity, the style is automatically set.
Learner may pause the video and explore more if desired.
Press Control+S. Press Control+S to save the map.
Click on File, Quit Freeplane. Click on File, Quit Freeplane to quit Freeplane.
Slide Number 8

Summary

Now let's summarize. In this tutorial we,
  • Created a node style
  • Changed node style manually to the user defined style
  • Created user conditional style
  • Created a map conditional style and
  • Applied the conditional style automatically
Slide Number 9

Assignment

For assignment activity, please do the following.

Create user defined node styles and map conditional styles of your choice.

For the styles, you may

  • Change font color and size
  • Node shape and background color
Slide Number 10

Spoken Tutorial Project

This video summarises the Spoken Tutorial Project.

Please download and watch it.

Slide Number 11

Spoken Tutorial workshops

The Spoken Tutorial team:
  • conducts workshops and
  • give certificates.

For more details, please write to us.

Slide Number 12

Forum for specific questions

Please post your timed queries in this forum.
Slide Number 13

Acknowledgement

Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
This is Rani from IIT, Bombay.

Thank you for joining.

Contributors and Content Editors

Madhurig, PoojaMoolya, Ranipv076, Snehalathak

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Freeplane/C4/Conditional-Styles/English&oldid=54461"