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

20241027 更新

经 D 大指导,给思源笔记添加了一个 api,/api/icon/getDynamicIcon,可以通过 http://127.0.0.1:6806/api/icon?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。

下面是我目前的插件代码

https://github.com/Achuan-2/siyuan-plugin-dynamic-calendar-icon

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();
    }
}

  • 思源笔记

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

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

    21859 引用 • 86970 回帖
  • Q&A

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

    7861 引用 • 35958 回帖 • 180 关注
3 操作
Achuan-2 在 2024-10-28 00:38:05 更新了该帖
Achuan-2 在 2024-10-27 00:55:35 更新了该帖
Achuan-2 在 2024-10-26 17:47:21 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 没看明白为什么一定要启用 Server。是因为用图片加载的,所以需要服务端返回资源?

    1 回复
  • Achuan-2

    只要能根据参数动态返回 svg 就行,因为比如当天日历图标和倒数日就需要每天更新

    wolai 是用 api 实现的

    1 回复
  • 你要行内的,还是只要显示出来就行?

    1 回复
  • Achuan-2

    需要行内的,可以用图片链接语法显示,之后如果思源支持文档图标用链接,就可以用动态图标了

  • 你要用 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 更新了该回帖
  • 用 server 是不行的,对于安卓和 docker 运行的这些,因为他们没有 electron 运行时,我建议你直接用插件 js 监听具有指定你这个 url 的元素,然后动态修改 dom

    1 回复
  • Achuan-2

    谢谢,原来安卓没有 electron runtime。

    可能得类似你在思源渲染 tif 的方案,动态替换

    不过这样有点麻烦了,我再想想

  • Achuan-2

    我其实之前已经写了一个倒数日挂件块了

    wolai 动态图标,也用挂件的方式写了个 demo

    之所以想用 url 返回 svg,是考虑思源万一支持在线的文档图标的话,就可以使用

    js 动态替换,确实是目前能想到的一个方案了

  • 我觉得比较好的方案还是内核内置生成动态图标,看看谁帮忙 PR 贡献一下吧。

    2 回复
  • 内置的话应该没法随便改吧

    1 回复
  • 我的意思是和 wolai 一样,支持动态图标特性。

    1 回复
  • 刚刚看了一下,感觉这个动态图标不容易搞国际化,要做的话只能先支持中文和英文。

    不过最简单的方法还是支持图片用链接,用户直接用 Wolai 的图标就行了。

    1 回复
  • 我理解只需要改变 svg 中的一些文本值就可以国际化了,内核动态生成 svg 代码。

    1 回复
  • 我想到的是各个语种的词汇长度不一致,感觉直接替换文本的话弄出来会不太好看

    2 回复
  • 先确定机制的可行性,是否美观最后可以取舍,比如中英文缩写肯定可行,其他某些语言可能也行。

  • Achuan-2

    https://github.com/Achuan-2/siyuan-plugin-dynamic-calendar-icon

    生成动态图标逻辑我基本已经写好了,把 wolai 的 9 种样式都 copy 了(没有 type2,因为 wolai type1 和 type2 貌似就是一样的),也加了中英文切换(通过 locale=cn,locale=en 切换)

    但是不知道内核内置这个功能怎么加,是需要用 go 写吗

    调用也是调 api 的形式生成 svg 吗

    如果官方要集成这个功能,直接用 wolai 的样式会有侵权风险吗,是不是得修改下,wolai 本身的设计是真的好看,我目前只对 type6 倒数日图标进行了修改,添加了天/days 的文字显示

    1 回复
    4 操作
    Achuan-2 在 2024-10-27 00:54:21 更新了该回帖
    Achuan-2 在 2024-10-27 00:52:27 更新了该回帖
    Achuan-2 在 2024-10-27 00:50:10 更新了该回帖
    Achuan-2 在 2024-10-27 00:49:14 更新了该回帖
  • 要用 go 并且得重新实现避免侵权

    3 回复
  • Achuan-2

    svg 可以直接指定字体类别和字体大小的,国际化肯定没问题,就是麻烦,月份和星期的英文是通用的,感觉没太必要纠结国际化,年份和日期就用阿拉伯数字

    1 操作
    Achuan-2 在 2024-10-27 01:17:23 更新了该回帖
  • Achuan-2 1

    重新设计好办,我可以用 adobe illustrator 设计,导出 svg,然后参考 wolai,替换文本和支持修改配色

    这个我可以帮忙搞

    不过内核我估计就得靠其他大佬贡献了

  • Achuan-2

    D 大看看这种程度上的修改可以不
    参考 2018 年 Terence Eden 开源的动态日历图标:edent/Dynamic-SVG-Calendar-Icon: Here it is, an SVG calendar which always display's today's date.(wolai 的动态日历图标是 2020.09.04 才出的,见 wolai 2020.9 更新

    Terence Eden 的

    image.png

    修改:

    • 把孔洞补上
    • 英文和数字字体改为 Arial
    • 灰色背景调亮

    image.png

    添加年份(wolai 没有同时显示年月日星期的图标)

    image.png

    wolai 的

    image.png

    1 操作
    Achuan-2 在 2024-10-27 09:34:33 更新了该回帖
  • Achuan-2

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

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

    1 回复
  • 看上去这个设计还可以,颜色那些后面再调整。go 的话请求路由配置在 router.go 里面,你可以参考一下其他接口的写法。

    2 回复
  • 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

    打算试试了,尝试之前,想问问 api 支持这样调用吗

    http://127.0.0.1:6806/api/system/dynamicIcon?type=1&color=blue&date=2023-05-20&locale=en

    ai 给的代码, 这样就能获取 URL 里的 type 了吗

    func getDynamicIcon(c *gin.Context) {
        iconType := c.Query("type")
      
        var svgContent string
        switch iconType {
        case "1":
            // 这里是一个简单的SVG图标示例
            svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
                <path d="M12 8v8M8 12h8" stroke="currentColor" stroke-width="2"/>
            </svg>`
        default:
            c.String(400, "Invalid icon type")
            return
        }
      
        // 设置响应头
        c.Header("Content-Type", "image/svg+xml")
        c.String(200, svgContent)
    }
    
    
    1 回复
  • 应该可以的,但最好还是搭建一下开发环境实际编译看看。

    3 回复
  • Achuan-2

    好滴,我在搭建了

  • Achuan-2 2

    hhhh ,可以的

    PixPin20241027164330.png

请输入回帖内容 ...
Achuan-2
给时间以生命而不是给生命以时间,给我买包辣条 https://www.yuque.com/achuan-2 上海

推荐标签 标签

  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 120 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 137 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 3 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    5 引用 • 26 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3174 引用 • 8212 回帖 • 1 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 51 回帖 • 86 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 623 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 311 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 2 关注
  • 京东

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

    14 引用 • 102 回帖 • 380 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 616 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 555 关注
  • ReactiveX

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

    1 引用 • 2 回帖 • 154 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • gRpc
    11 引用 • 9 回帖 • 58 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 211 关注
  • Vim

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

    29 引用 • 66 回帖 • 2 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 340 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