famalam 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2bd3085fa8fcb3bf78f3b7f9f431e799db0e1565d40a1c6502f1e5306f619917
-  data.tar.gz: 2d2f4038b3192754fd2f7021c13aecc756d82d5d1861bf2ef1f8f124716adfa4
+  metadata.gz: 15842d54b4123e74f02c913e6075cc9d74bcbd71fdb449883e74cf7c00e3236b
+  data.tar.gz: 89521d9e9c1894ae915b8cd6ac7c071efadd20357a4b62de3c877ab484111738
 SHA512:
-  metadata.gz: b4779f52a32333cff91752a526d74a451c642f83b66e0a78c744eadf39056cf4f035373174d6fd357e3d8960baa543f15b0abe92b1921604737281402310b8b3
-  data.tar.gz: 6e0ea7f5efe9c30a7f9e965e4f1911fcfff9fc89dcecd7ed110b2dd454612e29d71c5ae22f05570723f496bc092eae72688811c31088ab77516850a07dde9ca8
+  metadata.gz: 0e4efdebbd3dd701108b0330a983077bdfac247e1a0946d9e66c91d9240c1064d13091b95856ae6b857cb6f16916a29e41cda954fb5a17ca148aea14512d4d0e
+  data.tar.gz: 932b9e080668bc7c146f2bfff9ed47992ed44ebdd39fa7a54e0a839952a6dee27f3f2683eeb432c46dc4766e3146e10990d260b3de908c7e4dbccf4b68a4f38f

data/README.md

@@ -1,2 +1,5 @@
 # FAMalam
-FAMalam is a front end web interface for FAM
+> FAMalam is a front end web interface for FAM
+
+Still a work in progress, not very responsive.
+![](./screenshot.png)

data/lib/famalam.rb

@@ -1,10 +1,12 @@
+require 'fam'
+require 'haml'
+
 module FAMalam
-  VERSIONS = { :major => 0, :minor => 0, :tiny => 1 }
+  VERSIONS = { :major => 0, :minor => 1, :tiny => 0 }
 
   def self.version *args
     VERSIONS.flatten.select.with_index { |val, i| i.odd? }.join '.'
   end
 end
 
-Dir["#{File.dirname __FILE__}/fam/*.rb"].each    { |f| require f }
-Dir["#{File.dirname __FILE__}/fam/**/*.rb"].each { |f| require f }
+Dir["#{File.dirname __FILE__}/famalam/*.rb"].each    { |f| require f }

data/lib/famalam/patches.rb

@@ -0,0 +1,33 @@
+FAM::Machine::CPU.class_eval do
+  def cpu_output out, ascii
+    ascii == :PLAIN ? out.to_s : out.chr
+  end
+
+  def inject_input i
+    @inject = i
+  end
+
+  def cpu_input
+    @inject || -1
+  end
+
+  def step parsed
+    @parsed = parsed
+    return {:state => 'done'} if @tree_index >= parsed.tree.size || @halted
+    @tree_index += 1
+    node = parsed[@tree_index]
+    if parsed[@tree_index].base_name == 'InNode' && !@rerun
+      @tree_index -= 1
+      @rerun = true
+      return {:state => 'running', :input => true, :output => @outputting}
+    end
+
+    @rerun = false
+    status = execute node
+    if status == :STOP
+      @halted = true
+      return {:state => 'done'}
+    end
+    {:state => 'running', :input => false, :output => @outputting}
+  end
+end

data/public/scripts/graphics.js

