Add cache range view

README.md

@@ -0,0 +1,32 @@
+# CacheSim
+CacheSim is an Elm-based website to simulate various cache hierarchy configurations. It supports
+fully associative, direct mapped, and n-way set associative caches.
+
+## Building and Hosting
+CacheSim is entirely a front-end project. As long as the HTML, CSS, and generated JavaScript
+are hosted somewhere, it will work.
+
+CacheSim is built using Elm and Sass. As such, you will need the compilers for the two
+languages. On Arch Linux, this means `sassc` for Sass, and `elm-platform-bin` (from AUR).
+On other platforms, you can use npm:
+
+```
+npm install -g elm sass
+```
+
+Now, to build the project, you can use the following commands:
+```
+mkdir -p static/js
+mkdir -p static/css
+sassc static/scss/style.scss static/css/style.css
+elm make src/Main.elm --output=static/js/elm.js --optimize
+```
+Replace `sassc` with `sass` in the third command if you installed Sass from npm.
+
+Now, the `index.html` file and everything in the `static` folder can be safely copied
+into any directory exposed by a web server. I use my university `public_html` folder.
+Below are the _SFTP commands_ I use to upload a fresh copy of the project:
+```
+put index.html public_html/ECE472/index.html
+put -r static public_html/ECE472/static
+```

src/CacheSim/Model.elm

@@ -17,5 +17,6 @@ type Msg
     | UseHierarchy (Maybe CacheModelHierarchy)
     | Access (List Int)
     | ChangeAccessInput String
+    | AccessViewCancel
     | AccessViewForward
     | AccessViewBack

src/CacheSim/Update.elm

@@ -60,6 +60,14 @@ updateAccess li m =
     in
         (newModel, cmd)
 
+updateAccessViewCancel : Model -> (Model, Cmd Msg)
+updateAccessViewCancel m =
+    let
+        newModel = { m | accessView = Nothing }
+        cmd = Cmd.none
+    in
+        (newModel, cmd)
+
 updateAccessViewForward : Model -> (Model, Cmd Msg)
 updateAccessViewForward m =
     let

src/CacheSim/View.elm

@@ -22,6 +22,9 @@ disabledButton attrs = button (attrs ++ [ disabled True ])
 dangerButton : String -> Msg -> Html Msg
 dangerButton s m = button [ onClick m, class "btn-danger" ] s
 
+infoButton : String -> Msg -> Html Msg
+infoButton s m = button [ onClick m, class "btn-info" ] s
+
 primaryButton : String -> Msg -> Html Msg
 primaryButton s m = button [ onClick m, class "btn-primary" ] s
 
@@ -39,7 +42,10 @@ resultButton = maybeButton << Result.toMaybe
 
 -- Button wrapper (button group)
 buttonWrapper : List (Html Msg) -> Html Msg
-buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True) ] ]
+buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True), ("mr-3", True) ] ]
+
+buttonToolbar : List (List (Html Msg)) -> Html Msg
+buttonToolbar ll = div [ class "btn-toolbar" ] <| List.map buttonWrapper ll
 
 -- Input with a label
 labeledInput : String -> String -> (String -> Msg) -> Html Msg
@@ -102,8 +108,8 @@ viewRawCacheModelHierarchy rcmh =
                 Ok _ -> viewError True ""
                 Err e -> viewError False e
         
-        newButton = primaryButton "Add level" CreateRawModel
+        newButton = infoButton "Add level" CreateRawModel
-        useButton = resultButton checkedResult [ class "btn-primary" ] "Start simulation" (UseHierarchy << Just) 
+        useButton = resultButton checkedResult [ class "btn-info" ] "Start simulation" (UseHierarchy << Just) 
     in
         div []
             [ h2 [] [ text "Cache hierarchy" ]
@@ -131,7 +137,10 @@ viewCache level (cm, cs) =
                 slotHtml s =
                     case s of
                         Empty -> td [] [ text "" ]
-                        Used l a -> td [] [ text <| String.fromInt a ]
+                        Used l a -> td [] [ text <|
+                            (String.fromInt (a * cm.blockSize * 4)) ++
+                                "-" ++
+                                (String.fromInt ((a + 1) * cm.blockSize * 4 - 1)) ]
             in
                 List.map slotHtml set
         cacheRow = List.concat <| List.map setRow cs
@@ -163,9 +172,9 @@ viewAccessView m av =
     div []
         [ h2 [] [ text "Access Simulation" ]
         , p [] [ text ("Simulating access of address " ++ String.fromInt av.blockAddr) ]
-        , buttonWrapper
+        , buttonToolbar
-            [ primaryButton "Back" AccessViewBack
+            [ [ infoButton "Back" AccessViewBack, infoButton "Forward" AccessViewForward ]
-            , primaryButton "Forward" AccessViewForward
+            , [ dangerButton "Stop" AccessViewCancel ]
             ]
         , h3 [] [ text "Access event log" ]
         , viewAccessLog av
@@ -216,12 +225,12 @@ viewAccessInput m =
             case parseResult of
                 Ok is -> if is == [] then Err "Please enter at least one number." else Ok is
                 Err e -> Err <| parseErrorToString e
-        accessButton = resultButton checkedResult [ class "btn-primary" ] "Access address" Access
+        accessButton = resultButton checkedResult [ class "btn-info" ] "Access address" Access
         errorHtml =
             case checkedResult of
                 Ok _ -> viewError True ""
                 Err e -> viewError False e
-        editHierarchyButton = secondaryButton "Edit hierarchy" (UseHierarchy Nothing)
+        editHierarchyButton = button [ onClick (UseHierarchy Nothing), class "btn-dark" ] "Edit hierarchy"
     in
         div []
             [ h2 [] [ text "Run access simulation" ]

src/Main.elm

@@ -35,6 +35,7 @@ update msg m =
         UseHierarchy cmh -> updateUseHierarchy cmh m
         Access i -> updateAccess i m
         ChangeAccessInput s -> ({ m | accessInput = s }, Cmd.none)
+        AccessViewCancel -> updateAccessViewCancel m
         AccessViewForward -> updateAccessViewForward m
         AccessViewBack -> updateAccessViewBack m
 

static/scss/style.scss

@@ -1,3 +1,7 @@
 .btn-group {
     width: min-content;
 }
+
+.btn:focus {
+    box-shadow: none;
+}