Files

Loic Coenen 05c6f34b8f feat: add microui-based GUI with transport controls and progress bar

Co-authored-by: aider (deepseek/deepseek-coder) <aider@aider.chat>

2026-05-01 13:02:39 +00:00

303 KiB

Raw Blame History

<html lang="en"

data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true"

<head> <style type="text/css"> :root { --tab-size-preference: 4; } pre, code { tab-size: var(--tab-size-preference); } </style>

<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-7f694b60439d06c0.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-b48faa60c69660fa.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-b40ec823a1a6a1af.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-f825c0edd7ad57f8.css" />

<meta name="hovercard-subject-tag" content="repository:149854705" data-turbo-transient>

<meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I">

<meta name="user-login" content="">



<meta name="viewport" content="width=device-width">



  <meta name="description" content="A tiny immediate-mode UI library. Contribute to rxi/microui development by creating an account on GitHub.">

  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">

<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<meta property="fb:app_id" content="1401488693436528">
<meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/rxi/microui/blob/master/doc/usage.md" />

  <meta name="twitter:image" content="https://opengraph.githubassets.com/fb782404943e40f6b55639439b9497c64d00b144e77dde51739df9a72e1be973/rxi/microui" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="microui/doc/usage.md at master · rxi/microui" /><meta name="twitter:description" content="A tiny immediate-mode UI library. Contribute to rxi/microui development by creating an account on GitHub." />

  <meta name="hostname" content="github.com">



    <meta name="expected-hostname" content="github.com">

  <meta name="turbo-cache-control" content="no-cache" data-turbo-transient>

<meta data-hydrostats="publish">

<meta name="turbo-body-classes" content="logged-out env-production page-responsive">

</head>

<div class="position-relative header-wrapper js-header-wrapper ">
  <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 tmp-py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a>

  <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full">
<span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span>

  <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />

<react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" data-react-profiling="false"

  <a class="tmp-mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav"
    href="/"
    aria-label="Homepage"
    data-analytics-event="{&quot;category&quot;:&quot;Marketing nav&quot;,&quot;action&quot;:&quot;click to go to homepage&quot;,&quot;label&quot;:&quot;ref_page:Marketing;ref_cta:Logomark;ref_loc:Header&quot;}">
    <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github">
<path d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943"></path>

  <div class="d-flex flex-1 flex-order-2 text-right d-lg-none gap-2 flex-justify-end">
      <a
        href="/login?return_to=https%3A%2F%2Fgithub.com%2Frxi%2Fmicroui%2Fblob%2Fmaster%2Fdoc%2Fusage.md"
        class="HeaderMenu-link HeaderMenu-button d-inline-flex f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav"
        data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/rxi/microui/blob/master/doc/usage.md&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="7cdd986d4f5ca9a0fdea330bb2a561ec575cd91a8e0742c575348424eb6818d9"
        data-analytics-event="{&quot;category&quot;:&quot;Marketing nav&quot;,&quot;action&quot;:&quot;click to Sign in&quot;,&quot;label&quot;:&quot;ref_page:Marketing;ref_cta:Sign in;ref_loc:Header&quot;}"
      >
        Sign in
      </a>
          <div class="AppHeader-appearanceSettings">
<react-partial-anchor>
  <button data-target="react-partial-anchor.anchor" id="icon-button-19c037d6-61be-4fcc-9089-f8ec408d76e5" aria-labelledby="tooltip-e6de1935-0dcb-4268-a3fb-23e2be4dbb40" type="button" disabled="disabled" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium AppHeader-button HeaderMenu-link border cursor-wait">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sliders Button-visual">
<path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75Zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5Zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6ZM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8Zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2Zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z"></path>

Appearance settings

  <template data-target="react-partial-anchor.template">
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />

<react-partial partial-name="appearance-settings" data-ssr="false" data-attempted-ssr="false" data-react-profiling="false"

  </template>
</react-partial-anchor>

  </div>
</div>


<div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0">
  <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0">
        <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />

<react-partial partial-name="marketing-navigation" data-ssr="true" data-attempted-ssr="true" data-react-profiling="false"

