enactjs / agate-apps Goto Github PK
View Code? Open in Web Editor NEWA collection of Agate UI sample applications.
A collection of Agate UI sample applications.
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
.
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.
value
and/or contact from Phone screen to populate viewAdd 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.
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.
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.
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/
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.
BONUS:
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:
This POC should offer:
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.
ui/VirtualList
or ui/Scroller
consisting of IconItems(?) with contact name and phone number.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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.