• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

brendena/MathEquationsGoogleSlide: convert latex to img on google slides

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

brendena/MathEquationsGoogleSlide

开源软件地址(OpenSource Url):

https://github.com/brendena/MathEquationsGoogleSlide

开源编程语言(OpenSource Language):

HTML 89.9%

开源软件介绍(OpenSource Introduction):

Project is outdated

This project needed to be rewritten, so i made a new repo with the redesized extension

______________________________

Master Google sheets documents icon

MathEquationsGoogleSlide

Allows you to create beatiful images from layout scripting languages.

Supported Languages

  • Latex
  • AsciiMath
  • MathML

Example UI Layout

How it works

diagram on how it works

Elm version - 0.18

  • Compilling Elm code its compiled to SelectInput.js. Then i use a bash script to convert it to SelectInput.html which i include in index.html

Good Resources on Elm

Index.html

  • css - All css is inside of the index.html page. This is because for the size of the app, it was easier to have it inside of the index.html page then to have it inside of elm. It is inside of the html page because you can't import css style sheets in google extensions. So the styles would need to be in a html page and included with a "google appscript Scriptlets" which would make it impossible to test the app local.
  • MathJax - Elm can't handle normal javascript so all the code that hanldes mathJax has to be handled handled inside of the index.html
  • Canvas'/creating image - There are two canvas. One to display the equation to the user. This is inside of the elm code. Then there is a canvas outside of the elm script. This secondary canvas is used to create a image that you will be send to google app script. This canvas is hidden and is large, so when you convert it to a image it will look sharp on your slide.

Google app script

  • image - the image is send as a blob and this can be easily converted to a image with this Utilities.newBlob(Utilities.base64Decode(blob), MimeType.PNG);
  • reloading images - To reload a equation, so you can edit it you have load it into a saved property. I have a dictonary in the saved property called imageProperties where they key is the ObjectId and the value is a string of the equation. You have to save the information as a saved property because there is no way of storing data inside of the image. There no alternative text section or attribute to put the equation data into so the only way, so saving it inside of saved property was the second best option.
  • savedProperties - i have a seperate file to make using saved propertys easier. I save all the properties into a single key called savedProperties which is also a dictionary which make working with saved data as easy as working with a dictionary object.

Build

Local Development

  • remove any <?!= include('Text'); ?> -index.html
  • make sure <script src="SelectInput.js"></script> is included -index.html
  • elm-make SelectInput.elm --output=SelectInput.js
  • Then you can open the index.html page

Google Extension Development

  • Use this extension to pull the latest code from a github repo
  • add <?!= include('Text'); ?> -index.html
  • remove <script src="SelectInput.js"></script> -index.html

Pushing Code

Local Development

  1. bash ./ElmBuild.bash
  2. git push

Google Extension Development

  1. use this extension and hit the push button.

ToDo

  • Cleaner Error Messages
  • Minify the output of the elm script



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap