psd2html 0.0.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c285961d492dab7ec2462fa504d338c7cfd93801
+  data.tar.gz: e9dbd07796a7688e57c79c3965a9e5e2ad016e7e
+SHA512:
+  metadata.gz: 3d05e194a7dad02fcd2c6a529b5b29de98f4e0c03e3c7a2f750886ffaa3560d342f9a3c6e734e6dd7efb67ee0157c02eeb7cdbed69f08e0a73968bd12429f2c1
+  data.tar.gz: 22dbd20f07b74e0628e10f1c696745bd9143a49d0b1317413bd9206a13ea7b7903b855b2582d6c0b0ee909574a9285e56e9b799e6d6d9891deb1f7069d698123

data/bin/psd2html

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+require 'psd2html'
+psdPath = ARGV[0]
+dstHtmlPath = ARGV[1]
+psd = Psd2Html.new(psdPath)
+unless dstHtmlPath
+  puts psd.render()
+else
+  fh = File.new(dstHtmlPath, "w")  #创建一个可写文件流
+  fh.puts psd.render()
+  fh.close
+end

data/lib/psd2html.rb

@@ -0,0 +1,80 @@
+require 'psd'
+require_relative 'psd2html/until.rb'
+require_relative 'psd2html/convertor.rb'
+Dir.glob( File.expand_path( "psd2html/psconvertor/*.rb", File.dirname(__FILE__) ) ) do |convertor|
+  require convertor
+end
+Until.log("start generate psd tree....")
+class Psd2Html
+	CONVERTING_MAP = {
+		"text" => ::Psd2html::PsConvertor::Text,
+		"text-link" => ::Psd2html::PsConvertor::TextLink,
+		"block" => ::Psd2html::PsConvertor::Block,
+		"block-link" => ::Psd2html::PsConvertor::BlockLink,
+		"img" => ::Psd2html::PsConvertor::Img,
+		"img-link" => ::Psd2html::PsConvertor::ImgLink,
+		"img-bg" => ::Psd2html::PsConvertor::ImgBackground,
+		"root" => ::Psd2html::PsConvertor::Root
+	}
+	def initialize(psdPath)
+		psd = PSD.new(psdPath)
+		psd.parse! 
+		blockRoot = psd.tree
+		rootConvertor = get_convertor(blockRoot,1)
+		@treeRoot = format_tree(rootConvertor)
+    puts "start generate psd tree...."
+  end
+
+  def render_css
+    Until.log("start render css....")
+  	return @treeRoot.render_css
+  end
+  def render_html
+    Until.log("start render html....")
+  	return @treeRoot.render_html
+  end
+
+  def render
+  	return <<-STR
+			<meta charset="utf-8" />
+			<style type="text/css">
+			#{@treeRoot.render_css}
+			</style>
+			#{@treeRoot.render_html}
+		STR
+
+  end
+
+  protected
+  	def get_convertor(node,index)
+
+  		return CONVERTING_MAP["root"].new(node,index) if node.root? 
+
+  		return unless node.name.include?("|") 
+
+  		convertorName = node.name.split('|').last.to_s
+  		unless CONVERTING_MAP.include?(convertorName)
+  			return
+  		end
+  		CONVERTING_MAP[convertorName].new(node,index)
+		end
+		def format_tree(convertor)
+			if convertor.psNode.has_children?
+				convertor.psNode.children.each_with_index do |node,index|
+					childConvertor = get_convertor(node,index)
+					if childConvertor
+						childConvertor.parentConvertor = convertor
+						convertor.childrenConvertors << format_tree(childConvertor)
+					end
+				end
+			end
+			convertor
+		end
+
+end
+
+
+
+
+
+

data/lib/psd2html/convertor.rb

