summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/client/modules/biggan/views/biggan.categoryList.js57
-rw-r--r--app/client/modules/biggan/views/biggan.live.js12
-rw-r--r--public/assets/css/css.css71
3 files changed, 118 insertions, 22 deletions
diff --git a/app/client/modules/biggan/views/biggan.categoryList.js b/app/client/modules/biggan/views/biggan.categoryList.js
index 4285f3f..e1cc2d1 100644
--- a/app/client/modules/biggan/views/biggan.categoryList.js
+++ b/app/client/modules/biggan/views/biggan.categoryList.js
@@ -6,49 +6,71 @@ import {
Loading
} from '../../../common/'
-import * as liveActions from '../../../live/live.actions'
+import actions from '../../../actions'
import * as bigganTasks from '../biggan.tasks'
import * as bigganActions from '../biggan.actions'
const ALL_CATEGORIES = 'inversion/categories/biggan_all.json'
-class CategoryList extends Component {
+class BigGANCategoryList extends Component {
state = {
loading: true,
+ error: false,
categories: {},
q: "",
fn: "",
}
constructor(props) {
+ super(props)
this.loadCategories(ALL_CATEGORIES)
}
loadCategories(fn) {
this.setState({ loading: true, fn })
+ console.log("fetching", fn)
actions.socket
- .read_file({ module, fn })
+ .read_file({ module: "biggan", fn })
.then(({ name, buf }) => {
+ console.log("fetched", fn)
+ const categoryJSON = String.fromCharCode.apply(null, new Uint8Array(buf))
+ const categories = JSON.parse(categoryJSON)
this.setState({
- categories: String.fromCharCode.apply(null, new Uint8Array(buf)),
+ categories,
loading: false,
})
+ }).catch(() => {
+ this.setState({ error: true })
})
}
- loadCategory(index) {
- actions.live.send_command('loadCategory', str(index))
+ setCategory(index) {
+ actions.live.send_command('setCategory', String(index))
+ }
+
+ updateQuery(q) {
+ this.setState({ q }, () => {
+ this.categoryRef.scrollTo(0, 0)
+ })
}
render() {
const { loading, q } = this.state
if (loading) {
- return <div><Loading /></div>
+ return <div className="categories"><Loading /></div>
}
return (
<div>
- <input type="text" value={q} onInput={e => this.setState({ q: e.target.value })} />
- <div className="categories">
+ <div className="search_form">
+ <div class='button'></div>
+ <input
+ type="text"
+ className="categorySearch"
+ value={q}
+ onInput={e => this.updateQuery(e.target.value)}
+ />
+ </div>
+ <div className="categories" ref={ref => this.categoryRef = ref}>
{this.renderGroup("inanimate")}
{this.renderGroup("animate")}
</div>
@@ -58,23 +80,24 @@ class CategoryList extends Component {
renderGroup(groupName) {
const { categories, q } = this.state
- const qRegexp = new Regexp(q || ".*")
- const group = categories[group_name]
+ const qRegExp = new RegExp(q || ".*")
+ const group = categories[groupName]
+ // console.log(group)
const groups = Object.keys(group).map(key => {
const category = group[key]
const categoryGroup = Object.keys(category).map(categoryName => {
- if (!categoryName.match(qRegexp)) {
+ if (!categoryName.match(qRegExp)) {
return null
}
return (
- <a key={categoryName} onClick={() => this.loadCategory(category[categoryName])}>
+ <a key={categoryName} onClick={() => this.setCategory(category[categoryName])}>
{categoryName}
- </a>}
+ </a>
)
}).filter(g => !! g)
return !categoryGroup.length ? null : (
<div key={key}>
- <h3>{category}</h3>
+ <h3>{key}</h3>
{categoryGroup}
</div>
)
@@ -84,7 +107,7 @@ class CategoryList extends Component {
}
return (
<div>
- <h2>{groupName}</h2>
+ {groupName === "animate" ? <h2>{groupName}</h2> : null}
{groups}
</div>
)
@@ -99,8 +122,6 @@ const mapStateToProps = state => ({
const mapDispatchToProps = (dispatch, ownProps) => ({
actions: {
- live: bindActionCreators(liveActions, dispatch),
- socket: bindActionCreators(socketActions, dispatch),
}
})
diff --git a/app/client/modules/biggan/views/biggan.live.js b/app/client/modules/biggan/views/biggan.live.js
index 20cffe8..af1edea 100644
--- a/app/client/modules/biggan/views/biggan.live.js
+++ b/app/client/modules/biggan/views/biggan.live.js
@@ -13,6 +13,7 @@ import * as liveActions from '../../../live/live.actions'
import * as queueActions from '../../../queue/queue.actions'
import * as bigganTasks from '../biggan.tasks'
import * as bigganActions from '../biggan.actions'
+import BigGANCategoryList from './biggan.categoryList.js'
class BigGANLive extends Component {
constructor(props) {
@@ -20,7 +21,7 @@ class BigGANLive extends Component {
props.actions.live.get_params()
}
start(){
- console.log(this.props.opt)
+ // console.log(this.props.opt)
console.log('starting up!')
this.props.actions.tasks.live_task({
// folder_id: this.props.biggan.data.resultsFolder.id,
@@ -31,7 +32,7 @@ class BigGANLive extends Component {
}
render() {
const { biggan, actions } = this.props
- console.log(actions)
+ // console.log(actions)
// if (biggan.loading) {
// return <Loading progress={biggan.progress} />
// }
@@ -98,8 +99,8 @@ class BigGANLive extends Component {
>{"Spin"}</Button>
<Slider live
name='orbit_noise_speed'
- title={"Noise Speed"}
- min={0} max={1} type='float'
+ title={"Shuffle Speed"}
+ min={0} max={4} type='float'
/>
</Group>
@@ -116,6 +117,9 @@ class BigGANLive extends Component {
/>
</Group>
</div>
+ <div className='params column'>
+ <BigGANCategoryList />
+ </div>
</div>
</div>
)
diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 5e9bf1f..4e53637 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -653,9 +653,80 @@ input.small {
opacity: 0.4;
white-space: nowrap;
}
+
+/* biggan */
.biggan .last_message {
height: 15px;
}
+.biggan .categories {
+ overflow: scroll;
+ width: 260px;
+ height: 400px;
+}
+.biggan .categorySearch {
+ width: 220px;
+}
+.biggan .categories h2 {
+ margin-top: 3px;
+ margin-bottom: 3px;
+}
+.biggan .categories h3 {
+ margin-top: 3px;
+ margin-bottom: 3px;
+}
+.biggan .categories a {
+ cursor: pointer;
+ display: block;
+ padding: 2px;
+ margin-left: -2px;
+ margin-right: 5px;
+ color: #11d;
+}
+.biggan .categories a:hover {
+ color: #000;
+ text-decoration: underline;
+}
+.biggan .search_form {
+ margin-top: -4px;
+ width: 260px;
+}
+
+/* search form */
+.search_form {
+ margin-bottom: 10px;
+}
+.search_form .button {
+ background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E%0A%09%3Cg fill=%22none%22 stroke=%22%2354595d%22 stroke-width=%222%22%3E%0A%09%09%3Cpath d=%22M11.29 11.71l-4-4%22/%3E%0A%09%09%3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E%0A%09%3C/g%3E%0A%3C/svg%3E%0A");
+ background-position: center center;
+ background-repeat: no-repeat;
+ width: 16px; height: 16px;
+ position: relative;
+ top: 3px;
+ display: inline-block;
+}
+.search_form input[type='text'] {
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
+ border-bottom: 1px solid #888;
+ padding-left: 3px;
+ padding-bottom: 3px;
+ font-size: 14px;
+ font-family: 'Trebuchet MS', sans-serif;
+ background: transparent;
+ outline: 0;
+ transition: background 200ms;
+ background: transparent;
+}
+.search_form input[type='text']:invalid {
+ background: transparent;
+}
+.search_form input[type='text']:focus {
+ border-bottom: 1px solid #211;
+ border-radius: 2px 2px 0 0;
+ color: #211;
+}
+
/* pix2wav */
.audioParams {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 11:42:57 +0000