SlideShare a Scribd company logo
Build a “Minority
Report” interface
    Using FLAR Toolkit
Beginning
NPOX + RoomWare

• November 2009
• 60.000 euro to do it all
• No budget
• All Dutch public broadcasting companies
• High chance for exposure of RoomWare
New strategy


• Low / no budget!
• Different type of installation
“Do it yourself” ++
• Paper
• Printer
• Computer
• Web cam
• Adobe Flash
• FLAR toolkit
Goal

• “Reactable” type of interface
• “Minority Report” Fingers / gesture
  interface
• Scratch interface / touch interface
Basic movements
Distance
Rotation   Tilt
Putting it together
Rotation, tilt, pressure
Research / test results
Rotation
• Set intensity
• Set dragging direction
• Set intensity + direction
• Zoom in / out
• Easy to use with other
  movements
Tilt
• Tilt objects
• Pressure due to tilt
• Movement in tilt-direction
  (virtual joystick)
• Panning the camera
• Hard to use with other
  movements
Pressure
• Pressure becomes higher
  closer to camera
• Faster / slower
• Increase / decrease intensity
• Zoom in / out
• Click / grab
• Easy to use with other
  movements
Combined actions
    • “Pairing”
    • Rotate markers to increase
      strength of function
    • Rotate one marker around
      the other
    • Increase / decrease distance
    • Increase / decrease pressure
    • Feedback of strength using
      line thickness
Using it
Hands, fingers, functions


• What will be your strategy?
Assigning meaning
 1.a: “Move canvas X/Y”


 1.b: “Menu”

 2.a + 1.a: “Rotate / scale / tilt”
 2.a + 1.b: “Scroll through menu”

 2.b + 1.a: “Zoom in / out”
 2.b + 1.b: “Scroll through submenu”
Available data
Single object
• objectID
• (delta) X / Y
• (delta) TiltA/B
• (delta) Zstrength
• (delta) Rotation
Paired objects
 • objectID #1, objectID #2
 • (delta) v_xyVectorLength
 • (delta) v_xyVectorAngle
 • (delta) v_vectorZstrength
 • function drawVectorToCanvas
FLAR Toolkit
   // FLAR loop, getting transformation matrix
   _flarDetector.getTransmationMatrix( object,
   _resultMat );
	 dealWithObject(i,_resultMat) // Translate matrix



// DEAL WITH OBJECT
function dealWithObject(objNr:int,_resultMat:*)
{
	 var normalizer:FlarTransformNormalizer;
	 normalizer=_norms[objNr]; // Array with normalizers
	 	 	
// Normalize FLAR coordinates
	 normalizer.normalize(_resultMat);
// Use coordinates
	 flashObject.x=normalizer.x;
	 flashObject.y=normalizer.y;
}
FLAR toolkit Minority Report Interface

More Related Content

Similar to FLAR toolkit Minority Report Interface

ADF Mobile - an intro for Developers
ADF Mobile - an intro for DevelopersADF Mobile - an intro for Developers
ADF Mobile - an intro for Developers
Luc Bors
 
The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event HandlingThe Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event Handling
Yorick Phoenix
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patterns
danhermes
 
Mode d’emploie delta force xtreme mission editor
Mode d’emploie delta force xtreme mission editorMode d’emploie delta force xtreme mission editor
Mode d’emploie delta force xtreme mission editor
Fabian Chailler
 
Andrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOSAndrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOS
Wey Wey Web
 
Mobile Application Development class 005
Mobile Application Development class 005Mobile Application Development class 005
Mobile Application Development class 005
Dr. Mazin Mohamed alkathiri
 
Developing for Leap Motion
Developing for Leap MotionDeveloping for Leap Motion
Developing for Leap Motion
Iris Classon
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
Sencha
 
Unreal Engine Basics 05 - User Interface
Unreal Engine Basics 05 - User InterfaceUnreal Engine Basics 05 - User Interface
Unreal Engine Basics 05 - User Interface
Nick Pruehs
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patterns
danhermes
 
Cardboard VR: Building Low Cost VR Experiences
Cardboard VR: Building Low Cost VR ExperiencesCardboard VR: Building Low Cost VR Experiences
Cardboard VR: Building Low Cost VR Experiences
Mark Billinghurst
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
Robert Zinner
 
DHTML - Events & Buttons
DHTML - Events  & ButtonsDHTML - Events  & Buttons
DHTML - Events & Buttons
Deep Patel
 
Max2015 ch01
Max2015 ch01Max2015 ch01
Max2015 ch01
Tracie King
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
colinbdclark
 
Android Programming Basic
Android Programming BasicAndroid Programming Basic
Android Programming Basic
Duy Do Phan
 
Lecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual RealityLecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual Reality
Mark Billinghurst
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
colinbdclark
 
3 d spline and compound modeling (mei 2013)
3 d spline and compound  modeling (mei 2013)3 d spline and compound  modeling (mei 2013)
3 d spline and compound modeling (mei 2013)
Noorazzahrawani Abdul Rani
 