@@ -0,0 +1,120 @@
+require "mustache"
+require 'digest/md5'
+require_relative '../until.rb'
+module Psd2html
+  	class Convertor
+  		attr_accessor :psNode, :index, :childrenConvertors,:parentConvertor
+
+  		CSS_TPL = "\.{{classname}}\{ \n{{#styles}} {{key}}:{{value}};\n{{/styles}}  \}"
+  		CSS_HASH_BASE = {
+  			"classname" => 'root-container',
+  			"styles" => {
+  				"position" => "relative"
+  			}
+  		}
+  		@@css_dictory = {
+
+  		}
+  		
+  		HTML_TPL = "<{{tag}} {{#attributes}} {{key}}=\"{{value}}\" {{/attributes}}>{{{content}}}</{{tag}}>"
+  		HTML_HASH_BASE = {
+  			"attributes" => {
+  				"class" => "root-container"
+  			},
+  			"tag" => "div",
+  			"content" => ""
+  		}
+  		def initialize(psNode,index)
+		    @psNode = psNode
+		    @index = index
+		    @parentConvertor = nil
+		    @childrenConvertors = []
+	    end
+	    def guid
+	    	className = @psNode.name.split("|")[-2]
+	    	guidStr = className+@index.to_s
+	    	if /\p{Han}+/u.match(className)
+	    		Digest::MD5.hexdigest(guidStr)
+	    	else
+	    		guidStr
+	    	end
+	    	
+	    end
+	    #需要被重写，用于生成css的对象hash
+	    def css_skeleton
+	    	CSS_HASH_BASE
+	    end
+	    #需要被重写，用于生成html的模板渲染对象
+	    def html_skeleton
+	    	HTML_HASH_BASE
+	    end
+	    def get_css_tpl
+	    	CSS_TPL
+	    end
+	    def get_html_tpl
+	    	HTML_TPL
+	    end
+	    #为了处理css的同名问题，需要使用一个hash来去重
+	    def css_map
+	    	return unless css_skeleton
+	    	data = css_skeleton.clone
+	    	data["styles"] = hash_to_array(data["styles"])
+	    	data["convertnode"] = self
+	    	@@css_dictory[data["classname"]] = data
+	    	@childrenConvertors.each do |node|
+	    		node.css_map
+	    	end
+	    end
+	    def render_css
+        Until.log("start generate css of #{@psNode.name}...")
+	    	css_map()
+	    	cssStr = ""
+	    	@@css_dictory.values.each do |cssData|
+	    		cssStr += "\n" + Mustache.render(cssData['convertnode'].get_css_tpl,cssData)
+	    	end
+	    	@@css_dictory = {}
+	    	cssStr = sync_css(cssStr)
+        Until.log("done generate css of #{@psNode.name}...")
+	    end
+	    
+	    def render_html
+        Until.log("start generate html of #{@psNode.name}...")
+	    	return "" unless html_skeleton
+	    	data = html_skeleton.clone
+	    	data["attributes"] = hash_to_array(data["attributes"])
+				
+				@childrenConvertors.each do |node|
+	    		data["content"] += node.render_html
+	    	end
+	    		    	
+	    	htmlStr = Mustache.render(get_html_tpl,data)
+	    	htmlStr = sync_html(htmlStr)
+        Until.log("done generate html of #{@psNode.name}...")
+	    end
+	    def sync_css(cssstr)
+	    	cssstr
+	    end
+	    def sync_html(htmlstr)
+	    	htmlstr
+	    end
+	    protected
+	      def hash_to_array(originHash)
+		    	dstArray = []
+		    	originHash.each do |key,value| 
+		    		dstArray << {"key"=>key,"value"=>value}
+		    	end
+		    	dstArray
+	      end 
+	      def css_hook(style)
+	      	hookHash = {
+	      		"pt" => "px",
+	      		"MicrosoftYaHei" => "microsoft yahei"
+	      	}
+	      	hookHash.each do |key,value|
+	      		style = style.gsub(key,value)
+	      	end
+	      	style
+	      end
+  	end
+
+end

data/lib/psd2html/psconvertor/block.rb

@@ -0,0 +1,36 @@
+module Psd2html
+	module PsConvertor
+	  	class Block < ::Psd2html::Convertor
+	  		
+	  		def css_skeleton
+	  			cssRenderData = {
+	  				"classname" => "block-#{guid}",
+		  			"styles" => {
+		  				"position"=> "absolute",
+		  				"display" => "inline-block",
+		  				"width" => "#{@psNode.width}px",
+		  				"height" => "#{@psNode.height}px",
+		  				"left" => "#{@psNode.left-@parentConvertor.psNode.left}px",
+	  					"top" => "#{@psNode.top-@parentConvertor.psNode.top}px",
+	  					"z-index" => "#{@psNode.depth}#{@parentConvertor.childrenConvertors.length - @index.to_i}"
+		  			}
+	  			}
+		    	cssRenderData = CSS_HASH_BASE.merge(cssRenderData)
+		    end
+		    def get_html_tpl
+		    	"<{{tag}} {{#attributes}} {{key}}=\"{{value}}\" {{/attributes}}><div style=\"position:relative;\">{{{content}}}</div></{{tag}}>"
+		    end
+		    def html_skeleton
+		    	htmlRenderData = {
+		    		"attributes" => {
+		  				"class" => "block-#{guid}"
+		  			},
+		  			"tag" => "div"
+		    	}
+		    	htmlRenderData = HTML_HASH_BASE.merge(htmlRenderData)
+		    end
+	  		
+	  	end
+  	end
+
+end

data/lib/psd2html/psconvertor/blockLink.rb

