enactjs / agate-apps Goto Github PK

A phone screen is a little complicated. You can see from the screenshot it will require a horizontally scrolling VirtualList and some more elaborate layout. It will need: Layout, Button, LabeledItem with an Icon in an ItemOverlay slot, Input with an Icon, and VirtualList.

• Basic Layout with Dialer component
• Add interactivity - #23
• Contact Scroller - #18
• Ongoing Call dialog - #24

Create a simple POC which can be extended and updated later to intake a served image and position the image on the screen. The image will be a thumbnail of what the copilot's screen is showing.

The image should fill the available space of the container.

It's very likely this will be just an implementation of ui/Image with some preset values and maybe a decorative frame around it.

The biggest feature of this screen is the large car image. Its component requirements are less clear in that there are lots of visual flourishes that we'll need to construct: all the little bulleted-lines connecting parts of the UI, the customized ProgressBar, and stylized LabeledItems with custom alignment. The speed and fuel gauges we may be able to use from the Gauge component @Djspaceg worked on.

This screen needs the following components: customized/stylized text readout, LabeledItem, Icon, Image, ProgressBar, some form of stylized aligned labeled text (readout in the bottom right), and some body text.

Construct the Air Conditioner view. This will require Button, Icon, Image, Slider, and Picker.

• Add some type of view (probably a dialog but maybe something else) to show when "Call" is selected
• Should use the current value and/or contact from Phone screen to populate view
• View could contain photo (with silhouette when undefined), name, number, and icon buttons for hangup and mute. Maybe a ToggleButton to swap between phone and BT too.

Current - Titanium:

Current - Carbon:

