Skip to content

Commit de6e133

Browse files
danielcshndanielcshn
authored
Merge pull request #2 from danielcshn/main
Update Web Code Generator
2 parents 026bbec + 5260955 commit de6e133

File tree

6 files changed

+199
-14
lines changed

6 files changed

+199
-14
lines changed

‎README.md

+32-1
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,34 @@ Here's a list of all the icons currently supported. Feel free to open an issue t
156156

157157
## 🛠️ Usage
158158

159+
### Web [Code Generator](https://hybridnetworks.github.io/mikrotik-dude-icons/)
160+
161+
**1.- Open the Web Code Generator**
162+
163+
Navigate to the web tool page where you can select your desired icons and generate the corresponding code.
164+
165+
**2.- Set the Installation Directory**
166+
167+
In the "Installation directory of The Dude" input field, enter the desired directory path where the icons will be stored. Examples: `dude`, `slot1-part1/dude`, `sata1/dude-data`, etc.
168+
169+
**3.- Select the Icons**
170+
171+
You can select icons by clicking the checkboxes next to each image. You can also use the "Select All" or "Deselect All" buttons to quickly select or deselect multiple icons.
172+
173+
You can change the background color of the selected icons using the buttons "Up", "Partial", "Complete", and "Acked" to preview what the icon would look like in The Dude.
174+
175+
**4.- Generate the Code**
176+
177+
Click the "Generate Code" button.
178+
179+
**5.- Copy Code & Download RSC Script**
180+
181+
You can copy the generated code to your clipboard by clicking the "Copy Code" button. If you want to download the generated code as a script file, click the "Download RSC" button. This will create a file named dude-icons.rsc containing the script and save it to your computer.
182+
183+
**Additional Notes**
184+
* Web browser with JavaScript support.
185+
* Internet connection to fetch icons and generate the code.
186+
159187
### Mikrotik RouterOS v7 & CHR
160188

161189
**1.- Set the Global Variable**
@@ -228,4 +256,7 @@ Thank you so much already for using my projects! If you want to go a step furthe
228256

