├── Dockerfile
├── LICENSE.md
├── README.md
├── gennum.php
├── img
    ├── 0.gif
    ├── 1.gif
    ├── 10.gif
    ├── 11.gif
    ├── 12.gif
    ├── 13.gif
    ├── 14.gif
    ├── 15.gif
    ├── 16.gif
    ├── 17.gif
    ├── 18.gif
    ├── 19.gif
    ├── 2.gif
    ├── 20.gif
    ├── 21.gif
    ├── 22.gif
    ├── 23.gif
    ├── 24.gif
    ├── 25.gif
    ├── 26.gif
    ├── 27.gif
    ├── 28.gif
    ├── 29.gif
    ├── 3.gif
    ├── 30.gif
    ├── 31.gif
    ├── 32.gif
    ├── 4.gif
    ├── 5.gif
    ├── 6.gif
    ├── 7.gif
    ├── 8.gif
    └── 9.gif
├── index.php
└── subnets.html


/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM php:5.6-apache
2 | 
3 | COPY index.php gennum.php subnets.html /var/www/html/
4 | COPY img/* /var/www/html/img/
5 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # License
 2 | 
 3 | ## COPYRIGHT NOTICE
 4 | 
 5 | This software, including all programs, computer files, and associated documentation, are Copyright (c) 2002, 2011, 2018, 2019 David C A Croft. All rights reserved.
 6 | 
 7 | ## DISCLAIMER
 8 | 
 9 | This software is provided 'as-is', without any express or implied warranty. In no event will the authors be held liable for any damages arising from the use of this software.
10 | 
11 | ## LICENSE
12 | 
13 | Permission is granted to anyone to use this software for any purpose, including commercial applications, and to alter it and redistribute it freely, subject to the following restrictions:
14 | 
15 | 1. The origin of this software must not be misrepresented; you must not claim that you wrote the original software. If you use this software in a product, an acknowledgment in the product documentation would be appreciated but is not required.
16 | 
17 | 2. Altered versions must be plainly marked as such, and must not be misrepresented as being the original software.
18 | 
19 | 3. This notice may not be removed or altered from any distribution.
20 | 
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # subnets
 2 | Visual subnet calculator as seen at http://www.davidc.net/sites/default/subnets/subnets.html
 3 | 
 4 | # Run with docker
 5 | 
 6 | ```
 7 | cd <project folder>
 8 | docker build . -t subnets
 9 | docker run -d -p 5001:80 --name subnets subnets
10 | ```
11 | 


--------------------------------------------------------------------------------
/gennum.php:
--------------------------------------------------------------------------------
 1 | <?
 2 | for ($i=0;$i<=32; $i++) {
 3 | 
 4 | $str = '/'.$i;
 5 | $font = 2;
 6 | 
 7 | echo $str."\n";
 8 | 
 9 | $w = ImageFontWidth($font) * strlen($str);
10 | $h = ImageFontHeight($font);
11 | 
12 | 
13 | $im = ImageCreate($w, $h);
14 | $bg = ImageColorAllocate($im, 255, 255, 255);
15 | $fg = ImageColorAllocate($im, 0, 0, 0);
16 | ImageColorTransparent($im, $bg);
17 | ImageString($im, $font, 0, 0, $str, $fg);
18 | ImageGIF($im, 'tmp/'.$i.'.gif');
19 | #system("/usr/bin/convert -rotate 90 tmp/".$i.".gif img/".$i.".gif");
20 | 
21 | 
22 | //for i in tmp/*; do  convert -rotate 90 $i img/`basename $i`; done
23 | }


--------------------------------------------------------------------------------
/img/0.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/0.gif


--------------------------------------------------------------------------------
/img/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/1.gif


--------------------------------------------------------------------------------
/img/10.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/10.gif


--------------------------------------------------------------------------------
/img/11.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/11.gif


--------------------------------------------------------------------------------
/img/12.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/12.gif


--------------------------------------------------------------------------------
/img/13.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/13.gif


--------------------------------------------------------------------------------
/img/14.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/14.gif


--------------------------------------------------------------------------------
/img/15.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/15.gif


--------------------------------------------------------------------------------
/img/16.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/16.gif


--------------------------------------------------------------------------------
/img/17.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/17.gif


--------------------------------------------------------------------------------
/img/18.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/18.gif


--------------------------------------------------------------------------------
/img/19.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/19.gif


--------------------------------------------------------------------------------
/img/2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/2.gif


--------------------------------------------------------------------------------
/img/20.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/20.gif


--------------------------------------------------------------------------------
/img/21.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/21.gif


--------------------------------------------------------------------------------
/img/22.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/22.gif


--------------------------------------------------------------------------------
/img/23.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/23.gif


--------------------------------------------------------------------------------
/img/24.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/24.gif


--------------------------------------------------------------------------------
/img/25.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/25.gif


--------------------------------------------------------------------------------
/img/26.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/26.gif


--------------------------------------------------------------------------------
/img/27.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/27.gif


--------------------------------------------------------------------------------
/img/28.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/28.gif


--------------------------------------------------------------------------------
/img/29.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/29.gif


--------------------------------------------------------------------------------
/img/3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/3.gif


--------------------------------------------------------------------------------
/img/30.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/30.gif


--------------------------------------------------------------------------------
/img/31.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/31.gif


--------------------------------------------------------------------------------
/img/32.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/32.gif


--------------------------------------------------------------------------------
/img/4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/4.gif


--------------------------------------------------------------------------------
/img/5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/5.gif


--------------------------------------------------------------------------------
/img/6.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/6.gif


--------------------------------------------------------------------------------
/img/7.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/7.gif


--------------------------------------------------------------------------------
/img/8.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/8.gif


--------------------------------------------------------------------------------
/img/9.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidc/subnets/6a8e3e1f07988ea641618faa6ab1764c0a327963/img/9.gif


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | header("Location: subnets.html");
3 | 


--------------------------------------------------------------------------------
/subnets.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <title>Visual Subnet Calculator</title>
  4 | <script language="javascript" type="text/javascript">
  5 | <!--
  6 | 
  7 | var visibleColumns = {
  8 |   subnet: true,
  9 |   netmask: false,
 10 |   range: true,
 11 |   useable: true,
 12 |   hosts: true,
 13 |   divide: true,
 14 |   join: true,
 15 | };
 16 | 
 17 | var curNetwork = 0;
 18 | var curMask = 0;
 19 | 
 20 | function updateNetwork()
 21 | {
 22 |   var newNetworkStr = document.forms['calc'].elements['network'].value;
 23 |   var newMask = parseInt(document.forms['calc'].elements['netbits'].value);
 24 | 
 25 |   var newNetwork = inet_aton(newNetworkStr);
 26 | 
 27 |   if (newNetwork === null) {
 28 |     alert('Invalid network address entered');
 29 |     return;
 30 |   }
 31 | 
 32 |   var tmpNetwork = network_address(newNetwork, newMask);
 33 |   if (newNetwork != tmpNetwork) {
 34 |     alert('The network address entered is not on a network boundary for this mask.\nIt has been changed to '+inet_ntoa(tmpNetwork)+'.');
 35 |     newNetwork = tmpNetwork;
 36 |     document.forms['calc'].elements['network'].value = inet_ntoa(tmpNetwork);
 37 |   }
 38 | 
 39 |   if (newMask < 0 || newMask > 32) {
 40 |     alert('The network mask you have entered is invalid');
 41 |     return;
 42 |   }
 43 | 
 44 |   if (curMask == 0) {
 45 |     curMask = newMask;
 46 |     curNetwork = newNetwork;
 47 |     startOver();
 48 |   }
 49 |   else if (curMask != newMask && confirm('You are changing the base network from /'+curMask+' to /'+newMask+'. This will reset any changes you have made. Proceed?')) {
 50 |     curMask = newMask;
 51 |     curNetwork = newNetwork;
 52 | 
 53 |     startOver();
 54 |   }
 55 |   else {
 56 |     document.forms['calc'].elements['netbits'].value = curMask;
 57 |     curNetwork = newNetwork;
 58 | 
 59 |     recreateTables();
 60 |   }
 61 | }
 62 | 
 63 | function startOver()
 64 | {
 65 |   rootSubnet = [0, 0, null];
 66 | 
 67 |   recreateTables();
 68 | }
 69 | 
 70 | function recreateTables()
 71 | {
 72 |   // Update header visibility
 73 |   for (const name in visibleColumns) {
 74 |     console.log(name)
 75 |     document.getElementById(name + 'Header').style.display = visibleColumns[name] ? 'table-cell' : 'none';
 76 |   }
 77 | 
 78 |   var calcbody = document.getElementById('calcbody');
 79 |   if (!calcbody) {
 80 |     alert('Body not found');
 81 |     return;
 82 |   }
 83 | 
 84 |   while (calcbody.hasChildNodes()) {
 85 |     calcbody.removeChild(calcbody.firstChild);
 86 |   }
 87 | 
 88 |   updateNumChildren(rootSubnet);
 89 |   updateDepthChildren(rootSubnet);
 90 | 
 91 |   createRow(calcbody, rootSubnet, curNetwork, curMask, [curMask, rootSubnet[1], rootSubnet], rootSubnet[0]);
 92 | 
 93 |   document.getElementById('joinHeader').colSpan = (rootSubnet[0] > 0 ? rootSubnet[0] : 1);
 94 | //  document.getElementById('col_join').span = (rootSubnet[0] > 0 ? rootSubnet[0] : 1);
 95 | 
 96 |   /* Create the bookmark hyperlink */
 97 |   var link = document.getElementById('saveLink');
 98 |   if (link) {
 99 |     link.href = 'subnets.html?network='+inet_ntoa(curNetwork)+'&mask='+curMask+'&division='+binToAscii(nodeToString(rootSubnet));
100 |   }
101 | }
102 | 
103 | function nodeToString(node)
104 | {
105 |   if (node[2]) {
106 |     return '1'+nodeToString(node[2][0])+nodeToString(node[2][1]);
107 |   }
108 |   else {
109 |     return '0';
110 |   }
111 | }
112 | 
113 | function binToAscii(str)
114 | {
115 |   var curOut = '';
116 |   var curBit = 0;
117 |   var curChar = 0;
118 | 
119 |   for (var i=0; i<str.length; i++) {
120 |     if (str.charAt(i) == '1') {
121 |       curChar |= 1<<curBit;
122 |     }
123 |     curBit++;
124 |     if (curBit > 3) {
125 |       curOut += curChar.toString(16);
126 |       curChar = 0;
127 |       curBit = 0;
128 |     }
129 |   }
130 |   if (curBit > 0) {
131 |     curOut += curChar.toString(16);
132 |   }
133 |   return str.length+'.'+curOut;
134 | }
135 | 
136 | function asciiToBin(str)
137 | {
138 |   var re = /([0-9]+)\.([0-9a-f]+)/;
139 |   var res = re.exec(str);
140 |   var len = res[1];
141 |   var encoded = res[2];
142 |   var out = '';
143 |   for (var i=0; i< res[1]; i++) {
144 |     var ch = parseInt(res[2].charAt(Math.floor(i/4)), 16);
145 |     var pos = i % 4;
146 |     out += (ch & (1<<pos) ? '1' : '0');
147 |   }
148 |   return out;
149 | }
150 | 
151 | function createRow(calcbody, node, address, mask, labels, depth)
152 | {
153 |   if (node[2]) {
154 |     var newlabels = labels;
155 |     newlabels.push(mask+1);
156 |     newlabels.push(node[2][0][1]);
157 |     newlabels.push(node[2][0]);
158 |     createRow(calcbody, node[2][0], address, mask+1, newlabels, depth-1);
159 | 
160 |     newlabels = new Array();
161 |     newlabels.push(mask+1);
162 |     newlabels.push(node[2][1][1]);
163 |     newlabels.push(node[2][1]);
164 |     createRow(calcbody, node[2][1], address+subnet_addresses(mask+1), mask+1, newlabels, depth-1);
165 |   }
166 |   else {
167 |     var newRow = document.createElement('TR');
168 |     calcbody.appendChild(newRow);
169 | 
170 |     /* subnet address */
171 |     if (visibleColumns.subnet) {
172 |       var newCell = document.createElement('TD');
173 |       newCell.appendChild(document.createTextNode(inet_ntoa(address)+'/'+mask));
174 |       newRow.appendChild(newCell);
175 |     }
176 | 
177 |     var addressFirst = address;
178 |     var addressLast = subnet_last_address(address, mask);
179 |     var useableFirst = address + 1;
180 |     var useableLast = addressLast - 1;
181 |     var numHosts;
182 |     var addressRange;
183 |     var usaebleRange;
184 | 
185 |     if (mask == 32) {
186 |       addressRange = inet_ntoa(addressFirst);
187 |       useableRange = addressRange;
188 |       numHosts = 1;
189 |     }
190 |     else {
191 |       addressRange = inet_ntoa(addressFirst)+' - '+inet_ntoa(addressLast);
192 |       if (mask == 31) {
193 | 	useableRange = addressRange;
194 | 	numHosts = 2;
195 |       }
196 |       else {
197 | 	useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast);
198 | 	numHosts = (1 + useableLast - useableFirst);
199 |       }
200 |     }
201 | 
202 |     /* netmask */
203 |     if (visibleColumns.netmask) {
204 |       var newCell = document.createElement('TD');
205 |       newCell.appendChild(document.createTextNode(inet_ntoa(subnet_netmask(mask))));
206 |       newRow.appendChild(newCell);
207 |     }
208 | 
209 |     /* range of addresses */
210 |     if (visibleColumns.range) {
211 |       var newCell = document.createElement('TD');
212 |       newCell.appendChild(document.createTextNode(addressRange));
213 |       newRow.appendChild(newCell);
214 |     }
215 | 
216 |     /* useable addresses */
217 |     if (visibleColumns.useable) {
218 |       var newCell = document.createElement('TD');
219 |       newCell.appendChild(document.createTextNode(useableRange));
220 |       newRow.appendChild(newCell);
221 |     }
222 | 
223 |     /* Hosts */
224 |     if (visibleColumns.hosts) {
225 |       var newCell = document.createElement('TD');
226 |       newCell.appendChild(document.createTextNode(numHosts));
227 |       newRow.appendChild(newCell);
228 |     }
229 | 
230 |     /* actions */
231 | 
232 |     if (visibleColumns.divide) {
233 |       var newCell = document.createElement('TD');
234 |       newRow.appendChild(newCell);
235 | 
236 |       if (mask == 32) {
237 | 	var newLink = document.createElement('SPAN');
238 | 	newLink.className = 'disabledAction';
239 | 	newLink.appendChild(document.createTextNode('Divide'));
240 | 	newCell.appendChild(newLink);
241 |       }
242 |       else {
243 | 	var newLink = document.createElement('A');
244 | 	newLink.href = '#';
245 | 	newLink.onclick = function () { divide(node); return false; }
246 | 	newLink.appendChild(document.createTextNode('Divide'));
247 | 	newCell.appendChild(newLink);
248 |       }
249 |     }
250 | 
251 |     if (visibleColumns.join) {
252 |       var colspan = depth - node[0];
253 | 
254 |       for (var i=(labels.length/3)-1; i>=0; i--) {
255 | 	var mask = labels[i*3];
256 | 	var rowspan = labels[(i*3)+1];
257 | 	var joinnode = labels[(i*3)+2];
258 | 
259 | 	var newCell = document.createElement('TD');
260 | 	newCell.rowSpan = (rowspan > 1 ? rowspan : 1);
261 | 	newCell.colSpan = (colspan > 1 ? colspan : 1);
262 | 
263 | 	if (i == (labels.length/3)-1) {
264 | 	  newCell.className = 'maskSpan';
265 | 	}
266 | 	else {
267 | 	  newCell.className = 'maskSpanJoinable';
268 | 	  newCell.onclick = newJoin(joinnode);
269 | 	  //	newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
270 | 	}
271 | 
272 | 	var newImg = document.createElement('IMG');
273 | 	newImg.src = 'img/'+mask+'.gif';
274 | 	newCell.appendChild(newImg);
275 | 	newRow.appendChild(newCell);
276 | 
277 | 	colspan = 1; // reset for subsequent cells
278 |       }
279 |     }
280 |   }
281 | 
282 | }
283 | 
284 | /* This is necessary because 'joinnode' changes during the scope of the caller */
285 | function newJoin(joinnode)
286 | {
287 |   return function() { join(joinnode) };
288 | }
289 | 
290 | function divide(node)
291 | {
292 |   node[2] = new Array();
293 |   node[2][0] = [0, 0, null];
294 |   node[2][1] = [0, 0, null];
295 |   recreateTables();
296 | }
297 | 
298 | function join(node)
299 | {
300 |   /* easy as pie */
301 |   node[2] = null;
302 |   recreateTables();
303 | }
304 | 
305 | function updateNumChildren(node)
306 | {
307 |   if (node[2] == null) {
308 |     node[1] = 0;
309 |     return 1;
310 |   }
311 |   else {
312 |     node[1] = updateNumChildren(node[2][0]) + updateNumChildren(node[2][1]);
313 |     return node[1];
314 |   }
315 | }
316 | 
317 | function updateDepthChildren(node)
318 | {
319 |   if (node[2] == null) {
320 |     node[0] = 0;
321 |     return 1;
322 |   }
323 |   else {
324 |     node[0] = updateDepthChildren(node[2][0]) + updateDepthChildren(node[2][1]);
325 |     return node[1];
326 |   }
327 | }
328 | 
329 | 
330 | var rootSubnet;
331 | 
332 | // each node is Array:
333 | // [0] => depth of children, total number of visible children, children
334 | 
335 | 
336 | function inet_ntoa(addrint)
337 | {
338 |   return ((addrint >> 24) & 0xff)+'.'+
339 |     ((addrint >> 16) & 0xff)+'.'+
340 |     ((addrint >> 8) & 0xff)+'.'+
341 |     (addrint & 0xff);
342 | }
343 | 
344 | function inet_aton(addrstr)
345 | {
346 |   var re = /^([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})$/;
347 |   var res = re.exec(addrstr);
348 | 
349 |   if (res === null) {
350 |     return null;
351 |   }
352 | 
353 |   for (var i=1; i<=4; i++) {
354 |     if (res[i] < 0 || res[i] > 255) {
355 |       return null;
356 |     }
357 |   }
358 | 
359 |   return (res[1] << 24) | (res[2] << 16) | (res[3] << 8) | res[4];
360 | }
361 | 
362 | function network_address(ip, mask)
363 | {
364 |   var maskbits = 0;
365 |   for (var i=31-mask; i>=0; i--) {
366 |     ip &= ~ 1<<i;
367 |   }
368 |   return ip;
369 | }
370 | 
371 | function subnet_addresses(mask)
372 | {
373 |   return 2**(32-mask);
374 | }
375 | 
376 | function subnet_last_address(subnet, mask)
377 | {
378 |   return subnet + subnet_addresses(mask) - 1;
379 | }
380 | 
381 | function subnet_netmask(mask)
382 | {
383 |   return network_address(0xffffffff, mask);
384 | }
385 | 
386 | 
387 | function preloadSubnetImages()
388 | {
389 |   if (document.images) {
390 |     if (!document.preloadedImages) {
391 |       document.preloadedImages = new Array();
392 |     }
393 | 
394 |     for (var i=0; i<=32; i++) {
395 |       var img = new Image();
396 |       img.src = 'img/'+i+'.gif';
397 |       document.preloadedImages.push(img);
398 |     }
399 |   }
400 | }
401 | 
402 | 
403 | function calcOnLoad()
404 | {
405 |   preloadSubnetImages();
406 |   args = parseQueryString();
407 |   if (args['network'] && args['mask'] && args['division']) {
408 |     document.forms['calc'].elements['network'].value = args['network'];
409 |     document.forms['calc'].elements['netbits'].value = args['mask'];
410 |     updateNetwork();
411 |     var division = asciiToBin(args['division']);
412 |     rootSubnet = [0, 0, null];
413 |     if (division != '0') {
414 |       loadNode(rootSubnet, division);
415 |     }
416 |     recreateTables();
417 |   }
418 |   else {
419 |     updateNetwork();
420 |   }
421 | }
422 | 
423 | function loadNode(curNode, division)
424 | {
425 |   if (division.charAt(0) == '0') {
426 |     return division.substr(1);
427 |   }
428 |   else {
429 |     curNode[2] = new Array();
430 |     curNode[2][0] = [0, 0, null];
431 |     curNode[2][1] = [0, 0, null];
432 | 
433 |     division = loadNode(curNode[2][0], division.substr(1));
434 |     division = loadNode(curNode[2][1], division);
435 |     return division;
436 |   }
437 | }
438 | 
439 | 
440 | function parseQueryString (str)
441 | {
442 |   str = str ? str : location.search;
443 |   var query = str.charAt(0) == '?' ? str.substring(1) : str;
444 |   var args = new Object();
445 |   if (query) {
446 |     var fields = query.split('&');
447 |     for (var f = 0; f < fields.length; f++) {
448 |       var field = fields[f].split('=');
449 |       args[unescape(field[0].replace(/\+/g, ' '))] = 
450 | 	unescape(field[1].replace(/\+/g, ' '));
451 |     }
452 |   }
453 |   return args;
454 | }
455 | 
456 | window.onload = calcOnLoad;
457 | 
458 | function toggleColumn(cb)
459 | {
460 |   var colName = 'col_'+(cb.id.substr(3));
461 | //  var col = document.getElementById(colName);
462 | 
463 |   visibleColumns[cb.id.substr(3)] = cb.checked;
464 | 
465 | //  if (cb.checked) {
466 | //    col.style.display = 'table-column';
467 | //    col.style.visibility = 'visible';
468 | //  }
469 | //  else {
470 | //    col.style.display = 'none';
471 | //    col.style.visibility = 'collapse';
472 | //  }
473 |   recreateTables(); /* because IE draws lines all over the place with border-collapse */
474 | }
475 | 
476 | //-->
477 | </script>
478 | 
479 | <style type="text/css">
480 | 
481 | H1		{
482 |   font-family: Arial, Verdana, sans-serif;
483 |   font-size: 18pt;
484 | }
485 | 
486 | BODY		{
487 |   font-family: Arial, Verdana, sans-serif;
488 | }
489 | 
490 | P		{
491 |   font-family: Arial, Verdana, sans-serif;
492 |   font-size: 75%;
493 | }
494 | 
495 | .label {
496 |   font-family: Arial, Verdana, sans-serif;
497 |   font-size: 60%;
498 | }
499 | 
500 | .calc {
501 |   font-family: Arial, Verdana, sans-serif;
502 |   font-size: 80%;
503 |   border-collapse: collapse; 
504 | }
505 | 
506 | .calc td, .calc th {
507 |  border: 1px solid black;
508 | }
509 | 
510 | .calc thead {
511 |   font-weight: bold;
512 |   background-color: #eeeeee;
513 | }
514 | 
515 | .disabledAction {
516 |  color: #dddddd;
517 | }
518 | 
519 | .maskSpan {
520 |   background-color: #cccccc;
521 |   text-align: right;
522 | }
523 | .maskSpanJoinable {
524 |   background-color: #cccccc;
525 |   text-align: right;
526 |  cursor: pointer;
527 | }
528 | 
529 | .maskSpanRotate {
530 |  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
531 |  background-color:green;
532 | }
533 | 
534 | </style>
535 | </head>
536 | <body>
537 | 
538 | <table width="100%">
539 | <tr valign=top>
540 | <td>
541 | 
542 | <h1>Visual Subnet Calculator</h1>
543 | 
544 | <p>Enter the network you wish to subnet:</p>
545 | 
546 | <form name="calc" onsubmit="updateNetwork(); return false;">
547 | 
548 | <table cellspacing="0">
549 | <tr>
550 | <td class="label">Network Address</td>
551 | <td class="label">Mask bits</td>
552 | </tr>
553 | <tr>
554 | <td><input type="text" name="network" size="15" maxlength="15" value="192.168.0.0"></td>
555 | <td>/<input type="text" name="netbits" size="2" maxlength="2" value="16"></td>
556 | <td><input type="submit" value="Update">
557 | <input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
558 | </td>
559 | </tr>
560 | </table>
561 | 
562 | <p>Show columns: 
563 | <input type="checkbox" id="cb_subnet" checked onclick="toggleColumn(this)"><label for="cb_subnet">Subnet address</label>
564 | <input type="checkbox" id="cb_netmask" onclick="toggleColumn(this)"><label for="cb_netmask">Netmask</label>
565 | <input type="checkbox" id="cb_range" checked onclick="toggleColumn(this)"><label for="cb_range">Range of addresses</label>
566 | <input type="checkbox" id="cb_useable" checked onclick="toggleColumn(this)"><label for="cb_useable">Useable IPs</label>
567 | <input type="checkbox" id="cb_hosts" checked onclick="toggleColumn(this)"><label for="cb_hosts">Hosts</label>
568 | <input type="checkbox" id="cb_divide" checked onclick="toggleColumn(this)"><label for="cb_divide">Divide</label>
569 | <input type="checkbox" id="cb_join" checked onclick="toggleColumn(this)"><label for="cb_join">Join</label>
570 | </p>
571 | </form>
572 | 
573 | <p>Click below to split and join subnets.<br>
574 | If you wish to save this subnetting for later, bookmark <a href="subnets.html" id="saveLink">this hyperlink</a>.</p>
575 | 
576 | </td>
577 | <td align="right">
578 | <a href="https://github.com/davidc/subnets"><img alt="Fork me on GitHub" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png" style="right: 0;top: 0;position: absolute;"></a>
579 | </td>
580 | </tr>
581 | </table>
582 | 
583 | <br>
584 | <hr noshade color="black" size="1">
585 | <br>
586 | 
587 | <table class="calc" cellspacing="0" cellpadding="2">
588 | <thead>
589 | <tr>
590 | <th id="subnetHeader">Subnet address</th>
591 | <th id="netmaskHeader">Netmask</th>
592 | <th id="rangeHeader">Range of addresses</th>
593 | <th id="useableHeader">Useable IPs</th>
594 | <th id="hostsHeader">Hosts</th>
595 | <th id="divideHeader">Divide</th>
596 | <th id="joinHeader">Join</th>
597 | </tr>
598 | </thead>
599 | <tbody id="calcbody">
600 | <!--tr>
601 | <td>130.94.203.0/24</td>
602 | <td>130.94.203.0 - 130.94.203.255</td>
603 | <td>130.94.203.1 - 130.94.203.254 (254)</td>
604 | <td>Divide</td>
605 | </tr-->
606 | </tbody>
607 | </table>
608 | 
609 | </body>
610 | </html>
611 | 


--------------------------------------------------------------------------------