diff --git a/README.md b/README.md
index 4b0a373..44f951e 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,17 @@
# Client Side Browser Generator for Gridfinity
-Live here (probably):
+Live here (probably): https://hamza-anver.github.io/Gridfinity-Generator/
This was made just for fun over a weekend, as an exercise in web dev
it is an abominable mix of code, but it hopefully works
Derived from https://github.com/vector76/Web_OpenSCAD_Customizer, and modified poorly to try and have an improved UX
+## Future improvements:
+- Refactor code so it isn't a nightmare
+- Allow saving state in browser
+- Allow for more future variations of gridfinity to be generated
+- Improve user input validation
+
All credit goes to their respective owners, all mistakes and fuckups are mine.
Zack Freedman - Creator of Gridfinity
Vector76 (Jamie) - Made the web based editor for gridfinity this is based on and the OpenSCAD file
diff --git a/css/custom_styles.css b/css/custom_styles.css
index 7242386..1a533bb 100644
--- a/css/custom_styles.css
+++ b/css/custom_styles.css
@@ -122,43 +122,53 @@
}
.form-group {
- overflow: hidden;
- height: 100%;
- width: 100%;
+ overflow: visible;
}
- .stl-viewer{
- height:100%;
- width: 100%;
+ .stl-viewer {
+ height: 100vh;
}
- .settings-menu{
- overflow: hidden;
- position: absolute;
- z-index: 99999;
- background-color: rgb(255, 255, 255);
+ .settings-menu {
+ overflow: hidden;
+ position: absolute;
+ z-index: 99999;
+ background-color: rgb(255, 255, 255);
}
.hide {
- display: none;
-}
-
-.show {
- display: block;
-}
-
-.btn-link-correct{
- padding: 1rem;
-}
-
-.inputcolor {
- width: 150px;
- height: 32px;
- padding: 0 10px;
- border: 1px solid #ccc;
- border-radius: 5px;
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
- box-sizing: border-box;
-}
\ No newline at end of file
+ display: none;
+ }
+
+ .show {
+ display: block;
+ }
+
+ .btn-link-correct {
+ padding: 1rem;
+ }
+
+ .inputcolor {
+ width: 150px;
+ height: 32px;
+ padding: 0 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ box-sizing: border-box;
+ }
+
+ .container-moi {
+ margin-left: 10vw;
+ margin-right: 10vw;
+ }
+
+ .param-group-moi {
+ height: 100%;
+ }
+
+ .param-item-moi {
+ padding: 1;
+ }
diff --git a/index.html b/index.html
index 8ff6d18..675d525 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,9 @@
+
+
+
Gridfinity Generator
@@ -30,7 +33,7 @@
-
+
Gridfinity Generator
@@ -43,44 +46,53 @@ Gridfinity Generator
+
+
+
Download
@@ -207,7 +243,6 @@
Gridfinity Generator
-
diff --git a/main.js b/main.js
index 68c9e49..e76d912 100644
--- a/main.js
+++ b/main.js
@@ -51,6 +51,38 @@ const model_default_params = {
lip_style: "Normal",
};
+// Not an elegant approach but it should work
+// Will probably regret later if I work on it
+// Seems to be a theme now
+const model_param_mapping = {
+ Normal: "normal",
+ Reduced: "reduced",
+ None: "none",
+ "No Label": "disabled",
+ Left: "left",
+ Right: "right",
+ Center: "center",
+ "Left Chamber": "leftchamber",
+ "Right Chamber": "rightchamber",
+ "Center Chamber": "centerchamber",
+};
+
+const model_param_desriptions = {
+ width: "Number of grid units left-to-right (x axis)",
+ depth: "Number of grid units front-to-back (y axis)",
+ height: "Height of bin in standard units (multiples of 7 mm)",
+ magnet_diameter: "Include hole for magnet (Zack's design is 6.5 mm) or 0 to omit magnet hole",
+ screw_depth: "Include deeper narrow hole for screw (Zack's design is 6 mm) or 0 to omit screw hole",
+ hole_overhang_remedy: "If both screw and magnet are defined, include feature for better printing of magnet/screw overhang",
+ chambers: "Number of subdivisions along x axis (uniform divisions)",
+ withLabel: "Include overhang for label and control position, can be 'disabled', 'left', 'right', 'center', 'leftchanber', 'rightchamber', or 'centerchamber'",
+ fingerslide: "Include large corner fillet on the front",
+ labelWidth: "Width of label in number of units, or zero to indicate full width",
+ wall_thickness: "Thickness of outer walls (Zack's design is 0.95)",
+ efficient_floor: "Efficient floor option saves material and time, but the floor is not smooth (only applies if no magnets, screws, or finger-slide used)",
+ lip_style: "Style of lip at top of walls, can be 'normal', 'reduced', or 'none'",
+ };
+
function paramSetDefaults() {
for (var param in model_default_params) {
const defaultValue = model_default_params[param];
@@ -93,8 +125,8 @@ function getFormProp(prop) {
return Number(propElt.value);
}
else {
- // console.log("forcing element " + prop + " to string '" + String(propElt.value) + "'.");
- return String(propElt.value); // force to string
+ const mappedString = model_param_mapping[propElt.value];
+ return String(mappedString); // force to string after mapping
}
}
@@ -111,10 +143,6 @@ function settingsDefault() {
};
-function getCamerastate(){
- console.log(stlViewer.get_camera_state());
-};
-
settingsDefault();
var settingsVis = false;
@@ -511,6 +539,11 @@ try {
onStateChanged({ allowRun: false });
};
+ stlViewerElement.onclick = () => {
+ if(settingsVis){ SettingsMenuToggle();};
+ if(renderinfoVis){ renderInfoToggle();};
+ }
+
const initialState = defaultState;
setState(initialState);