Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -106,21 +106,26 @@
106	106
107	107	Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
108	108
109		-=== 2.1. Basic controls of the plot ===
	109	+=== 2.1. Moving through the timeline and channels list ===
110	110
111		-If you hover over a signal, a tooltip will appear where you can see the exact value from that point and the name of the channel you are hovering over. Next, you can zoom in, by dragging and creating an area inside the plot or from the plotly tools area and zoom out, from the same tools area. To come back to the original view, you can click the 'Reset axes' button (house icon) from the tools area.
	111	+To move through the timeline or channels list, go to your cursor over the X (for timeline) and Y (for channels) axes and drag it to navigate.
112	112
113		-To the right of the plot there is a legend, showing the channels which are plotted. The '**[R]**' notation means that the signal is **resampled** so that all of it can be viewed inside the plot. The '**~~20**' notation means that 20 consecutive points are aggregated into a single point in the plot. As you zoom in in the plot, the number of aggregated points decreases. This is all done using the [[**plotly-resampler**>>https://predict-idlab.github.io/plotly-resampler/]] package.
114		-
115		-Moreover, clicking on a channel name from the legend will toggle its visibility inside the plot. This means that the signal corresponding to that channel //is not removed, but just invisible// in the plot. Double clicking on a channel  from the legend will isolate it, meaning that will be the only visible channel in the plot and the rest of them will be hidden. Double clicking again will make all the channels visible again. If you wish to hide all the channels or make all of them visible, use the 'Hide All' and 'Show All' buttons.
116		-
117	117	{{html}}
118		-<iframe width="840" height="480" src="https://www.youtube.com/embed/x4ksyKIFUAk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	114	+<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
119	119	{{/html}}
120	120
	117	+=== 2.2. Modify spacing between channels ===
121	121
122		-=== 2.2. Moving through the timeline and channels list ===
123	123
	120	+{{html}}<iframe width="840" height="480" src="https://www.youtube.com/embed/q_olB7uRSc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>{{/html}}
	121	+
	122	+
	123	+== 2. TS Widget with plotly ==
	124	+
	125	+Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
	126	+
	127	+=== 2.1. Moving through the timeline and channels list ===
	128	+
124	124	To move through the timeline or channels list, go to your cursor over the X (for timeline) and Y (for channels) axes and drag it to navigate.
125	125
126	126	{{html}}
...	...	@@ -127,32 +127,36 @@
127	127	<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
128	128	{{/html}}
129	129
130		-=== 2.3. Modify spacing between channels ===
	135	+=== 2.2. Modify spacing between channels ===
131	131
132		-To modify the spacing between the channels, go with your cursor over the beginning/end of the Y axis (where the channels list is) and drag it to the outside of the plot area. To decrease the spacing, drag your cursor to the inside of the plot area. To reset the spacing to the default values, click on the 'Reset axes' button (Home icon) from the plotly tools area.
133	133
134	134	{{html}}<iframe width="840" height="480" src="https://www.youtube.com/embed/q_olB7uRSc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>{{/html}}
135	135
136	136
137		-=== 2.4. Modify signal scaling ===
	141	+== 2. TS Widget with plotly ==
138	138
139		-To modify the scaling (amplitude) of a signal, use the slider below the plot. To the right of the slider you will see the scaling factor, i.e. the number by which the signals are multiplied.
	143	+Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
140	140
	145	+=== 2.1. Moving through the timeline and channels list ===
	146	+
	147	+To move through the timeline or channels list, go to your cursor over the X (for timeline) and Y (for channels) axes and drag it to navigate.
	148	+
141	141	{{html}}
142		-<iframe width="840" height="480" src="https://www.youtube.com/embed/mYitFiHy_Qs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	150	+<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
143	143	{{/html}}
144	144
145		-=== 2.5. Channels and dimensions selection ===
	153	+== 2. TS Widget with plotly ==
146	146
147		-To select which channels are plotted/removed from the plot (so not just visible/hidden), you can use the 'Channels' area to the right of the plot & legend. When you expend it, the first visible element is a 'Submit selection' button, which must be used every time a change is done in this Channels area.
	155	+Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
148	148
149		-Underneath this button there are a 'State variable' and a 'Mode' selection sections, which are mostly relevant when the input data (time series) has 3 or 4 dimensions.
	157	+=== 2.1. Moving through the timeline and channels list ===
150	150
151		-Below are the 'Select all' and 'Unselect all' buttons, which will plot/remove all the signals in/from the plot.
	159	+{{html}}
	160	+<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	161	+{{/html}}
152	152
153		-Finally, below you can see a list of checkboxes, where each checkbox corresponds to one signal from the plot. Unchecking a checkbox for a signal will remove that signal from the plot.
	163	+== 2. TS Widget with plotly ==
154	154
155		-Once again, always remember that for each selection, be it a dimension or a signal selection, you must use the 'Submit selection' button to see a change in the plot.
	165	+Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
156	156
157		-{{html}}<iframe width="840" height="480" src="https://www.youtube.com/embed/Ehj_n5JAYI8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>{{/html}}
158		-
	167	+=== 2.1. Moving through the timeline and channels list ===