{"action":"created","issue":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/3911","labels_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/3911/labels{/name}","comments_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/3911/comments","events_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/3911/events","html_url":"https://github.com/code-dot-org/code-dot-org/pull/3911","id":105495717,"number":3911,"title":"NetSim: Better send animation","user":{"login":"islemaster","id":1615761,"avatar_url":"https://avatars.githubusercontent.com/u/1615761?v=3","gravatar_id":"","url":"https://api.github.com/users/islemaster","html_url":"https://github.com/islemaster","followers_url":"https://api.github.com/users/islemaster/followers","following_url":"https://api.github.com/users/islemaster/following{/other_user}","gists_url":"https://api.github.com/users/islemaster/gists{/gist_id}","starred_url":"https://api.github.com/users/islemaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/islemaster/subscriptions","organizations_url":"https://api.github.com/users/islemaster/orgs","repos_url":"https://api.github.com/users/islemaster/repos","events_url":"https://api.github.com/users/islemaster/events{/privacy}","received_events_url":"https://api.github.com/users/islemaster/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-09T00:45:58Z","updated_at":"2015-09-09T23:40:17Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/pulls/3911","html_url":"https://github.com/code-dot-org/code-dot-org/pull/3911","diff_url":"https://github.com/code-dot-org/code-dot-org/pull/3911.diff","patch_url":"https://github.com/code-dot-org/code-dot-org/pull/3911.patch"},"body":"Improve the \"send packet\" user experience, especially when using a low client bitrate.\r\n\r\n## Before\r\n\r\n![old-send-animation](https://cloud.githubusercontent.com/assets/1615761/9750601/d7bea48e-564e-11e5-900d-090008f1ef80.gif)\r\n\r\nThe original animation worked by left-truncating the packet binary according to the current send progress, and re-interpreting the whole packet according to the truncated binary.  This had two particularly unfortunate effects:\r\n\r\n1. The message contents appear \"garbled\" while sending because they are being reinterpreted from misaligned binary (notice how it snaps back to a readable representation every eight bits).\r\n2. Since the packet binary is treated as a single field, it \"drains through\" the packet header fields causing those fields to garble and hold unexpected values as well.\r\n\r\n## After\r\n\r\n![even-better-send-animation](https://cloud.githubusercontent.com/assets/1615761/9776813/4f30b54e-5711-11e5-8cf1-27cf5ce38e54.gif)\r\n\r\n\r\nThe new animation has special rules applied to each row and column.\r\n\r\n1. Each encoding is animated away at an appropriate step and rate.  Binary (and the special A/B encoding) still vanishes bit-by-bit as before.  Hex truncates a hex digit for every four bits that animate away.  Decimal and ASCII encodings are truncated at the configured chunk size so that the content is never reinterpreted against misaligned binary, so for ASCII you watch one character vanish for every eight bits.\r\n2. Header fields are sent in sequence, followed by the body.  Content does not 'drain through' fields, but sent fields remain blank so only one column animates at a time.\r\n\r\nThe new style is easier on the eyes, and hopefully less confusing.\r\n\r\nThese changes resolve [Pivotal #100996504](https://www.pivotaltracker.com/story/show/100996504).\r\n\r\n## Another small fix\r\n\r\nIf you look carefully at the \"before\" animation above, there's a blip at the end of the send animation where the second packet is destroyed and a new empty one appears in its place.   We've had some complaint about this moment as it's a bit unnecessarily slow.  In the new version, instead of destroying the last packet we just reset the appropriate fields and re-enable it.  This is a much smoother experience, especially in single-packet levels.\r\n\r\n[Fixes Pivotal #101066784](https://www.pivotaltracker.com/story/show/101066784)\r\n\r\n## Potential Improvements\r\n\r\n- [x] Animate the formatting offsets too (better to see binary chunks complete as characters vanish)\r\n- [ ] Find a way to test this thing"},"comment":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/comments/139073467","html_url":"https://github.com/code-dot-org/code-dot-org/pull/3911#issuecomment-139073467","issue_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/3911","id":139073467,"user":{"login":"islemaster","id":1615761,"avatar_url":"https://avatars.githubusercontent.com/u/1615761?v=3","gravatar_id":"","url":"https://api.github.com/users/islemaster","html_url":"https://github.com/islemaster","followers_url":"https://api.github.com/users/islemaster/followers","following_url":"https://api.github.com/users/islemaster/following{/other_user}","gists_url":"https://api.github.com/users/islemaster/gists{/gist_id}","starred_url":"https://api.github.com/users/islemaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/islemaster/subscriptions","organizations_url":"https://api.github.com/users/islemaster/orgs","repos_url":"https://api.github.com/users/islemaster/repos","events_url":"https://api.github.com/users/islemaster/events{/privacy}","received_events_url":"https://api.github.com/users/islemaster/received_events","type":"User","site_admin":false},"created_at":"2015-09-09T23:40:17Z","updated_at":"2015-09-09T23:40:17Z","body":"Note: Updated description with new animation that includes the animated formatting offsets."}}