Developer Information

Changelog

  • Beta Version 1.0 - 7/12/2021 - currently live - Download

    • Report bugs or unexpected behaviour

    If you find any bugs or something happens during the simulation which doesn't seem to be normal, feel free to contact me
    max.heckmann@rwth-aachen.de

    You want to contribute to the application?

    There are many ways in which the application can be improved or expanded. For example
    I would really appricate, if someone adds further flipflops. The whole range of master-slave
    flipflops is not covered at the current stage of development. If you want to edit something you can download the
    latest version in the changelog. If problems occur, don't hesitate asking me. Nevertheless, I want to
    give you a little overview and some helpful graphics in the following part. It isn't much but
    I'm sure it makes the start easier.

    Adding a new flipflop

    Every new flipflop basically needs four files:
  • x_Flipflop.html
  • x_Flipflop_style.css
  • x_Flipflop.js
  • x_Simulation.svg

    • The html file is quite similar to the already existing html files. I recommend copying one of those
    and just edit the details. It is important to include the stylesheet.css in every new html file.
    If you do so, you have to use the same identifiers for the elements that don't change. The
    elements which change can be designed in the new css you've created. Take a look at the other
    flipflop specific css files. You will see, most of the specific stuff is just positioning
    in the simulation area. Just as the general stylesheet, you should include
    the general js file, called simulation_functions.js. Doing so, you have access to the simulation
    functions of the other flipflops. This is very useful, because all of the flipflops you might want to add are based
    on one which already exists. Last but not least you will need a new svg file, which provides
    all the red and green lines in the simulation. If you want to use the functions that already exist, and you
    sure do, use the same identifiers for the lines which already exist in a diffrent flipflop.
    Once again, I would recommend copying on of the svg files and do the editing there.

    SVG Identifier Mapping

    There are a lot of identifiers in the svg files. In fact, there is one for every line, rectangle
    or circle. In order to not mess things up, I've made graphics which show the diffrent
    identifier and where they belong. Every identifier is mentioned once. For example a huge
    part of the clock controlled rs flipflop is, guess what, the rs flipflop itself. So the graphic
    for the clock controlled rs flipflop doesn't show the identifiers of the rs flipflop.

    RS-Flipflop

    RS Identifier Mapping

    Clcok Controlled RS-Flipflop

    CCRS Identifier Mapping

    D-Flipflop

    D Identifier Mapping

    JK-Flipflop

    D Identifier Mapping

    HTML Template DIV Mapping

    Like I said all the simulation html files are quite similar. The last graphic I wanna share
    with you, shows the general structure of such an html page, especially the different DIVs (container)
    and their IDs.

    DIV Mapping

    One last word

    At the end I wanna warn you. Parts of the code aren't easy to read. Not because they are
    very complicated, but rather because they are not commented well or using misleading variable names.
    This is my first coding project of this magnitude. It is also the first time I've used html, css
    and javascript. There are probably many conventions I ignored because I'm not aware of them.
    Even this documentation is quite uncommon. In fact I wouldn't call it a documentation at all. So I'm sure
    there is a lot that can be improved.