c
/
Immediate-Mode-UI.Nuklear
зеркало из https://github.com/Immediate-Mode-UI/Nuklear.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.9.8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Nuklear: Drawing</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.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>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
  $(document).ready(function() { init_search(); });
/* @license-end */
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr id="projectrow">
  <td id="projectalign">
   <div id="projectname">Nuklear
   </div>
   <div id="projectbrief">This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed as a simple embeddable user interface for application and does not have any dependencies, a default render backend or OS window/input handling but instead provides a highly modular, library-based approach, with simple input state for input and draw commands describing primitive shapes as output. So instead of providing a layered library that tries to abstract over a number of platform and render backends, it focuses only on the actual UI.</div>
  </td>
    <td>        <div id="MSearchBox" class="MSearchBoxInactive">
        <span class="left">
          <span id="MSearchSelect"                onmouseover="return searchBox.OnSearchSelectShow()"                onmouseout="return searchBox.OnSearchSelectHide()">&#160;</span>
          <input type="text" id="MSearchField" value="" placeholder="Search" accesskey="S"
               onfocus="searchBox.OnSearchFieldFocus(true)" 
               onblur="searchBox.OnSearchFieldFocus(false)" 
               onkeyup="searchBox.OnSearchFieldChange(event)"/>
          </span><span class="right">
            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.svg" alt=""/></a>
          </span>
        </div>
</td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.9.8 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;" 
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(document).ready(function(){initNavTree('Drawing.html',''); initResizable(); });
/* @license-end */
</script>
<div id="doc-content">
<!-- 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">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>

<div><div class="header">
  <div class="headertitle"><div class="title">Drawing</div></div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p>=============================================================================</p>
