Draggable Hotspot - Revision history

He120: /* How to Use */

2022-07-18T10:57:18Z

How to Use

← Older revision		Revision as of 10:57, 18 July 2022
Line 42:		Line 42:
	</template>		</template>
	‎</syntaxhighlight>		‎</syntaxhighlight>



	===Props===		===Props===

He120: /* Technical Information */

2022-07-12T16:32:33Z

Technical Information

← Older revision		Revision as of 16:32, 12 July 2022
Line 42:		Line 42:
	</template>		</template>
	‎</syntaxhighlight>		‎</syntaxhighlight>



	===Props===		===Props===

He120: /* How to Use */

2022-07-12T16:31:53Z

How to Use

← Older revision		Revision as of 16:31, 12 July 2022
Line 7:		Line 7:
	To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:		To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:

	‎<syntaxhighlight lang="C#" line>		‎<syntaxhighlight lang="html" line>
	<template>		<template>
	<div>		<div>

He120: /* How to Use */

2022-07-12T16:31:41Z

How to Use

← Older revision		Revision as of 16:31, 12 July 2022
Line 7:		Line 7:
	To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:		To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:

	‎<syntaxhighlight lang="C++" line>		‎<syntaxhighlight lang="C#" line>
	<template>		<template>
	<div>		<div>

He120: /* How to Use */

2022-07-12T16:31:23Z

How to Use

← Older revision		Revision as of 16:31, 12 July 2022
Line 7:		Line 7:
	To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:		To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:

	‎<syntaxhighlight lang="~~python~~" line>		‎<syntaxhighlight lang="C++" line>
	<template>		<template>
	<div>		<div>

He120: /* Technical Information */

2022-07-12T10:15:13Z

Technical Information

← Older revision		Revision as of 10:15, 12 July 2022
Line 7:		Line 7:
	To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:		To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:

	<~~pre~~>		‎<syntaxhighlight lang="python" line>
	<template>		<template>
	<div>		<div>
Line 41:		Line 41:
	</div>		</div>
	</template>		</template>
	</~~pre~~>		‎</syntaxhighlight>

	===Props===		===Props===

He120: /* How to Use */

2022-07-09T13:16:26Z

How to Use

← Older revision		Revision as of 13:16, 9 July 2022
Line 6:		Line 6:
	===How to Use===		===How to Use===
	To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:		To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:
	<div class="~~res~~-img">~~[[File~~:Hotspot-~~example~~-~~2.png\|780x780px]]~~
	</div>		<pre>
			<template>
			<div>
			<iv-DraggableDiv idName="Control Panel 1">
			<iv-slider></iv-slider>
			<iv-toggle-basic> </iv-toggle-basic>
			<iv-toggle-advance></iv-toggle-advance>
			<iv-reset-button> Reset </iv-reset-button>
			</iv-DraggableDiv>
			<iv-visualisation :title="projectName">
			<div class="iv-welcome-message">
			<!-- <img scr='./assets/ImpVis-logo.png' alt="ImpVisLogo" height="50"/>
			<h1> Welcome to Imperial Visualisations!</h1>
			<p> Your project, {{projectName}} has successfully been set up using the NodeJS template!</p>-->
			<h1> Welcome to Imperial Visualisations!</h1>
			<p> Your project, {{projectName}} has successfully been set up using the NodeJS template!</p>

			</div>

			<template #hotspots>
			<iv-pane position='left' format='push' :glass=true></iv-pane>

			<iv-toggle-hotspot :draggable=true position='top' title='Toggle Hotspot' idName="Control Panel 1">
			</iv-toggle-hotspot>
			<iv-toggle-hotspot position='bottom' title='Toggle Hotspot'>
			</iv-toggle-hotspot>
			<iv-fixed-hotspot position='topright'>
			I am a fixed hotspot
			</iv-fixed-hotspot>
			</template>
			</iv-visualisation>

			</div>
			</template>
			</pre>

	===Props===		===Props===
	Name: idName		Name: idName

FreyaHan at 08:52, 7 July 2021

2021-07-07T08:52:08Z

← Older revision		Revision as of 08:52, 7 July 2021
Line 42:		Line 42:

	==Design Choice==		==Design Choice==
	The toggle hotspot button was used in the draggable hotspot		The toggle hotspot button was used in the draggable hotspot to keep consistency with the toggle hotspot itself. The color of the drag me bar and the close button are set to be the same color as the toggle button

	[[Category:Layouts]]		[[Category:Layouts]]

FreyaHan: /* How to Use */

2021-07-07T08:50:47Z

How to Use

← Older revision		Revision as of 08:50, 7 July 2021
Line 5:		Line 5:
	==Technical Information==		==Technical Information==
	===How to Use===		===How to Use===
	To use the <code>iv-draggableDiv</code> component, put this tag ~~inside~~ the <code>iv-visualisation</code> tag ~~but oustside the <code>#hotspots</code> template~~. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:		To use the <code>iv-draggableDiv</code> component, put this tag outside the <code>iv-visualisation</code> tag. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag and set the draggle prop to be true. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:
	<div class="res-img">[[File:Hotspot-example-1.png\|780x780px]]		<div class="res-img">[[File:Hotspot-example-2.png\|780x780px]]
	</div>		</div>
	===Props===		===Props===

FreyaHan at 12:31, 6 July 2021

2021-07-06T12:31:00Z

← Older revision		Revision as of 12:31, 6 July 2021
Line 3:		Line 3:
	[[File:Draggable-hotspot.png\|740x740px]]		[[File:Draggable-hotspot.png\|740x740px]]
	</div>		</div>
			==Technical Information==
			===How to Use===
			To use the <code>iv-draggableDiv</code> component, put this tag inside the <code>iv-visualisation</code> tag but oustside the <code>#hotspots</code> template. To add the toggle button to open this div, inside the <code>#hotspots</code> template, add the <code>iv-toggle-hotspot</code> tag. To bind the div and the toggle button together, give the same idName to both. An example code is shown below:
			<div class="res-img">[[File:Hotspot-example-1.png\|780x780px]]
			</div>
			===Props===
			Name: idName

			Type: String

			Required: true

			Default: "Name_1"

			Description: Need to be included so that by matching it with the idName of the iv-toggle-hotspot component, the two can be binded together


			Name: glass

			Type: Bollean

			Default: true

			Description: Used to create glass effect


			Name: transparent

			Type: Bollean

			Default: false

			Description: Used to create transparent effect


			===Events===
			None

			==Design Choice==
			The toggle hotspot button was used in the draggable hotspot

	[[Category:Layouts]]		[[Category:Layouts]]