Difference between pages "News:New Media Mix-ins" and "ConsoleOutput MediaWiki Extension"

(Difference between pages)
 
 
Line 1: Line 1:
{{News
+
The ConsoleOutput MediaWiki extension was created by Daniel Robbins to provide highlighting of user input for interactive terminal session blocks. To use it, surround user input with  <tt>&lt;console&gt;</tt> opening and closing tags, and put a <tt>##i##</tt> input code immediately before user input on each line. This will cause all text from the <tt>##i##</tt> point to the end of the line to be in a darker color. The rest of the text will be in a lighter grey, allowing it to be distinguished more easily from user input. Here are other sequences that can be used:
|Summary=Funtoo Linux now has new media mix-ins. Learn about them and how to use them.
+
|News Format=Extended
+
|News Category=General
+
|Author=Drobbins
+
|Publication Status=Draft
+
|Publication Date=2015/01/11
+
}}
+
Hello everyone,
+
  
Funtoo Linux has amazing support for all different kinds of audio, video and graphics formats, as well as media devices that can be enabled via USE flags -- but let's face it  -- with all this flexibility has come a certain amount of complexity in enabling all the USE flags you need for a particular application. I've tried to address this by [[Funtoo Profiles|enhancing the profile system]] to include flavors and mix-ins, and creating a {{c|media}} mix-in that enables stuff that a lot of people will want, which is auto-enabled in the {{c|desktop}} and {{c|workstation}} profile. But I always knew that this, while an improvement, was not the final word on media support in Funtoo Linux, and that we needed to do more work here.
+
* <tt>##b##</tt> - highlight the rest of the line in bold.
 +
* <tt>##b## text here ##!b##</tt> - highlight the text between both markers in bold.
 +
* <tt>##i## text here ##!i##</tt> - highlight the text between both markers in a darker color.
  
Recently, thanks to assistance from Michał Górny, we have been able to implement my design for second-generation media support to Funtoo Linux! Here's how it works. Rather than have a single mix-in called "media", we now have finer-grained categories, and the existing {{c|media}} mix-in has been upgraded to pull in a subset of these categories. Let's look at all the new mix-ins:
+
This extension can be further extended to add color support, as desired, and some of the CSS for color support can already be found in the code below.
  
=== Media Device Mix-ins ===
+
Here are a few examples of the ConsoleOutput extension. First this is how you might typically display {{c|ls}} output, with a particular directory highlighted:
 +
 
 +
<console>
 +
www@www-smw ~/public_html $ ##i##ls
 +
COPYING  LocalSettings.php    api.php  ##b##extensions##!b##    index.php  maintenance          redirect.php    skins              thumb_handler.php5
 +
CREDITS  README                api.php5  images        index.php5  mw-config            redirect.php5  tests              wiki.phtml
 +
FAQ      RELEASE-NOTES-1.19    bin      img_auth.php  languages  opensearch_desc.php  redirect.phtml  thumb.php
 +
HISTORY  StartProfiler.sample  cache    img_auth.php5  load.php    opensearch_desc.php5  resources      thumb.php5
 +
INSTALL  UPGRADE              docs      includes      load.php5  profileinfo.php      serialized      thumb_handler.php
 +
www@www-smw ~/public_html $ ##i##cd extensions/
 +
</console>
 +
 
 +
