DEVELOPER'S BLOG

下载链接：http://sneezry.com/wp-content/uploads/sneezry.com/2012/05/baiduofflinedwn.zip

此插件不接受任何反馈，此插件也不会进行任何升级，欢迎其他感兴趣的开发者进行优化，MIT 2.0协议共享。

Ninelock需要您的Chrome浏览器升级至最新版本（18.0.1025.162或以上，您可以通过点击浏览器右上角扳手图标，关于Google Chrome浏览器查看您的浏览器当前版本号）

Ninelock是一款协助您输入密码的插件。这款插件可以帮助你把密码变得简单但却安全。或许大家会发现这个插件似曾相识，没有错，这个就是把Android的屏幕画图解锁移植到了网页上。

Ninelock使用起来非常简单，您首先需要到 http://9lock.sneezry.com/ （如果无法打开请进入 https://ninelock.sinaapp.com/ ）注册一个账户。注册完毕后直接关闭页面，然后安装插件，插件安装完毕之后网页中的所有密码输入框右侧都会多出一个图标，点击这个图标即可唤出Ninelock的画图框。依次点击圆点进行连接，双击一个圆点退出输入。

如果您是第一次使用Ninelock，您需要对您在互联网上的帐号进行升级，进入您的互联网帐号，进行修改密码，在输入新密码处开启Ninelock进行绘图，同样密码确认也进行此操作，完成后，您就可以使用Ninelock进行密码输入了。

请您不要担心在其他没有安装Ninelock的计算机上无法登陆您的互联网帐号，此时您可以登录 http://9lock.sneezry.com/ 进行图形密码转换文本密码，得到文本密码后粘贴至密码输入框中进行登录。目前 http://9lock.sneezry.com/ 兼容IE9及以上版本的IE浏览器、Chrome浏览器、Firefox浏览器、Opera浏览器和Safari浏览器。

好吧，这个插件其实是为愚人节写的，但是写完发现很真有点用处。这个插件很简单，就是把网页颜色变成反色，黑变白，红变绿……

插件的官方下载地址为https://chrome.google.com/webstore/detail/dpngnfpemfncmjhfhcbokalcacfocinc/，如果无法进入官方平台，可以通过此链接安装。

使用起来也很简单，在任意网页上同时按下Ctrl和向下方向键即可开启夜间模式。

快用这个插件给你的朋友变个魔术吧，祝大家愚人节快乐！

当你读到这个题目的时候可能会感觉这篇文章不应该出现在这里，不过请放心，这篇文章依然是讲解页面编程，且侧重于前端编程的。这个拗口又有些难懂的标题就是我本科毕业设计的题目，我的导师想通过此项目在国外科学杂志（这里泛指的是和科学相关的杂志，而不是著名的Science杂志）上发表一篇论文，我不知道我提前在此和大家探讨这个项目他会不会介意，不过我确实很想和大家分享我在开发工程中的收获和成就。

目前的半导体器件仿真软件几乎均为国外开发，加之多用于利润丰厚的半导体工业，所以软件授权费用往往非常高昂，这迫使大多数企业、学校等组织不得不将有限的几套授权软件安装在计算能力较强的服务器上，而其他设计人员通过远程桌面等方式连接至该服务器进行设计，从而减少在软件授权上的开销。这种工作模式比较传统，而且普遍，但随之而来的问题也无法避免：如学校进行教学时多人对同一参数的器件进行重复模拟不必要地耗费资源，通过远程桌面且使用桌面化连接服务器使服务器资源消耗严重，数据处理置于服务端运行使客户端计算资源被浪费，远程桌面连接的系统级登录带来安全隐患……解决或改善这些问题是我的毕业设计要实现的目标。

前面说了一些我的专业上的问题，那么下面我就和大家谈谈这个项目以及和页面编程相关的问题。

