Release v0.1.2 (#2)

Release v0.1.2

CHANGELOG.md

@@ -7,6 +7,78 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.1.2] - 2020-01-19
+
+### Added
+
+- Zoom, between 1 and 50
+- Mini control
+  - It's an area below the render area of the display with buttons such as:
+  - play / pause
+  - single step
+  - speed halving / doubling
+  - zoom increase / decrease
+  - panning
+- Keyboard controls
+  - When the render area is selected, the following keys are active:
+  - Space does play/pause
+  - Enter does a single step
+  - `-` and `+` do zoom decrease and increase (`_` and `=` work too)
+  - `[` and `]` do having and doubling the speed
+  - `{`, `|` and `}` do go to the left end, the right end or the center
+  - The directional arrows move the camera in the given direction by a twelfth
+    of the width or the heigth of the camera
+  - The Home / End / PageUp / PageDown keys move the camera by the full width or heigth of the camera
+  - Note: There is no way to jump to the top for the time being
+- Panning
+  - With mouse
+  - With keyboard arrows
+  - With buttons in the mini control area
+  - -- The possible movement are:
+  - go left / right / up / down, small moves or big (page) moves
+  - go to the left end / the right end / the center / the top
+- Dark mode
+  - By default the application is in dark mode. It can be set to light mode
+    using the "App Theme" selector, in the "Application Config" section, at the bottom.
+- Application theme
+  - Besides the light / drak mode, the primary color of the application can be
+    chosen among 8 options (5 in dark mode, 3 in light mode)
+  - By default, the display theme follows the application theme, but it can be
+    set to its own theme using the "Display Theme" selector
+
+### Changed
+
+- Speed
+  - High limit raised from 99 to 999
+  - Low limit raised from 0 to 1
+- Border behaviour
+  - The border now copies the state from the other side of the cellular space,
+    making the state space (state band) a closed loop
+- Layout
+  - The display is now at the top
+- Position (temporal)
+  - Limit raised form 9_999 to 99_999
+  - The field is now disabled while the automaton is playing
+  - The field no longer starts erroring when the position goes above the limit
+    while playing
+- Rule number
+  - The rule number is now shown in more places than before
+- Improved the application layout for phones
+
+## [v0.1.1] - 2020-01-05
+
+### Added
+
+- Version info
+  - the version is displayed at the top right
+- Github link
+  - the link to the source code repository is present at the top right of the
+    page
+
+### Changed
+
+- Improved layout and contrasts
+
 ## [v0.1.0] - 2020-01-05
 
 ### Added

README.md