And here is how you might display a more detailed example of console output, using colors:
 +
 
 +
{{console|body=
 +
# ##i##bluetoothctl
 +
[##g##NEW##!g##] Controller 00:02:72:C9:62:65 antec [default]
 +
##bl##[bluetooth]##!bl### ##i##power on
 +
Changing power on succeeded
 +
##bl##[bluetooth]##!bl### ##i##agent on
 +
Agent registered
 +
##bl##[bluetooth]##!bl### ##i##scan on
 +
Discovery started
 +
##bl##[bluetooth]##!bl### ##i##devices
 +
Device 00:1F:20:3D:1E:75 Logitech K760
 +
##bl##[bluetooth]##!bl### ##i##pair 00:1F:20:3D:1E:75
 +
Attempting to pair with 00:1F:20:3D:1E:75
 +
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: yes
 +
##r##[agent]##!r## Passkey: 454358
 +
##r##[agent]##!r## Passkey: ##i##4##!i##54358
 +
##r##[agent]##!r## Passkey: ##i##45##!i##4358
 +
##r##[agent]##!r## Passkey: ##i##454##!i##358
 +
##r##[agent]##!r## Passkey: ##i##4543##!i##58
 +
##r##[agent]##!r## Passkey: ##i##45435##!i##8
 +
##r##[agent]##!r## Passkey: ##i##454358##!i##
 +
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Paired: yes
 +
Pairing successful
 +
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: no
 +
##bl##[bluetooth]##!bl### ##i##connect 00:1F:20:3D:1E:75
 +
Attempting to connect to 00:1F:20:3D:1E:75
 +
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: yes
 +
Connection successful
 +
##bl##[bluetooth]##!bl### ##i##quit
 +
[##r##DEL##!r##] Controller 00:02:72:C9:62:65 antec [default]
 +
#
 +
}}
  
Media device mix-ins have been created to support media devices, including external and portable devices, and associated low-level hardware support and hardware-focused codecs. Media devices have been categorized into audio and video categories, and consumer and professional categories. "Consumer" devices are those devices that regular desktop users might typically use, while "professional" devices are those that professionals, hobbyists or enthusiasts would typically. Here are the new mix-ins for media devices:
+
To install, make the following modifications to your skin:
  
{{TableStart}}
+
<syntaxhighlight lang="css">
<tr><th class="active">Mix-in</th><th class="active">Description</th></tr>
+
--- mediawiki-1.19.1/skins/vector/screen.css    2012-06-13 18:22:39.000000000 +0000
<tr><td>{{c|mediadevice-base}}</td><td>Common, universally-supported media devices, like IEEE-1394 (Firewire), CDDA, CDIO. Other mediadevice mix-ins have this as a parent.</td></tr>
+
+++ public_html/skins/vector/screen.css 2012-08-27 04:34:47.507912892 +0000
<tr><td>{{c|mediadevice-audio-consumer}}</td><td>Consumer audio devices, such as personal portable media players (iOS, iPod, etc.)</td></tr>
+
@@ -683,10 +683,47 @@
<tr><td>{{c|mediadevice-audio-pro}}</td><td>Pro audio support, such as JACK.</td></tr>
+
        list-style-image: url(images/bullet-icon.png);
<tr><td>{{c|mediadevice-video-consumer}}</td><td>Consumer video support, such as DVD, Blu Ray, V4L</td></tr>
+
}
<tr><td>{{c|mediadevice-video-pro}}</td><td>Pro video support, such as dv, dc1394.</td></tr>
+
{{TableEnd}}
+
-pre {
 +
-      line-height: 1.3em;
 +
+/* ConsoleOutput.php start */
 +
+
 +
+.shell, pre, code, tt, div.mw-geshi {
 +
+        font-size: 12px;
 +
+        font-family: Consolas, 'andale mono','lucida console', monospace;
 +
+}
 +
+
 +
+.shell, pre, div.mw-geshi {
 +
+        background-color: #F8F8FF;
 +
+        line-height: 15px;
 +
+        padding: 10px;
 +
+        border: none;
 +
+        border-top: 2px solid #C6C9E0;
 +
+        border-bottom: 2px solid #C6C9E0;
 +
+        margin: 0;
 +
+        overflow-x: auto;
 +
+        overflow-y: hidden;
 +
+}
 +
+
 +
+.code {
 +
+        color: #666;
 +
+}
 +
+
 +
+.code_input {
 +
+        color: #000;
 +
}
 +
 +
+.code_red {
 +
+        color: #f00;
 +
+}
 +
+
 +
+.code_blue {
 +
+        color: #00f;
 +
+}
 +
+
 +
+.shell_green {
 +
+        color: #080;
 +
+}
 +
+
 +
+/* ConsoleOutput.php end */
 +
+
 +
/* Site Notice (includes notices from CentralNotice extension) */
 +
#siteNotice {
 +
        font-size: 0.8em;
 +
</syntaxhighlight>
  
=== Media Format Mix-ins ===
+
Then install the following code in your <tt>extensions</tt> directory and include it with a <tt>require_once( "$IP/extensions/ConsoleOutput.php" );</tt> in <tt>LocalSettings.php</tt>:
  
Media format mix-ins have been created to support media formats for reading, writing, encoding and decoding images, audio and video. They have been organized into a "common" collection, for popular formats, and an "extra" collection, which is intended to include "everything else". Let's look at the new mix-ins:
+
<syntaxhighlight lang="php">
 +
<?php
 +
$wgExtensionCredits['validextensionclass'][] = array(
 +
    'name' => 'ConsoleOutput',
 +
    'author' => 'Daniel Robbins',
 +
    'url' => 'https://github.com/danielrobbins/mediawiki-consoleoutput',
 +
    'description' => 'This extension allows you to display colorized console output in mediawiki'
 +
);
  
{{TableStart}}
+
if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) {
<tr><th class="active">Mix-in</th><th class="active">Description</th></tr>
+
        $wgHooks['ParserFirstCallInit'][] = 'consoleOutputSetup';
<tr><td>{{c|mediaformat-video-common}}</td><td>Common (ie. popular) video formats.</td></tr>
+
} else {
<tr><td>{{c|mediaformat-video-extra}}</td><td>More esoteric video formats.</td></tr>
+
        $wgExtensionFunctions[] = 'consoleOutputSetup';
<tr><td>{{c|mediaformat-audio-common}}</td><td>Common (ie. popular) audio formats.</td></tr>
+
}
<tr><td>{{c|mediaformat-audio-extra}}</td><td>More esoteric audio formats.</td></tr>
+
<tr><td>{{c|mediaformat-gfx-common}}</td><td>Common (ie. popular) graphics formats.</td></tr>
+
<tr><td>{{c|mediaformat-gfx-extra}}</td><td>More esoteric graphics formats.</td></tr>
+
{{TableEnd}}
+
  
=== How to Use Them ===
+
function consoleOutputSetup( $data )
 +
{
 +
    global $wgParser;
 +
    $wgParser->setHook('console', 'consoleRender');
 +
    return true;
 +
}
  
Our existing {{c|media}} mix-in still exists, and is still pulled in by the {{c|desktop}} and {{c|workstation}} flavors automatically. It now includes the following parent mix-ins:
+
function consoleRender($input, $args, $parser)
 +
{
 +
    if (count($args))
 +
    {
 +
        return "<strong class='error'>" .
 +
              "ConsoleOutput: arguments not supported" .
 +
              "</strong>";
 +
    }
  
* {{c|mediadevice-audio-consumer}}
+
    # Display < and > as literals, so escape them:
* {{c|mediadevice-video-consumer}}
+
* {{c|mediaformat-audio-common}}
+
* {{c|mediaformat-gfx-common}}
+
* {{c|mediaformat-video-common}}
+
  
In addition, there is a new {{c|media-pro}} mix-in which needs to be enabled manually, which pulls in the following mix-ins:
+
    $input = preg_replace('/>/','&gt;', $input);
 +
    $input = preg_replace('/</','&lt;', $input);
  
* {{c|mediadevice-audio-pro}}
+
    # http://www.perlmonks.org/?node_id=518444
* {{c|mediadevice-video-pro}}
+
    # See "Matching a pattern that doesn't include another pattern:
  
So typically, you would enable the {{c|desktop}} or {{c|workstation}} flavor, and if you need professional hardware support, you'd also enable the {{c|media-pro}} mix-in. If you needed any additional media formats support, you could enable one or more of the {{c|mediaformat-*-extra}} mix-ins to add the formats you needed. Of course, it's possible to enable only the specific mix-ins you need, and also complement these mix-ins with specific USE variable settings you might require.
+
    $input = preg_replace('/##i##((?:(?!##!i##).)*)##!i##/','<span class="code_input">$1</span>', $input);
 +
    $input = preg_replace('/##i##(.*)/','<span class="code_input">$1</span>', $input);
 +
    $input = preg_replace('/##b##((?:(?!##!b##).)*)##!b##/','<b>$1</b>', $input);
 +
    $input = preg_replace('/##b##(.*)/','<b>$1</b>', $input);
 +
    return "<pre class=\"code\">" . $input . "&lt;/pre>";
 +
}
 +
?>
 +
</syntaxhighlight>
  
Going forward, these mix-ins can be maintained to include new USE flags that are created, providing an easy way for people to enable the features they need. I hope you like the new system!
+
[[Category:MediaWiki Hacks]]
{{NewsFooter}}
+

Revision as of 01:05, January 12, 2015

The ConsoleOutput MediaWiki extension was created by Daniel Robbins to provide highlighting of user input for interactive terminal session blocks. To use it, surround user input with <console> opening and closing tags, and put a ##i## input code immediately before user input on each line. This will cause all text from the ##i## point to the end of the line to be in a darker color. The rest of the text will be in a lighter grey, allowing it to be distinguished more easily from user input. Here are other sequences that can be used:

  • ##b## - highlight the rest of the line in bold.
  • ##b## text here ##!b## - highlight the text between both markers in bold.
  • ##i## text here ##!i## - highlight the text between both markers in a darker color.

This extension can be further extended to add color support, as desired, and some of the CSS for color support can already be found in the code below.

Here are a few examples of the ConsoleOutput extension. First this is how you might typically display ls output, with a particular directory highlighted:

www@www-smw ~/public_html $ ls
COPYING  LocalSettings.php     api.php   extensions    index.php   maintenance           redirect.php    skins              thumb_handler.php5
CREDITS  README                api.php5  images         index.php5  mw-config             redirect.php5   tests              wiki.phtml
FAQ      RELEASE-NOTES-1.19    bin       img_auth.php   languages   opensearch_desc.php   redirect.phtml  thumb.php
HISTORY  StartProfiler.sample  cache     img_auth.php5  load.php    opensearch_desc.php5  resources       thumb.php5
INSTALL  UPGRADE               docs      includes       load.php5   profileinfo.php       serialized      thumb_handler.php
www@www-smw ~/public_html $ cd extensions/

And here is how you might display a more detailed example of console output, using colors:

# bluetoothctl 
[NEW] Controller 00:02:72:C9:62:65 antec [default]
[bluetooth]# power on
Changing power on succeeded
[bluetooth]# agent on
Agent registered
[bluetooth]# scan on
Discovery started
[bluetooth]# devices
Device 00:1F:20:3D:1E:75 Logitech K760
[bluetooth]# pair 00:1F:20:3D:1E:75
Attempting to pair with 00:1F:20:3D:1E:75
[CHG] Device 00:1F:20:3D:1E:75 Connected: yes
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[agent] Passkey: 454358
[CHG] Device 00:1F:20:3D:1E:75 Paired: yes
Pairing successful
[CHG] Device 00:1F:20:3D:1E:75 Connected: no
[bluetooth]# connect 00:1F:20:3D:1E:75
Attempting to connect to 00:1F:20:3D:1E:75
[CHG] Device 00:1F:20:3D:1E:75 Connected: yes
Connection successful
[bluetooth]# quit
[DEL] Controller 00:02:72:C9:62:65 antec [default]
#


To install, make the following modifications to your skin:

--- mediawiki-1.19.1/skins/vector/screen.css    2012-06-13 18:22:39.000000000 +0000
+++ public_html/skins/vector/screen.css 2012-08-27 04:34:47.507912892 +0000
@@ -683,10 +683,47 @@
        list-style-image: url(images/bullet-icon.png);
 }
 
