Code: [Local Link Removed for Guests]
' ESP32: CLK=GPIO18 - DIN=GPIO23
' ESP8266: CLK=GPIO14 - DIN=GPIO13
' In both, CS can be chosen
dim l(65)
file$ = "/set01"
pattern$ = "0,0,0,0,0,0,0,0"
CS = 15 ' CS=GPIO15 - CLK=GPIO14 - DIN=GPIO13
MAXSCROLL.SETUP 1, CS
writeMAX &H0A, 0 ' &H0A = brightness
clearMAX
onHTMLReload web
gosub web
WAIT
END
' ---------------------------------
web:
cls
cssExternal "/button.css"
a$ = "" : a$ = a$ + |<center><div class="led">|
led = 1
for y = 1 to 8
for x = 1 to 8
command "a$=a$+button$("+chr$(34)+str$(led)+chr$(34)+",btn,"+chr$(34)+"bt"+str$(led)+chr$(34)+")"
led = led + 1
next x
a$ = a$ + "<br>"
next y
a$ = a$ + textBox$(pattern$, "pattern")
a$ = a$ + |</div>|+button$("Save To",saveMAX,"btnSave")+textBox$(file$,"txtFile")
html a$
return
' ---------------------------------
btn:
b = val(htmlEventButton$)
b$ = "bt" + htmlEventButton$
if l(b) = 0 then
l(b) = 1
css CSSID$(b$, "background: yellow; color:black;")
else
l(b) = 0
css CSSID$(b$, "background: black; color:white;")
endif
displayMAX
updateLine
return
' ---------------------------------
saveMAX:
line$ = pattern$ + chr$(10)
file.append file$, line$
jscall |{alert("Saved character pattern");}|
return
' ---------------------------------
SUB clearMAX
LOCAL i
for i = 1 to 8
writeMAX i, 0
next i
END SUB
' ---------------------------------
SUB writeMAX(opcode, value)
LOCAL r
pin(CS) = 0
r = spi.byte(opcode)
r = spi.byte(value)
pin(CS) = 1
END SUB
' ---------------------------------
SUB displayMAX
LOCAL row, col, byte, pos, cell
cell = 1
for row = 1 to 8
byte = 0
for col = 1 to 8
pos = 8 - col
byte = byte + (l(cell) * (2^pos))
cell = cell + 1
next col
writeMAX row, byte
next row
END SUB
' ---------------------------------
SUB updateLine
LOCAL line$, i, j, pos, cell, byte
for i = 0 to 56 step 8
for j = 1 to 8
pos = 8 - j
cell = i + j
byte = byte + (l(cell) * (2^pos))
next j
line$ = line$ + str$(byte) + ","
byte = 0
next i
line$ = left$(line$, len(line$) - 1)
pattern$ = line$
refresh
END SUB
And the CSS file:
Code: [Local Link Removed for Guests]
.led button{
margin:3px;
background:black;
color:white;
width:50px;
height:50px;
border-radius:50%
}
#pattern {
margin:20px;
width:450px;
height:40px;
padding:10px;
font-size:1.5em;
text-align:center;
border:solid 2px;
}
#btnSave {
display: inline;
width: 150px;
margin: 0px 10px;
padding: 10px 20px;
border: none;
border-radius: 16px;
color: black;
background-color: #ddd;
text-align: center;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
#txtFile {
width:250px;
height:40px;
margin-left:20px;
padding:10px;
font-size:1.2em;
border:solid 2px;
}
https://youtu.be/rifVOn8Cra4
While designing on the screen, the corresponding LEDs light up or turn off to easily see the real effect.
The generated patterns can be saved in a file for later use in a program that I will later publish.
I use it to view still images, not scrolling.
I hate scrolling!