@@ -0,0 +1,21 @@
+module Psd2html
+	module PsConvertor
+	  	class BlockLink < ::Psd2html::PsConvertor::Block
+	  		def guid
+		    	"link-" + super
+		    end
+		    def html_skeleton
+		    	htmlRenderData = {
+		    		"attributes" => {
+		  				"class" => "block-#{guid}",
+		  				"href" => "#"
+		  			},
+		  			"tag" => "a",
+		    	}
+		    	htmlRenderData = HTML_HASH_BASE.merge(htmlRenderData)
+		    end
+	  		
+	  	end
+  	end
+
+end

data/lib/psd2html/psconvertor/img.rb

@@ -0,0 +1,37 @@
+module Psd2html
+	module PsConvertor
+  	class Img < ::Psd2html::Convertor
+  		def css_skeleton
+	    	cssRenderData = {
+  				"classname" => "img-#{guid}",
+	  			"styles" => {
+	  				"position" => "absolute",
+  					"display" => "inline-block",
+	  				"width" => "#{@psNode.width}px",
+	  				"height" => "#{@psNode.height}px",
+	  				"left" => "#{@psNode.left-@parentConvertor.psNode.left}px",
+	  				"top" => "#{@psNode.top-@parentConvertor.psNode.top}px",
+	  				"z-index" => "#{@psNode.depth}#{@parentConvertor.childrenConvertors.length - @index.to_i}"
+	  			}
+  			}
+	    	cssRenderData = CSS_HASH_BASE.merge(cssRenderData)
+	    end
+	    def get_html_tpl
+	    	"<{{tag}} {{#attributes}} {{key}}=\"{{value}}\" {{/attributes}} />"
+	    end
+	    def html_skeleton
+	    	imgUrl = "./img-source-#{guid}-#{Time.now.to_i}.png"
+	    	@psNode.image.save_as_png(imgUrl)
+	    	htmlRenderData = {
+	    		"attributes" => {
+	  				"class" => "img-#{guid}",
+	  				"src" => imgUrl
+	  			},
+	  			"tag" => "img"
+	    	}
+	    	htmlRenderData = HTML_HASH_BASE.merge(htmlRenderData)
+	    end
+  	end
+  end
+
+end

data/lib/psd2html/psconvertor/imgBackground.rb

@@ -0,0 +1,23 @@
+module Psd2html
+	module PsConvertor
+  	class ImgBackground < ::Psd2html::Convertor
+  		#对父转换对象进行了css注入
+	    def css_map
+	    	imgUrl = "./img-source-#{guid}-#{Time.now.to_i}.png"
+  			@psNode.image.save_as_png(imgUrl)
+  			parentConvertorClassName = @parentConvertor.css_skeleton()["classname"]
+  			if @@css_dictory.has_key?(parentConvertorClassName)
+	    		@@css_dictory[parentConvertorClassName]['styles'] << {"key" => "background","value" => "url(#{imgUrl}) center center"}
+	    	end
+	    end
+	    def html_skeleton
+	    	return nil
+	    end
+	    def get_html_tpl
+	    	return ""
+	    end
+	    
+  	end
+  end
+
+end

data/lib/psd2html/psconvertor/imgLink.rb

@@ -0,0 +1,38 @@
+module Psd2html
+	module PsConvertor
+  	class ImgLink < ::Psd2html::Convertor
+  		def guid
+	    	"link-" + super
+	    end
+	    def css_skeleton
+	    	cssRenderData = {
+  				"classname" => "img-#{guid}",
+	  			"styles" => {
+	  				"position" => "absolute",
+  					"display" => "inline-block",
+	  				"width" => "#{@psNode.width}px",
+	  				"height" => "#{@psNode.height}px",
+	  				"left" => "#{@psNode.left-@parentConvertor.psNode.left}px",
+	  				"top" => "#{@psNode.top-@parentConvertor.psNode.top}px",
+	  				"z-index" => "#{@psNode.depth}#{@parentConvertor.childrenConvertors.length - @index.to_i}"
+	  			}
+  			}
+	    	cssRenderData = CSS_HASH_BASE.merge(cssRenderData)
+	    end
+	    def html_skeleton
+	    	imgUrl = "./img-source-#{guid}-#{Time.now.to_i}.png"
+	    	@psNode.image.save_as_png(imgUrl)
+	    	htmlRenderData = {
+	    		"attributes" => {
+	  				"class" => "img-#{guid}",
+	  				"href" => "#"
+	  			},
+	  			"content" => "<img src=\"#{imgUrl}\" />",
+	  			"tag" => "a"
+	    	}
+	    	htmlRenderData = HTML_HASH_BASE.merge(htmlRenderData)
+	    end
+  	end
+  end
+
+end

data/lib/psd2html/psconvertor/root.rb

@@ -0,0 +1,10 @@
+require "mustache"
+
+module Psd2html
+  	module PsConvertor
+  		class Root < ::Psd2html::Convertor
+  		
+  		end
+  	end
+
+end