<p>This library was designed to be render backend agnostic so it does not draw anything to screen.</p>
<pre class="fragment">                            DRAWING
</pre><p> =============================================================================</p>
<p>This library was designed to be render backend agnostic so it does not draw anything to screen directly. Instead all drawn shapes, widgets are made of, are buffered into memory and make up a command queue. Each frame therefore fills the command buffer with draw commands that then need to be executed by the user and his own render backend. After that the command buffer needs to be cleared and a new frame can be started. It is probably important to note that the command buffer is the main drawing API and the optional vertex buffer API only takes this format and converts it into a hardware accessible format.</p>
<h1><a class="anchor" id="autotoc_md17"></a>
Usage</h1>
<p>To draw all draw commands accumulated over a frame you need your own render backend able to draw a number of 2D primitives. This includes at least filled and stroked rectangles, circles, text, lines, triangles and scissors. As soon as this criterion is met you can iterate over each draw command and execute each draw command in a interpreter like fashion:</p>
<div class="fragment"><div class="line"><span class="keyword">const</span> <span class="keyword">struct </span><a class="code hl_struct" href="structnk__command.html">nk_command</a> *cmd = 0;</div>
<div class="line"><a class="code hl_define" href="nuklear_8h.html#aaca7101364db82c0f03401fafd2c66a6">nk_foreach</a>(cmd, &amp;ctx) {</div>
<div class="line">    <span class="keywordflow">switch</span> (cmd-&gt;type) {</div>
<div class="line">    <span class="keywordflow">case</span> NK_COMMAND_LINE:</div>
<div class="line">        your_draw_line_function(...)</div>
<div class="line">        break;</div>
<div class="line">    case NK_COMMAND_RECT</div>
<div class="line">        your_draw_rect_function(...)</div>
<div class="line">        break;</div>
<div class="line">    case <span class="comment">//...:</span></div>
<div class="line">        <span class="comment">//[...]</span></div>
<div class="line">    }</div>
<div class="line">}</div>
<div class="ttc" id="anuklear_8h_html_aaca7101364db82c0f03401fafd2c66a6"><div class="ttname"><a href="nuklear_8h.html#aaca7101364db82c0f03401fafd2c66a6">nk_foreach</a></div><div class="ttdeci">#define nk_foreach(c, ctx)</div><div class="ttdoc">Iterates over each draw command inside the context draw command list.</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l01031">nuklear.h:1031</a></div></div>
<div class="ttc" id="astructnk__command_html"><div class="ttname"><a href="structnk__command.html">nk_command</a></div><div class="ttdoc">command base and header of every command inside the buffer</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l04467">nuklear.h:4467</a></div></div>
</div><!-- fragment --><p>In program flow context draw commands need to be executed after input has been gathered and the complete UI with windows and their contained widgets have been executed and before calling <code>nk_clear</code> which frees all previously allocated draw commands.</p>
<div class="fragment"><div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__context.html">nk_context</a> ctx;</div>
<div class="line">nk_init_xxx(&amp;ctx, ...);</div>
<div class="line"><span class="keywordflow">while</span> (1) {</div>
<div class="line">    Event evt;</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#a1dd51949401094f71d10429d45779d53">nk_input_begin</a>(&amp;ctx);</div>
<div class="line">    <span class="keywordflow">while</span> (GetEvent(&amp;evt)) {</div>
<div class="line">        <span class="keywordflow">if</span> (evt.type == MOUSE_MOVE)</div>
<div class="line">            <a class="code hl_function" href="nuklear_8h.html#acdbdc5795b24d36875281cf3cac671fe">nk_input_motion</a>(&amp;ctx, evt.motion.x, evt.motion.y);</div>
<div class="line">        <span class="keywordflow">else</span> <span class="keywordflow">if</span> (evt.type == [...]) {</div>
<div class="line">            [...]</div>
<div class="line">        }</div>
<div class="line">    }</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#a15c0d237b6bb2f5195a09e259fd7b375">nk_input_end</a>(&amp;ctx);</div>
<div class="line">    <span class="comment">//</span></div>
<div class="line">    <span class="comment">// [...]</span></div>
<div class="line">    <span class="comment">//</span></div>
<div class="line">    <span class="keyword">const</span> <span class="keyword">struct </span><a class="code hl_struct" href="structnk__command.html">nk_command</a> *cmd = 0;</div>
<div class="line">    <a class="code hl_define" href="nuklear_8h.html#aaca7101364db82c0f03401fafd2c66a6">nk_foreach</a>(cmd, &amp;ctx) {</div>
<div class="line">    <span class="keywordflow">switch</span> (cmd-&gt;type) {</div>
<div class="line">    <span class="keywordflow">case</span> NK_COMMAND_LINE:</div>
<div class="line">        your_draw_line_function(...)</div>
<div class="line">        break;</div>
<div class="line">    case NK_COMMAND_RECT</div>
<div class="line">        your_draw_rect_function(...)</div>
<div class="line">        break;</div>
<div class="line">    case ...:</div>
<div class="line">        <span class="comment">// [...]</span></div>
<div class="line">    }</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#ade3301f0a92370be1b4beac7eceac279">nk_clear</a>(&amp;ctx);</div>
<div class="line">}</div>
<div class="line"><a class="code hl_function" href="nuklear_8h.html#a06772e194320fa99524681fd32df85e9">nk_free</a>(&amp;ctx);</div>
<div class="ttc" id="anuklear_8h_html_a06772e194320fa99524681fd32df85e9"><div class="ttname"><a href="nuklear_8h.html#a06772e194320fa99524681fd32df85e9">nk_free</a></div><div class="ttdeci">NK_API void nk_free(struct nk_context *)</div><div class="ttdoc">Frees all memory allocated by nuklear; Not needed if context was initialized with nk_init_fixed.</div><div class="ttdef"><b>Definition</b> <a href="nuklear__context_8c_source.html#l00088">nuklear_context.c:88</a></div></div>
<div class="ttc" id="anuklear_8h_html_a15c0d237b6bb2f5195a09e259fd7b375"><div class="ttname"><a href="nuklear_8h.html#a15c0d237b6bb2f5195a09e259fd7b375">nk_input_end</a></div><div class="ttdeci">NK_API void nk_input_end(struct nk_context *)</div><div class="ttdoc">End the input mirroring process by resetting mouse grabbing state to ensure the mouse cursor is not g...</div><div class="ttdef"><b>Definition</b> <a href="nuklear__input_8c_source.html#l00030">nuklear_input.c:30</a></div></div>
<div class="ttc" id="anuklear_8h_html_a1dd51949401094f71d10429d45779d53"><div class="ttname"><a href="nuklear_8h.html#a1dd51949401094f71d10429d45779d53">nk_input_begin</a></div><div class="ttdeci">NK_API void nk_input_begin(struct nk_context *)</div><div class="ttdoc">Begins the input mirroring process by resetting text, scroll mouse, previous mouse position and movem...</div><div class="ttdef"><b>Definition</b> <a href="nuklear__input_8c_source.html#l00010">nuklear_input.c:10</a></div></div>
<div class="ttc" id="anuklear_8h_html_acdbdc5795b24d36875281cf3cac671fe"><div class="ttname"><a href="nuklear_8h.html#acdbdc5795b24d36875281cf3cac671fe">nk_input_motion</a></div><div class="ttdeci">NK_API void nk_input_motion(struct nk_context *, int x, int y)</div><div class="ttdoc">Mirrors current mouse position to nuklear.</div><div class="ttdef"><b>Definition</b> <a href="nuklear__input_8c_source.html#l00045">nuklear_input.c:45</a></div></div>
<div class="ttc" id="anuklear_8h_html_ade3301f0a92370be1b4beac7eceac279"><div class="ttname"><a href="nuklear_8h.html#ade3301f0a92370be1b4beac7eceac279">nk_clear</a></div><div class="ttdeci">NK_API void nk_clear(struct nk_context *)</div><div class="ttdoc">Resets the context state at the end of the frame.</div><div class="ttdef"><b>Definition</b> <a href="nuklear__context_8c_source.html#l00110">nuklear_context.c:110</a></div></div>
<div class="ttc" id="astructnk__context_html"><div class="ttname"><a href="structnk__context.html">nk_context</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l05705">nuklear.h:5705</a></div></div>
</div><!-- fragment --><p>You probably noticed that you have to draw all of the UI each frame which is quite wasteful. While the actual UI updating loop is quite fast rendering without actually needing it is not. So there are multiple things you could do.</p>
<p>First is only update on input. This of course is only an option if your application only depends on the UI and does not require any outside calculations. If you actually only update on input make sure to update the UI two times each frame and call <code>nk_clear</code> directly after the first pass and only draw in the second pass. In addition it is recommended to also add additional timers to make sure the UI is not drawn more than a fixed number of frames per second.</p>
<div class="fragment"><div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__context.html">nk_context</a> ctx;</div>
<div class="line">nk_init_xxx(&amp;ctx, ...);</div>
<div class="line"><span class="keywordflow">while</span> (1) {</div>
<div class="line">    <span class="comment">// [...wait for input ]</span></div>
<div class="line">    <span class="comment">// [...do two UI passes ...]</span></div>
<div class="line">    do_ui(...)</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#ade3301f0a92370be1b4beac7eceac279">nk_clear</a>(&amp;ctx);</div>
<div class="line">    do_ui(...)</div>
<div class="line">    <span class="comment">//</span></div>
<div class="line">    <span class="comment">// draw</span></div>
<div class="line">    const struct <a class="code hl_struct" href="structnk__command.html">nk_command</a> *cmd = 0;</div>
<div class="line">    <a class="code hl_define" href="nuklear_8h.html#aaca7101364db82c0f03401fafd2c66a6">nk_foreach</a>(cmd, &amp;ctx) {</div>
<div class="line">    <span class="keywordflow">switch</span> (cmd-&gt;type) {</div>
<div class="line">    <span class="keywordflow">case</span> NK_COMMAND_LINE:</div>
<div class="line">        your_draw_line_function(...)</div>
<div class="line">        break;</div>
<div class="line">    case NK_COMMAND_RECT</div>
<div class="line">        your_draw_rect_function(...)</div>
<div class="line">        break;</div>
<div class="line">    case ...:</div>
<div class="line">        <span class="comment">//[...]</span></div>
<div class="line">    }</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#ade3301f0a92370be1b4beac7eceac279">nk_clear</a>(&amp;ctx);</div>
<div class="line">}</div>
<div class="line"><a class="code hl_function" href="nuklear_8h.html#a06772e194320fa99524681fd32df85e9">nk_free</a>(&amp;ctx);</div>
</div><!-- fragment --><p>The second probably more applicable trick is to only draw if anything changed. It is not really useful for applications with continuous draw loop but quite useful for desktop applications. To actually get nuklear to only draw on changes you first have to define <code>NK_ZERO_COMMAND_MEMORY</code> and allocate a memory buffer that will store each unique drawing output. After each frame you compare the draw command memory inside the library with your allocated buffer by memcmp. If memcmp detects differences you have to copy the command buffer into the allocated buffer and then draw like usual (this example uses fixed memory but you could use dynamically allocated memory).</p>
<div class="fragment"><div class="line"><span class="comment">//[... other defines ...]</span></div>
<div class="line"><span class="preprocessor">#define NK_ZERO_COMMAND_MEMORY</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="nuklear_8h.html">nuklear.h</a>&quot;</span></div>
<div class="line"><span class="comment">//</span></div>
<div class="line"><span class="comment">// setup context</span></div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__context.html">nk_context</a> ctx;</div>
<div class="line"><span class="keywordtype">void</span> *last = calloc(1,64*1024);</div>
<div class="line"><span class="keywordtype">void</span> *buf = calloc(1,64*1024);</div>
<div class="line"><a class="code hl_function" href="nuklear_8h.html#a27a65e767320f4d72cee9c3175153b56">nk_init_fixed</a>(&amp;ctx, buf, 64*1024);</div>
<div class="line"><span class="comment">//</span></div>
<div class="line"><span class="comment">// loop</span></div>
<div class="line"><span class="keywordflow">while</span> (1) {</div>
<div class="line">    <span class="comment">// [...input...]</span></div>
<div class="line">    <span class="comment">// [...ui...]</span></div>
<div class="line">    <span class="keywordtype">void</span> *cmds = nk_buffer_memory(&amp;ctx.memory);</div>
<div class="line">    <span class="keywordflow">if</span> (memcmp(cmds, last, ctx.memory.allocated)) {</div>
<div class="line">        memcpy(last,cmds,ctx.memory.allocated);</div>
<div class="line">        <span class="keyword">const</span> <span class="keyword">struct </span><a class="code hl_struct" href="structnk__command.html">nk_command</a> *cmd = 0;</div>
<div class="line">        <a class="code hl_define" href="nuklear_8h.html#aaca7101364db82c0f03401fafd2c66a6">nk_foreach</a>(cmd, &amp;ctx) {</div>
<div class="line">            <span class="keywordflow">switch</span> (cmd-&gt;type) {</div>
<div class="line">            <span class="keywordflow">case</span> NK_COMMAND_LINE:</div>
<div class="line">                your_draw_line_function(...)</div>
<div class="line">                break;</div>
<div class="line">            case NK_COMMAND_RECT</div>
<div class="line">                your_draw_rect_function(...)</div>
<div class="line">                break;</div>
<div class="line">            case ...:</div>
<div class="line">                <span class="comment">// [...]</span></div>
<div class="line">            }</div>
<div class="line">        }</div>
<div class="line">    }</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#ade3301f0a92370be1b4beac7eceac279">nk_clear</a>(&amp;ctx);</div>
<div class="line">}</div>
<div class="line"><a class="code hl_function" href="nuklear_8h.html#a06772e194320fa99524681fd32df85e9">nk_free</a>(&amp;ctx);</div>
<div class="ttc" id="anuklear_8h_html"><div class="ttname"><a href="nuklear_8h.html">nuklear.h</a></div><div class="ttdoc">main API and documentation file</div></div>
<div class="ttc" id="anuklear_8h_html_a27a65e767320f4d72cee9c3175153b56"><div class="ttname"><a href="nuklear_8h.html#a27a65e767320f4d72cee9c3175153b56">nk_init_fixed</a></div><div class="ttdeci">NK_API nk_bool nk_init_fixed(struct nk_context *, void *memory, nk_size size, const struct nk_user_font *)</div><div class="ttdef"><b>Definition</b> <a href="nuklear__context_8c_source.html#l00034">nuklear_context.c:34</a></div></div>
</div><!-- fragment --><p>Finally while using draw commands makes sense for higher abstracted platforms like X11 and Win32 or drawing libraries it is often desirable to use graphics hardware directly. Therefore it is possible to just define <code>NK_INCLUDE_VERTEX_BUFFER_OUTPUT</code> which includes optional vertex output. To access the vertex output you first have to convert all draw commands into vertexes by calling <code>nk_convert</code> which takes in your preferred vertex format. After successfully converting all draw commands just iterate over and execute all vertex draw commands:</p>
<div class="fragment"><div class="line"><span class="comment">// fill configuration</span></div>
<div class="line"><span class="keyword">struct </span>your_vertex</div>
<div class="line">{</div>
<div class="line">    <span class="keywordtype">float</span> pos[2]; <span class="comment">// important to keep it to 2 floats</span></div>
<div class="line">    <span class="keywordtype">float</span> uv[2];</div>
<div class="line">    <span class="keywordtype">unsigned</span> <span class="keywordtype">char</span> col[4];</div>
<div class="line">};</div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__convert__config.html">nk_convert_config</a> cfg = {};</div>
<div class="line"><span class="keyword">static</span> <span class="keyword">const</span> <span class="keyword">struct </span>nk_draw_vertex_layout_element vertex_layout[] = {</div>
<div class="line">    {NK_VERTEX_POSITION, NK_FORMAT_FLOAT, NK_OFFSETOF(<span class="keyword">struct</span> your_vertex, pos)},</div>
<div class="line">    {NK_VERTEX_TEXCOORD, NK_FORMAT_FLOAT, NK_OFFSETOF(<span class="keyword">struct</span> your_vertex, uv)},</div>
<div class="line">    {NK_VERTEX_COLOR, NK_FORMAT_R8G8B8A8, NK_OFFSETOF(<span class="keyword">struct</span> your_vertex, col)},</div>
<div class="line">    {NK_VERTEX_LAYOUT_END}</div>
<div class="line">};</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#a1d0cf3e01234c636729dfd0fddf5b2c7">shape_AA</a> = NK_ANTI_ALIASING_ON;</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#a7279543367b1ad0e5f183491233cedad">line_AA</a> = NK_ANTI_ALIASING_ON;</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#addeb894f54f2ba1dbe3d5bf887b27776">vertex_layout</a> = vertex_layout;</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#acf0d9e08220c6e29ee9d2753f9273591">vertex_size</a> = <span class="keyword">sizeof</span>(<span class="keyword">struct </span>your_vertex);</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#a92519fe62ef0e8f0d7180dbd874c775f">vertex_alignment</a> = NK_ALIGNOF(<span class="keyword">struct</span> your_vertex);</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#ae62d641bf9c5bc6b3e66c6071f4a8267">circle_segment_count</a> = 22;</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#afcf45f3fc6e3f043b572b59cb04424c5">curve_segment_count</a> = 22;</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#ae367d812c2f866e843f9684b3a920e73">arc_segment_count</a> = 22;</div>
<div class="line">cfg.global_alpha = 1.0f;</div>
<div class="line">cfg.<a class="code hl_variable" href="structnk__convert__config.html#afe7d1907a295a3db7bbb11e3f0f98c1e">tex_null</a> = dev-&gt;tex_null;</div>
<div class="line"><span class="comment">//</span></div>
<div class="line"><span class="comment">// setup buffers and convert</span></div>
<div class="line"><span class="keyword">struct </span><a class="code hl_struct" href="structnk__buffer.html">nk_buffer</a> cmds, verts, idx;</div>
<div class="line">nk_buffer_init_default(&amp;cmds);</div>
<div class="line">nk_buffer_init_default(&amp;verts);</div>
<div class="line">nk_buffer_init_default(&amp;idx);</div>
<div class="line">nk_convert(&amp;ctx, &amp;cmds, &amp;verts, &amp;idx, &amp;cfg);</div>
<div class="line"><span class="comment">//</span></div>
<div class="line"><span class="comment">// draw</span></div>
<div class="line">nk_draw_foreach(cmd, &amp;ctx, &amp;cmds) {</div>
<div class="line"><span class="keywordflow">if</span> (!cmd-&gt;elem_count) <span class="keywordflow">continue</span>;</div>
<div class="line">    <span class="comment">//[...]</span></div>
<div class="line">}</div>
<div class="line">nk_buffer_free(&amp;cms);</div>
<div class="line">nk_buffer_free(&amp;verts);</div>
<div class="line">nk_buffer_free(&amp;idx);</div>
<div class="ttc" id="astructnk__buffer_html"><div class="ttname"><a href="structnk__buffer.html">nk_buffer</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l04189">nuklear.h:4189</a></div></div>
<div class="ttc" id="astructnk__convert__config_html"><div class="ttname"><a href="structnk__convert__config.html">nk_convert_config</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00978">nuklear.h:978</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_a1d0cf3e01234c636729dfd0fddf5b2c7"><div class="ttname"><a href="structnk__convert__config.html#a1d0cf3e01234c636729dfd0fddf5b2c7">nk_convert_config::shape_AA</a></div><div class="ttdeci">enum nk_anti_aliasing shape_AA</div><div class="ttdoc">!&lt; line anti-aliasing flag can be turned off if you are tight on memory</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00981">nuklear.h:981</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_a7279543367b1ad0e5f183491233cedad"><div class="ttname"><a href="structnk__convert__config.html#a7279543367b1ad0e5f183491233cedad">nk_convert_config::line_AA</a></div><div class="ttdeci">enum nk_anti_aliasing line_AA</div><div class="ttdoc">!&lt; global alpha value</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00980">nuklear.h:980</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_a92519fe62ef0e8f0d7180dbd874c775f"><div class="ttname"><a href="structnk__convert__config.html#a92519fe62ef0e8f0d7180dbd874c775f">nk_convert_config::vertex_alignment</a></div><div class="ttdeci">nk_size vertex_alignment</div><div class="ttdoc">!&lt; sizeof one vertex for vertex packing</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00988">nuklear.h:988</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_acf0d9e08220c6e29ee9d2753f9273591"><div class="ttname"><a href="structnk__convert__config.html#acf0d9e08220c6e29ee9d2753f9273591">nk_convert_config::vertex_size</a></div><div class="ttdeci">nk_size vertex_size</div><div class="ttdoc">!&lt; describes the vertex output format and packing</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00987">nuklear.h:987</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_addeb894f54f2ba1dbe3d5bf887b27776"><div class="ttname"><a href="structnk__convert__config.html#addeb894f54f2ba1dbe3d5bf887b27776">nk_convert_config::vertex_layout</a></div><div class="ttdeci">const struct nk_draw_vertex_layout_element * vertex_layout</div><div class="ttdoc">!&lt; handle to texture with a white pixel for shape drawing</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00986">nuklear.h:986</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_ae367d812c2f866e843f9684b3a920e73"><div class="ttname"><a href="structnk__convert__config.html#ae367d812c2f866e843f9684b3a920e73">nk_convert_config::arc_segment_count</a></div><div class="ttdeci">unsigned arc_segment_count</div><div class="ttdoc">!&lt; number of segments used for circles: default to 22</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00983">nuklear.h:983</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_ae62d641bf9c5bc6b3e66c6071f4a8267"><div class="ttname"><a href="structnk__convert__config.html#ae62d641bf9c5bc6b3e66c6071f4a8267">nk_convert_config::circle_segment_count</a></div><div class="ttdeci">unsigned circle_segment_count</div><div class="ttdoc">!&lt; shape anti-aliasing flag can be turned off if you are tight on memory</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00982">nuklear.h:982</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_afcf45f3fc6e3f043b572b59cb04424c5"><div class="ttname"><a href="structnk__convert__config.html#afcf45f3fc6e3f043b572b59cb04424c5">nk_convert_config::curve_segment_count</a></div><div class="ttdeci">unsigned curve_segment_count</div><div class="ttdoc">!&lt; number of segments used for arcs: default to 22</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00984">nuklear.h:984</a></div></div>
<div class="ttc" id="astructnk__convert__config_html_afe7d1907a295a3db7bbb11e3f0f98c1e"><div class="ttname"><a href="structnk__convert__config.html#afe7d1907a295a3db7bbb11e3f0f98c1e">nk_convert_config::tex_null</a></div><div class="ttdeci">struct nk_draw_null_texture tex_null</div><div class="ttdoc">!&lt; number of segments used for curves: default to 22</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00985">nuklear.h:985</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="autotoc_md18"></a>
Reference</h1>
<table class="markdownTable">
<tr class="markdownTableHead">
<th class="markdownTableHeadNone">Function   </th><th class="markdownTableHeadNone">Description    </th></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone"><a class="el" href="nuklear_8h.html#a491919eecbfea83999d6cb828af46472">nk__begin</a>   </td><td class="markdownTableBodyNone">Returns the first draw command in the context draw command list to be drawn    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone"><a class="el" href="nuklear_8h.html#a7988cf50e404ee417c8da59479f92d7c">nk__next</a>   </td><td class="markdownTableBodyNone">Increments the draw command iterator to the next command inside the context draw command list    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone"><a class="el" href="nuklear_8h.html#aaca7101364db82c0f03401fafd2c66a6">nk_foreach</a>   </td><td class="markdownTableBodyNone">Iterates over each draw command inside the context draw command list    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_convert   </td><td class="markdownTableBodyNone">Converts from the abstract draw commands list into a hardware accessible vertex format    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk_draw_begin   </td><td class="markdownTableBodyNone">Returns the first vertex command in the context vertex draw list to be executed    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk__draw_next   </td><td class="markdownTableBodyNone">Increments the vertex command iterator to the next command inside the context vertex command list    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyNone">nk__draw_end   </td><td class="markdownTableBodyNone">Returns the end of the vertex draw list    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyNone">nk_draw_foreach   </td><td class="markdownTableBodyNone">Iterates over each vertex draw command inside the vertex draw list   </td></tr>
</table>
<p>Instead all drawn shapes, widgets are made of, are buffered into memory and make up a command queue. Each frame therefore fills the command buffer with draw commands that then need to be executed by the user and his own render backend. After that the command buffer needs to be cleared and a new frame can be started. It is probably important to note that the command buffer is the main drawing API and the optional vertex buffer API only takes this format and converts it into a hardware accessible format.</p>
<p>To use the command queue to draw your own widgets you can access the command buffer of each window by calling <code>nk_window_get_canvas</code> after previously having called <code>nk_begin</code>:</p>
<div class="fragment"><div class="line"><span class="keywordtype">void</span> draw_red_rectangle_widget(<span class="keyword">struct</span> <a class="code hl_struct" href="structnk__context.html">nk_context</a> *ctx)</div>
<div class="line">{</div>
<div class="line">    <span class="keyword">struct </span><a class="code hl_struct" href="structnk__command__buffer.html">nk_command_buffer</a> *canvas;</div>
<div class="line">    <span class="keyword">struct </span><a class="code hl_struct" href="structnk__input.html">nk_input</a> *input = &amp;ctx-&gt;input;</div>
<div class="line">    canvas = <a class="code hl_function" href="nuklear_8h.html#a3f69488ed64807aac9ba3a699b056a36">nk_window_get_canvas</a>(ctx);</div>
<div class="line"> </div>
<div class="line">    <span class="keyword">struct </span><a class="code hl_struct" href="structnk__rect.html">nk_rect</a> space;</div>
<div class="line">    <span class="keyword">enum</span> <a class="code hl_enumeration" href="nuklear_8h.html#ac18958859f81ea11be7d0283adabb2e1">nk_widget_layout_states</a> state;</div>
<div class="line">    state = nk_widget(&amp;space, ctx);</div>
<div class="line">    <span class="keywordflow">if</span> (!state) <span class="keywordflow">return</span>;</div>
<div class="line"> </div>
<div class="line">    <span class="keywordflow">if</span> (state != <a class="code hl_enumvalue" href="nuklear_8h.html#ac18958859f81ea11be7d0283adabb2e1a557df3c02dd4ccb5463d5c416791f8b1">NK_WIDGET_ROM</a>)</div>
<div class="line">        update_your_widget_by_user_input(...);</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#a63407f682d240622d8b025d7911596fb">nk_fill_rect</a>(canvas, space, 0, nk_rgb(255,0,0));</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordflow">if</span> (<a class="code hl_function" href="nuklear_8h.html#aafe58ef289cad9c8cd7f5419fabe7cdd">nk_begin</a>(...)) {</div>
<div class="line">    <a class="code hl_function" href="nuklear_8h.html#a76e65dc775c0bd5efaa3c8f38f96823f">nk_layout_row_dynamic</a>(ctx, 25, 1);</div>
<div class="line">    draw_red_rectangle_widget(ctx);</div>
<div class="line">}</div>
<div class="line"><a class="code hl_function" href="nuklear_8h.html#ae0ade48c4c8df72456b9d97ab3d195e3">nk_end</a>(..)</div>
<div class="ttc" id="anuklear_8h_html_a3f69488ed64807aac9ba3a699b056a36"><div class="ttname"><a href="nuklear_8h.html#a3f69488ed64807aac9ba3a699b056a36">nk_window_get_canvas</a></div><div class="ttdeci">NK_API struct nk_command_buffer * nk_window_get_canvas(const struct nk_context *ctx)</div><div class="ttdef"><b>Definition</b> <a href="nuklear__window_8c_source.html#l00391">nuklear_window.c:391</a></div></div>
<div class="ttc" id="anuklear_8h_html_a63407f682d240622d8b025d7911596fb"><div class="ttname"><a href="nuklear_8h.html#a63407f682d240622d8b025d7911596fb">nk_fill_rect</a></div><div class="ttdeci">NK_API void nk_fill_rect(struct nk_command_buffer *, struct nk_rect, float rounding, struct nk_color)</div><div class="ttdoc">filled shades</div><div class="ttdef"><b>Definition</b> <a href="nuklear__draw_8c_source.html#l00152">nuklear_draw.c:152</a></div></div>
<div class="ttc" id="anuklear_8h_html_a76e65dc775c0bd5efaa3c8f38f96823f"><div class="ttname"><a href="nuklear_8h.html#a76e65dc775c0bd5efaa3c8f38f96823f">nk_layout_row_dynamic</a></div><div class="ttdeci">NK_API void nk_layout_row_dynamic(struct nk_context *ctx, float height, int cols)</div><div class="ttdoc">Sets current row layout to share horizontal space between @cols number of widgets evenly.</div><div class="ttdef"><b>Definition</b> <a href="nuklear__layout_8c_source.html#l00147">nuklear_layout.c:147</a></div></div>
<div class="ttc" id="anuklear_8h_html_aafe58ef289cad9c8cd7f5419fabe7cdd"><div class="ttname"><a href="nuklear_8h.html#aafe58ef289cad9c8cd7f5419fabe7cdd">nk_begin</a></div><div class="ttdeci">NK_API nk_bool nk_begin(struct nk_context *ctx, const char *title, struct nk_rect bounds, nk_flags flags)</div><div class="ttdef"><b>Definition</b> <a href="nuklear__window_8c_source.html#l00136">nuklear_window.c:136</a></div></div>
<div class="ttc" id="anuklear_8h_html_ac18958859f81ea11be7d0283adabb2e1"><div class="ttname"><a href="nuklear_8h.html#ac18958859f81ea11be7d0283adabb2e1">nk_widget_layout_states</a></div><div class="ttdeci">nk_widget_layout_states</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l03081">nuklear.h:3081</a></div></div>
<div class="ttc" id="anuklear_8h_html_ac18958859f81ea11be7d0283adabb2e1a557df3c02dd4ccb5463d5c416791f8b1"><div class="ttname"><a href="nuklear_8h.html#ac18958859f81ea11be7d0283adabb2e1a557df3c02dd4ccb5463d5c416791f8b1">NK_WIDGET_ROM</a></div><div class="ttdeci">@ NK_WIDGET_ROM</div><div class="ttdoc">The widget is partially visible and cannot be updated.</div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l03084">nuklear.h:3084</a></div></div>
<div class="ttc" id="anuklear_8h_html_ae0ade48c4c8df72456b9d97ab3d195e3"><div class="ttname"><a href="nuklear_8h.html#ae0ade48c4c8df72456b9d97ab3d195e3">nk_end</a></div><div class="ttdeci">NK_API void nk_end(struct nk_context *ctx)</div><div class="ttdef"><b>Definition</b> <a href="nuklear__window_8c_source.html#l00297">nuklear_window.c:297</a></div></div>
<div class="ttc" id="astructnk__command__buffer_html"><div class="ttname"><a href="structnk__command__buffer.html">nk_command_buffer</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l04632">nuklear.h:4632</a></div></div>
<div class="ttc" id="astructnk__input_html"><div class="ttname"><a href="structnk__input.html">nk_input</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l04699">nuklear.h:4699</a></div></div>
<div class="ttc" id="astructnk__rect_html"><div class="ttname"><a href="structnk__rect.html">nk_rect</a></div><div class="ttdef"><b>Definition</b> <a href="nuklear_8h_source.html#l00265">nuklear.h:265</a></div></div>
</div><!-- fragment --><p> Important to know if you want to create your own widgets is the <code>nk_widget</code> call. It allocates space on the panel reserved for this widget to be used, but also returns the state of the widget space. If your widget is not seen and does not have to be updated it is '0' and you can just return. If it only has to be drawn the state will be <code>NK_WIDGET_ROM</code> otherwise you can do both update and draw your widget. The reason for separating is to only draw and update what is actually necessary which is crucial for performance. </p>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    <li class="footer">Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.9.8 </li>
  </ul>
</div>
</body>
</html>