CG Library SkiaSharp「案内掲示盤」

・------------------------------------------------------------------・
・いたる所で見かける電子案内盤。
・どんな風に作られているのか興味を持ち試作してみました。
・------------------------------------------------------------------・

※フルスクリーン表示するとそれっぽく見えます。(実在しない医師です)

• ソケット等で受け取ったデータを所定の位置に表示させるだけなので特に難しい所はありません。
• 文字がスクロールして案内文を流す仕組みは文字列のX位置を可変させればできるのでこの部分も大した事ありません。(ニコニコ動画風表示アプリで検証済)
• プログラム的な難易度よりむしろ、見栄えを良くするためのデザインセンス、イラストレータ等の知識が必要。(イラストレータ使いが居ない場合はコーダがやる羽目になる)
• 元データはMSPAINTで作りました。角を丸くすると良いが面倒なのでそのまま。
• 左下に時計入れたりもっと作り込もうと思いましたが実際に使う訳でもないのでやめました。
• Skia使うまでもなくこの位の物はGDI/GDI+でも十分可能。
• SkiaSharpについては別記事、SkiaSharp導入を参照。

XAML

<Window x:Class="INFORMATION.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:INFORMATION" xmlns:wpf="clr-namespace:SkiaSharp.Views.WPF;assembly=SkiaSharp.Views.WPF"
        mc:Ignorable="d" WindowStyle="None" ShowInTaskbar="False" 
        Title="INFORMATION">
    <Grid>
        <wpf:SKElement x:Name="skiaCanvas" PaintSurface="PaintSurface3"  />
    </Grid>
</Window>

画面最大化。別途、[Windowsの設定] でタスクバ自動的に隠す設定

public MainWindow() {
    InitializeComponent();
    this.WindowState = WindowState.Maximized;
}

壁紙貼り付け(フリー素材)

// 壁紙
canvas.DrawBitmap (SKBitmap.Decode(@"c:\bit1.png"), 0, 0, new SKPaint());

壁紙の上に外来名

// 外来名
SKPaint TopText = new SKPaint{
    Color = new SKColor(255, 0, 225),
    IsAntialias=true,
    LcdRenderText=true,
    TextSize = 79,
    StrokeWidth = 17,
    FakeBoldText=true,  // 太字
    Typeface = SKTypeface.FromFamilyName("LINE Seed JP_OTF"),
};

canvas.DrawText ("中央棟 肝胆膵外科/整形外科のご案内", 20, 85, TopText  );
    canvas.DrawLine (20,97,1040,97,TopTextLINE);
}

薄黒い透過したバーの上に医師名。医師名、青バーは透過させない。

var bk_BAR= new SKPaint(){
    FilterQuality = SKFilterQuality.High,
    LcdRenderText=true,
    IsAntialias = true,
    Color=new SKColor(255,255, 255, 150) //最後を少なくすると透過
};  

var BLUE2= new SKPaint(){
    FilterQuality = SKFilterQuality.High,
    IsAntialias = true,
    LcdRenderText=true,
};  
                       
// 文字の後ろの透過されたバー
canvas.DrawBitmap(SKBitmap.Decode(@"c:\bar.jpg"), 10, 400, bk_BAR);

// 青いバー
var BLUEBAR = SKBitmap.Decode (@"c:\BLUEBAR.jpg");
canvas.DrawBitmap(BLUEBAR, 720, 412, BLUE2);

// 医師名
canvas.DrawText("１６診  長尾 佳輔", 0, 504, Dr);

PaintSurface() WUXGA 24インチに最適化 全コード