• Add Popup launched by selecting Date/Time in Settings view
• Add rudimentary Date Picker and Time Picker using new Picker (enactjs/agate#6) components

Add valet mode option. This option would lock down certain apps and settings to prevent an unauthorized user from performing certain functions. Radio (and AC?) settings would revert to pre-valet mode when exiting valet mode.

Everything is “local” state right now but the app should behave differently when you click “Auto” which would likely disable or set the fan speed and disable or set the fan direction buttons.

This could be superseded by connecting up to system services which would likely "own" the logic for these settings so we might want to wait on this.

Add Input to the phone page and hook it up so that button presses populate the input. The input should support deleting characters through the delete icon button (whether this is part of the input or not is left up to the implementer). Bonus points for making it so the call button activates/deactivates when the input has contents/is empty.

The settings screen is fairly simple, in terms of components. It requires only Divider, Icon, Item, Switch, and SwitchItem.

Design some color variations as presets for the agate themes.

We need a way to provide a template file of configuration information/values that can be committed into the repo, but not directly contain private information the user requires to operate their app, like API keys.

• The user's configuration file should not be tracked by, uploaded to, or stored into the repo; it should only exist locally on their machine.
• The sample file, from which their local file will be based, should include some basic documentation to describe what each value is for and where to get the key (in the case of an API key). This will help users who are new understand the requirements.
• If the app runs without having this file present, the sample file should be cloned into the correct location as a starting-point for the user to fill in. The app should not crash with a missing file error.

Design a screen for customization of theme, color, background color/image, font size, font color(?), button shape

We need to have a way for co-pilot app to talk to console.

We should make a small service layer server that communicates through sockets so apps can talk to each other.

So I think there are a few goals we should hit.

1. Basic communication(even mock data) from console to co-pilot.
2. Sending and updating more elaborate data like an actual dynamic youtube videos to co-pilot.
3. Some abstractions like graphQL to make the end points much easier to talk to.

Design a component to allow a user to select from a (possibly limited) palette of colors.

As we're growing the app we want more functionality. Custom colors, fonts, saving user data. Would now be a good time to bring in redux? Currently we're just passing props everywhere, but we probably need some sort of app state management that can handle things like deeper nested panels.

Is the console app small enough that it doesn't matter? Or should we implement something like redux? Also we could use context?

The existing launcher feels dated and plain. Experiment with some ideas for something more compelling.

Tapping the buttons works but 5-way select does not.

The component should be based on the MapBox Web API.
https://www.mapbox.com/mapbox-gl-js/api/

Requirements

• The rendered element should support any size of parent container (fill the space)
• The component must accept the following configuration properties (and likely more)
  • current position (lat/long coordinates)
  • current heading and orientation (to render our current location on the map)
  • destination position (may not be possible if the MapBox web API doesn't support route planning
  • color configuration; this will likely be an object with named keys that correspond to colorable qualities of the rendered map, things like land color, water color, road color, parks color, etc.
  • any additional interesting or valuable options that MapBox offers, like 2D vs 3D mode, north-oriented vs self-oriented.
• The component should be a standalone component which can accept external props for configuration.

The map should initially render at a close zoom level and be centered on our current location.
If a route is planned or provided, the map should zoom out to encompass the entire route, initially. After a configurable delay period, we can auto-zoom into our current position on the route.

Set up the basic app structure and define where the parts live.

DateTimePicker, Icon, Input, LabeledIconButton, Panels, and Popup

In this POC, we have Point of Interest (POI) markers created positioned on the edges of the screen. They will overlay on top of any/all screens of the console app.

• They only appear when the POI system is active.
• They only show POIs that are within a specific range (like 5 miles to 0 miles).
• They move toward the bottom of the screen the closer the vehicle moves toward them.
• They disappear off the bottom of the screen when the vehicle passes them.
• They switch sides of the screen (animating) when the car performs a maneuver that changes the vehicle's relative orientation to the POI. (Turning from a highway to a perpendicular road may reposition several of the POI thumbs at once, now that the POIs are on the other side of the vehicle.
• There should be a threshold for when to move a marker from one side to another. Once a marker is moved, its angle must be sufficiently different from its new angle to motivate a move to the opposite side. We don't want these markers bouncing from one side to the other if the POI is just on the swapping point.
• POI data will be coming in from our internal services, so this should be able to receive new POIs from an external source.
• Updating the position of the POI Thumbs should not force a screen paint, nor should switching sides.
• Each Thumb should support an interaction (press/tap) event callback.
• The thumbs should be skinnable/themeable.
• Thumbs should float over the content, extending as needed to a maximum size that isn't distracting, and truncate the text content.
• Thumbs should be able to support an Icon for the POI (Icon content TBD).

BONUS:

• Thumbs should be filterable. "Show only gas stations", "Show only restaurants", etc.

Given the following POI location information we get from the back-end system:

This is how the UI would be overlaid on a generic app layout:

On touchscreen devices, the screen resizes with pinch-to-zoom and tap to focus.

Through some mechanism (as yet undefined), allow the loading and saving of presets.

The purpose of this is to have a means by which the console app can direct what content is being displayed or played on the copilot app screen. A common usage scenario is a parent selecting a YouTube video for the child in the back seat to watch.

Possible content sources to consider:

• YouTube
• Local media (videos, picture slideshow, etc)

This POC should offer:

• A list of content
  • Each item in the list should have a thumbnail image, title, an optional subtitle, and a target URL (YouTube video URL, for the purposes of this POC)
  • Activating an item should display a simple popup with the title and destination URL (which will be wired up to the copilot app at a later time). This is just to demonstrate that interaction works.
• A fullscreen (full viewport) "app" view

We need to build a little shell of an application (not part of console, but a new app) which has an Enact base, but then effectively renders a fullscreen iframe. The enact app will receive a target URL somehow (probably via query-string argument initially) and forward that to the big iframe.

This is an immediately actionable ask that we should be able to turn around really quickly.

It doesn't need any onscreen visible elements (other than that big iframe), but should be able to support adding new UI elements at a later time as siblings to the iframe.

The Home screen is a 3x3 grid of LabeledIcons. We can leverage the existing Phone/Dialer Layout to organize the LabeledIcons. The LabeledIcon components can be set up to use agate/Button provided as the buttonComponent prop.

• Add a horizontal scroller using either ui/VirtualList or ui/Scroller consisting of IconItems(?) with contact name and phone number.
• Selecting a contact should populate the input and contact photo above dialer

The home screen should have more widgets available than just the 5 that are present now. (In fact, the home screen should only have 4 primary widget slots on it, to avoid clutter. Because of this, we should have a place to store and access the additional widgets that are available for use on the home screen. A drawer that stores the unused widgets would be useful for this purpose. The drawer likely should not render the widget in place, for speed reasons, but when dragged into a slot should render immediately once dropped onto a slot (swapping with the widget it's replacing). The macOS "Dashboard" concept would be a good model to look to for inspiration for how adding widgets could work.

• This drawer will need to have some activator toggle, perhaps the edit-layout-arrangement button/state could be the toggle?
• We may want the drawer to animate so factor that possibility into the design.
• Each theme may desire to customize the position/orientation/appearance of the drawer, so that aspect of its design will be important.

The drawer will hopefully become a first-class Agate component, based on expected usage scenarios, so we'll want it to be extensible and reusable in other scenarios beyond this one.

Please comment or ask questions in person if you have any.

Current contact scroller on Phone screen is based on ui/Scroller and therefore does not scroll items into view on focus. As a result, navigating via 5-way within the scroller can cause focus to "disappear" when it lands on an out-of-view component.

Breakdown of work in prep for demo

Tier 1

• Remove "Hello World" View - @sugardave
• Add Auto Icon set enactjs/agate#36 - @teckliew
  • maybe use https://icomoon.io/
  • ryan to send carbon icons to Teck
• Merge ToggleButton enactjs/agate#25 - @germboy
• Merge Picker enactjs/agate#6 - @germboy
• Merge Input enactjs/agate#20 - @ryanjduffy
• Create App Template in enactjs/templates (enactjs/agate#23) - @rundmt

Tier 2

• Date/Time Popup with Pickers (#17) - @rundmt
• Horizontal Contact Scroller on Phone Screen (#18) - @haileyr
• Add Ongoing Call Dialog (#24) - @sugardave

Object is to try out a model of tabbed panel header where the tabs shrink down when unfocused (perhaps to a single title for the current page) and expand again when focused. For vertical alignment, it could shrink down into slim bar with a '>' icon.