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
请发表评论