GDI Canvas Element

Modified on 2018/07/16 01:16 by Administrator Categorized as Base Elements, Elements, Visual Stimuli
<div style="margin-right: 10px; margin-left: 16px; margin-bottom:10px; float: right; width: 500px; overflow: hidden; height: auto; padding: 0px; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));background: -moz-linear-gradient(top, #fbfbfb, #fafafa);border: 1px dashed #ddd;box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ddd, 0 0 0 10px #fff, 0 0 2px 10px #eee;">
== Summary ==
{s:Element Info Panel
| title=GDI canvas
| category=Visual Stimuli
| icon=[image|Element Icon|{UP(GDI-canvas-Element)}GDI-canvas-Element-Icon.png]
| author= OkazoLab
| addin= Base Layer
| scope= Parent event
| usage= Stimulus screen
| ownsnippets= None
}
== Properties ==
{|
|-
! Name
! Description                              
! Constraints
! Type
! On<br/>runtime<br/>change
|-
| colspan="5" bgcolor="#AADDDDD" | Visual Appearance
|-
| Background Color        
| Background color for canvas.        
| {s:atNormal}        
| stColor        
|  
|-
| Alpha Masking        
| Defines, whether the visual content is used to create an opacity mask on the event surface. If masking is on, the content's pixel luminance (or, its inverse) defines transparency within element's viewport. The alpha masking allows, for example, create transparent holes on the event surface.        
| {s:atDesign}        
| Int32        
|  
|-
| AntiAliasing        
| if true, the rendered content will be antialiased for smoother visual appeariance. If false, rendering will be authentic to its source, e.g. a bitmap.        
| {s:atNormal}        
| Boolean        
|  
|-
| Position        
| Defines a position of the rendering viewport on the screen        
| {s:atNormal}        
| clPoint        
|  
|-
| Size        
| Defines a size of the element's rendering viewport on the screen        
| {s:atNormal}        
| clSize        
|  
|-
| Z Order        
| Indicates Z Order of the element on the given event        
| {s:atStatus}        
| Int32        
|  
|-
| Pivot Point        
| Defines alignment of the pivot point (or, element's position) relative to element's rendering area. The pivot point sets the center of element's rotation and scale directions.        
| {s:atNormal}        
| stAlig..        
|  
|-
| Visible        
| Defines whether the element is visible        
| {s:atNormal}        
| Boolean        
|  
|-
| Rotation        
| Rotation angle in degrees        
| {s:atNormal}        
| Double        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Run Time
|-
| Graphics Class        
| Returns a core GDI+ class (Graphics type) that provides a set of drawing functions. Drawing operations are invoked via class's methods, e.g. GraphicsClass.DrawEllipse(...);        
| {s:atNormal}        
| Graphi..        
|  
|-
| Update Canvas Now        
| Returns a core GDI+ class (Graphics type) that provides a set of drawing functions. Drawing operations are invoked via class's methods, e.g. GraphicsClass.DrawEllipse(...);        
| {s:atNormal}        
| Boolean        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Effects
|-
| Transparent Color        
| The color of the original pixels of rendered content that will be set as transparent        
| {s:atNormal}        
| stColor        
|  
|-
| Transparent Tolerance        
| Tolerance ratio for choosing colors that become transparent. Zero means that effect is not applied, 1 denotes that all colors will become trasparent        
| {s:atNormal}        
| Int32        
|  
|-
| Color Mask        
| Produces a multiplicative combination of the original pixels
and the selected mask color (except the alpha channel).
 The effect emulates a look through a colored glass.
 White or transparent mask color dont change the original pixels        
| {s:atNormal}        
| stColor        
|  
|-
| Opacity        
| Opacity of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Contrast        
| Contrast of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Brightness        
| Brightness the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Saturation        
| Saturation of the rendered content        
| {s:atNormal}        
| Double        
|  
|-
| Pixelation        
| Pixelation of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Blurring        
| The radius used in the gaussian blur of rendered content, as a pixel-based factor. The default is 0 which means no blurring.        
| {s:atNormal}        
| Int32        
|  
|-
| Scrambling        
|         
| {s:atNormal}        
| Double        
|  
|-
| Scrambling Grid Size        
| Defines a size of the scrambling grid        
| {s:atNormal}        
| clSize        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Positional Jitter
|-
| Reset Jitter Now        
| Runtime command that resets the positional jitter.        
| {s:atRuntimeAction}        
| Boolean        
|  
|-
| Current Jitter        
| Returns the current jitter        
| {s:atStatus}        
| clPoint        
|  
|-
| Jitter Range        
| Defines a possible range for the random jitter. The range is centered to the position of the element.        
| {s:atNormal}        
| clSize        
|  
|-
| Test Jitter        
| Click to test the current jitter        
| {s:atDesign}        
| Boolean        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Control
|-
| Is Enabled        
| If set to false the element is completely omitted when the experiment is run        
| {s:atDesign}        
| Boolean        
|  
|-
| Title        
| Title of the element        
| {s:atDesign}        
| String        
|  
|-            
|}
== ==
</div>
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
'''GDI Canvas Element''' provides a rectangular canvas for creating custom vector graphics at runtime. For that purpose, all drawing functions of powerful GDI+ graphics API are directly available in [code snippets].{br}{br}
{TOC}
== Description ==
[^http://msdn.microsoft.com/en-us/library/ms533797%28v=vs.85%29.aspx|GDI+] is a powerful graphical library for Windows, with thousands functions for drawing graphical primitives and bitmaps, managing colors and geometrical transforms [http://www.codeproject.com/Articles/1112/Starting-with-GDI|GDI+ tutorial]. You can call these functions in your code snippets in order to draw a dynamic 2D graphical content in your experiments.
== Snapshots ==
{|
| [imageleft||{UP(GDI-canvas-element)}GDICanvasCircles_sm.jpg|{UP(GDI-canvas-element)}GDICanvasCircles.png]
| [imageleft|Example canvas|{UP}/pictures/Elements/GDIcanvas/GDIrend_sm.jpg|{UP}/pictures/Elements/GDIcanvas/GDIrend.png]
|| [imageleft|Example code|{UP}/pictures/Elements/GDIcanvas/GDICode_sm.jpg|{UP}/pictures/Elements/GDIcanvas/GDICode.png]
|}
== Practical Use ==
Using the element is very easy. By setting its position and size you define a rectangular area on the screen that represents a rendering canvas for drawing functions. Then you address the Graphics property of the element. This property provides you with the base GDI class which, in turn, possesses all available drawing functions. Now you call these functions directly as in the following C# line:

@@ Graphics.DrawRectangle(new Pen(Color.Red), 20,20,248,162); @@

When a snippet with GDI calls is completed the canvas element redraws its rendering canvas which also reappears on the screen if the parent event is active.

=== Step by Step: Adding a GDI Canvas element ===
# On an event, click "Add Element", under the "VISUAL STIMULI" category, select the "GDI canvas" element.
# Double click on the black square that appears.
# Create a proxy variable from the "Graphics" property, e.g "Graphics"
# In the bottom 'Snippets' panel, under 'Preparation', click on the 'Start' Snippet.
# add the following code: <br>
@@ Graphics.DrawRectangle(new Pen(Color.Red), 20,20,248,162); @@


Note: If unsure about proxy variables, please see the [Proxy variables] concept page.

== Notes ==

* The drawing coordinates in your code have to be inside of the range defined by the size of the GDI Canvas element in pixels, otherwise the drawn content will be cut off.
* The GDI canvas element remembers its rendered state even if the parent event is deactivated and activated again. To clear the drawn graphics use the GDI Clear() function.
Meta Keywords:
Meta Description:
Change Comment:
EventIDE Wiki

Navigation¶

GDI Canvas Element
