simonbuxx / logijs Goto Github PK

When you delete a wire with one or more diodes, for example a row of a diode matrix, the diodes aren't restored when undoing the deletion.

There should be a 7-segment display that accepts a changeable amount of inputs that are interpreted as a binary number. This number should then be displayed, e.g. in a 7-segment style.

The Trebuchet MS font isn't available under Linux and possibly other operating systems. Therefore, it should be replaced by another web-safe font or Google font. The 7-segment display's monospace font should also be replaced (looks weird under Linux).

When a sketch contains custom objects with inverted pins, these invertions are saved in the sketch file but not loaded when loading the file or importing it as a custom object itself. This leads to imported objects not working as expected and altered sketches after saving and loading.

With this, users can have multiple speeds in one sketch. Also, the slider could be removed from the top bar, saving space. The speed should be saved in the json files as well and be organized as a class property of the Input class.

Education facilities often don't want to rely on an externally hosted website for their students to use. Therefore, there should be a way to host or to execute LogiJS locally or on a schools/university's server structure. This could be made easier by offering a Docker container instead of a guide to install everything manually.

tbh, the in-editor dialogs look pretty awful at the moment. This isn't helped by the fact that they constist of DOM elements on top of a canvas-drawn background.
For the future, I imagine (draggable ) more html/css-native dialogs (like what https://alertifyjs.com/ does), that are more responsive and better designed.
Also, showing more infos in the custom modules window would be nice.

As in simulator.io, you could easily implement that the connection points on full crossings can be toggled in properties mode. Should work analog to Diode toggleling.

With this feature, it would be possible to correct wrong connections without redrawing the wires.

What I've done so far

Recently, I introduced a mode to change the isTop and label properties of inputs. This can be used to directly determine if an input should be on top of the custom object and what it's label should be.

What's left to do

The mode should also support output labels and colors. Outputs should also appear in the color rgb(50, 100, 50), as inputs do, when they are selected.

Maybe, this mode can be extended to not only change the export settings but also all other settings that are changeable after the object is placed. The same GUI menu could be used to set properties of new object as well (e.g. input count of gates).

PS: If a GUI button is active should be visible without additional text ('ON', 'OFF', etc.) in the future. Maybe with different colors or a new non-DOM GUI.

There should be a tutorial and some examples for new users to explore.

When a diode has less than two wires on it's point, it is deleted. However, undoing this wire removal doesn't restore the diode, as only the wire removal is put on the stack but not the diode removal. The diode removal should also be put on the stack, the support for diode actions (add/delete) is already there.

It could be problematic that, if you just also push the diode action, two undo clicks are necessary to restore one removal because only one action is pulled per click. Just from the state of the stack, it could not be determinded if the diode was automatically or manually deleted. The best thing you could do is to check if the restored diode has a valid amount of wires, whenever a diode removal is restored. If it doesn't, the wire can be restored as well, if the second last action is a wire removal.

When adding wires, LogiJS can detect if elements of the wire are already placed. In that case, these wires aren't drawn on top of each other and only the new segments are added. However, when you draw a wire completely on top of another wire, no segments are added but the action is pushed on the undo stack. This is confusing, as undoing the action has no affect at all. It should be easy to fix by only pushing the action if new segments are added.

I'd like to implement a marketplace where users can publish their sketches for everyone. For this, a published sketch should contain all dependencies. This requires a dependency analysis, an algorithm that goes trough the sketch file and all referenced sketch files until it found all dependencies. When a user saves/edits a marketplace sketch, all dependencies should be saved in his account as well, maybe highlighted as imported files.

When opening LogiJS, there is now a hint area in the bottom left corner. This hints should be extended to include a complete tutorial to LogiJS.

Users should be able to add text labels anywhere on the sketch. They should be editable and deletable.

Idea

Currently, four different lamp colors are implemented (red, green, yellow, blue). However, these can only be changed manually in the sketch file after saving the sketch (line: "colr": "0"). An outputs color should be selectable when inserting it. Red should be the default color.

Difficulty

Colors are already integrated in the backend, it's mainly a GUI problem. There could be an area somewhere on screen where all features of the selected item can be altered.

When marking an area with the selection tool and unmarking it again without dragging it, an undo action gets pushed that has no use. Additionaly, if the area contains objects, the positions of these objects change when you click the undo button.

Since today, moving the selected area can be undone and redone. The only known issue with this is that when you add or delete wire segments after moving, the wires won't move back when undoing adding/deleting and moving. This has to do with how the undo/redo algorithm works and I've no idea how to fix this at the moment. But I'll investigate and fix this as soon as possible with high priority.

The number of buttons in the top bar has to be reduced to save space for lower resolutions. Therefore, the input field and a few of the buttons should be bundled into a dialog.

The site title currently changes to whatever is typed into the input field when clicking load. There should be a check if the file exists before. Also, there should be an error message when a file doesn't exist.

The inverted inputs/outputs arrays have far too many entries. This seems to be a new problem, but isn't effecting the functionality.

There should be a front page that introduces the user to LogiJS, containing a tutorial and examples. This page should directly link to the editor. In the future, a live tutorial could be implemented, explaining basic concepts.

Please write your ideas regarding this broader topic under this issue.

Selected parts of the sketch can be moved and can be copied and deleted in the future. This should be undoable, otherwise, undoing wire operations done before moving, will reset all wires to their old position. Copying and deleting should have undo options as well.

At the moment, all wire segments are drawn individually in edit mode and only grouped to longer wires during simulation. This leads to a bad performance in edit mode and a lot of computation when starting the simulation due to a wire grouping algorithm with bad performance.

Solution

Not keeping every single segment as one object and instead having one object per straight line. With this tactic, straight lines can be displayed much quicker and saved in a fraction of the space the current implementation uses.

Downside

When grouping the lines in edit mode, in- and outputs can't be placed anywhere over a wire but only at the ends or at corners. This should be okay tough.

Complexity

Should be pretty easy to implement but can be tricky because the custom objects code has to be updated and the existing sketch files might break and all have to be redone.

CASE 1: When a user is logged in, the file can easily be saved in the user's folder (scan file for compatibility and Security!).
To set preview image, description and module appearence, the user needs to resave the file after importing. This is hard to avoid because preview images are "screenshots" of the canvas. We should introduce a default picture that tells the user to resave the sketch for preview image.

CASE 2: When the user isn't logged in, there should be a button (probably in the editor itself) to load the file directly into the editor. This shouldn't be too hard, actually. Maybe, we should just go with this option for both cases, this avoids the resaving issue when logged in. You could just import and hit save right away.

When moving parts of larger sketches, un/redoing selection moving sometimes breaks, placing wires at wrong positions. For example, when moving parts of the "cpu" sketch, un/redo breaks sometimes, especially when overlapping two parts.

to have a better organization and to clean up code

This means focusing a bit more on LogiJS as an educational environment.
For example, users should be able to deactivate or limit the use of certain elements.
There should be a way for teachers to generate files that include limitations, tasks / unfinished sketches and feedback of some sort.

All dependencies in the code have to be updated for this.

This happens for example when an input or output is behind a label. In this case, components from both menus are visible.

I started this on a new branch, but there's a lot of work to be done to get this to work. I'm trying this as an alternative to hosting the sketches in our own server infrastructure, which would require a server that runs NodeJS and a complex system to handle accounts and files.

At the moment, there's a Save to Google Drive button, but it can only sync existing JSON files to Google Drive. What we need is either a way to give the created JSON data directly to Google Drive or create the sketch file at a temporary location on the same subdomain and sync it from there. I'm currently exploring both possibilites.

Prebuilt sketches like the traffic light example etc. should also remain accessible, but maybe they could be referenced on an examples page or section of the start page. Hosting sketches in Google Drive and simultainiously having a text edit to just have the option to load prebuilt or local sketches doesn't make any sense, therefore the load/save system would be entirely replaced in favor of the Google Drive solution. The option to load local sketches via /?sketch=... would remain.

There's a button for selecting, but it currently has no functionality. Users should be able to select parts of the sketch to delete, copy or move them. Could be hard.

Fix objects vanishing behind the left edge when zooming out

At the moment, you have to hit escape to get into a mode in that you can invert in- and outputs. This is a default mode where left-clicking only has an effect on the in- and output stubs. To make the software more user friendly, there should be a button to get into this mode. This button could be named "Default" or "Invert In-/Outputs". In the new GUI, an icon and mouseover text could be used instead.

There should be a list of user sketches in the editor so that the user can import his/her own custom objects. Some sort of list on the left side should do the job. As an alternative, there could be a list opening as a pop-up when you're clicking an import button.

When "Sync FPS" is deactivated before starting the simulation, it's still active until it's activated and deactivated again. The same problem occurs when starting the simulation, deactivating "Sync FPS", stopping and then starting again.

Obvious solution: Handling the diodes like the conpoints, not saving the difference (deleted diodes) but the whole diodes array

For compability reasons, users should be able to import LogiFlash XML files and export LogiJS circuits to LogiFlash XML files. LogiFlash is an outdated logic circuit simulator written in Flash.

In some editors, it's possible to not show every individual wire going in and out of registers etc. but summing them to one wire that transfers multiple bits. This can be very hard, espically handling the connections with custom objects and gates. Not a managable problem right now, but maybe in the far future.

In some cases, after making changes to the wires of a sketch, single wires can be buggy and be always high during simulation, independent of their inputs. To fix the wire, it has to be deleted and placed new manually.

Occurs especially when deleting an object and inserting a wire in between the wire ends.

In four-valued logic, in addition to the values high and low, there are values for things like unknown or high-resistance. We could go into that and define a useful set of logic values to implement into LogiJS.

Technically, this would call for changes in the combination logic at multiple points (what happens, when wires of different states connect, etc.) and the introduction of new colors or wire markers. Could be relatively easy to implement, but could also be way more difficult than I imagine at the moment.

When a diode is placed over a connection point, this point gets removed so that it isn't visible behind the diode. When the diode is removed again, the point can be restored on T-crossings but won't appear again in full crossings, making them two separate wires. To fix this, the information that there's a connection point at that position has to be saved somewhere to later restore the point.

This could be implemented when everything else is stable and all other features are implemented. Will probably be very hard but is a nice feature to be able to export files for FPGA tools.

How to trigger: Place 5 four bit registers, selection delete them. Undo, undo 5 times until all objects are deleted. Redo until all are selection deleted. Undo, only 2 objects will reappear instead of 5.

At the moment, LogiJS is only optimized and tested for screens with 1080p and above. At lower resolutions, e.g. 720p, buttons in the GUI may overlap. To fix this, all button sizes should be relative to the resolution or the buttons could be layouted so that they fit in 720p. Also, button widths should be fixed and not determined by the font, like it is now. The canvas itself shouldn't have any issues with lower resolutions.

When redoing a selection delete, only wires are deleted, not objects and conpoints.

The current control elements are standard DOM elements that I quickly added to have functions more accessible. For a final version, the current GUI isn't so nice and could be redone without using DOM elements. It could even be transferred to a new canvas layer to save computing power.

there should be a setting to turn this on and off

Currently, the clock symbol is the same as the switch. This can be irritating and should be changed. Maybe, the clock could even be drawn in a bigger size.