Skip to content

Commit

Permalink
Tool tips and css, css hurts my soul
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hamza-Anver
Hamza-Anver committed Apr 20, 2024
1 parent c77fcc5 commit bba65f2
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 63 deletions.
8 changes: 7 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -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 <br>
it is an abominable mix of code, but it hopefully works <br>

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. <br>
<a href="https://zackfreedman.com/">Zack Freedman</a> - Creator of Gridfinity <br>
<a href="https://github.com/vector76">Vector76 (Jamie)</a> - Made the web based editor for gridfinity this is based on and the OpenSCAD file<br>
Expand Down
76 changes: 43 additions & 33 deletions css/custom_styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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;
}
81 changes: 58 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title id="page-title">Gridfinity Generator</title>
<script src="deps/three.min.js" defer></script>
<script src="deps/Projector.js" defer></script>
Expand Down Expand Up @@ -30,7 +33,7 @@
</head>

<body class="hack standard">
<div class="main container">
<div class="main container-moi">
<h1>Gridfinity Generator
<span id="header-message"></span>
</h1>
Expand All @@ -43,44 +46,53 @@ <h1>Gridfinity Generator
</div>
<br>
<div class="form-group">
<label for="width">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Width (✕42mm):
</label>
<div class="cell param-item-moi">
<label for="width">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Width (✕42mm):
</label>
<input id="width" type="number" class="form-control">
</div>

<input id="width" type="number" class="form-control">
<div class="cell param-item-moi">
<label for="depth">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Depth along y-axis, in multiples of 42mm (grid size)"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Depth (✕42mm):
</label>
<input id="depth" type="number" class="form-control">
</div>

<div class="cell param-item-moi">
<label for="height">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Height, in multiples of 7mm"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Height (✕7mm):
</label>
<input id="height" type="number" class="form-control">
</div>

<div class="cell param-item-moi">
<label for="wall_thickness">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Thickness of outer wall in mm"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Wall Thickness:
</label>
<input id="wall_thickness" type="number" class="form-control">
</div>

<div class="cell param-item-moi">
<label for="lip_style">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Style of lip at top of walls"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Expand All @@ -91,37 +103,45 @@ <h1>Gridfinity Generator
<option>Reduced</option>
<option>None</option>
</select>
</div>

<div class="cell param-item-moi">
<label for="magnet_diameter">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Diameter of hole for magnet insertion, 0 omits the hole"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Magnet Diameter:
</label>
<input id="magnet_diameter" type="number" class="form-control">
</div>

<div class="cell param-item-moi">
<label for="screw_depth">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Depth of narrow screw hole, 0 omits the hold"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Screw Depth:
</label>
<input id="screw_depth" type="number" class="form-control">

</div>

<div class="cell param-item-moi">
<label for="chambers">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Number of subdivisions along x-axis (uniformly distributed)"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Chambers:
</label>
<input id="chambers" type="number" class="form-control">
</div>

<div class="cell param-item-moi">
<label for="withLabel">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Position of overhang for label, can also exclude an overhang"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Expand All @@ -136,42 +156,58 @@ <h1>Gridfinity Generator
<option>Right Chamber</option>
<option>Center Chamber</option>
</select>
</div>

<div class="cell param-item-moi">
<label for="labelWidth">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Width of label, in multiples of 42mm (grid size), 0 is full length"
class="cooltipz--down cooltipz--large">
ⓘ
</span>
Label Width:
</label>
<input id="labelWidth" type="number" class="form-control">
</div>

<div class="cell param-item-moi">
<label for="hole_overhang_remedy">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="If both screw and magnet are defined, include feature for better printing of magnet/screw overhang"
class="cooltipz--down cooltipz--large">
ⓘ
</span>Overhang Hold Fix:
</label>
<input id="hole_overhang_remedy" class="form-control" type="checkbox">
</div>

<div class="cell param-item-moi">
<label for="fingerslide">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Include large corner fillet on the front, to make removing items easier"
class="cooltipz--down cooltipz--large">
ⓘ
</span>Finger Slide:
</label>
<input id="fingerslide" class="checkmark form-control" type="checkbox">
</div>

<div class="cell param-item-moi">
<label for="efficient_floor">
<span aria-label="Width along x-axis, in multiples of 42mm (grid size)"
<span aria-label="Efficient floor option saves material and time, but the floor is not smooth (only applies if no magnets, screws, or finger-slide used)"
class="cooltipz--down cooltipz--large">
ⓘ
</span>Efficient Floor:
</label>
<input id="efficient_floor" class="form-control" type="checkbox">
<input class="form-control" id="efficient_floor" type="checkbox">
<div ></div>
</div>

<div class="cell param-item-moi">
</div>
</div>
</div>
<br>
<br>
<br>
<!-- SECOND COLUMN -->
<div class="cell -6of12">
<div class="btn-group btn-block">
<a id="download-link" class="btn btn-success btn-ghost btn-block" href="">Download</a>
Expand Down Expand Up @@ -207,7 +243,6 @@ <h1>Gridfinity Generator
<br>
<div id="viewer" class="stl-viewer" tabindex="0"></div>
<span id="features"></span>

</div>
</div>
<div class="-6of12 hack">
Expand Down
45 changes: 39 additions & 6 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -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
}
}

Expand All @@ -111,10 +143,6 @@ function settingsDefault() {

};

function getCamerastate(){
console.log(stlViewer.get_camera_state());
};

settingsDefault();

var settingsVis = false;
Expand Down Expand Up @@ -511,6 +539,11 @@ try {
onStateChanged({ allowRun: false });
};

stlViewerElement.onclick = () => {
if(settingsVis){ SettingsMenuToggle();};
if(renderinfoVis){ renderInfoToggle();};
}

const initialState = defaultState;

setState(initialState);
Expand Down

0 comments on commit bba65f2

Please sign in to comment.