@@ -12,8 +12,9 @@ The first version of Cellexp has been [deployed to Now.sh](https://cellexp.now.s
 
 - [ECAX](https://www.xanxys.net/ecax/) - Zoom, Navigation, Compute-on-demand
 - [ECA Canvas](http://www.cs.swan.ac.uk/~csandy/research/play/ca/) - Size, Border, Random
+- [ECA EmergentMind](http://www.emergentmind.com/elementary-cellular-automata) - Zoom, Board of 256 rules
 - [Celldemo](http://devinacker.github.io/celldemo/) - Autoscrolling, Impuse, Random proportion,
-- [WoflramAlpha](https://www.wolframalpha.com/input/?i=rule+110) - Description (symétries, propriétés, classe), Propagation differentielle
+- [WolframAlpha](https://www.wolframalpha.com/input/?i=rule+110) - Description (symétries, propriétés, classe), Propagation differentielle
 
 ## Study and roadmap
 

contribute/commit-word-list.md

@@ -31,6 +31,7 @@ This files lists domain and verbs to use in commits. See the [commit format desc
   - editor -- rule editor
   - control -- simulation configurator
 - util
+- www
 
 ## verbe
 
@@ -64,6 +65,7 @@ This files lists domain and verbs to use in commits. See the [commit format desc
 - rename
 - reordre
 - restructure
+- simplify
 
 ### documentation verbs
 
@@ -88,5 +90,5 @@ This files lists domain and verbs to use in commits. See the [commit format desc
 - `&` feature
 - `$` quantified / measured
 - `@` inside
-- `!`, `%`, `^`, `*`, `_`, `=`
-- `;`, `:`, `\`, `|`, `,`, `.`, `/`, `?`
+- `%`, `^`, `*`, `_`, `=`
+- `:`, `\`, `|`, `,`, `.`, `/`, `?`

doc-project-fr/etude/fonctionnalite.md

@@ -58,6 +58,18 @@ Les fonctionnalités (**Fca-size**), (**Fca-border**) et (**Fca-theme**) sont co
 - Paramétrage du comportement de l'afficheur et de l'automate cellulaire lors du redimensionnement de l'affichage (**Fnav-custom-resize**).
 - Le zoom de l'affichage peut être modifier par l'utilisateur et afficher plus d'une cellule par pixel (**Fnav-zoom**).
 
+#### Propagation de l'information et intervention sur le ruban
+
+Le calculateur-afficheur permet d'observer comment l'information se propage au
+sein de l'automate cellulaire. En pratique, il est possible de mettre en couleur
+l'ensemble des cellules qui seraient affectés par le changement de l'état d'une
+des cellules du ruban (**Fshow-propagation**).
+
+Une fonctionnalité voisine est la possibilité d'intervenir et de modifier l'état
+de l'automate cellulaire à un instant donné. Cette intervention n'ayant aucune
+cause à l'interieur de l'univers de l'automate, il est pertinent de la qualifier
+de "divine" (**Fca-divine-intervention**).
+
 #### Minimap
 
 Une carte de l'ensemble des cellules actives (calculées) de l'automate cellulaire est affichée dans l'un des coins du calculateur-afficheur (**Fminimap**). Cette carte permet d'afficher la taille de la partie visible de l'automate cellulaire, comparée à celle de l'automate complet.

doc-projet-en/design/navigation-panning.md

@@ -0,0 +1,42 @@
+## Navigation Panning Design
+
+This will require the following:
+
+- A Keyboard manager
+
+  - Can be set to use either key or code, not both
+  - ~~Refuse to subscribe two events on the same handle~~
+    - ~~Allow the second function only if it mentions the first one,
+      and tell in what order they should be executed
+      "`next()`"~~
+      - No this just sucks. Let's just accept to re-engineer the application.
+  - Can be discarded
+  - -> Reuse the keyboard manager of JsTetris? (jst.acq.js)
+    - Re-reading it will be sufficient
+
+- A Mouse manager
+  - Exposes a click subscription interface
+  - Exposes a drag / drop subscription interface
+  - Adds / removes mousemove listener on mousedown / mouseup
+    - Record the position of the mouse on mousedown (offsetX, offsetY)
+    - Forwards mousemove information to the subscriber
+
+### Keyboard manager
+
+#### Todo
+
+- ~~Disable keys that cannot be used [20 min]~~
+- ~~Move key logic to display.tsx, and use the hub to send events [40 min]~~
+  - ~~Prevent logic from moving generation below 0 [5 min - included -- not timed]
+- Adding a file in `display/` which does binding of the keyboard keys between the manager and the hub [30 min]
+- Reconfigure now.sh to have a shorter address for :develop builds
+
+#### Design
+
+- Hook keydown on the right element
+- Allow to subscribe a function to a keypress
+- Allow to subscribe two functions to the keydown and the keyup events
+
+(no: Allow to query the state of any key)
+
+- Allow to remove a subscription

doc-projet-en/specification/navigation.md

@@ -0,0 +1,62 @@
+## CellExp Navigation Specification
+
+## Panning
+
+The panning feature can be served via an **inorganic**, numeric interface, allowing to enter the location to display. While such an interface handles well the needs of precision panning, and fast remote access, it is also slow to use and attention-demanding.
+
+There are some cases where it's nice to be able to pan around without having to
+select a field and type in it. We expect that more than 50% of these cases can
+be served by allowing to click-and-pan (click and drag), moving the image to
+follow the pointer. Some more cases can be served with the keyboard arrows, or
+alternatively, on phone, with panning arrow buttons, placed near the display,
+probably at it's top. These kind of interfaces can be labelled of **organic**
+for their greater ease of use, eventhough their possibilities are more limited.
+
+### Panning Specification
+
+#### Inorganic panning
+
+It is possible to set the currently displayed location via text fields. This
+corresponds to the features (**Fconfig-post-t** and **Fconfig-post-x**, defined
+in `doc-project-fr/etude/fonctionnalite.md`).
+
+#### Drag to pan
+
+The feature is described above. The image is moved to follow the pointer or the
+finger while the mouse is clicked or while the finger is held down
+(**Fnav-pan-drag**).
+
+#### Arrow navigation
+
+Support the following arrows for horizontal movement (**Fnav-pan-horiz**):
+
+- `<`, `>`, [ArrowLeft, ArrowRight] to perform small moves toward the left or
+  right.
+- `<<`, `>>`, [Home, End], to go to the left end and right end of the ribbon.
+  These arrows are disabled if the ribbon doesn't have a border in the direction
+  of the arrow.
+- `::` (no keyboard key) to go to the center, for ribbons which have borders
+  on both sides.
+- `⬵`, `⤁` (no keyboard key) to move by left or right by one whole display
+  size.
+
+Support the following arrows for vertical movement (**Fnav-pan-vert**):
+
+- `^`, `v`, [ArrowUp, ArrowDown] to perform small moves up or down.
+- `⇞`, `⇟`, [PageUp, PageDown] to move up or down by one whole display size.
+- `⏏` (no keyboard key) to go back to the top of the simulation
+
+Note about `<`, `>`, `⬵`, and `⤁`: Over ribbons that have borders, it's not possible to go past the borders.
+
+Note about `^` and `⇞`: Going up past the beginning is not possible: `posT` doesn't go below 0.
+
+Credit to Xahlee's work on [Unicode Arrows](http://xahlee.info/comp/unicode_arrows.html).
+
+#### Panning and autoscrolling (playing)
+
+While play is on, **Fnav-pan-drag-vert** will be disabled, while **Fnav-pan-drag-horiz** is still usable.
+
+Using any horizontal arrow will be possible and will have the expected
+horizontal move effect.
+
+Using any vertical arrow will be possible and will stop autoscrolling and have the expected vertical move effect.

doc-projet-en/specification/thinking-navigation.md

@@ -0,0 +1,47 @@
+## Cellexp Specification Thinking Draft for navigation
+
+## Panning
+
+Options :
+
+- Drag and drop on the display
+  - Add inertia
+  - Drag and drop but accelerated (acceleration factor)
+- Arrows on the sides of the display
+  - Arrows inside the rendering area
+  - Arrows outside the rendering area
+- Scroll bars
+- Minimap?
+- Keyboard arrows
+
+There seem to be few useable options among the above:
+
+- Drag and drop
+- Keyboard arrows
+
+### Keyboard keys
+
+- Use up the keyboard keys
+- Probably use up the `home` and `end` keys too
+- Requires the user to try using them to discover the feature
+- New behaviour than when a text field is selected, so it'd be better to limit
+  them to when the display component is selected (/ focused ~)
+- Allows going from one border to the other (`home` / `end`)
+- Allows precise fast navigation
+- **Unavailable on phones**
+
+### Drag and drop panning
+
+- Use up the mouse or touchscreen
+  - But **Fshow-propagation** and **Fca-divine-intervention** also require it
+- Slow to navigate large distances, such as to go from one border to the other
+  - Maybe add a minimap? Maybe propose a "scroll anywhere" mode or a "click to jump" mode
+    - Problems with the minimap, with the "click to jump" behavior for infinit maps
+    - Let's only implement a "scroll anywhere" mode
+    - Problem with the "scroll anywhere" mode: when the map is big, it becomes
+      unprecise.
+- User needs to click in the display to discover the feature
+
+What about panning arrows at the top of the display?
+
+-- Stop

doc-projet-en/time.md

@@ -0,0 +1,18 @@
+# Time tracking
+
+## Keyboard binding
+
+Time estimate: 4h
+2020-01-15T22:34+01 -> 2020-01-15T23:06+01 :: writing `display/keyboardManager.ts`
+2020-01-15T23:06+01 -> 2020-01-16T00:09+01 :: moving arrows and centering them (2x the expected time)
+2020-01-16T00:09+01 -> 2020-01-16T00:22+01 :: moving the display block to the top (.7x the expected time)
+2020-01-16T00:23+01 -> 2020-01-16T00:30+01 :: changing the button symbols (.7x the expected time)
+2020-01-16T07:13+01 -> 2020-01-16T07:45+01 :: disabling arrow that cannot be used (1.5x the expected time)
+2020-01-16T18:35+01 -> 2020-01-16T18:51+01 :: add a context for accessing the display (1.1x)
+2020-01-16T18:51+01 => 2020-01-16T19:22+01 :
+2020-01-16T19:53+01 => 2020-01-16T21:18+01 :
+: Move key logic to display.tsx (3x -- 1h50 instead of 40min)
+2020-01-16T21:55+01 -> () :: Keyboard binding (~1x ?)
+
+Total: 5h10!
+The estimate was rather decent!

doc-projet-en/timeAdder.py

@@ -0,0 +1,40 @@
+from datetime import datetime
+import sys
+
+def eprint(*a, **kw):
+   print(*a, file=sys.stderr, **kw)
+
+book = []
+
+with open("time.md") as f:
+   it = iter(f)
+   for line in it:
+      if line == f"## {sys.argv[1]}\n":
+         break
+   for line in it:
+      if line.startswith("## "):
+         break
+      if line.startswith("2020") and "> 2020" in line:
+         book.append(line)
+
+print(f"{len(book)=}")
+
+total = 0
+
+for line in book:
+   sep = " -> "
+   if sep not in line:
+      sep = " => "
+   if sep not in line:
+      eprint(f"WARNING, with line [{line}]")
+      continue
+   a, bc = line.split(sep)
+   b, cc = bc.split(" :")
+   da = datetime.fromisoformat(a.split("+")[0])
+   db = datetime.fromisoformat(b.split("+")[0])
+   delta = db - da
+   print(f"{dir(delta)=}")
+   total += delta.total_seconds()
+
+print(f"{total=}")
+print(f"{total//60=}")

package.json

@@ -1,6 +1,6 @@
 {
    "name": "cellular-automaton-explorer-1d",
-   "version": "0.1.1",
+   "version": "0.1.2",
    "description": "Unidimensional cellular automaton explorer to highlight their unique properties",
    "repository": "[email protected]:mathieucaroff/cellular-automaton-explorer-1d.git",
    "author": "Mathieu CAROFF <[email protected]>",

parcel.cmd

@@ -1 +1,2 @@
-yarn parcel .\src\www\page.html
+#!/bin/bash
+yarn parcel ./src/www/page.html