<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="87930" data-post-id="87930">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="boydm" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/120/582_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  boydm
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Scenic</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>One more thing…</p>
<p>On ports vs. NIFs. I landed on Ports. The performance is fine for what I’m trying to achieve. I did prove to myself that I could get it working as a NIF in the future under Linux and such, but losing OTP is a heavy price to pay in the event of an error. Too much C code in the render and not enough benefit to make it a NIF.</p>
<p>Besides, it is really cool to force a crash in the render and just watch everything recover.</p>
<p>By the way, pretty sure it is not possible to do it as a NIF on the Mac. Turns out you can only ever open a window under OSX on the main thread of an application. That’s something that dates back to the NeXT. Trying to do so in a threaded NIF is a fast way to bring down OTP on a Mac.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="87930" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/3-elixirconf-2017-elixir-native-ui-boyd-multerer/8653/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-87930" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="87930"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #21"></div>
  </section>
</div>
    <div class="postbit" id="87931" data-post-id="87931">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="boydm" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/120/582_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  boydm
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Scenic</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>One more one more thing.</p>
<p>The math library is a NIF. It does a lot of matrix math and that warranted being a NIF.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="87931" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/3-elixirconf-2017-elixir-native-ui-boyd-multerer/8653/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-87931" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="87931"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #22"></div>
  </section>
</div>
    <div class="postbit" id="87932" data-post-id="87932">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Eiji" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Eiji/120/36743_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Eiji
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="boydm" data-post="21" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>All UI scenes are GenServers. Scenes can reference (embed) other scenes. Input is all message passing/filtering/handling. This also means that developers can build “components”, which are just scenes/GenServers that can be reused by other devs. Nice for extensibility.</p>
</blockquote>
</aside>
<p>Just WOW, this is how exactly I imagined creating some UI apps. Lots of processes with parent monitoring process. When entering <code>Elixir</code> it was only one thing I wanted to have.</p>
<p>For example as a total C++ noob I was thinking about making tabbar and each tab content in separate process and embed it in parent window. I have even asking about inter process communication ways at stackoverflow, but at end I did not have enough knowledge to do it well. Elixir processes, supervisors and all related topics looks much simpler for me and I really wanted to see some library which could be written in such awesome language.</p>
<aside class="quote no-group" data-username="boydm" data-post="21" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>Drivers (rendering) are abstracted away from the scenes so that they can be swapped to run on different hardware without re-writing the UI logic. This allows me to run my app on Mac to debug, change a target, and build firmware for a raspberry on Nerves. Everything looks and works the same across the two.</p>
</blockquote>
</aside>
<p>Amazing. I believe such comfort would be very more than welcome in lots of languages.</p>
<aside class="quote no-group" data-username="boydm" data-post="21" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>The driver model has also been really good for getting remoting working. More on that later…</p>
</blockquote>
</aside>
<p>Hmm, not sure if I get it. Do you mean something like builtin VNC for every app? Ahh, after small time I probably got it. You want to work always on same machine and debugging it remotely, right?</p>
<aside class="quote no-group" data-username="boydm" data-post="21" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>As far as overall status goes, I’ve stopped adding features and am now focused on the large amount of supporting things around it. (Including stripping out the code from various dead-ends and experiments). I want the API to be pretty stable before it goes out to lots of people.</p>
</blockquote>
</aside>
<p>So you are working on <code>1.0.0-rc.0</code> version?</p>
<p>If you don’t mind I have some questions:</p>
<ol>
<li>If I well remember it allows to work with <code>OpenGL</code>. Does it have any limitations (except Linux video card drivers)? Did you think about <code>Vulcan</code>?</li>
<li>Will you create some elements already or it should be a part of library which uses your project? If so then will be there auto and percentage height/width support available or we will need to implement it?</li>
<li>I have watched one video and you are using there <code>RGB(A)</code> format and named colors. Did you think about support other color representations?</li>
<li>Not really remember in which language and GUI library (probably C++/Qt) there was a way to embed one window into another. I was imagining about adding <code>mplayer</code>/<code>mpv</code> support in my apps. Do you have any idea if it could be even possible for us?</li>
</ol>
<p>If you will find some time I would also say about one problem that I’m facing in all GUI libraries I know about. I have always a problem with finding easy solution for one thing … I always wanted to simply place a tab bar in title bar like lots of browsers have. Also I wanted to somehow automatically fetch icons and styles (like color and background color) based on current desktop environment (GTK+ or QT theme) and/or currently used distribution/operating system. In short I wanted to make window looks like native, but with tabs + optionally move it on bottom, left or right side (as user wishes). No matter which language and library I was looking for I always needs to create a custom frame-less window with basically everything including tab animations and styles in worst cases. All of this just for moving, resizing one bar and adding tabs into it. For an C++/Qt (or any other combination) beginner it was lots hours of really hard work. I though that <code>GTK+</code> could help me a lot with their special API for elements in title bar, but just simple <a href="https://stackoverflow.com/questions/27954830/c-gtkmm-3-headerbar-and-notebook-with-autohide-animation" rel="noopener nofollow ugc">question</a> shows me that’s not so easy topic. At the end I did not found even a limited solution (let’s say adding tabbar, but without ability to move and resize). I’m even considering paying someone for helping me with this part and making a simple library for generating windows with such bar.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="87932" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/3-elixirconf-2017-elixir-native-ui-boyd-multerer/8653/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-87932" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="87932"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #23"></div>
  </section>
