插件开发求助丨安卓端如何通过本地 URL 返回动态 svg

20241027 更新

经 D 大指导,给思源笔记添加了一个 api,/api/icon/getDynamicIcon,可以通过 api/icon/getDynamicIcon?color=red&lang=zh_CN&date=2024-10-27 直接调用动态图标

✨ Add internal kernel API `/api/icon` by Achuan-2 · Pull Request #12939 · siyuan-note/siyuan


需求

想参考 wolai 的动态图标:https://www.wolai.com/wolai/2tkzTE5w7invgSTqKjSwL7

在思源也开发一个动态图标插件,目的是可以直接本地生成动态图标,而不依赖网络(wolai 说不准哪天就不让非会员用这个功能了)

目前已经在 windows 端,基本上把 wolai 的动态图标都抄了一遍,具体见插件开发 idea 丨模仿 wolai 的动态日历图标 - 链滴

PixPin20241026172628.png

问题

但是目前的问题是,我在安卓上没法用,安卓不方便调试,不知道出了什么问题

我采取的方案是参考插件 taotaochen86/siyuan-plugin-jsrunner,是写了一个 http 服务器,想问问大佬们有什么办法,能解决这个问题,让各端都可以使用链接来返回动态 svg。

下面是我目前的插件代码

server.ts

const http = globalThis.require("http");
// src/server.ts


interface ColorScheme {
    primary: string;
    secondary: string;
}

export class CalendarServer {
    private server: any;
    private port: number;
    private colorSchemes: { [key: string]: ColorScheme } = {
        red: { primary: "#cf5659", secondary: "#f3aab9" },
        blue: { primary: "#5AA9E6", secondary: "#3A79B6" },
        yellow: { primary: "#DBAD6A", secondary: "#AB7D3A" },
        green: { primary: "#5FBB97", secondary: "#2F8867" },
        purple: { primary: "#E099FF", secondary: "#BE66CF" },
        pink: { primary: "#EA5D97", secondary: "#CA3D77" },
        fuchsia: { primary: "#93627F", secondary: "#633241" },
        grey: { primary: "#565557", secondary: "#767577" }
    };

    constructor(port: number) {
        this.port = port;
    }

    public start(): void {
        if (!this.server) {
            this.server = http.createServer((req: any, res: any) => {
                const url = new URL(req.url, `http://localhost:${this.port}`);
                const params = {
                    color: url.searchParams.get('color') || 'red',
                    date: url.searchParams.get('date'),
                    locale: url.searchParams.get('locale') || 'cn',
                    type: url.searchParams.get('type') || '1'
                };

                const svg = this.generateCalendarSVG(params);
                res.writeHead(200, {
                    'Content-Type': 'image/svg+xml',
                    'Cache-Control': 'no-cache',
                    'Pragma': 'no-cache'
                });
                res.end(svg);
            });

            this.server.listen(this.port);
            console.log(`Calendar SVG server started on port ${this.port}`);
        }
    }

    public stop(): void {
        if (this.server) {
            this.server.close();
            this.server = null;
            console.log(`Calendar SVG server stopped`);
        }
    }

index.ts

import { Plugin } from "siyuan";
import "./index.scss";
import { CalendarServer } from "./server";

export default class CalendarSVGPlugin extends Plugin {
    private server: CalendarServer = new CalendarServer(45678);

    onload() {

        // 启动服务器
        this.server.start();
    }

    onunload() {
        // 关闭服务器
        this.server.stop();
    }
}

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22353 引用 • 89444 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8119 引用 • 37027 回帖 • 160 关注
4 操作
Achuan-2 在 2024-11-08 09:34:31 更新了该帖
Achuan-2 在 2024-10-28 00:38:05 更新了该帖
Achuan-2 在 2024-10-27 00:55:35 更新了该帖
Achuan-2 在 2024-10-26 17:47:21 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Achuan-2 2

