OpenSheetMusicDisplay with Obelisk

osmd-with-jsexception-handling.hs

{-# LANGUAGE DataKinds #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TypeApplications #-}
module Frontend where

import Data.Text (Text)
import qualified Data.Text as T
import Obelisk.Frontend
import Obelisk.Route
import Reflex.Dom.Core

import Common.Api
import Common.Route
import Obelisk.Generated.Static

import Language.Javascript.JSaddle

import Control.Monad.IO.Class


frontend :: Frontend (R FrontendRoute)
frontend = Frontend
  { _frontend_head = do
    el "title" $ text "OSMD Example"
    elAttr "script" ("type" =: "text/javascript" <> "src" =: static @"opensheetmusicdisplay.min.js") blank
  , _frontend_body = prerender blank $ do
    e <- fst <$> el' "div" blank
    newOpenSheetMusicDisplay <- liftJSM $ eval @Text "(function(e) { return new opensheetmusicdisplay['OpenSheetMusicDisplay'](e); })"
    osmdLoad <- liftJSM $ eval @Text "(function(osmd, xml) { osmd['load'](xml); })"
    pb <- getPostBuild
    osmd <- performEvent $ ffor pb $ \_ -> liftJSM $ do
      e' <- toJSVal $ _element_raw e
      osmd <- call newOpenSheetMusicDisplay newOpenSheetMusicDisplay [e']
      a <- toJSVal $ static @"MozartTrio.musicxml"
      call osmdLoad osmdLoad [osmd, a]
      -- The code below is just here to demonstrate how one might catch a JSException. It's not expected to do anything useful.
      liftIO $ putStrLn "About to throw an exception:"
      (call osmdLoad osmdLoad [a, osmd]) `catch` (\(JSException ex) -> liftJSM $ do
        log <- eval @Text "(function(err) { console['log'](err); })"
        call log log [ex])
      liftIO $ putStrLn "If you're reading this, the exception was caught."
      return osmd
    return ()
  }

osmd.hs

{-# LANGUAGE DataKinds #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TypeApplications #-}
module Frontend where

import Data.Text (Text)
import qualified Data.Text as T
import Obelisk.Frontend
import Obelisk.Route
import Reflex.Dom.Core

import Common.Api
import Common.Route
import Obelisk.Generated.Static

import Language.Javascript.JSaddle

-- Built with Obelisk (https://github.com/obsidiansystems/obelisk)
-- You should be able to run 'ob init' and then replace the Frontend.hs file with this file

frontend :: Frontend (R FrontendRoute)
frontend = Frontend
  { _frontend_head = do
    el "title" $ text "OSMD Example"
    -- JS from https://github.com/opensheetmusicdisplay/RawJavascript-usage-example
    elAttr "script" ("type" =: "text/javascript" <> "src" =: static @"opensheetmusicdisplay.min.js") blank
  , _frontend_body = prerender blank $ do
    e <- fst <$> el' "div" blank
    newOpenSheetMusicDisplay <- liftJSM $ eval @Text "(function(e) { return new opensheetmusicdisplay['OpenSheetMusicDisplay'](e); })"
    osmdLoad <- liftJSM $ eval @Text "(function(osmd, xml) { osmd['load'](xml); })"
    pb <- getPostBuild
    osmd <- performEvent $ ffor pb $ \_ -> liftJSM $ do
      e' <- toJSVal $ _element_raw e
      osmd <- call newOpenSheetMusicDisplay newOpenSheetMusicDisplay [e']
      -- Music xml from https://www.musicxml.com/music-in-musicxml/example-set/
      a <- toJSVal $ static @"MozartTrio.musicxml"
      call osmdLoad osmdLoad [osmd, a]
      return osmd
    return ()
  }

Built against obelisk revision be079fe03b16a6171037efef21d666354dbdb1de