</div>
    <div class="postbit" id="87934" data-post-id="87934">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="boydm" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/120/582_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  boydm
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Scenic</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I ended up using NanoVG deep in the renderer. It can support the newer cards, so there will be an upgrade path for that over time. Worrying about OpenGL/Vulcan/Whatever, however, isn’t really surfaced up to the app and would only be in a faster, or new driver.</p>
<p>There is a basic set of elements in it already. Enough for me to build simple UIs with.</p>
<p>Overall… This first version is very much aimed at fixed-screen  embedded style devices. I’m not trying to make it look like a native app in a windowed host environment. Could be done, but isn’t a goal.</p>
<p>On the other hand, if you want to move around a UI element, that’s just a matrix transform (not as scary as that sounds) and works really well.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="87934" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/3-elixirconf-2017-elixir-native-ui-boyd-multerer/8653/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-87934" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="87934"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #24"></div>
  </section>
</div>
    <div class="postbit" id="87943" data-post-id="87943">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Eiji" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Eiji/120/36743_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Eiji
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="boydm" data-post="25" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>I ended up using NanoVG deep in the renderer. It can support the newer cards, so there will be an upgrade path for that over time. Worrying about OpenGL/Vulcan/Whatever, however, isn’t really surfaced up to the app and would only be in a faster, or new driver.</p>
</blockquote>
</aside>
<p>hmm, <code>NanoVG</code> as well as I remember supports only 2D vector drawing using <code>OpenGL</code>, but maybe something have changed from last time I saw this project</p>
<p>Will be there a chance for 3D graphics in future? Of course I’m not planning creating AAA game, but maybe there would be something to do with 3D animations.</p>
<p>About “framework” part. From video I did not noticed any “magic”. Is it as same framework like <code>Phoenix</code> is called (people says that’s basically works more like library than framework).</p>
<aside class="quote no-group" data-username="boydm" data-post="25" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>There is a basic set of elements in it already. Enough for me to build simple UIs with.</p>
</blockquote>
</aside>
<p>ok, I see</p>
<aside class="quote no-group" data-username="boydm" data-post="25" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>Overall… This first version is very much aimed at fixed-screen embedded style devices. I’m not trying to make it look like a native app in a windowed host environment. Could be done, but isn’t a goal.</p>
</blockquote>
</aside>
<p>sure, anyway nice to see that it will work on so much environments</p>
<aside class="quote no-group" data-username="boydm" data-post="25" data-topic="8653">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/boydm/48/582_2.png" class="avatar"> boydm:</div>
<blockquote>
<p>On the other hand, if you want to move around a UI element, that’s just a matrix transform (not as scary as that sounds) and works really well.</p>
</blockquote>
</aside>
<p>I believe it’s less scary if you are playing with <code>OpenGL</code>-like API “everyday”, so if you are creating button from scratch then it should not be a big deal to also draw some animations. From beginner side it’s much more trouble especially when you need to play with things you should not to like frame-less windows for custom title-bar.</p>
<p>I will definitely place a job offer at least to create library with what I have described and maybe there would be something more also like card game generator + launcher or even also advanced reader which I have in my crazy mind. <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="87943" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/3-elixirconf-2017-elixir-native-ui-boyd-multerer/8653/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-87943" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="87943"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>