geogebra 图形嵌入网页，Hexo文章

已注销
1,922 阅读9分钟

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

geogebra是优秀的数学绘图工具，可以描述数学图像并演示，支持互动，功能强大。本文介绍将geogebra嵌入网页的方法。

需求描述

geogebra的强大功能勾引着我想要在自己的博客里实现演示功能，有一些自己设定的需求：

  • 可以展示我自己设计的geogebra图形；
  • 带有滑块可以互动控制；
  • 可以支持动画自动演示；
  • 不要带其他编辑控件，仅能控制我设计的部分；
  • 可以控制显示的图形按钮；
  • 不依赖geogebra官网，搭建属于自己的服务；
  • 可以方便地在博客/网页中插入、编辑、删除各个演示内容；
  • 不依赖已经分享好的链接，仅依赖实际演示图信息；
  • 速度不能太慢；
  • 演示图形要居中。

调研报告

为满足上述需求我做了几天的调研，网上清楚明白说这个事情的信息很少，而且很杂乱，我把我获取到的信息汇总在这里。

geogebra

  • 官方网站：www.geogebra.org/

  • 当前流行的版本主要是geogebra 5 和 geogebra 6

  • geogebra 5更加经典，可以导出动画，6不支持动画导出

  • 二者可以导出ggb文件和html代码

  • 但是使用官方html代码得到的演示图必须带编辑工具控件，删除会使图形失效

desmos

  • desmos也是类似的数学画板工具，加载很快，嵌入链接分享很方便，使用逻辑和geogebra几乎相同
  • 有一个不得不弃用的问题是导出的演示图不带滑块，无法动态互动

geogebra 图形信息

  • 事实上绘制好的图形信息是有固定格式的
  • 为了唯一确定该信息并在别处引用，我目前了解到四种方法：
    • material_id ： 一些在geogebra官网上的图形有固定的唯一ID，可以将其作为确定内容的标识
    • ggb文件： 直接记录和保存图形信息的文件
    • ggbBase64代码：将图形信息编码成字符串的一种信息保存方式，从信息量来看和ggb文件是等价的
    • 分享链接：可以将编辑好的图形上传到geogebra官网上，官网生成唯一的链接返回来用于分享
  • 四种方式中，分享链接是最方便的，不需要对博客/网页项目进行任何修改，用iframe插入引用控件，直接引入来自官网的图形
  • material_id我还不知道如何获取，了解不多，而且因为这个ID不包含任何内容信息，总有一种不靠谱的感觉
  • 我比较信赖的geogebra图形引用形式还是ggb文件和ggbBase64代码的引用方式
  • 选中别人分享的图形，按下快捷键ctrl + shift + B可以复制该图形的ggbBase64代码

学习资料

目前见到满足我需求最靠谱的站长，在此感谢大神分享，大家有需要也可以去他的站点学习

也是这位大佬，在B站发布的视频教程，很良心

网页嵌入方法

iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

获取geogebra图形的iframe代码
<iframe 
scrolling="no" 
title="布丰投针实验" src="https://www.geogebra.org/material/iframe/id/A25F9Tzs/width/1347/height/598/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" 
width="800px" 
height="400px">
</iframe>
  • 上述代码放在单独的html文件中即可运行

官网js解析ggb文件信息

  • 将画好的图形下载成ggb文件格式
  • 将该文件上传到网络（不允许读取本地的文件），链接必须为http, data, chrome, chrome-extension, chrome-untrusted, https类型之一。
  • 获取文件链接，以我的链接 photos.zywvvd.com/images_matr… 为例
  • 向html文件黏贴代码：
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

<div id="ggbApplet"></div>

