You are now in a GitHub source code view - click this link to view the home page <input type=button onclick=window.location.href='https://github.com/jaanga/moving-manuals/'; value='You are now in the home page view - Click this button to view the read me file and the source code' >

Jaanga »

Moving Manuals Read Me

The product assembly manuals of the future - now

Further Considerations ~ Design Notes ~ Dev Notes

---

##Overview

Moving Manuals home page

Screw and Round Nut - Demo - Full Screen - Latest

Poang Rocking Chair - Demo - Full Screen - Latest

Kallax Wall Bracket Basic - Demo - Full Screen - Latest

Kallax NxN Basic - Demo - Full Screen - Latest

This is all still a work-in-progress. In particular: sounds and textures need much effort. If you would like to see a 'prettified' version in the near future, please let us know.

2016-02-28

• All four demos checked, edited and verified to be FF and Edge compatible

Moving Manuals home page

• Initial mock-up

2016-02-27

Screw and Round Nut - Demo - Full Screen - Latest

• Assemble detail with cinema

2016-02-23

Poang Rocking Chair - Demo - Full Screen - R4

• Adds object snap capability while editing/creating
  • No more placing hardware by many trial end error attempts
  • Select three points on existing geometry is now sufficient
  • Utility allows points to be highlighted and by a simple clock on the screen
• Add createClip and step-by-step assembly animation
  • First pass
  • Components move to final assembly positions
  • No intermediate positions showing actual assembly process yet
• All significant requirements met
  • Still a number of minor errors
    • Hardware pointing in wrong direction or misplaced
    • Hardware details need finalizing
  • Still number of details to be added
    • Rails tongues and slots
    • Arm and back lap joint

2016-02-20

Poang Rocking Chair - Demo - Full Screen - R3.4

• Add toggle hardware scale
• Works on Safari & iOS
• Code clean-up
• Full assembly-disassembly tweening

2016-02-08

Poang Rocking Chair - Demo - Full Screen - R3

• Adds first pass at assembly tweening
• Code clean-up
• Three.js r75 fixes

2016-02-04

Poang Rocking Chair - Demo - Full Screen - R2

• Basic Geometry is OK
• Needs better colors and textures
• Geometry needs loosening up/randomizing

2016-01-29

Kallax NxN Basic R7 - Demo - Full Screen

Note: touching items to toggle position on a tablet or phone is currently not working the way it should be. Clicking with mouse is OK. Clicking menu items is OK. Will fix in next release.

• Add shade and shadows
• Add noise texture creation
• Add renderer modifiers
• Add background and more ground
• Add toggle placard visibility
• Add toggle rotate

2016-01-23

NxN

• General clean-up, re-structuring variable names to be easier to read
• Add autoRotate
• Re-structure the per frame data display
• Update camera positions and frame times
• Fix issue with displaying white texture
• Add link to Wall Bracket

Wall Bracket

• Add link to NxN
• Code clean-up
• Re-structure variable names

2016-01-22

Kallax NxN Basic R5 - Demo - Full Screen

• Add hexKey
• Add Screw 1004321 104322
• Add placards to hardware
• Solve some tweening issues

2016-01-21

• More updates
• Looking very much like the scripts are technically complete
• The ongoing work will relate more to cinematography, rendering and parts creation

2016-01-19

Kallax NxN Basic R4 - Demo - Full Screen

• Update with all new tweening looking good - just the play by play to finish up
• But an oops on the Wall bracket needs to be fixed

2016-01-17

Kallax Wall Bracket Basic R12

tweenjs-r1.js

• Now with even better tweening. See:
  • Tween.js Easings R1
  • Tween.js Film Clip R6

2016-01-14

Kallax Wall Bracket Basic R11

mm-tween-r1.js

• Plays clips with tweening

mm-object-r1.js

• Draws various parts and tools

2016-01-02 & 2016-01-01 & 2015-12-29

Kallax Wall Bracket Basic R8

• Phillips screwdriver tip starting to look OK (big learning curve here)
• Ditto Phillips screw head
• Both screw and screwdriver not finished, not even beginning to be finished
• More objects find their positions by algorithm ( rather than by eye )
• Fewer global variables
• Play step-by-step assembly has more detailed film clip
• Adds ability to draw 'pencil lines' - still at an early stage
• Adds new 'Draw Screw position' checkbox and 'film clip'

Coming soon?

• Screwdriver and screw rotating into final position
• Rounde-headed screw and flat blade screwdriver

2015-12-24

Kallax Wall Bracket Basic R7

• Add placards with part ID numbers
• Add beginning of pencil
• Add beginning of screwdriver

2015-12-23

Kallax Wall Bracket Basic R6

• Re-engineered. Components now follow same principles as components in Kallax NxN. Should make life easier

Design Notes

• A start at identifying all the criteria that need satisfying in building an online assembly manual.

2015-12-18

Kallax Wall Bracket Basic R5

• Beginning to add animation/tweening

2015-12-12

Kallax NxN Basic R2 - Demo - Full Screen

• Fixed non-appearance of holes issues

• Updated positions of pegs

• Code clean-up