    设计完成了,设计了 8 种 type,8 种配色

    源码见:Achuan-2/siyuan-plugin-dynamic-calendar-icon: 思源笔记动态图片设计

    内核我晚点再折腾

    参数

    • type:图标类型,默认为 1

      1. type=1:显示年月日星期
      2. type=2 显示年月日
      3. type=3 仅显示年月
      4. type=4 仅显示年
      5. type=5 当前周数
      6. type=6:仅返回星期
      7. type=7:倒数日
      8. type=8:汉字字母数字图标
    • locale:中英文切换,默认为 cn,仅在 type=1、2、3、5、6、7 时有效

      • locale=cn:显示中文
      • locale=en:显示英文
    • color:设置配色,一共八种配色

      • color=red
      • color=blue
      • color=yellow
      • color=green
      • color=purple
      • color=pink
      • color=orange
      • color=grey

      PixPin20241027141500.png

    • date: 设置日期,默认为当前日期,日期设置格式为 yyyy-mm-dd,仅在 type=1-6 时有效

    • content:设置文字图标的内容,默认为空,仅在 type=8 时有效

    示例

    type=1:显示年月日星期

    默认显示今天的日期。

    可通过 date=2024-10-26 指定显示的日期PixPin20241027141546.png

    type=2:显示年月日

    PixPin20241027141656.png

    type=3:仅显示年月

    PixPin20241027141746.png

    type=4:仅显示年

    PixPin20241027141804.png

    type=5:当前周数

    PixPin20241027141813.png

    type=6:仅返回星期

    不输入 color 的话,默认星期一到星期五为红色,星期六和星期日为蓝色
    PixPin20241027141827.png

    指定 color
    PixPin20241027141953.png

    type=7:倒数日

    该图标会显示当前日期与指定日期之间的天数。

    支持 locale=en 修改为英文:

    • 已过 用 Past 表示。
    • 还有 用 Left 表示。

    PixPin20241027142004.png

    PixPin20241027142021.png

    PixPin20241027142030.png

    type=8:文字图标

    该图标可以显示一个指定的汉字、字母、数字组合。

    PixPin20241027142038.png

    2 操作
    Achuan-2 在 2024-10-27 15:52:29 更新了该回帖
    Achuan-2 在 2024-10-27 14:31:55 更新了该回帖
  • 其他回帖
  • Achuan-2

    另外 go 实现,如果 D 大可以告诉我在哪个 go 文件搞,参考哪个函数实现,我可以试试

    内核可以实现 http://127.0.0.1:6806/api/icon?type=1 这种方式渲染 svg,还是其他什么方式呢

    1 回复
  • 你要用 api 方式就要用 server 服务返回,这样的话除非有服务器支持,如果没有的话,移动端实现较为麻烦。

    建议使用 HTML 实现或自己写个插件动态插入这种图标。

    HTML 实现的思路就是,在思源里用 HTML 嵌入,然后允许 HTML 块内执行脚本后,也可以用 js 动态生成数据(HTML 块内脚本目前思源 3.1.10 有 bug,issue: Issue #12921 · siyuan-note/siyuan

    image.png

    自己写插件的思路,就是通过 js 把 svg 动态生成图片(问问 ai 就知道了),然后再把图片插入到思源中,如果图片插入后不实时更新就不需要加载时重新生成,如果需要实时更新,需要加载时实时生成。

    1 回复
    1 操作
    wilsons 在 2024-10-26 21:16:09 更新了该回帖
  • 查看全部回帖
Achuan-2
给时间以生命而不是给生命以时间,如果你喜欢我的分享,欢迎给我买杯咖啡 https://www.yuque.com/achuan-2 上海

推荐标签 标签

  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 545 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 124 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 228 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 43 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 660 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 6 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 155 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 2 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 614 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 374 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 245 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 710 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22352 引用 • 89437 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 212 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 4 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    153 引用 • 3783 回帖 • 1 关注