172 lines
13 KiB
HTML
172 lines
13 KiB
HTML
<!-- HTML header for doxygen 1.8.8-->
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- For Mobile Devices -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
|
|
<meta name="generator" content="Doxygen 1.8.12"/>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<title>Ewol: Ewol Widget in OpenGl: EWOL: Create a custom Widget</title>
|
|
<!--<link href="tabs.css" rel="stylesheet" type="text/css"/>-->
|
|
<script type="text/javascript" src="dynsections.js"></script>
|
|
<link href="search/search.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="search/searchdata.js"></script>
|
|
<script type="text/javascript" src="search/search.js"></script>
|
|
<link href="doxygen.css" rel="stylesheet" type="text/css" />
|
|
<link href="customdoxygen.css" rel="stylesheet" type="text/css"/>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="doxy-boot.js"></script>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<a class="navbar-brand">Ewol: Ewol Widget in OpenGl 0.10.0</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="index.html">Main Page</a></li>
|
|
<li><a href="pages.html">Related Pages</a></li>
|
|
<li><a href="namespaces.html">Namespaces</a></li>
|
|
<li><a href="annotated.html">Classes</a></li>
|
|
<li><a href="files.html">Files</a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
|
Link-libs<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="http://HeeroYui.github.io/lutin">lutin</a></li>
|
|
<li><a href="http://atria-soft.github.io/ewol">ewol</a></li>
|
|
<li><a href="http://atria-soft.github.io/echrono">echrono</a></li>
|
|
<li><a href="http://atria-soft.github.io/etk">etk</a></li>
|
|
<li><a href="http://atria-soft.github.io/ejson">ejson</a></li>
|
|
<li><a href="http://atria-soft.github.io/exml">exml</a></li>
|
|
<li><a href="http://atria-soft.github.io/esvg">esvg</a></li>
|
|
<li><a href="http://atria-soft.github.io/egami">egami</a></li>
|
|
<li><a href="http://atria-soft.github.io/gale">gale</a></li>
|
|
<li><a href="http://atria-soft.github.io/ege">ege</a></li>
|
|
<li><a href="http://atria-soft.github.io/elog">elog</a></li>
|
|
<li><a href="http://atria-soft.github.io/ememory">ememory</a></li>
|
|
<li><a href="http://atria-soft.github.io/enet">enet</a></li>
|
|
<li><a href="http://atria-soft.github.io/eproperty">eproperty</a></li>
|
|
<li><a href="http://atria-soft.github.io/esignal">esignal</a></li>
|
|
<li><a href="http://atria-soft.github.io/etranslate">etranslate</a></li>
|
|
<li><a href="http://atria-soft.github.io/zeus">zeus</a></li>
|
|
<li><a href="http://musicdsp.github.io/audio-ess">audio-ess</a></li>
|
|
<li><a href="http://musicdsp.github.io/audio">audio</a></li>
|
|
<li><a href="http://musicdsp.github.io/audio-drain">audio-drain</a></li>
|
|
<li><a href="http://musicdsp.github.io/audio-orchestra">audio-orchestra</a></li>
|
|
<li><a href="http://musicdsp.github.io/audio-river">audio-river</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div id="search-box" class="input-group">
|
|
<div class="input-group-btn">
|
|
<button aria-expanded="false" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">All</a></li>
|
|
<li><a href="#">Classes</a></li>
|
|
<li><a href="#">Namespaces</a></li>
|
|
<li><a href="#">Files</a></li>
|
|
<li><a href="#">Functions</a></li>
|
|
<li><a href="#">Variables</a></li>
|
|
<li><a href="#">Typedefs</a></li>
|
|
<li><a href="#">Enumerations</a></li>
|
|
<li><a href="#">Enumerator</a></li>
|
|
<li><a href="#">Friends</a></li>
|
|
<li><a href="#">Macros</a></li>
|
|
<li><a href="#">Pages</a></li>
|
|
</ul>
|
|
</div>
|
|
<button id="search-close" type="button" class="close" aria-label="Close">
|
|
<span aria-hidden="true"></span>
|
|
</button>
|
|
<input id="search-field" class="form-control" accesskey="S" onkeydown="searchBox.OnSearchFieldChange(event);" placeholder="Search ..." type="text">
|
|
</div>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
|
|
<div class="content" id="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12 panel panel-default" style="padding-bottom: 15px;">
|
|
<div style="margin-bottom: 15px;margin-top: 60px;">
|
|
<!-- end header part -->
|
|
<!-- Generated by Doxygen 1.8.12 -->
|
|
<script type="text/javascript">
|
|
var searchBox = new SearchBox("searchBox", "search",false,'Search');
|
|
</script>
|
|
<script type="text/javascript" src="menudata.js"></script>
|
|
<script type="text/javascript" src="menu.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
initMenu('',true,false,'search.php','Search');
|
|
$(document).ready(function() { init_search(); });
|
|
});
|
|
</script>
|
|
<div id="main-nav"></div>
|
|
<!-- window showing the filter options -->
|
|
<div id="MSearchSelectWindow"
|
|
onmouseover="return searchBox.OnSearchSelectShow()"
|
|
onmouseout="return searchBox.OnSearchSelectHide()"
|
|
onkeydown="return searchBox.OnSearchSelectKey(event)">
|
|
</div>
|
|
|
|
<!-- iframe showing the search results (closed by default) -->
|
|
<div id="MSearchResultsWindow">
|
|
<iframe src="javascript:void(0)" frameborder="0"
|
|
name="MSearchResults" id="MSearchResults">
|
|
</iframe>
|
|
</div>
|
|
|
|
</div><!-- top -->
|
|
<div class="header">
|
|
<div class="headertitle">
|
|
<div class="title">EWOL: Create a custom Widget </div> </div>
|
|
</div><!--header-->
|
|
<div class="contents">
|
|
<div class="toc"><h3>Table of Contents</h3>
|
|
<ul><li class="level1"><a href="#ewol_tutorial_create_custom_widget_objectif">Objectifs: </a></li>
|
|
<li class="level1"><a href="#ewol_tutorial_create_custom_widget_structure">Create the widget structure </a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="textblock"><h1><a class="anchor" id="ewol_tutorial_create_custom_widget_objectif"></a>
|
|
Objectifs: </h1>
|
|
<p>To create a custum widget, this is as simple as complex. The first things to do is to choice a methode to display you widget:</p><ul>
|
|
<li>[b]Direct mode:[/b] display on openGL engine with your prefered methode (some help for shaders)</li>
|
|
<li>[b]Compositing:[/b] display with a toolbox for drawing on openGL</li>
|
|
<li>[b]Shaper:[/b] this is a special mode of compositing</li>
|
|
<li>[b]Add capacity:[/b] this could be interesting to increase some capacity of a widget...</li>
|
|
</ul>
|
|
<h1><a class="anchor" id="ewol_tutorial_create_custom_widget_structure"></a>
|
|
Create the widget structure </h1>
|
|
<h2>Header </h2>
|
|
<div class="fragment"><div class="line"><span class="preprocessor">#include <<a class="code" href="_widget_8hpp.html">ewol/widget/Widget.hpp</a>></span></div><div class="line"><span class="preprocessor">#include <ewol/compisiting/Widget.hpp></span></div><div class="line"><span class="keyword">namespace </span>appl {</div><div class="line"> <span class="keyword">class </span>myWidget : <span class="keyword">public</span> <a class="code" href="classewol_1_1_widget.html">ewol::Widget</a> {</div><div class="line"> <span class="keyword">private</span>:</div><div class="line"> <a class="code" href="classewol_1_1compositing_1_1_drawing.html">ewol::compositing::Drawing</a> m_draw; </div><div class="line"> <span class="keyword">public</span>:</div><div class="line"> myWidget(<span class="keywordtype">void</span>) {};</div><div class="line"> ~myWidget(<span class="keywordtype">void</span>) {};</div><div class="line"> <span class="keyword">public</span>: <span class="comment">// herited function</span></div><div class="line"> <span class="keywordtype">void</span> onDraw(<span class="keywordtype">void</span>);</div><div class="line"> <span class="keywordtype">void</span> onRegenerateDisplay(<span class="keywordtype">void</span>);</div><div class="line"> }</div><div class="line">}</div></div><!-- fragment --><p>We can show that we have two function, the first is call every time we render the widget (as the number of fps) "onDraw()". And the second that is call only when we need to redraw the widget (after the user call markToRedraw() ) "onRegenerateDisplay()".</p>
|
|
<h2>basic code </h2>
|
|
<p>we can define some basic functions:</p>
|
|
<p>The constructor: </p><div class="fragment"><div class="line">appl::myWidget::myWidget() {</div><div class="line"> addObjectType(<span class="stringliteral">"appl::widget::VectorDisplay"</span>);</div><div class="line">}</div></div><!-- fragment --><p>The draw function: </p><div class="fragment"><div class="line"><span class="keywordtype">void</span> appl::myWidget::onDraw() {</div><div class="line"> m_draw.draw();</div><div class="line">}</div></div><!-- fragment --><p>The drawing area function (where we create the patern.). </p><div class="fragment"><div class="line"><span class="keywordtype">void</span> appl::myWidget::onRegenerateDisplay() {</div><div class="line"> <span class="keywordflow">if</span> (needRedraw() == <span class="keyword">false</span>) {</div><div class="line"> <span class="keywordflow">return</span>;</div><div class="line"> }</div><div class="line"> <span class="comment">// remove previous data</span></div><div class="line"> m_draw.clear();</div><div class="line"> <span class="comment">// set background</span></div><div class="line"> m_draw.setColor(<a class="codeRef" doxygen="/home/heero/dev/perso/out/doc/release/etk.tag:http://atria-soft.github.io/etk/" href="http://atria-soft.github.io/etk/namespaceetk_1_1color.html#a4198b330ccb2e9008665733eee338f73">etk::color::black</a>);</div><div class="line"> m_draw.setPos(<a class="codeRef" doxygen="/home/heero/dev/perso/out/doc/release/etk.tag:http://atria-soft.github.io/etk/" href="http://atria-soft.github.io/etk/classetk_1_1_vector2_d.html">vec2</a>(0,0));</div><div class="line"> m_draw.rectangleWidth(m_size);</div><div class="line"> m_draw.setColor(<a class="codeRef" doxygen="/home/heero/dev/perso/out/doc/release/etk.tag:http://atria-soft.github.io/etk/" href="http://atria-soft.github.io/etk/namespaceetk_1_1color.html#a6fc96147de6d001202802bca7bcf2ba9">etk::color::green</a>);</div><div class="line"> m_draw.setPos(m_size*0.2);</div><div class="line"> m_draw.rectangleWidth(m_size*0.5);</div><div class="line">}</div></div><!-- fragment --><p>A more complex sample is availlable in **"ewol-sample-CustomWidget"** </p>
|
|
</div></div><!-- contents -->
|
|
<!-- HTML footer for doxygen 1.8.8-->
|
|
<!-- start footer part -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="footer"/><address class="footer"><small>
|
|
Generated on Mon Oct 24 2016 15:35:52 for Ewol: Ewol Widget in OpenGl by  <a href="http://www.doxygen.org/index.html">
|
|
<img class="footer" src="doxygen.png" alt="doxygen"/>
|
|
</a> 1.8.12
|
|
</small></address>
|
|
</body>
|
|
</html>
|