convert image settings to a panel in the in-tab UI case, incorporate imageData work...
[mandelbrot.git] / xulapp / chrome / mandelbrot / content / mandelbrot-tab.xul
index a802ff5d1f051d6eef259ed1c4d41cbac8ba735a..1f15fb3f4c93f3bd065c199e4a869746165f1833 100644 (file)
@@ -47,6 +47,8 @@
   %brandDTD;
   <!ENTITY % mandelbrotDTD SYSTEM "chrome://mandelbrot/locale/mandelbrot.dtd">
   %mandelbrotDTD;
+  <!ENTITY % imgSettingsDTD SYSTEM "chrome://mandelbrot/locale/image-settings.dtd">
+  %imgSettingsDTD;
 ]>
 
 <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       </toolbarbutton>
     </toolbar>
   </toolbox>
+  <panel id="imgSettingsPanel"
+         level="floating"
+         titlebar="normal"
+         noautohide="true"
+         close="true"
+         onpopupshowing="initImgSettings();"
+         onpopuphiding="saveImgSettings();"
+         label="&imageSettings.title;">
+    <titlebar><label value="&imageSettings.title;"/></titlebar>
+    <groupbox>
+      <caption label="&coord.title;"/>
+      <description value="&coord.real.label;" class="coord-caption"/>
+      <hbox align="center">
+        <label value="&coord.min.label;" control="is_Cr_min"/>
+        <textbox id="is_Cr_min" size="10"
+                 onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'scale');"/>
+        <label value="&coord.max.label;" control="is_Cr_max"/>
+        <textbox id="is_Cr_max" size="10"
+                 onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'scale');"/>
+        <label value="&coord.scale.label;" control="is_Cr_scale"/>
+        <textbox id="is_Cr_scale" size="10"
+                 onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'max');"/>
+      </hbox>
+      <separator class="thin"/>
+      <description value="&coord.imag.label;" class="coord-caption"/>
+      <hbox align="center">
+        <label value="&coord.min.label;" control="is_Ci_min"/>
+        <textbox id="is_Ci_min" size="10"
+                 onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'scale');"/>
+        <label value="&coord.max.label;" control="is_Ci_max"/>
+        <textbox id="is_Ci_max" size="10"
+                 onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'scale');"/>
+        <label value="&coord.scale.label;" control="is_Ci_scale"/>
+        <textbox id="is_Ci_scale" size="10"
+                 onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'max');"/>
+      </hbox>
+    </groupbox>
+
+    <hbox flex="1">
+      <groupbox>
+        <caption label="&img.size.title;"/>
+        <hbox align="center">
+          <label value="&img.width.label;" control="is_img_width"/>
+          <textbox id="is_img_width" size="4"
+                   onchange="checkISValue(this, 'dim'); recalcCoord('Ci', 'scale');"/>
+        </hbox>
+        <hbox align="center">
+          <label value="&img.height.label;" control="is_img_height"/>
+          <textbox id="is_img_height" size="4"
+                   onchange="checkISValue(this, 'dim'); recalcCoord('Cr', 'scale');"/>
+        </hbox>
+      </groupbox>
+
+      <groupbox>
+        <caption label="&preview.title;"/>
+        <hbox flex="1" pack="center" align="center">
+          <html:canvas id="is_mbrotPreview" width="50" height="50"></html:canvas>
+        </hbox>
+        <button id="is_previewButton" label="&previewDraw.label;" oncommand="drawPreview();"/>
+      </groupbox>
+
+      <groupbox>
+        <caption label="&options.title;"/>
+        <hbox align="center">
+          <checkbox id="is_syncProp"
+                    onclick="checkProportions();"/>
+          <label value="&syncProp.label;" control="is_syncProp"/>
+        </hbox>
+      </groupbox>
+    </hbox>
+    <hbox>
+      <button id="is_closeButton" label="&closeSettings.label;" oncommand="closeImgSettings();"/>
+      <spacer flex="1"/>
+      <button id="is_drawButton" label="&DrawImageButton.label;" oncommand="closeImgSettings(); drawImage();"/>
+    </hbox>
+  </panel>
   <hbox flex="1" pack="center" align="center">
     <stack>
       <html:canvas id="mbrotImage" width="300" height="300"