@@ -0,0 +1,112 @@
+const pad = (n, width, char) => {
+  char = char || '0';
+  n = n + '';
+  return n.length >= width ? n : new Array(width - n.length + 1).join(char) + n;
+}
+
+const draw_step = (step) => {
+  if (step['ERROR']) {
+    $('#alloc').removeAttr('disabled');
+    return;
+  }
+  $('#alloc').prop('disabled', true);
+  for (let i = 0; i < step['ram'].length; i++) {
+    let elem = $('.address:nth-child(' + (i + 1) + ') > .value')
+    if (elem.html() != '' + step['ram'][i]) {
+      elem.empty();
+      elem.html(step['ram'][i])
+      elem.stop().css({ backgroundColor: '#ffff9c' });
+      elem.animate({ backgroundColor: '#ffffff' }, 3200 / get_clock());
+    }
+  }
+
+  let reg_elem = $('.cpu .registers');
+  reg_elem.empty();
+  for (let i = 0; i < Object.keys(step['registers']).length; i++) {
+    reg_elem.append(
+      `<div class="register">
+        <div class="name">`
+          + Object.keys(step['registers'])[i]
+      + `</div>
+         <div class="value">`
+         + Object.values(step['registers'])[i]
+      + `</div>
+      </div>`);
+  }
+
+  let out_elem = $('.cpu .output');
+  if (step['output'] != '') {
+    out_elem.append(`<div>` + step['output'] + `</div>`);
+    out_elem.animate({ scrollTop: out_elem.prop("scrollHeight")}, 100);
+  }
+}
+
+let get_alloc = () => {
+  return $('#alloc').val() - 0;
+}
+
+draw_ram = () => {
+  let alloc = get_alloc();
+  $('.ram').empty();
+  for (let i = 0; i < get_alloc(); i++) {
+    $('.ram').append(`
+      <div class="address">
+        <div class="number">` + pad(i, 3) + `</div>
+        <div class="value">NULL</div>
+      </div>
+    `);
+    $('.address:nth-child(' + (i + 1) + ') .value').css({
+      width: (500 / alloc) + 'em'
+    });
+    $('.address:nth-child(' + (i + 1) + ') .number').css({
+      width: (200 / alloc) + 'em'
+    });
+  }
+}
+$('#alloc').change(draw_ram);
+
+$(document).ready(() => {
+  // disable inputs
+  $('input[name=input]').prop('disabled', true);
+  // Initiate RAM
+  draw_ram();
+});
+
+// Textbox tab handling
+let tab_level = 0;
+$(document).delegate('#code', 'keydown', function(e) {
+  let tab = "    ";
+
+  let key_code = e.keyCode || e.which;
+  if (key_code == 9 && tab) {  // Tab key
+    let start = this.selectionStart;
+    let end = this.selectionEnd;
+    $(this).val($(this).val().substring(0, start)
+      + tab
+      + $(this).val().substring(end));
+    this.selectionStart = this.selectionEnd = start + tab.length;
+    tab_level++;
+    return false
+  }
+  if (key_code == 13) {  // Autotab on enter
+    let start = this.selectionStart;
+    let end = this.selectionEnd;
+    $(this).val($(this).val().substring(0, start)
+      + "\n"
+      + (new Array(tab.length * tab_level + 1).join(tab))
+      + $(this).val().substring(end));
+    this.selectionStart = this.selectionEnd = 1 + start + tab.length * tab_level;
+    return false;
+  }
+  if (key_code == 8) {  // Backspace key
+    let start = this.selectionStart;
+    let end = this.selectionEnd;
+    if ($(this).val().substring(start, start - tab.length) == tab) {
+      $(this).val($(this).val().substring(0, start-tab.length)
+        + $(this).val().substring(end));
+      this.selectionStart = this.selectionEnd = start - tab.length;
+      if (tab_level > 0) { tab_level--; }
+      return false;
+    }
+  }
+});

data/public/scripts/step.js

@@ -0,0 +1,99 @@
+const get_clock = () => {
+  let c = Math.abs($('input[name=clock]').val() - 0) + 0.001;
+  if (c > 21) {
+    $('input[name=clock]').val("20");
+    get_clock();
+  }
+  return c;
+}
+
+const handle_input = interval => {
+  interval.disable();
+  let input_box = $('input[name=input]')
+  input_box.prop('disabled', false);
+  input_box.focus();
+
+  let input;
+  const wait = () => {
+    console.log('waiting...');
+    if (!input_box.val()) window.setTimeout(wait, 5);
+    else {
+      input = input_box.val();
+      interval.enable();
+      input_box
+        .val('')
+        .attr('placeholder', input)
+        .blur()
+        .prop('disabled', true);
+
+      $.ajax({
+        type: 'POST',
+        url: '/program/input',
+        async: false,
+        data: { input: input + " ...in" },
+        error: (s, e) => {
+          console.log(
+            'An error occured in posting input!\nERROR: ',
+            s, '\n\n', e
+          );
+        }
+      });
+      return;
+    }
+  }
+  wait();
+  input_box.attr('placeholder', '');
+  return input;
+}
+
+class ClockInterval {
+  constructor(f, speed) {
+    this.lambda = f;
+    this.speed = speed;
+    this.interval = null;
+  }
+  enable(speed=this.speed) {
+    this.speed = speed;
+    this.interval = window.setInterval(this.lambda, (1.0 / speed) * 1000);
+  }
+  disable() {
+    window.clearInterval(this.interval);
+  }
+}
+
+
+const stepper = () => {
+  let clock = get_clock();
+  let step_interval;
+
+  const response = () => {
+    let step = {};
+    $.ajax({
+        url: "/program/step.json",
+        async: false,
+        dataType: 'json',
+        success: (data) => {
+            step = data;
+        }
+    });
+    if (step['ERROR'])     step_interval.disable();
+    if (step['inputting']) handle_input(step_interval);
+    return step;
+  }
+
+  const update = () => {
+    let step = response();
+    console.log("Errors: ", step['ERROR']);
+    console.log("Step:   ", step);
+    draw_step(step);
+  }
+
+
+  step_interval = new ClockInterval(update, clock)
+  step_interval.enable();
+  $('input[name=clock]').on("change paste keyup", () => {
+    clock = get_clock();
+    step_interval.disable();
+    step_interval.enable(clock);
+  });
+}

