Published
Edited
Apr 22, 2020
4 forks
Importers
47 stars
viewof state = wrapGUI(stateObject)
stateObject = State({
instructions: State.Raw(h =>
h(
'p',
null,
`
Hello! This is just a prototype of a controls widget I've been
iterating on for a while. Modify the values and observe the
effect it has on the output!`
)
),
name: 'controls-state + controls-gui Prototype',
color: '#4499ff',
'say hi': () => console.log('Hello!'),
simulation: {
running: false,
method: State.Select('RK2', { options: ['Euler', 'RK2', 'RK4', 'RK45'] }),
iterations: State.Slider(10, { min: 0, max: 20, step: 1 }),
shape: { width: 640, height: 480 }
},
jsonOutput: State.Section(
{
output: State.Raw((h, { state }) =>
h('pre', null, JSON.stringify(state, null, 2))
)
},
{ enumerable: false, label: 'JSON Output' }
)
})
state
GUI = require('https://unpkg.com/controls-gui@1.2.1/dist/controls-gui.min.js')
State = require('https://unpkg.com/controls-state@1.1.1/dist/controls-state.min.js')
function wrapGUI (state, opts) {
const root = document.createElement('div');
const gui = GUI(state, Object.assign({
root: root,
containerCSS: "max-width:350px;padding:30px 0;",
theme: Object.assign({}, (opts || {}).theme, {
fontFamily: "'Helvetica', sans-serif",
fontSize: '13px',
}),
}, opts || {}))
.$field.onChanges(e => root.dispatchEvent(new CustomEvent("input")));
root.value = state;
return root;
}
viewof appearance = wrapGUI(State({
borders: true,
primary: '#44ff99',
secondary: '#ff4499',
pixels: 1000,
}))
appearance
appearance.pixels
JSON.stringify(appearance)
wrapGUI(State({
borders: State.Checkbox(true, {label: 'Borders'}),
primary: State.Color('#44ff99', {label: 'Primary Color'}),
secondary: State.Color('#ff4499', {label: 'Secondary Color'}),
pixels: State.Slider(1000, {label: 'Width in pixels'}),
}))
wrapGUI(State({
field1: true,
field2: 10,
}), {
containerCSS: 'transform:rotate(10deg); padding:50px 0; max-width:250px;'
})
wrapGUI(State({
field1: true,
field2: '#99ff44',
field3: 'text content',
field4: 7,
field5: () => console.log('action!')
}))
viewof tabGui = wrapGUI(State({
tabs: State.Tabs({
geometry: {
width: 640,
height: 480
},
appearance: State.Section({
primary: '#4499ff',
secondary: '#99ff44'
}, {label: 'Appearance'}),
simulation: true
})
}))
JSON.stringify(tabGui, null, 2)
viewof htmlExample = wrapGUI(State({
instructions: State.Raw(h => h('p', null, 'Hi!'))
}))
htmlExample
wrapGUI(State({
value: 10,
feedback: State.Raw((h, {state}) => h('p', null, `You've set value = ${state.value}`))
}))
viewof animation = wrapGUI(State({
animatedValue: State.Slider(0, {min: -1, max: 1, step: 0.0001})
}))
//(animation.animatedValue = Math.sin(((now % 6000) / 3000) * Math.PI))
animation.animatedValue
wrapGUI(State({
field1: true,
field2: '#99ff44',
field3: 'text content',
field4: 7,
field5: () => console.log('action!')
}), {
theme: {
fontFamily: "monospace",
fontSize: '14px',
fontColor: 'black',
controlBgColor: 'white',
controlBorderRadius: '2px',
controlBorderColor: '#aaa',
fieldBgColor: 'white',
fieldHoverColor: '#f8f8f8',
fieldActiveColor: '#ddd',
fieldBorderColor: '#ccc',
fieldHeight: 26,
sectionHeadingColor: 'white',
sectionHeadingBgColor: '#28e',
sectionHeadingHoverColor: '#5af',
sectionHeadingBorderColor: '#28e',
sectionHeadingHeight: 30,
visibilityFontColor: '#fff',
sliderThumbColor: '#aaa',
focusBorderColor: '#888',
}
})
viewof secondGUI = wrapGUI(stateObject, {
style: false,
className: 'secondControlPanel'
})
viewof countField = wrapGUI(State.Slider(8, {label: 'count'}))
countField.value
viewof sectionField = wrapGUI(State.Section({count: 8}, {label: 'Panel'}))
sectionField.value
sectionField === sectionField.value.$field
fullState = State({
group1: State.Section({
color: '#ff9944',
size: 14
}, {label: 'Group 1'}),
group2: State.Section({
color: '#9944ff',
size: 17
}, {label: 'Group 2'}),
})
viewof partialState1 = wrapGUI(fullState.group1)
viewof partialState2 = wrapGUI(fullState.group2)
JSON.stringify(fullState)
partialState1
partialState2
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.