---
disqus: ahb0222
GA : G-VF9ZT413CG
---
# R語言使用Shiny結合MathJax製作化學反應計算機
> [color=#40f1ef][name=LHB阿好伯, 2023/06/10][:earth_africa:](https://www.facebook.com/LHB0222/)
###### tags: `R` `Shinny`

[TOC]


# [MathJax](https://www.mathjax.org/)

MathJax是一個開源的JavaScript顯示引擎
專門用於在網頁上顯示數學公式
它支持TeX、LaTeX、MathML和AsciiMath等數學表示法可在所有現代瀏覽器上運行
MathJax提供高質量的數學排版，具有可搜索性、可讀性和可訪問性。
在[Shiny中也支援MathJax](https://shiny.posit.co/r/gallery/widgets/mathjax/)可以生成漂亮的數學方程式

使用[線上LaTeX編輯器](https://www.mathcha.io/editor)可以快速的建立方程式
但只能說用起來是簡單但要搭配Shiny的程式連動真的很容易搞亂
以下範例再看看若有錯誤請見諒XD

library(shiny)

ui <- fluidPage(
  titlePanel("氟離子廢水處理計算器"),
  withMathJax(),
  sidebarLayout(
    sidebarPanel(
      numericInput("volume", "輸入氟廢水的體積 (m^3)", value = 1, min = 0),
      numericInput("fluoride", "輸入氟的濃度 (ppm)", value = 1, min = 0),
      numericInput("cacl2_added", "輸入氯化鈣添加量 (L)", value = 1, min = 0),
      numericInput("cacl2", "輸入氯化鈣濃度 (%)", value = 1, min = 0)
    ),
    mainPanel(
      withMathJax(),
      helpText('$$\\ 2 mol _{氫氟酸(HF)}+ 1 mol_ {氯化鈣(CaCl_2)} \\Rightarrow \\ 1 mol_ {氟化鈣 (CaF_2)} + \\ 2 mol_ {鹽酸 (HCl)}$$'),
      tableOutput("result"),
      tableOutput("mole_ratio"),
      uiOutput("calculation_process")
    )
  )
)

server <- function(input, output) {
  
  calc <- reactive({
    fluoride_mass <- round(input$volume * input$fluoride, 2)
    fluoride_mol <- round(fluoride_mass / 18.99,3)
    cacl2_mass <- round((fluoride_mass / 18.99) * 110.98/2, 2)
    caf2_mass <- round((fluoride_mass / 18.99) * 78.07, 2)
    cacl2_solution <- round(((cacl2_mass / 1000) / (input$cacl2 / 100))/2, 2)
    cacl2_actual_mass <- round(input$cacl2_added * input$cacl2 / 100 * 1000, 2)
    cacl2_actual_mol <- round(cacl2_actual_mass / 110.98,3)
    ca_to_f_ratio <- round(cacl2_actual_mol / fluoride_mol, 2)
    
    list(fluoride_mass = fluoride_mass,
         fluoride_mol = fluoride_mol,    # Add this line
         cacl2_mass = cacl2_mass,
         caf2_mass = caf2_mass,
         cacl2_solution = cacl2_solution,
         cacl2_actual_mass = cacl2_actual_mass,   # Add this line
         cacl2_actual_mol = cacl2_actual_mol,    # Add this line
         ca_to_f_ratio = ca_to_f_ratio)
  })
  
  output$calculation_process <- renderUI({
    str1 <- paste0("$$\\require{cancel} 氟離子的質量 = ",input$volume ,"(體積) m^3 \\times ", input$fluoride,"濃度(ppm)\\frac{mg}{L} \\times \\frac{1000L}{m^3}\\times\\frac{g}{1000 mg} = ",  calc()$fluoride_mass, " g$$")
    str2 <- paste0("$$理論氟化鈣生成量(g) =", calc()$fluoride_mass,"g_{氟離子的質量} \\times \\frac{mol}{18.99 g} \\times \\frac{78.07 (g)}{mol} = ", calc()$caf2_mass, " g$$")
    str3 <- paste0("$$理論氯化鈣添加量(g) = ",calc()$fluoride_mass ,"g_{氟離子的質量} \\times \\frac{mol_{F^{-}}}{18.99 g_{F^{-}}} \\times \\frac{mol_{Ca^{2+}}}{2 mol_{F^{-}}} \\times \\frac{110.98 g}{mol_{CaCl_2}}  = ", calc()$cacl2_mass, " g_{CaCl_2}$$")
    str4 <- paste0("$$理論氯化鈣溶液添加量(L) =",calc()$cacl2_mass ," g_{理論氯化鈣添加量} \\times \\frac{kg_{CaCl_2}}{1000 g_{CaCl_2}} \\times ","氯化鈣溶液濃度 (\\frac{100 L_{CaCl_2溶液}}{",input$cacl2," kg_{CaCl_2溶質} \\times })  = ", calc()$cacl2_solution, " L$$")
    str5 <- paste0("$$實際氯化鈣莫爾數 = ",calc()$cacl2_actual_mass ,"g_{氯化鈣的質量} \\times \\frac{mol_{CaCl_2}}{110.98 g_{CaCl_2}})  = ", calc()$cacl2_actual_mol , " mol_{CaCl_2}$$")
    str6 <- paste0("$$實際氟離子莫爾數 = ",calc()$fluoride_mass ,"g_{氟離子的質量} \\times \\frac{mol_{F-}}{18.99 g_{F-}} =", calc()$fluoride_mol , " mol_{F-}$$")
    str7 <- paste0("$$實際Ca/F莫爾比 = ",calc()$cacl2_actual_mol ,"實際氯化鈣的莫爾數 / ", calc()$fluoride_mol ,"實際氟離子的莫爾數 = ", calc()$ca_to_f_ratio ,"$$")
    withMathJax(
      helpText(str1),
      helpText(str2),
      helpText(str3),
      helpText(str4),
      helpText(str5),
      helpText(str6),
      helpText(str7)
    )
  })
  
  output$result <- renderTable({
    data.frame(名稱 = c("氟離子", "理論氯化鈣", "理論氟化鈣生成量", "理論氯化鈣溶液"),
               質量_g = c(calc()$fluoride_mass, calc()$cacl2_mass, calc()$caf2_mass, NA),
               體積_L = c(NA, NA, NA, calc()$cacl2_solution))
  }, row.names = TRUE)
  
  output$mole_ratio <- renderTable({
    data.frame(莫爾比 = c("實際Ca/F"), 值 = c(calc()$ca_to_f_ratio))
  }, row.names = FALSE)
}

shinyApp(ui = ui, server = server)

# 🌟[測試網站](https://gtgrthrst.shinyapps.io/Hydrofluoric_calculate/)

🌟全文可以至下方連結觀看或是補充

全文分享至

https://www.facebook.com/LHB0222/

https://www.instagram.com/ahb0222/

有疑問想討論的都歡迎於下方留言

喜歡的幫我分享給所有的朋友 \o/

有所錯誤歡迎指教

# [:page_with_curl: 全部文章列表](https://hackmd.io/@LHB-0222/AllWritings)