UNIVERSAL INFO DISPLAY PROTOTYPE

Version 1 (Mobile)

• A horizontally scrolled content display system. It's purpose is to display and navigate sets of item data. Location and map features included. UI Components are used to filter and sort item data.
• Display nearest x items less than x miles (50 default) from device location

Goals

• Experiment navigating a simplified horizontally-scrolled content system
• Experiment enhanced content media presentation with rotating 3D effect items
• Experiment using a real industry-level dataset (100k+ items, 2500+ stores)
• Experiment map integration for items with openstreetmap

Demo

• Universal Info Display Demo (mobile)

Install/Run

node v16

(view using browser dev tools mobile)

npm i
npm start

Design/Parts

• ContentSlider: A scrolling window displaying information
• FilterBar: Displays UI data filter buttons
• Grid: A 9 unit flex grid displaying items
• Item: A modal of the selected item
• Map: An openstreetmap called rlayers to display item locations
• Range: A data asc/desc range control with the min/max auto-populated from data
• Shell: High-level application shell containing UI components
• Slider: A horizontally scrolled data-driven choice component
• TitleBar: Status bar at the top displaying status info

UX Flow

Data Flow (design open to change)

Data Config

• items are stored by address(store) in arrays [location store address].json in public/data/groups
• a group is a dataset of items (flower example in public/data/groups/flower)
• /public/data/keys are used to link location to item files
• /src/parts/config directory used for item field UI configuration
• groups.json - group UI filter name/field/alias config
• filter_defaults.json - default group filter values
• item_aliases.json - item field aliases
• template_group.json - grid group template (1st screen)
• template_item.json - grid item template

Performance

• Items are proximity-rendered from currently selected(viewed) page

Equipment/Info/Tools used for 3D Item object recording with iPhone

• iPhone Camera recorded video in square 1:1 format
• 3D Printed Phone Stand [.stl file]
• Arduino Uno [arduino stepper code file]
• Stepper Motor 28BYJ-48
• 3D Printed Flower Pin Nozzle [.stl file]
• Flower Pins
• Rubber Bumpers for noise reduction
• ffmpeg video conversion
• backgroundremover video background removal

3D Item Object iPhone Recording and Media Transfer

• Item is rotating on stepper motor at 360 degrees per 30 seconds
• Place the phone on stand then record a square video of object for 1 rotation (30 sec) and rotate item on above setup
• Transfer from phone to Photos App on OS X then export (File > Export) to drive and there should now be a square .mov file.

Video Conversion Commands

NOTE: 10 seconds is considered the official slice start time because the camera had to be re-adjusted due to slight movements after recording

1. Slice 30 seconds (1 rotation) and create new keyframes from video starting at 10 seconds

ffmpeg -i orig.mov -ss 00:00:10 -t 00:00:30 -async 1 out.mov

2. Remove background of mov and export gif

backgroundremover -i out.mov -tg -o out2.gif

3. Scale gif to 200x200 and retain transparency

ffmpeg -i out2.gif -filter_complex "[0:v] scale=200:200:flags=lanczos,split [a][b]; [a] palettegen=reserve_transparent=on:transparency_color=ffffff [p]; [b][p] paletteuse" -loop 0 final.gif

Media Optimization Opportunity (secret sauce?)

NOTE: Tried using the video player with webm/mp4 files and found safari/ios can only play h264 format. That format does not appear to support an alpha(transparency channel).

Have the item "float" by displaying a slice of a full rotation.

• Use CSS sprite animations
• Play in forwards then reverse

TODO/THINK/(RE)DESIGN

• routing
• Extend map features? Directions?
• Custom ranking systems/designs...
• Social Features
• Don't forget PPU field (points per unit)
• Gamifications (badges, awards, etc)
• OnlInE ShoPPing aka e-commerce
• community involvement?
• Design and Port to new framework?