data/lib/psd2html/psconvertor/text.rb

@@ -0,0 +1,37 @@
+module Psd2html
+	module PsConvertor
+  	class Text < ::Psd2html::Convertor
+  		def css_skeleton
+	    	cssRenderData = {
+  				"classname" => "text-#{guid}",
+	  			"styles" => {
+	  				"position" => "absolute",
+  					"display" => "inline-block",
+	  				"width" => "#{@psNode.width+2}px",
+	  				"height" => "#{@psNode.height+2}px",
+	  				"left" => "#{@psNode.left-@parentConvertor.psNode.left}px",
+	  				"top" => "#{@psNode.top-@parentConvertor.psNode.top}px",
+	  				"z-index" => "#{@psNode.depth}#{@parentConvertor.childrenConvertors.length - @index.to_i}"
+	  			}
+  			}
+  			@psNode.text[:font][:css].split(";").each do |styleString|
+  				styleKey = styleString.split(":")[0]
+  				styleValue = styleString.split(":")[1]
+  				cssRenderData["styles"][styleKey] = css_hook(styleValue)
+  			end
+	    	cssRenderData = CSS_HASH_BASE.merge(cssRenderData)
+	    end
+	    def html_skeleton
+	    	htmlRenderData = {
+	    		"attributes" => {
+	  				"class" => "text-#{guid}",
+	  			},
+	  			"tag" => "span",
+	  			"content" => @psNode.text[:value]
+	    	}
+	    	htmlRenderData = HTML_HASH_BASE.merge(htmlRenderData)
+	    end
+  	end
+  end
+
+end

data/lib/psd2html/psconvertor/textLink.rb

@@ -0,0 +1,22 @@
+module Psd2html
+	module PsConvertor
+  	class TextLink < ::Psd2html::PsConvertor::Text
+  		def guid
+	    	"link-" + super
+	    end
+
+	    def html_skeleton
+	    	htmlRenderData = {
+	    		"attributes" => {
+	  				"class" => "text-#{guid}",
+	  				"href" => "#"
+	  			},
+	  			"tag" => "a",
+	  			"content" => @psNode.text[:value]
+	    	}
+	    	htmlRenderData = HTML_HASH_BASE.merge(htmlRenderData)
+	    end
+  	end
+  end
+
+end

data/lib/psd2html/version.rb

@@ -0,0 +1,3 @@
+module Psd2html
+  VERSION = "0.0.4"
+end

data/lib/until.rb

@@ -0,0 +1,31 @@
+class Until
+  
+  def self.log(info)
+    STDOUT.puts "log:" + green(info)
+  end
+
+  def self.error(info)
+    STDOUT.puts "error:" + red(info)
+  end
+
+  protected
+    def self.colorize(color_code,str)
+      "\e[#{color_code}m#{str}\e[0m"
+    end
+
+    def self.red(str)
+      colorize(31,str)
+    end
+
+    def self.green(str)
+      colorize(32,str)
+    end
+
+    def self.yellow(str)
+      colorize(33,str)
+    end
+
+    def self.pink(str)
+      colorize(35)
+    end
+end

metadata

@@ -0,0 +1,119 @@
+--- !ruby/object:Gem::Specification
+name: psd2html
+version: !ruby/object:Gem::Version
+  version: 0.0.4
+platform: ruby
+authors:
+- cherishpeace
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-05-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: mustache
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: psd
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: |-
+  psd2html是一个可以通过特定ps约定来自动生成html的ruby命令行程序。
+  psd2html会自动解析你的psd文件生成相应的html代码包括css。生成的代码都是使用绝对定位实现的，因此psd2html适合的场景为对性能，html语义都不是要求很高的场景，比如只有几天寿命的活动页面。
+
+  应该说完美的psd2html的解决方案几乎是不存在的。经过一些调研，最终确定了使用一种约定生成的方式。
+email:
+- xhzhuweikang@163.com
+executables:
+- psd2html
+extensions: []
+extra_rdoc_files: []
+files:
+- bin/psd2html
+- lib/psd2html.rb
+- lib/psd2html/convertor.rb
+- lib/psd2html/psconvertor/block.rb
+- lib/psd2html/psconvertor/blockLink.rb
+- lib/psd2html/psconvertor/img.rb
+- lib/psd2html/psconvertor/imgBackground.rb
+- lib/psd2html/psconvertor/imgLink.rb
+- lib/psd2html/psconvertor/root.rb
+- lib/psd2html/psconvertor/text.rb
+- lib/psd2html/psconvertor/textLink.rb
+- lib/psd2html/version.rb
+- lib/until.rb
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+- bin
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: psd2html是一个可以通过特定ps约定来自动生成html的ruby程序。支持命令行和程序内部引用。
+test_files: []