Christian/Johnny
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed Styling for Inputs and rearranged sizes

Browse Source
This commit is contained in:
Christian 2020-12-25 19:14:23 +01:00
parent 0c4c97fc2a
commit de10d8968b
3 changed files with 459 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
out/css/style.css
View File

@ -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;
}

338
out/elm.js
View File

@ -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,
$elm$html$Html$div,
_List_fromArray(
[
$elm$html$Html$text('Instruction Register: '),
$author$project$Main$viewInstrEntry(model.pc.instructionReg)
])),
A2(
$elm$html$Html$p,
_List_Nil,
$elm$html$Html$Attributes$class('input-row')
]),
_List_fromArray(
[
$elm$html$Html$text(
'µCode Counter: ' + A2($author$project$Main$addLeadingZero, model.pc.uCounter, 4))
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;

126
src/Main.elm
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
)
[ 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
] []
]
, p []
[ text "Instruction Register: "
, viewInstrEntry model.pc.instructionReg
, 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
] []
]
, p []
[ text
("µCode Counter: "
++ addLeadingZero model.pc.uCounter 4
)
, 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
] []
]
]