Skip to content

Commit

Permalink
palette tweaks in the web ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@nedbat
nedbat committed Jul 12, 2021
1 parent 45a176b commit ba6496f
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 12 deletions.
7 changes: 7 additions & 0 deletions src/aptus/web/server.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ class ComputeSpec(pydantic.BaseModel):
continuous: bool
iter_limit: int
palette: list
palette_tweaks: dict

class TileRequest(pydantic.BaseModel):
spec: ComputeSpec
Expand All @@ -90,6 +91,12 @@ async def tile(
compute.continuous = spec.continuous
compute.iter_limit = spec.iter_limit
compute.palette = Palette().from_spec(spec.palette)
compute.palette_phase = spec.palette_tweaks.get("phase", 0)
compute.palette_scale = spec.palette_tweaks.get("scale", 1.0)
compute.palette.adjust(
hue=spec.palette_tweaks.get("hue", 0),
saturation=spec.palette_tweaks.get("saturation", 0),
)

gparams = compute.grid_params().subtile(*spec.coords)
compute.create_mandel(gparams)
Expand Down
70 changes: 63 additions & 7 deletions src/aptus/web/static/aptus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,16 @@ const View = {
this.palette_index = 0;
this.set_canvas_size("*");
this.tiles_pending = 0;
this.reset_palette_tweaks();
},

reset_palette_tweaks() {
this.palette_tweaks = {
phase: 0,
scale: 1,
hue: 0,
saturation: 0,
}
},

set_center(r, i) {
Expand Down Expand Up @@ -102,10 +112,6 @@ const View = {
this.reqseq += 1;
const imageurls = [];
const palette = [...palettes[this.palette_index]];
//palette.push(["adjust", {hue: 120, saturation: 0}]);
//palette.push(["stretch", {steps: 3, hsl: true}]);
//palette = [["spectrum", {ncolors: 16, l: [100, 150], s: [100, 175]}], ["stretch", {steps: 10, hsl: true, ease: get_input_value("#ease")}]];
//palette.push(["stretch", {steps: 2, hsl: true, ease: get_input_value("#ease")}]);
//palette = [
// ["spectrum", {
// ncolors: get_input_value("#ncolors"),
Expand Down Expand Up @@ -146,6 +152,7 @@ const View = {
continuous: this.continuous,
iter_limit: this.iter_limit,
palette,
palette_tweaks: this.palette_tweaks,
},
};
imageurls.push(tile);
Expand Down Expand Up @@ -382,13 +389,13 @@ const App = {
return;
}

//console.log("key:", ev.key, "shift:", ev.shiftKey, "ctrl:", ev.ctrlKey, "meta:", ev.metaKey, "alt:", ev.altKey);
// console.log("key:", ev.key, "shift:", ev.shiftKey, "ctrl:", ev.ctrlKey, "meta:", ev.metaKey, "alt:", ev.altKey);
let key = ev.key;

// Mac option chars need to be mapped back to their original chars.
if (platform() === "mac") {
const oldkey = "¯˘·‚";
const newkey = "<>()";
const oldkey = "¯˘·‚“‘”’…æÚÆ";
const newkey = "<>()[]{};':\"";
const i = oldkey.indexOf(key);
if (i >= 0) {
key = newkey[i];
Expand Down Expand Up @@ -474,6 +481,55 @@ const App = {
this.view.paint();
break;

case ",":
this.view.palette_tweaks.phase -= 1;
this.view.paint();
break;

case ".":
this.view.palette_tweaks.phase += 1;
this.view.paint();
break;

case ";":
if (this.view.continuous) {
this.view.palette_tweaks.scale /= (ev.altKey ? 1.01 : 1.1);
this.view.paint();
}
break;

case "'":
if (this.view.continuous) {
this.view.palette_tweaks.scale *= (ev.altKey ? 1.01 : 1.1);
this.view.paint();
}
break;

case "[":
this.view.palette_tweaks.hue -= (ev.altKey ? 1 : 10);
this.view.paint();
break;

case "]":
this.view.palette_tweaks.hue += (ev.altKey ? 1 : 10);
this.view.paint();
break;

case "{":
this.view.palette_tweaks.saturation -= (ev.altKey ? 1 : 10);
this.view.paint();
break;

case "}":
this.view.palette_tweaks.saturation += (ev.altKey ? 1 : 10);
this.view.paint();
break;

case "0":
this.view.reset_palette_tweaks();
this.view.paint();
break;

case "?":
Panels.toggle_panel("#helppanel");
break;
Expand Down
23 changes: 18 additions & 5 deletions src/aptus/web/templates/mainpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
<body>
<div id="the_view"></div>

{% set altnote -%}
*
{%- endset %}

{% set alt -%}
<b><span class="notmac">alt</span><span class="mac">option</span></b>
{%- endset %}
Expand All @@ -30,20 +34,29 @@
<kbd>a</kbd> set the angle<br/>
<kbd>c</kbd> toggle continuous coloring<br/>
<kbd>i</kbd> set the iteration limit<br/>
<kbd>I</kbd> show the computation parameters panel<br/>
<kbd>P</kbd> show the palette parameters panel<br/>
<kbd>I</kbd> toggle the computation parameters panel<br/>
<!--
<kbd>P</kbd> toggle the palette parameters panel<br/>
-->
<kbd>r</kbd> redraw<br/>
<kbd>R</kbd> reset everything<br/>
<kbd>w</kbd> set the canvas size<br/>
<kbd>(</kbd> <kbd>)</kbd> rotate the angle {{altnote}}<br/>
<kbd>&lt;</kbd> <kbd>&gt;</kbd> cycle through palettes<br/>
<kbd>(</kbd> <kbd>)</kbd> rotate the angle (+{{alt}}: just a little)<br/>
<kbd>,</kbd> <kbd>.</kbd> cycle the palette one color<br/>
<kbd>;</kbd> <kbd>'</kbd> stretch the colors, if continuous {{altnote}}<br/>
<kbd>[</kbd> <kbd>]</kbd> adjust the hue {{altnote}}<br/>
<kbd>{</kbd> <kbd>}</kbd> adjust the saturation {{altnote}}<br/>
<kbd>0</kbd> (zero) reset all color adjustments<br/>
<kbd>?</kbd> toggle help panel<br/>
</p>
<p>
<b>click</b>: zoom in (+{{alt}}: just a little)<br/>
<b>shift-click</b>: zoom out (+{{alt}}: just a little)<br/>
<b>click</b>: zoom in {{altnote}}<br/>
<b>shift-click</b>: zoom out {{altnote}}<br/>
<b>click-drag</b>: select new viewing rectangle<br/>
<b>shift-click-drag</b>: pan the view<br/>
<br/>
{{altnote}} +{{alt}}: just a little<br/>
</p>
</div>

Expand Down

0 comments on commit ba6496f

Please sign in to comment.