4 posts tagged with "pcui"

PCUI is the open source, front-end framework for building amazing web-based tools like the PlayCanvas Editor, glTF Viewer, Texture Tool and more!

Today, we are excited to announce the release of PCUI version 2.10.0! This new release includes a number of significant updates and improvements that will make building web tools with PCUI even easier and more efficient.

One of the biggest changes in this release is the migration of the entire source code from JavaScript to TypeScript. This will provide a number of benefits to developers, including improved type checking, better code completion and IntelliSense in IDEs, and easier maintenance and refactoring of code.

In addition to the source code migration, we have also released a new API reference manual built with Typedoc. This will make it easier for developers to understand and use the various APIs and components available in PCUI.

TypeScript developers will also be pleased to know that we have improved the TypeScript declarations in this release, making it even easier to use PCUI in a TypeScript project.

Finally, we want to highlight the open source nature of PCUI. We believe in the power of the open source community to build great software together, and we encourage open source developers to get involved with the project. Whether you want to contribute code, report issues, or just provide feedback, we welcome your participation. Explore the PCUI repo today on GitHub!

Thank you for using PCUI, and we hope you enjoy the new release!

Today, we are excited to announce a new open source library: PCUI Graph. It’s a graph rendering framework for the browser which can be used to build and view various types of node-based graphs.

PCUI Graph in action

Last year, we open sourced PCUI, a front-end framework for building web-based tools like the PlayCanvas Editor. This was subsequently used as the foundation for a new family of open source tools: the glTF Viewer and the PlayCanvas Examples Browser. However, some of our more recent tools projects have had requirements related to the creation and editing of node-based graphs. As a result, we set about developing a new plugin to PCUI called PCUI Graph. This plugin is already in use today since it powers both the PlayCanvas Shader Editor and Animation State Graph Editor:

You can rapidly map out key parts of your project’s workflow using pcui-graph, as it supports both directed and visual programming graphs. Here are some of the key features that PCUI Graph provides:

• Schema based - Each graph you create is based on a JSON formatted schema, allowing you to easily define the type of your graph up-front.
• Event system - You can hook up event listeners to any of the UI interactions made to a graph.
• Graph state data - Easily retrieve the current state of the graph in JSON data format at any time and this can be loaded back into the graph later.
• Context menus - You can define context menus in a graph schema, supporting the creation and deletion of nodes / edges in the UI.

• Simple API - Any of the user interactions with the graph can also be made programmatically.
• Styling - The graph can be configured to change the default styling of nodes / edges. These styles can also be overridden in the schema of each individual node / edge type.

Useful links​

• PCUI Graph GitHub homepage
• API documentation

So get started with PCUI and PCUI Graph today. We can’t wait to see what you build!

Back in October, we launched PCUI, an easy to use framework for building web-based tools. It already powers the PlayCanvas Editor and glTF Viewer applications.

Today, we're excited to announce our next major release for the library: PCUI 1.1.0. Check out the release notes for the details. But let's take a look at some of the highlights.

TreeView - Tree Control​

Many web tools display data in a hierarchical or tree-based representation. But building a tree control in HTML and CSS can be tricky. PCUI 1.1.0 introduces a very easy to use tree control. And it incorporates some useful features such as:

• Drag and drop of tree view items
• Built-in 'double-click to rename'

ArrayInput - Array Control​

Also arriving in PCUI is ArrayInput. It allows you to create input controls for arrays of numbers, strings, booleans or vectors.

Resizable TextAreaInput Control​

The TextAreaInput control has been augmented with a new resizable property that can be set to none, horizontal, vertical or both.

To get started making awesome web tools with PCUI, here are some useful links:

• GitHub repo
• PCUI on NPM
• Documentation

Today, PlayCanvas is launching PCUI: a new, open source front-end framework for the web.

PCUI is designed with tools developers in mind. It is particularly well suited to building viewer and editor applications, providing a rich set of beautiful and consistent controls. It already powers the PlayCanvas Editor - the world's most powerful WebGL production tool.

Here you can see tree controls, panels, buttons, checkboxes, toolbars, menus and more. The Editor also relies on PCUI's observer system, that makes it easy to synchronize the state of your application's UI with that of the underlying data. Plus, it has a built-in support for history to make implementing redo/undo a breeze.

Also built on PCUI is the PlayCanvas glTF Viewer, a tool for inspecting glTF 2.0 scenes.

Check out the viewer's GitHub repo to see how a TypeScript-based web application leverages PCUI.

If these applications inspire you to build your own browser-based tools, why not get started with PCUI today? Here are some useful links:

• GitHub repo - open sourced under MIT
• Developer site - including Storybook support for browsing components
• NPM page - released today as version 1.0.0

PCUI works great with vanilla JS projects, TypeScript projects and React-based projects. It's open source so we encourage you to get involved and help us advance PCUI.

If you're building any kind of browser-based tool application - definitely check it out today and share your thoughts on the forum!