oshw_logo/oshw_logo.html

257 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>open source hardware logo generator</title>
<script type="text/javascript" src="cvlp_lib.js"></script>
<script type="text/javascript" src="lib/FileSaver.min.js"></script>
<script type="text/javascript" src="lib/jszip.min.js"></script>
<style>
td {text-align: left;}
input[type=number] {width: 5em;}
</style>
</head>
<body onload="draw()">
<script type="text/javascript">
/* page for creating an Open Source Hardware logo using the CuVoodoo Land Pattern (cvlp) library
Copyright (C) 2015 King Kévin <kingkevin@cuvoodoo.info>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// the OSHW logo
var logo = {
"name": "open source hardware logo",
"author": "King Kévin",
"version": 1,
"date": "2019-05-13",
"unit": "mm",
"elements": []
}
// draw logo
function draw() {
// get values
var pad_size = parseFloat(pad_size_input.value)
var pad_thickness = parseFloat(pad_thickness_input.value)
var pad_spacing = parseFloat(pad_spacing_input.value)
var pad_chip_spacing = parseFloat(pad_chip_spacing_input.value)
var chip_thickness = parseFloat(chip_thickness_input.value)
var text_thickness = parseFloat(text_thickness_input.value)
// set values in logo
var size = pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2 + pad_size
logo.width = size
logo.height = size
var select = document.getElementById("unit")
var unit = select.options[select.selectedIndex].value
logo.unit = unit
// clear elements
logo.elements = []
// draw pads
for (var i=0; i<6; i++) {
if (document.getElementById("pad_layer_copper").checked) {
var west = cvlp_pad(i + 1, 0 + pad_size / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_size, pad_thickness)
logo.elements = logo.elements.concat(west)
var south = cvlp_pad(i + 7, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, (pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2) + pad_size / 2, pad_thickness, pad_size)
logo.elements = logo.elements.concat(south)
var east = cvlp_pad(18 - i, (pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2) + pad_size / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_size, pad_thickness)
logo.elements = logo.elements.concat(east)
var north = cvlp_pad(24 - i, pad_size + pad_chip_spacing * 2 + pad_spacing * i, pad_size / 2, pad_thickness, pad_size)
logo.elements = logo.elements.concat(north)
} else {
var west = cvlp_line(0 + pad_thickness / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_size - pad_thickness / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_thickness)
logo.elements = logo.elements.concat(west)
var south = cvlp_line((pad_size + pad_chip_spacing * 2) + pad_spacing * i, (pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2) + pad_thickness / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, (pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2) + pad_size - pad_thickness / 2, pad_thickness)
logo.elements = logo.elements.concat(south)
var east = cvlp_line((pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2) + pad_thickness / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, (pad_size + pad_chip_spacing * 2 + pad_spacing * 5 + pad_chip_spacing * 2) + pad_size - pad_thickness / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_thickness)
logo.elements = logo.elements.concat(east)
var north = cvlp_line((pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_thickness / 2, (pad_size + pad_chip_spacing * 2) + pad_spacing * i, pad_size - pad_thickness / 2, pad_thickness)
logo.elements = logo.elements.concat(north)
}
}
// draw chip outline
var chip = cvlp_rectangle(pad_size + pad_chip_spacing, pad_size + pad_chip_spacing, pad_chip_spacing * 2 + pad_spacing * 5, pad_chip_spacing * 2 + pad_spacing * 5, chip_thickness, pad_chip_spacing)
logo.elements = logo.elements.concat(chip)
// draw O letter
var x = pad_size+pad_chip_spacing * 2
var y = pad_size+pad_chip_spacing * 2
var text = cvlp_polyline([[x, y],
[x += pad_spacing * 2, y],
[x, y += pad_spacing * 2],
[x += pad_spacing * -2, y],
[x, y += pad_spacing * -2]], text_thickness)
logo.elements = logo.elements.concat(text)
// draw S letter
var x = pad_size + pad_chip_spacing * 2 + pad_spacing * 5
var y = pad_size + pad_chip_spacing * 2
var text = cvlp_polyline([[x, y],
[x += pad_spacing * -2, y],
[x, y += pad_spacing],
[x += pad_spacing * 2, y],
[x, y += pad_spacing],
[x += pad_spacing * -2, y]], text_thickness)
logo.elements = logo.elements.concat(text)
// draw H letter
var x = pad_size + pad_chip_spacing * 2
var y = pad_size + pad_chip_spacing * 2 + pad_spacing * 3
var text = cvlp_line(x, y, x, y + pad_spacing * 2, text_thickness)
logo.elements = logo.elements.concat(text)
var text = cvlp_line(x, y + pad_spacing, x + pad_spacing * 2, y + pad_spacing, text_thickness)
logo.elements = logo.elements.concat(text)
var text = cvlp_line(x + pad_spacing * 2, y, x + pad_spacing * 2, y + pad_spacing * 2, text_thickness)
logo.elements = logo.elements.concat(text)
// draw W letter
var x = pad_size + pad_chip_spacing * 2 + pad_spacing * 3
var y = pad_size + pad_chip_spacing * 2 + pad_spacing * 3
var text = cvlp_polyline([[x, y],
[x, y += pad_spacing * 2],
[x += pad_spacing, y += pad_spacing * -1],
[x += pad_spacing, y += pad_spacing],
[x, y += pad_spacing * -2]], text_thickness)
logo.elements = logo.elements.concat(text)
var svg = json2svg(logo)
var div = document.getElementById('svg')
div.textContent = ""
div.appendChild(svg)
}
function download() {
var select = document.getElementById("filetype")
var filetype = select.options[select.selectedIndex].value
switch (filetype) {
case 'cvlp':
var blob = new Blob([JSON.stringify(logo, null, '\t')], {type: "application/json"})
saveAs(blob, "oshw_logo.cvlp")
break
case 'svg':
var blob = new Blob([new XMLSerializer().serializeToString(json2svg(logo))], {type: "image/svg+xml"})
saveAs(blob, "oshw_logo.svg")
break
case 'pcb-rnd':
var blob = new Blob([json2subc(logo)], {type: "text/plain"}) // there is no mime type for pcb-rnd yet
saveAs(blob, "oshw_logo.lht")
break
case 'pcb':
var blob = new Blob([json2pcb(logo)], {type: "application/x-pcb-footprint"})
saveAs(blob, "oshw_logo.fp")
break
case 'kicad':
var blob = new Blob([json2kicad(logo)], {type: "application/x-kicad-pcb"})
saveAs(blob, "oshw_logo.kicad_mod")
break
case 'eagle':
var xml = new XMLSerializer().serializeToString(json2eagle(logo))
xml = '<?xml version="1.0" encoding="utf-8"?>'+xml
xml = xml.replace(/(>)(<\/*)/g, '$1\n$2') // eagle does not like one liners
var blob = new Blob([xml], {type: "application/vnd.cadsoft.eagle.board"})
saveAs(blob, "oshw_logo.lbr")
break
case 'zip':
var zip = new JSZip()
zip.file("oshw_logo.cvlp", JSON.stringify(logo, null, '\t'))
zip.file("oshw_logo.svg", new XMLSerializer().serializeToString(json2svg(logo)))
zip.file("oshw_logo.lht", json2subc(logo))
zip.file("oshw_logo.fp", json2pcb(logo))
zip.file("oshw_logo.kicad_mod", json2kicad(logo))
var xml = new XMLSerializer().serializeToString(json2eagle(logo))
xml = '<?xml version="1.0" encoding="utf-8"?>'+xml
xml = xml.replace(/(>)(<\/*)/g, '$1\n$2') // eagle does not like one liners
zip.file("oshw_logo.lbr", xml)
var file = zip.generate({type: "blob"})
saveAs(file, "oshw_logo.zip")
break
default:
console.log("unknown file type: "+filetype)
}
}
function change_unit() {
var select = document.getElementById("unit")
var unit = select.options[select.selectedIndex].value
if (logo.unit==unit) {
return
}
// get values
var pad_size = parseFloat(pad_size_input.value)
var pad_thickness = parseFloat(pad_thickness_input.value)
var pad_spacing = parseFloat(pad_spacing_input.value)
var pad_chip_spacing = parseFloat(pad_chip_spacing_input.value)
var chip_thickness = parseFloat(chip_thickness_input.value)
var text_thickness = parseFloat(text_thickness_input.value)
// set converted values
pad_size_input.value = convert_unit(pad_size, logo.unit, unit)
pad_thickness_input.value = convert_unit(pad_thickness, logo.unit, unit)
pad_spacing_input.value = convert_unit(pad_spacing, logo.unit, unit)
pad_chip_spacing_input.value = convert_unit(pad_chip_spacing, logo.unit, unit)
chip_thickness_input.value = convert_unit(chip_thickness, logo.unit, unit)
text_thickness_input.value = convert_unit(text_thickness, logo.unit, unit)
// save unit and redraw
logo.unit = unit
draw()
}
</script>
<h2>Open Source Hardware logo generator</h2>
<p>This is the logo I use for the hardware I design in my <a href="https://www.cuvoodoo.info/">electronics projects</a>.<br/>
It is simple, and more suited for being included in board layouts as it only uses lines and arcs.
Here you can customize it, generate your own version, and save it for your favorite CAD tool (coralEDA pcb-rnd, gEDA pcb, KiCAD, or EAGLE).<br/>
I hold no rights on this logo, or withdraw any if applicable, and you can do whatever you want with it.
It is intended to be used for open source hardware projects (which ever definition and licence you are using).<br/>
The source code for this generator can be found <a href="https://git.cuvoodoo.info/oshw_logo/about/">in this git</a>.<br/>
</p>
<table>
<tr>
<th>dimensions</th>
<th>preview</th>
</tr>
<tr>
<td>
<div id="control">
<form onchange="draw()">
pads on: <input type="radio" name="pad_layer" id="pad_layer_copper" value="copper">copper <input type="radio" name="pad_layer" id="pad_layer_silkscreen" value="silkscreen" checked="true">silkscreen<br/>
unit: <select id="unit" onchange="change_unit()">
<option value="mm">millimeter (mm)</option>
<option value="in">inch (in)</option>
<option value="mil">mil/thou (mil)</option>
</select><br />
pad size: <input id="pad_size_input" type="number" step="any" value=3.0 min=0 onchange="draw()"/><br />
pad thickness: <input id="pad_thickness_input" type="number" step="any" value=1.0 min=0 onchange="draw()"/><br />
pad spacing: <input id="pad_spacing_input" type="number" step="any" value=2.0 min=0 onchange="draw()"/><br />
pad-chip spacing: <input id="pad_chip_spacing_input" type="number" step="any" value=1.5 min=0 onchange="draw()"/><br />
chip thickness: <input id="chip_thickness_input" type="number" step="any" value=1.0 min=0 onchange="draw()"/><br />
text thickness: <input id="text_thickness_input" type="number" step="any" value=1.0 min=0 onchange="draw()"/><br />
</form>
</div>
</td>
<td style="padding: 15px;">
<div id="svg"></div>
</td>
</tr>
</table>
<button type="button" onclick="download()">save</button>: <select id="filetype">
<option value="svg">Scalable Vector Graphics (.svg)</option>
<option value="pcb-rnd">coralEDA pcb-rnd sub-circuit (.lht)</option>
<option value="pcb">gEDA pcb footprint (.fp)</option>
<option value="kicad">KiCad s-expr. footprint (.kicad_mod)</option>
<option value="eagle">EAGLE XML component library (.lbr)</option>
<option value="zip">all (.zip)</option>
</select>
</body>
</html>