说到半导体器件的仿真着实令人头疼，因为仿真过程中产生的数据有时高达12MB，这个数据对于桌面应用来说确实不算什么，但对于页面编程来说却是个大挑战。我之前将此项目布置于新浪的云计算服务器中，但经过有限次的实验后就发现，显然新浪对处理巨大数据文件（大于5MB）没有做好准备，同时新浪的云计算服务器单连接内存上限为10MB，PHP单次最大内存为5MB，这就是说静态文件单次上传总量不能超过10MB，PHP单次处理数据不得超过5MB，而现实情况是，处理13MB的静态数据，PHP消耗内存量达130+MB，于是我不得不将项目移回本地进行实验。对于同一仿真数据，我开始试图通过服务端PHP缓存和客户端页面缓存解决重复计算的问题，但是这两方面我都没有做好，后来我的解决方案是运行一次之后将结果以.js为后缀名保存至cache文件夹，当用户请求计算相应数据文件时，先检测对应缓存文件是否存在，如果存在直接输出header，302跳转至相应缓存文件，而缓存文件为静态文件，客户端进行缓存，如果客户端对某一数据请求过一次计算，那么当客户端再此进行请求时，一系列设置终会引导客户端读取本地的缓存，而服务端则不必进行重复计算，即使是不同客户端进行请求，服务端也只是将计算好的缓存文件输出至客户端，对于内网来说，带宽不是问题。这一设计在服务端和客户端均进行了数据的缓存，对于多大数十兆的数据文件来说，即减轻了服务端的压力，又提升了仿真的速度。对于产生的缓存文件则可以调用系统级的计划任务定期进行清理，遇到类似问题的同学，如果搞不定web服务器本身的缓存设置和后端程序设定的客户端缓存设置，不妨参考下我的解决方法。

对于后端的工作没有什么可继续探讨的，只是将数据进行初步整理（将多个空格隔开的数据整理为JSON格式）以便Javascript可以轻易地对其处理。

说实话，当我刚刚开始这个项目的时候，面对10+MB的数据，我真的对Javascript没有什么信心，不过在我进行简单的几次实验后，我发现Chrome浏览器完成的非常出色，甚至IE浏览器（第9版本）也能完成任务，虽然流畅度稍差。后来我也测试了火狐和Opera，结果同样让人满意，于是我对下一步的工作有了些信心。

目前这个项目大体上包含两个部分，一个部分是通过离散样本点进行描点画出曲线图，我使用了一个现成的项目（稍后补充具体名称和项目地址，暂时找不到了，sorry），在此基础上进行了修改，包括对数坐标轴、选择放大区域、选择自变量范围、多种拟合方式、添加坐标轴文字、多曲线做图、多数据文件做图、多数据标识等等。在我做这个项目的过程中，我发现最小二乘法插值结果并不理想，所以在做器件性能仿真的同学如果没有必要可不必考虑此插值方法，而直接用最简单的直线连接。绘制曲线图我是使用HTML5的Canvas进行的，由于HTML5出色的性能，这个交互我做得非常出色，连导师也赞不绝口，同时他对目前前端的发展情况表示惊讶。在我研究Canvas的时候发现一个有趣的问题，就是如果我直接对Canvas的width和height属性赋值时，Canvas的坐标是正确的，即我在Canvas坐标的(10, 10)处画点，该点确实在Canvas左上角距上边界和左边界各10px处，但如果对Canvas的style属性的width和height赋值，则会出现问题，此时Canvas坐标轴中的1和1px不是对应关系，我是在Chrome浏览器中发现这个问题的，不知道其他浏览器运行结果如何，所以为了兼容性，应尽量选择直接对Canvas的width和height这两个属性赋值，而不是对style属性的width和height两项赋值。

由于这个项目需要用到保存功能，对于保存功能可以通过两个方法实现：一、将Canvas通过toDataURL()得到图片base64编码后的数据，POST到服务端（由于此数据往往多于2K，虽然W3C对GET传值的长度没有限制，但是多数浏览器均有自己的限制，如IE为2048字节，即2K），服务端进行base64解码后输出header及图片数据，引导用户保存，但这种方法的弊端也显而易见，消耗了服务端的资源，POST数据时延长了处理时间，但好处是可以通过服务端输出不同的header进行不同的操作，如声明文件类型、更改文件名、兼容各浏览器等。二、将Canvas通过toDataURL()得到图片base64编码后的数据，更改MIME后直接引导用户打开此链接，这种方法的好处是不依赖于服务器，即使和服务器断开连接依然可以进行操作，缺点是不支持更改文件名，文件往往命名为“下载”，而且无后缀名，需要用户自行更改，同时如果数据过大（目前我得到的上限可能不到20MB）会造成浏览器由于内存不足而崩溃，同时部分IE浏览器不支持。在我的项目中我选择的是第二个方案。

