Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
playground [2017/01/31 20:19] – logansamplayground [2022/01/21 18:04] (current) – test major changes to see if it triggers an rss feed; no content changed Arthur Brown
Line 1: Line 1:
 +====== Playground ======
 +  
 +This is a place to test out wiki markup without modifying live pages. Reference for available markup and syntax are available at the [[wiki:syntax|Formatting Syntax page]].
 + 
 +===== Bootstrap collapse =====
 +
 +These are examples of using default bootstrap html css and js collapse. The only modification from the bootstrap documentation is that panel headings can't use <a> tags. 
 +
 <html> <html>
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingOne">     <div class="panel-heading" role="tab" id="headingOne">
-      <h4 class="panel-title"> +      <h4 class="panel-title role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+
           Collapsible Group Item #1           Collapsible Group Item #1
-        </a> 
       </h4>       </h4>
     </div>     </div>
Line 17: Line 23:
   <div class="panel panel-default">   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingTwo">     <div class="panel-heading" role="tab" id="headingTwo">
-      <h4 class="panel-title"> +      <h4 class="panel-title"class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">+
           Collapsible Group Item #2           Collapsible Group Item #2
-        </a> 
       </h4>       </h4>
     </div>     </div>
Line 31: Line 35:
   <div class="panel panel-default">   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingThree">     <div class="panel-heading" role="tab" id="headingThree">
-      <h4 class="panel-title"> +      <h4 class="panel-title"class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
-        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> +          Wiki syntax within HTML
-          Collapsible Group Item #3 +
-        </a>+
       </h4>       </h4>
     </div>     </div>
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-      <div class="panel-body"> +      <div class="panel-body"></html> 
-        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +Wiki syntax within HTML wrapper. End the **HMTL**, start wiki syntax, then finish your __//HTML//__. 
-      </div>+<html></div>
     </div>     </div>
   </div>   </div>
Line 52: Line 54:
   Button with data-target   Button with data-target
 </button> </button>
-<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">+<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
   Button with data-target 2   Button with data-target 2
 </button> </button>
Line 61: Line 63:
 </div> </div>
 <div class="collapse" id="collapseExample2"> <div class="collapse" id="collapseExample2">