Platform
View all features
Solutions
- BY COMPANY SIZE
  Enterprises
  Small and medium teams
  Startups
  Nonprofits
- BY USE CASE
  App Modernization
  DevSecOps
  DevOps
  CI/CD
  View all use cases
- BY INDUSTRY
  Healthcare
  Financial services
  Manufacturing
  Government
  View all industries
View all solutions
Resources
- EXPLORE BY TOPIC
  AI
  Software Development
  DevOps
  Security
  View all topics
- EXPLORE BY TYPE
  Customer stories
  Events & webinars
  Ebooks & reports
  Business insights
  GitHub Skills
- SUPPORT & SERVICES
  Documentation
  Customer support
  Community forum
  Trust center
  Partners
View all resources
Open Source
- COMMUNITY
  GitHub SponsorsFund open source developers
- PROGRAMS
  Security Lab
  Maintainer Community
  Accelerator
  GitHub Stars
  Archive Program
- REPOSITORIES
  Topics
  Trending
  Collections
Enterprise
- ENTERPRISE SOLUTIONS
  Enterprise platformAI-powered developer platform
- AVAILABLE ADD-ONS
  GitHub Advanced SecurityEnterprise-grade security features
  Copilot for BusinessEnterprise-grade AI features
  Premium SupportEnterprise-grade 24/7 support
Pricing

    <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center tmp-mt-3 tmp-mt-lg-0 text-lg-left tmp-ml-lg-3">

Search or jump to...

<input type="hidden" name="type" class="js-site-search-type-field">

Search code, repositories, users, issues, pull requests...

      <div data-view-component="true">        <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container"
      style="border-radius: 12px;"
      data-target="qbsearch-input.queryBuilderContainer"
      hidden
    >
      <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get">

Clear

      </span>
  </div>
  <template id="search-icon">

    <div class="position-relative">
                    <ul
          role="listbox"
          class="ActionListWrap QueryBuilder-ListWrap"
          aria-label="Suggestions"
          data-action="
            combobox-commit:query-builder#comboboxCommit
            mousedown:query-builder#resultsMousedown
          "
          data-target="query-builder.resultsList"
          data-persist-list=false
          id="query-builder-test-results"
          tabindex="-1"
        ></ul>

    </div>
  <div class="FormControl-inlineValidation" id="validation-cec40d6d-5add-4f9e-bdb4-59fb380d376c" hidden="hidden">
    <span class="FormControl-inlineValidation--visual">
      <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
<path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>

Search syntax tips

</div>

Provide feedback

</div>
<div class="Overlay-actionWrap">
  <button data-close-dialog-id="feedback-dialog" aria-label="Close" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>

We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted

Cancel Submit feedback

<custom-scopes data-target="qbsearch-input.customScopesManager">

Saved searches

Use saved searches to filter your results more quickly

    <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm">
    <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="Q+mkbypeFoCtmkK2P+XrUe+URjXl0iYmLXStLAiX7z9ipT01K+ATO1FJOW19DWgPHFK12scCHnRf9HwKHcn5sw==" />
      <div data-target="custom-scopes.customScopesModalDialogFlash"></div>

      <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField">

      <div class="form-group">
        <label for="custom_scope_name">Name</label>
        <auto-check src="/search/custom_scopes/check_name" required>
          <input
            type="text"
            name="custom_scope_name"
            id="custom_scope_name"
            data-target="custom-scopes.customScopesNameField"
            class="form-control"
            autocomplete="off"
            placeholder="github-ruby"
            required
            maxlength="50">
          <input type="hidden" data-csrf="true" value="vt22MvSW1cacEy5tYG6+X71+FtbGcZuIeZjgULSzz9SqMirFQsCSUM+JREfJ3Kw9et9n2YuIYH0d6xhpvFTE0g==" />
        </auto-check>
      </div>

      <div class="form-group">
        <label for="custom_scope_query">Query</label>
        <input
          type="text"
          name="custom_scope_query"
          id="custom_scope_query"
          data-target="custom-scopes.customScopesQueryField"
          class="form-control"
          autocomplete="off"
          placeholder="(repo:mona/a OR repo:mona/b) AND lang:python"
          required
          maxlength="500">
      </div>

      <p class="text-small color-fg-muted">
        To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>.
      </p>

    <div data-target="custom-scopes.manageCustomScopesForm">
      <div data-target="custom-scopes.list"></div>
    </div>

