2016年9月27日 星期二

疾風獅虎(ハヤテライガー)

ハヤテライガー

ゾイドジェネシス主角村雨獅虎的另一個型態疾風獅虎(ハヤテライガー),跟村雨獅虎最大不一樣就是顏色,還有刀從背後的一把變成左右兩把比較小一點的。

ハヤテライガーハヤテライガー

這系列做得不錯,但應該是受限造型的關係,可以擺的動作沒有很多。

ハヤテライガーハヤテライガーハヤテライガー

可以感受得到發出低沈「吼吼吼」叫聲的感覺。

ハヤテライガーハヤテライガー


RoboInfo 上的介紹




Read more

2016年9月26日 星期一

[My Weather 我的氣象站] Semantic UI 改版

MyWeather 我的氣象站

最近因為想玩 Semantic UI所以把 MyWeather 我的氣象站給改版,覺得 Semantic UI 比起 Bootstrap 來說元件更多可以用,也不會像 Bootstrap 因為太氾濫所以很多網站都差不多,但東西多的缺點也是會怕要載進去太肥大,大概就得花一些取捨,使用的邏輯上跟 Bootstrap 有點不一樣,但相信花一些時間應該就可以適應了。

右下的折線圖使用了 C3.js,之前用過 D3 和 C3 做出一些不錯的圖表,有興趣的也可以玩看看,組合出自己喜歡的東西。

而各地氣象的頁面在這邊,可以點選標題旁的選單切換地點,之後應該會再抽一些時間把各種氣象資訊再重新整理一下,也希望大家能夠多給一些意見囉。

Read more

[C3.js] 改變橫軸縱軸樣式

C3.js 是一個以 D3.js 為基礎的畫圖表的工具,不過畫出來的圖表預設是淺底黑字,如果頁面上的背景顏色比較深就會看不清楚,這邊介紹一下怎麼調整顏色。

簡單加上這些 CSS 就可以了。
  1. .c3-axis-x, .c3-axis-y, .c3-legend-item{   
  2.     fill:#fff;         
  3. }   
  4. .c3 .c3-axis-y path, .c3 .c3-axis-y line,.c3 .c3-axis-x path, .c3 .c3-axis-x line {   
  5.     stroke: #fff;   
  6. }  

因為 SVG 畫圖的填色方式跟傳統的 CSS 元件不大一樣,注意改成 fill 或 stoke 就可以了。

完成效果如下:
Read more

2016年9月22日 星期四

[OpenCart] 新增廣告 banner 的方法

要在 OpenCart 新增廣告 Banner 的話,在登入管理後台後,進入系統管理 -> 版面 -> 廣告管理
OpenCart 廣告banner

就可以設定幻燈片廣告了,可以設定很多組,每組各有自己輪播的內容。
OpenCart 廣告banner
OpenCart 廣告banner


設定好內容好,再到 擴充模組 -> 基本模組 -> 幻燈片廣告 設定要出現的幻燈片。
OpenCart 廣告banner

選擇位置跟要啟用的幻燈片就可以了。
OpenCart 廣告banner
Read more

2016年9月21日 星期三

2016年9月20日 星期二

使用 codeigniter 處理縮圖

codeigniter 也有方便的 lib 處理圖片縮圖的部分,簡單的範例如下。

  1. $config['image_library'] = 'gd2';   
  2. $config['source_image'] = '/path/to/image/mypic.jpg';   
  3. $config['create_thumb'] = TRUE;   
  4. $config['maintain_ratio'] = TRUE;   
  5. $config['width'] = 1024;   
  6. $config['height'] = 1024;   
  7.   
  8. $this->load->library('image_lib'$config);   
  9.   
  10. $this->image_lib->resize();  

上頭的程式碼告訴 image_resize 函式庫去找一個位於 source_image 資料夾裡名叫 mypic.jpg 的圖片,然後呼叫 GD2 image_library 影像函式庫來創建一張尺寸為 1024 X 1024 像素的縮圖,有設定 maintain_ratio 選項時,縮圖會在維持原本的長寬比例下,會盡可能的接近 width 跟 height 的像素尺寸大小,所以這個可以用來設定照片的最長邊,可以搭配伺服器抓到的圖片尺寸來判斷是否要縮圖,而縮圖的檔名會命名為 mypic_thumb.jpg。

若要一次上傳多張照片,就需要 reset image_lib。
  1. $this->load->library('image_lib');   
  2. $this->image_lib->clear();   
  3. $this->image_lib->initialize($config);   
  4. $this->image_lib->resize();   
  5. if ( ! $this->image_lib->resize())   
  6. {   
  7.     echo $this->image_lib->display_errors();   
  8.     return;   
  9. }  

檢查錯誤的話使用 $this->image_lib->display_errors();

Read more

2016年9月19日 星期一

2016年9月18日 星期日

Related Posts Plugin for WordPress, Blogger...