Yocto Project - User contributions [en]

File:10.1.Table Header Behaviours.jpg

2015-11-30T15:27:22Z

Vitor Levi: Vitor Levi uploaded a new version of "File:10.1.Table Header Behaviours.jpg"

File:10.1.Table Header Behaviours.jpg

2015-11-30T14:51:11Z

Vitor Levi:

Toaster 1.9 design

2015-11-30T14:50:30Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.2.Build_Dashboard_error.jpg'''

[[File:1.2.Build_Dashboard_error.jpg|600px|thumb|center|Build Dash Board - Error]]

'''1.3.Build_Dashboard_failure.jpg''

[[File:1.3.Build_Dashboard_failure.jpg|600px|thumb|center|Build Dash Board - Failure]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''8.0.Build_Field.jpg'''

[[File:8.0.Build_Field.jpg|600px|thumb|center|Build Field]]

'''10.0.List_and_Tables'''

[[File:10.Lists_and_Tables.jpg|600px|thumb|center|List and Tables]]

'''10.1.Table_Header_Behaviours.jpg'''

[[File:10.1.Table_Header_Behaviours.jpg|600px|thumb|center|Table Header Behaviours]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''13.0.Badges_and_Labels'''

[[File:13.0.Badges_and_Labels.jpg|600px|thumb|center|Badges and Labels]]

'''14.0.Dropdown'''

[[File:14.0.Dropdowns.jpg|600px|thumb|center|Dropdown]]

'''14.1.Dropdown_Header'''

[[File:14.1.Dropdown_Top_Header.jpg|600px|thumb|center|Dropdown Header]]

'''15.0.File_Directory'''

[[File:15.0.File_Directory.jpg|600px|thumb|center|File Directory]]

'''16.0.Notifications'''

[[File:16.0.Notifications.jpg|600px|thumb|center|Notifications]]

'''17.0.Text_Field'''

[[File:17.0.Text_Field.jpg|600px|thumb|center|text Field]]

'''19.0.Side_menu.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:10.1.Lists and Tables.jpg

2015-11-30T14:47:35Z

Vitor Levi:

File:10.Lists and Tables.jpg

2015-11-30T13:14:55Z

Vitor Levi: Vitor Levi uploaded a new version of "File:10.Lists and Tables.jpg"

File:13.0.Badges and Labels.jpg

2015-11-27T18:42:19Z

Vitor Levi: Vitor Levi uploaded a new version of "File:13.0.Badges and Labels.jpg"

Toaster 1.9 design

2015-11-16T16:56:24Z

Vitor Levi: /* Screens */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.2.Build_Dashboard_error.jpg'''

[[File:1.2.Build_Dashboard_error.jpg|600px|thumb|center|Build Dash Board - Error]]

'''1.3.Build_Dashboard_failure.jpg''

[[File:1.3.Build_Dashboard_failure.jpg|600px|thumb|center|Build Dash Board - Failure]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''8.0.Build_Field.jpg'''

[[File:8.0.Build_Field.jpg|600px|thumb|center|Build Field]]

'''10.0.List_and_Tables'''

[[File:10.Lists_and_Tables.jpg|600px|thumb|center|List and Tables]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''13.0.Badges_and_Labels'''

[[File:13.0.Badges_and_Labels.jpg|600px|thumb|center|Badges and Labels]]

'''14.0.Dropdown'''

[[File:14.0.Dropdowns.jpg|600px|thumb|center|Dropdown]]

'''14.1.Dropdown_Header'''

[[File:14.1.Dropdown_Top_Header.jpg|600px|thumb|center|Dropdown Header]]

'''15.0.File_Directory'''

[[File:15.0.File_Directory.jpg|600px|thumb|center|File Directory]]

'''16.0.Notifications'''

[[File:16.0.Notifications.jpg|600px|thumb|center|Notifications]]

'''17.0.Text_Field'''

[[File:17.0.Text_Field.jpg|600px|thumb|center|text Field]]

'''19.0.Side_menu.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:1.3.Build Dashboard failure.jpg

2015-11-16T16:56:18Z

Vitor Levi:

File:1.2.Build Dashboard error.jpg

2015-11-16T16:55:32Z

Vitor Levi:

File:1.1.Build Dashboard.jpg

2015-11-16T16:52:29Z

Vitor Levi: Vitor Levi uploaded a new version of "File:1.1.Build Dashboard.jpg"

1.1.Build_Dashboard.jpg

File:16.0.Notifications.jpg

2015-11-16T16:12:59Z

Vitor Levi: Vitor Levi uploaded a new version of "File:16.0.Notifications.jpg"

File:16.0.Notifications.jpg

2015-11-13T20:26:37Z

Vitor Levi: Vitor Levi uploaded a new version of "File:16.0.Notifications.jpg"

File:14.1.Dropdown Top Header.jpg

2015-11-09T14:12:12Z

Vitor Levi: Vitor Levi uploaded a new version of "File:14.1.Dropdown Top Header.jpg"

File:17.0.Text Field.jpg

2015-10-15T21:17:38Z

Vitor Levi: Vitor Levi uploaded a new version of "File:17.0.Text Field.jpg"

File:17.0.Text Field.jpg

2015-10-15T21:17:33Z

Vitor Levi: Vitor Levi uploaded a new version of "File:17.0.Text Field.jpg"

Toaster 1.9 design

2015-10-14T20:27:49Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''8.0.Build_Field.jpg'''

[[File:8.0.Build_Field.jpg|600px|thumb|center|Build Field]]

'''10.0.List_and_Tables'''

[[File:10.Lists_and_Tables.jpg|600px|thumb|center|List and Tables]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''13.0.Badges_and_Labels'''

[[File:13.0.Badges_and_Labels.jpg|600px|thumb|center|Badges and Labels]]

'''14.0.Dropdown'''

[[File:14.0.Dropdowns.jpg|600px|thumb|center|Dropdown]]

'''14.1.Dropdown_Header'''

[[File:14.1.Dropdown_Top_Header.jpg|600px|thumb|center|Dropdown Header]]

'''15.0.File_Directory'''

[[File:15.0.File_Directory.jpg|600px|thumb|center|File Directory]]

'''16.0.Notifications'''

[[File:16.0.Notifications.jpg|600px|thumb|center|Notifications]]

'''17.0.Text_Field'''

[[File:17.0.Text_Field.jpg|600px|thumb|center|text Field]]

'''19.0.Side_menu.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:16.0.Notifications.jpg

2015-10-14T20:27:00Z

Vitor Levi:

Toaster 1.9 design

2015-09-15T21:03:54Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''8.0.Build_Field.jpg'''

[[File:8.0.Build_Field.jpg|600px|thumb|center|Build Field]]

'''10.0.List_and_Tables'''

[[File:10.Lists_and_Tables.jpg|600px|thumb|center|List and Tables]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''13.0.Badges_and_Labels'''

[[File:13.0.Badges_and_Labels.jpg|600px|thumb|center|Badges and Labels]]

'''14.0.Dropdown'''

[[File:14.0.Dropdowns.jpg|600px|thumb|center|Dropdown]]

'''14.1.Dropdown_Header'''

[[File:14.1.Dropdown_Top_Header.jpg|600px|thumb|center|Dropdown Header]]

'''15.0.File_Directory'''

[[File:15.0.File_Directory.jpg|600px|thumb|center|File Directory]]

'''17.0.Text_Field'''

[[File:17.0.Text_Field.jpg|600px|thumb|center|text Field]]

'''19.0.Side_menu.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

Toaster 1.9 design

2015-09-15T21:02:03Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''8.0.Build_Field.jpg'''

[[File:8.0.Build_Field.jpg|600px|thumb|center|Build Field]]

'''10.0.List_and_Tables'''

[[File:10.Lists_and_Tables.jpg|600px|thumb|center|List and Tables]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''13.0.Badges_and_Labels'''

[[File:13.0.Badges_and_Labels.jpg|600px|thumb|center|Badges and Labels]]

'''14.0.Dropdown'''

[[File:14.0.Dropdowns.jpg|600px|thumb|center|Dropdown]]

'''14.1.Dropdown_Header'''

[[File:14.1.Dropdown_Top_Header.jpg|600px|thumb|center|Dropdown Header]]

'''15.0.File_Directory'''

[[File:15.0.File_Directory.jpg|600px|thumb|center|File Directory]]

'''17.0.Text_Field'''

[[File:17.0.Text_Field.jpg|600px|thumb|center|text Field]]

'''19.0.Paginations.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

Toaster 1.9 design

2015-09-15T20:58:58Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''8.0.Build_Field.jpg'''

[[File:8.0.Build_Field.jpg|600px|thumb|center|Build Field]]

'''10.0.List_and_Tables'''

[[File:10.Lists_and_Tables.jpg|600px|thumb|center|List and Tables]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''13.0.Badges_and_Labels'''

[[File:13.0.Badges_and_Labels.jpg|600px|thumb|center|Badges and Labels]]

'''14.0.Dropdown'''

[[File:14.0.Dropdowns.jpg|600px|thumb|center|Dropdown]]

'''14.1.Dropdown_Header'''

[[File:14.1.Dropdown_Top_Header.jpg|600px|thumb|center|Dropdown Header]]

'''15.0.File_Directory'''

[[File:15.0.File_Directory.jpg|600px|thumb|center|File Directory]]

'''17.0.Text_Field'''

[[File:17.0.Text_Field.jpg|600px|thumb|center|text Field]]

'''19.0.Paginations.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:17.0.Text Field.jpg

2015-09-15T20:58:12Z

Vitor Levi:

File:15.0.File Directory.jpg

2015-09-15T20:57:18Z

Vitor Levi:

File:14.1.Dropdown Top Header.jpg

2015-09-15T20:56:41Z

Vitor Levi:

File:14.0.Dropdowns.jpg

2015-09-15T20:55:22Z

Vitor Levi: Vitor Levi uploaded a new version of "File:14.0.Dropdowns.jpg"

File:14.0.Dropdowns.jpg

2015-09-15T20:55:19Z

Vitor Levi:

File:13.0.Badges and Labels.jpg

2015-09-15T20:54:18Z

Vitor Levi:

File:10.Lists and Tables.jpg

2015-09-15T20:52:47Z

Vitor Levi:

File:8.0.Build Field.jpg

2015-09-15T20:51:40Z

Vitor Levi:

Toaster 1.9 design

2015-09-15T20:51:19Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs.jpg'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''7.0.Progress_Bar_and_Loader.jpg'''

[[File:7.0.Progress_Bar_and_Loader.jpg|600px|thumb|center|Progress bar and Loader]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations.jpg'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''19.0.Paginations.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:7.0.Progress Bar and Loader.jpg

2015-09-15T20:50:54Z

Vitor Levi:

Toaster 1.9 design

2015-09-15T20:49:40Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''0.0.Top_Header'''

[[File:0.0.Top_Header.jpg|600px|thumb|center|Top Header]]

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs.jpg'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations.jpg'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''19.0.Paginations.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:0.0.Top Header.jpg

2015-09-15T20:48:52Z

Vitor Levi:

File:3.1.Select Base Image New.jpg

2015-09-15T20:48:05Z

Vitor Levi: Vitor Levi uploaded a new version of "File:3.1.Select Base Image New.jpg"

3.1.Select_Base_Image_New

File:2.2.BitBake Variables.jpg

2015-09-15T20:47:47Z

Vitor Levi: Vitor Levi uploaded a new version of "File:2.2.BitBake Variables.jpg"

2.2.BitBake_Variables

File:1.1.1.Image Information.jpg

2015-09-15T20:47:31Z

Vitor Levi: Vitor Levi uploaded a new version of "File:1.1.1.Image Information.jpg"

1.1.1.Image_Information

File:1.1.1.2.Directory Structure.jpg

2015-09-15T20:47:11Z

Vitor Levi: Vitor Levi uploaded a new version of "File:1.1.1.2.Directory Structure.jpg"

1.1.1.2.Directory_Structure.jpg

File:1.1.Build Dashboard.jpg

2015-09-15T20:46:54Z

Vitor Levi: Vitor Levi uploaded a new version of "File:1.1.Build Dashboard.jpg"

1.1.Build_Dashboard.jpg

File:1.0.Project Builds.jpg

2015-09-15T20:45:02Z

Vitor Levi: Vitor Levi uploaded a new version of "File:1.0.Project Builds.jpg"

1.0.Project_Builds

Toaster 1.9 design

2015-09-15T13:53:45Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs.jpg'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations.jpg'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

'''19.0.Paginations.jpg'''

[[File:19.0.Side_Menu.jpg|600px|thumb|center|Side Menu]]

== Image customisation detailed design ==

=== Version 2 ===

A second go to the image customisation process, after the [[design feedback|feedback received on the first version]]

[[Media:Image-customisation-v2.webm]]

This second version simplifies things quite a bit. These are the main changes:

* Your image recipes are now called 'custom images'
* They no longer live in a separate section: they are listed with the rest of the project compatible metadata
* The first step when you create a custom image is no longer giving it a name, but selecting the base image recipe
* Each base image recipe has now its own page, where you can check the list of packages it installs (if known)
* Once you have selected a base image recipe, you can no longer change it
* The parsing layers process is no longer there: you now must build the image to get the package content if Toaster does not have the information

[[design feedback v2|Feedback on the v2 video]]

=== Version 1 ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:19.0.Side Menu.jpg

2015-09-15T13:52:24Z

Vitor Levi:

Toaster 1.9 design

2015-07-08T13:54:33Z

Vitor Levi: /* Visual Design */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs.jpg'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations.jpg'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

== Image customisation detailed design ==

=== This video explains the detailed design ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:12.0.Paginations.jpg

2015-07-08T13:53:32Z

Vitor Levi: 12.0.Paginations

12.0.Paginations

File:11.0.Search Field.jpg

2015-07-08T13:51:15Z

Vitor Levi: 11.0.Search_Field

11.0.Search_Field

File:6.0.Tabs.jpg

2015-07-08T13:45:07Z

Vitor Levi: 6.0.Tabs

6.0.Tabs

File:5.0.Breadcrumb.jpg

2015-07-08T13:44:41Z

Vitor Levi: 5.0.Breadcrumb

5.0.Breadcrumb

File:3.0.Tooltip.jpg

2015-07-08T13:44:22Z

Vitor Levi: 3.0.Tooltip

3.0.Tooltip

File:2.0.Popover.jpg

2015-07-08T13:44:01Z

Vitor Levi: 2.0.Popover

2.0.Popover

Toaster 1.9 design

2015-07-08T13:43:44Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''1.0.Modal'''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs.jpg'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations.jpg'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

=== Status ===
This is the status for Toaster UI design development.

- Screens inventory

- Components inventory

== Image customisation detailed design ==

=== This video explains the detailed design ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

Toaster 1.9 design

2015-07-08T13:42:31Z

Vitor Levi: /* Components */

== Information architecture ==

It looks like the structure of the Toaster UI might look like this by the end of 1.9:

[[File:Toaster_1.9_IA.pdf]]

== Visual Design ==

=== Concept ===

=== Screens ===

All the screens filename regards the site map of Toaster Information Architect ([[File:Toaster_1.9_IA.pdf]])

'''1.0.Project_Builds'''

[[File:1.0.Project_Builds.jpg|600px|thumb|center|Project Builds]]

'''1.1.Build_Dashboard.jpg'''

[[File:1.1.Build Dashboard.jpg|600px|thumb|center|Build Dash Board]]

'''1.1.1.2.Directory_Structure'''

[[File:1.1.1.2.Directory_Structure.jpg|600px|thumb|center|Directory Structure]]

'''1.1.1.Image_Information'''

[[File:1.1.1.Image Information.jpg|600px|thumb|center|Image Information]]

'''2.2.BitBake_Variables'''

[[File:2.2.BitBake Variables.jpg|600px|thumb|center|BitBake Variables]]

'''3.1.Select_Base_Image_New'''

[[File:3.1.Select Base Image New.jpg|600px|thumb|center|Select Base Image New]]

=== Components ===

This is the main components design based on UI needs. Each component was designed regarding the Toaster UI identity, grids and guidelines.

'''1.0.Modal''

[[File:1.0.Modal.jpg|600px|thumb|center|Modal]]

'''2.0.Popover'''

[[File:2.0.Popover.jpg|600px|thumb|center|PopOver]]

'''3.0.Tooltip'''

[[File:3.0.Tooltip.jpg|600px|thumb|center|Tooltip]]

'''5.0.Breadcrumb'''

[[File:5.0.Breadcrumb.jpg|600px|thumb|center|Breadcrumb]]

'''6.0.Tabs.jpg'''

[[File:6.0.Tabs.jpg|600px|thumb|center|Tabs]]

'''11.0.Search_Field'''

[[File:11.0.Search_Field.jpg|600px|thumb|center|Search Filed]]

'''12.0.Paginations.jpg'''

[[File:12.0.Paginations.jpg|600px|thumb|center|Pagination]]

=== Status ===
This is the status for Toaster UI design development.

- Screens inventory

- Components inventory

== Image customisation detailed design ==

=== This video explains the detailed design ===

The video below explains the image customisation interaction in more detail

[[Media:Image-customisation.webm]]

Everything that's shown in the video is now available in the design prototype at

https://yoctoproject.org/toaster

[[design feedback|Feedback on the video]]

=== High-level design feedback ===

This design shown in the video addresses pretty much all the feedback the Toaster contributors have provided so far (listed below). The only items not addressed are 1 (because it would require us to rethink Toaster as a tool for absolute beginners and would impose a very specific workflow) and 8 (because I haven't had time to think about how we can do this, but we can definitely come back to it).

This is the feedback we received:

1. Should this kind of linear process be the main Toaster workflow, instead of the non-linear one currently provided by the existing project page?

2. Size is project configuration dependent, so all size information is a guess, an approximation. We should probably still show it, but the interface needs to present it as such (we need to make sure we don't present it as it was 100% accurate information). The same for dependencies.

3. We need to create states for how the tables will look like when certain information is missing (number of packages, sizes, etc)

4. We need to refine the recipe presentation in the workflow

5. We need to work on the way we present the actions. Do we really need all the ones we have right now?

6. Replace the builds tab with a less prominent way of accessing build information for the custom image recipe.

7. Provide a way to reenter the image customisation process from the build results

8. Provide a way to 'select all' packages returned by a search

9. Do we need the reverse dependencies information in the packages table?

10. Can we add the package size to the visible dependencies information in the packages table?

11. The workflow is still too complex: too many concepts exposed (packages, layers, recipes). Should we just require people to build the image they want to customise instead?

== Image customisation high level design ==

The document below is the outcome of the initial design discussions about image customisation with Toaster. By image customisation we mean the ability to create a customised image recipe by specifying the list of packages it will install.

[[File:Image_customisation_in_Toaster.pdf]]

Please send feedback to the [https://lists.yoctoproject.org/listinfo/toaster Toaster mailing list]

== Some early thoughts on changes and new functionality ==

=== Navigation changes ===

[[File:Project-page-sketch.png|600px|thumb|center|New navigation system for Toaster]]

The existing navigation system is too simple and will not cope well with the addition of new functionality. We are planning to add a global navigation and change the project navigation.

=== Users ===
[[File:All-users-page.png|600px|thumb|center|The list of Toaster users]]
The page that lists existing Toaster users. You can create new users, give them read only access (by project), or 2 different levels of write access: "can create projects" and "Toaster administrator".

=== Image customisation ===
[[File:Image-customisation.png|600px|thumb|center|A very rough sketch of a possible image customisation task flow]]
You can currently add packages to any image you build by setting IMAGE_INSTALL_append in Toaster. That's clumsy and quite limited. We would like to provide a better way to do image customisation. You start from one of the core Yocto Project images, and you can add remove packages and recipes from / to it. You can then save your changes as a new image recipe that will be added to your own custom layer.

File:1.0.Modal.jpg

2015-07-08T13:42:21Z

Vitor Levi: 1.0.Modal

1.0.Modal