Cancel Create saved search

        <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block">
          <a
            href="/login?return_to=https%3A%2F%2Fgithub.com%2Frxi%2Fmicroui%2Fblob%2Fmaster%2Fdoc%2Fusage.md"
            class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded px-2 py-1"
            style="margin-left: 12px;"
            data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/rxi/microui/blob/master/doc/usage.md&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="7cdd986d4f5ca9a0fdea330bb2a561ec575cd91a8e0742c575348424eb6818d9"
            data-analytics-event="{&quot;category&quot;:&quot;Marketing nav&quot;,&quot;action&quot;:&quot;click to go to homepage&quot;,&quot;label&quot;:&quot;ref_page:Marketing;ref_cta:Sign in;ref_loc:Header&quot;}"
          >
            Sign in
          </a>
        </div>

          <a href="/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fblob%2Fshow&amp;source=header-repo&amp;source_repo=rxi%2Fmicroui"
            class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1"
            data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/rxi/microui/blob/master/doc/usage.md&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="7cdd986d4f5ca9a0fdea330bb2a561ec575cd91a8e0742c575348424eb6818d9"
            data-analytics-event="{&quot;category&quot;:&quot;Sign up&quot;,&quot;action&quot;:&quot;click to sign up for account&quot;,&quot;label&quot;:&quot;ref_page:/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show;ref_cta:Sign up;ref_loc:header logged out&quot;}"
          >
            Sign up
          </a>

            <div class="AppHeader-appearanceSettings">
<react-partial-anchor>
  <button data-target="react-partial-anchor.anchor" id="icon-button-f1ed9c8b-59fa-451b-b975-fe63510450e7" aria-labelledby="tooltip-8bc6f88e-6c0c-4f08-b0d2-4e2375d711fb" type="button" disabled="disabled" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium AppHeader-button HeaderMenu-link border cursor-wait">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sliders Button-visual">
<path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75Zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5Zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6ZM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8Zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2Zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z"></path>

Appearance settings

  <template data-target="react-partial-anchor.template">
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />

<react-partial partial-name="appearance-settings" data-ssr="false" data-attempted-ssr="false" data-react-profiling="false"

  </template>
</react-partial-anchor>

      <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Resetting focus</button>
    </div>
  </div>
</div>

  <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full">

    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

<button id="icon-button-826a9c3d-0d50-41a6-93d0-77c37dcd6b65" aria-labelledby="tooltip-efa1dc30-9f40-4ac2-b7a9-246ccd1d2607" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual">
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>

Dismiss alert

<div id="js-flash-container" class="flash-container" data-turbo-replace>

  <div>{{ message }}</div>

</div>

  <div class="d-flex flex-nowrap flex-justify-end tmp-mb-3  tmp-px-3 tmp-px-lg-5" style="gap: 1rem;">

    <div class="flex-auto min-width-0 width-fit">

<span class="author flex-self-stretch" itemprop="author">
  <a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/rxi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/rxi">
    rxi

/ microui

<span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span>

    </div>

    <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;">
        <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;">

    <li>
      <include-fragment src="/rxi/microui/sponsor_button" data-nonce="v2:e0672f82-d347-7703-92d1-f6d281f58d6d" data-view-component="true">

  <h3 data-view-component="true" class="blankslate-heading">        Uh oh!

There was an error while loading. Please reload this page.

Notifications You must be signed in to change notification settings

Fork 364

Star 5.8k

    </div>
  </div>

    <div id="responsive-meta-container" data-turbo-replace>

      <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 tmp-px-3 px-md-4 tmp-px-md-4 px-lg-5 tmp-px-lg-5">

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline">
<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>

Code

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>

Issues 22

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline">
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path>

Pull requests 16

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path>

Actions

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline">
<path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path>

Projects

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline">
<path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>

