viewof state = wrapGUI(stateObject)
{
d3.select("#plot").select("div").remove()
d3.select("#plot").append("div").append(()=>{
let plot=Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, {x: "Date", y: "Close"})
]
})
return plot
}
)
}
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:400px;padding:30px 0;display:inline-block;",
theme: Object.assign({}, (opts || {}).theme, {
fontFamily: "'Helvetica', sans-serif",
fontSize: '13px',
}),
}, opts || {}))
.$field.onChanges(e => root.dispatchEvent(new CustomEvent("input")));
root.value = state;
const root2 = document.createElement('div');
root2.id='plot'
root2.style="display:inline-block;"
root.appendChild(root2)
return root;
}
viewof appearance = wrapGUI(State({
borders: true,
primary: '#44ff99',
secondary: '#ff4499',
pixels: 1000,
}))
appearance
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
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
