ValticWeb Multiterm

Showing Off Blog Features

Valtic Pro — Sun, 20 Jul 2025 00:00:00 GMT

Since the post does not have a description in the frontmatter, the first paragraph is used.

Theming

Use your favorite editor theme for your blog!

Theming for the website comes from builtin Shiki themes found in Expressive Code. You can view them here. A website can have one or more themes, defined in src/site.config.ts. There are three theming modes to choose from:

single: Choose a single theme for the website. Simple.
light-dark-auto: Choose two themes for the website to use for light and dark mode. The header will include a button for toggling between light/dark/auto. For example, you could choose github-dark and github-light with a default of "auto" and the user's experience will match their operating system theme straight away.
select: Choose two or more themes for the website and include a button in the header to change between any of these themes. You could include as many Shiki themes from Expressive Code as you like. Allow users to find their favorite theme!

When the user changes the theme, their preference is stored in localStorage to persist across page navigation.

Code Blocks

Let's look at some code block styles:

def hello_world():
    print("Hello, world!")

hello_world()

def hello_world():
    print("Hello, world!")

hello_world()

python hello.py

Also some inline code: 1 + 2 = 3. Or maybe even (= (+ 1 2) 3).

See the Expressive Code Docs for more information on available features like wrapping text, line highlighting, diffs, etc.

Basic Markdown Elements

List item 1
List item 2

Bold text

Italic text

~~Strikethrough text~~

Link

In life, as in art, some endings are bittersweet. Especially when it comes to love. Sometimes fate throws two lovers together only to rip them apart. Sometimes the hero finally makes the right choice but the timing is all wrong. And, as they say, timing is everything.

- Gossip Girl

Name	Age	City
Alice	30	New York
Bob	25	Los Angeles
Charlie	35	Chicago

Images

Images can include a title string after the URL to render as a <figure> with a <figcaption>.

![Pixel art of a tree](./PixelatedGreenTreeSide.png 'Pixel art renders poorly without proper CSS')

I've also added a special tag for pixel art that adds the correct CSS to render properly. Just add #pixelated to the very end of the alt string.

![Pixel art of a tree #pixelated](./PixelatedGreenTreeSide.png 'But adding #pixelated to the end of the alt string fixes this')

Admonitions

:::note
testing123
:::

:::note testing123 :::

:::tip testing123 :::

:::important testing123 :::

:::caution testing123 :::

:::warning testing123 :::

Character Chats

:::duck
**Did you know?** You can easily create custom character chats for your blog with MultiTerm!
:::

:::duck Did you know? You can easily create custom character chats for your blog with MultiTerm! :::

Adding Your Own

To add your own character, first add an image file to the top-level /public directory in your cloned MultiTerm repo. Astro cannot automatically optimize image assets from markdown plugins, so make sure to compress the image to a web-friendly size (<100kb).

I recommend Google's free Squoosh web app for creating super small webp files. The characters here have been resized to 300 pixels wide and exported to webp with 75% quality using Squoosh.

After you've added your image, update the characters option in site.config.ts with your newly added image file and restart the development server.

Character Conversations

When there are multiple character chats in a row, the order of the chat image and chat bubble reverses to give the chat more of a back-and-forth appearance.

:::owl
This is a cool feature!
:::

:::unicorn
I agree!
:::

:::owl This is a cool feature! :::

:::unicorn I agree! :::

You can specify the alignment (left or right) to override the default left, right, left, ... ordering.

:::unicorn{align="right"}
Over here, to the right!
:::

:::unicorn{align="right"} Over here, to the right! :::

GitHub Cards

GitHub overview cards heavily inspired by Astro Cactus.

::github{repo="stelcodes/multiterm-astro"}

::github{repo="stelcodes/multiterm-astro"}

::github{user="withastro"}

::github{user="withastro"}

Emoji :star_struck:

Emojis can be added in markdown by including a literal emoji character or a GitHub shortcode. You can browse an unofficial database here.

Good morning! :sleeping: :coffee: :pancakes:

Good morning! :sleeping: :coffee: :pancakes:

All emojis (both literal and shortcoded) are made more accessible by wrapping them in a span tag like this:
<span role="img" aria-label="coffee">☕️</span>
At the time of writing, emoji v16 is not supported yet. These emojis can be included literally but they do not have shortcodes and will not be wrapped.

LaTeX/KaTeX Math Support

You can also display inline math via remark-math and rehype-katex.

Make those equations pretty! $ \frac{a}{b} \cdot b = a $

Make those equations pretty! $ \frac{a}{b} \cdot b = a $

Check out the KaTeX docs to learn about the syntax.

$$
a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg)
$$

