Редактор фонтов для SSH1106

[phalanx]

Всех с праздником!

Собираю простенький контроллер на PIC16F876 + tinyRTC(DS1307) + SSH1106. Вывод на дисплей взял здесь:
https://aki-technical.blogspot.com/2024 ... splay.html

Понадобились символы в кириллице и некоторые спецсимволы. Погуглил по диагонали, с ходу ничего не нашел. Делать все руками лениво, поэтому по итогу накидал сам по-быстрому, может кому пригодится. В программе по ссылке реализовано два фонта, 8х8 и 8х16, подходит для обоих. Код под спойлером, скопировать, сохранить с расширением html, открыть в браузере. В textarea копируется строчка описания символа из sh1106.h, например

Код:

...0xE0,0x10,0x08,0x08,0x08,0x10,0xE0,0x00,0x0F,0x18,0x24,0x24,0x38,0x50,0x4F,0x00,//Q 49
 ... 


Далее нажать кнопку import. Данные загрузятся в поля редактирования символа. Далее мышью редактиуется символ до нужного вида. После, нажимаете кнопку generate. Генерируемый код выводится тоже в textarea, после чего копипастится в программный код.

Спойлер

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

body {
display: flex;
height: 100vh;
background-color: #AAA;
justify-content: center;
align-items: flex-start;
margin-top: 100px;
}

.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 15vw;
height: 15vw;
}

div {
flex-basis: 11%;
height: 11%;
border: 1px solid #aaa;
}

.box{
background-color:#fff
}

.box.filled{
background-color: #000;
}

.first-half{
border-bottom: 3px solid black;
}

button#button, button#import{
width: 100px;
font-size: 20px;
margin-left: 20px;
}

textarea#textarea{
width:400px;
}
</style>

<main class="container">
</main>

<textarea id="textarea" rows="10"></textarea>
<button id="button">Generate</button>
<button id="import">Import</button>


<script>
$( function()
{
for( let i = 0; i < 2; i ++ )
for( let j = 0; j < 8; j ++ )
for( let k = 0; k < 8; k ++ )
$(".container").append(`<div class="box ${ j == 7 && i == 0 ? "first-half" : "" }" id=${i}${k}${j}></div>`)


let mouseButtonDown = false;
mouseSetup()

$( ".box" ).on( "mouseup", function() { mouseButtonDown = false; } );

function mouseSetup()
{
document.onmousedown = function() {
mouseButtonDown = true;
}
document.onmouseup = function() {
mouseButtonDown = false;
}
}

$(".box").on( "mouseenter", handlerIn );
$(".container").on( "mouseleave", function(){ mouseButtonDown = false } );
$(".box").on( "mousedown", mouseDown );
$("#button").unbind("click").bind("click", generate );
$("#import").unbind("click").bind("click", importClick );

function mouseDown() {
if( $( this ).hasClass("filled") )
$( this ).removeClass("filled")
else
$( this ).addClass("filled")
}

function handlerIn()
{
if( mouseButtonDown )
if( $( this ).hasClass("filled") )
$( this ).removeClass("filled")
else
$( this ).addClass("filled")
}

function generate()
{
console.log( 123 )
let arr=[];
for( let k = 0 ; k < 2; k ++ )
for( let j = 0 ; j < 8; j ++ ){
let val = 0;
for( let i = 0 ; i < 8; i ++ ){
let div = $(`div[id="${k}${j}${i}"]`);
if( $( div ).hasClass("filled"))
val += i ? 2 << ( i - 1 ) : 1;
}
arr.push( `0x${val.toString(16).toUpperCase().padStart(2,"0")}` )
}
$("#textarea").val( arr.join(",") );
}

function hex2bin(hex){
return (parseInt(hex, 16).toString(2)).padStart(8, '0');
}

function parseAndMake( val, index ){
val = val.split("").reverse().join("");
let half = index < 8 ? 0 : 1;
let pos = index % 8;

for( let i = 0; i < 8; i ++ )
if( parseInt( val[i] ) )
$(`div[id="${half}${pos}${i}"]`).addClass("filled");
}

function importClick()
{
let code = $("#textarea").val();
$(".box").removeClass("filled");
let arr = code.split(",")
arr = arr.map( (x) => hex2bin( x.trim().split("0x")[1] ));
arr.forEach((element, index) => parseAndMake( element, index ));
}
});
</script>

Код импорта-экспорта можно переписать до нужного формата упаковки символа. Я делал символы 8х16.

editor.jpg

(20.69 KiB) Скачиваний: 16

photo_2024-02-23_10-53-48.jpg

(32.76 KiB) Скачиваний: 22