<script>
var parameters = {
"id": "ggbApplet",
"width":468,
"height":492,
"showToolBar":true,
"language":"zh",
"filename":"https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb",
};
// is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator DA=Data Analysis, FI=Function Inspector, macro=Macros
var views = {'is3D': 0,'AV': 0,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
var applet = new GGBApplet(parameters, '5.0', views);
window.onload = function() {applet.inject('ggbApplet')};
applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=','https://www.geogebra.org/images/GeoGebra_loading.png','https://www.geogebra.org/images/applet_play.png');
</script>

官网js解析ggbBase64信息

  • 得到如下这段代码，这段代码直接黏贴到一个空的html文件联网即可运行。
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

<div id="ggbApplet"></div>

<script>
var parameters = {
"id": "ggbApplet",
"width":468,
"height":492,
"showToolBar":true,
"language":"zh",
// use this instead of ggbBase64 to load a material from geogebra.org
// "material_id":"RHYH3UQ8",
// use this instead of ggbBase64 to load a .ggb file
// "filename":"myfile.ggb",
"ggbBase64":"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",
};
// is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator DA=Data Analysis, FI=Function Inspector, macro=Macros
var views = {'is3D': 0,'AV': 0,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
var applet = new GGBApplet(parameters, '5.0', views);
window.onload = function() {applet.inject('ggbApplet')};
applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=','https://www.geogebra.org/images/GeoGebra_loading.png','https://www.geogebra.org/images/applet_play.png');
</script>

本地js解析ggbBase64信息

  • 继续按照官方教程行事 wiki.geogebra.org/en/Referenc…
  • 主要在Offline and Self-Hosted Solution这一部分
  • 需要自己下载相关的js文件（deployggb.js和5.0/web3d/）
  • 配置deployggb.js和5.0/web3d/的位置
  • 我将deployggb.js放在了/vvd_js/deployggb.js下；web3d放在了/vvd_js/5.0/web3d/位置
  • 我将deployggb.js放在了/vvd_js/deployggb.js下；web3d放在了/vvd_js/5.0/web3d/位置
  • 我将deployggb.js放在了/vvd_js/deployggb.js下；web3d放在了/vvd_js/5.0/web3d/位置
  • 我将deployggb.js放在了/vvd_js/deployggb.js下；web3d放在了/vvd_js/5.0/web3d/位置

此处建议放在hexo目录的source文件夹中，然后在hexo配置文件中设置skip-render来保存这些js文件，可以兼容所有主题使用

  • 代数区输入公式 y=ax+by=ax+b创建图形
  • 为了让图形居中显示，在调用的div模块上加入style设置style='margin:0 auto'：
  • 综上，在html贴上如下代码：
<script src="/vvd_js/deployggb.js"></script>

<script>
var parameters = {
"id": "ggbApplet",
"width":500,
"height":500,
"showResetIcon":true,
"borderColor":"white",
"language":"en",
"ggbBase64":"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"};
var applet = new GGBApplet(parameters, '5.0');
applet.setHTML5Codebase('/vvd_js/5.0/web3d/');
applet.setHTML5Codebase('/vvd_js/5.0/web3d/');
window.onload = function() {applet.inject('ggbApplet')};
</script>

<div id="ggbApplet" style='margin:0 auto'></div>

本地js解析ggb文件信息

  • 与官网解析ggb文件一样，首先获取ggb文件，将文件上传，获取链接
  • 将上文的ggbBase64替换为filename，附上链接，向网页黏贴代码
<script src="{path to your deployggb.js}"></script>

<script>
var parameters = {
"id": "ggbApplet",
"width":500,
"height":500,
"borderColor":"white",
"language":"en",
"filename":"https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb"};
var applet = new GGBApplet(parameters, '5.0');
applet.setHTML5Codebase('5.0/web3d/');
window.onload = function() {applet.inject('ggbApplet')};
</script>

<div id="ggbApplet"></div>

js解析ggb信息过程中的参数设置

NameValueDescriptionSince
appNameeg "graphing"app name, default: "classic""graphing" ... GeoGebra Graphing Calculator "geometry" ... GeoGebra Geometry "3d" ... GeoGebra 3D Graphing Calculator "classic" ... GeoGebra Classic "suite" ... GeoGebra Calculator Suite "evaluator" ... Equation Editor6.0
widtheg 800Applet width (compulsory field)
heighteg 600Applet height (compulsory field)
material_ideg "RHYH3UQ8"GeoGebra Materials id to load See first applet here: dev.geogebra.org/examples/ht…5.0
filenameeg "myFile.ggb"URL of file to load See second applet here: dev.geogebra.org/examples/ht…4.0
ggbBase64base64 encoded .ggb fileEncoded file to load. See the applet here: dev.geogebra.org/examples/ht…4.0
borderColore.g. #FFFFFF for whiteColor of the border line drawn around the applet panel (as hex rgb string). Default: gray3.0
enableRightClicktrue or falseStates whether right clicks should be handled by the applet. Setting this parameter to "false" disables context menus, properties dialogs and right-click-zooming. Default: true. NB also enables/disables some keyboard shortcuts eg Delete and Ctrl + R (recompute all objects). Default: true3.0
enableLabelDragstrue or falseStates whether labels can be dragged. Default: true3.2
enableShiftDragZoomtrue or falseStates whether the Graphics View(s) should be moveable using Shift + mouse drag (or. Ctrl + mouse drag) or zoomable using Shift + mouse wheel (or Ctrl + mouse wheel). Setting this parameter to "false" disables moving and zooming of the drawing pad. Default: true3.0
showZoomButtonstrue or falseStates whether the zoom in / zoom out / home buttons should be shown in the Graphics View or not. Default: false6.0
errorDialogsActivetrue or falseStates whether error dialogs will be shown if an invalid input is entered (using the Input Bar or JavaScript) Default: true3.2
showMenuBartrue or falseStates whether the menubar of GeoGebra should be shown in the applet. Default: false2.5
showToolBartrue or falseStates whether the toolbar with the construction mode buttons should be shown in the applet. Default: false2.5
showToolBarHelptrue or falseStates whether the toolbar help text right to the toolbar buttons should be shown in the applet3.0
customToolBare.g. 0 1 2 3 , 4 5 6 7Sets the toolbar according to a custom toolbar string where the int values are Toolbar Mode Values, , adds a separator within a menu, `starts a new menu and` adds a separator in the toolbar before starting a new menu. Custom tools are numbered 1001, 1002, etc in GeoGebra 3.2 and 100 001, 100 002, etc from GeoGebra 4.2.5
showAlgebraInputtrue or falseStates whether the algebra input line (with input field, greek letters and command list) should be shown in the applet. Default: false2.5
showResetIcontrue or falseStates whether a small icon (GeoGebra ellipse) should be shown in the upper right corner of the applet. Clicking on this icon resets the applet (i.e. it reloads the file given in the filename parameter). Default: false2.5
languageiso language stringGeoGebra tries to set your local language automatically (if it is available among the supported languages, of course). The default language for unsupported languages is English. If you want to specify a certain language manually, please use this parameter.2.5
countryiso country string, e.g. AT for AustriaThis parameter only makes sense if you use it together with the language parameter.2.5
ideg applet2This parameter allows you to specify the argument passed to the JavaScript function ggbOnInit(), which is called once the applet is fully initialised. This is useful when you have multiple applets on a page - see this example (will have no effect in earlier versions)3.2
allowStyleBartrue or falseDefault: false Determines whether the Style Bar can be shown (or will be shown if just Graphics View 1 is showing)4.0
appletOnLoadeg function(api){ api.evalCommand('Segment((1,2),(3,4))'); }JavaScript method to run when the activity is initialized (and file loaded if applicable)5.0
useBrowserForJStrue or falseWhen true, GeoGebraruns ggbOnInit from HTMLignores ggbOnInit from fileignores JS update scripts of objects in fileWhen false, GeoGebra:ignores ggbOnInit from HTML (use appletOnLoad parameter of GGBApplet instead)runs ggbOnInit from fileruns JS update scripts of objects in fileDefault: false4.0
showLoggingtrue or falseDefault: false Determines whether logging is shown in the Browser's console4.2
capturingThresholdintegerDefault: 3 Determines the sensitivity of object selection. The default value of 3 is usually fine to select and drag objects both with the mouse and touch. Use larger values (e.g. 4 or 5) to make it easier to select and drag objects.4.4
enableFileFeaturestrue or falseDefault: true Determines whether file saving, file loading, sign in and Options > Save settings are enabled. This argument is ignored when menubar is not showing.5.0
perspectivestringFor values see SetPerspective_Command. Just for a blank start ie shouldn't be used with material_id, filename or ggbBase64 parameters5.0
enable3dtrue or false or noneWhether 3D should be enabled (for exam mode). When neither true nor false are entered, user can decide in a dialog.5.0
enableCAStrue or false or noneWhether CAS should be enabled (for exam mode). When neither true nor false are entered, user can decide in a dialog.5.0
algebraInputPositionalgebra, top or bottomDefault: empty Determines whether input bar should be shown in algebra, on top of the applet or under the applet. When left empty, the position depends on file.5.0
preventFocustrue or falseDefault: false. When set to true, this prevents the applet from getting focus automatically at the start.5.0
scaleContainerClassStringName of CSS class that is used as container; applet will scale to fit into the container.5.0
autoHeightboolean• true to restrict the width of the applet and compute height automatically, add autoHeight:true • falseif you want the applet to be restricted by both width and height of the container5.0
allowUpscaletrue or falseDefault: false Determines whether automatic scaling may scale the applet up5.0
playButtontrue or falseDefault: false Determines whether a preview image and a play button should be rendered in place of the applet. Pushing the play button initializes the applet.5.0
scalenumberRatio by which the applet should be scaled (eg. 2 makes the applet 2 times bigger, including all texts and UI elements). Default: 15.0
showAnimationButtontrue or falseWhether animation button should be visible5.0
showFullscreenButtontrue or falseWhether fullscreen button should be visible6.0
showSuggestionButtonstrue or falseWhether suggestion buttons (special points, solve) in Algebra View should be visible6.0
showStartTooltiptrue or falseWhether "Welcome" tooltip should be shown5.0
roundingstringString composed of number of decimal places and flags -- valid flags are "s" for significant digits and "r" for rational numbers. Hence "10" means 10 decimal places, "10s" stands for 10 significant digits.6.0
buttonShadowstrue or falseWhether buttons should have shadow6.0
buttonRoundingNumber (0 - 0.9)Relative radius of button's rounded border. The border radius in pixels is buttonRounding * height /2, where height is the height of the button. Default 0.2.6.0
buttonBorderColorHex color (#RGB, #RGBA, #RRGGBB or #RRGGBBAA)Border color of buttons on the graphics view. Default is black, if the button background is white, otherwise one shade darker than the background color6.0
editorBackgroundColorHex colorBackground color of the evaluator app6.0
editorForegroundColorHex colorForeground (text) color of the equation editor (appname = "evaluator")6.0
textmodefalse], default falsewhether editor is in text mode or not (appname = "evaluator")6.0
keyboardType"normal"|"notes"]Which keyboard is shown for equation editor (appname = "evaluator")6.0

Hexo 稳妥嵌入 geogebra 最佳实践

  • 个人偏好的最佳实践路径：
graph TD
	A[搭建本地geogebra渲染环境] --> B
    B[绘制geogebra图形] -->C{分享方式}
    C --  ggb文件 -->D[获取上传ggb文件链接] --> F[使用filename方式嵌入markdown] 
    C --  ggbBase64代码  -->E[ctrl+shift+B获取代码] --> G[使用ggbBase64方式嵌入markdown]
  • 优点：
  • 自己提供服务，不受官网束缚
  • 使用图形源文件提供展示，安全可靠
  • 可互动，有滑块，可以满足绝大多数展示需求
  • 流程相对简单清晰
  • 加载速度可以接受
  • 手机端可以显示同样效果
  • 环境配好后无缝融入hexo博客环境

参考资料

avatar
文章
阅读
粉丝

友情链接：