229257
[![Support in Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-in%20BuyMeaCoffee-ffed00?style=for-the-badge)](https://www.buymeacoffee.com/hybridnetworks)
230258

231-
To support the project directly, feel free to open issues for icon suggestions, or contribute with a pull request!
259+
To support the project directly, feel free to open issues for icon suggestions, or contribute with a pull request!
260+
261+
262+

‎web/favicon.ico

115 KB
Binary file not shown.

‎web/favicon.png

18.1 KB
Loading

‎web/grid-min.svg

+1
Loading

‎web/index.html

+148-13
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,19 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>mikrotik-dude-icons | Code Generator by HybridNetworks.com.ar</title>
7+
<meta name="description" content="Download the best icons to implement in your Mikrotik Dude monitoring." />
8+
<meta name="keywords" content="Mikrotik Dude, icons, HybridNetworks, script generator, dude icons, custom scripts, custom icons, RSC download, advanced tools, networking configurations, mikrotik, mikrotik the dude, the dude icons, svg" />
9+
10+
<link rel="icon" href="favicon.ico" type="image/x-icon">
11+
<link rel="icon" href="favicon.png" type="image/png">
12+
<link rel="apple-touch-icon" href="favicon.png">
13+
14+
<meta http-equiv="cache-control" content="max-age=0" />
15+
<meta http-equiv="cache-control" content="no-cache" />
16+
<meta http-equiv="expires" content="0" />
17+
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
18+
<meta http-equiv="pragma" content="no-cache" />
19+
720
<!-- Bootstrap CSS -->
821
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
922
<style>
@@ -24,6 +37,27 @@
2437
font-size: 0.9rem;
2538
color: #6c757d;
2639
}
40+
.grid-min {
41+
background-image: url(./grid-min.svg);
42+
}
43+
.name-text {
44+
background-color: #FAFAFA;
45+
}
46+
.form-check-input[type=checkbox] {
47+
border-color: #000000;
48+
}
49+
.bg-up {
50+
background-image: linear-gradient(to bottom, #f4ffe9, #81ff03);
51+
}
52+
.bg-partial {
53+
background-image: linear-gradient(to bottom, #fff7f0, #ff8000);
54+
}
55+
.bg-complete {
56+
background-image: linear-gradient(to bottom, #fff7f7, #ff0303);
57+
}
58+
.bg-acked {
59+
background-image: linear-gradient(to bottom, #f3f9ff, #2b95ff);
60+
}
2761
</style>
2862
</head>
2963
<body class="bg-light">
@@ -37,9 +71,17 @@ <h1 class="text-center mb-4">mikrotik-dude-icons<br>Code Generator</h1>
3771
<div class="mb-3">
3872
<label for="directory" class="form-label"><strong>2.- Select the images you require & Generate Code:</strong></label>
3973
</div>
40-
<div class="d-flex justify-content-between mb-3">
41-
<button id="selectAll" class="btn btn-secondary">Select All</button>
42-
<button id="deselectAll" class="btn btn-secondary">Deselect All</button>
74+
<div class="d-flex justify-content-between align-items-center mb-3">
75+
<div>
76+
<button id="btnUp" class="btn bg-up">Up</button>
77+
<button id="btnPartial" class="btn bg-partial">Partial</button>
78+
<button id="btnComplete" class="btn bg-complete">Complete</button>
79+
<button id="btnAcked" class="btn bg-acked">Acked</button>
80+
</div>
81+
<div>
82+
<button id="selectAll" class="btn btn-secondary">Select All</button>
83+
<button id="deselectAll" class="btn btn-secondary">Deselect All</button>
84+
</div>
4385
</div>
4486
<div class="image-list row row-cols-2 g-3" id="imageList"></div>
4587
<div class="text-center mt-4">
@@ -48,14 +90,18 @@ <h1 class="text-center mb-4">mikrotik-dude-icons<br>Code Generator</h1>
4890
<div class="generated-code mt-4">
4991
<label for="outputCode" class="form-label"><strong>3.- Generated Code:</strong></label>
5092
<textarea id="outputCode" rows="8" class="form-control" readonly></textarea>
51-
<button id="copyCode" class="btn btn-success mt-3">Copy Code</button>
93+
<div class="d-flex justify-content-end mt-3">
94+
<button id="copyCode" class="btn btn-success me-2">Copy Code</button>
95+
<button id="downloadRsc" class="btn btn-info text-white">Download RSC</button>
96+
</div>
5297
</div>
5398
</div>
5499
</div>
55100

56101
<!-- Footer -->
57102
<footer>
58-
&copy; <script type="text/javascript">var dt = new Date(); document.write(dt.getFullYear());</script> <strong>HybridNetworks Ltd.</strong> All rights reserved.
103+
<a href="https://mikrotik.com/" target="_blank"><img src="made-for-mikrotik.svg" alt="Made for Mikrotik" class="img"></a><br><br>
104+
&copy; <script type="text/javascript">var dt = new Date(); document.write(dt.getFullYear());</script> <a href="https://hybridnetworks.com.ar/" target="_blank" style="text-decoration: none;color: #0e0e10;"><strong>HybridNetworks Ltd.</strong></a> All rights reserved.
59105
</footer>
60106

61107
<!-- Bootstrap JS Bundle with Popper -->
@@ -78,11 +124,11 @@ <h1 class="text-center mb-4">mikrotik-dude-icons<br>Code Generator</h1>
78124
const fileNameWithoutExtension = image.replace('.svg', ''); // Remove ".svg"
79125

80126
div.innerHTML = `
81-
<div class="card h-100">
127+
<div class="card h-100 grid-min">
82128
<div class="card-body d-flex align-items-center">
83129
<input type="checkbox" value="${image}" class="form-check-input me-2">
84-
<img src="${baseImagePath}${image}" alt="${image}" class="img-thumbnail me-3">
85-
<span>${fileNameWithoutExtension}</span>
130+
<img src="${baseImagePath}${image}" alt="${image}" class="img-thumbnail me-3 bg-up">
131+
<span class="name-text">${fileNameWithoutExtension}</span>
86132
</div>
87133
</div>
88134
`;
@@ -97,7 +143,6 @@ <h1 class="text-center mb-4">mikrotik-dude-icons<br>Code Generator</h1>
97143
} else {
98144
imgElement.style.width = '256px';
99145
}
100-
imgElement.style.backgroundImage = 'linear-gradient(to bottom, #f4ffe9, #81ff03)';
101146
};
102147

103148
// Alternar checkbox al hacer clic en la imagen
@@ -116,33 +161,85 @@ <h1 class="text-center mb-4">mikrotik-dude-icons<br>Code Generator</h1>
116161
document.getElementById('generateCode').addEventListener('click', () => {
117162
const directory = document.getElementById('directory').value.trim();
118163
if (!directory) {
119-
alert('Please enter a directory name.');
164+
showToast('Please enter a directory name.', 'warning');
120165
return;
121166
}
122167

123168
const selectedImages = Array.from(document.querySelectorAll('#imageList input:checked'))
124169
.map(checkbox => checkbox.value);
125170

126171
if (selectedImages.length === 0) {
127-
alert('Please select at least one image.');
172+
showToast('Please select at least one image.', 'warning');
128173
return;
129174
}
130175

131176
const code = selectedImages.map(image =>
132-
`/tool fetch url=${baseImagePath}${image} mode=https dst-path=${directory}/files/images/${image} as-value`
177+
`/tool fetch url=${baseImagePath}${image} mode=https dst-path=${directory}/files/images/${image} as-value;`
133178
).join('\n');
134179

135180
document.getElementById('outputCode').value = code;
136181
});
137182

183+
var dty = new Date().getFullYear();
184+
185+
// Generate RSC File
186+
const header = `# ============================================================
187+
# (C) 2011-${dty} HybridNetworks Ltd. -- All Rights Reserved
188+
#
189+
# ABOUT CONTACT:
190+
# HybridNetworks Ltd.
191+
# info@hybridnetworks.com.ar
192+
# https://hybridnetworks.com.ar
193+
#
194+
# Use this script only on the configured and supported device.
195+
# PLEASE do not change, edit or modify any part of this script.
196+
# PLEASE do not use on devices other than technical support.
197+
# PLEASE do not remove this notice or your copyright.
198+
#
199+
# If you are a developer or consultant and want to incorporate
200+
# this script into your own products. PLEASE contact us to receive
201+
# permits under terms and conditions.
202+
#
203+
# ============================================================`;
204+
205+
document.getElementById('downloadRsc').addEventListener('click', () => {
206+
const outputCode = document.getElementById('outputCode').value;
207+
if (!outputCode) {
208+
showToast('There is no code to download. Please generate the code first.', 'warning');
209+
return;
210+
}
211+
const content = `${header}\n${outputCode}`;
212+
const blob = new Blob([content], { type: 'text/plain' });
213+
const link = document.createElement('a');
214+
link.href = URL.createObjectURL(blob);
215+
link.download = 'dude-icons.rsc';
216+
link.click();
217+
});
218+
138219
// Copiar el código al portapapeles
139220
document.getElementById('copyCode').addEventListener('click', () => {
140221
const outputCode = document.getElementById('outputCode');
222+
if (!outputCode.value.trim()) {
223+
showToast('No code to copy!', 'warning');
224+
return;
225+
}
141226
outputCode.select();
142227
document.execCommand('copy');
143-
alert('Code copied to clipboard!');
228+
showToast('Code copied to clipboard!', 'success');
144229
});
145230

231+
// Event listeners for buttons
232+
const setBackgroundClass = (className) => {
233+
document.querySelectorAll('.img-thumbnail').forEach(card => {
234+
card.className = `img-thumbnail me-3 ${className}`;
235+
});
236+
};
237+
238+
document.getElementById('btnUp').addEventListener('click', () => setBackgroundClass('bg-up'));
239+
document.getElementById('btnPartial').addEventListener('click', () => setBackgroundClass('bg-partial'));
240+
document.getElementById('btnComplete').addEventListener('click', () => setBackgroundClass('bg-complete'));
241+
document.getElementById('btnAcked').addEventListener('click', () => setBackgroundClass('bg-acked'));
242+
146243
// Seleccionar todas las imágenes
147244
document.getElementById('selectAll').addEventListener('click', () => {
148245
document.querySelectorAll('#imageList input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
@@ -155,6 +252,44 @@ <h1 class="text-center mb-4">mikrotik-dude-icons<br>Code Generator</h1>
155252

156253
// Cargar la lista de imágenes al inicio
157254
loadImageList();
255+
256+
// Función para mostrar Toast
257+
function showToast(message, type = 'info') {
258+
const toastContainer = document.getElementById('toastContainer');
259+
260+
const toast = document.createElement('div');
261+
toast.className = `toast align-items-center text-bg-${type} border-0`;
262+
toast.setAttribute('role', 'alert');
263+
toast.setAttribute('aria-live', 'assertive');
264+
toast.setAttribute('aria-atomic', 'true');
265+
266+
toast.innerHTML = `
267+
<div class="d-flex">
268+
<div class="toast-body">
269+
${message}
270+
</div>
271+
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
272+
</div>
273+
`;
274+
275+
toastContainer.appendChild(toast);
276+
277+
// Inicializa el Toast
278+
const bootstrapToast = new bootstrap.Toast(toast);
279+
bootstrapToast.show();
280+
281+
// Remueve el Toast después de que se oculta
282+
toast.addEventListener('hidden.bs.toast', () => {
283+
toast.remove();
284+
});
285+
}
286+
287+
158288
</script>
289+
290+
<!-- Toast Container -->
291+
<div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3">
292+
</div>
293+
159294
</body>
160295
</html>

0 commit comments

Comments
 (0)