Add "All pieces of the puzzle"

[VillageHubertChen]

Introduction

The idea

With this new chapter we want to express two messages:

1. Our target is to make V² Modular PC Mainstream
2. That we deliver everything that is needed to reach this goal

   Metaphor

We deliver all pieces of the puzzle. Represented by a Jigsaw puzzle, in which each peace represents on of the 9 sections of our Home Page. Accordingly we have rewritten the Home Page, so that each section now represents one pieces of the puzzle to reach the goal. → #20

Implementation Details

Headings and copy

• H2: Delivering all pieces of the puzzle
• p: V² is much more than "The Missing Standard" for Mini and All-In-One Computer. Hover (tab) the puzzle pieces to explore how each contributes to the whole.
• Puzzle: See below

  [HC] Details on designing the Puzzle with Inkscape

• base it on the rpaid prototype SVG. It worked well.
• Resize page size to drawing
• size is good
• Use Font: Roboto Light
• Draw final puzzle shapes
• Fill shapes with final colors
• Save as "Optimized SVG", options as in Video

  Coding examples on how to implement a SVG Map with tooltips and highlight on hover

• https://www.youtube.com/watch?v=2TM63ing6jY
• http://www.petercollingridge.co.uk/data-visualisation/interactive-svg-map
• http://www.petercollingridge.co.uk/book/export/html/437
• http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
• http://www.petercollingridge.co.uk/data-visualisation/introduction-svg-scripting-interactive-map
• http://www.petercollingridge.co.uk/interactive-svg-components/tooltip
• http://codepen.io/recursiev/pen/zpJxs

  Final choice on Tooltip Method

After lots of testing, we are going with Peter Collingridge's → http://www.petercollingridge.co.uk/book/export/html/437#node-433. His example can be converted to Angular and once done it is easy to apply tooltips to future SVG info graphics.

Examples of Jigsaw puzzle as navigation

• http://www.presentationmagazine.com/powerpoint-templates/0/0/00647/editable-jigsaw-pieces-template-powerpoint_1.jpg
• http://www.presentationmagazine.com/powerpoint-templates/0/0/00358/powerpoint-jigsaw-puzzle-template_2.jpg
• http://image.slidesharecdn.com/3dinterconnectedcircularpuzzlepieces7stagespowerpointdiagramsandpowerpointtemplates-120614013131-phpapp02/95/3-d-interconnected-circular-puzzle-pieces-7-stages-powerpoint-diagrams-and-powerpoint-templates-1-728.jpg?cb=1339638016
• http://www.all-ppt-templates.com/images/powerpoint-puzzle-002.jpg
• https://s-media-cache-ak0.pinimg.com/736x/aa/6e/c2/aa6ec295efef1e97ec9d4cd757274c4e.jpg
• http://www.slidegeeks.com/pics/dgm/l/p/powerpoint_templates_strategy_hexagon_jigsaw_ppt_themes_1.jpg

  [LC] Rapid Prototype of Puzzle

• [x] Implement "Headings and copy", see above
• [x] Add the Jigsaw Puzzle below the "Headings and copy"
• [x] Add highlighting of puzzle piece on hover
• Add the tool tips (The section sub-title is the tool tip of the puzzle piece)
  • [x] By making a angular directive with the knowledge of the code of ui-bootstrap and petercolingbridge
  • [x] Try to pick a method that works on tap on mobile and hover on desktop

    Specs

• No links. Meaning click on puzzle does not scroll down
  • Links & tooltip would be not easy to use on mobile
  • If we add links to desktop, coding for mobile to have tooltip on tap becomes difficult

    Tasks

• [x] HC: Write copy
• [x] HC: Find coding examples on how to implement a SVG Map with tooltips and highlight on hover
• [x] @LukasChen Rapid Prototype of Puzzle (see above)
• [x] HC: Design Jigsaw Puzzle 3x3 in SVG
• [x] @LukasChen Add a section: "Making V² Modular PC Mainstream", details → Implementation
• [x] @LukasChen Implement SVG Navigation in V² Home Page, details → Implementation

[VillageHubertChen]

Final choice on Tooltip Method

After lots of testing, we are going with Peter Collingridge's → http://www.petercollingridge.co.uk/book/export/html/437#node-433. His example can be converted to Angular and once done it is easy to apply tooltips to future SVG info graphics.

[VillageHubertChen]

Create v2-Tooltip Repository

• [x] Create Repository → https://github.com/V-Squared/v2-Tooltip
• [x] Write Readme with basic instructions → https://github.com/V-Squared/v2-Tooltip/blob/master/README.md