Security and quality 0

          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline">
<path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>

Insights

Additional navigation options

  <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone">          <action-list>

<a tabindex="-1" id="item-21ee382d-d390-4c16-b4e3-58def344583e" href="/rxi/microui" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code">
<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Code

<a tabindex="-1" id="item-faaab1ed-10e0-4891-bee5-610b0a67b5c1" href="/rxi/microui/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Issues

<a tabindex="-1" id="item-abbe330c-5dcd-4a14-8bee-0eea70557295" href="/rxi/microui/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request">
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Pull requests

<a tabindex="-1" id="item-918ed193-76f5-4b85-9c30-d6eb22ceed6f" href="/rxi/microui/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Actions

<a tabindex="-1" id="item-475635d4-4782-4178-b354-c0dbf471ca3e" href="/rxi/microui/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table">
<path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Projects

<a tabindex="-1" id="item-2e905dc7-e2b9-4955-9c76-209c92183a9d" href="/rxi/microui/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield">
<path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Security and quality

<a tabindex="-1" id="item-09b4ee35-fa32-49b7-824e-9ec8d5f08778" href="/rxi/microui/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph">
<path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>

    <span data-view-component="true" class="ActionListItem-label">
      Insights

<react-app app-name="code-view" initial-path="/rxi/microui/blob/master/doc/usage.md" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="true" data-ssr="true" data-lazy="false" data-alternate="false" data-data-router-enabled="true" data-react-profiling="false"

Files

master

usage.md

Blame

Latest commit

History

251 lines (218 loc) · 9.08 KB

master

usage.md

Top

File metadata and controls

Preview
Code
Blame

251 lines (218 loc) · 9.08 KB

Raw

Usage

Overview
Getting Started
Layout System
Style Customisation
Custom Controls

Overview

The overall structure when using the library is as follows:

main loop: call mu_input_... functions call mu_begin() process ui call mu_end() iterate commands using mu_command_next()">

initialise mu_Context
main loop:
call mu_input_... functions
call mu_begin()
process ui
call mu_end()
iterate commands using mu_command_next()

Getting Started

Before use a mu_Context should be initialised:

mu_Context *ctx = malloc(sizeof(mu_Context));
mu_init(ctx);

Following which the context's text_width and text_height callback functions should be set:

ctx->text_width = text_width;
ctx->text_height = text_height;

In your main loop you should first pass user input to microui using the mu_input_... functions. It is safe to call the input functions multiple times if the same input event occurs in a single frame.

After handling the input the mu_begin() function must be called before processing your UI:

mu_begin(ctx);

Before any controls can be used we must begin a window using one of the mu_begin_window... or mu_begin_popup... functions. The mu_begin_... window functions return a truthy value if the window is open, if this is not the case we should not process the window any further. When we are finished processing the window's ui the mu_end_... window function should be called.

if (mu_begin_window(ctx, "My Window", mu_rect(10, 10, 300, 400))) {
  /* process ui here... */
  mu_end_window(ctx);
}

It is safe to nest mu_begin_window() calls, this can be useful for things like context menus; the windows will still render separate from one another like normal.

While inside a window block we can safely process controls. Controls that allow user interaction return a bitset of MU_RES_... values. Some controls — such as buttons — can only potentially return a single MU_RES_..., thus their return value can be treated as a boolean:

if (mu_button(ctx, "My Button")) {
  printf("'My Button' was pressed\n");
}

The library generates unique IDs for controls internally to keep track of which are focused, hovered, etc. These are typically generated from the name/label passed to the function, or, in the case of sliders and checkboxes the value pointer. An issue arises then if you have several buttons in a window or panel that use the same label. The mu_push_id() and mu_pop_id() functions are provided for such situations, allowing you to push additional data that will be mixed into the unique ID:

for (int i = 0; i < 10; i++) {
  mu_push_id(ctx, &i, sizeof(i));
  if (mu_button(ctx, "x")) {
    printf("Pressed button %d\n", i);
  }
  mu_pop_id(ctx);
}

When we're finished processing the UI for this frame the mu_end() function should be called:

mu_end(ctx);

