Files
picovga-cmake/docs/gettingstarted.html
2025-08-26 20:47:11 -07:00

164 lines
9.7 KiB
HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.9.1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>PicoVGA: Getting Started</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>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="custom.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 style="height: 56px;">
<td id="projectlogo"><img alt="Logo" src="logo.png"/></td>
<td id="projectalign" style="padding-left: 0.5em;">
<div id="projectname">PicoVGA
&#160;<span id="projectnumber">1.2-cmake</span>
</div>
<div id="projectbrief">VGA/TV display on Raspberry Pico</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.9.1 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
var searchBox = new SearchBox("searchBox", "search",false,'Search','.html');
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
$(function() {
initMenu('',true,false,'search.php','Search');
$(document).ready(function() { init_search(); });
});
/* @license-end */</script>
<div id="main-nav"></div>
</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:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
$(document).ready(function(){initNavTree('gettingstarted.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">
<iframe src="javascript:void(0)" frameborder="0"
name="MSearchResults" id="MSearchResults">
</iframe>
</div>
<div class="PageDoc"><div class="header">
<div class="headertitle">
<div class="title">Getting Started </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p><a class="anchor" id="md_pages_GettingStarted"></a> </p>
<h1><a class="anchor" id="autotoc_md3"></a>
Installing PicoVGA</h1>
<ol type="1">
<li>Make sure you have the <a href="https://github.com/raspberrypi/pico-sdk">Pico SDK</a> installed.</li>
<li>Clone the PicoVGA repository <br />
<div class="fragment"><div class="line">git clone https://github.com/codaris/picovga-cmake.git</div>
</div><!-- fragment --></li>
<li>Set <code>PICOVGA_PATH</code> to the PicoVGA directory in your environment, or pass it (<code>-DPICOVGA_PATH=</code>) to cmake later.</li>
</ol>
<h1><a class="anchor" id="autotoc_md4"></a>
Building the Examples</h1>
<p>The PicoVGA project comes with a comprehensive set of example programs that demonstate many of the features of the library. These examples are located in the <a href="https://github.com/codaris/picovga-cmake/tree/main/examples"><code>examples</code></a> folder of the PicoVGA project.</p>
<p>To create the makefiles, run this CMake command from the main PicoVGA folder:</p>
<div class="fragment"><div class="line">cmake .</div>
</div><!-- fragment --><p>Then to build all the example projects at once, you run make (please note this might take a long time):</p>
<div class="fragment"><div class="line">make</div>
</div><!-- fragment --><p>This will generate a <code>.uf2</code> file for every example program in the root folder of each example. <br />
</p>
<p>If you want to build a single example program, you can run make for just that example:</p>
<div class="fragment"><div class="line">cd examples/vga_hello</div>
<div class="line">make</div>
</div><!-- fragment --><p>If you don't want to mix the build files with the rest of the code, you can specify a separate build folder when running CMake:</p>
<div class="fragment"><div class="line">cmake . -Bbuild</div>
</div><!-- fragment --><p>This will generate all the makefiles and build outputs into the <code>build</code> folder.</p>
<p>After you build one or more example files, the compiled output will be generated as <code>program_name.uf2</code> file where <code>program_name</code> is the name of the example. They are compiled for a VGA monitor and USB serial keyboard input. Load them into the Pico by copying the <code>uf2</code> on the Pico when it's in bootloader mode (hold the bootsel button when connecting to your computer).</p>
<p>Many of the examples use a USB serial connection for controls.</p>
<h1><a class="anchor" id="autotoc_md5"></a>
Integrating PicoVGA into Your Project</h1>
<p>The easiest way to incorporate the PicoVGA library into a project is to examine or copy the <a href="https://github.com/codaris/picovga-helloworld">sample project</a>.</p>
<p>To add PicoVGA to an existing project you must do the following:</p>
<ol type="1">
<li>Copy the <code>picovga_import.cmake</code> file from the PicoVGA library folder into the root of your project.</li>
<li>Copy the <code><a class="el" href="vga__config_8h_source.html">vga_config.h</a></code> file from the the PicoVGA library folder into the source or include files folder in your project.</li>
<li>Include that file in your <code>CMakeLists.txt</code> file: <br />
<div class="fragment"><div class="line">include(picovga_import.cmake) </div>
</div><!-- fragment --></li>
<li>For every target that uses PicoVGA, add PicoVGA to that target with the <code>add_picovga()</code> macro in the <code>CMakeLists.txt</code> file: <br />
<div class="fragment"><div class="line"># Add PicoVGA to the target (in this case &quot;helloworld&quot;)</div>
<div class="line">add_picovga(helloworld)</div>
</div><!-- fragment --></li>
<li>Ensure that the folder containing the <code><a class="el" href="vga__config_8h_source.html">vga_config.h</a></code> is included in the target include directories in <code>CMakeLists.txt</code>: <br />
<div class="fragment"><div class="line">target_include_directories(helloworld PRIVATE</div>
<div class="line"> ${CMAKE_CURRENT_LIST_DIR}/src</div>
<div class="line">)</div>
</div><!-- fragment --></li>
</ol>
<p>Run the command <code>cmake .</code> to generate the makefiles for the project and <code>make</code> to build the project.</p>
<h1><a class="anchor" id="autotoc_md6"></a>
Configuring PicoVGA</h1>
<p>The <code><a class="el" href="vga__config_8h_source.html">vga_config.h</a></code> contains the PicoVGA library settings, such as the size of the render buffers. You usually do not need to pay attention to this file. You usually only have to modify it in the following cases:</p>
<ul>
<li>When you use a display resolution greater than 640x480 pixels. Typically, the configuration file sets the maximum resolution to 640x480. This must be adjusted at higher resolutions to allow the library to reserve larger buffers for rendering functions.</li>
<li>If there is not enough RAM. There is still some headroom where you can save some memory. First, you can reduce the <code>MAXX</code>, <code>MAXY</code>, and <code>MAXLINE</code> resolution settings down to a real values. Next, you can reduce the number of LAYERS down to the actual value used (in the range of 1 to 4). Finally, you can reduce the number of segments and stripes to the actual value <code>SEGMAX</code> and <code>STRIPMAX</code> (minimum is 1).</li>
<li>The third case is to use of a large number of display stripes and segments. Normally, the values here are set to 8 stripes (=horizontal strips) and 8 segments (=vertical division of each strip).</li>
</ul>
<p>If you have an older monitor that requires VGA VSync, uncomment the line the <code>CMakeLists.txt</code> file that sets the vsync pin:</p>
<div class="fragment"><div class="line"># If monitor requires vsync, set the vsync pin.</div>
<div class="line">add_compile_definitions(VGA_GPIO_VSYNC=9)</div>
</div><!-- fragment --><p>Vsync can use any pin on the Pico (the default is 9) </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.1 </li>
</ul>
</div>
</body>
</html>