使用录屏功能,轻松给家中长辈制作手机视频使用教程,或录制打游戏过程中的精彩片段。
分类: 杂记
杂记
PSV神秘海域如何调整为中文语言
最近淘宝了一个PSV
版本的神秘海域,卖家说是繁体跟英文双语言的,结果插卡后一直是英文,始终找不到中文语言的选项。
网上搜索了以下,才发现是跟机器语言绑定的,如果要使用繁体中文版本,必须把机器的语言从简体中文调整到繁体中文才行。
也就是,在PSV
设置里将系统语言设置为繁体中文,再进入游戏里就可以了。
参考链接
使用graphviz绘制流程图
前言
日常的开发工作中,为代码添加注释是代码可维护性的一个重要方面,但是仅仅提供注释是不够的,特别是当系统功能越来越复杂,涉及到的模块越来越多的时候,仅仅靠代码就很难从宏观的层次去理解。因此我们需要图例的支持,图例不仅仅包含功能之间的交互,也可以包含复杂的数据结构的示意图,数据流向等。
但是,常用的UML建模工具,如Visio等都略显复杂,且体积庞大。对于开发人员,特别是后台开发人员来说,命令行,脚本才是最友好的,而图形界面会很大程度的限制开发效率。相对于鼠标,键盘才是开发人员最好的朋友。
graphviz简介
本文介绍一个高效而简洁的绘图工具graphviz。graphviz是贝尔实验室开发的一个开源的工具包,它使用一个特定的DSL(领域特定语言): dot作为脚本语言,然后使用布局引擎来解析此脚本,并完成自动布局。graphviz提供丰富的导出格式,如常用的图片格式,SVG,PDF格式等。
Ubuntu 16.04下同步github中fork出来的分支
在github上fork
出一些感觉比较好的项目,已经做了部分修改,由于某些原因,无法通过pull request
合并到原作者的分支,但是想把原项目的最近更新代码合并进来,可以通过git fetch
原始项目到本地,通过git merge
的进行代码合并。
以fork
出来的pyseeta
项目为例
- 检出自己的代码
- 把原作者项目地址添加到刚刚检出的项目
- 从原作者仓库获取到分支,及相关的提交信息
- 切换到想合并代码的分支
- 代码合并,并解决冲突
- 提交合并后的代码
- 推送提交到远程服务器
参考链接
Ubuntu 16.04 LTS通过SSH2更新WordPress及其插件
最近服务器升级到了Ubuntu 16.04 LTS
,结果遇到了与Ubuntu 12.04通过SFTP更新 WordPress相似的问题,界面中没有出现SSH
的选项,只不过目前(2017.06.04
)最新版本的WordPress
(4.7.5
)一直提示的是"无法连接到服务器
",原因依旧是缺少PHP
的SSH
支持库,总结一下解决方法如下:
如果更新或者删除插件的时候提示 "未能找到WordPress插件目录
",则参照
Ubuntu 14.04系统WordPress 4.5升级到PHP7之后执行插件升级报错“无法定位WordPress内容目录(wp-content)”中的方法修改即可。
目前(2017.06.09
)依然存在的问题是更新插件的时候,提示拷贝出错。查看系统日志
可以看到如下错误信息
这个问题属于php-ssh2
自身的BUG
导致的,问题已经确认并修复,但是还没合并到Ubuntu 16.04 LTS
所属的分支上。
目前的解决方法是单独安装Ubuntu 17.04
系统上已经编译好的对应系统的deb
包,然后手工安装更新。
详细的版本信息可以从Ubuntu php-ssh2 package查询各个系统版本上的关于php-ssh2
的包信息。
比如本服务器上更新的命令示例如下:
如果外网访问不畅通,也可以从本站下载,示例脚本如下:
参考链接
dependencies 与 dependencyManagement 的区别
顶层pom中可定义dependencyManagement和dependencies,它们的区别在于
dependencyManagement只是用来管理版本号,防止版本冲突,子pom依赖相应包时,会优先用dependencyManagement指定的版本号。
dependencies是实实在在的下载/依赖,子模块可以直接依赖到
Hollow导读
本文大部分内容来源于Hollow官方文档
开发过程中会遇到这样的数据:体量算不上“大数据”,数据在变化,幅度也不大。处理这类数据的时候,一般是把数据放到内存中(容器、json、xml、RDBMS),隔断时间更新一次。
这样处理有很多局限性
- 内存限制
- 更新频率不能过快,造成延迟
- 频繁的读写造成I/O、GC等
世界陷入水火,一般的套路现在主角就该出场了
Netflix推出了Hollow,它是数据的利剑,内存的盾牌,它将不JSON、不XML、少GC、高效率的解决问题,总而言之,他是人民的大救星,下面请一起走进科学,走进Hollow的内心世界。
Hollow致力于解决内存数据问题,处理的量级(将数据转为JSON)一般在GB级别,TB/PB就爱莫能助了。
快照-增量
生产的数据有两种类型,Snapshot、Delta,即全量、增量数据。大多数情况下,我们处理的是增量数据。
生产-消费者模式
一个生产者服务多个消费者,生产者生产快照和增量数据更新至BLOB(二进制大数据)文件,消费者在内存中使用数据,只读属性保证了消费的高效。生产文件到内存对开发者是透明的。
数据模型
数据模型基于一个POJO,又相当于数据库的一行。开发者只需要定义一个POJO,Hollow的API-Generator会生产这个POJO相应的消费文件。
它适用于只读数据、单个生产者、可能多个消费者的情形。Hollow实现持久化的唯一机制是利用BLOB存储,它只是一个文件存储,可能是S3、NFS、甚至一台FTP服务器。启动的时候,消费者们读取整个数据集的快照,并将数据集引导到内存中。通过增量的方法,可以保证内存中的数据集是最新的。对于每个消费者,内存中的数据备份是临时性的,如果消费者重新启动,需要从BLOB存储中重新加载快照。
实际上BLOB快照文件的格式很简单,它在很大程度上和在内存布局的结构相同,因此数据初始化主要是将BLOB的内容直接复制到内存中,这一步可以快速完成,确保了初始化的时间很短。
Hollow-Expected class sun.util.calendar.BaseCalendar$Date but object was class java.util.Date
ObjectMapper写入一个数据,包含一个java.util.Date成员,报Expected class sun.util.calendar.BaseCalendar$Date but object was class java.util.Date错误。
这是hollow v2.1.0以下的一个bug,详见:
https://github.com/Netflix/hollow/issues/13
Thanks very much for the report! I verified the issue and released a fix in v2.1.1. |
有趣的是,将hollow替换成2.1.1,还是报这个错误,替换成2.2.1就好了
这句I verified the issue and released a fix in v2.1.1.像极了研发的口头禅‘下个版本修复’,承包了我一上午的笑点。
Jdom-XmlOutputter 换行(setIndent)
Jdom的XmlOutputter默认生成的文件不带换行,所有key-value对写在一行里,使用起来很不方便,XmlOutputter支持设置换行。
jdom1.0中写法如下
XmlOutputter xmlOut = new XmlOutputter(" ", true, "utf-8");
三个参数分别为,缩进(这里是两个空格),是否换行,字符编码
jdom1.0以后不支持上面的写法,而是把三个参数剥离出来,形成了Format类
d3总结
项目原因,需要使用web绘制图表,比较靠谱的有echart和d3。
echart:应该是百度的项目,首页做的很漂亮,文档也比较全。个人感觉是一个入手较易,主要在学习怎么配参数,地图是echart的一个亮点。缺点就明显了,入手容易的肯定高度封装过,很难根据自己的需求定制化。而且使用了cavas绘图,在移动端性能不如svg。个人感觉echart适合一些时间比较紧迫,设计没那么明确的场合,直接套上echart,就已经很漂亮了。
d3:大名鼎鼎,受欢迎程度超过jquery,首页的绚丽特效让人眼花,教程的话强烈推荐http://www.ourd3js.com/wordpress/,这个教程好像出了书,叫精通D3.js,基本上把教程撸一遍就没啥大问题了。
d3的优点:用过一段d3后,感觉d3就是svg的jquery,把svg的操作封装为更易用的接口,并提供各种数据可视化的接口。所以d3很灵活,因为你可以用d3在svg中添加一个点、线、饼等等,svg性能不错。链式写法。
缺点:入手稍微慢点,不过撸一遍教程也就一下午的时间。svg的接口网上文档比较少,有些用法stackoverflow都找不到。
如果是学习d3的,推荐前面的教程网站,这里只是个人备忘录,想到哪里说到哪里的流水账,记录那些让人眼前一亮或者眼前一黑的点,以及几个开发中反复查询的用法。
好了,出发
1.
首先,你要在一个dom中添加svg,需要两个参数,width和height,一般我是这么给的
踩坑:需求在指定操作后才绘制该图标,dom display:none的时候,clientWidth和clientHeight是0,所以svg等dom display正常后再添加。
接下来最好设置一下svg的padding,用来应付后面出现的各种文字绘制超出不显示,UI修改等灵细操作。
因为svg直接传的都是px,所以需要根绝屏幕做一下自适应,size_1920函数如下:
坐标轴:
图标中用到最多的是坐标轴,使用坐标轴首先要设定比例尺,目前共用到了4种比例尺
线性比例尺
domain中设置数据的min/max,range中设置svg实际位置。
备注:svg是以左上角为原点的,而常规视角中原点是左下角,所以这里的range起止位置是 svgHeight-0,即起始位置是下边缘y=svgHeight,终止位置是上边缘y=0。这一点需要谨记,后面有许多计算x、y位置的,y的位置总要反着想。其他比例尺也是一样的。
离散比例尺
or
时间比例尺
时间比例尺适用于一些以时间为坐标轴的情况
备注:比如这里是今天到明天,第二天nextDay的算法,就用秒,其他都不行。UTC时间一定要注意,所有时间都改成UTC时间,所有get一律要加UTC。
颜色比例尺
这是个比较特殊的比例尺,不是用来画坐标轴的,而是把颜色均匀分割,category10,category20等等都有,填一个index,输出一个色值。在有些d3的版本中,颜色比例尺没用放在scale里面。
坐标轴
可能还有更多种类的比例尺,目前还没有接触,下面就开始生成坐标轴数据。
几个常用参数
scale,必要参数,把比例尺填进去
orient,非必填,刻度相对坐标轴的位置 top bottom left right
ticks,非必填,刻度个数 注:ticks只是参考,最终生成刻度个数以数据为准,比如数据需要25个刻度,但ticks填了17,那d3就没办法了,会生成一个d3生成的刻度个数中选跟17最接近的。
innerTickSize,非必填,内刻度高,默认是6。 注:这里设置了innerTickSize是整个svg的高度,和y轴innerTickSize设置整个svg的宽配合行程网格效果,正常的坐标轴就再画一个,注意高度计算时错开
outerTickSize,非必填,外刻度高
tickFormat,非必填,刻度值,默认为空 注:这是一个数据绑定参数,即根据数据生成不同的值
tickPadding,非必填,刻度文字与坐标轴的间距
真正的绘制
给svg中添加g元素,call绑定坐标轴数据,attr就是给g元素添加各种属性,class(是不是很熟悉),transform。 注:svg中没有top left margin等属性,大的位移使用transform。
曲线
坐标轴绘制完后,就是曲线的绘制,先生成曲线绘制函数
曲线绘制函数参数
x、y就是根据数据来计算坐标,这里是比例尺大显身手的地方。
interpolate,线段怎么弯曲,讲的最好的是这个地址
http://www.oxxostudio.tw/articles/201411/svg-d3-02-line.html
注:basis曲线保证了优美,没保证曲线与数据的一致,像我这种人是完全无法接受的。
绘制曲线
这一行代码解读一下就是选择所有class是data-line的元素,然后给它绑定数据。data-line哪里来的?这里涉及到d3中一个概念,update enter exit
selectAll得到的元素跟数据相比,有三种可能,元素个数 大于/小于/等于数据个数。
数据超出元素个数的部分叫enter,比如第一次绘制时,所有元素都属于paths.enter
paths元素比较简单直接,基本上只需要给一个属性d就能画出来了,d可以用前面的曲线函数直接生成。
stroke,线条颜色,这里可以用颜色比例尺 d3.scale.category10(i)
fill就是填充颜色,paths填充的是一个面。
不超出的部分叫update,即需要更新的部分,paths.update可以看到,也可以直接更新数据,这里是数据驱动的最直观表现
数据少于元素个数的部分叫exit,一般exit只有一个用法
到这里,一个坐标轴差不多出来了,但,是不是少了点啥,对,UED最喜欢的灵魂一击,动画。
曲线进入/更新的时候要动画怎么办
d3的动画很好写
增加 transition ease 和 delay即可,transition前后是动画的起始和结束状态。
绘制一个圆
矩形
半圆角矩形是用path生成的,顶部圆角矩形
topRoundRect和rightRoundRect乍一看完全搞不懂,这里讲的比较详细https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths,仔细观察下,就是
M 起始x y坐标
h 纵移
v 横移
a 比较复杂 前两个参数是圆角的x y radius
中间三个参数 001是三个flag,只能是0/1 圆角矩形都是001
第一个代表弧线角度是否要大于180
第二个代表正角度还是负角度
第三个代表正方向还是反方向
z是合拢
最后两个参数是终止的x y位置
当前了,还有更多的L C S等等,这里不研究了
文字
到这里,d3绘制的套路差不多都熟悉了,append data enter transform attr,拿来画个饼图吧!
生成饼图数据
查看一下this.pieData,你会发现数据增加了 startEngle 和 endEngle
注:饼图默认会按大小排序,如果不需要排序,增加一个sort(null)即可
弧线函数
饼图动画不能使用d了,要使用attrTween
简单的饼图动画
高级饼图动画,自己计算delay的时间,让饼一点一点出来
往饼图中间添加一个圆点
注:centriodData和Angle是钝/锐角的计算提出来,是因为在某些低配机子上,偶现绑定计算错误。
画一个折线
到这里,一般的坐标轴、饼图已经难不倒了,而且自己想添加什么就添加什么,无非就是计算x、坐标,d3就是一堆图形函数,帮你计算坐标而已,那还有什么新东西吗?假如UED说想要阴影,光效,这里介绍一下svg里面一个很牛叉的东西,filter
实话说,这个东西我也只是到抄过来调参的地步,比如dx dy。理解上只知道特效输出为result,下一个特效的in是这个result,其他也是一问三不知,而且看了之后着实没有深入了解下去的想法,简直就是手写Photoshop。
下面是几个介绍filter的地址,留下以备不时之需
1.https://www.w3.org/TR/SVG/filters.html
2.https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
3.https://jorgeatgu.github.io/svg-filters/