Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update documentation, add videos for presenting to ESUG 23 #78

Merged
merged 5 commits into from
Aug 26, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 57 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,15 @@

Pyramid is a User-Interface (UI) editor.

![image](https://github.com/OpenSmock/Pyramid/assets/49183340/d94c88d4-5535-4f3d-a898-dc0b8effdb1b)
![image](https://github.com/OpenSmock/Pyramid/assets/49183340/d5b6957d-1015-4726-94b5-58ad1e62cfc9)

Pyramid is a WYSIWYG application (What You See Is What You Get) in other terms it allows you to visually design the expected outcome.

Pyramid helps you to produce final UI using Bloc library (and also Toplo).

## <img src="/resources/puce.svg" width="75" height="75" align="bottom"> How to start
You can add plugins into Pyramid to extents the editor capacities or create [your own plugin](https://github.com/OpenSmock/Pyramid/wiki/Ajouter-un-nouveau-plugin-a-Pyramid) with your specifics functions !

Open the Pyramid menu into Library and click `New Project`.

![image](https://github.com/OpenSmock/Pyramid/assets/49183340/09b28b8e-f2df-489b-8855-68141efa6bf3)

## <img src="/resources/puce.svg" width="75" height="75" align="bottom"> Installation
## <img src="/resources/puce.svg" width="75" height="75" align="bottom"> How to get Pyramid

You can load the last stable version of Pyramid or the development version. The Development version can provide the new incoming functionalities but can be unstable.

Expand All @@ -41,6 +37,60 @@ Metacello new
load
```

## <img src="/resources/puce.svg" width="75" height="75" align="bottom"> How to use Pyramid

### Create a new project

Open the Pyramid menu into Library and click `New Project`.

![image](https://github.com/OpenSmock/Pyramid/assets/49183340/09b28b8e-f2df-489b-8855-68141efa6bf3)

Then the project view appears in a new window.

![image](https://github.com/OpenSmock/Pyramid/assets/49183340/b4f988ff-62e1-452f-b409-75439c584878)

### Add and setup graphical elements

Use the create button to add graphical element in your project view.

https://github.com/OpenSmock/Pyramid/assets/49183340/a02db9ad-314a-4caf-884c-9da4da809293

### Save a project

Setup the project to store your view into a Class.

When your project is saved into a method, you can see the preview on the `Pyramid preview` tab.

https://github.com/OpenSmock/Pyramid/assets/49183340/eb70004b-cfb4-43a0-8759-27d3bac75fd0

### Edit a saved project

Use the `Pyramid preview` tab to edit an existing project.

https://github.com/OpenSmock/Pyramid/assets/49183340/c4a18e51-5fb5-412c-90d4-0638cadb6bff

### Test a project

Use the `Pyramid preview` tab to test an existing project.

https://github.com/OpenSmock/Pyramid/assets/49183340/12a916e5-06d1-426f-954c-2e4e911475e1

### Tips

To edit a `BlElement` instance or a `BlSpace` instance into Pyramid :

```st
element editWithPyramid.
space editWithPyramid.
```

You can edit in Pyramid an opened BlSpace with `F12` keyboard shortcut, for that open a BlElement with `openInNewSpaceWithPyramidShortcut`.

## Plugins

![image](https://user-images.githubusercontent.com/49183340/263474758-37833c2b-f7ad-4b46-ab58-cb3d92c28413.png)
- [FigmaToWorld](https://github.com/OpenSmock/Pyramid-Plugins-FigmaToWorld) plugin provide capacities to import projects designed with [Figma](https://www.figma.com)

## <img src="/resources/puce.svg" width="75" height="75" align="bottom"> Dependencies

![image](https://github.com/OpenSmock/Pyramid/assets/34318678/099f25fc-74bd-477f-bef0-2ad7d47db10d)
Expand Down