Solving Problems with YUI3: AutoComplete
Solving Problems with YUI3: AutoCompleteSolving Problems with YUI3: AutoComplete
Solving Problems with YUI3: AutoComplete
IsaacSchlueter
 

Similar to FLAR toolkit Minority Report Interface (20)

ADF Mobile - an intro for Developers
ADF Mobile - an intro for DevelopersADF Mobile - an intro for Developers
ADF Mobile - an intro for Developers
 
The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event HandlingThe Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event Handling
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patterns
 
Mode d’emploie delta force xtreme mission editor
Mode d’emploie delta force xtreme mission editorMode d’emploie delta force xtreme mission editor
Mode d’emploie delta force xtreme mission editor
 
Andrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOSAndrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOS
 
Mobile Application Development class 005
Mobile Application Development class 005Mobile Application Development class 005
Mobile Application Development class 005
 
Developing for Leap Motion
Developing for Leap MotionDeveloping for Leap Motion
Developing for Leap Motion
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
 
Unreal Engine Basics 05 - User Interface
Unreal Engine Basics 05 - User InterfaceUnreal Engine Basics 05 - User Interface
Unreal Engine Basics 05 - User Interface
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patterns
 
Cardboard VR: Building Low Cost VR Experiences
Cardboard VR: Building Low Cost VR ExperiencesCardboard VR: Building Low Cost VR Experiences
Cardboard VR: Building Low Cost VR Experiences
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
 
DHTML - Events & Buttons
DHTML - Events  & ButtonsDHTML - Events  & Buttons
DHTML - Events & Buttons
 
Max2015 ch01
Max2015 ch01Max2015 ch01
Max2015 ch01
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Android Programming Basic
Android Programming BasicAndroid Programming Basic
Android Programming Basic
 
Lecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual RealityLecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual Reality
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
3 d spline and compound modeling (mei 2013)
3 d spline and compound  modeling (mei 2013)3 d spline and compound  modeling (mei 2013)
3 d spline and compound modeling (mei 2013)
 
Solving Problems with YUI3: AutoComplete
Solving Problems with YUI3: AutoCompleteSolving Problems with YUI3: AutoComplete
Solving Problems with YUI3: AutoComplete
 

Recently uploaded

From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
leebarnesutopia
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
HarpalGohil4
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
Sunil Jagani
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 

Recently uploaded (20)

From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 

FLAR toolkit Minority Report Interface

  • 1. Build a “Minority Report” interface Using FLAR Toolkit
  • 3. NPOX + RoomWare • November 2009 • 60.000 euro to do it all • No budget • All Dutch public broadcasting companies • High chance for exposure of RoomWare
  • 4. New strategy • Low / no budget! • Different type of installation
  • 5. “Do it yourself” ++ • Paper • Printer • Computer • Web cam • Adobe Flash • FLAR toolkit
  • 6. Goal • “Reactable” type of interface • “Minority Report” Fingers / gesture interface • Scratch interface / touch interface
  • 7.
  • 10. Rotation Tilt
  • 11.
  • 14.
  • 15. Research / test results
  • 16. Rotation • Set intensity • Set dragging direction • Set intensity + direction • Zoom in / out • Easy to use with other movements
  • 17. Tilt • Tilt objects • Pressure due to tilt • Movement in tilt-direction (virtual joystick) • Panning the camera • Hard to use with other movements
  • 18. Pressure • Pressure becomes higher closer to camera • Faster / slower • Increase / decrease intensity • Zoom in / out • Click / grab • Easy to use with other movements
  • 19. Combined actions • “Pairing” • Rotate markers to increase strength of function • Rotate one marker around the other • Increase / decrease distance • Increase / decrease pressure • Feedback of strength using line thickness
  • 20.
  • 22. Hands, fingers, functions • What will be your strategy?
  • 23. Assigning meaning 1.a: “Move canvas X/Y” 1.b: “Menu” 2.a + 1.a: “Rotate / scale / tilt” 2.a + 1.b: “Scroll through menu” 2.b + 1.a: “Zoom in / out” 2.b + 1.b: “Scroll through submenu”
  • 24.
  • 26. Single object • objectID • (delta) X / Y • (delta) TiltA/B • (delta) Zstrength • (delta) Rotation
  • 27. Paired objects • objectID #1, objectID #2 • (delta) v_xyVectorLength • (delta) v_xyVectorAngle • (delta) v_vectorZstrength • function drawVectorToCanvas
  • 28. FLAR Toolkit // FLAR loop, getting transformation matrix _flarDetector.getTransmationMatrix( object, _resultMat ); dealWithObject(i,_resultMat) // Translate matrix // DEAL WITH OBJECT function dealWithObject(objNr:int,_resultMat:*) { var normalizer:FlarTransformNormalizer; normalizer=_norms[objNr]; // Array with normalizers // Normalize FLAR coordinates normalizer.normalize(_resultMat); // Use coordinates flashObject.x=normalizer.x; flashObject.y=normalizer.y; }