-  <div class="well"> +  <div class="well"></html> 
-    This is a hidden panel +This is a hidden panel 2 with **//wiki syntax//** 
-  </div>+<html></div>
 </div> </div>
 </html> </html>
  
 +===== Outliner Plugin =====
 +There is also an outliner plugin that's pretty straight forward as well.
  
 +--> Differences between the bootstrap collapse and outliner plugin#
 +--> Pros#
 +  * You can memorize the syntax easily
 +  * Nested groups are a thing
 +  * The arrow key image makes it clear that it can be clicked on and opened
 +  * also supports wiki syntax inside each of the sections
 +
 +<--
 +--> Cons#
 +  * Not actually grouped together (as seen in some more of the examples below
 +  * cannot be coerced to nicely fit in a bulleted list like this one (bootstrap can be)
 +  * One section does not close when you open a different one
 +  * The tooltip feature is obnoxious
 +
 +<--
 +<--
 +
 +Note that all of the notes and randomness are copied and pasted from James Colvin's random testings
 +
 +--> Section 1 without preview thanks to the pound sign#
 +
 +  * List item one in Section 1 without number
 +  - Item number 1
 +  - Item number 2
 +  - Item number 3
 +
 +Some other syntax. even **//__Wiki__//** ''syntax''
 +
 +--> Nested section opened by default with the carrot sign and a tooltip preview without the pound sign^
 +
 +I'm a tooltip and the content! And obnoxious as a tooltip!
 +
 +--> Nested nested content?#
 +
 +That would be super awesome if this works\\ horray it does!\\ you'll notice that adding the close out code <-- does nothing if it's not at the start of a new line
 +
 +<-- close nested nested content comment
 +outside of nested nested content
 +
 +<--close nested content in section 1 comment
 +Continue section 1 outside of nested content? 
 +
 +<-- A COMMENT TO CLOSE OUT SECTION 1 THAT IS INVISIBLE!!!! YESSSSSS!!!!!!
 +Outside of section 1 before section 2. There's an invisible comment closing out section 1
 +
 +--> You know you want to try out a section 2!#
 +Okay, so it's not a real section 2 that auto numbers. I just made the title look like it did that.\\ Otherwise
 +section 2 is quite beautiful wouldn't you say? I can even put a table inside it
 +^ A beautiful table ^^^
 +^Left Header  ^  Center Header  ^  Right Header|
 +|  content 1  |      Content 2  |   Content 3  |
 +| content 1a  | :::             |  content 3a  |
 +make sure you have some sort of line between a table and the close out ''<''''-''''-'' code\\ otherwise it apparently breaks the code
 +<-- close out section 2
 +
 +outside of all of the sections\\ \\ 
 +start up a new sectional outliner thing after using a couple of ''\\'' newline codes
 +--> A brand new section 1 that starts out opened, but no preview#^
 +some cool internal content to the new section 1
 +<--
 +\\ 
 +
 +===== MathJAX plugin =====
 When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
 +
 +More math equation options:
 +
 +To display math on its own line, use double dollar signs:
 +$$ \frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x) $$
 +or escaped square brackets:
 +
 +\[ \sin A \cos B = \frac{1}{2}\left[ \sin(A-B)+\sin(A+B) \right] \]
 +A wide range of math environments will work as well:
 +
 +\begin{align*}
 +e^x & = 1 + x + \frac{x^2}{2} + \frac{x^3}{6} + \cdots \\
 +    & = \sum_{n\geq 0} \frac{x^n}{n!}
 +\end{align*}
 +
 +Note that the math environments should not be inside the dollar sign delimiters; the environments should stand on their own with just the \begin and \end statements in order to be parsed correctly. See [[https://www.dokuwiki.org/plugin:mathjax|here]] for what "math environments" means.
 +===== Tip, info, and important things to callout =====
 +<WRAP square important 650px> 
 +===WHOA!===
 +STOP RIGHT THERE!\\ YOU SEE THIS BOX?!\\ You can't //help// but read it can you? It's pretty sweet to have this nice box that was specified to be square (rather than round) of a specified length (650px), that is also specified as ''important'', resulting in this orange box with a triangle warning sign. If we don't want to be so aggressive with our imagery, we can also use an info or a tip callout box provided by the WRAP plugin.
 +</WRAP>
 +
 +<WRAP round info 650px>
 +===Nice Formal information===
 +This round info box provides some additional information that isn't strictly needed in the main body text, but is helpful to have available.
 +</WRAP>
 +
 +<WRAP round tip 650px> 
 +===Tip===
 +Here's a lovely recommendation that you can follow in case you weren't completely certain of what you needed to do next.
 +</WRAP>
  
  
 +===== Other stuff tbd =====
 Logic Analyzer Logic Analyzer
  
Line 308: Line 407:
 See Export in Common Interfaces. See Export in Common Interfaces.
  
 +===== Pmod table test =====
 +
 +
 +
 +^  [[learn:fundamentals:communication-protocols:spi:start|SPI]]  ^  [[learn:fundamentals:communication-protocols:uart:start|UART]]  ^  [[learn:fundamentals:communication-protocols:i2c:start|I²C]]  ^  [[learn:fundamentals:communication-protocols:gpio:start|GPIO]]                ^
 +| {{topic>pmod-spi -user-guide}}  | {{topic>pmod-uart -user-guide}}  | {{topic>pmod-i2c -user-guide}}  | {{topic>pmod-gpio -user-guide}}  |
 +
 +hi  
 +
 +-----
 +
 +{{Digilent Product List
 +| Product Namespace = reference:pmods
 +| Image = True
 +| Name = True
 +| Column = Bus
 +| Column = Logic Level
 +| Column = Specification Version
 +}}