Last week an idea occurred to me – we have several demos that can be shown at conferences to customers etc. But a central feature is there have multiple web apps (each can shown in one tab of a browser). How could it be possible to make the transition from one persona to another more obvious – and interactive??
Here’s the readme from the git repo.
Why would I use this?
- You have a web application or applications – each of which is being used by a different ‘persona’ or ‘role’.
- You’re trying to demo this at a conference, to your teammates, or your cats.
- The problem is that unless everybody is paying attention it can be quite easy to forget what UI your looking at is what persona.
- When did the ‘swap’ happen?
- Whose the current persona?
The premise is quite simple
- Run your application(s) however you want to.
- Have you screen setup to demo this however you would normally.
- Ideally have a second screen – maybe your laptop’s own screen – that is used as a ‘control’
- MUST have a webcam and MUST have some QR codes printed out and stuck to ‘something’ (if you can put these on an actual hat so much the better)
- Configure and run the ‘demo-hats’ application – up comes a Chrominum browser with all the applications tabs open
- Start your demo ‘speech’ – when you want to swap to a persona, don’t manually move the browser window but hold up a QR code instead!
Audience should now be amazed – but that’s up to your demo really 🙂
In more detail
It’s built on node.js so you’ll need that installed, then
npm install -g demo-hats
(or clone the repo!)
Create a configuration file (see below for the basic example),
Run the application
- It will open up your demo tabs.
- Open the control window (you’ll be shown the URL when you run the program)
- This will ask for permission to use the webcam – say yes.
- Show it the QR codes and the tabs will change!
** You must keep the Control Windows open, otherwise the webcam won’t work **
** But it doesn’t need to have focus – just not be minimised **
Key place to start is at the configuration – this will help you understand the whole system. Here it is – by default in a file called
"title":"People of Interest",
"summary":"Scenario showing how to show different webpages for different personas "
"bio": "Entrepreneur. Gamer. Explorer. Pr(remember that you'll need some QR codes printed!)
"uri": "http://localhost:3456/users/bob",(remember that you'll need some QR codes printed!)
"bio": "Award-winning web guru. Unapologetic food practitioner. Travel fanatic. Beer ninja. Reader."
infosection gives a title and a brief summary. This is shown on the control screen.
personasthe list of personas in use
- the key (
bobabove) – are the phrases and words that should be encoded into the QR codes. It could be some other word, or just a letter. Up to you – but remember the more complicated the phrase the more complex the QR code.
urithis is the uri that will be shown when this persona is ‘activated’ – i.e. the QR code is recognised… so in this case
http://localhost:3456/users/alice, will become active and have focus. (note that the demo-hats app has a number of user pages built in for testing)
startStateopen to say open it on start-up (to be honest this is the only option at the moment, want to add open when you see the QR code for the first time)
displayNamethe name that will be displayed on the control screen
avatarthe avatar for the persona that will be displayed on the control screen
biosome text that will be displayed on the controll screen.
You can have as made entries as you can have QR codes or browser tabs open.
Simply put, you keep the control window open (not minimised) but not necessarily in focus…(makes using one screen possible)
And show it the QR code that has the encoded ‘key’ in it.