When we're ready to draw the UI the mu_next_command() can be used to iterate the resultant commands. The function expects a mu_Command pointer initialised to NULL. It is safe to iterate through the commands list any number of times:

mu_Command *cmd = NULL;
while (mu_next_command(ctx, &cmd)) {
  if (cmd->type == MU_COMMAND_TEXT) {
    render_text(cmd->text.font, cmd->text.text, cmd->text.pos.x, cmd->text.pos.y, cmd->text.color);
  }
  if (cmd->type == MU_COMMAND_RECT) {
    render_rect(cmd->rect.rect, cmd->rect.color);
  }
  if (cmd->type == MU_COMMAND_ICON) {
    render_icon(cmd->icon.id, cmd->icon.rect, cmd->icon.color);
  }
  if (cmd->type == MU_COMMAND_CLIP) {
    set_clip_rect(cmd->clip.rect);
  }
}

See the demo directory for a usage example.

Layout System

The layout system is primarily based around rows — Each row can contain a number of items or columns each column can itself contain a number of rows and so forth. A row is initialised using the mu_layout_row() function, the user should specify the number of items on the row, an array containing the width of each item, and the height of the row:

/* initialise a row of 3 items: the first item with a width
** of 90 and the remaining two with the width of 100 */
mu_layout_row(ctx, 3, (int[]) { 90, 100, 100 }, 0);

When a row is filled the next row is started, for example, in the above code 6 buttons immediately after would result in two rows. The function can be called again to begin a new row.

As well as absolute values, width and height can be specified as 0 which will result in the Context's style.size value being used, or a negative value which will size the item relative to the right/bottom edge, thus if we wanted a row with a small button at the left, a textbox filling most the row and a larger button at the right, we could do the following:

mu_layout_row(ctx, 3, (int[]) { 30, -90, -1 }, 0);
mu_button(ctx, "X");
mu_textbox(ctx, buf, sizeof(buf));
mu_button(ctx, "Submit");

If the items parameter is 0, the widths parameter is ignored and controls will continue to be added to the row at the width last specified by mu_layout_width() or style.size.x if this function has not been called:

mu_layout_row(ctx, 0, NULL, 0);
mu_layout_width(ctx, -90);
mu_textbox(ctx, buf, sizeof(buf));
mu_layout_width(ctx, -1);
mu_button(ctx, "Submit");

A column can be started at any point on a row using the mu_layout_begin_column() function. Once begun, rows will act inside the body of the column — all negative size values will be relative to the column's body as opposed to the body of the container. All new rows will be contained within this column until the mu_layout_end_column() function is called.

Internally controls use the mu_layout_next() function to retrieve the next screen-positioned-Rect and advance the layout system, you should use this function when making custom controls or if you want to advance the layout system without placing a control.

The mu_layout_set_next() function is provided to set the next layout Rect explicitly. This will be returned by mu_layout_next() when it is next called. By using the relative boolean you can choose to provide a screen-space Rect or a Rect which will have the container's position and scroll offset applied to it. You can peek the next Rect from the layout system by using the mu_layout_next() function to retrieve it, followed by mu_layout_set_next() to return it:

mu_Rect rect = mu_layout_next(ctx);
mu_layout_set_next(ctx, rect, 0);

If you want to position controls arbitrarily inside a container the relative argument of mu_layout_set_next() should be true:

/* place a (40, 40) sized button at (300, 300) inside the container: */
mu_layout_set_next(ctx, mu_rect(300, 300, 40, 40), 1);
mu_button(ctx, "X");

A Rect set with relative true will also effect the content_size of the container, causing it to effect the scrollbars if it exceeds the width or height of the container's body.

Style Customisation

The library provides styling support via the mu_Style struct and, if you want greater control over the look, the draw_frame() callback function.

The mu_Style struct contains spacing and sizing information, as well as a colors array which maps colorid to mu_Color. The library uses the style pointer field of the context to resolve colors and spacing, it is safe to change this pointer or modify any fields of the resultant struct at any point. See microui.h for the struct's implementation.