$$ a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg) $$

HTML Elements

<button>A Button</button>

Fieldset with Inputs

<fieldset> <input type="text" placeholder="Type something"><br> <input type="number" placeholder="Insert number"><br> <input type="text" value="Input value"><br> <select> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select><br> <textarea placeholder="Insert a comment..."></textarea><br> <label><input type="checkbox"> I understand<br></label> <button type="submi">Submit</button> </fieldset>

Form with Labels

<form> <label> <input type="radio" name="fruit" value="apple"> Apple </label><br>

<label> <input type="radio" name="fruit" value="banana"> Banana </label><br>

<label> <input type="radio" name="fruit" value="orange"> Orange </label><br>

<label> <input type="radio" name="fruit" value="grape"> Grape </label><br>

<label> <input type="checkbox" name="terms" value="agree"> I agree to the terms and conditions </label><br>

Test Calculadora

Valtic Pro — Wed, 12 Nov 2025 00:00:00 GMT

Test de una calculadora en Javascript <fieldset> <h1>Electric Power Conversion</h1> <div class="form-group required">
<label class="form-control-label" for="Voltage">Voltaje:</label> <input class="form-control" type="number" name="voltaje" id="voltaje" value="380" required=""> </div> <div class="form-group required">
<label class="form-control-label" for="powerFactor">Power Factor:</label> <input class="form-control" type="float" name="pf" id="pf" value="0.85" required=""> </div> <div class="form-group required">
<label class="form-control-label" for="power">Power:</label> <input class="form-control" type="float" name="pw" id="pw" value="0" required=""> </div> <button id="btn_calc" type="submit">Calcular</button> <label id="resultado">Resultado</label> </fieldset>

// Find our component DOM on the page. const button = document.getElementById("btn_calc"); const voltage = document.getElementById('voltaje') const pf = document.getElementById('pf') const pw = document.getElementById('pw') const res = document.getElementById('resultado') // Add event listeners to calc power when a button is clicked. // buttons.forEach((button) => { button.addEventListener('click', () => calcPower()); // });

function calcPower() { let volt = voltage.valueAsNumber let pf2= parseFloat(pf.value) let pw2 = parseFloat(pw.value) let resu= (pw2*1000) / (Math.sqrt(3) * pf2 * volt ) res.innerHTML=Resultado: ${resu.toFixed(2)} A }

</script>

Python Small Scripts

Valtic Pro — Wed, 12 Nov 2025 00:00:00 GMT

Some examples of small python script for automate small task, than can save you some minutes:

python3 -v

Show the version of Python.

Inside Python REPL, you can write:

x=4
y=x*2
print(f"Hello World: {y}")  // Only for testing

Only for testing all is working well.

Example Hosting Webs

Valtic Pro — Sun, 15 Feb 2026 00:00:00 GMT

Paginas web y Hosting para pruebas

Sitios de interes

- Base de datos MySQL - db4free.net/ (para pruebas ) Con Administracion de MyPHPAdmin
- PHP - Googiehost.com
- PHP - InfinityFree
- MySQL - Filess.io
- PHP/MySql - GIWS
- JSON - jsoneditoronline.org
- BBDD - Turso
- HTML - Surge.sh

Longer Ray Firmware

Valtic Pro — Sun, 15 Feb 2026 00:00:00 GMT

Firmware longer Ray 5

Problema al cargar firmware en Loger Ray 5 CNC Laser with the LGT laser 1.1 Version with air pump.

Para los modelos vendidos desde Octubre, se esta presentando si se carga el firwmare que aparece en la pagina oficial. Porque llevan un particionado de la memoria diferente y se queda bloqueado en un ciclo infinito de arranque. ( Aunque se puede conectar al puerto y Flashearlo, para recuperarlo )

Add Notes.

Markdown cheatsheet

Valtic Pro — Sun, 15 Feb 2026 00:00:00 GMT

