dreemgl
Version:
DreemGL is an open-source multi-screen prototyping framework for mediated environments, with a visual editor and shader styling for webGL and DALi runtimes written in JavaScript. As a toolkit for gpu-accelerated multiscreen development, DreemGL includes
1 lines • 88.9 kB
JavaScript
Ext.data.JsonP.videoplayer({"tagname":"class","name":"videoplayer","autodetected":{},"files":[{"filename":"videoplayer.js","href":"videoplayer.html#videoplayer"}],"extends":"view","members":[{"name":"alignitems","tagname":"attribute","owner":"view","id":"attribute-alignitems","meta":{}},{"name":"alignself","tagname":"attribute","owner":"view","id":"attribute-alignself","meta":{}},{"name":"anchor","tagname":"attribute","owner":"view","id":"attribute-anchor","meta":{}},{"name":"anchormode","tagname":"attribute","owner":"view","id":"attribute-anchormode","meta":{}},{"name":"autoplay","tagname":"attribute","owner":"videoplayer","id":"attribute-autoplay","meta":{}},{"name":"bgcolor","tagname":"attribute","owner":"view","id":"attribute-bgcolor","meta":{}},{"name":"bgimage","tagname":"attribute","owner":"view","id":"attribute-bgimage","meta":{}},{"name":"bgimagealign","tagname":"attribute","owner":"view","id":"attribute-bgimagealign","meta":{}},{"name":"bgimagemode","tagname":"attribute","owner":"view","id":"attribute-bgimagemode","meta":{}},{"name":"bgimageoffset","tagname":"attribute","owner":"view","id":"attribute-bgimageoffset","meta":{}},{"name":"borderbottomwidth","tagname":"attribute","owner":"view","id":"attribute-borderbottomwidth","meta":{}},{"name":"bordercolor","tagname":"attribute","owner":"view","id":"attribute-bordercolor","meta":{}},{"name":"borderleftwidth","tagname":"attribute","owner":"view","id":"attribute-borderleftwidth","meta":{}},{"name":"borderradius","tagname":"attribute","owner":"view","id":"attribute-borderradius","meta":{}},{"name":"borderrightwidth","tagname":"attribute","owner":"view","id":"attribute-borderrightwidth","meta":{}},{"name":"bordertopwidth","tagname":"attribute","owner":"view","id":"attribute-bordertopwidth","meta":{}},{"name":"borderwidth","tagname":"attribute","owner":"view","id":"attribute-borderwidth","meta":{}},{"name":"bottom","tagname":"attribute","owner":"view","id":"attribute-bottom","meta":{}},{"name":"camera","tagname":"attribute","owner":"view","id":"attribute-camera","meta":{}},{"name":"clearcolor","tagname":"attribute","owner":"view","id":"attribute-clearcolor","meta":{}},{"name":"colorfilter","tagname":"attribute","owner":"view","id":"attribute-colorfilter","meta":{}},{"name":"corner","tagname":"attribute","owner":"view","id":"attribute-corner","meta":{}},{"name":"cursor","tagname":"attribute","owner":"view","id":"attribute-cursor","meta":{}},{"name":"depth","tagname":"attribute","owner":"view","id":"attribute-depth","meta":{}},{"name":"dropshadowcolor","tagname":"attribute","owner":"view","id":"attribute-dropshadowcolor","meta":{}},{"name":"dropshadowhardness","tagname":"attribute","owner":"view","id":"attribute-dropshadowhardness","meta":{}},{"name":"dropshadowoffset","tagname":"attribute","owner":"view","id":"attribute-dropshadowoffset","meta":{}},{"name":"dropshadowopacity","tagname":"attribute","owner":"view","id":"attribute-dropshadowopacity","meta":{}},{"name":"dropshadowradius","tagname":"attribute","owner":"view","id":"attribute-dropshadowradius","meta":{}},{"name":"farplane","tagname":"attribute","owner":"view","id":"attribute-farplane","meta":{}},{"name":"flex","tagname":"attribute","owner":"view","id":"attribute-flex","meta":{}},{"name":"flexdirection","tagname":"attribute","owner":"view","id":"attribute-flexdirection","meta":{}},{"name":"flexwrap","tagname":"attribute","owner":"view","id":"attribute-flexwrap","meta":{}},{"name":"focus","tagname":"attribute","owner":"view","id":"attribute-focus","meta":{}},{"name":"fov","tagname":"attribute","owner":"view","id":"attribute-fov","meta":{}},{"name":"front","tagname":"attribute","owner":"view","id":"attribute-front","meta":{}},{"name":"height","tagname":"attribute","owner":"view","id":"attribute-height","meta":{}},{"name":"justifycontent","tagname":"attribute","owner":"view","id":"attribute-justifycontent","meta":{}},{"name":"layout","tagname":"attribute","owner":"view","id":"attribute-layout","meta":{}},{"name":"left","tagname":"attribute","owner":"view","id":"attribute-left","meta":{}},{"name":"lookat","tagname":"attribute","owner":"view","id":"attribute-lookat","meta":{}},{"name":"margin","tagname":"attribute","owner":"view","id":"attribute-margin","meta":{}},{"name":"marginbottom","tagname":"attribute","owner":"view","id":"attribute-marginbottom","meta":{}},{"name":"marginleft","tagname":"attribute","owner":"view","id":"attribute-marginleft","meta":{}},{"name":"marginright","tagname":"attribute","owner":"view","id":"attribute-marginright","meta":{}},{"name":"margintop","tagname":"attribute","owner":"view","id":"attribute-margintop","meta":{}},{"name":"maxdepth","tagname":"attribute","owner":"view","id":"attribute-maxdepth","meta":{}},{"name":"maxheight","tagname":"attribute","owner":"view","id":"attribute-maxheight","meta":{}},{"name":"maxsize","tagname":"attribute","owner":"view","id":"attribute-maxsize","meta":{}},{"name":"maxwidth","tagname":"attribute","owner":"view","id":"attribute-maxwidth","meta":{}},{"name":"mindepth","tagname":"attribute","owner":"view","id":"attribute-mindepth","meta":{}},{"name":"minheight","tagname":"attribute","owner":"view","id":"attribute-minheight","meta":{}},{"name":"minsize","tagname":"attribute","owner":"view","id":"attribute-minsize","meta":{}},{"name":"minwidth","tagname":"attribute","owner":"view","id":"attribute-minwidth","meta":{}},{"name":"nearplane","tagname":"attribute","owner":"view","id":"attribute-nearplane","meta":{}},{"name":"opacity","tagname":"attribute","owner":"view","id":"attribute-opacity","meta":{}},{"name":"overflow","tagname":"attribute","owner":"view","id":"attribute-overflow","meta":{}},{"name":"padding","tagname":"attribute","owner":"view","id":"attribute-padding","meta":{}},{"name":"paddingbottom","tagname":"attribute","owner":"view","id":"attribute-paddingbottom","meta":{}},{"name":"paddingleft","tagname":"attribute","owner":"view","id":"attribute-paddingleft","meta":{}},{"name":"paddingright","tagname":"attribute","owner":"view","id":"attribute-paddingright","meta":{}},{"name":"paddingtop","tagname":"attribute","owner":"view","id":"attribute-paddingtop","meta":{}},{"name":"passes","tagname":"attribute","owner":"view","id":"attribute-passes","meta":{}},{"name":"percentdepth","tagname":"attribute","owner":"view","id":"attribute-percentdepth","meta":{}},{"name":"percentheight","tagname":"attribute","owner":"view","id":"attribute-percentheight","meta":{}},{"name":"percentwidth","tagname":"attribute","owner":"view","id":"attribute-percentwidth","meta":{}},{"name":"pixelratio","tagname":"attribute","owner":"view","id":"attribute-pixelratio","meta":{}},{"name":"pos","tagname":"attribute","owner":"view","id":"attribute-pos","meta":{}},{"name":"position","tagname":"attribute","owner":"view","id":"attribute-position","meta":{}},{"name":"rear","tagname":"attribute","owner":"view","id":"attribute-rear","meta":{}},{"name":"right","tagname":"attribute","owner":"view","id":"attribute-right","meta":{}},{"name":"rotate","tagname":"attribute","owner":"view","id":"attribute-rotate","meta":{}},{"name":"scale","tagname":"attribute","owner":"view","id":"attribute-scale","meta":{}},{"name":"scroll","tagname":"attribute","owner":"view","id":"attribute-scroll","meta":{}},{"name":"size","tagname":"attribute","owner":"view","id":"attribute-size","meta":{}},{"name":"tabstop","tagname":"attribute","owner":"view","id":"attribute-tabstop","meta":{}},{"name":"top","tagname":"attribute","owner":"view","id":"attribute-top","meta":{}},{"name":"up","tagname":"attribute","owner":"view","id":"attribute-up","meta":{}},{"name":"url","tagname":"attribute","owner":"videoplayer","id":"attribute-url","meta":{}},{"name":"viewport","tagname":"attribute","owner":"view","id":"attribute-viewport","meta":{}},{"name":"visible","tagname":"attribute","owner":"view","id":"attribute-visible","meta":{}},{"name":"volume","tagname":"attribute","owner":"videoplayer","id":"attribute-volume","meta":{}},{"name":"width","tagname":"attribute","owner":"view","id":"attribute-width","meta":{}},{"name":"x","tagname":"attribute","owner":"view","id":"attribute-x","meta":{}},{"name":"y","tagname":"attribute","owner":"view","id":"attribute-y","meta":{}},{"name":"z","tagname":"attribute","owner":"view","id":"attribute-z","meta":{}},{"name":"zoom","tagname":"attribute","owner":"view","id":"attribute-zoom","meta":{}},{"name":"addListener","tagname":"method","owner":"node","id":"method-addListener","meta":{}},{"name":"animate","tagname":"method","owner":"view","id":"method-animate","meta":{}},{"name":"atViewDestroy","tagname":"method","owner":"view","id":"method-atViewDestroy","meta":{}},{"name":"bgcolorfn","tagname":"method","owner":"view","id":"method-bgcolorfn","meta":{}},{"name":"find","tagname":"method","owner":"node","id":"method-find","meta":{}},{"name":"findChild","tagname":"method","owner":"node","id":"method-findChild","meta":{}},{"name":"globalToLocal","tagname":"method","owner":"view","id":"method-globalToLocal","meta":{}},{"name":"mixin","tagname":"method","owner":"node","id":"method-mixin","meta":{}},{"name":"pause","tagname":"method","owner":"videoplayer","id":"method-pause","meta":{}},{"name":"play","tagname":"method","owner":"videoplayer","id":"method-play","meta":{}},{"name":"removeListener","tagname":"method","owner":"node","id":"method-removeListener","meta":{}},{"name":"setBgImage","tagname":"method","owner":"view","id":"method-setBgImage","meta":{}},{"name":"startDrag","tagname":"method","owner":"view","id":"method-startDrag","meta":{}},{"name":"stop","tagname":"method","owner":"videoplayer","id":"method-stop","meta":{}},{"name":"stopAnimation","tagname":"method","owner":"view","id":"method-stopAnimation","meta":{}},{"name":"updatevideo","tagname":"method","owner":"videoplayer","id":"method-updatevideo","meta":{}},{"name":"videocleanup","tagname":"method","owner":"videoplayer","id":"method-videocleanup","meta":{}},{"name":"videoinit","tagname":"method","owner":"videoplayer","id":"method-videoinit","meta":{}}],"alternateClassNames":[],"aliases":{},"id":"class-videoplayer","short_doc":"Simple video player, without controls. ...","classIcon":"icon-class","superclasses":["node","view"],"subclasses":[],"mixedInto":[],"mixins":[],"parentMixins":[],"requires":[],"uses":[],"html":"<div><pre class=\"hierarchy\"><h4>Hierarchy</h4><div class='subclass first-child'><a href='#!/api/node' rel='node' class='docClass'>node</a><div class='subclass '><a href='#!/api/view' rel='view' class='docClass'>view</a><div class='subclass '><strong>videoplayer</strong></div></div></div><h4>Files</h4><div class='dependency'><a href='source/videoplayer.html#videoplayer' target='_blank'>videoplayer.js</a></div></pre><div class='doc-contents'><p>Simple video player, without controls. Frames from a html5 video are\ncopied into a canvas element. Each image is written to the view's texture.\nThe view needs to use the hardimage shader, so the view is initialized\nwith an empty texture. The video and canvas resources are allocated when\nthe video plays, and released when the video is finished.</p>\n</div><div class='members'><div class='members-section'><div class='definedBy'>Defined By</div><h3 class='members-title icon-attribute'>Attributes</h3><div class='subsection'><div id='attribute-alignitems' class='member first-child inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-alignitems' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-alignitems' class='name expandable'>alignitems</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>align items to either start, center, end or stretch them ...</div><div class='long'><p>align items to either start, center, end or stretch them</p>\n<p>Defaults to: <code>"stretch"</code></p></div></div></div><div id='attribute-alignself' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-alignself' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-alignself' class='name expandable'>alignself</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>overrides the parents alignitems with our own preference ...</div><div class='long'><p>overrides the parents alignitems with our own preference</p>\n<p>Defaults to: <code>""</code></p></div></div></div><div id='attribute-anchor' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-anchor' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-anchor' class='name expandable'>anchor</a> : vec3<span class=\"signature\"></span></div><div class='description'><div class='short'>The anchor point around which items scale and rotate, depending on anchor mode its either a factor of size or and abs...</div><div class='long'><p>The anchor point around which items scale and rotate, depending on anchor mode its either a factor of size or and absolute value</p>\n<p>Defaults to: <code>"0,0,0"</code></p></div></div></div><div id='attribute-anchormode' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-anchormode' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-anchormode' class='name expandable'>anchormode</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>the mode with which the anchor is computed. ...</div><div class='long'><p>the mode with which the anchor is computed. Factor uses the size of an item to find the point, defaulting to center</p>\n<p>Defaults to: <code>"factor"</code></p></div></div></div><div id='attribute-autoplay' class='member not-inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><span class='defined-in' rel='videoplayer'>videoplayer</span><br/><a href='source/videoplayer.html#videoplayer-attribute-autoplay' target='_blank' class='view-source'>view source</a></div><a href='#!/api/videoplayer-attribute-autoplay' class='name expandable'>autoplay</a> : boolean<span class=\"signature\"></span></div><div class='description'><div class='short'>When true (default), start the video track automatically. ...</div><div class='long'><p>When true (default), start the video track automatically.</p>\n<p>Defaults to: <code>"true"</code></p></div></div></div><div id='attribute-bgcolor' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bgcolor' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bgcolor' class='name expandable'>bgcolor</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>the background color of a view, referenced by various shaders ...</div><div class='long'><p>the background color of a view, referenced by various shaders</p>\n<p>Defaults to: <code>"0,0,0,0"</code></p></div></div></div><div id='attribute-bgimage' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bgimage' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bgimage' class='name expandable'>bgimage</a> : Object<span class=\"signature\"></span></div><div class='description'><div class='short'>the background image of a view. ...</div><div class='long'><p>the background image of a view. Accepts a string-url or can be assigned a require('./mypic.png')</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-bgimagealign' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bgimagealign' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bgimagealign' class='name expandable'>bgimagealign</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>When using aspect-fit, or apsect-fill this property will automatically adjust the image's location within the view. ...</div><div class='long'><p>When using <code>aspect-fit</code>, or <code>apsect-fill</code> this property will automatically adjust the image's location within the view.</p>\n<p>Defaults to: <code>"none"</code></p></div></div></div><div id='attribute-bgimagemode' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bgimagemode' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bgimagemode' class='name expandable'>bgimagemode</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>Image mode alters how/where the background image is scaled, streched, fit and drawn within the view's bounds. ...</div><div class='long'><p>Image mode alters how/where the background image is scaled, streched, fit and drawn within the view's bounds.</p>\n<p>Defaults to: <code>"stretch"</code></p></div></div></div><div id='attribute-bgimageoffset' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bgimageoffset' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bgimageoffset' class='name expandable'>bgimageoffset</a> : vec2<span class=\"signature\"></span></div><div class='description'><div class='short'>Offets the image within the view. ...</div><div class='long'><p>Offets the image within the view. This value is in texture coordinates.</p>\n<p>Defaults to: <code>"0,0"</code></p></div></div></div><div id='attribute-borderbottomwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-borderbottomwidth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-borderbottomwidth' class='name expandable'>borderbottomwidth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the fourth component of borderwith ...</div><div class='long'><p>alias for the fourth component of borderwith</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-bordercolor' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bordercolor' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bordercolor' class='name expandable'>bordercolor</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>the color of the border of an item. ...</div><div class='long'><p>the color of the border of an item.</p>\n<p>Defaults to: <code>"0,0,0,0"</code></p></div></div></div><div id='attribute-borderleftwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-borderleftwidth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-borderleftwidth' class='name expandable'>borderleftwidth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the first component of borderwidth ...</div><div class='long'><p>alias for the first component of borderwidth</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-borderradius' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-borderradius' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-borderradius' class='name expandable'>borderradius</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>the radius of the corners of an item, individually settable left, top, right, bottom. ...</div><div class='long'><p>the radius of the corners of an item, individually settable left, top, right, bottom. Setting this value will switch to rounded corner shaders</p>\n<p>Defaults to: <code>"0,0,0,0"</code></p></div></div></div><div id='attribute-borderrightwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-borderrightwidth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-borderrightwidth' class='name expandable'>borderrightwidth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the third component of borderwith ...</div><div class='long'><p>alias for the third component of borderwith</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-bordertopwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bordertopwidth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bordertopwidth' class='name expandable'>bordertopwidth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the second component of borderwith ...</div><div class='long'><p>alias for the second component of borderwith</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-borderwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-borderwidth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-borderwidth' class='name expandable'>borderwidth</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>the width of the border. ...</div><div class='long'><p>the width of the border. Setting this value will automatically enable the border shaders</p>\n<p>Defaults to: <code>"0,0,0,0"</code></p></div></div></div><div id='attribute-bottom' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-bottom' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-bottom' class='name expandable'>bottom</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for y component of corner ...</div><div class='long'><p>alias for y component of corner</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-camera' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-camera' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-camera' class='name expandable'>camera</a> : vec3<span class=\"signature\"></span></div><div class='description'><div class='short'>the position of the camera in 3D space. ...</div><div class='long'><p>the position of the camera in 3D space. Only useful on a viewport:'3D'</p>\n<p>Defaults to: <code>"-2,2,-2"</code></p></div></div></div><div id='attribute-clearcolor' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-clearcolor' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-clearcolor' class='name expandable'>clearcolor</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>the clear color of the view when it is in '2D' or '3D' viewport mode ...</div><div class='long'><p>the clear color of the view when it is in '2D' or '3D' viewport mode</p>\n<p>Defaults to: <code>"NaN"</code></p></div></div></div><div id='attribute-colorfilter' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-colorfilter' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-colorfilter' class='name expandable'>colorfilter</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>Per channel color filter, each color is a value in the range 0.0 ~ 1.0 and is multiplied by the color of the backgrou...</div><div class='long'><p>Per channel color filter, each color is a value in the range 0.0 ~ 1.0 and is multiplied by the color of the background image</p>\n<p>Defaults to: <code>"1,1,1,1"</code></p></div></div></div><div id='attribute-corner' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-corner' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-corner' class='name expandable'>corner</a> : vec3<span class=\"signature\"></span></div><div class='description'><div class='short'>the bottom/right/rear corner, used by layout ...</div><div class='long'><p>the bottom/right/rear corner, used by layout</p>\n<p>Defaults to: <code>"NaN,NaN,NaN"</code></p></div></div></div><div id='attribute-cursor' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-cursor' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-cursor' class='name expandable'>cursor</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>the type of pointer cursor to use for this view ...</div><div class='long'><p>the type of pointer cursor to use for this view</p>\n<p>Defaults to: <code>""</code></p></div></div></div><div id='attribute-depth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-depth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-depth' class='name expandable'>depth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the z component of size ...</div><div class='long'><p>alias for the z component of size</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-dropshadowcolor' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-dropshadowcolor' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-dropshadowcolor' class='name expandable'>dropshadowcolor</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>drop shadow color ...</div><div class='long'><p>drop shadow color</p>\n<p>Defaults to: <code>"0,0,0,1"</code></p></div></div></div><div id='attribute-dropshadowhardness' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-dropshadowhardness' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-dropshadowhardness' class='name expandable'>dropshadowhardness</a> : float32<span class=\"signature\"></span></div><div class='description'><div class='short'>drop shadow hardness ...</div><div class='long'><p>drop shadow hardness</p>\n<p>Defaults to: <code>"0.5"</code></p></div></div></div><div id='attribute-dropshadowoffset' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-dropshadowoffset' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-dropshadowoffset' class='name expandable'>dropshadowoffset</a> : vec2<span class=\"signature\"></span></div><div class='description'><div class='short'>drop shadow movement ...</div><div class='long'><p>drop shadow movement</p>\n<p>Defaults to: <code>"0,0"</code></p></div></div></div><div id='attribute-dropshadowopacity' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-dropshadowopacity' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-dropshadowopacity' class='name expandable'>dropshadowopacity</a> : float32<span class=\"signature\"></span></div><div class='description'><div class='short'>drop shadow opacity ...</div><div class='long'><p>drop shadow opacity</p>\n<p>Defaults to: <code>"0"</code></p></div></div></div><div id='attribute-dropshadowradius' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-dropshadowradius' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-dropshadowradius' class='name expandable'>dropshadowradius</a> : float32<span class=\"signature\"></span></div><div class='description'><div class='short'>drop shadow size ...</div><div class='long'><p>drop shadow size</p>\n<p>Defaults to: <code>"20"</code></p></div></div></div><div id='attribute-farplane' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-farplane' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-farplane' class='name expandable'>farplane</a> : float32<span class=\"signature\"></span></div><div class='description'><div class='short'>the farplane of a 3D viewport, controls at which Z value far clipping start. ...</div><div class='long'><p>the farplane of a 3D viewport, controls at which Z value far clipping start. Only useful on a viewport:'3D'</p>\n<p>Defaults to: <code>"1000"</code></p></div></div></div><div id='attribute-flex' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-flex' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-flex' class='name expandable'>flex</a> : float32<span class=\"signature\"></span></div><div class='description'><div class='short'>turn on flex sizing. ...</div><div class='long'><p>turn on flex sizing. Flex is a factor that distributes either the widths or the heights of nodes by this factor\nflexbox layout is a web standard and has many great tutorials online to learn how it works</p>\n<p>Defaults to: <code>"NaN"</code></p></div></div></div><div id='attribute-flexdirection' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-flexdirection' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-flexdirection' class='name expandable'>flexdirection</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>which direction the flex layout is working, ...</div><div class='long'><p>which direction the flex layout is working,</p>\n<p>Defaults to: <code>"row"</code></p></div></div></div><div id='attribute-flexwrap' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-flexwrap' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-flexwrap' class='name expandable'>flexwrap</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>wraps nodes around when the flexspace is full ...</div><div class='long'><p>wraps nodes around when the flexspace is full</p>\n<p>Defaults to: <code>"wrap"</code></p></div></div></div><div id='attribute-focus' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-focus' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-focus' class='name expandable'>focus</a> : boolean<span class=\"signature\"></span></div><div class='description'><div class='short'>whether this view has focus ...</div><div class='long'><p>whether this view has focus</p>\n<p>Defaults to: <code>"false"</code></p></div></div></div><div id='attribute-fov' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-fov' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-fov' class='name expandable'>fov</a> : float32<span class=\"signature\"></span></div><div class='description'><div class='short'>the field of view of a 3D viewport. ...</div><div class='long'><p>the field of view of a 3D viewport. Only useful on a viewport:'3D'</p>\n<p>Defaults to: <code>"45"</code></p></div></div></div><div id='attribute-front' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-front' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-front' class='name expandable'>front</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the z component of pos ...</div><div class='long'><p>alias for the z component of pos</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-height' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-height' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-height' class='name expandable'>height</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the y component of size. ...</div><div class='long'><p>alias for the y component of size. To read the height, use this.layout.height.</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-justifycontent' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-justifycontent' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-justifycontent' class='name expandable'>justifycontent</a> : Enum<span class=\"signature\"></span></div><div class='description'><div class='short'>pushes items eitehr to the start, center or end ...</div><div class='long'><p>pushes items eitehr to the start, center or end</p>\n<p>Defaults to: <code>""</code></p></div></div></div><div id='attribute-layout' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-layout' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-layout' class='name expandable'>layout</a> : Object<span class=\"signature\"></span></div><div class='description'><div class='short'>the layout object, contains width/height/top/left after computing. ...</div><div class='long'><p>the layout object, contains width/height/top/left after computing. Its a read-only property and should be used in shaders only.\nCan be listened to to observe layout changes</p>\n<p>Defaults to: <code>"[object Object]"</code></p></div></div></div><div id='attribute-left' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-left' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-left' class='name expandable'>left</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the x component of pos ...</div><div class='long'><p>alias for the x component of pos</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-lookat' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-lookat' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-lookat' class='name expandable'>lookat</a> : vec3<span class=\"signature\"></span></div><div class='description'><div class='short'>the point the camera is looking at in 3D space. ...</div><div class='long'><p>the point the camera is looking at in 3D space. Only useful on a viewport:'3D'</p>\n<p>Defaults to: <code>"0,0,0"</code></p></div></div></div><div id='attribute-margin' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-margin' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-margin' class='name expandable'>margin</a> : vec4<span class=\"signature\"></span></div><div class='description'><div class='short'>the margin on 4 sides of the box (left, top, right, bottom). ...</div><div class='long'><p>the margin on 4 sides of the box (left, top, right, bottom). Can be assigned a single value to set them all at once</p>\n<p>Defaults to: <code>"0,0,0,0"</code></p></div></div></div><div id='attribute-marginbottom' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-marginbottom' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-marginbottom' class='name expandable'>marginbottom</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the fourth component of margin ...</div><div class='long'><p>alias for the fourth component of margin</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-marginleft' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-marginleft' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-marginleft' class='name expandable'>marginleft</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the first component of margin ...</div><div class='long'><p>alias for the first component of margin</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-marginright' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-marginright' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-marginright' class='name expandable'>marginright</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the third component of margin ...</div><div class='long'><p>alias for the third component of margin</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-margintop' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-margintop' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-margintop' class='name expandable'>margintop</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the second component of margin ...</div><div class='long'><p>alias for the second component of margin</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-maxdepth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-maxdepth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-maxdepth' class='name expandable'>maxdepth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the z component of maxsize ...</div><div class='long'><p>alias for the z component of maxsize</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-maxheight' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-maxheight' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-maxheight' class='name expandable'>maxheight</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the y component of maxsize ...</div><div class='long'><p>alias for the y component of maxsize</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-maxsize' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-maxsize' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-maxsize' class='name expandable'>maxsize</a> : vec3<span class=\"signature\"></span></div><div class='description'><div class='short'>the maximum size for the flexbox layout engine ...</div><div class='long'><p>the maximum size for the flexbox layout engine</p>\n<p>Defaults to: <code>"NaN,NaN,NaN"</code></p></div></div></div><div id='attribute-maxwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-maxwidth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-maxwidth' class='name expandable'>maxwidth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the x component of maxsize ...</div><div class='long'><p>alias for the x component of maxsize</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-mindepth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-mindepth' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-mindepth' class='name expandable'>mindepth</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the z component of minsize ...</div><div class='long'><p>alias for the z component of minsize</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-minheight' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-minheight' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-minheight' class='name expandable'>minheight</a> : typeless<span class=\"signature\"></span></div><div class='description'><div class='short'>alias for the y component of minsize ...</div><div class='long'><p>alias for the y component of minsize</p>\n<p>Defaults to: <code>"undefined"</code></p></div></div></div><div id='attribute-minsize' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-minsize' target='_blank' class='view-source'>view source</a></div><a href='#!/api/view-attribute-minsize' class='name expandable'>minsize</a> : vec3<span class=\"signature\"></span></div><div class='description'><div class='short'>the minimum size for the flexbox layout engine ...</div><div class='long'><p>the minimum size for the flexbox layout engine</p>\n<p>Defaults to: <code>"NaN,NaN,NaN"</code></p></div></div></div><div id='attribute-minwidth' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/view' rel='view' class='defined-in docClass'>view</a><br/><a href='source/view.html#view-attribute-minwidth' target='_blank' class='view-source'>view source</a></div><a href