initial commit

This commit is contained in:
equippedcoding-master
2025-09-17 09:37:06 -05:00
parent 86108ca47e
commit e2c98790b2
55389 changed files with 6206730 additions and 0 deletions

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI ArrayInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { ArrayInput, LabelGroup } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const types = [ 'boolean', 'number', 'string', 'vec2', 'vec3', 'vec4' ];
for (const type of types) {
const arrayInput = new ArrayInput({
type: type
});
const labelGroup = new LabelGroup({
field: arrayInput,
text: type + ':'
});
document.body.appendChild(labelGroup.dom);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI BooleanInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { BooleanInput, LabelGroup } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const checkbox = new BooleanInput();
const checkboxGroup = new LabelGroup({
field: checkbox,
text: 'Checkbox:'
});
document.body.appendChild(checkboxGroup.dom);
const toggle = new BooleanInput({
type: 'toggle'
});
const toggleGroup = new LabelGroup({
field: toggle,
text: 'Toggle:'
});
document.body.appendChild(toggleGroup.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Button } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const button = new Button({
icon: 'E400',
text: 'Click Me'
});
document.body.appendChild(button.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Canvas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Canvas } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const canvas = new Canvas({
useDevicePixelRatio: true
});
canvas.resize(512, 512);
// draw a smiling face with the 2D canvas API
const ctx = canvas.dom.getContext('2d');
// face
ctx.beginPath();
ctx.arc(256, 256, 200, 0, 2 * Math.PI);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 10;
ctx.strokeStyle = 'black';
ctx.stroke();
// left eye
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
// right eye
ctx.beginPath();
ctx.arc(312, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
// mouth
ctx.beginPath();
ctx.arc(256, 256, 100, 0, Math.PI);
ctx.stroke();
document.body.appendChild(canvas.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Code } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
// get the code for this example
const src = document.querySelector('script[type="module"]').innerHTML;
const code = new Code({
text: src
});
document.body.appendChild(code.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI ColorPicker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
.pcui-label-group > .pcui-label:first-child {
font-size: 16px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { ColorPicker, LabelGroup } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const rgb = new ColorPicker();
const rgbGroup = new LabelGroup({
field: rgb,
text: 'RGB:'
});
const rgba = new ColorPicker({
channels: 4
});
const rgbaGroup = new LabelGroup({
field: rgba,
text: 'RGB + Alpha:'
});
document.body.appendChild(rgbGroup.dom);
document.body.appendChild(rgbaGroup.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Divider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Divider, LabelGroup, TextInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const aboveGroup = new LabelGroup({
field: new TextInput(),
text: 'Above Divider'
});
document.body.appendChild(aboveGroup.dom);
const divider = new Divider();
document.body.appendChild(divider.dom);
const belowGroup = new LabelGroup({
field: new TextInput(),
text: 'Below Divider'
});
document.body.appendChild(belowGroup.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI GradientPicker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { GradientPicker } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const gradientPicker = new GradientPicker();
document.body.appendChild(gradientPicker.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI GridView</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { GridView, GridViewItem } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const gridView = new GridView();
for (let i = 1; i <= 100; i++) {
const item = new GridViewItem({
text: `Item ${i}`
});
gridView.append(item);
}
document.body.appendChild(gridView.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI InfoBox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { InfoBox } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const info = new InfoBox({
unsafe: true,
icon: 'E400',
text: 'An info box can be used to display information to the user. It can contain a title, icon and text. You can even include HTML such as <a href="https://github.com/playcanvas/pcui" target="_none">hyperlinks</a> if you set the unsafe property of the info box to true!',
title: 'Info Box'
});
document.body.appendChild(info.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Label</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Label } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const label = new Label({
text: 'This is a Label'
});
document.body.appendChild(label.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI LabelGroup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { LabelGroup, TextInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
for (let i = 1; i <= 10; i++) {
const labelGroup = new LabelGroup({
text: 'Label ' + i,
field: new TextInput()
})
document.body.appendChild(labelGroup.dom);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Label, Menu } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const label = new Label({
text: 'Right click to open menu'
});
document.body.appendChild(label.dom);
const menu = new Menu({
items: [
{
text: 'Item 1'
},
{
text: 'Item 2'
},
{
text: 'Item 3',
items: [
{
text: 'Item 3.1'
},
{
text: 'Item 3.2'
},
{
text: 'Item 3.3'
}
]
}
]
});
document.body.appendChild(menu.dom);
window.addEventListener('contextmenu', (event) => {
event.stopPropagation();
event.preventDefault();
menu.hidden = false;
menu.position(event.clientX, event.clientY);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI NumericInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
.pcui-element.pcui-label-group > .pcui-label:first-child {
width: 125px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { InfoBox, LabelGroup, NumericInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const numericInput = new NumericInput();
const labelGroup = new LabelGroup({
field: numericInput,
text: 'Enter a number:'
});
const infoBox = new InfoBox({
icon: 'E400',
text: 'NumericInput also supports expressions. For example, you can enter "10 * (2 + 3)" to get a value of 50.'
});
document.body.appendChild(labelGroup.dom);
document.body.appendChild(infoBox.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Overlay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
.pcui-overlay-content {
z-index: 0;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Button, Label, Overlay } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const overlay = new Overlay();
const label = new Label({
class: 'text',
text: 'Dismiss for 1 second?'
});
overlay.append(label);
const btnYes = new Button({
text: 'Yes'
});
btnYes.on('click', () => {
overlay.hidden = true;
setTimeout(() => {
overlay.hidden = false;
}, 1000);
});
overlay.append(btnYes);
document.body.appendChild(overlay.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Panel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { LabelGroup, Panel, TextInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const panel = new Panel({
collapseHorizontally: false,
collapsible: true,
collapsed: false,
headerText: 'Panel Header Text (click to collapse)'
});
for (let i = 1; i <= 10; i++) {
const labelGroup = new LabelGroup({
text: 'Property ' + i,
field: new TextInput()
})
panel.append(labelGroup);
}
document.body.appendChild(panel.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Progress</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Progress } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const progress = new Progress({
value: 0
});
setInterval(() => {
progress.value++;
if (progress.value === 100) {
progress.value = 0;
}
}, 20);
document.body.appendChild(progress.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI RadioButton</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { LabelGroup, RadioButton } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const radioButtons = [];
for (let i = 0; i < 5; i++) {
const radioButton = new RadioButton();
radioButton.on('click', () => {
radioButtons.forEach(radioButton => {
radioButton.value = false;
});
radioButton.value = true;
});
radioButtons.push(radioButton);
const group = new LabelGroup({
text: `Option ${i + 1}`,
field: radioButton
});
document.body.appendChild(group.dom);
}
radioButtons[0].value = true;
</script>
</body>
</html>

View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI SelectInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
.pcui-element.pcui-label-group > .pcui-label:first-child {
width: 175px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { LabelGroup, SelectInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const select = new SelectInput({
options: [
{ t: 'Option 1', v: 1 },
{ t: 'Option 2', v: 2 },
{ t: 'Option 3', v: 3 },
{ t: 'Default', v: 4 }
],
defaultValue: 4,
type: 'number'
});
const labelGroup1 = new LabelGroup({
text: 'SelectInput:',
field: select
});
const selectWithFilter = new SelectInput({
allowInput: true,
options: [
{ t: 'Option 1', v: 1 },
{ t: 'Option 2', v: 2 },
{ t: 'Option 3', v: 3 },
{ t: 'Default', v: 4 }
],
defaultValue: 4,
type: 'number'
});
const labelGroup2 = new LabelGroup({
text: 'SelectInput with Filter:',
field: selectWithFilter
});
document.body.appendChild(labelGroup1.dom);
document.body.appendChild(labelGroup2.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI SliderInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { SliderInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const sliderInput = new SliderInput();
document.body.appendChild(sliderInput.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Spinner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Spinner } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const spinner = new Spinner();
document.body.appendChild(spinner.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI TextAreaInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { TextAreaInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const textAreaInput1 = new TextAreaInput({
readOnly: true,
value: 'This is a read-only, fixed size TextAreaInput.'
});
document.body.appendChild(textAreaInput1.dom);
const textAreaInput2 = new TextAreaInput({
resizable: 'vertical',
width: 500,
value: 'This is an editable, resizable TextAreaInput. Try dragging the resize handle. The element also supports Shift-Enter for new lines.'
});
document.body.appendChild(textAreaInput2.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI TextInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { TextInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const textInput = new TextInput({
value: 'Enter text here...'
});
document.body.appendChild(textInput.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI TreeView</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
.pcui-treeview-item-text,
.pcui-treeview-item-icon {
font-size: 14px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { TreeView, TreeViewItem } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const treeView = new TreeView({
allowRenaming: true
});
const root = new TreeViewItem({
open: true,
text: 'My Drive',
icon: 'E229' // Drive icon
});
treeView.append(root);
const generateChildren = (parent, depth) => {
if (depth > 0) {
for (let i = 0; i < 5; i++) {
const isFolder = depth > 1;
const item = new TreeViewItem({
allowDrop: isFolder,
text: (isFolder ? 'Folder ' : 'File ') + i,
icon: isFolder ? 'E139' : 'E208' // Folder or file icon
});
parent.append(item);
generateChildren(item, depth - 1);
}
}
};
generateChildren(root, 3);
document.body.appendChild(treeView.dom);
</script>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI VectorInput</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { LabelGroup, VectorInput } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
for (let i = 2; i <= 4; i++) {
const group = new LabelGroup({
text: `${i}D Vector`,
field: new VectorInput({
dimensions: i,
min: 0,
max: 1,
placeholder: ['X', 'Y', 'Z', 'W'].slice(0, i),
precision: 4,
step: 0.01
})
});
document.body.appendChild(group.dom);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI Example Browser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
background-color: #364346;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
iframe {
flex-grow: 1;
border: 2px solid rgb(175, 175, 175);
}
.pcui-treeview-item-text,
.pcui-treeview-item-icon {
font-size: 14px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { Container, Panel, TextInput, TreeView, TreeViewItem } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const root = new Container({
flex: true,
flexDirection: 'row',
width: '100%',
height: '100%'
});
document.body.appendChild(root.dom);
const panel = new Panel({
collapseHorizontally: true,
collapsible: true,
scrollable: true,
headerText: 'PCUI Example Browser',
width: 200,
height: '100%'
});
const treeView = new TreeView({
allowRenaming: false,
allowReordering: false,
allowDrag: false
});
const iframe = document.createElement('iframe');
const categories = [
{
categoryName: 'Elements',
examples: [
'ArrayInput',
'BooleanInput',
'Button',
'Canvas',
'Code',
'ColorPicker',
'Divider',
'GradientPicker',
'GridView',
'InfoBox',
'Label',
'LabelGroup',
'Menu',
'NumericInput',
'Overlay',
'Panel',
'Progress',
'RadioButton',
'SelectInput',
'SliderInput',
'Spinner',
'TextAreaInput',
'TextInput',
'TreeView',
'VectorInput'
]
},
{
categoryName: 'Utilities',
examples: [
'Icon Browser',
]
}
];
for (const category of categories) {
const categoryItem = new TreeViewItem({
open: true,
text: category.categoryName
});
treeView.append(categoryItem);
for (const example of category.examples) {
const item = new TreeViewItem({
text: example
});
item.on('select', () => {
const path = category.categoryName.toLowerCase();
const name = example.toLowerCase().replace(/ /g, '-');
iframe.src = `${path}/${name}.html`;
});
categoryItem.append(item);
}
}
const filter = new TextInput({
keyChange: true,
placeholder: 'Filter',
width: 'calc(100% - 14px)'
});
filter.on('change', (value) => {
treeView.filter = value;
});
root.append(panel);
panel.append(filter);
panel.append(treeView);
root.dom.appendChild(iframe);
</script>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PCUI GridView</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #364346;
}
.icon-info > .pcui-label {
font-size: 16px;
line-height: 2;
}
.pcui-gridview-item-text::before {
font-family: pc-icon;
content: attr(data-before);
padding-right: 10px;
}
</style>
<script type="importmap">
{
"imports": {
"@playcanvas/observer": "../../node_modules/@playcanvas/observer/dist/index.mjs",
"@playcanvas/pcui": "../../dist/module/src/index.mjs",
"@playcanvas/pcui/styles": "../../styles/dist/index.mjs"
}
}
</script>
</head>
<body>
<script type="module">
import { GridView, GridViewItem } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles'
const gridView = new GridView({
multiSelect: false
});
const ranges = [
[ 111, 392 ],
[ 394, 415 ],
[ 421, 426 ],
[ 430, 439 ]
];
for (const range of ranges) {
for (let i = range[0]; i <= range[1]; i++) {
const item = new GridViewItem({
class: 'icon-info',
text: `E${i}`
});
const span = item.dom.childNodes[0];
const icon = String.fromCodePoint(parseInt(`E${i}`, 16));
span.setAttribute('data-before', icon);
gridView.append(item);
}
}
document.body.appendChild(gridView.dom);
</script>
</body>
</html>