void PaintSurface3(object sender, SKPaintSurfaceEventArgs args){
           
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    // 外来名
    SKPaint TopText = new SKPaint{
        Color = new SKColor(0, 0,0),
        IsAntialias=true,
        LcdRenderText=true,
        TextSize = 79,
        StrokeWidth = 17,
        FakeBoldText=true,  // 太字
        Typeface = SKTypeface.FromFamilyName("LINE Seed JP_OTF"),
    };

    // 外来名下線
    SKPaint TopTextLINE= new SKPaint{
        Color = new SKColor(0, 0,0),
        IsAntialias=true,
        StrokeWidth = 4
    };

    // 下部案内
    SKPaint underInfo = new SKPaint{
        Color = SKColors.White,
        IsAntialias=true,
        LcdRenderText=true,
        TextSize = 78,
        StrokeWidth = 17,
        FakeBoldText=true,  // 太字
        Typeface = SKTypeface.FromFamilyName("LINE Seed JP_OTF"),
    };

    // 最下部修飾 (余計な線を消す)
    SKPaint futterLINE= new SKPaint{
        Color = new SKColor(0, 0, 0),
        StrokeWidth = 5
    };
           
    // 医師名
    SKPaint Dr = new SKPaint{
        Typeface = SKTypeface.FromFamilyName("LINE Seed JP_OTF"),
        Color = new SKColor(255, 255, 255),
        StrokeCap = (SKStrokeCap)3,
        IsAntialias=true,
        StrokeWidth = 1,
        TextSize=86
    };

    // 「下記の時間帯の方を診察中です。 」　
    SKPaint TmZone = new SKPaint{
        Color = new SKColor(0, 0, 0),
        IsAntialias=true,
        LcdRenderText=true,
        TextSize = 42,
        StrokeWidth = 17,
        FakeBoldText=true,  // 太字
        Typeface = SKTypeface.FromFamilyName("LINE Seed JP_OTF"),
    };

    // 文字の後ろの透過バー
    var bk_BAR= new SKPaint(){
        FilterQuality = SKFilterQuality.High,
        LcdRenderText=true,
        IsAntialias = true,
        Color=new SKColor(255,255, 255, 150) //最後を少なくなると透過
    };  

    // お名前でお呼びします　透過バー
    var BAR2= new SKPaint(){
        FilterQuality = SKFilterQuality.High,
        IsAntialias = true,
        LcdRenderText=true,
        Color=new SKColor(0,0, 0, 180) //最後を少なくなると透過
    };  

    var BLUE2= new SKPaint(){
        FilterQuality = SKFilterQuality.High,
        IsAntialias = true,
        LcdRenderText=true,
    };  
         
    // 壁紙
    canvas.DrawBitmap (SKBitmap.Decode(@"c:\bit1.png"), 0, 0, new SKPaint());

    // 外来名 ヘッダ
    canvas.DrawText ("中央棟 肝胆膵外科/整形外科のご案内", 20, 85, TopText  );
    canvas.DrawLine (20,97,1040,97,TopTextLINE);

    // フッダ修飾
    canvas.DrawLine (00,1199,1920,1199,futterLINE);
    canvas.DrawText ("診察室                 医師                 下記の時間帯の方を診察中です。 診察中   時間帯の人数", 80, 218, TmZone);
               
    /////////////////////////////////////////////////////////////////////
    // 文字の後ろの透過されたバー
    canvas.DrawBitmap(SKBitmap.Decode(@"c:\bar.jpg"), 10, 235, bk_BAR);

    // バー
    var YBAR = SKBitmap.Decode (@"c:\EM.jpg");
    canvas.DrawBitmap(YBAR, 720, 249, BLUE2);
    canvas.DrawText("１５診  末松 宏子", 0, 340, Dr);
    
    ////////////////////////////////////////////////////////////////////////////
    // 文字の後ろの透過されたバー
    canvas.DrawBitmap(SKBitmap.Decode(@"c:\bar.jpg"), 10, 400, bk_BAR);

    // 青いバー
    var BLUEBAR = SKBitmap.Decode (@"c:\BLUEBAR.jpg");
    canvas.DrawBitmap(BLUEBAR, 720, 412, BLUE2);
    canvas.DrawText("１６診  長尾 佳輔", 0, 504, Dr);

    ////////////////////////////////////////////////////////////////////////////
    // 文字の後ろの透過されたバー
    canvas.DrawBitmap(SKBitmap.Decode(@"c:\bar.jpg"), 10, 565, bk_BAR);

    // 青いバー
    BLUEBAR = SKBitmap.Decode (@"c:\TIME.jpg");
    canvas.DrawBitmap(BLUEBAR, 720, 576, BLUE2);

    canvas.DrawText("１３診  甲畑 健一", 0, 670, Dr);

    ////////////////////////////////////////////////////////////////////////////
    // 文字の後ろの透過されたバー
    canvas.DrawBitmap(SKBitmap.Decode(@"c:\bar.jpg"), 10, 730,bk_BAR);

    // 青いバー
    BLUEBAR = SKBitmap.Decode (@"c:\BLUEBAR.jpg");
    canvas.DrawBitmap(BLUEBAR, 720, 742, BLUE2);
    
    canvas.DrawText("１８診  増成 澄夏", 0, 838, Dr);
           
}