Sun Coast Amateur
Radio Club Society

User Tools

Site Tools

You are here: home » blog » 2020-11-08 » geogebra_plugin
blog:2020-11-08:geogebra_plugin

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
blog:2020-11-08:geogebra_plugin [2020/11/08 08:59] – va7fiblog:2020-11-08:geogebra_plugin [2024/11/24 12:38] (current) – va7fi
Line 1: Line 1:
 +====== Geogebra Plugin ======
 +[[https://www.geogebra.org/ |Geogebra]] is a graphing and geometry tool I've been using since my teaching days.  I always found it to be very useful to display concepts that are hard to visualize on a static page.  However, it is a lot more than a simple animation since people can interact with it and move things around.
 +
 +In the past, I had to export Geogbra files to html5 to embed them, but the process was pretty clunky and time consuming. I searched the Dokuwiki plugins but all the ones listed are too old and don't work anymore.  Finally, I created my own using some general instructions for [[https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding |embedding Geogebra files]].  This is my first plugin and a bit of a cheat: I basically took the existing [[https://www.dokuwiki.org/plugin:color |Color plugin]] which is pretty simple, studied it to learn a bit of the syntax and modified it until it did what I needed.  However, there's still a lot of code that I don't really understand and a few features that are missing.
 +
 +Here's what I got so far.  If anyone has experience writing Dokuwiki plugin, please [[[email protected] |reach out]].
 +
 +Here's how to installed it:
 +<hidden>
 +  * Add the following three files in the wiki folder: ''./lib/plugins/ggb2/''
 +  * ''manager.dat''<code>
 +installed=Sun, 08 Nov 2020 08:20:00 -0800</code>
 +  * ''plugin.info.txt''<code>
 +base   ggb2
 +author Patrick Truchon
 +email  [email protected]
 +date   2020-11-08
 +name   geogebra6 syntax plugin
 +desc   Embeds GeoGebra 6 files into Dokuwiki</code>
 +  * ''syntax.php''<code php>
 +<?php
 +/**
 + * Plugin ggb2: Embeds Geogebra files into Dokuwiki.
 + *
 + * @license    GPL 3 (http://www.gnu.org/licenses/gpl.html)
 + * @author     Patrick Truchon <[email protected]>
 + * See: https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding
 + */
 +
 +// must be run within DokuWiki
 +if(!defined('DOKU_INC')) die();
 +if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
 +require_once(DOKU_PLUGIN.'syntax.php');
 +
 +
 +/**
 + * All DokuWiki plugins to extend the parser/rendering mechanism
 + * need to inherit from this class
 + */
 +class syntax_plugin_ggb2 extends DokuWiki_Syntax_Plugin {
 +
 +    function getType(){ return 'substition'; }
 +    function getSort(){ return 306; }
 +    function connectTo($mode) { $this->Lexer->addSpecialPattern('{{ggb>.*?}}',$mode,'plugin_ggb2'); }
 +
 +
 +    /**
 +     * Handle the match
 +     */
 +    function handle($match, $state, $pos, Doku_Handler $handler){
 +        $match = html_entity_decode(substr($match, 6, -2));
 +        list($ggbfile, $index) = explode('|',$match,2);
 +        if (preg_match('/(.*) ([0-9]+,[0-9]+)$/',trim($ggbfile),$matches)) {
 +            $ggbfile = $matches[1];
 +        if (strpos($matches[2],',') !== false) {
 +            list($w, $h) = explode(',',$matches[2],2);
 +            }
 +        else {
 +            $w = '800';
 +            $h = $matches[2];
 +            }
 +            }
 +        else {
 +            $w = '800';
 +            $h = '400';
 +            }
 +
 +        if (!isset($index)) $index = '';
 +        return array($ggbfile, hsc(trim($index)), hsc(trim($w)), hsc(trim($h))); 
 +        }
 +
 +    /**
 +     * Create output
 +     */
 +    function render($mode, Doku_Renderer $renderer, $data) {
 +        list($ggbfile, $index, $w, $h) = $data;
 +        if($mode == 'xhtml'){
 +            $slash = strrpos($ggbfile, "/");
 +            if($slash > 0){
 +               $slash = $slash + 1;
 +               }
 +            $ggbid = substr($ggbfile, $slash, -4);
 +            $renderer->doc .= '<script src="https://www.geogebra.org/apps/deployggb.js"></script>';
 +            $renderer->doc .= '<div id="'.$ggbid.'"></div>';
 +            $renderer->doc .= '<script>';
 +            $renderer->doc .= 'window.addEventListener("load", function() {';
 +            $renderer->doc .= 'new GGBApplet({"width": '.$w.', "height": '.$h.', ';
 +            $renderer->doc .= '"showToolBar": false, "showAlgebraInput": false,';
 +            $renderer->doc .= '"showMenuBar": false, "filename": "/_media/';
 +            $renderer->doc .= "$ggbfile\"},true).inject($ggbid) })";
 +            $renderer->doc .= '</script>';
 +            $renderer->doc .= 'Download <a href="/_media/'.$ggbfile.'">'.$ggbid.'.ggb</a>';
 +            return true;
 +        }
 +        return false;
 +    }
 +}
 +?>
 +</code>
 +</hidden>
 +
 +The syntax is:<code>
 +{{ggb>/path/to/geogebrafile.ggb 740,300}}</code>
 +
 +Note that at the moment, if a path is used, it must use ''/'' instead of '':''.  The default dimensions are 800x400 if they are omitted.
 +
 +Here's an example from one of [[hambasics/sections/wavemodulation#wave_addition |Ham Basics]] pages showing how different waves add and what SWR looks like:
 +
 +===== Wave Addition =====
 +
 +When two waves overlap, they add up together at every point.  Here, the <fc #4682b4>blue</fc> and <fc #008000>green</fc> waves are generated and add up together to form the <fc #ff0000>red</fc> wave.  You can move the blue and green waves and see the result.  To convince yourself that the red wave is really the sum of the blue and green waves, look at points <fc #4682b4>A</fc>, <fc #008000>B</fc>, and <fc #ff0000>C</fc>.  You  can move the blue or green waves by sliding their phase (<fc #4682b4>φ</fc> and <fc #008000>Φ</fc>) around.  You'll see that point <fc #ff0000>C</fc> is always the sum of <fc #4682b4>A</fc> and <fc #008000>B</fc>.
 +
 +{{ggb>/hambasics/sections/waveaddition.ggb 800,500}}
 +
 +
 +Where do the blue and green waves need to be so that...
 +  * the red wave is the biggest?
 +  * the red wave is cancelled out?((Fun fact: This is how [[wp>Active_noise_control |noise cancelling headphones]] work.  The headset has a microphone that picks up the noise, inverts the waves, and plays them back in the ear piece.  The combination of the real life noise and the inverted noise being played in the speaker cancel out (somewhat).))
 +
 +If you press the play button on the bottom left corner, you'll see the blue wave travel to the right and the green wave travel to the left.  The red wave, which is the sum of the forward and reflected waves, oscillates up and down but doesn't travel anywhere, which means it's not going into the antenna.
 +
 +While the animation is running, slowly decrease the amplitude of the reflected wave (<fc #008000>V<sub>B</sub></fc>) and you'll see that the red wave will start moving to the right.  As you do that, notice how the SWR (Standing Wave Ratio) decreases toward 1:1.  At this point, there is no reflected wave and all of the energy is going to the antenna (assuming no loss in the feedline).