diff --git a/out/css/style.css b/out/css/style.css index bc0502c..9bb0811 100644 --- a/out/css/style.css +++ b/out/css/style.css @@ -116,7 +116,7 @@ button { } .pc .section { - min-height: 20em; + min-height: 25em; max-height: calc(80vh - 8em); min-width: 20%; @@ -220,10 +220,23 @@ th.address { text-align: right; } +.pc input[type=number] { + margin: 0 .5em 0 0; + padding: 0 .25em; + height: 1.5em; + line-height: 1em; +} + /* CONTROLS */ -.pc .controls button{ +.pc .controls button, +.pc .controls .button{ text-transform: none !important; font-weight: 600; + height: 2.5em; + line-height: 1em; + margin: 0; + vertical-align: top; + padding: 0.25em 2em; } .pc .controls > :not(:last-child) { @@ -231,11 +244,13 @@ th.address { } .pc .controls .checker { - display: inline-block; + display: inline-flex; + align-items: center; + padding-left: 3.5em; } .pc .controls .checker label { - display: inline-block; + display: inline; font-size: 0.8em; white-space: initial; white-space: break-spaces; @@ -245,6 +260,8 @@ th.address { vertical-align: middle; line-height: .9em; + margin: 0; + cursor: pointer; } @@ -264,7 +281,7 @@ th.address { color: rgba(0,0,0,0); border-radius: 4px; vertical-align: middle; - margin: 0 .5em .25em -1em; + margin: 0 .5em 0 -1em; line-height: 1.8rem; font-size: 1.4em; @@ -287,12 +304,9 @@ th.address { } .pc .ram input[type=number] { - margin: 0 .5em 0 0; - padding: 1em .25em; background-color: var(--color-table-ram-select); color: var(--color-table-ram-select-text); border-color: var(--color-table-ram-select-border); - height: 2.5em; } .pc .ram input[type=number].instruction { @@ -324,6 +338,27 @@ th.address { width: 100%; } +.pc .cu .input-row { + display: flex; + justify-content: space-between; + align-items: baseline; + margin: 0 0 .5em 0; +} + +.pc .cu .input-row:last-child { + margin: 0; +} + +.pc .cu input { + color: var(--color-cu-text); + border-color: var(--color-cu-text); + background-color: transparent; +} + +.pc .cu label { + display: inline; +} + .pc .cu select{ margin: 0; width: 100%; @@ -339,6 +374,13 @@ th.address { border: 1px solid var(--color-table-cu-select-border); } +/* ALU */ +.pc .alu input { + color: var(--color-alu-text); + border-color: var(--color-alu-text); + background-color: transparent; +} + /* BUSSES */ .pc .databus, @@ -357,6 +399,18 @@ th.address { margin-right: 1em; } +.pc .addressbus input { + color: var(--color-addressbus-text); + border-color: var(--color-addressbus-text); + background-color: var(--color-addressbus); +} + +.pc .databus input { + color: var(--color-databus-text); + border-color: var(--color-databus-text); + background-color: var(--color-databus); +} + .pc .addressbus { margin-bottom: 1em; } diff --git a/out/elm.js b/out/elm.js index 9abf611..6d6a8d0 100644 --- a/out/elm.js +++ b/out/elm.js @@ -5747,6 +5747,108 @@ var $author$project$Main$update = F2( [$author$project$Main$ActNothing])) }), $elm$core$Platform$Cmd$none); + case 'MsgCuInstrRegEdit': + var text = msg.a; + var _v6 = $elm$core$String$toInt(text); + if (_v6.$ === 'Just') { + var _int = _v6.a; + var old_pc = model.pc; + var new_pc = _Utils_update( + old_pc, + {instructionReg: _int}); + return _Utils_Tuple2( + _Utils_update( + model, + {pc: new_pc}), + $elm$core$Platform$Cmd$none); + } else { + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + } + case 'MsgCuProgCounterEdit': + var text = msg.a; + var _v7 = $elm$core$String$toInt(text); + if (_v7.$ === 'Just') { + var _int = _v7.a; + var old_pc = model.pc; + var new_pc = _Utils_update( + old_pc, + {programmCounter: _int}); + return _Utils_Tuple2( + _Utils_update( + model, + {pc: new_pc}), + $elm$core$Platform$Cmd$none); + } else { + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + } + case 'MsgCuUCounterEdit': + var text = msg.a; + var _v8 = $elm$core$String$toInt(text); + if (_v8.$ === 'Just') { + var _int = _v8.a; + var old_pc = model.pc; + var new_pc = _Utils_update( + old_pc, + {uCounter: _int}); + return _Utils_Tuple2( + _Utils_update( + model, + {pc: new_pc}), + $author$project$Main$sendUUpdate('uCycle updated')); + } else { + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + } + case 'MsgEditAddressBus': + var text = msg.a; + var _v9 = $elm$core$String$toInt(text); + if (_v9.$ === 'Just') { + var _int = _v9.a; + var old_pc = model.pc; + var new_pc = _Utils_update( + old_pc, + {addressBus: _int}); + return _Utils_Tuple2( + _Utils_update( + model, + {pc: new_pc}), + $author$project$Main$sendUUpdate('uCycle updated')); + } else { + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + } + case 'MsgEditDataBus': + var text = msg.a; + var _v10 = $elm$core$String$toInt(text); + if (_v10.$ === 'Just') { + var _int = _v10.a; + var old_pc = model.pc; + var new_pc = _Utils_update( + old_pc, + {dataBus: _int}); + return _Utils_Tuple2( + _Utils_update( + model, + {pc: new_pc}), + $elm$core$Platform$Cmd$none); + } else { + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + } + case 'MsgAluEdit': + var text = msg.a; + var _v11 = $elm$core$String$toInt(text); + if (_v11.$ === 'Just') { + var _int = _v11.a; + var old_pc = model.pc; + var new_pc = _Utils_update( + old_pc, + {accumulator: _int}); + return _Utils_Tuple2( + _Utils_update( + model, + {pc: new_pc}), + $elm$core$Platform$Cmd$none); + } else { + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + } default: return _Utils_Tuple2( _Utils_update( @@ -5814,6 +5916,9 @@ var $elm$html$Html$Events$onClick = function (msg) { var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text; var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text; var $elm$html$Html$Attributes$type_ = $elm$html$Html$Attributes$stringProperty('type'); +var $author$project$Main$MsgEditAddressBus = function (a) { + return {$: 'MsgEditAddressBus', a: a}; +}; var $elm$core$String$fromList = _String_fromList; var $author$project$Main$addLeadingZero = F2( function (number, length) { @@ -5868,7 +5973,40 @@ var $author$project$Main$addLeadingZero = F2( _Utils_chr('0'))), num_str) : num_str))))))); }); +var $elm$html$Html$Events$alwaysStop = function (x) { + return _Utils_Tuple2(x, true); +}; +var $elm$virtual_dom$VirtualDom$MayStopPropagation = function (a) { + return {$: 'MayStopPropagation', a: a}; +}; +var $elm$html$Html$Events$stopPropagationOn = F2( + function (event, decoder) { + return A2( + $elm$virtual_dom$VirtualDom$on, + event, + $elm$virtual_dom$VirtualDom$MayStopPropagation(decoder)); + }); +var $elm$json$Json$Decode$field = _Json_decodeField; +var $elm$json$Json$Decode$at = F2( + function (fields, decoder) { + return A3($elm$core$List$foldr, $elm$json$Json$Decode$field, decoder, fields); + }); +var $elm$html$Html$Events$targetValue = A2( + $elm$json$Json$Decode$at, + _List_fromArray( + ['target', 'value']), + $elm$json$Json$Decode$string); +var $elm$html$Html$Events$onInput = function (tagger) { + return A2( + $elm$html$Html$Events$stopPropagationOn, + 'input', + A2( + $elm$json$Json$Decode$map, + $elm$html$Html$Events$alwaysStop, + A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue))); +}; var $elm$html$Html$span = _VirtualDom_node('span'); +var $elm$html$Html$Attributes$value = $elm$html$Html$Attributes$stringProperty('value'); var $author$project$Main$viewAddressBus = function (model) { return A2( $elm$html$Html$div, @@ -5893,11 +6031,22 @@ var $author$project$Main$viewAddressBus = function (model) { _List_Nil, _List_fromArray( [ - $elm$html$Html$text( - A2($author$project$Main$addLeadingZero, model.pc.addressBus, 3)) + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$value( + A2($author$project$Main$addLeadingZero, model.pc.addressBus, 3)), + $elm$html$Html$Events$onInput($author$project$Main$MsgEditAddressBus) + ]), + _List_Nil) ])) ])); }; +var $author$project$Main$MsgAluEdit = function (a) { + return {$: 'MsgAluEdit', a: a}; +}; var $author$project$Main$MsgManualStep = function (a) { return {$: 'MsgManualStep', a: a}; }; @@ -5929,8 +6078,27 @@ var $author$project$Main$viewAlu = function (model) { _List_Nil, _List_fromArray( [ - $elm$html$Html$text( - 'Accumulator: ' + A2($author$project$Main$addLeadingZero, model.pc.accumulator, 8)) + A2( + $elm$html$Html$label, + _List_fromArray( + [ + $elm$html$Html$Attributes$for('alu-accumulator') + ]), + _List_fromArray( + [ + $elm$html$Html$text('Accumulator:') + ])), + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$id('alu-accumulator'), + $elm$html$Html$Attributes$value( + A2($author$project$Main$addLeadingZero, model.pc.accumulator, 8)), + $elm$html$Html$Events$onInput($author$project$Main$MsgAluEdit) + ]), + _List_Nil) ])), A2( $elm$html$Html$div, @@ -5996,6 +6164,15 @@ var $author$project$Main$viewAlu = function (model) { ])) ])); }; +var $author$project$Main$MsgCuInstrRegEdit = function (a) { + return {$: 'MsgCuInstrRegEdit', a: a}; +}; +var $author$project$Main$MsgCuProgCounterEdit = function (a) { + return {$: 'MsgCuProgCounterEdit', a: a}; +}; +var $author$project$Main$MsgCuUCounterEdit = function (a) { + return {$: 'MsgCuUCounterEdit', a: a}; +}; var $elm$html$Html$table = _VirtualDom_node('table'); var $elm$html$Html$th = _VirtualDom_node('th'); var $elm$html$Html$thead = _VirtualDom_node('thead'); @@ -6013,7 +6190,6 @@ var $author$project$Main$MsgCuEditAction = F2( }); var $elm$html$Html$option = _VirtualDom_node('option'); var $elm$html$Html$select = _VirtualDom_node('select'); -var $elm$json$Json$Decode$field = _Json_decodeField; var $author$project$Main$selectCuValueDecoder = A2( $elm$json$Json$Decode$field, 'target', @@ -6166,13 +6342,6 @@ var $author$project$Main$viewCuUCode = function (model) { A2($elm$html$Html$Lazy$lazy, $author$project$Main$viewCuUCodeContent, model) ])); }; -var $author$project$Main$viewInstrEntry = function (i) { - var _v0 = $author$project$Main$seperateInstructionsEntry(i); - var instruction = _v0.a; - var address = _v0.b; - return $elm$html$Html$text( - A2($author$project$Main$addLeadingZero, instruction, 3) + (' ' + A2($author$project$Main$addLeadingZero, address, 5))); -}; var $author$project$Main$viewCu = function (model) { return A2( $elm$html$Html$div, @@ -6263,24 +6432,96 @@ var $author$project$Main$viewCu = function (model) { _List_Nil, _List_fromArray( [ - $elm$html$Html$text( - 'Programm Counter: ' + A2($author$project$Main$addLeadingZero, model.pc.programmCounter, 3)) - ])), - A2( - $elm$html$Html$p, - _List_Nil, - _List_fromArray( - [ - $elm$html$Html$text('Instruction Register: '), - $author$project$Main$viewInstrEntry(model.pc.instructionReg) - ])), - A2( - $elm$html$Html$p, - _List_Nil, - _List_fromArray( - [ - $elm$html$Html$text( - 'µCode Counter: ' + A2($author$project$Main$addLeadingZero, model.pc.uCounter, 4)) + A2( + $elm$html$Html$div, + _List_fromArray( + [ + $elm$html$Html$Attributes$class('input-row') + ]), + _List_fromArray( + [ + A2( + $elm$html$Html$label, + _List_fromArray( + [ + $elm$html$Html$Attributes$for('cu-progcounter') + ]), + _List_fromArray( + [ + $elm$html$Html$text('Programm Counter:') + ])), + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$id('cu-progcounter'), + $elm$html$Html$Attributes$value( + A2($author$project$Main$addLeadingZero, model.pc.programmCounter, 3)), + $elm$html$Html$Events$onInput($author$project$Main$MsgCuProgCounterEdit) + ]), + _List_Nil) + ])), + A2( + $elm$html$Html$div, + _List_fromArray( + [ + $elm$html$Html$Attributes$class('input-row') + ]), + _List_fromArray( + [ + A2( + $elm$html$Html$label, + _List_fromArray( + [ + $elm$html$Html$Attributes$for('cu-instrReg') + ]), + _List_fromArray( + [ + $elm$html$Html$text('Instruction Register:') + ])), + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$id('cu-instrReg'), + $elm$html$Html$Attributes$value( + A2($author$project$Main$addLeadingZero, model.pc.instructionReg, 8)), + $elm$html$Html$Events$onInput($author$project$Main$MsgCuInstrRegEdit) + ]), + _List_Nil) + ])), + A2( + $elm$html$Html$div, + _List_fromArray( + [ + $elm$html$Html$Attributes$class('input-row') + ]), + _List_fromArray( + [ + A2( + $elm$html$Html$label, + _List_fromArray( + [ + $elm$html$Html$Attributes$for('cu-uCounter') + ]), + _List_fromArray( + [ + $elm$html$Html$text('µCode Counter:') + ])), + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$id('cu-uCounter'), + $elm$html$Html$Attributes$value( + A2($author$project$Main$addLeadingZero, model.pc.uCounter, 4)), + $elm$html$Html$Events$onInput($author$project$Main$MsgCuUCounterEdit) + ]), + _List_Nil) + ])) ])), A2( $elm$html$Html$div, @@ -6325,6 +6566,9 @@ var $author$project$Main$viewCu = function (model) { ])) ])); }; +var $author$project$Main$MsgEditDataBus = function (a) { + return {$: 'MsgEditDataBus', a: a}; +}; var $author$project$Main$viewDataBus = function (model) { return A2( $elm$html$Html$div, @@ -6349,8 +6593,16 @@ var $author$project$Main$viewDataBus = function (model) { _List_Nil, _List_fromArray( [ - $elm$html$Html$text( - A2($author$project$Main$addLeadingZero, model.pc.dataBus, 8)) + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$value( + A2($author$project$Main$addLeadingZero, model.pc.dataBus, 8)), + $elm$html$Html$Events$onInput($author$project$Main$MsgEditDataBus) + ]), + _List_Nil) ])) ])); }; @@ -6363,38 +6615,6 @@ var $author$project$Main$MsgRamEditInstr = F2( function (a, b) { return {$: 'MsgRamEditInstr', a: a, b: b}; }); -var $elm$html$Html$Events$alwaysStop = function (x) { - return _Utils_Tuple2(x, true); -}; -var $elm$virtual_dom$VirtualDom$MayStopPropagation = function (a) { - return {$: 'MayStopPropagation', a: a}; -}; -var $elm$html$Html$Events$stopPropagationOn = F2( - function (event, decoder) { - return A2( - $elm$virtual_dom$VirtualDom$on, - event, - $elm$virtual_dom$VirtualDom$MayStopPropagation(decoder)); - }); -var $elm$json$Json$Decode$at = F2( - function (fields, decoder) { - return A3($elm$core$List$foldr, $elm$json$Json$Decode$field, decoder, fields); - }); -var $elm$html$Html$Events$targetValue = A2( - $elm$json$Json$Decode$at, - _List_fromArray( - ['target', 'value']), - $elm$json$Json$Decode$string); -var $elm$html$Html$Events$onInput = function (tagger) { - return A2( - $elm$html$Html$Events$stopPropagationOn, - 'input', - A2( - $elm$json$Json$Decode$map, - $elm$html$Html$Events$alwaysStop, - A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue))); -}; -var $elm$html$Html$Attributes$value = $elm$html$Html$Attributes$stringProperty('value'); var $author$project$Main$viewRamContent = function (model) { var ram2table = function (entry) { var val = entry.b; diff --git a/src/Main.elm b/src/Main.elm index 2d2e1cd..e64fcb6 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -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 + ] [] + ] ]