比起曲线图，更让我骄傲的是器件结构图绘图功能，这个功能更加强大，而且完全是我自己开发的，没有借鉴任何其他的项目。刚刚开始这个项目时，结构图的绘制并不在计划中，原因很简单，那就是这个难度较大，实现的可能性较小，但在我一周内完成了事先计划的任务后，导师认为应该尝试下实现绘制结构图的功能，于是我就做了，真正做起来发现也没有想象中的困难。由于结构图数据量巨大，刚刚接触的时候确实很让人头疼，后来仔细翻阅了相关文档，终于研究出了一些眉目。在做这个功能时遇到点小问题，最后也解决了，我就和大家说说我遇到的这些问题和我的解决方法。第一个问题就是器件边界的描绘。服务端给出的数据中，边界的描绘不是一次连续完成的，而是分段完成的，即上面描一点，下面描一点，左边描一点，上面再描一点……这样分次多个线段围成的区域，Canvas并不认为其是闭合区域，即使使用了closepath之后。由于Canvas不认为其为闭合区域，所以这给不同区域着色带来了很大麻烦。我的解决方法是先找到一个线段进行绘制，当数据文件显示画其他不连续的线段时先continue这次的循环，直到找到其他和当前线段相连的线段为止再进行绘制。绘制后的线段进行标记，再次进行循环时跳过这些线段，直到循环一次后没有再绘制出任何线段为止，跳出循环，闭合路径。这种方法同样有个小问题，但在我这个项目中没有遇到，就是有些区域是回字形的，这种方法只能绘制这种区域的一个边界，幸好我的项目中遇到的数据均是先绘制外围边界，后绘制内侧边界，这样虽然会使回字形区域的着色范围变为口字形，但是区域内部的小口字形区域着色后会覆盖掉外侧区域多余的部分。第二个问题就是浓度着色的问题。仿真结果是在器件截面上取多个离散的点，给出的浓度为这个点的浓度，那么对于绘制器件浓度的分布会使人困惑。我的解决方法是以某一点和与该点相邻的另外两点浓度的平均值代表这三点确定的三角形区域的浓度，然后根据浓度值对这个三角形区域进行着色。在着色的过程中，我发现有些浓度是线性变化的，有些则是指数变化的，所以在着色的功能上，我设定了线性浓度梯度着色和对数浓度梯度着色这两个选项。

在绘制结构图的工程中还有一个问题，我觉得值得单独拿出来和大家分享，就是器件局部放大的功能。虽然曲线图中也有局部放大的功能，但这两个功能绝对是两码回事。由于结构图更为复杂，对于放大后的边界更加难于处理，我的解决方案是创建了两个不同尺寸的Canvas，一个Canvas作为Background，绘制坐标轴，另一个Canvas隐藏，绘制放大后的器件结构图，而放大后超出范围的部分则被浏览器自动舍弃，随后通过toDataURL()得到该Canvas的数据，将其粘贴至Background的Canvas中结合成完整的图像。这个解决方案也遇到了一个问题，就是有时将隐藏Canvas的数据粘贴至Background的Canvas中时会偶尔出现空白，即粘贴失败，后来我在粘贴过程中使用了setTimeout延时了10ms后有所改善，但仍有极个别情况出现粘贴失败，而延时20ms会在视觉上造成影响，所以我添加了刷新按钮，当粘贴失败时，手动再粘贴一次。

