Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
batocera_wiki_code_snippets [2020/03/21 14:53] lalabatocera_wiki_code_snippets [2023/10/20 08:02] (current) – [Embedded images]: Explain how to avoid font issues in SVG ssokolow
Line 1: Line 1:
-~~NOTOC~~ +====== Batocera Wiki Code Snippets/Templates ======
-====== BATOCERA Code Snippets ======+
  
-^Symbol                     ^Code                             ^Note                                                         ^ +<WRAP center round tip> 
-| {{:switch-button.png?25|}} | <nowiki>{{:switch-button.png?20|}}</nowiki> integer value of 20 is ideal for a fluent text structure +cheat-sheet can be found [[wiki:syntax#cheat_sheet|on the DokuWiki syntax page]]
-| {{:switch-slider.png?60|}} | <nowiki>{{:switch-slider.png?30|}}</nowiki>  | A integer value of 30 is ideal for a fluent text structure +</WRAP>
-| {{::switch-multioption.png?30|}} | <nowiki>{{::switch-multioption.png?20|}}</nowiki> | A integer value of 20 is ideal for a fluent text structure | +
-| {{:switch-az.png?30|}} | <nowiki>{{:switch-az.png?20|}}</nowiki| A integer value of 20 is ideal for a fluent text structure |+
  
-Code can be displayed by using the ''<code>print ("Hello World")</code>''-Tags but it will lead to a an ugly grey box. So for some one liners you can try to use <code><nowiki>print ("Hello World")</nowiki></code> 
  
-Icons can be created and distrubuted for free with: https://logomakr.com/+===== In-links ===== 
 + 
 +In-links refer to linking to another page on [[:|this wiki]]. When doing so, you don't need to include the %%"https://wiki.batocera.org/"%% at the start, just the namespace, followed by a colon (:), and then the page name. For example: 
 + 
 +[[wiki:syntax|Here's a link to the syntax page in the "wiki" namespace.]] 
 + 
 +which is coded as: 
 + 
 +<code> 
 +[[wiki:syntax|Here's a link to the syntax page in the "wiki" namespace.]] 
 +</code> 
 + 
 +==== In-links to the null namespace ==== 
 + 
 +If you're referring to a page that doesn't belong to a namespace, remember to use a lone colon at the start so it will work no matter which page the user is looking at it from. For example: 
 + 
 +[[access_the_batocera_via_ssh|This in-link won't work from particular other pages as there's no colon.]] [[:access_the_batocera_via_ssh|But this one will always work]]. 
 + 
 +which is coded as: 
 + 
 +<code> 
 +[[access_the_batocera_via_ssh|This in-link won't work from particular other pages as there's no colon.]] [[:access_the_batocera_via_ssh|But this one will always work]]. 
 +</code> 
 + 
 +You are encouraged to use in-links over hard-coded links, as that will allow the wiki to automatically update the link should the page name ever change in the future. 
 + 
 +==== Section linking ==== 
 + 
 +If you'd like to link to a particular section in the page, add a hash (#) followed by the name of the section in all lower-case and with under-scores replacing spaces (special characters are usually just completely omitted). For example: 
 + 
 +[[wiki:syntax#links|This links to the "links" section of the syntax page.]] 
 + 
 +which is coded as: 
 + 
 +<code> 
 +[[wiki:syntax#links|This links to the "links" section of the syntax page.]] 
 +</code> 
 + 
 +For links that simply refer to another [[#in-links|section in the same page that you're current on]], you only need to specify the header name preceded by a hash: 
 + 
 +<code> 
 +[[#in-links|section in the same page that you're current on]] 
 +</code> 
 + 
 +Sections are identified by their name alone, irrelevant of how nested they are inside of other headers. If there are multiple sections with the same name in the same page, they are identified by having a digit added to the end of them. 
 + 
 +<WRAP center round tip 60%> 
 +You can always click the little "linking" icon that appears when you hover your mouse over the header for that section. 
 +</WRAP> 
 + 
 +===== Inter-wiki links ===== 
 + 
 +Let's face it, Wikipedia is a great source of information for technical aspects at times. If you ever need to link to a Wikipedia page specifically, you should use the %%"wp>(title of Wikipedia page)"%% format for its link. For example: 
 + 
 +[[wp>Home_video_game_console_generations|Here's their page on home video-game console generations.]] 
 + 
 +which is invoked by 
 + 
 +<code> 
 +[[wp>Home_video_game_console_generations|Here's their page on home video-game console generations.]] 
 +</code> 
 + 
 +Note that you don't need to include the full URL, just the Wikipedia page title. It also appears with the Wikipedia icon, isn't that neat? 
 + 
 +This also works for embedding Youtube videos using only their video ID, like so: 
 + 
 +{{youtube>ssluTgfkdlg?medium}} 
 + 
 +which is invoked by 
 + 
 +<code> 
 +{{youtube>ssluTgfkdlg?medium}} 
 +</code> 
 + 
 +<WRAP center round important> 
 +Currently, embedding Youtube links is bugged. When the mouse hovers over the "Edit" button while viewing the page, the thumbnail reloads, causing the page to jump up. This is unusable and thus Youtube embeds should be avoided entirely until this is fixed. Use direct links instead. 
 +</WRAP> 
 + 
 +===== Embedded images ===== 
 + 
 +Images can be added to a page if needed. Keep in mind that visuals should be in addition to the written explanation, not a replacement. The syntax is the following: 
 + 
 +%%{{:image-name?Size|Alternative Text}}%% 
 + 
 +For example, the "north button" image is located at [[https://wiki.batocera.org/_media/wiki:north.png|https://wiki.batocera.org/_media/wiki:north.png]] (''wiki:north.png'' is the name), it is the **North button** on a controller, which corresponds to the **X Button** on a **SNES pad**, and if we want to display this image at a 20 width pixel size, we need to put ''%%{{:wiki:north.png?nolink&20|North button (X SNES)}}%%'' and the wiki will show {{:wiki:north.png?nolink&20|North button (X SNES)}} instead. Also if the image fails to load, or if we use the mouse cursor on it, it'll display "North button (X SNES)"; this is important for accessibility too. 
 + 
 +^ Symbol ^ Code ^ Note ^ 
 +| {{:switch-button.png?20|On/Off Settings}} | ''%%{{:switch-button.png?20|On/Off Settings}}%%''  | The ON/OFF switch used for some options in EmulationStation. | 
 +| {{:switch-slider.png?30|}} | ''%%{{:switch-slider.png?30|}}%%''  | The slider used for some options in EmulationStation. | 
 +| {{::switch-multioption.png?20|}} | ''%%{{::switch-multioption.png?20|}}%%'' | Indicates that the menu item is used to show the user information. | 
 +| {{:switch-az.png?20|}} | ''%%{{:switch-az.png?20|}}%%'' | A sorting type used by EmulationStation. | 
 +| {{:wiki:north.png?nolink&20|North button (X SNES)}} | ''%%{{:wiki:north.png?nolink&20|North button (X SNES)}}%%'' | The "X" button on a SNES layout, also referred to as the North button. | 
 +| {{:wiki:west.png?nolink&20|West button (Y SNES)}} | ''%%{{:wiki:west.png?nolink&20|West button (Y SNES)}}%%'' | The "Y" button on a SNES layout, also referred to as the West button. | 
 +| {{:wiki:south.png?nolink&20|South button (B SNES)}} | ''%%{{:wiki:south.png?nolink&20|South button (B SNES)}}%%'' | The "B" button on a SNES layout, also referred to as the South button. | 
 +| {{:wiki:east.png?nolink&20|East button (A SNES)}} | ''%%{{:wiki:east.png?nolink&20|East button (A SNES)}}%%'' | The "A" button on a SNES layout, also referred to as the East button. | 
 + 
 +Icons can be created and distributed for free with: https://logomakr.com/ 
 + 
 +Scalable Vector Graphics (SVG) files are also good for creating/editing iconography. These can be edited with Illustrator or the freely distributed [[https://inkscape.org/|Inkscape]]. 
 + 
 +Sample SVG file: 
 +{{:wiki:svg-controller.svg|Cute controller.}} 
 + 
 +The wiki's media manager can actually accept SVG files even though it doesn't show it on the compatible file formats list. SVG files that contain text are discouraged due to fonts not being available on all systems (and thus appearing inconsistently or not at all). You can avoid this by converting the text into shapes in Inkscape using ''Path > Object to Path''
 + 
 +However, by using the official DokuWiki [[https://www.dokuwiki.org/plugin:imagebox|imagebox]] plugin (which is installed additionally on this DokuWiki server), you can also put a frame around an image and make the image title text show up within the image frame instead of showing up as a tooltip (the image's filename will be shown as a tooltip instead). If you decide to resize your image like the image example below (75% of the image's original size in this example), the plugin also includes a nice extra feature of showing automatically an extra mini icon on the right lower corner of your imagebox you can click on to enlarge the image to its original size. 
 + 
 +[{{ wiki:dokuwiki-128.png?75 |This is the image title}}] \\ 
 + 
 +  [{{ wiki:dokuwiki-128.png?75 |This is the image title}}]  
 +   
 +===== Embedded videos ===== 
 + 
 +It is recommended to convert the video to a WEBM with a resolution of 655x368 to prepare it for embedding into the wiki page and not have interruptions during playback. With that said, the wiki supports many video formats (check what you can upload in the media uploading tool) and the resolution will always be downscaled to whatever size you specify in the embed code itself. For example: 
 + 
 +<code> 
 +{{URL-to-video?655x368|Alt text}} 
 +</code> 
 + 
 +This would result in the video looking similar to this: 
 + 
 +{{blog:how-to-install-windows-steam-games.webm?655x368|Sometimes running a game through Proton is even better than its Linux-native version!}} 
 + 
 +<WRAP center round tip> 
 +A quick way to record videos from Batocera itself is to sign in via SSH and run the ''batocera-record'' command. 
 +</WRAP> 
 + 
 +===== Unformatted code ===== 
 + 
 +Code can be displayed by using the ''<code>print ("Hello World")</code>'' but it will lead to a grey box. So for some one liners you can try to use 
 + 
 +<code> 
 +%%print ("Hello World")%% 
 +</code> 
 + 
 +You can create downloadable files by specifying its file-name as a parameter in the %%<code>%% header along with its syntax. eg.  
 + 
 +  <code java script.js> 
 +  Here is my Javascript code. 
 +  </code> 
 +   
 +would become 
 + 
 +<code java script.js> 
 +Here is my Javascript code. 
 +</code> 
 + 
 +If you just want a raw text file without syntax highlighting, use a hyphen (-) as your syntax. 
 + 
 +===== No formatting ===== 
 + 
 +It is also possible to ask the wiki to not apply formatting to a specific element by surrounding it by ''<nowiki>%%</nowiki>'', or by using ''%%<nowiki></nowiki>%%'' 
 + 
 +For example, writing down the following:  
 + 
 +**%%echo 'jambon' >> sandwich.txt%%** 
 + 
 +will display as 
 + 
 +**echo 'jambon' >> sandwich.txt** 
 + 
 +transforming the %%>>%% into a », however writing 
 + 
 +**<nowiki>%%echo 'jambon' >> sandwich.txt%%</nowiki>** or **%%<nowiki>echo 'jambon' >> sandwich.txt</nowiki>%%** will display it correctly. 
 + 
 +===== Display tables (vertical bar method) ===== 
 + 
 +The more common way of displaying tables in this wiki is through the use of vertical bars (|) and carats (^). These keys are available with ''[Shift]''+''[\]'' and ''[Shift]''+''[6]'' on standard QWERTY ASCII keyboards. 
 + 
 +Headers are identified by beginning with a carat. Regular elements begin with vertical bars. Elements that aren't closed with another carat or bar will be discarded. For example: 
 + 
 +<code> 
 +^ Header 1 ^ Attribute 2 ^ Notes ^ 
 +| Emulator 1 | ''.zip'' ''.nes'' | Is pretty cool. | 
 +| Emulator 2 | ''.nes'' | Is cooler, but less compatible. | 
 +| Emulator 3 | 
 +| Emulator 4 
 +</code> 
 + 
 +would appear as 
 + 
 +^ Header 1 ^ Attribute 2 ^ Notes ^ 
 +| Emulator 1 | ''.zip'' ''.nes'' | Is pretty cool. | 
 +| Emulator 2 | ''.nes'' | Is cooler, but less compatible. | 
 +| Emulator 3 | 
 +| Emulator 4 
 + 
 +Alignment is handled by using double white spaces on the side of the element you want it to align to. For example: 
 + 
 +<code> 
 +|  This element at the top isn't a header, and is right aligned. | An empty element is below this one. | 
 +^ But this one is. Headers don't have to only be at the top, but should in most cases.  ^ | 
 +^ Any element can be closed with either a bar or a carat, it doesn't matter which. |  But they will decide the element type for the next element. | 
 +</code> 
 + 
 +would appear as 
 + 
 +|  This element at the top isn't a header, and is right aligned. | An empty element is below this one. | 
 +^ But this one is. Headers don't have to only be at the top, but should in most cases.  ^ | 
 +^ Any element can be closed with either a bar or a carat, it doesn't matter which. |  But they will decide the element type for the next element. | 
 + 
 +===== Display tables (csv) ===== 
 + 
 +One easy way to display a table is to use a comma separated values (csv) structure. Think of it like a 2-D spreadsheet, but in a pure text format where the separator of the columns is a Comma, and the separator for the lines is a newline, and the first line serves as a header. 
 + 
 +Putting a CSV structure inside the %%<csv></csv>%% elements will display it, so for instance, if you have 
 + 
 +<code>Emulator name, Emulated system, Original manufacturer 
 +Picodrive, Master system/Genesis, Sega 
 +Genesis plus GX, Master system/Genesis, Sega</code> 
 + 
 +and add the %%<csv></csv>%% like this :  
 + 
 +<code><csv> 
 +Emulator name, Emulated system, Original manufacturer 
 +Picodrive, Master system/Genesis, Sega 
 +Genesis plus GX, Master system/Genesis, Sega 
 +</csv></code> 
 + 
 +it will then display as this 
 + 
 +<csv> 
 +Emulator name, Emulated system, Original manufacturer 
 +Picodrive, Master system/Genesis, Sega 
 +Genesis plus GX, Master system/Genesis, Sega 
 +</csv> 
 + 
 +===== Adding a collapsible section ===== 
 + 
 +With the addition of the collapsible sidebar via the [[https://www.dokuwiki.org/plugin:outliner|outliner]] plugin now collapsible sections can be used anywhere in the wiki. 
 + 
 +The beginning of a section has to be marked with %%--> Title%%''[FLAGS]''. ''[FLAGS]'' is optional and can be: 
 + 
 +  * ''%%#%%'' for no preview (this is recommended) 
 +  * ''%%^%%'' to be opened by default (not recommended, defies the point) 
 +  * ''%%@%%'' for to indicate that there's an internal wiki link in title (otherwise it would just show the link syntax as if it were the title) 
 + 
 +Sections can be closed by using %%<--%% on a new line. Sections can also be nested. Example:  
 + 
 +<code> 
 +--> Section 1 without preview (recommended)# 
 + 
 +First level content. This can be pretty much anything. 
 +  * If ending with an list such as a bullet list, remember to add one space after the list so as to avoid syntax errors, like so: 
 + 
 +--> Second level nested section# 
 + 
 +Second level content. It's also just good practice to use a spare extra line when closing a section, though it's not always necessary. 
 + 
 +<-- 
 + 
 +First level content continues. 
 + 
 +<-- 
 + 
 +--> [[:batocera_wiki_code_snippets|Internal link in a section header.]]@# 
 + 
 +If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar. Does not work with section-specific in-links (ones that require a %%#%%), as that conflicts with the ''[FLAGS]''
 + 
 +--> [[:batocera_wiki_code_snippets|Internal link in a section header without the correct flag, opened by default.]]#
 + 
 +Notice how it instead shows the syntax instead of actually linking? 
 + 
 +<-- 
 + 
 +<-- 
 + 
 +--> Section with a preview on hover. Not recommended for general use. 
 + 
 +  Here's a bunch of text in some code. 
 + 
 +<-- 
 +</code> 
 + 
 +which would appear like so: 
 + 
 +--> Section 1 without preview (recommended)# 
 + 
 +First level content. This can be pretty much anything. 
 +  * If ending with an list such as a bullet list, remember to add one space after the list so as to avoid syntax errors, like so: 
 + 
 +--> Second level nested section# 
 + 
 +Second level content. It's also just good practice to use a spare extra line when closing a section, though it's not always necessary. 
 + 
 +<-- 
 + 
 +First level content continues. 
 + 
 +<-- 
 + 
 +--> [[:batocera_wiki_code_snippets|Internal link in a section header.]]@# 
 + 
 +If the user clicks the blue text, they will both simultaneously open the section and be taken to the linked page. If the instead click only the box around the text, they will just open the text instead. This is really only useful for the sidebar. Does not work with section-specific in-links (ones that require a %%#%%), as that conflicts with the ''[FLAGS]''
 + 
 +--> [[:batocera_wiki_code_snippets|Internal link in a section header without the correct flag, opened by default.]]#
 + 
 +Notice how it instead shows the syntax instead of actually linking? 
 + 
 +<-- 
 + 
 +<-- 
 + 
 +--> Section with a preview on hover. Not recommended for general use. 
 + 
 +  Here's a bunch of text in some code. 
 + 
 +<-- 
 + 
 +===== File tree ASCII art ===== 
 + 
 +When you need to display a folder's structure, the best way to do so is via an ASCII tree in a code block like so: 
 + 
 +<code> 
 +roms/ 
 +├─ psx/ 
 +│  ├─ Final Fantasy VII (Disc 1).bin 
 +│  └─ Final Fantasy VII (Disc 1).cue 
 +└─ Final Fantasy VII (Disc 1).m3u 
 +</code> 
 + 
 +Although it may be fun to write these out yourself, an automatic tool to create them is available at https://ascii-tree-generator.com/
  
 ===== CSV SAMPLE OUTPUT GOOGLE ===== ===== CSV SAMPLE OUTPUT GOOGLE =====
 +
 <code> <code>
 <csv file=https://docs.google.com/spreadsheets/URL/pub?output=csv> <csv file=https://docs.google.com/spreadsheets/URL/pub?output=csv>
Line 18: Line 336:
 </code> </code>
  
-<WRAP center round tip 100%>+<WRAP center round tip 90%>
 **To link to a Google spreadsheet:** **To link to a Google spreadsheet:**
   - Open your spreadsheet in Google Docs.   - Open your spreadsheet in Google Docs.
Line 33: Line 351:
 </WRAP> </WRAP>
  
 +===== Embed a website into a wiki page =====
 +
 +Batocera wiki supports iframes, showing another web page inside of the article. Simple example:
 +
 +<code>
 +{{url>http://www.example.com/somepage.html}}
 +</code>
 +
 +Full syntax:
 +
 +<code>
 +{{url>someurl width,height noscroll noborder alignment|alternate-text}}
 +</code>
 +
 +Javascript URLs are not supported. More info at https://www.dokuwiki.org/plugin:iframe
 +
 +===== Templates =====
 +
 +==== Batocera Themes Rules ====
 +
 +<code>|..THEMENAME..|..AUTHORNAME..|..{{ :themes:THEMNAME_system.png?300 |}}..
 +{{ :themes:minimal_system.png?300 |}}            --> will view in media manager
 +{{ :themes:minimal_grid.png?nolink&300 |}}       --> no link to the original image
 +{{ :themes:minimal_list.png?direct&300 |}}       --> links to the full resolution
 +
 +Can't decide? Used the first option.
 +
 +Authorname [[ https://github.com/repro/project|AUTHORNAME ]]
 +</code>
  
-===== CONTROLLERS =====+{{ :themes:minimal_system.png?300 |}} 
 +{{ :themes:minimal_grid.png?nolink&300 |}} 
 +{{ :themes:minimal_list.png?direct&300 |}}
  
-Items to check! +Some suggestions 
-<csv file=https://raw.githubusercontent.com/crcerror/BATOCERA-Shares/master/dwiki/pads.csv delim=;></csv>+  * Themename 
 +  * Authorname 
 +  * Link to author? (needed?) 
 +  * System List View -> themename_system 
 +  * ROM List View -themename_list 
 +  * GRID List View -> themename_grid 
 +  * Resolution 1920x1080
  
  • batocera_wiki_code_snippets.1584798790.txt.gz
  • Last modified: 4 years ago
  • by lala