data/public/scripts/submitter.js

@@ -0,0 +1,28 @@
+$(document).ready(() => {
+  let clock = get_clock();
+
+  $('form').submit(() => {
+    $.ajax({
+      type: 'POST',
+      url: '/program',
+      async: false,
+      data: {
+        title: $('input[name=title]').val(),
+        code:  $('textarea[name=code]').val(),
+        alloc: get_alloc(),
+        clock: clock,
+      },
+      error: () => {
+        console.log('Code could not be sent!');
+      },
+      success: (m) => {
+        stepper();
+      }
+    });
+    return false;
+  });
+  $('#submit').click(() => {
+    $('form').submit();
+    return false;
+  });
+})

data/public/styles/cpu.css

@@ -0,0 +1,68 @@
+.cpu {
+  float: left;
+  width: 10em;
+  border: 1px dotted #ccc;
+  border-radius: 4px;
+  padding: 1em;
+}
+
+.cpu .input, .cpu .input input {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+.cpu .CU {
+  width: calc(100% - 8px);
+  padding: 4px;
+  margin: 5px 0;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  min-height: 1em;
+}
+
+.cpu .registers, .cpu .output {
+  margin: 5px 0;
+  padding: 0 3px;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  min-height: 1em;
+}
+.cpu .register {
+  margin: 4px 0;
+  border: 1px solid #e1e1e1;
+  border-radius: 3px;
+  padding: 0;
+  font-family: 'FantasqueSansMonoRegular', monospace;
+}
+.cpu .register .name {
+  display: inline-block;
+  text-align: right;
+  padding: 2px 4px 2px 0;
+  border-right: 1px solid #e1e1e1;
+  width: 2.4em;
+}
+.cpu .register .value {
+  display: inline-block;
+}
+
+.cpu .output {
+  overflow-y: scroll;
+  padding: 0;
+  min-height: 2em;
+  max-height: 4em;
+}
+.cpu .output div {
+  padding: 0 0.5em;
+  font-family: 'FantasqueSansMonoRegular', monospace;
+}
+.cpu .output div:nth-child(2n) {
+  background: #f4f4f4;
+}
+
+.cpu .input input {
+  width: calc(100% - 4px);
+  margin: 5px 0 0 0;
+  padding: 3px 2px;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+}

data/public/styles/master.css

@@ -0,0 +1,29 @@
+@import url('https://fontlibrary.org/face/fantasque-sans-mono');
+@import url('https://fonts.googleapis.com/css?family=Rubik:400,400i,700');
+
+* { outline: none; }
+body, html {
+  padding: 0;
+  margin: 0;
+  overflow-y: hidden;
+  font-size: 16px;
+  font-weight: 400;
+  font-family: 'Rubik', sans-serif;
+  color: #222;
+}
+
+
+#post, .computer {
+  height: calc(100vh - 5rem);
+  margin: 1em;
+}
+
+#post {
+  width: 14em;
+  float: left;
+  padding: 1.5em;
+}
+.computer {
+  width: 44em;
+  float: right;
+}

data/public/styles/ram.css

@@ -0,0 +1,33 @@
+.ram {
+  width: 31em;
+  background: none;
+  padding: 5px;
+  float: right;
+  overflow: auto;
+  text-align: right;
+}
+.address {
+  display: inline-block;
+  background-color: rgba(255, 255, 255, 0.8);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin: 3px 1px;
+  font-size: 0.6em;
+  font-family: 'FantasqueSansMonoRegular', monospace;
+  text-align: center;
+}
+
+.address .value, .address .number {
+  padding: 4px;
+  display: inline-block;
+}
+
+.address .number {
+  float: left;
+  border-right: 1px solid #ccc;
+}
+
+.address .value {
+  border-top-right-radius:    4px;
+  border-bottom-right-radius: 4px;
+}

data/public/styles/submit.css

@@ -0,0 +1,53 @@
+#post {
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+#post input, #post #code, #post select {
+  display: block;
+  margin: 0 0 1em 0;
+  width: 100%;
+  font-family: 'Rubik', sans-serif;
+}
+#post input:last-child {
+  margin: 0;
+}
+#post input[name=title] {
+  border: none;
+  border-bottom: 1px dotted #ccc;
+  font-size: 1.5em;
+}
+
+#post #code {
+  padding: 0.5em;
+  width: calc(100% - 1em);
+  margin: 0 0 1em 0;
+  resize: none;
+  height: calc(100% - 13em);
+  font-family: 'FantasqueSansMonoRegular', monospace;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+}
+
+#post select {
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  background: none;
+}
+
+#post input[type=submit] {
+  background: #fff;
+  color: #333;
+  border-radius: 4px;
+  border: 1px solid #e1e1e1;
+  cursor: pointer;
+  transition: all .1s ease-in-out;
+}
+#post input[type=submit]:active {
+  background: #f3f3f3;
+  border: 1px solid #ccc;
+}
+#post input[type=submit]:hover {
+  background: #f8f8f8;
+}

