diff --git a/ui (gen4)/e.js b/ui (gen4)/e.js
new file mode 100644
index 00000000..351d5254
--- /dev/null
+++ b/ui (gen4)/e.js
@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+/**********************************************************************
+*
+* ImageGrid.Viewer Electron entry point...
+*
+*
+**********************************************************************/
+
+var electron = require('electron')
+var app = electron.app
+var BrowserWindow = electron.BrowserWindow
+
+var path = require('path')
+var url = require('url')
+
+
+
+/*********************************************************************/
+
+var win
+
+
+function createWindow () {
+ // Create the browser window.
+ win = new BrowserWindow({width: 800, height: 600})
+
+ // and load the index.html of the app.
+ win.loadURL(url.format({
+ pathname: path.join(__dirname, 'index.html'),
+ protocol: 'file:',
+ slashes: true
+ }))
+
+ // Open the DevTools.
+ win.webContents.openDevTools()
+
+ // Emitted when the window is closed.
+ win.on('closed', () => {
+ // Dereference the window object, usually you would store windows
+ // in an array if your app supports multi windows, this is the time
+ // when you should delete the corresponding element.
+ win = null
+ })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+ // On macOS it is common for applications and their menu bar
+ // to stay active until the user quits explicitly with Cmd + Q
+ process.platform !== 'darwin'
+ && app.quit()
+})
+
+app.on('activate', () => {
+ // On macOS it's common to re-create a window in the app when the
+ // dock icon is clicked and there are no other windows open.
+ win === null
+ && createWindow()
+})
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 : */
diff --git a/ui (gen4)/experiments/preact-ribbons.html b/ui (gen4)/experiments/preact-ribbons.html
new file mode 100755
index 00000000..8975045f
--- /dev/null
+++ b/ui (gen4)/experiments/preact-ribbons.html
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui (gen4)/features/ui-preact-render.js b/ui (gen4)/features/ui-preact-render.js
index 0f88d8a0..735b363f 100755
--- a/ui (gen4)/features/ui-preact-render.js
+++ b/ui (gen4)/features/ui-preact-render.js
@@ -41,8 +41,30 @@ var ribbons = require('imagegrid/ribbons')
// - ribbon-set
// - ribbon-locator
// - current-indicator (???)
+//
+// * this is static and only created once...
class IGRibbonSet extends preact.Component {
render(props, state){
+
+ // XXX need:
+ // - scale
+ // - ribbons
+
+ var ribbons = data.ribbon_order
+ .map(function(gid){ return h(IGRibbon, {
+ ribbon: gid,
+ // XXX
+ }) })
+
+ return h('div.ribbon-set',
+ {
+ style: {
+ transform: 'scale('+ s +', '+ s +')',
+ },
+ }, [
+ h('div.current-marker'),
+ h('div.ribbon-locator', null, ribbons),
+ ])
}
}