summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md16
-rw-r--r--cli/commands/site/populate.py19
-rw-r--r--frontend/app/common/form.component.js69
-rw-r--r--frontend/app/views/page/components/page.editor.js2
-rw-r--r--frontend/app/views/tile/handles/tile.image.js4
-rw-r--r--frontend/app/views/tile/handles/tile.link.js8
-rw-r--r--frontend/app/views/tile/handles/tile.script.js4
-rw-r--r--frontend/app/views/tile/handles/tile.text.js8
-rw-r--r--frontend/app/views/tile/handles/tile.video.js2
-rw-r--r--frontend/app/views/tile/tile.utils.js14
-rw-r--r--static/site.html2
11 files changed, 98 insertions, 50 deletions
diff --git a/README.md b/README.md
index dcfa219..9e8cca6 100644
--- a/README.md
+++ b/README.md
@@ -47,9 +47,19 @@ Generate a new migration if you've modified the database:
./cli.py db upgrade head
```
-## Building the site
+Run the frontend demo flask server (port 3000):
```
-npm run build:production
-./cli.py site export --graph swimmer
+yarn demo
+```
+
+To programmatically create pages, modify `cli/commands/site/populate.py`
+
+## Deploying a site
+
+A hypothetical rsync command:
+
+```
+cd data_store/exports/
+rsync -rlptuvz ./last-museum/ lens@garden:swimmer/data_store/exports/last-museum/
```
diff --git a/cli/commands/site/populate.py b/cli/commands/site/populate.py
index 03914b2..b1b9691 100644
--- a/cli/commands/site/populate.py
+++ b/cli/commands/site/populate.py
@@ -1,12 +1,11 @@
import click
-lines = """/static/media/last-museum/juliana-cerqueira-leite/01_JCL_AndyCbs_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/02_JCL_Containers_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/04_JCL_Repshp_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/07_JCL_GmShp_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/10_JCL_StreetPrtSftwr_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/11_JCL_Oscilloscopes_v1.mp4
-""".split("\n")
+lines = """/static/media/last-museum/nicole-foreshew/establishing1.mp4
+/static/media/last-museum/nicole-foreshew/sequence1b.mp4
+/static/media/last-museum/nicole-foreshew/sequence2.mp4
+/static/media/last-museum/nicole-foreshew/sequence3.mp4
+/static/media/last-museum/nicole-foreshew/sequence4.mp4
+/static/media/last-museum/nicole-foreshew/sequence5.mp4""".split("\n")
letters = ['a','b','c','d','e','f','g','h','i','j']
@@ -22,19 +21,19 @@ def cli(ctx):
return None if resp.status_code != 200 else resp.json()
graph_id = 3
- name = "Juliana Cerqueira Leite. Stalfigenia, Chapter "
+ name = "Nicole Foreshew"
index = 0
for url in lines:
# slug = url.split("/")[5].replace(".mp4", "").lower()
- slug = "leite-" + letters[index]
+ slug = "foreshew-" + str(index) # + letters[index]
print(slug)
index += 1
page_data = {
"graph_id": graph_id,
"path": slug,
- "title": name + str(index),
+ "title": name, # + str(index),
"username": "jules",
"description":"",
"settings": {
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index d0ebea3..de1020a 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -23,21 +23,60 @@ export const LabelDescription = props => (
</label>
)
-export const NumberInput = props => (
- <label className={props.error ? 'error' : 'text'}>
- <span>{props.title}</span>
- <input
- type="number"
- required={props.required}
- onChange={props.onChange}
- name={props.name}
- value={props.data[props.name]}
- min={props.min}
- max={props.max}
- step={props.step || 1}
- />
- </label>
-)
+export class NumberInput extends Component {
+ constructor(props) {
+ super(props)
+ this.handleKeyDown = this.handleKeyDown.bind(this)
+ }
+ handleKeyDown(e) {
+ const { min, max, step, data, name, onChange } = this.props
+ const value = data[name]
+ // console.log(e.keyCode)
+ switch (e.keyCode) {
+ case 38: // up
+ if (e.shiftKey) {
+ e.preventDefault()
+ onChange({
+ target: {
+ name,
+ value: Math.min(max, parseFloat(value) + ((step || 1) * 10))
+ }
+ })
+ }
+ break
+ case 40: // down
+ if (e.shiftKey) {
+ e.preventDefault()
+ onChange({
+ target: {
+ name,
+ value: Math.max(min, parseFloat(value) - ((step || 1) * 10))
+ }
+ })
+ }
+ break
+ }
+ }
+ render() {
+ const { props } = this
+ return (
+ <label className={props.error ? 'error' : 'text'}>
+ <span>{props.title}</span>
+ <input
+ type="number"
+ required={props.required}
+ onKeyDown={this.handleKeyDown}
+ onChange={props.onChange}
+ name={props.name}
+ value={props.data[props.name]}
+ min={props.min}
+ max={props.max}
+ step={props.step || 1}
+ />
+ </label>
+ )
+ }
+}
export const ColorInput = props => (
<label className={props.error ? 'error color' : 'text color'}>
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 7e841ef..adf8652 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -178,7 +178,7 @@ class PageEditor extends Component {
const { res } = this.props.page.show
const { settings } = res
const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
- const videoBounds = (res.tiles.length && res.tiles[0].type === 'video') ? {
+ const videoBounds = (res.tiles && res.tiles.length && res.tiles[0].type === 'video') ? {
width: res.tiles[0].settings.width,
height: res.tiles[0].settings.height,
} : this.state.bounds
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index beeb36a..b6d1d78 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform } from 'app/views/tile/tile.utils'
-export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box, videoBounds),
+ transform: generateTransform(tile, box, bounds, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index a87b95f..fb6ec03 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box, videoBounds),
+ transform: generateTransform(tile, box, bounds, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
let content = ""
className += ' ' + tile.settings.align
- style.width = unitsDimension(tile, 'width', videoBounds)
- style.height = unitsDimension(tile, 'height', videoBounds)
+ style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+ style.height = unitsDimension(tile, 'height', bounds, videoBounds)
return (
<div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 444a56b..47d83a1 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform } from 'app/views/tile/tile.utils'
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box, videoBounds),
+ transform: generateTransform(tile, box, bounds, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 172212a..0bcccc9 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box, videoBounds),
+ transform: generateTransform(tile, box, bounds, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
}
let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
className += ' ' + tile.settings.align
- style.width = unitsDimension(tile, 'width', videoBounds)
- style.height = unitsDimension(tile, 'height', videoBounds)
+ style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+ style.height = unitsDimension(tile, 'height', bounds, videoBounds)
style.fontFamily = tile.settings.font_family
style.fontSize = tile.settings.font_size + 'px'
style.lineHeight = 1.5
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 271a671..a34d348 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -59,7 +59,7 @@ export default class TileVideo extends Component {
let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
// console.log(tile)
const style = {
- transform: generateTransform(tile, box, videoBounds),
+ transform: generateTransform(tile, box, bounds, videoBounds),
opacity: tile.settings.opacity,
}
let className = ['tile', tile.type].join(' ')
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index ed1cbc8..46d7764 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,4 +1,4 @@
-export const generateTransform = (tile, box, videoBounds) => {
+export const generateTransform = (tile, box, bounds, videoBounds) => {
let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
if (is_tiled) {
return 'translateZ(0)'
@@ -18,8 +18,8 @@ export const generateTransform = (tile, box, videoBounds) => {
}
// if (x % 2 == 1) x += 0.5
// if (y % 2 == 1) y += 0.5
- const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
- const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+ const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
+ const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
transform.push('translateX(' + xUnits + ')')
transform.push('translateY(' + yUnits + ')')
@@ -63,18 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
return style
}
-export const unitsDimension = (tile, dimension, videoBounds) => {
+export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
const value = tile.settings[dimension]
if (!value) return "auto"
if (tile.settings.units) {
if (tile.settings.units === 'video') {
- return videoUnits(value, videoBounds)
+ return videoUnits(value, bounds, videoBounds)
}
return value + tile.settings.units
}
return value + "px"
}
-export const videoUnits = (value, videoBounds) => (
- (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+export const videoUnits = (value, bounds, videoBounds) => (
+ Math.round(value / videoBounds.width * bounds.width) + 'px'
) \ No newline at end of file
diff --git a/static/site.html b/static/site.html
index e19847b..1412da5 100644
--- a/static/site.html
+++ b/static/site.html
@@ -12,7 +12,7 @@
<body>
<script>
var s = document.createElement('script');
- s.setAttribute('src', 'BUNDLE_PATH?' + (Date.now() / 3600))
+ s.setAttribute('src', 'BUNDLE_PATH?' + Math.round(Date.now() / 30000))
document.body.appendChild(s)
</script>
</html>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:29:03 +0000