-pre {
-       line-height: 1.3em;
+/* ConsoleOutput.php start */
+
+.shell, pre, code, tt, div.mw-geshi {
+        font-size: 12px;
+        font-family: Consolas, 'andale mono','lucida console', monospace;
+}
+
+.shell, pre, div.mw-geshi {
+        background-color: #F8F8FF;
+        line-height: 15px;
+        padding: 10px;
+        border: none;
+        border-top: 2px solid #C6C9E0;
+        border-bottom: 2px solid #C6C9E0;
+        margin: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+}
+
+.code {
+        color: #666;
+}
+
+.code_input {
+        color: #000;
 }
 
+.code_red {
+        color: #f00;
+}
+
+.code_blue {
+        color: #00f;
+}
+
+.shell_green {
+        color: #080;
+}
+
+/* ConsoleOutput.php end */
+
 /* Site Notice (includes notices from CentralNotice extension) */
 #siteNotice {
        font-size: 0.8em;

Then install the following code in your extensions directory and include it with a require_once( "$IP/extensions/ConsoleOutput.php" ); in LocalSettings.php:

<?php
$wgExtensionCredits['validextensionclass'][] = array(
    'name' => 'ConsoleOutput',
    'author' => 'Daniel Robbins',
    'url' => 'https://github.com/danielrobbins/mediawiki-consoleoutput',
    'description' => 'This extension allows you to display colorized console output in mediawiki'
);
 
if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) {
        $wgHooks['ParserFirstCallInit'][] = 'consoleOutputSetup';
} else {
        $wgExtensionFunctions[] = 'consoleOutputSetup';
}
 
function consoleOutputSetup( $data )
{
    global $wgParser;
    $wgParser->setHook('console', 'consoleRender');
    return true;
}
 
function consoleRender($input, $args, $parser)
{
    if (count($args))
    {
        return "<strong class='error'>" .
               "ConsoleOutput: arguments not supported" .
               "</strong>";
    }
 
    # Display < and > as literals, so escape them:

    $input = preg_replace('/>/','&gt;', $input);
    $input = preg_replace('/</','&lt;', $input);
 
    # http://www.perlmonks.org/?node_id=518444
    # See "Matching a pattern that doesn't include another pattern:

    $input = preg_replace('/##i##((?:(?!##!i##).)*)##!i##/','<span class="code_input">$1</span>', $input);
    $input = preg_replace('/##i##(.*)/','<span class="code_input">$1</span>', $input);
    $input = preg_replace('/##b##((?:(?!##!b##).)*)##!b##/','<b>$1</b>', $input);
    $input = preg_replace('/##b##(.*)/','<b>$1</b>', $input);
    return "<pre class=\"code\">" . $input . "&lt;/pre>";
}
?>