- Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathsdl.html
202 lines (202 loc) · 8.89 KB
/
sdl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<metaname="viewport" content="width=device-width, initial-scale=1">
<title>SmallBASIC | sdl</title>
<metaname="description" content="SmallBASIC | One more basic">
<linkrel="canonical" href="/sdl.html">
<linkrel="keywords" href="sdl">
<linkrel="stylesheet" href="/css/style.css">
<linkrel="icon" type="image/png" href="/images/sb-desktop-32x32.png">
<scriptsrc="/clipboard.js"></script>
</head>
<body>
<buttononclick="topFunction()" id="BackToTopBtn" title="Go to top">⯅</button>
<scriptsrc="/backtotop.js"></script>
<divclass="wrapAll clearfix">
<navclass="navigation">
<divclass="logo">
<ahref="/"><imgsrc='/images/sb-logo.png?v=2' alt="logo"></a>
</div>
<divclass="navlinks">
<ahref="/pages/download.html">Download</a>
<ahref="/pages/news.html">News</a>
<ahref="/pages/community.html">Community</a>
<aclass='active' href="/pages/articles.html">Resources</a>
<ahref="/pages/reference.html">Language Reference</a>
<ahref="/pages/guide.html">SmallBASIC Manual</a>
</div>
</nav>
<divclass="mainsection">
<divclass="tabs clearfix">
<divclass="tabsRight">
<atarget="_github" href="https://github.com/smallbasic/smallbasic.github.io/blob/master/_build/pages/sdl.markdown">Edit</a>
<atarget="_github" href="https://github.com/smallbasic/smallbasic.github.io/commits/master/_build/pages/sdl.markdown">History</a>
</div>
</div>
<divclass="article">
<h1id="smallbasic-sdl-version">SmallBASIC SDL Version</h1>
<p>The SDL version of SmallBASIC offers a simple but efficient IDE and
is perfect for working with graphics. To start the SDL version please
execute:</p>
<ul>
<li>Windows: <code>sbasicg.exe</code></li>
<li>Linux: <code>SmallBASIC-SDL_xx.xx-x86_64.AppImage</code> or
<code>sbasicg</code> if built from source</li>
</ul>
<p>In the video below the basic steps of creating a file, opening it in
the internal editor and executing the program are shown.</p>
<divclass="video-container">
<iframewidth="1160" height="653" src="https://www.youtube.com/embed/2fW7usYY_CA" title="SmallBASIC "Hello World"" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>
<p>Please note, that at the first start of the SDL version of
SmallBASIC, the editor is turned off. A mouse click on a file name will
start the program immediately. If you want to edit the file, please turn
on the editor by clicking on the three dots in the lower right corner
and choosing the entry <code>Editor [OFF]</code> to enable the
editor.</p>
<h2id="live-mode">Live mode</h2>
<p>Live mode uses a secondary output window to display the results of
your program whenever you press save.</p>
<p>To enter live mode, press the <code>F8</code> key from the file
editor. Note the keystroke help window documents the <code>F8</code> key
along with other supported functions.</p>
<p><imgsrc="/images/press_f8.png" title="Press F8" /></p>
<p>Start making changes to your program, then press
<code>Ctrl + s</code> to save your changes to the file. The program
output will appear in the secondary window. The secondary window will
run the program to completion. It then waits until the file has changed
before restarting the program. Note if you press save while your program
is waiting for user input, then changes will not yet appear.</p>
<p><imgsrc="/images/press_save.png" title="Press Save" /></p>
<h2id="debugging">Debugging</h2>
<p>sbasicg supports a limited form of interactive debugging. You can set
a break-point by pressing <code>Ctrl + t</code> over the intended
program line. This also allows you to use the <code>Ctrl + g</code>
keystroke to navigate between markers.</p>
<p><imgsrc="/images/control_t.png" title="Set marker" /></p>
<p>Press the <code>F5</code> key to start the debugging session. This
will cause a secondary output window to appear.</p>
<p><imgsrc="/images/debug.png" title="Start debugging" /></p>
<p>You can now press <code>F6</code> to step through program lines, or
<code>F7</code> to continue. The program will either then run to
completion or stop when encountering a marker line. A dump of variables
and the current stack position appear in the right hand pane. Note this
can become very messy with large programs limiting its usefulness. The
alternative is to use the LOGPRINT command. This outputs to the
DebugView app in Windows or to the bash console in Linux.</p>
<p><imgsrc="/images/press_f6.png" title="Step through code" /></p>
<h2id="how-to-use-better-looking-fonts-in-the-windows-version">How to
use better looking fonts in the Windows version</h2>
<oltype="1">
<li>Envy font</li>
</ol>
<ul>
<li><p>Download <a
href="http://download.damieng.com/fonts/original/EnvyCodeR-PR7.zip"
class="uri">http://download.damieng.com/fonts/original/EnvyCodeR-PR7.zip</a></p></li>
<li><p>Unzip and copy “Envy Code R.ttf” and “Envy Code R Bold.ttf” into
the same folder as sbasicg.exe.</p></li>
</ul>
<olstart="2" type="1">
<li>Adobe Source Code Pro</li>
</ol>
<ul>
<li><p>Download
https://www.1001fonts.com/download/source-code-pro.zip</p></li>
<li><p>Unzip and copy SourceCodePro-Regular.ttf and
SourceCodePro-Bold.ttf into the same folder as sbasicg.exe.</p></li>
</ul>
<p>Note: if all of the above are present, the envy font takes
precedence.</p>
<p>You need to restart SmallBASIC for the new font to be displayed.</p>
<h2id="how-to-use-better-looking-fonts-in-the-linux-version">How to use
better looking fonts in the Linux version</h2>
<ul>
<li>Download the Envy or Source Code Pro fonts as per above
instructions</li>
<li>Copy the .ttf files to ~/.fonts.</li>
<li>Invoke the following command:</li>
</ul>
<p>$ sudo fc-cache -fv</p>
<p>You can select then select one if the following using the -f command
line argument:</p>
<pre><code>"Envy Code R"
"Source Code Pro"
"Ubuntu Mono"
"DejaVu Sans Mono"
"FreeMono"
"Liberation Mono"
"Courier New"</code></pre>
<p>For example:</p>
<pre><code>sbasicg -f "Courier new"
sbasicg --font="Liberation Mono"</code></pre>
<h2id="keyboard-shortcuts">Keyboard shortcuts</h2>
<pre><code>[Ctrl] + [c] Break running program
[Ctrl] + [m] Show menu
[Ctrl] + [backspace] Back to launcher
[Ctrl] + [pageup] Page up scrolled display
[Ctrl] + [pagedown] Page down scrolled display
[Ctrl] + [up-arrow] Line up scrolled display
[Ctrl] + [down-arrow] Line down scrolled display
[Ctrl] + [p] Screen dump</code></pre>
<h2id="how-to-help-design-a-better-looking-editor-color-theme">How to
help design a better looking editor color theme</h2>
<p>There are a number of color themes available in the text editor. You
can switch between themes by pressing ALT+t while editing a file. When
SmallBASIC starts, the last theme is read from the settings.txt file
(under %APPDATA%/SmallBASIC in windows and ~/.config/SmallBASIC in
linux) and when it exits the current settings are written back to the
file.</p>
<p>The steps below should give just enough functionality to help design
a better looking theme. Sorry, it’s a bit of a convoluted process.</p>
<oltype="1">
<li>Start SmallBASIC, then click to edit a .bas file, then press ALT+t
four times. You are now looking at the modifiable theme.</li>
<li>Exit SmallBASIC (Alt+f4).</li>
<li>Copy settings.txt into a separate file (say settings.new), then open
settings.new in a programming editor in linux: $ cd ~/.config/SmallBASIC
$ cp settings.txt settings.new</li>
<li>Repeat: Make any changes to the hex values (see below) in
settings.new, copy settings.new to settings.txt, and then restart
SmallBASIC to inspect the changes. in linux: $ cp settings.new
settings.txt && sbasicg -e foo.bas</li>
<li>Once you have something looking fantastic, email me your settings
and I’ll include them in the next release.</li>
</ol>
<p>— settings.txt — 529,173,640,480,100,0,1,0
c8cedb,a7aebc,484f5f,a7aebc,a7aebc,00bb00,2e3436,888a85,000000,4d483b,000000,2b313a,0083f8,ff9d00,31ccac,c679dd,0083f8
…</p>
<p>Offsets for the above color hex values</p>
<pre><code>0 - color
1 - selection_color
2 - number_color
3 - number_selection_color
4 - cursor_color
5 - syntax_comments
6 - background
7 - selection_background
8 - number_selection_background
9 - cursor_background
10 - match_background
11 - row_cursor
12 - syntax_text
13 - syntax_command
14 - syntax_statement
15 - syntax_digit
16 - row_marker</code></pre>
</div>
<divclass="pagefooter">
This page was last edited on Mon, 7 Apr 2025 22:04:07 +0200
|
<ahref="https://en.wikipedia.org/wiki/Markdown" target="_blank" rel="nofollow">Markdown</a>
processed with
<ahref="https://pandoc.org/MANUAL.html#pandocs-markdown" target="_blank" rel="nofollow">pandoc 3.1.12.1</a>
</div>
</div>
</div>
</body>
</html>