In addition to the style struct the context stores a draw_frame() callback function which is used whenever the frame of a control needs to be drawn, by default this function draws a rectangle using the color of the colorid argument, with a one-pixel border around it using the MU_COLOR_BORDER color.

Custom Controls

The library exposes the functions used by built-in controls to allow the user to make custom controls. A control should take a mu_Context* value as its first argument and return a MU_RES_... value. Your control's implementation should use mu_layout_next() to get its destination Rect and advance the layout system. mu_get_id() should be used with some data unique to the control to generate an ID for that control and mu_update_control() should be used to update the context's hover and focus values based on the mouse input state.

The MU_OPT_HOLDFOCUS opt value can be passed to mu_update_control() if we want the control to retain focus when the mouse button is released — this behaviour is used by textboxes which we want to stay focused to allow for text input.

A control that acts as a button which displays an integer and, when clicked increments that integer, could be implemented as such:

/* handle input */ int res = 0; if (ctx->mouse_pressed == MU_MOUSE_LEFT && ctx->focus == id) { (*value)++; res |= MU_RES_CHANGE; }

/* draw */ char buf[32]; sprintf(buf, "%d", *value); mu_draw_control_frame(ctx, id, rect, MU_COLOR_BUTTON, 0); mu_draw_control_text(ctx, buf, rect, MU_COLOR_TEXT, MU_OPT_ALIGNCENTER);

return res; }">

int incrementer(mu_Context ctx, int value) {
mu_Id     id = mu_get_id(ctx, &value, sizeof(value));
mu_Rect rect = mu_layout_next(ctx);
mu_update_control(ctx, id, rect, 0);
/* handle input /
int res = 0;
if (ctx->mouse_pressed == MU_MOUSE_LEFT && ctx->focus == id) {
(value)++;
res |= MU_RES_CHANGE;
}
/* draw /
char buf[32];
sprintf(buf, "%d", value);
mu_draw_control_frame(ctx, id, rect, MU_COLOR_BUTTON, 0);
mu_draw_control_text(ctx, buf, rect, MU_COLOR_TEXT, MU_OPT_ALIGNCENTER);
return res;
}

</main>

      <footer class="footer tmp-pt-7 tmp-pb-6 f6 color-fg-muted color-border-subtle p-responsive" role="contentinfo" >

Footer

<nav aria-label="Footer">
  <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3>

  <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading">


      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to Terms&quot;,&quot;label&quot;:&quot;text:terms&quot;}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to privacy&quot;,&quot;label&quot;:&quot;text:privacy&quot;}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to security&quot;,&quot;label&quot;:&quot;text:security&quot;}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to status&quot;,&quot;label&quot;:&quot;text:status&quot;}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to community&quot;,&quot;label&quot;:&quot;text:community&quot;}" href="https://github.community/" data-view-component="true" class="Link--secondary Link">Community</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to docs&quot;,&quot;label&quot;:&quot;text:docs&quot;}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to contact&quot;,&quot;label&quot;:&quot;text:contact&quot;}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a>
      </li>

      <li class="mx-2" >

Manage cookies

Do not share my personal information

  </ul>
</nav>

<ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999"
  data-locale="en"
  data-initial-cookie-consent-allowed=""
  data-cookie-consent-required="false"
></ghcc-consent>

You can’t perform that action at this time.

<template id="site-details-dialog">

<div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;">

<template id="snippet-clipboard-copy-button">

</div>
<div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div>
<div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div>

</html>

Usage

Overview

The Jack Looper application provides a simple audio loop player using JACK.

Getting Started

Ensure JACK is running
Run ./jack-looper
Use the TUI interface to control playback

Controls

Space: Play/Stop
Up/Down: Change BPM
Left/Right: Change loop length
R: Reset beat position
Q: Quit

Building

Run make to build all targets.

303 KiB Raw Blame History Unescape Escape

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

Breadcrumbs

usage.md

Latest commit

History

Breadcrumbs

usage.md

File metadata and controls

Usage

Overview

Getting Started

Layout System

Style Customisation

Custom Controls

Footer

Usage

Overview

Getting Started

Controls

Building

303 KiB

Raw Blame History

Files