data/views/index.haml

@@ -0,0 +1,8 @@
+!!!
+%html
+  %head
+    %title FAMalam
+    %link{:rel => 'stylesheet', :type => 'text/css', :href => '/styles/master.css'}
+  %body
+    Create a new program:
+    %a{:href => '/program'} New

data/views/program.haml

@@ -0,0 +1,79 @@
+!!!
+%html
+  %head
+    %title FAMalam
+    %link{:rel => "stylesheet", :type => "text/css", :href => "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"}
+    %link{:rel => "stylesheet", :type => "text/css", :href => "/styles/master.css"}
+    %link{:rel => "stylesheet", :type => "text/css", :href => "/styles/submit.css"}
+    %link{:rel => "stylesheet", :type => "text/css", :href => "/styles/cpu.css"}
+    %link{:rel => "stylesheet", :type => "text/css", :href => "/styles/ram.css"}
+    %script{:type=> "text/javascript", :src => "https://code.jquery.com/jquery-3.3.1.min.js"}
+    %script{:type=> "text/javascript", :src => "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"}
+  %body
+    %form{:id => "post", :action => "/program", :method => "POST"}
+      %input{:type => "text", :autofocus => "", :autocomplete => "off", :name => "title", :placeholder => "Project Title"}
+      %datalist{:id => "tickmarks"}
+        %option{:value => "2", :label => "2"}
+        %option{:value => "4"}
+        %option{:value => "6"}
+        %option{:value => "8"}
+        %option{:value => "10", :label => "10"}
+        %option{:value => "12"}
+        %option{:value => "14"}
+        %option{:value => "16"}
+        %option{:value => "18"}
+        %option{:value => "20", :label => "20"}
+      %input{:type => "range", :name => "clock",
+        :value => "1", :list => "tickmarks",
+        :max => "20", :min => "2", :step => "1"}
+
+
+      %textarea{:name => "code", :id => "code",
+        :autocomplete => "off",
+        :autocorrect => "off",
+        :autocapitalize => "off",
+        :spellcheck => "false"}
+        = preserve do
+          :escaped
+                STORE 55 : @0
+                DATA dyn : 0b01101
+                LOAD -0xf : &DAT
+                LOAD &DAT : &ACC
+
+            LOOP:
+                ADD 1 : &ACC
+                OUT &ACC
+                STORE &ACC : dyn
+
+                MORE &ACC : 29
+                    | GOTO END
+                    | GOTO LOOP
+
+            END: HALT 0
+
+
+
+      %select{:id => "alloc"}
+        %option{:value => "120", :selected => ""}120B
+        %option{:value => "94"}94B
+        %option{:value => "64"}64B
+        %option{:value => "32"}32B
+      %input{:type => "submit", :id => "submit", :value => "Run"}
+
+    .computer
+      .cpu
+        %span Control Unit
+        .CU
+          %span Registers
+          .registers
+        %span Output
+        .output
+        %span Input
+        .input
+          %input{:type => "text",
+            :autofocus => "", :autocomplete => "off",
+            :name => "input", :placeholder => "Enter value"}
+      .ram
+    %script{:type=> "text/javascript", :src => "/scripts/graphics.js"}
+    %script{:type=> "text/javascript", :src => "/scripts/step.js"}
+    %script{:type=> "text/javascript", :src => "/scripts/submitter.js"}

metadata

@@ -1,26 +1,94 @@
 --- !ruby/object:Gem::Specification
 name: famalam
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Demonstrandum
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-13 00:00:00.000000000 Z
-dependencies: []
+date: 2018-04-04 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: fam
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.0.1
+- !ruby/object:Gem::Dependency
+  name: haml
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.4
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.1
 description: FAMalam is a front end web interface for FAM
 email: knutsen@jetspace.co
-executables:
-- famalam
+executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE
 - README.md
-- bin/famalam
 - lib/famalam.rb
+- lib/famalam/patches.rb
+- public/scripts/graphics.js
+- public/scripts/step.js
+- public/scripts/submitter.js
+- public/styles/cpu.css
+- public/styles/master.css
+- public/styles/ram.css
+- public/styles/submit.css
+- views/index.haml
+- views/program.haml
 homepage: https://github.com/Demonstrandum/FAM
 licenses:
 - GPL-2.0

data/bin/famalam

@@ -1 +0,0 @@
-#!/usr/bin/env ruby