当这些功能一个个实现之后，我觉得已经差不多完成了，但又一个问题摆在了我面前：导师希望能实现PS格式文件的输出。这里提到的PS文件并不是我们常说的Photoshop格式文件，而是Postscript文件，该文件是由Adobe开发的打印机语言。这个文件也是可视化的图像文件，但是是矢量的，即放大后不失真，而且很多打印机原生支持此文件，而不需要计算机进行辅助处理。值得说明的是，PS文件比SVG文件更加强大，虽然两者均是矢量图片描述文件，但是PS正如其名，它是一门语言，不是描述性语言，而是编程语言，其中有if、else等逻辑功能。

导师的意思是找一找现成的库，这样就可以将目前的工作结合现成的库实现漂亮的功能。但理想总是美好的，在我翻阅了大量搜索结果之后，发现将PS逆向转化为Canvas的项目有很多，比如WPS（这个和金山公司的WPS不是一个项目）和PostCanvas等，而将Canvas输出为PS的项目我却没有找到，无奈只好还得自己从头研究。在查阅了PS文档后，我发现PS对图像的描述方法和Canvas非常像，不过有趣的是PS语言是一种对数据入栈式处理的语言，所以无需括号（包括“（”、“）”和“{”、“}”），因为栈的顺序是固定的。比如在计算(3+4)*(5+6)这个算式时，PS的语句是3 4 add 5 6 add mul，过程是3、4先入栈，之后add指令取出栈中头两个数据，即3、4进行相加得到7后，将7入栈，随后将5、6入栈，add指令又将栈中头两个数据，即5、6相加得到11后入栈，mul将栈中头两个数据7、11相加后得到77入栈，整个过程结束。

不过我没有用到这些，虽然前面介绍那些对于这个项目来说显得有些多余，不过我觉得这种语言巧妙的思路值得和大家分享，但对于beginner来说读这样的程序会显得有些吃力。正如之前提到的，PS也有描述图像的能力，和Canvas都有moveto、lineto、fill、stroke、route等等的基础图形绘制指令，也有对文字进行处理的指令来显示文字。于是在整个实现过程显得比较轻松，只需将Canvas指令翻译为对应的PS指令即可，而得到的结果也基本令人满意。

这个项目从开始到目前所想到的思路、遇到的问题和解决的方法我基本都提到了，由于项目还没有完成，同时论文还没有发表，很抱歉我暂时还不能把源码放到上面和大家分享，不过我决定这个项目做完并发表之后，我会将前端、后端以及服务器配置的相关文档一起开源，供大家自由下载、使用。我在毕业设计的开题报告中就把节省在软件授权费用开销的目的写进了项目初衷中，所以这不会是一个商业项目。

最后，和大家分享一些目前这个项目所取得的进展。

横向浓度线性递减，通过300阶颜色绘制后很漂亮，上方为超薄二氧化硅覆盖层

上图上方突出部分局部放大图，由于二氧化硅覆盖层很薄，此处采点非常密集，可以发现即使放大后，网格依然和细致，该图整体点的个数过万，描绘指令高达20万次，但Chrome浏览器还是出色地完成了，而且几乎感觉不到程序处理数据所花费的时间。

这是一个CMOS结构的实例，这个实例来自某款传统绘图软件的文档，由于该文档由于实例说明，所以图中网格的精度达不到现实中的要求，不过这个图中的绘制指令也达到了数千条。

这个图展示的是光照后某杂质重分布后的浓度分布图，图中浓度纵向是指数分布的，白色部分表示相应浓度为0，两条白色伸向器件内部的白线上方为两个电极，器件下方也有一个电极。

通过查看2D浓度可以直观看到器件横向或纵向浓度分布情况，图中展示的为器件横向中心处纵向的浓度分布，当我们把坐标轴改为对数形式后，可以清晰地看到一条接近直线的曲线，这证明了我们前面所说的杂质纵向成指数分布，同时也说明了杂质是从器件上表面注入进器件的，而不是在熔凝器件材料的过程中掺入的。

由于Windows下我暂时无法打开.ps文件，暂时无法将其截图以进行对比，稍后我会在Ubuntu下进行截图后补发PS截图，同时上传.ps文件供大家下载查看。

