Changed Styling for Inputs and rearranged sizes

This commit is contained in:
2020-12-25 19:14:23 +01:00
parent 0c4c97fc2a
commit de10d8968b
3 changed files with 459 additions and 89 deletions

View File

@ -204,6 +204,12 @@ type Msg
| MsgRamAddBelow
| MsgCuEditAction Int String
| MsgCuAddBelow
| MsgCuInstrRegEdit String
| MsgCuUCounterEdit String
| MsgCuProgCounterEdit String
| MsgEditAddressBus String
| MsgEditDataBus String
| MsgAluEdit String
| MsgLocalSessionRecieve String
@ -281,6 +287,59 @@ update msg model =
, Cmd.none
)
MsgCuInstrRegEdit text ->
case String.toInt text of
Just int ->
let old_pc = model.pc
new_pc = { old_pc | instructionReg = int }
in
( { model | pc = new_pc }, Cmd.none )
_ -> ( model, Cmd.none )
MsgCuProgCounterEdit text ->
case String.toInt text of
Just int ->
let old_pc = model.pc
new_pc = { old_pc | programmCounter = int }
in
( { model | pc = new_pc }, Cmd.none )
_ -> ( model, Cmd.none )
MsgCuUCounterEdit text ->
case String.toInt text of
Just int ->
let old_pc = model.pc
new_pc = { old_pc | uCounter = int }
in
( { model | pc = new_pc }, sendUUpdate "uCycle updated" )
_ -> ( model, Cmd.none )
MsgEditAddressBus text ->
case String.toInt text of
Just int ->
let old_pc = model.pc
new_pc = { old_pc | addressBus = int }
in
( { model | pc = new_pc }, sendUUpdate "uCycle updated" )
_ -> ( model, Cmd.none )
MsgEditDataBus text ->
case String.toInt text of
Just int ->
let old_pc = model.pc
new_pc = { old_pc | dataBus = int }
in
( { model | pc = new_pc }, Cmd.none )
_ -> ( model, Cmd.none )
MsgAluEdit text ->
case String.toInt text of
Just int ->
let old_pc = model.pc
new_pc = { old_pc | accumulator = int }
in
( { model | pc = new_pc }, Cmd.none )
_ -> ( model, Cmd.none )
MsgAutoscrollUpdate ->
( { model | autoscroll = not model.autoscroll }
@ -484,20 +543,36 @@ viewCu model =
]
, h1 [ class "header" ] [ text "Control Unit" ]
, p []
[ text
("Programm Counter: "
++ addLeadingZero model.pc.programmCounter 3
)
]
, p []
[ text "Instruction Register: "
, viewInstrEntry model.pc.instructionReg
]
, p []
[ text
("µCode Counter: "
++ addLeadingZero model.pc.uCounter 4
)
[ div [class "input-row"]
[ Html.label [ HAttr.for "cu-progcounter" ] [ text "Programm Counter:" ]
, Html.input
[ HAttr.type_ "number"
, HAttr.id "cu-progcounter"
, value (addLeadingZero model.pc.programmCounter 3)
, onInput MsgCuProgCounterEdit
] []
]
, div [class "input-row"]
[ Html.label [ HAttr.for "cu-instrReg" ] [ text "Instruction Register:" ]
, Html.input
[ HAttr.type_ "number"
, HAttr.id "cu-instrReg"
, value (addLeadingZero model.pc.instructionReg 8)
, onInput MsgCuInstrRegEdit
] []
]
, div [class "input-row"]
[ Html.label [ HAttr.for "cu-uCounter" ] [ text "µCode Counter:" ]
, Html.input
[ HAttr.type_ "number"
, HAttr.id "cu-uCounter"
, value (addLeadingZero model.pc.uCounter 4)
, onInput MsgCuUCounterEdit
] []
]
]
, div [ class "scroller" ]
[ viewCuUCode model
@ -575,7 +650,16 @@ viewAlu : Model -> Html Msg
viewAlu model =
div [ class "section", class "alu" ]
[ h1 [ class "header" ] [ text "ALU" ]
, p [] [ text ("Accumulator: " ++ (addLeadingZero model.pc.accumulator 8)) ]
, p []
[ Html.label [ HAttr.for "alu-accumulator" ] [ text "Accumulator:" ]
, Html.input
[ HAttr.type_ "number"
, HAttr.id "alu-accumulator"
, value (addLeadingZero model.pc.accumulator 8)
, onInput MsgAluEdit
] []
]
, div [ class "arrow", class "up"]
[ div [ class "button" ]
[ Html.a [ onClick (MsgManualStep ActDataBus2Accumulator)] [ text "DB -> ALU" ]]
@ -593,7 +677,13 @@ viewDataBus : Model -> Html Msg
viewDataBus model =
div [ class "databus" ]
[ Html.span [ class "label" ] [ text "Databus" ]
, Html.span [] [ text (addLeadingZero model.pc.dataBus 8) ]
, Html.span []
[ Html.input
[ HAttr.type_ "number"
, value (addLeadingZero model.pc.dataBus 8)
, onInput MsgEditDataBus
] []
]
]
@ -601,7 +691,13 @@ viewAddressBus : Model -> Html Msg
viewAddressBus model =
div [ class "addressbus" ]
[ Html.span [ class "label" ] [ text "Addressbus" ]
, Html.span [] [ text (addLeadingZero model.pc.addressBus 3) ]
, Html.span []
[ Html.input
[ HAttr.type_ "number"
, value (addLeadingZero model.pc.addressBus 3)
, onInput MsgEditAddressBus
] []
]
]