Markdown cheat Sheet from: https://www.markdownguide.org)

Markdown Cheat Sheet

Thanks for visiting The Markdown Guide!

This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax.

Basic Syntax

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

Heading

H1

H2

H3

Bold

bold text

Italic

italicized text

Blockquote

blockquote

Ordered List

First item
Second item
Third item

Unordered List

First item
Second item
Third item

Code

code

Horizontal Rule

Link

Markdown Guide

Image

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

Syntax	Description
Header	Title
Paragraph	Text

Fenced Code Block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Footnote

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

Heading ID

My Great Heading {#custom-id}

Definition List

term : definition

Strikethrough

~~The world is flat.~~

Task List

[x] Write the press release
[ ] Update the website
[ ] Contact the media

Emoji

That is so funny! :joy:

(See also Copying and Pasting Emoji)

Highlight

I need to highlight these ==very important words==.

Subscript

H~2~O

Superscript

X^2^

Pagina Creador de calculadoras

Valtic Pro — Sun, 29 Mar 2026 00:00:00 GMT

Mini Dashboard de construcción de Calculadoras sencillas.

Dashboard

- Acceso Dashboard CalcLab - CalcLab
- Turso - Turso.tech

Nota: En la version que hay colgada en la web, solo se ha incluido la version reducida, ya que esta pendiente de buscar un alojamiento correcto para esta web. ( Fuera de Astro )

Calculadoras WEB 1.0

Valtic Pro — Tue, 31 Mar 2026 00:00:00 GMT

Presentacion Calculadoras WEB

Calculadoras

Se ha liberado la versio 1.0 de la web, CalcuLab, una micro plataforma donde puedes crear tus propias calculadoras, de formas sencilla. En esta version, se permite crear nuevas calculadoras, con el numero de entradas que sean necesarias, luego se define u o mas salidas. Estas salidas se introduce la formula, usando JavaScript. Las calculadoras quedan guardadas y accesibles para todos los usuarios.

CaluLab

[blue]Existe la verison de guardarlas en local. En esta version la infomracion de las calculadoras se guarda en credenciales locales. CalcuLaba Local TODO: Funcion exportar/Importar la informacion a JSON, para rescatarla a otro navegador.

Desarrollo Intermedio en Ubuntu Touch: Apps con QML y JS

Valtic — Thu, 02 Apr 2026 00:00:00 GMT

Construyendo para el Futuro Móvil: Apps en Ubuntu Touch

Si ya sabes programar pero quieres dar el salto a la convergencia de Ubuntu Touch, este tutorial es para ti. No vamos a ver qué es una variable; vamos a construir una aplicación de lista de tareas con persistencia de datos.

1. El Entorno de Trabajo: Clickable

Para desarrollar en UBports, la herramienta indispensable es Clickable. Es un CLI que gestiona la compilación, el empaquetado y la ejecución en dispositivos o contenedores.

Tutorial para el aprendizaje de cracion de aplicaciones con QML+Js, para aplicaciones UbTouch. Info: UbPorts Tutorial

Todas las atribuciones son para los creadores de UbPorts y sus asociados.

Este blog solo tiene el objetivo de la re-distribucion de la informacion para ampliar su base de usuarios.

Resumen "manos a la obra" del Tutorial referenciado.

1. Instalación rápida

pip install clickable

2. Crear un nuevo proyecto

Bash

clickable create

Selecciona la plantilla "QML Only" y completa los datos solicitados.

3. Estructura de una App Nativa en Ubuntu Touch

Una aplicación de Ubuntu Touch se basa principalmente en el framework Qt 5 y los Ubuntu Components.

Los archivos y carpetas principales son:

Main.qml: Punto de entrada de la interfaz gráfica.
manifest.json: Metadatos de la aplicación (nombre, versión, icono, permisos, etc.).
assets/: Carpeta para imágenes, iconos y otros recursos.

4. Bloque básico de interfaz (Main.qml)

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    objectName: "mainView"
    applicationName: "mytodoapp.tuusuario"

    width: units.gu(40)
    height: units.gu(60)

    Page {
        title: i18n.tr("Mis Tareas")

        Column {
            anchors.fill: parent
            spacing: units.gu(1)
            // Aquí irá nuestra lógica y componentes
        }
    }
}