• Improved scaling of textures

• Worked on sounds

• Coming soon: improved animation sequencing?

• Kallax Wall Bracket Basic R4

• Adds wood screws

  • Includes shiny new draw helix routine

• Coming soon: animation

2015-12-12

Kallax Wall Bracket Basic R2

• Adds screw mask part

2015-12-10

Kallax NxN Basic R1 - Demo - Full Screen

• Creates any Kallax with from 1 to 6 rows and and 1 to 7 columns
• Creates the fixing holes be code
• Creates the screw and peg locations by code
• Creates the assembly positions and sequences by code
• Creates the camera movements by code
• Note: many small bugs remain to be fixed

2015-12-09

Kallax 5x5 Basic R1 - Demo - Full Screen

• Most code in standalone JavaScript file that may be used with all Kallax models
  • Should soon be able to make any Kallax with 1 to n vertical and horizontal divisions
• Basic notion of selecting color and texture added - still very primitive
• Basic notion of click sound added
  • Uses Web Audio

2015-12-08

Kallax 4x1 Basic R1 - Demo - Full Screen

Kallax 4x4 Basic R4 - Demo - Full Screen

2015-12-06

Kallax 4x4 Basic R3 - Demo - Full Screen

2015-12-02

Kallax 4x4 Basic R2 - Demo - Full Screen

2015-12-02

Kallax 4x4 Basic R1 - Demo - Full Screen

2015-12-01

Kallax Wall Bracket Render R1

• Has reflections of the Swedish royal castle
• Slider bar to control the height

Kallax Wall Bracket Basic R1

• Small metal piece for fixing Kallax to wall

2015-11-29

Moving Materials Logo Play R1 - Demo - Full Screen

• Play a step-by-step construction animation

Kallax 2x2 Play R1 - Demo - Full Screen

• Play a step-by-step construction animation
• The order of the steps does not yet follow the Ikea assembly manner order

There is a fun bug right now: Click play and rotate - then click on some of the parts. Lots of action starts to happen!

2015-11-28

Kallax 2x2 Basic R1 - Demo - Full Screen

Kallax 2x2 Opacity R1 - Demo - Full Screen

• Gain X-ray vision

Kallax 2x2 Text to Voice R1 - Demo - Full Screen

• Let me tell you a story

2015-11-27

Moving Materials Logo Basic R1 - Demo - Full Screen

Moving Materials Logo Render R1 - Demo - Full Screen

Sample Web Page / Source Code

<iframe class=ifr src=http://jaanga.github.io/cookbook-html/templates/code-edit-view/code-edit-view-r2.html#http://jaanga.github.io/moving-manuals/mm-logo/mm-logo-basic-r1.html width=100% height=600px ></iframe> ###### _Moving Manuals Basic - Revision 1 - Code Edit View_ / [Edit full screen]( http://jaanga.github.io/cookbook-html/templates/code-edit-view/code-edit-view-r2.html#http://jaanga.github.io/moving-manuals/mm-logo/mm-logo-basic-r1.html )

Concept

Issues / Problems

• Assembly manuals are frequently PDF files with twenty pages or more. Do we really have to download and print them out?
• Assembly manuals need to display text in many languages.
• Assembly manuals must be accessible to people who have difficulty reading text.
• Even with all the drawings there are frequently still places you can't see
• The furniture is 3D but the manuals are only 2D

Mission

• Build many very small scripts - each with different features
• Eventually decide which features to keep and which to discard
• Much easier than trying to build one big app all at once

Vision

• To create manuals that are fun

Things to Do / Road Map

Coming up next

• Front page with text warnings and advice in images
• The screw driver
• The animated assembly sequence for a large object
  • Can you see everything even on a phone screen?

Animation series

• Issue: Reset counter to start with each new replay
• Issue: prevent multiple replays from going on at the same time
• Make time between animation frames adjustable
• Animate multiple pegs/screws moving at once

Kallax

• Send link to customer upon purchase
• Show items in the positions as they are in the box
• Set up so works on phone very nicely
• CCreate multiple rendering scenarios
  • Add real colors
  • Add toon shading
• Add accessories, coordinated products and links to buy
• Add typical things that go on bookcases
• Add room and people and zombies
• Add more realistic screws and pegs
• Show demo functioning in an iframe
• Add animation where components fly in one by one in order
• Add color coding - next item to be installed is highlighted red
• Export as STL file for use in CAD program
• Add exploded view
• Add more fun and lively things

Features

• Zoom, pan and rotate
  • 1 finger / left button = rotate
  • 2 finger / wheel = zoom in and out
  • 3 finger / right button = pan

Issues

Kallax

• Shown in upright position, but should in on ground while being built position
• Shown with screws on top, but they should be on side
• Show with screws partially screwed in. Need better ways of showing final position
• Still missing a number of screw holes
• Still missing wall brackets

Sources

Ikea Kallax 2x2

Ikea Kallax 2x2 Assembly Manual

Notes

Trademarks property of their respective owners.

Apart from sharing a deep delight with putting things together, Jaanga is not in anyway associated with any specific furniture vendor.

---

# ❦