从最后一张截图中大家会发现这个项目我称之为Nano，一是因为我的狗狗叫“闹闹”，Nano有些它的影子，我很喜欢家庭中这个可爱的新成员，每当我写code时它都会扒着桌子认真地看，时不时地还用它的小爪拍两下键盘，给我的code填上几行“注释”，于是我觉得也应该将这个项目献给“闹闹”；二是Nano这个词在IC工艺中时常见到，也表明了这个项目所服务的领域；三就是我对iPod Nano的喜爱，其实iPod Nano也是我送给妈妈的第一件数码相关的礼物。有同学玩笑说我这是侵权，于是我也开玩笑地说，那么我们叫它the new Nano好了，哈哈……

很遗憾地通知您，CreQQ可能永久都不会继续工作了，所以您有必要掌握在不登录CreQQ的情况下导出您的聊天记录的方法。

首先您需要确定您所使用的操作系统的类型，如果您的操作系统为以下类型之一，请访问对应的文件夹：

1、Windows Vista / Windows 7
C:\Users\*UserName*\AppData\Local\Google\Chrome\User Data\Default\Extensions
*其中“*UserName*”为您当前登录系统账户的用户名，通常您可以在开始菜单中找到

2、Windows XP及以下版本的Windows系统（包括Windows 2000、Windows 98、Windows 95等）
C:\Documents and Settings\*UserName*\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions
*其中“*UserName*”为您当前登录系统账户的用户名，通常您可以在开始菜单中找到

3、Linux系统，包括各种版本的Linux
~/.config/google-chrome/Default/Extensions/

4、Mac OS系统
~/Library/Application Support/Google/Chrome/Default/Extensions

当您确定您的操作系统后，请通过资源管理器访问相应的目录。

其次请您确定您所使用的CreQQ的版本，插件名称为“CreQQ”的为正式版，插件名称为“CreQQ（开发版）”的为开发版。如果您安装的是正式版，您需要继续进入名为“hbcpjlgihkbgbpcfdnajmfnlfgmnjajl”的文件夹；如果您安装的是开发版，您需要继续进入名为“ehgdacjejmbklleccjegbbaklhhoedlh”的文件夹。进入上述文件夹后，您可能还会看到一个名由数字和圆点组成的文件夹，请继续进入此文件夹。

之后请您找到名为“history.html”的文件，使用任意文本编辑器打开，然后在第200行（即“function main(){”之后）插入以下内容：

var ld = localStorage.webqqh.split(";;");var hn;for(hn=0; hn<ld.length-1; hn++){if(!document.getElementById(ld[hn].split(";")[0])){document.body.innerHTML += "<div onclick=\"if(document.getElementById('"+ld[hn].split(";")[0]+"').style.display=='block'){document.getElementById('"+ld[hn].split(";")[0]+"').style.display='none'}else{document.getElementById('"+ld[hn].split(";")[0]+"').style.display='block'}\">"+ld[hn].split(";")[0]+"</div>";document.body.innerHTML += "<div id='"+ld[hn].split(";")[0]+"' style='display:none;background:#e2e2e2'><div>"+(ld[hn].split(";")[1]==1?"我":ld[hn].split(";")[0])+"："+decodeURIComponent(decodeURIComponent(ld[hn].split(";")[2]))+"</div></div><hr/>";}else{document.getElementById(ld[hn].split(";")[0]).innerHTML += "<div>"+(ld[hn].split(";")[1]==1?"我":ld[hn].split(";")[0])+"："+decodeURIComponent(decodeURIComponent(ld[hn].split(";")[2]))+"</div>";}}return;

完成之后请保存此文件，随后通过插件选项中的“聊天记录”按钮就可以在不登录的情况下查看您的聊天记录了。

需要注意的是，由于未登录的情况下无法获得用户好友列表，离线查看聊天记录时无法显示好友头像、昵称和备注，仅能显示好友QQ号码。其中以q或者qq开头的号码是QQ群。

最后，对由此给您带来的不便深表歉意，同时如果您对上述内容用任何疑问，请在此留言，我会尽力帮助大家的。感谢大家过去的支持！