5. Lógica con JavaScript

En QML, JavaScript no solo se usa para eventos, sino también como motor principal de la lógica de negocio. Para mantener el código limpio y mantenible, es recomendable separar la lógica en un archivo .js.

Ejemplo: logic.js

// logic.js
function addTask(model, text) {
    if (text.trim().length > 0) {
        model.append({
            "name": text.trim(),
            "done": false
        });
    }
}

function toggleTask(model, index) {
    const task = model.get(index);
    model.setProperty(index, "done", !task.done);
}

6. Integración en QML

import "logic.js" as Logic

Button {
    text: "Añadir Tarea"
    onClicked: Logic.addTask(taskModel, inputField.text)
}

7. Persistencia de datos con LocalStorage

Para que las tareas persistan después de cerrar la aplicación, puedes utilizar el módulo LocalStorage de QtQuick.

Nota: Para proyectos más avanzados, consulta la documentación oficial de UBports sobre el Content Hub y el uso de bases de datos SQLite.

8. Pruebas y Despliegue

La forma más sencilla de probar y desplegar tu aplicación es usando la herramienta Clickable instalda.

8.a. Test en el equipo de desarrollo

Conecta tu teléfono Ubuntu Touch con el Modo Desarrollador activado y ejecuta:

Bash

clickable desktop

8.b. Ejecutar en el dispositivo

Conecta tu teléfono Ubuntu Touch con el Modo Desarrollador activado y ejecuta:

Bash

clickable

Este comando compilará la aplicación, la enviará al dispositivo y la lanzará automáticamente.

Recursos de Referencia

Selecciona "QML Only" para este tutorial

Enable SSH Ubuntu Touch

Valtic Pro — Thu, 02 Apr 2026 00:00:00 GMT

#Manejo del ADB Shell:

El tema de la SSH key ya esta creado en la Tablet y en el PC.

Tablet

'''bash sudo service ssh start ip address show wlan0

PC

'''bash clickable --ssh 192.168.0.xx ( ip mostrada en la tablet anteriormente)

Te pide contraseña todo el tiempo.

PASOS HABILITAR SSH NUEVO TERMINAL ( copia de la web )

Habilitar SSH UbTouch

3.2.2. Using SSH

If you don’t want to use a USB cable while developing your app and testing it on your phone, an alternative connection method to ADB is SSH (Secure SHell). This allows Clickable to connect to your phone over Wi-Fi, using an encrypted link.

Creating an SSH Key Pair

You need to create an SSH key pair because Ubuntu Touch disables logging in with a password by default. If you already have a key pair, skip the following command; otherwise, run this on your Ubuntu machine:

ssh-keygen

The default choice for the file location is fine. You should enter a passphrase that is easy for you to remember and type but not too easy for others to guess.

Transferring the Public Key to Your Phone

Transfer the public key part of this key pair to your phone. The easiest way is using ADB if your phone is still connected via USB and has developer mode enabled:

adb push ~/.ssh/id_rsa.pub /home/phablet/

Opening a Shell on Your Phone

Open a shell on your phone by opening the Terminal app, which asks for your phone’s passcode or passphrase, or by entering the following command on your computer:

adb shell

Configuring SSH Directory and Permissions

Check whether you already have a configuration directory for SSH:

ls .ssh

If not, create one and set proper permissions:

dir /home/phablet/.ssh
dchmod 700 /home/phablet/.ssh

Add your public key to the list of authorized keys and set permissions:

type /home/phablet/id_rsa.pub >> /home/phablet/.ssh/authorized_keys
chmod 600 /home/phablet/.ssh/authorized_keys

Starting the SSH Server

For Android-based devices:

sudo android-gadget-service enable ssh

Enter your phone’s passcode or passphrase if prompted. For Linux-based devices such as PinePhone:

sudo service ssh start

Install an Application to the tablet/phone via SSH

Now check your phone’s IP address:

ip address show wlan0

To make Clickable on your computer use SSH to connect to your phone, run it with the following option and use your phone’s IP address:

clickable --ssh 192.168.0.xx

When connecting over SSH, your computer asks you to enter the passphrase of your key pair. After this, the app window appears on your phone. Just swipe it away to close it.