| 12345678910111213141516171819 |
- <!doctype html>
- <html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-branding">
- <head>
- <meta charset="UTF-8">
- <meta name="generator" content="Docusaurus v2.2.0">
- <title data-rh="true">Branding | WebSerial Docs</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://docs.webserial.pro/branding/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Branding | WebSerial Docs"><meta data-rh="true" name="description" content="This is an exclusive feature of WebSerial Pro. Check it out here."><meta data-rh="true" property="og:description" content="This is an exclusive feature of WebSerial Pro. Check it out here."><link data-rh="true" rel="canonical" href="https://docs.webserial.pro/branding/"><link data-rh="true" rel="alternate" href="https://docs.webserial.pro/branding/" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.webserial.pro/branding/" hreflang="x-default"><link rel="preconnect" href="https://www.google-analytics.com">
- <link rel="preconnect" href="https://www.googletagmanager.com">
- <script async src="https://www.googletagmanager.com/gtag/js?id=G-BCT2ENBRLE"></script>
- <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-BCT2ENBRLE",{anonymize_ip:!0})</script><link rel="stylesheet" href="/assets/css/styles.2702d93e.css">
- <link rel="preload" href="/assets/js/runtime~main.bd196cc2.js" as="script">
- <link rel="preload" href="/assets/js/main.5657af05.js" as="script">
- </head>
- <body class="navigation-with-keyboard">
- <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script><div id="__docusaurus">
- <div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#docusaurus_skipToContent_fallback">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/v2/img/logo.png" alt="WebSerial" class="themedImage_ToTc themedImage--light_HNdA" width="180"><img src="/v2/img/logo.png" alt="WebSerial" class="themedImage_ToTc themedImage--dark_i4oU" width="180"></div><b class="navbar__title text--truncate"></b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/ayushsharma82/WebSerial/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_vylO colorModeToggle_x44X"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently dark mode)" aria-label="Switch between dark and light mode (currently dark mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_ZlJk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebar_njMd"><nav class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/installation/">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/getting-started/">Getting Started</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/examples/">Examples</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/authentication/">Authentication</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/callbacks/">Callbacks</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/printing/">Printing Logs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toggle-input/">Toggle Input (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/export/">Export Logs (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/timestamps/">Timestamps (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/font/">Font Settings (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/hardware-id/">Hardware ID (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/custom-title/">Custom Title (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/branding/">Branding (Pro)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/commercial-license/">Commercial License</a></li></ul></nav></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row docitem-content"><div class="col docItemCol_z5aJ"><div class="docItemContainer_c0TR"><article><div class="breadcrumb-row"><div><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_OVgt"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Branding (Pro)</span><meta itemprop="position" content="1"></li></ul></nav></div><div></div></div><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header class="mdx-heading"><h1>Branding</h1></header><div class="theme-admonition theme-admonition-danger alert alert--danger admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>Pro Feature</div><div class="admonitionContent_S0QG"><p>This is an exclusive feature of WebSerial Pro. Check it out <a href="https://webserial.pro" target="_blank" rel="noopener noreferrer">here</a>.</p></div></div><br><img loading="lazy" src="/v2/img/branding.png" alt="Branding" width="400px" class="card-preview img_ev3q"><br><br><h1>Overview</h1><p>Branding in this context refers to the custom logo that is displayed on the WebSerial interface. You can customize the logo by defining the logo image as a byte array in the <code>logo.h</code> and <code>logo.cpp</code> files of the library's source code.</p><p>To add your custom logo on the WebSerial interface, follow these steps:</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-1-prepare-your-logo">Step 1: Prepare Your Logo<a class="hash-link" href="#step-1-prepare-your-logo" title="Direct link to heading"></a></h3><p>First, you need to create or obtain the logo image you want to display on the WebSerial interface. Ensure that the logo image is in a suitable format, such as a SVG (recommended) / PNG or JPG file and make sure your image is optimized & small in file size.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-2-convert-logo-image-to-a-byte-array">Step 2: Convert Logo Image to a Byte Array<a class="hash-link" href="#step-2-convert-logo-image-to-a-byte-array" title="Direct link to heading"></a></h3><p>To include the logo in your library, you'll need to convert the image into a byte array.</p><ol><li>Go to <a href="https://file2raw.labrat.one/" target="_blank" rel="noopener noreferrer">File2Raw utility</a> ( I created this utility a few years back for the purpose of converting files into byte array for C++ applications ).</li><li>Select your logo.</li><li>Select "Gzip Compress" & "Use PROGMEM (Arduino)".</li><li>Click "Convert".</li></ol><h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-3-modify-logoh">Step 3: Modify <code>logo.h</code><a class="hash-link" href="#step-3-modify-logoh" title="Direct link to heading"></a></h3><ol><li><p>Open the <code>logo.h</code> file in your WebSerial library source code.</p></li><li><p>Locate the <code>WEBSERIAL_LIGHT_LOGO</code> byte array declaration, which should look like this:</p><div class="language-cpp codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-cpp codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">extern</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">uint8_t</span><span class="token plain"> WEBSERIAL_LIGHT_LOGO</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li><p>Replace the length of the <code>WEBSERIAL_LIGHT_LOGO</code> array with your custom logo's byte array length.</p></li><li><p>Locate the <code>WEBSERIAL_LIGHT_LOGO_MIME</code> variable, which defines the MIME type of your logo image. By default, it is set to <code>image/png</code>. If your logo is in a different format (e.g., JPEG), update the <code>WEBSERIAL_LIGHT_LOGO_MIME</code> variable to the appropriate MIME type.</p></li><li><p>Set <code>WEBSERIAL_LOGO_WIDTH</code> & <code>WEBSERIAL_LOGO_HEIGHT</code> according to your desired size which will be displayed on the webpage.</p></li></ol><h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-4-modify-logocpp">Step 4: Modify <code>logo.cpp</code><a class="hash-link" href="#step-4-modify-logocpp" title="Direct link to heading"></a></h3><ol><li><p>Open the <code>logo.cpp</code> file in your WebSerial library source code.</p></li><li><p>Replace the contents of the <code>WEBSERIAL_LIGHT_LOGO</code> array with your custom logo's byte array generated in File2Raw utility.</p></li></ol><h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-5-upload-the-modified-library">Step 5: Upload the Modified Library<a class="hash-link" href="#step-5-upload-the-modified-library" title="Direct link to heading"></a></h3><p>After making these changes, compile and upload the modified WebSerial library to your device.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="wrapping-up">Wrapping Up<a class="hash-link" href="#wrapping-up" title="Direct link to heading"></a></h2><p>Once you have uploaded the modified WebSerial library to your device, That's it! You have successfully added custom branding to the WebSerial interface by defining the logo as a byte array in the <code>logo.h</code> and <code>logo.cpp</code> files.</p><p>You can now do the same for <code>WEBSERIAL_DARK_LOGO</code> which will be displayed when the UI/interface is in dark mode. <em>This is done because some logos need to have inverted colors to appear correctly in dark theme.</em></p><p>Please note that branding, including logos and images, may be subject to copyright and trademark laws. Ensure you have the necessary rights or permissions to use any branding elements in your project.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/custom-title/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Custom Title (Pro)</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/commercial-license/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Commercial License</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-prepare-your-logo" class="table-of-contents__link toc-highlight">Step 1: Prepare Your Logo</a></li><li><a href="#step-2-convert-logo-image-to-a-byte-array" class="table-of-contents__link toc-highlight">Step 2: Convert Logo Image to a Byte Array</a></li><li><a href="#step-3-modify-logoh" class="table-of-contents__link toc-highlight">Step 3: Modify <code>logo.h</code></a></li><li><a href="#step-4-modify-logocpp" class="table-of-contents__link toc-highlight">Step 4: Modify <code>logo.cpp</code></a></li><li><a href="#step-5-upload-the-modified-library" class="table-of-contents__link toc-highlight">Step 5: Upload the Modified Library</a></li><li><a href="#wrapping-up" class="table-of-contents__link toc-highlight">Wrapping Up</a></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/getting-started/">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/examples/">Examples</a></li><li class="footer__item"><a class="footer__link-item" href="/commercial-license/">Commercial License</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/ayushsharma82/WebSerial/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/asrocks5" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Support</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/ayushsharma82/WebSerial/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Create an Issue (Repo)<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://webserial.pro/support" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contact me<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 SOFTT. All rights reserved.</div></div></div></footer></div>
- <script src="/assets/js/runtime~main.bd196cc2.js"></script>
- <script src="/assets/js/main.5657af05.js"></script>
- </body>
- </html>
|
