Skip to content

Commit

Permalink
donate link
Browse files Browse the repository at this point in the history 
Pedal Playground is getting expensive to maintain.
  • Loading branch information
@tehtrav
tehtrav committed Nov 5, 2023
1 parent ada689c commit bbdbe0f
Show file tree
Hide file tree
Showing 6 changed files with 449 additions and 63 deletions.
48 changes: 43 additions & 5 deletions app/scripts/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
var pedalImagePath = "public/images/pedals/";
var pedalboardImagePath = "public/images/pedalboards/";

const UNITS_IN = 'in.';
const UNITS_MM = 'mm.';

$(document).ready(function () {
// Populate Pedalboards and Pedals lists
GetPedalData();
GetPedalBoardData();

alert('hey');

// Make lists searchable
$(".pedal-list").select2({
placeholder: "Select a pedal",
Expand All @@ -30,6 +35,24 @@ $(document).ready(function () {
});

$(function () {
$("#input-unit-pb").switchButton({
checked: true,
on_label: UNITS_IN,
off_label: UNITS_MM,
width: 50,
height: 12,
button_width: 35,
})

$("#input-unit-pd").switchButton({
checked: true,
on_label: UNITS_IN,
off_label: UNITS_MM,
width: 50,
height: 12,
button_width: 35,
})

// Load canvas from localStorage if it has been saved prior
if (localStorage["pedalCanvas"] != null) {
var savedPedalCanvas = JSON.parse(localStorage["pedalCanvas"]);
Expand Down Expand Up @@ -214,8 +237,8 @@ $(document).ready(function () {
$("body").on("click", "#add-custom-pedal .btn", function (event) {
var serial = GenRandom.Job();
var multiplier = $("#canvas-scale").val();
var width = $("#add-custom-pedal .custom-width").val();
var height = $("#add-custom-pedal .custom-height").val();
var width = convertUnitsIfNeeded('pd', $("#add-custom-pedal .custom-width").val());
var height = convertUnitsIfNeeded('pd', $("#add-custom-pedal .custom-height").val());
var scaledWidth = width * multiplier;
var scaledHeight = height * multiplier;
var dims = width + '" x ' + height + '"';
Expand Down Expand Up @@ -281,8 +304,8 @@ $(document).ready(function () {
$("body").on("click", "#add-custom-pedalboard .btn", function (event) {
var serial = GenRandom.Job();
var multiplier = $("#canvas-scale").val();
var width = $("#add-custom-pedalboard .custom-width").val();
var height = $("#add-custom-pedalboard .custom-height").val();
var width = convertUnitsIfNeeded('pb', $("#add-custom-pedalboard .custom-width").val());
var height = convertUnitsIfNeeded('pb',$("#add-custom-pedalboard .custom-height").val());
var scaledWidth = width * multiplier;
var scaledHeight = height * multiplier;

Expand Down Expand Up @@ -421,6 +444,21 @@ $(document).ready(function () {
});
}); // End Document ready

function convertUnitsIfNeeded(type, value) {
switch(type) {
case 'pb':
return ($('#input-unit-pb-wrapper span.on').text() === UNITS_IN) ? value : mmToIn(value);
case 'pd':
return ($('#input-unit-pd-wrapper span.on').text() === UNITS_IN) ? value : mmToIn(value);
default:
break;
}
}

function mmToIn(value) {
return Math.round((value * 0.0393701) * 100) / 100;
}

function readyCanvas(pedal) {
var $draggable = $(".canvas .pedal, .canvas .pedalboard").draggabilly({
containment: ".canvas",
Expand Down Expand Up @@ -801,4 +839,4 @@ $("body").click(function () {
// reset stuff
$(".panel").remove();
$(".canvas .selected").removeClass("selected");
});
});
76 changes: 76 additions & 0 deletions app/stylesheets/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -843,4 +843,80 @@ body {
border-top-color: #e0e2e6;
border-bottom-color: #B9BCBF;
}
}


// <div class="settings-popover">
// <h4>Settings</h4>
// <ul>
// <li>
// <label for="convert-units" class="convert-units">
// Use mm <input id="convert-units" type="checkbox">
// </label>
// </li>
// <li>
// <label for="canvas-scale">
// Canvas scale
// <input class="form-control input-sm" id="canvas-scale" type="number" value="25" />
// </label>
// </li>
// </ul>
// </div>

.settings-popover {
// width: 280px;

h4 {
padding: 1.4rem 1rem;
margin: 0;
font-size: 15px;
font-weight: 600;
}
.panel__action {
// font-size: 14px;
display: flex;
justify-content: space-between;
label {
font-weight: normal;
margin: 0;
}
.form-control {
width: 40px;
padding: 0;
text-align: right;
height: auto;
border: none;
box-shadow: none;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
}

.halp {
@media (max-width: 1023px) {
display: none;
}
border: none;
position: fixed;
bottom: 1rem;
left: 50%;
z-index: 3;
padding: .5rem 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(black, 0.2);
@media (prefers-color-scheme: dark) {
background: $panel-bg-dark;
border: 0;
box-shadow: none !important;
}
}
91 changes: 70 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,9 @@ <h1><b>Pedal</b>Playground</h1>
<nav>
<a href="https://github.com/PedalPlayground/PedalPlayground.github.io/">Change Log</a>
<a href="https://www.paypal.me/travlehman" target="_blank">Donate</a>
<!--<a
class="hidden-xs"
href="https://github.com/PedalPlayground/PedalPlayground.github.io#contributing"
target="_blank"
>Contribute
</a>-->
<a class="settings-trigger" href="#" target="_blank">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
</nav>
</header>

Expand All @@ -78,9 +75,9 @@ <h1><b>Pedal</b>Playground</h1>
<div class="sidebar__inner">
<div class="sidebar__scroll">
<div class="sidebar__section">
<h2 class="h4">Add a Pedalboard</h2>
<label class="h4" for="select-a-pedalboard">Add a Pedalboard</label>
<form id="add-pedalboard">
<p><select class="pedalboard-list form-control"></select></p>
<p><select id="select-a-pedalboard" class="pedalboard-list form-control"></select></p>
<button
id="add-selected-pedalboard"
class="btn btn-primary btn-block"
Expand All @@ -91,9 +88,9 @@ <h2 class="h4">Add a Pedalboard</h2>
</div>

<div class="sidebar__section">
<h2 class="h4">Add a Pedal</h2>
<label class="h4" for="select-a-pedal">Add a Pedal</label>
<form id="add-pedal">
<p><select class="pedal-list form-control"></select></p>
<p><select id="select-a-pedal" class="pedal-list form-control"></select></p>
<button id="add-selected-pedal" class="btn btn-primary btn-block">
Add Pedal
</button>
Expand Down Expand Up @@ -132,22 +129,24 @@ <h2 class="h4">Add Custom Item</h2>
<div role="tabpanel" class="tab-pane active" id="custom-pedalboard">
<form id="add-custom-pedalboard">
<div class="form-element left">
<label for="">Width <em>(inches)</em></label>
<label for="custom-pb-width">Width <em class="units">(inches)</em></label>
<input
id="custom-pb-width"
type="number"
class="custom-width form-control"
placeholder="2.75"
placeholder="24"
value=""
required
/>
</div>

<div class="form-element left">
<label for="">Height <em>(inches)</em></label>
<label for="custom-pb-height">Height <em class="units">(inches)</em></label>
<input
id="custom-pb-height"
type="number"
class="custom-height form-control"
placeholder="4.25"
placeholder="12"
value=""
required
/>
Expand All @@ -165,8 +164,9 @@ <h2 class="h4">Add Custom Item</h2>
<div role="tabpanel" class="tab-pane" id="custom-pedal">
<form id="add-custom-pedal">
<div class="form-element">
<label>Name <em>(optional)</em></label>
<label for="custom-pedal-name">Name <em>(optional)</em></label>
<input
id="custom-pedal-name"
class="custom-name form-control"
type="type"
name="custom-pedal-name"
Expand All @@ -176,8 +176,9 @@ <h2 class="h4">Add Custom Item</h2>
</div>

<div class="form-element left">
<label for="">Width <em>(inches)</em></label>
<label for="custom-p-width">Width <em class="units">(inches)</em></label>
<input
id="custom-p-width"
type="number"
class="custom-width form-control"
placeholder="2.75"
Expand All @@ -187,8 +188,9 @@ <h2 class="h4">Add Custom Item</h2>
</div>

<div class="form-element left">
<label for="">Height <em>(inches)</em></label>
<label for="custom-p-height">Height <em class="units">(inches)</em></label>
<input
id="custom-p-height"
type="number"
class="custom-height form-control"
placeholder="4.25"
Expand All @@ -198,9 +200,10 @@ <h2 class="h4">Add Custom Item</h2>
</div>

<div class="form-element">
<label>Color</label>
<label for="custom-pedal-color">Color</label>
<div class="input-group custom-color-block">
<input
id="custom-pedal-color"
class="custom-color form-control"
type="type"
name="favcolor"
Expand All @@ -223,7 +226,7 @@ <h2 class="h4">Add Custom Item</h2>
</div>
</div>

<div id="canvas-scale-form" class="sidebar__section form-inline">
<!-- <div id="canvas-scale-form" class="sidebar__section form-inline">
<h4>Canvas Scale</h4>
<div class="input-group">
<div class="input-group-addon input-sm">Resolution</div>
Expand All @@ -247,7 +250,8 @@ <h4>Canvas Scale</h4>
aria-hidden="true"
></span>
</a>
</div>
</div> -->

<div class="sidebar__section">
<button id="clear-canvas" class="btn-reset text-danger" data-toggle="modal" data-target="#clear-canvas-modal">
Expand All @@ -271,8 +275,23 @@ <h4>Canvas Scale</h4>
<div class="canvas">
<input id="multiplier" type="hidden" value="32" />
</div>
<div class="settings-popover panel hide">
<h4>Settings</h4>
<div class="panel__action">
<label for="convert-units" class="convert-units">Use mm for units</label>
<input id="convert-units" type="checkbox">
</div>
<div class="panel__action">
<label for="canvas-scale">Canvas scale</label>
<input class="form-control input-sm" id="canvas-scale" type="number" value="25" />
</div>
</div>
</div>

<button id="clear-canvas" class="halp" data-toggle="modal" data-target="#halp-modal">
🚧 Help me pay for Pedal Playground's new server!
</button>

<div id="clear-canvas-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
Expand Down Expand Up @@ -337,7 +356,37 @@ <h4 class="modal-title">Adjust screen resolution</h4>
</div>
</div>

<script type="text/javascript" src="public/scripts/scripts-min.js"></script>
<div id="halp-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>
You may have noticed that updates slowed to a halt over the last few months. This is because Pedal Playground exceeded the file storage allowed from GitHub Pages where the site was hosted since it's creation.
</p>
<p>I have since moved Pedal Playground to a paid dedicated server that can keep up with storage demands, but server resources are not cheap. If you find Pedal Playground useful and would think about donating what you think it's worth to you, I would be extremely grateful! </p>
<p>Thank you for your support and thank you for using Pedal Playground.</p>

</div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<a href="https://www.paypal.me/travlehman" target="_blank" class="btn btn-primary">
Donate
</a>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/2.2.0/draggabilly.pkgd.min.js" integrity="sha512-zBAct6t0RFMOkOv9I+sMKzp4rHVqt/5PJBp5tUpO0y/zV9Ret0qh2nQP0+7AehWwRF5M0pLWefnBAZeCB7J3xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/js/bootstrap-colorpicker.min.js" integrity="sha512-Inb8rvDBBswSGp+fMJmR7y+HgWACE/2m1pj2h1ItXBGt7NbI0llkYIqp7bgzibqom5rSqTt84Cqug9UQV1+e8w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js" integrity="sha512-Y1UCb35/WpQMj8SlTwW43Q+vaROlBiuJ3BBpdF646G4WjXYp417N7OzlmOVWTxOTaiFIZt1CWnby8G9J6u2EoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="public/scripts/scripts.js"></script>

<script>
(
function (i, s, o, g, r, a, m) {
Expand Down
Loading

0 comments on commit bbdbe0f

Please sign in to comment.